px-datetime-picker-content.html

<!--
Copyright (c) 2018, General Electric

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
-->

<link rel="import" href="css/px-datetime-picker-content-styles.html"/>
<link rel="import" href="../px-datetime-field/px-datetime-field.html"/>
<link rel="import" href="../px-calendar-picker/px-calendar-picker.html"/>
<link rel="import" href="../px-datetime-common/px-datetime-shared-behavior.html"/>
<link rel="import" href="../px-datetime-common/px-datetime-buttons.html"/>
<link rel="import" href="../px-datetime-common/px-datetime-button-behavior.html"/>
<link rel="import" href="../iron-dropdown/iron-dropdown.html">


<dom-module id="px-datetime-picker-content">
  <template>
    <style include="px-datetime-picker-content-styles"></style>

    <iron-dropdown
      id="dropdown"
      class="dt-iron-dropdown"
      opened="{{opened}}"
      vertical-align="auto"
      horizontal-align="left"
      no-overlap="[[!fillContainer]]"
      dynamic-align="[[!fillContainer]]"
      vertical-offset="[[_getVerticalOffset(fillContainer)]]"
      position-target="[[_getPositionTarget(fillContainer, fitIntoElement)]]"
      fit-into="[[fitIntoElement]]">
      <div slot="dropdown-content" class="dt-container__box shadow-temporary">
        <template is="dom-if" if="[[fillContainer]]">
          <div class="dt-p__header shadow-navigation">
            <p class="dt-p__selected-date">[[selectedDate]]</p>
          </div>
        </template>
        <template id="timeTemplate" is="dom-if" if="[[_handleField(hideTime, fillContainer)]]">
          <div>
            <px-datetime-field
              id="time"
              class="dt-p-time"
              moment-obj="{{tempMomentObj}}"
              time-format="[[timeFormat]]"
              hide-icon
              hide-date
              time-zone="[[timeZone]]"
              is-valid="{{fieldIsValid}}"
              min-date="[[minDate]]"
              max-date="[[maxDate]]"
              resources="[[resources]]"
              language="[[language]]"
              formats="[[formats]]">
            </px-datetime-field>
          </div>
        </template>
        <div class="dt-p-calendar__wrapper">
          <px-calendar-picker
            id="calendar"
            class="dt-p-calendar"
            from-moment="{{tempMomentObj}}"
            base-date="[[tempMomentObj]]"
            day-week-start-index="[[dayWeekStartIndex]]"
            time-zone="[[timeZone]]"
            block-future-dates="[[blockFutureDates]]"
            block-past-dates="[[blockPastDates]]"
            prevent-range-selection
            min-date="[[minDate]]"
            max-date="[[maxDate]]"
            resources="[[resources]]"
            language="[[language]]"
            formats="[[formats]]">
          </px-calendar-picker>
          <button class="actionable caps dt-p-today" on-tap="_todayClicked">[[localize('Today')]]</button>
        </div>
        <div class="dt-p-time-buttons--wrapper">
          <template is="dom-if" if="[[_handleShowButtons(showButtons, fillContainer)]]">
            <px-datetime-buttons
              class="dt-p-buttons"
              is-submit-button-valid
              space-between="[[fillContainer]]"
              resources="[[resources]]"
              language="[[language]]"
              formats="[[formats]]">
            </px-datetime-buttons>
          </template>
        </div>
      </div>
    </iron-dropdown>

  </template>
</dom-module>

<script>
  Polymer({

    is: 'px-datetime-picker-content',
    behaviors:[
      PxDatetimeBehavior.Shared,
      PxDatetimeBehavior.Buttons
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'notify'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * Determines if the time will appear in the dropdown-content.
       * Set in datetime-picker
       */
      hideTime: {
        type: Boolean
      },
      /**
       * Pass through property.
       * Set in datetime-picker
       */
      timeFormat: {
        type: String
      },
      /**
       * Reflects if datetime-picker container is open/visible.
       * Set in datetime-picker
       */
      opened: {
        type: Boolean,
        reflectToAttribute: true,
        notify: true
      },
      /**
       * Reflects if the field is valid from datetime-picker.
       * Set in datetime-picker
       */
      fieldIsValid: {
        type: Boolean
      },
      /**
       * false : the dropdown-content will open in a small pop over
       * true : the dropdown-content will fill the window or
       * an element defined by the `fitIntoElement`.
       * Set in datetime-picker
       */
      fillContainer: {
        type: Boolean,
        reflectToAttribute: true
      },
      /**
       * The element that the dropdown-content will fully expand into when opened.
       * `fillContainer` must be true in order for this property to work
       * set in datetime-picker
       */
      fitIntoElement: {
        type: Object
      },
      /**
       * Displays the calendar's selected date in the dropdown-content
       * when `fillContainer` is true
       */
      selectedDate: {
        type: String,
        value: "Select Date"
      },
      /**
       * List of key/values to be included for translating this component.
       * Set in datetime-picker
       */
      resources: {
        type: Object,
      },
      /**
       * set a default for localizing
       * Set in datetime-picker
       */
      language: {
        type: String
      },
      /**
       * Use the key for localization if value for language is missing.
       * Should always be true for  our components
       */
      useKeyIfMissing: {
        type: Boolean,
        value: true
      },
      /**
       * Temporary moment object.
       * Pass through property.
       * Set in datetime-picker and by `_todayClicked`
       */
      tempMomentObj: {
        type: Object,
        notify: true,
        observer: '_updateSelectedDate'
      },
      /**
       * Set in datetime-picker
       */
      fieldElem: HTMLElement
    },
    /*
     * 'Today' button/text has been clicked
     */
    _todayClicked: function(evt) {
      var today = this._preserveTime(this.tempMomentObj, Px.moment.tz(Px.moment(), this.timeZone));
      this.set('tempMomentObj', today);
    },
    /**
     * Opens the calendar.
     * Called in datetime-picker
     */
    _open: function() {
      this.$.dropdown.open();
    },
    /**
     * Closes the calendar.
     * Called in datetime-picker
     */
    _close: function() {
      this.$.dropdown.close();
    },
    /**
     * Sync `selcetedDate` with calendar's moment obj
     */
    _updateSelectedDate : function(moment) {
      if(this.fillContainer){
        moment === null ? this.selectedDate = "Select Date" : this.selectedDate = moment.format('YYYY/MM/DD')
      }
    },
    /**
     * Determine if field should be displayed in container.
     * The dt-field will only appear in the container if fillContainer is true
     */
    _handleField: function(hideTime, fillContainer){
      return (!hideTime && fillContainer);
    },
    /**
     * If fillContainter is true show buttons
     */
    _handleShowButtons: function(showButtons, fillContainer){
      return fillContainer ? true : showButtons;
    },

    // ********************************************************************** //
    // Calculate iron-dropdown properties
    // ********************************************************************** //
    _getVerticalOffset: function(fillContainer) {
      return !fillContainer ? 20 : 0;
    },
    _getPositionTarget: function(fillContainer, fitIntoElement) {
      return fillContainer ? fitIntoElement : this.fieldElem;
    }
  });
</script>