px-datetime-entry.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="../polymer/polymer.html"/>
<link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html"/>
<link rel="import" href="px-datetime-validate.html"/>
<link rel="import" href="px-datetime-behavior.html"/>
<link rel="import" href="px-datetime-entry-cell.html"/>
<link rel="import" href="../px-icon-set/px-icon-set-utility.html"/>
<link rel="import" href="../px-icon-set/px-icon.html"/>
<link rel="import" href="../px-dropdown/px-dropdown.html"/>
<link rel="import" href="css/px-datetime-entry-styles.html"/>
<link rel="import" href="../px-overlay/px-overlay-behavior.html"/>


<!--
Range field component which displays a time or date and font awesome icon.

### Usage

    <px-datetime-entry
      moment="{{...}}"
      date-or-time="Date"
      moment-format="MM/DD/YYYY">
    </px-datetime-entry>

#### Styling
The following custom property is available for styling. Please also refer to px-forms-design for additional variables that can be used to customize the field's appearance.

Custom property | Description
:----------------|:-------------
`--px-datetime-read-only-text-color` | Text color for the text timezones
`--px-datetime-entry-selected` | Text highlight color when a cell is selected
`--px-datetime-icon-color` | Color of the icons
`--px-validation-error-text-color` | Color of invalid text

@element px-datetime-entry
@homepage index.html
@demo index.html
-->
<dom-module id="px-datetime-entry">
  <template>
    <style include="px-datetime-entry-styles"></style>

    <div id="wrapper" class="flex flex--middle">
      <div class="flex flex--middle dt-flex--no-shrink">
        <button class$="{{_getIconClass(hideIcon)}} btn btn--bare dt-icon-button" on-tap="_iconClicked">
            <span class="a11y">{{dateOrTime}}</span>
            <template is="dom-if" if="{{!hideIcon}}">
              <px-icon
                id="icon"
                class="dt-icon"
                icon="[[_setIcon(dateOrTime)]]">
              </px-icon>
            </template>
        </button>
        <template is="dom-repeat" items="{{_cellFormatArray}}">
          <px-datetime-entry-cell
            id="cell{{index}}"
            class="cell"
            order='{{index}}'
            moment-obj="[[momentObj]]"
            moment-format='[[item]]'
            symbol=[[_returnSymbol(index,_symbolCharArray)]]
            time-zone="[[timeZone]]"
            is-selected="{{isSelected}}"
            resources="[[resources]]"
            language="[[language]]"
            formats="[[formats]]">
          </px-datetime-entry-cell>
          <template is="dom-if" if={{_isSymbol(index,_symbolCharArray)}}>
            <div class="dt-entry-symbol">
              {{_returnSymbol(index,_symbolCharArray)}}
            </div>
          </template>
        </template>
      </div>
      <div class$="{{_getTimeZoneTextClass(showTimeZone, isValid)}}">
        <template is="dom-if" if="{{_showTimeZoneDropdown(showTimeZone)}}">
          <px-dropdown
            id="dropdown"
            class="dropdown"
            display-value="[[timeZone]]"
            button-style="bare"
            search-mode
            disable-clear
            items="[[_getTimeZoneList(showTimeZone)]]"
            on-focus="_handleDropdownFocus"
            on-blur="_handleDropdownBlur"
            hoist="[[hoist]]"
            container-type="[[containerType]]">
          </px-dropdown>
        </template>
        <template is="dom-if" if="{{_showTimeZoneText(showTimeZone)}}">
          <span id="timeZoneText" class="dt-text-input--non-editable">{{_getTimeZoneText(timeZone, showTimeZone)}}</span>
        </template>
      </div>
    </div>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'px-datetime-entry',

    behaviors: [
      PxDatetimeBehavior.SingleMoment,
      PxDatetimeBehavior.Validate,
      PxOverlayBehavior.sharedProperties
    ],

    properties: {
      /**
       * Date or Time icon/text
       *
       * Format is 'Date' or 'Time'
       */
      dateOrTime: {
        type: String,
        value: 'Date'
      },
      /**
       * Moment format string for the format to display/validate this field against
       * (see http://momentjs.com/docs/#/parsing/string-format/)
       */
      momentFormat: {
        type: String,
        value: 'YYYY/MM/DD',
        observer: '_formatChanged'
      },
      /**
       * Whether to hide the calendar or clock icon
       */
      hideIcon: {
        type: Boolean,
        value: false
      },
      /**
       * An array of tokens (e.g. ["YY","MM", "DD"])
       */
      _cellFormatArray:{
        type: Array,
        notify: true
      },
      /**
       * An array of the separator characters (e.g. ["/","/"])
       */
      _symbolCharArray:{
        type: Array,
        notify: true,
        value: function(){
          return []
        }
      },
      /**
       * Determines how to display the timezone:
       * - 'dropdown': shows the timezone as a dropdown which the user can use to select a different timezone. Only contains a subset of all timezones.
       * **NOTE: this collection of timezones uses the POSIX convention for timezone offset, meaning that positive values correspond to timezones WEST of GMT and negative values correspond to timezones EAST of GMT.**
       * - 'extendedDropdown': shows the timezone as a dropdown which the user can use to select a different timezone. Contains all existing timezones (588)
       * - 'text': shows the timezone as text, non editable
       * - 'abbreviatedText': shows the timezone as an abbreviated text, non editable (e.g. UTC, PST, EST, etc)
       */
      showTimeZone: {
        type: String,
        value: ''
      },
      /**
       * True if any cell is currently selected.
       */
      isSelected: {
        type: Boolean,
        notify: true
      },
      /**
       * Specifies if the dropdown content should get hoisted to a container in order to escape its current stacking context
       */
      hoist: {
        type: Boolean,
        value: false
      }
    },

    listeners: {
      'px-entry-cell-move': '_entryCellMove',
      'px-cell-blurred': '_handleBlur',
      'px-request-datetime-entry-copy': '_handleCopy',
      'px-request-datetime-entry-paste': '_handlePaste',
      'px-dropdown-selection-changed': '_updateTimeZone'
    },

    /**
     * calls `_formatChanged` if `momentFormat` is defined
     */
    attached: function(){
      if (typeof this.momentFormat === 'string') {
        this._formatChanged(this.momentFormat);
      }
    },
    /**
     * Clears the input value for each entry-cell input field.
     */
    clear: function() {
      var cells = Polymer.dom(this.root).querySelectorAll('.cell');
      cells.forEach(function(cell) {
        cell.clear();
      });
    },
    /**
     * Resets the input value for each entry-cell input field to the current momentObj.
     */
    setValueFromMoment: function() {
      var cells = Polymer.dom(this.root).querySelectorAll('.cell');
      cells.forEach(function(cell) {
        cell.setValueFromMoment();
      });
    },
    /**
     * Runs when `momentFormat` is changed
     * Updates `_cellFormatArray` and `_symbolCharArray` if one of them as changed
     *
     * This will also always size the symbols, regardless if the format changes - to ensure that
     * the symbols are sized properly during all render steps
     */
    _formatChanged: function(newMomentFormat) {
      if(newMomentFormat !== undefined) {
        var format = this._splitFormat(newMomentFormat);

        if (format._cellFormatArray !== this._cellFormatArray || format._symbolCharArray !== this._symbolCharArray) {
          this._cellFormatArray = format._cellFormatArray;
          this._symbolCharArray = format._symbolCharArray;

          this.notifyPath('_cellFormatArray',this._cellFormatArray);
          this.notifyPath('_symbolCharArray',this._symbolCharArray);

          this._sizeSymbols();
        }
      }
    },
    /**
     * create a dummy canvas to measure string and make size the input correctly
     */
    _sizeSymbols: function() {
      var style = window.getComputedStyle(this, null),
          fontSize = style.getPropertyValue('font-size'),
          fontFamily = style.getPropertyValue('font-family'),
          c = document.createElement('canvas'),
          ctx=c.getContext('2d'),
          symbols = Polymer.dom(this.root).querySelectorAll('.dt-entry-symbol'),
          length;

      ctx.font = fontSize + " " + fontFamily;

      symbols.forEach(function(symbol, index) {
        length = ctx.measureText(symbol.innerHTML.trim().replace('&nbsp;',' ')).width;
        length = Math.ceil(length);
        symbol.style['width'] = length + 'px';
      });
    },
    /**
     * Regex that splits the `momentFormat` into two arrays. One for the tokens and one for the separators
     */
    _splitFormat:function(momentFormat){
      var re = /[MDYAaHhkmsSZXx]+/g;
      var reSymbol = /\W+/g;
      return {
        _cellFormatArray: momentFormat.match(re),
        _symbolCharArray: momentFormat.match(reSymbol)
      };
    },
    /**
     * Helper function for a dom-if
     * Determines if the `_symbolCharArray` of `index` is null or undefined
     */
    _isSymbol: function(i, _symbolCharArray){
      if(_symbolCharArray === null || typeof(_symbolCharArray[i]) === 'undefined'){
        return false
      }
      return true
    },
    /**
     * return a string of the separation symbols
     */
    _returnSymbol: function(i, _symbolCharArray){
      if(_symbolCharArray === null || typeof(_symbolCharArray[i]) === 'undefined'){
        return ''
      }
      return  _symbolCharArray[i].split(' ').join('\xa0');
    },
    /**
     * helper to determine whether to diplay the calendar or clock icon
     */
    _setIcon: function(){
      if (this.dateOrTime.toLowerCase() === 'date') {
        return 'px-utl:calendar'
      } else {
        return 'px-utl:clock'
      }
    },
    /**
     * handle arrow keys switching cells or firing events to above components
     * @event px-next-field
     * @param {string} dateOrTime - Values can be "Date" or "Time"
     *
     * @event px-previous-field
     * @param {string} dateOrTime - Values can be "Date" or "Time"
     */
    _entryCellMove: function(evt){
      var ne = Polymer.dom(evt);
      var entryCellOrder = ne.rootTarget.order;

      if(entryCellOrder === this._cellFormatArray.length - 1 && evt.detail.dir === 1){
        this.fire('px-next-field', {dateOrTime: this.dateOrTime});
      } else if(entryCellOrder === 0 && evt.detail.dir === -1){
        this.fire('px-previous-field', {dateOrTime: this.dateOrTime});
      } else {
        this._focusCell(parseInt(entryCellOrder) + evt.detail.dir);
      }
    },
    /**
     *
     */
    _focusCell: function(cellNumber) {
      var elem = this.$$("#cell" + cellNumber);
      elem.$$('.datetime-entry-input').focus();
    },
    /**
     *
     */
    _focusLastCell: function() {
      this._focusCell(this._cellFormatArray.length - 1);
    },
    /**
     * when `px-cell-blurred` is fired run `_validateInput`
     */
    _handleBlur: function(){
      this._validateInput(this.momentFormat, this.timeZone);
    },
    /**
     * Catches the `on-focus-changed` from `px-dropdown` and fires this up for `px-datetime-field`
     * @private
     * @event px-dropdown-focused
     */
    _handleDropdownFocus: function(){
      this.fire('px-dropdown-focused', {}, {cancelable:true})
    },
    /**
     * Catches the `on-blur-changed` from `px-dropdown` and fires this up for `px-datetime-field`
     * @private
     * @event px-dropdown-blured
     */
    _handleDropdownBlur: function(){
      this.fire('px-dropdown-blurred', {}, {cancelable:true})
    },
    /**
     * used in a dom-if
     * determines whether to display the `text` or `abbreviatedText` option
     */
    _showTimeZoneText: function(showTimeZone) {
      return showTimeZone === "text" || showTimeZone === "abbreviatedText";
    },
    /**
     * used in a dom-if
     * determines whether to display the `dropdown` or `extendedDropdown` option
     */
    _showTimeZoneDropdown: function(showTimeZone) {
      return showTimeZone === "dropdown" || showTimeZone === "extendedDropdown";
    },
    /**
     * Create the `extendedDropdown` and `dropdown` items for `px-dropdown`
     *
     * If showTimeZone is not `extendedDropdown` or `dropdown` return and empty array.
     * Because of a timing issue `_getTimeZoneList` can be called before `_showTimeZoneDropdown`
     * causing an issue if the dropdown tries to redraw without `items` being defined.
     */
    _getTimeZoneList: function(showTimeZone) {
      if(showTimeZone === "extendedDropdown") {
        return Px.moment.tz.names();
      } else if (showTimeZone === "dropdown"){
        return [
          "Etc/GMT-14",
          "Etc/GMT-13",
          "Etc/GMT-12",
          "Etc/GMT-11",
          "Etc/GMT-10",
          "Etc/GMT-9",
          "Etc/GMT-8",
          "Etc/GMT-7",
          "Etc/GMT-6",
          "Etc/GMT-5",
          "Etc/GMT-4",
          "Etc/GMT-3",
          "Etc/GMT-2",
          "Etc/GMT-1",
          "Etc/GMT-0",
          "Etc/GMT",
          "Etc/GMT0",
          "Etc/GMT+0",
          "Etc/GMT+1",
          "Etc/GMT+2",
          "Etc/GMT+3",
          "Etc/GMT+4",
          "Etc/GMT+5",
          "Etc/GMT+6",
          "Etc/GMT+7",
          "Etc/GMT+8",
          "Etc/GMT+9",
          "Etc/GMT+10",
          "Etc/GMT+11",
          "Etc/GMT+12",
          "UCT",
          "UTC"
        ];
      }
      return [];
    },
    /**
     * when `px-dropdown-selection-changed` is fired update `timeZone`
     */
    _updateTimeZone: function(e) {
      this.set('timeZone', e.detail.val);
    },
    /**
     *
     */
    _handleCopy: function(e) {
      e.detail.setData('Text', Px.moment.tz(this.momentObj, this.timeZone).format(this.momentFormat));
      e.stopPropagation();
    },
    /**
     *
     */
    _handlePaste: function(e) {
      //try parsing what's been pasted...
      var data = e.detail.getData('Text'),
          newDate = Px.moment(data, this.momentFormat);
      if(newDate.isValid()) {

        //if this comes from another datetime-entry make sure it is the same type
        //otherwise just allow. This is to avoid changing the date when parsing a time
        /*if(!dateOrTime || (dateOrTime === this.dateOrTime)) {

        }*/
        this.momentObj = newDate;
      }else {
        console.log("tried to paste non valid date format: " + data + ". Expecting: " + this.momentFormat);
      }

      e.stopPropagation();
    },
    /**
     * Determines what classes should show on the label icon
     */
    _getIconClass: function(hideIcon){
      return !hideIcon ? "u-mr--" : "";
    },
    /**
     */
    _getTimeZoneText: function(timeZone, showTimeZone) {
      if(timeZone !== undefined && showTimeZone === "abbreviatedText") {
        tempMomentObj = this.momentObj ? this.momentObj : Px.moment();
        return Px.moment.tz.zone(timeZone).abbr(tempMomentObj);
      } else if (showTimeZone === "text"){
        return timeZone;
      }
    },
    /**
     * css helper. If a dropdown is showing add a margin-left of 10px;
     */
    _getTimeZoneTextClass: function (showTimeZone, isValid) {
      var classList = "dt-flex--no-shrink ";
      if (showTimeZone === "text" || showTimeZone === "abbreviatedText") {
        classList += "u-ml- ";
      }else if (showTimeZone === "dropdown" || showTimeZone === "extendedDropdown") {
        classList += "u-ml-- ";
      }
      return classList;
    },
    /**
     * This event is fired when the calendar or clock icon has been clicked
     *
     * @event px-datetime-entry-icon-clicked
     * @param {string} dateOrTime - Values can be "Date" or "Time"
     */
    _iconClicked: function(evt) {
      this.fire('px-datetime-entry-icon-clicked', {dateOrTime: this.dateOrTime});
    }
  });
</script>