calendar/base/content/agenda-listbox.xml
author Arshad Khan <arshdkhn1@gmail.com>
Mon, 20 Aug 2018 18:30:13 +0530
changeset 33137 2dc8e39bc37f5aebdd85a237f5d6287db6c606ab
parent 32866 7973e4623106e0a0360f416156ea872ded1d8c8e
child 33140 84f675096b814ddb550c4cee0f25336366c16c2b
permissions -rw-r--r--
Bug 1484680 - Remove treenode-checkbox binding. r=philipp

<?xml version="1.0"?>
<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this
   - file, You can obtain one at http://mozilla.org/MPL/2.0/. -->

<bindings id="agenda-list-bindings"
          xmlns="http://www.mozilla.org/xbl"
          xmlns:xul="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"
          xmlns:xbl="http://www.mozilla.org/xbl">

  <binding id="agenda-base-richlist-item"
           extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
    <implementation>
      <field name="mOccurrence">null</field>;
      <property name="occurrence" readonly="true">
        <getter><![CDATA[
            return this.mOccurrence;
        ]]></getter>
      </property>
    </implementation>

    <handlers>
      <handler event="click" phase="capturing"><![CDATA[
          if (event.detail == 1) {
              agendaListbox.onSelect(this);
          } else if (event.button == 0) {
              // We only care about button 0 doubleclick events
              document.getElementById("agenda_edit_event_command").doCommand();
              event.stopPropagation();
              event.preventDefault();
          }
      ]]></handler>
      <handler event="mouseover"><![CDATA[
          event.stopPropagation();
          onMouseOverItem(event);
      ]]></handler>
    </handlers>
  </binding>

  <binding id="agenda-checkbox-richlist-item"
           extends="chrome://global/content/bindings/richlistbox.xml#richlistitem">
    <content>
      <xul:checkbox class="agenda-checkbox treenode-checkbox" anonid="agenda-checkbox-widget"
                                                   flex="1"
                                                   xbl:inherits="selected,label,hidden,disabled"/>
    </content>
    <implementation>
      <field name="kCheckbox">null</field>;
      <constructor><![CDATA[
          this.kCheckbox = document.getAnonymousElementByAttribute(this, "anonid", "agenda-checkbox-widget");

          this.dispatchEvent(new CustomEvent("bindingattached", { bubbles: false }));
      ]]></constructor>

      <method name="getItem">
        <body><![CDATA[
            return this.mItem;
        ]]></body>
      </method>

      <method name="setItem">
        <parameter name="synthetic"/>
        <parameter name="showsToday"/>
        <body><![CDATA[
            this.mItem = synthetic;
            let duration = synthetic.duration;
            if (showsToday) {
                this.kCheckbox.label = this.getAttribute("title");
                if (this.id == "nextweek-header") {
                    if (duration > 7) {
                        this.kCheckbox.label += " (" + unitPluralForm(duration / 7, "weeks") + ")";
                    } else {
                        this.kCheckbox.label += " (" + unitPluralForm(duration, "days") + ")";
                    }
                }
            } else if (synthetic.duration == 1) {
                this.kCheckbox.label = cal.getDateFormatter().formatDate(synthetic.start);
            } else {
                this.kCheckbox.label = cal.getDateFormatter().formatInterval(synthetic.start, synthetic.end);
            }
        ]]></body>
      </method>

      <method name="getCheckbox">
        <body><![CDATA[
            return this.kCheckbox;
        ]]></body>
      </method>
    </implementation>
  </binding>

  <binding id="agenda-allday-richlist-item"
           extends="chrome://calendar/content/agenda-listbox.xml#agenda-base-richlist-item">
    <content tooltip="itemTooltip">
      <xul:hbox anonid="agenda-container-box"
                class="agenda-allday-container-box"
                xbl:inherits="selected,disabled"
                flex="1">
        <xul:vbox pack="center" flex="1">
          <xul:label anonid="agenda-allDayEvent-date" class="agenda-event-start"
                     crop="end" xbl:inherits="selected" hidden="true"/>
          <xul:hbox flex="1" align="start">
            <xul:image anonid="agenda-multiDayEvent-image" class="agenda-multiDayEvent-image"/>
            <xul:calendar-month-day-box-item anonid="allday-item"
                                             flex="1"
                                             flat="true"/>
          </xul:hbox>
        </xul:vbox>
      </xul:hbox>
    </content>
    <implementation>
      <field name="mAllDayItem">null</field>;

      <constructor><![CDATA[
          this.mAllDayItem = document.getAnonymousElementByAttribute(this, "anonid", "allday-item");
      ]]></constructor>

      <method name="setOccurrence">
        <parameter name="aOccurrence"/>
        <parameter name="aPeriod"/>
        <body><![CDATA[
            this.mOccurrence = aOccurrence;
            this.mAllDayItem.occurrence = aOccurrence;
            let dateFormatter = cal.getDateFormatter();
            let periodStartDate = aPeriod.start.clone();
            periodStartDate.isDate = true;
            let periodEndDate = aPeriod.end;
            let startDate = this.mOccurrence[cal.dtz.startDateProp(this.mOccurrence)]
                                .getInTimezone(cal.dtz.defaultTimezone);
            let endDate = this.mOccurrence[cal.dtz.endDateProp(this.mOccurrence)]
                              .getInTimezone(cal.dtz.defaultTimezone);
            let endPreviousDay = endDate.clone();
            endPreviousDay.day--;
            // Show items's date for long periods but also for "Upcoming"
            // period with one day duration.
            let showDate = aPeriod.multiday || aPeriod.duration > 1;

            let date = "";
            let iconType = "";
            let allDayDateLabel = document.getAnonymousElementByAttribute(this, "anonid", "agenda-allDayEvent-date");
            setBooleanAttribute(allDayDateLabel, "hidden", !showDate);
            if (startDate.compare(endPreviousDay) == 0) {
                // All day event one day duration.
                date = dateFormatter.formatDate(startDate);
            } else if (startDate.compare(periodStartDate) >= 0 &&
                 startDate.compare(periodEndDate) <= 0) {
                // All day event spanning multiple days.
                iconType = "start";
                date = dateFormatter.formatDate(startDate);
            } else if (endDate.compare(periodStartDate) >= 0 &&
                       endDate.compare(periodEndDate) <= 0) {
                iconType = "end";
                date = dateFormatter.formatDate(endPreviousDay);
            } else {
                iconType = "continue";
                hideElement(allDayDateLabel);
            }

            let multiDayImage = document.getAnonymousElementByAttribute(this, "anonid", "agenda-multiDayEvent-image");
            multiDayImage.setAttribute("type", iconType);
            // class wrap causes allday items to wrap its text in today-pane
            let addWrap = document.getAnonymousElementByAttribute(this.mAllDayItem, "anonid", "eventbox");
            addWrap.classList.add("wrap");
            addWrap = document.getAnonymousElementByAttribute(this.mAllDayItem, "anonid", "event-detail-box");
            addWrap.classList.add("wrap");
            allDayDateLabel.value = date;
        ]]></body>
      </method>
    </implementation>

    <handlers>
      <handler event="dragstart" phase="capturing"><![CDATA[
          invokeEventDragSession(this.mAllDayItem.occurrence.clone(), this);
          event.stopPropagation();
          event.preventDefault();
      ]]></handler>
    </handlers>
  </binding>

  <binding id="agenda-richlist-item"
           extends="chrome://calendar/content/agenda-listbox.xml#agenda-base-richlist-item">
    <content tooltip="itemTooltip">
      <xul:hbox anonid="agenda-container-box" class="agenda-container-box" xbl:inherits="selected,disabled,current" flex="1">
        <xul:hbox>
          <xul:vbox>
            <xul:image anonid="agenda-calendar-image" class="agenda-calendar-image"/>
            <xul:spacer flex="1"/>
          </xul:vbox>
        </xul:hbox>
        <xul:vbox anonid="agenda-description" flex="1">
          <xul:hbox align="start">
            <xul:image anonid="agenda-multiDayEvent-image" class="agenda-multiDayEvent-image"/>
            <xul:label anonid="agenda-event-start" class="agenda-event-start" crop="end" flex="1" xbl:inherits="selected"/>
          </xul:hbox>
          <xul:label anonid="agenda-event-title" class="agenda-event-title" crop="end" xbl:inherits="selected"/>
        </xul:vbox>
      </xul:hbox>
    </content>

    <implementation>
      <method name="setOccurrence">
        <parameter name="aItem"/>
        <parameter name="aPeriod"/>
        <body><![CDATA[
            this.mOccurrence = aItem;
            this.setAttribute("status", aItem.status);
            let dateFormatter = Components.classes["@mozilla.org/calendar/datetime-formatter;1"]
                                          .getService(Components.interfaces.calIDateTimeFormatter);

            let periodStartDate = aPeriod.start.clone();
            periodStartDate.isDate = true;
            let periodEndDate = aPeriod.end.clone();
            periodEndDate.day--;
            let start = this.mOccurrence[cal.dtz.startDateProp(this.mOccurrence)]
                            .getInTimezone(cal.dtz.defaultTimezone);
            let end = this.mOccurrence[cal.dtz.endDateProp(this.mOccurrence)]
                          .getInTimezone(cal.dtz.defaultTimezone);
            let startDate = start.clone();
            startDate.isDate = true;
            let endDate = end.clone();
            endDate.isDate = true;
            let endAtMidnight = (end.hour == 0 && end.minute == 0);
            if (endAtMidnight) {
                endDate.day--;
            }
            // Show items's date for long periods but also for "Upcoming"
            // period with one day duration.
            let longFormat = aPeriod.multiday || aPeriod.duration > 1;

            let duration = "";
            let iconType = "";
            if (startDate.compare(endDate) == 0) {
                // event that starts and ends in the same day, midnight included
                duration = longFormat ? dateFormatter.formatDateTime(start)
                                      : dateFormatter.formatTime(start);
            } else if (startDate.compare(periodStartDate) >= 0 &&
                       startDate.compare(periodEndDate) <= 0) {
                // event spanning multiple days, start date within period
                iconType = "start";
                duration = longFormat ? dateFormatter.formatDateTime(start)
                                      : dateFormatter.formatTime(start);
            } else if (endDate.compare(periodStartDate) >= 0 &&
                       endDate.compare(periodEndDate) <= 0) {
                // event spanning multiple days, end date within period
                iconType = "end";
                if (endAtMidnight) {
                    duration = dateFormatter.formatDate(endDate) + " ";
                    duration = longFormat ? duration + cal.l10n.getDateFmtString("midnight")
                                          : cal.l10n.getDateFmtString("midnight");
                } else {
                    duration = longFormat ? dateFormatter.formatDateTime(end)
                                          : dateFormatter.formatTime(end);
                }
            } else {
                iconType = "continue";
            }
            let multiDayImage = document.getAnonymousElementByAttribute(this, "anonid", "agenda-multiDayEvent-image");
            multiDayImage.setAttribute("type", iconType);
            let durationbox = document.getAnonymousElementByAttribute(this, "anonid", "agenda-event-start");
            durationbox.textContent = duration;

            // show items with time only (today & tomorrow) as one line.
            if (longFormat) {
                let titlebox = document.getAnonymousElementByAttribute(this, "anonid", "agenda-event-title");
                titlebox.textContent = aItem.title;
            } else {
                durationbox.textContent += " " + aItem.title;
            }
            this.refreshColor();
        ]]></body>
      </method>

      <method name="refreshColor">
        <body><![CDATA[
            let calcolor = (this.mOccurrence &&
                             this.mOccurrence.calendar.getProperty("color")) ||
                            "#a8c2e1";

            let imagebox = document.getAnonymousElementByAttribute(this, "anonid", "agenda-calendar-image");
            imagebox.setAttribute("style", "background-color: " + calcolor + ";");
        ]]></body>
      </method>
    </implementation>

    <handlers>
      <handler event="dragstart"><![CDATA[
          invokeEventDragSession(this.mOccurrence.clone(), this);
      ]]></handler>
    </handlers>
  </binding>
</bindings>