Extract series picker to new angular component (w/ less manual element positioning).

6 files changed, 277 insertions, 275 deletions

diff --git a/plugins/CoreVisualizations/CoreVisualizations.php b/plugins/CoreVisualizations/CoreVisualizations.php
index b832903228..5c633706e3 100644
--- a/plugins/CoreVisualizations/CoreVisualizations.php
+++ b/plugins/CoreVisualizations/CoreVisualizations.php
@@ -39,12 +39,17 @@ class CoreVisualizations extends \Piwik\Plugin
 
     public function getStylesheetFiles(&$stylesheets)
     {
+        $stylesheets[] = "plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.less";
+
         $stylesheets[] = "plugins/CoreVisualizations/stylesheets/dataTableVisualizations.less";
         $stylesheets[] = "plugins/CoreVisualizations/stylesheets/jqplot.css";
     }
 
     public function getJsFiles(&$jsFiles)
     {
+        $jsFiles[] = "plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.js";
+        $jsFiles[] = "plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.js";
+
         $jsFiles[] = "plugins/CoreVisualizations/javascripts/seriesPicker.js";
         $jsFiles[] = "plugins/CoreVisualizations/javascripts/jqplot.js";
         $jsFiles[] = "plugins/CoreVisualizations/javascripts/jqplotBarGraph.js";
diff --git a/plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.html b/plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.html
new file mode 100644
index 0000000000..103df58343
--- /dev/null
+++ b/plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.html
@@ -0,0 +1,49 @@
+<div
+    class="jqplot-seriespicker"
+    ng-class="{open: $ctrl.isPopupVisible}"
+    ng-mouseenter="$ctrl.isPopupVisible = true"
+    ng-mouseleave="$ctrl.onLeavePopup()"
+>
+    <a
+        href="#"
+        ng-click="$event.preventDefault(); $event.stopPropagation();"
+    >
+    +
+    </a>
+    <div
+        class="jqplot-seriespicker-popover"
+        ng-if="$ctrl.isPopupVisible"
+    >
+        <p class="headline">{{ ($ctrl.multiselect ? 'General_MetricsToPlot' : 'General_MetricToPlot') | translate }}</p>
+        <p
+            ng-repeat="columnConfig in $ctrl.selectableColumns"
+            class="pickColumn"
+            ng-click="$ctrl.optionSelected(columnConfig.column, $ctrl.columnStates)"
+        >
+            <input
+                class="select"
+                ng-checked="$ctrl.columnStates[columnConfig.column]"
+                ng-attr-type="{{ $ctrl.multiselect ? 'checkbox' : 'radio' }}"
+            />
+            <label>{{ columnConfig.translation }}</label>
+        </p>
+        <p
+            ng-if="$ctrl.selectableRows.length"
+            class="headline recordsToPlot"
+        >
+            {{ 'General_RecordsToPlot' | translate }}
+        </p>
+        <p
+            ng-repeat="rowConfig in $ctrl.selectableRows"
+            class="pickRow"
+            ng-click="$ctrl.optionSelected(rowConfig.matcher, $ctrl.rowStates)"
+        >
+            <input
+                class="select"
+                ng-checked="$ctrl.rowStates[rowConfig.matcher]"
+                ng-attr-type="{{ $ctrl.multiselect ? 'checkbox' : 'radio' }}"
+            />
+            <label>{{ rowConfig.label }}</label>
+        </p>
+    </div>
+</div>
\ No newline at end of file
diff --git a/plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.js b/plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.js
new file mode 100644
index 0000000000..b84a190ad3
--- /dev/null
+++ b/plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.js
@@ -0,0 +1,144 @@
+/*!
+ * Piwik - free/libre analytics platform
+ *
+ * @link http://piwik.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+/**
+ * This series picker component is a popup that displays a list of metrics/row
+ * values that can be selected. It's used by certain datatable visualizations
+ * to allow users to select different data series for display.
+ *
+ * Inputs:
+ * - multiselect: true if the picker should allow selecting multiple items, false
+ *                if otherwise.
+ * - selectableColumns: the list of selectable metric values. must be a list of
+ *                      objects with the following properties:
+ *                      * column: the ID of the column, eg, nb_visits
+ *                      * translation: the translated text for the column, eg, Visits
+ * - selectableRows: the list of selectable row values. must be a list of objects
+ *                   with the following properties:
+ *                   * matcher: the ID of the row
+ *                   * label: the display text for the row
+ * - selectedColumns: the list of selected columns. should be a list of strings
+ *                    that correspond to the 'column' property in selectableColumns.
+ * - selectedRows: the list of selected rows. should be a list of strings that
+ *                 correspond to the 'matcher' property in selectableRows.
+ * - onSelect: expression invoked when a user makes a new selection. invoked
+ *             with the following local variables:
+ *             * columns: list of IDs of new selected columns, if any
+ *             * rows: list of matchers of new selected rows, if any
+ *
+ * Usage:
+ * <piwik-series-picker />
+ */
+(function () {
+    angular.module('piwikApp').component('piwikSeriesPicker', {
+        templateUrl: 'plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.html?cb=' + piwik.cacheBuster,
+        bindings: {
+            multiselect: '<',
+            selectableColumns: '<',
+            selectableRows: '<',
+            selectedColumns: '<',
+            selectedRows: '<',
+            onSelect: '&'
+        },
+        controller: SeriesPickerController
+    });
+
+    SeriesPickerController.$inject = [];
+
+    function SeriesPickerController() {
+        var vm = this;
+        vm.isPopupVisible = false;
+
+        // note: column & row states are separated since it's technically possible (though
+        // highly improbable) that a row value matcher will be the same as a recognized column.
+        vm.columnStates = {};
+        vm.rowStates = {};
+        vm.optionSelected = optionSelected;
+        vm.onLeavePopup = onLeavePopup;
+        vm.$onInit = $onInit;
+
+        function $onInit() {
+            vm.columnStates = getInitialOptionStates(vm.selectableColumns, vm.selectedColumns);
+            vm.rowStates = getInitialOptionStates(vm.selectableRows, vm.selectedRows);
+        }
+
+        function getInitialOptionStates(allOptions, selectedOptions) {
+            var states = {};
+
+            allOptions.forEach(function (columnConfig) {
+                states[columnConfig.column || columnConfig.matcher] = false;
+            });
+
+            selectedOptions.forEach(function (column) {
+                states[column] = true;
+            });
+
+            return states;
+        }
+
+        function optionSelected(optionValue, optionStates) {
+            if (!vm.multiselect) {
+                unselectOptions(vm.columnStates);
+                unselectOptions(vm.rowStates);
+            }
+
+            optionStates[optionValue] = !optionStates[optionValue];
+
+            if (optionStates[optionValue]) {
+                triggerOnSelectAndClose();
+            }
+        }
+
+        function onLeavePopup() {
+            vm.isPopupVisible = false;
+
+            if (optionsChanged()) {
+                triggerOnSelectAndClose();
+            }
+        }
+
+        function triggerOnSelectAndClose() {
+            if (!vm.onSelect) {
+                return;
+            }
+
+            vm.isPopupVisible = false;
+
+            vm.onSelect({
+                columns: getSelected(vm.columnStates),
+                rows: getSelected(vm.rowStates)
+            });
+        }
+
+        function optionsChanged() {
+            return !arrayEqual(getSelected(vm.columnStates), vm.selectedColumns)
+                || !arrayEqual(getSelected(vm.rowStates), vm.selectedRows);
+        }
+
+        function arrayEqual(lhs, rhs) {
+            if (lhs.length !== rhs.length) {
+                return false;
+            }
+
+            return lhs
+                .filter(function (element) { return rhs.indexOf(element) === -1; })
+                .length === 0;
+        }
+
+        function unselectOptions(optionStates) {
+            Object.keys(optionStates).forEach(function (optionName) {
+                optionStates[optionName] = false;
+            });
+        }
+
+        function getSelected(optionStates) {
+            return Object.keys(optionStates).filter(function (optionName) {
+                return !! optionStates[optionName];
+            });
+        }
+    }
+})();
\ No newline at end of file
diff --git a/plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.less b/plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.less
new file mode 100644
index 0000000000..e950b1eefb
--- /dev/null
+++ b/plugins/CoreVisualizations/angularjs/series-picker/series-picker.component.less
@@ -0,0 +1,24 @@
+piwik-series-picker {
+  display: inline-block;
+
+  .jqplot-seriespicker {
+    &:not(.open) {
+      opacity: .55;
+    }
+
+    > a {
+      display: inline-block;
+      opacity: 0;
+      position: absolute;
+    }
+
+    position: relative;
+  }
+
+  .jqplot-seriespicker-popover {
+    position: absolute;
+
+    top: -3px;
+    left: -4px;
+  }
+}
diff --git a/plugins/CoreVisualizations/javascripts/seriesPicker.js b/plugins/CoreVisualizations/javascripts/seriesPicker.js
index f1e8c7eb3a..f56499dc9a 100644
--- a/plugins/CoreVisualizations/javascripts/seriesPicker.js
+++ b/plugins/CoreVisualizations/javascripts/seriesPicker.js
@@ -7,7 +7,7 @@
  * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
  */
 
-(function ($, doc, require) {
+(function ($, require) {
 
     /**
      * This class creates and manages the Series Picker for certain DataTable visualizations.
@@ -37,6 +37,7 @@
      *
      * @param {dataTable} dataTable  The dataTable instance to add a series picker to.
      * @constructor
+     * @deprecated use the piwik-series-picker directive instead
      */
     var SeriesPicker = function (dataTable) {
         this.domElem = null;
@@ -54,17 +55,6 @@
 
         // can multiple rows we selected?
         this.multiSelect = !! dataTable.props.allow_multi_select_series_picker;
-
-        // language strings
-        this.lang =
-        {
-            metricsToPlot: _pk_translate('General_MetricsToPlot'),
-            metricToPlot: _pk_translate('General_MetricToPlot'),
-            recordsToPlot: _pk_translate('General_RecordsToPlot')
-        };
-
-        this._pickerState = null;
-        this._pickerPopover = null;
     };
 
     SeriesPicker.prototype = {
@@ -80,40 +70,62 @@
 
             var self = this;
 
+            var selectedColumns = this.selectableColumns
+                .filter(isItemDisplayed)
+                .map(function (columnConfig) {
+                    return columnConfig.column;
+                });
+
+            var selectedRows = this.selectableRows
+                .filter(isItemDisplayed)
+                .map(function (rowConfig) {
+                    return rowConfig.matcher;
+                });
+
             // initialize dom element
-            this.domElem = $(doc.createElement('a'))
-                .addClass('jqplot-seriespicker')
-                .attr('href', '#')
-                .html('+')
+            var seriesPicker = '<piwik-series-picker'
+                + ' multiselect="' + (this.multiSelect ? 'true' : 'false') + '"'
+                + ' selectable-columns="selectableColumns"'
+                + ' selectable-rows="selectableRows"'
+                + ' selected-columns="selectedColumns"'
+                + ' selected-rows="selectedRows"'
+                + ' on-select="selectionChanged(columns, rows)"/>';
 
-                // set opacity on 'hide'
-                .on('hide', function () {
-                    $(this).css('opacity', .55);
-                })
-                .trigger('hide')
+            this.domElem = $(seriesPicker); // TODO: don't know if this will work without a root scope
 
-                // show picker on hover
-                .hover(
-                    function () {
-                        var $this = $(this);
+            $(this).trigger('placeSeriesPicker');
 
-                        $this.css('opacity', 1);
-                        if (!$this.hasClass('open')) {
-                            $this.addClass('open');
-                            self._showPicker();
+            piwikHelper.compileAngularComponents(this.domElem, {
+                scope: {
+                    selectableColumns: this.selectableColumns,
+                    selectableRows: this.selectableRows,
+                    selectedColumns: selectedColumns,
+                    selectedRows: selectedRows,
+                    selectionChanged: function selectionChanged(columns, rows) {
+                        if (columns.length === 0 && rows.length === 0) {
+                            return;
                         }
-                    },
-                    function () {
-                        // do nothing on mouseout because using this event doesn't work properly.
-                        // instead, the timeout check beneath is used (_bindCheckPickerLeave()).
+
+                        $(self).trigger('seriesPicked', [columns, rows]);
+
+                        // inform dashboard widget about changed parameters (to be restored on reload)
+                        var UI = require('piwik/UI');
+                        var params = {
+                            columns: columns,
+                            columns_to_display: columns,
+                            rows: rows,
+                            rows_to_display: rows
+                        };
+
+                        var tableNode = $('#' + this.dataTableId);
+                        UI.DataTable.prototype.notifyWidgetParametersChange(tableNode, params);
                     }
-                )
-                .click(function (e) {
-                    e.preventDefault();
-                    return false;
-                });
+                }
+            });
 
-            $(this).trigger('placeSeriesPicker');
+            function isItemDisplayed(columnOrRowConfig) {
+                return columnOrRowConfig.displayed;
+            }
         },
 
         /**
@@ -124,247 +136,16 @@
          *                  is returned.
          */
         getMetricTranslation: function (metric) {
-            for (var i = 0; i != this.selectableColumns.length; ++i) {
-                if (this.selectableColumns[i].column == metric) {
+            for (var i = 0; i !== this.selectableColumns.length; ++i) {
+                if (this.selectableColumns[i].column === metric) {
                     return this.selectableColumns[i].translation;
                 }
             }
             return metric;
-        },
-
-        /**
-         * Creates the popover DOM element, binds event handlers to it, and then displays it.
-         */
-        _showPicker: function () {
-            this._pickerState = {manipulated: false};
-            this._pickerPopover = this._createPopover();
-
-            this._positionPopover();
-
-            // hide and replot on mouse leave
-            var self = this;
-            this._bindCheckPickerLeave(function () {
-                var replot = self._pickerState.manipulated;
-                self._hidePicker(replot);
-            });
-        },
-
-        /**
-         * Creates a checkbox and related elements for a selectable column or selectable row.
-         */
-        _createPickerPopupItem: function (config, type) {
-            var self = this;
-
-            if (type == 'column') {
-                var columnName = config.column,
-                    columnLabel = config.translation,
-                    cssClass = 'pickColumn';
-            } else {
-                var columnName = config.matcher,
-                    columnLabel = config.label,
-                    cssClass = 'pickRow';
-            }
-
-            var checkbox = $(document.createElement('input')).addClass('select')
-                .attr('type', this.multiSelect ? 'checkbox' : 'radio');
-
-            if (config.displayed && !(!this.multiSelect && this._pickerState.oneChecked)) {
-                checkbox.prop('checked', true);
-                this._pickerState.oneChecked = true;
-            }
-
-            // if we are rendering a column, remember the column name
-            // if it's a row, remember the string that can be used to match the row
-            checkbox.data('name', columnName);
-
-            var el = $(document.createElement('p'))
-                .append(checkbox)
-                .append($('<label/>').text(columnLabel))
-                .addClass(cssClass);
-
-            var replot = function () {
-                self._unbindPickerLeaveCheck();
-                self._hidePicker(true);
-            };
-
-            var checkBox = function (box) {
-                if (!self.multiSelect) {
-                    self._pickerPopover.find('input.select:not(.current)').prop('checked', false);
-                }
-                box.prop('checked', true);
-                replot();
-            };
-
-            el.click(function (e) {
-                self._pickerState.manipulated = true;
-                var box = $(this).find('input.select');
-                if (!$(e.target).is('input.select')) {
-                    if (box.is(':checked')) {
-                        box.prop('checked', false);
-                    } else {
-                        checkBox(box);
-                    }
-                } else {
-                    if (box.is(':checked')) {
-                        checkBox(box);
-                    }
-                }
-            });
-
-            return el;
-        },
-
-        /**
-         * Binds an event to document that checks if the user has left the series picker.
-         */
-        _bindCheckPickerLeave: function (onLeaveCallback) {
-            var offset = this._pickerPopover.offset();
-            var minX = offset.left;
-            var minY = offset.top;
-            var maxX = minX + this._pickerPopover.outerWidth();
-            var maxY = minY + this._pickerPopover.outerHeight();
-
-            var self = this;
-            this._onMouseMove = function (e) {
-                var currentX = e.pageX, currentY = e.pageY;
-                if (currentX < minX || currentX > maxX
-                    || currentY < minY || currentY > maxY
-                ) {
-                    self._unbindPickerLeaveCheck();
-                    onLeaveCallback();
-                }
-            };
-
-            $(doc).mousemove(this._onMouseMove);
-        },
-
-        /**
-         * Unbinds the callback that was bound in _bindCheckPickerLeave.
-         */
-        _unbindPickerLeaveCheck: function () {
-            $(doc).unbind('mousemove', this._onMouseMove);
-        },
-
-        /**
-         * Removes and destroys the popover dom element. If any columns/rows were selected, the
-         * 'seriesPicked' event is triggered.
-         */
-        _hidePicker: function (replot) {
-            // hide picker
-            this._pickerPopover.hide();
-            this.domElem.trigger('hide').removeClass('open');
-
-            // replot
-            if (replot) {
-                var columns = [];
-                var rows = [];
-                this._pickerPopover.find('input:checked').each(function () {
-                    if ($(this).closest('p').hasClass('pickRow')) {
-                        rows.push($(this).data('name'));
-                    } else {
-                        columns.push($(this).data('name'));
-                    }
-                });
-
-                var noRowSelected = this._pickerPopover.find('.pickRow').length > 0
-                                 && this._pickerPopover.find('.pickRow input:checked').length === 0;
-                if (columns.length > 0 && !noRowSelected) {
-                    $(this).trigger('seriesPicked', [columns, rows]);
-
-                    // inform dashboard widget about changed parameters (to be restored on reload)
-                    var UI = require('piwik/UI')
-                    var params = {columns: columns,  columns_to_display: columns,
-                                  rows: rows, rows_to_display: rows};
-                    var tableNode = $('#' + this.dataTableId);
-                    UI.DataTable.prototype.notifyWidgetParametersChange(tableNode, params);
-                }
-            }
-
-            this._pickerPopover.remove();
-        },
-
-        /**
-         * Creates and returns the popover element. This element shows a list of checkboxes, one
-         * for each selectable column/row.
-         */
-        _createPopover: function () {
-            var hasColumns = $.isArray(this.selectableColumns) && this.selectableColumns.length;
-            var hasRows    = $.isArray(this.selectableRows) && this.selectableRows.length;
-
-            var popover = $('<div/>')
-                .addClass('jqplot-seriespicker-popover');
-
-            // create headline element
-            var title = this.multiSelect ? this.lang.metricsToPlot : this.lang.metricToPlot;
-            popover.append($('<p/>').addClass('headline').html(title));
-
-            // create selectable columns list
-            if (hasColumns) {
-                for (var i = 0; i < this.selectableColumns.length; i++) {
-                    var column = this.selectableColumns[i];
-                    popover.append(this._createPickerPopupItem(column, 'column'));
-                }
-            }
-
-            // create selectable rows list
-            if (hasRows) {
-                // "records to plot" subheadline
-                var header = $('<p/>').addClass('headline').addClass('recordsToPlot').html(this.lang.recordsToPlot);
-                popover.append(header);
-
-                // render the selectable rows
-                for (var i = 0; i < this.selectableRows.length; i++) {
-                    var row = this.selectableRows[i];
-                    popover.append(this._createPickerPopupItem(row, 'row'));
-                }
-            }
-
-            popover.hide();
-
-            return popover;
-        },
-
-        /**
-         * Positions the popover element.
-         */
-        _positionPopover: function () {
-            var $body = $('body'),
-                popover = this._pickerPopover,
-                pickerLink = this.domElem,
-                pickerLinkLeft = pickerLink.offset().left,
-                bodyRight = $body.offset().left + $body.width()
-                ;
-
-            $body.prepend(popover);
-
-            var neededSpace = popover.outerWidth() + 10;
-
-            var linkOffset = pickerLink.offset();
-            if (navigator.appVersion.indexOf("MSIE 7.") != -1) {
-                linkOffset.left -= 10;
-            }
-
-            // try to display popover to the right
-            var margin = parseInt(pickerLink.css('margin-left')) - 4;
-
-            var popoverRight = pickerLinkLeft + margin + neededSpace;
-            if (popoverRight < bodyRight
-                // make sure it's not too far to the left
-                || popoverRight < 0
-            ) {
-                popover.css('margin-left', (linkOffset.left - 4) + 'px').show();
-            } else {
-                // display to the left
-                popover.addClass('alignright')
-                    .css('margin-left', (linkOffset.left - neededSpace + 38) + 'px')
-                    .css('background-position', (popover.outerWidth() - 25) + 'px 4px')
-                    .show();
-            }
-            popover.css('margin-top', (linkOffset.top - 5) + 'px').show();
         }
     };
 
     var exports = require('piwik/DataTableVisualizations/Widgets');
     exports.SeriesPicker = SeriesPicker;
 
-})(jQuery, document, require);
+})(jQuery, require);
diff --git a/plugins/CoreVisualizations/stylesheets/jqplot.css b/plugins/CoreVisualizations/stylesheets/jqplot.css
index ef08f1292f..05a92a8e2f 100644
--- a/plugins/CoreVisualizations/stylesheets/jqplot.css
+++ b/plugins/CoreVisualizations/stylesheets/jqplot.css
@@ -211,8 +211,6 @@ a.rowevolution-startmulti {
     height: 16px;
     margin-top: 3px;
     background: url(../../Morpheus/images/chart_line_edit.png) no-repeat center center;
-    overflow: hidden;
-    text-indent: -999px;
 }
 
 .jqplot-seriespicker-popover {
@@ -236,6 +234,7 @@ a.rowevolution-startmulti {
     padding: 0 4px 0 0;
     line-height: 15px;
     vertical-align: middle;
+    white-space: nowrap;
 }
 
 .jqplot-seriespicker-popover p.headline {