px-vis-toolbar.html

<link rel="import" href="../polymer/polymer.html"/>
<link rel="import" href="../px-tooltip/px-tooltip.html"/>
<link rel="import" href="px-vis-behavior-common.html" />
<link rel="import" href="px-vis-behavior-d3.html" />


<!--
Element providing an on-chart zoom.

##### Usage

    <px-vis-toolbar 
      additional-detail="[[item]]"
      dynamic-menu-config="[[dynamicMenuConfig]]">
    </px-vis-toolbar>

@element px-vis-toolbar
@blurb Element providing a menu dynamically built depending on options
@homepage index.html
@demo demo.html
-->

<link rel="import" href="css/px-vis-toolbar-styles.html">

<dom-module id="px-vis-toolbar">
  <template>
    <style include="px-vis-toolbar-styles"></style>

      <!--main row-->
      <span id="mainRow" class$="flex [[_getRowDirection(horizontalAlignment)]]">
        <template id="mainRepeat" is="dom-repeat" items={{_internalConfig}} strip-whitespace>
          <span class$="u-p-- flex__item main-item [[_getSelectedClass(item.selected)]]" on-tap="_clickItem" value="{{index}}">
            <i class$="fa [[_getIcon(item)]] [[_getSelectedClass(item.selected)]]" value="{{index}}">
            </i>{{item.title}}
            <template is="dom-if" if="[[_hasTooltip(item)]]">
                <px-tooltip 
                  tooltip-message="[[item.tooltipLabel]]"
                  orientation="top"
                  smart-orientation>
                </px-tooltip>
              </template>
          </span>
        </template>
      </span>
      <!--sub row-->
      <template id="templateSubRow" is="dom-if" if="[[_isWithinChart(withinChart)]]">
        <span id="subRow" class$="flex [[_getRowDirection(horizontalAlignment)]] [[_getSubRowClass(withinChart)]]">
          <template id="subRepeat" is="dom-repeat" items={{currentSubConfig}} strip-whitespace>
              <span class$="u-p-- flex__item main-item [[_getSelectedClass(item.selected)]]" on-tap="_clickSubItem" value="{{index}}">
                <i class$="fa [[_getIcon(item)]] [[_getSelectedClass(item.selected)]]" value="{{index}}">
                </i>{{item.title}}
                <template is="dom-if" if="[[_hasTooltip(item)]]">
                    <px-tooltip 
                      tooltip-message="[[item.tooltipLabel]]"
                      orientation="top"
                      smart-orientation>
                    </px-tooltip>
                  </template>
              </span>
          </template>
        </span>
      </template>
  </template>
</dom-module>

<script>
  Polymer({

    is: 'px-vis-toolbar',

    behaviors: [
      PxVisBehavior.actionConfig,
      PxVisBehavior.toolbarConfig
    ],

    /**
     * Properties block, expose attribute values to the DOM via 'reflect'
     *
     * @property properties
     * @type Object
     */
    properties: {
      /**
       * Whether the toolbar is within a chart. drives where the secondary toolbar is displayed
       */
      withinChart: {
        type: Boolean,
        value: false
      },
      /**
       * The charts margin. Used to position the secondary toolbar if withinChart is true
       */
      chartMargin: {
        type: Object
      },
      /**
       * Current action config determined by what has been selected on the toolbar. Needs 
       * to be used by interaction space
       */
      actionConfig: {
        type: Object
      },
      /**
       * Config for default actions: tooltip/pan/zoom
       */
      _defaultActionsMapping: {
        type: Object,
        value: function() {
          return {
            'tooltip': {
              'tooltipLabel': 'tooltip',
              'icon': 'fa-crosshairs',
              'buttonGroup': 1,
              'actionConfig': {
                'mouseout': 'resetTooltip',
                'mousemove': 'calcTooltipData',
                'mousedown': 'null',
                'mouseup': 'null'
              }
            },
            'pan': {
              'tooltipLabel': 'pan',
              'icon': 'fa-arrows',
              'buttonGroup': 1,
              'actionConfig': {
                'mousedown': 'startPanning',
                'mouseup': 'stopPanning',
              },
              'subConfig': {
                'resetZoom': {
                  'icon': 'fa-expand',
                  'tooltipLabel': 'reset zoom to inital value',
                  'eventName': 'px-vis-toolbar-reset-zoom'
                }
              }
            },
            'zoom': {
              'tooltipLabel': 'zoom',
              'icon': 'fa-search',
              'buttonGroup': 1,
              'selected': true,
              'actionConfig': {
                'mousedown': 'startZooming',
                'mouseup': 'stopZooming',
              },
              'subConfig': {
                'zoomIn': {
                  'icon': 'fa-plus',
                  'tooltipLabel': 'zoom in',
                  'eventName': 'px-vis-toolbar-zoom-in'
                },
                'zoomOut': {
                  'icon': 'fa-minus',
                  'tooltipLabel': 'zoom out',
                  'eventName': 'px-vis-toolbar-zoom-out'
                },
                'undoZoom': {
                  'icon': 'fa-undo',
                  'tooltipLabel': 'undo zoom',
                  'eventName': 'px-vis-toolbar-undo-zoom'
                },
                'resetZoom': {
                  'icon': 'fa-expand',
                  'tooltipLabel': 'reset zoom to inital value',
                  'eventName': 'px-vis-toolbar-reset-zoom'
                }
              }
            }
          };
        }
      },
      /**
       * Current subconfiguration. Can be the result of the toolbarConfig or passed in from another toolbar
       */
      currentSubConfig: {
        type: Object,
        notify: true
      },
      /**
       * Current config used to build the toolbar
       */
      _internalConfig: {
        type: Object
      },
      /**
       * Horizontal alignment of the toolbar
       */
      horizontalAlignment: {
        type: String,
        value: 'right'
      }
    },
    observers: [
      '_configChanged(toolbarConfig.*, horizontalAlignment)',
      '_positionSubRow(withinChart, chartMargin, horizontalAlignment)'
    ],
    listeners: {
    },
    _configChanged: function() {
      var internalConf = [],
          keys = Object.keys(this.toolbarConfig);

      for(var i=0; i<keys.length; i++) {

        var toPush;
        //if this is a default action use it
        if(this._defaultActionsMapping[keys[i]]) {
          toPush = this._defaultActionsMapping[keys[i]];
        } else {
          toPush = this.toolbarConfig[keys[i]];
        }
        internalConf.push(toPush);

        if(toPush.selected) {
          this._tryProcessSubConfig(toPush);
        }
      }

      //reverse array to take flex row rev into account
      if(this.horizontalAlignment === 'right') {
        internalConf.reverse();
      }
      this.set('_internalConfig', internalConf);
    },
    /**
     * Called when clicking an item of the main toolbar. 
     */
    _clickItem: function(evt) {
      evt = Polymer.dom(evt);
      var index = evt.localTarget.value,
          conf = this._internalConfig[index];
      
      //make it the current selection if it is in a buttonGroup
      if(conf.buttonGroup) {
        
         //ensure we remember selection, deselect others and select this one
        for(var i =0; i<this._internalConfig.length; i++) {
          if(index !== i && this._internalConfig[i].buttonGroup === conf.buttonGroup) {
            this.set('_internalConfig.#' + i + '.selected', false);
          }
        }
        this.set('_internalConfig.#' + index + '.selected', true);
      }

      this._tryProcessSubConfig(conf);
      this._processItem(conf);
    },
    _tryProcessSubConfig: function(conf) {
      //process sub config if existing
      if(conf.subConfig) {
        var subConf = [],
            keys = Object.keys(conf.subConfig);

        //reverse order to take flex-row-reverse into account
        if(this.horizontalAlignment === 'right') {
          for(var i=keys.length-1; i>-1; i--) {
            subConf.push(conf.subConfig[keys[i]]);
          }
        } else {
          for(var i=0; i<keys.length; i++) {
            subConf.push(conf.subConfig[keys[i]]);
          }
        }
        
        this.set('currentSubConfig', subConf);
      } else {
        this.set('currentSubConfig', []);
      }
    },
    /**
     * Called when clicking an item of the secondary toolbar. 
     */
    _clickSubItem: function(evt) {
      evt = Polymer.dom(evt);
      var index = evt.localTarget.value,
          conf = this.currentSubConfig[index];

      //make it the current selection if it is selectable
      if(conf.buttonGroup) {

        //ensure we remember selection, deselect others and select this one
        
        for(var i =0; i<this.currentSubConfig.length; i++) {
          if(i !== index && this.currentSubConfig[i].buttonGroup === conf.buttonGroup) {
            this.set('currentSubConfig.#' + i + '.selected', false);
          }
        }
        this.set('currentSubConfig.#' + index + '.selected', true);
      }
      
      this._processItem(conf);
    },

    /**
     * Processes an item click: fire event if needed and set action config appropriately
     */
    _processItem: function(conf) {
      if(conf.actionConfig) {
        if(typeof conf.actionConfig === 'string') {
          this.set('actionConfig', JSON.parse(conf.actionConfig));
        } else {
          this.set('actionConfig', conf.actionConfig);
        }
      }

      if(conf.eventName) {

        //fire the event fromt the chart's context
        this.fire('px-vis-event-request', {'eventName': conf.eventName, 'data': conf});
      }

      if(conf.onClick) {
        var fn;
        if(typeof conf.onClick === 'function') {
          fn = conf.onClick;
        } else if (typeof conf.onClick === 'string') {
          fn = eval('var f = function() { return ' + conf.onClick + ';}; f();');
        }

        //run it from the chart's context
        this.fire('px-vis-action-request', {'function': fn, 'data': conf});
      }
    },

    _getIcon: function(item) {
      return item.icon ? (item.icon + ' u-mr--') : '';
    },
    _getSelectedClass: function(selected) {
      return selected ? 'selected ' : '';
    },
    _hasTooltip: function(item) {
      return item.tooltipLabel && item.tooltipLabel.length;
    },
    _positionSubRow: function(withinChart, chartMargin) {
      if(withinChart) {
        //make sure dom if is up to date
        this.$.templateSubRow.render();
        this.$$('#subRow').style['top'] = Number(chartMargin.top) + 'px';
        if(this.horizontalAlignment === 'left') {
          this.$$('#subRow').style['left'] = Number(chartMargin.left) + 'px';
        }
      }
    },
    _getSubRowClass: function(withinChart) {
      if(withinChart) {
        return 'subrow--chart ';
      } else {
        return '';
      }
    },
    _isWithinChart: function(withinChart) {
      return withinChart;
    },
    _getRowDirection: function(horizontalAlignment) {
      if(horizontalAlignment === 'right') {
        return 'flex--row--rev ';
      } else {
        return 'flex--row ';
      }
    }
  });
</script>