Initial commit

lib/assets/javascripts/builder/components/input-number/input-number-content-view.js

@@ -0,0 +1,131 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var template = require('./input-number-value-content-view.tpl');
+
+module.exports = CoreView.extend({
+  events: {
+    'click .js-back': '_onClickBack',
+    'click .js-bins': '_onClickBins',
+    'click .js-quantification': '_onClickQuantification'
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this._removeForm();
+    this.$el.empty();
+
+    this.$el.append(template({
+      bins: this.model.get('bins'),
+      attribute: this.model.get('attribute'),
+      quantification: this.model.get('quantification')
+    }));
+
+    this._initForm();
+
+    return this;
+  },
+
+  _calculateRangeFromFixed: function (fixed, percent) {
+    percent = percent || 30;
+
+    var span = this.options.max - this.options.min;
+    var delta = fixed / span;
+
+    return [
+      Math.floor(Math.max(this.options.min, fixed - percent * delta)),
+      Math.floor(Math.min(this.options.max, fixed + percent * delta))
+    ];
+  },
+
+  _initForm: function () {
+    var self = this;
+
+    if (this._formView) {
+      this._formView.remove();
+    }
+
+    // when range min === max means we come from a fixed value, probably
+    // calculate the range values based on this
+    var range = this.model.get('range');
+    var min, max;
+
+    min = max = this.model.get('fixed');
+
+    if (range) {
+      min = +range[0];
+      max = +range[1];
+    }
+
+    if (min === max) {
+      var r = this._calculateRangeFromFixed(min);
+      // set the range so changes are propagated
+      min = r[0];
+      max = r[1];
+      this.model.set('range', r);
+    }
+
+    this._formModel = new Backbone.Model({
+      min: min,
+      max: max
+    });
+
+    this._formModel.schema = {
+      min: {
+        type: 'Number',
+        validators: ['required', {
+          type: 'interval',
+          min: self.options.min,
+          max: self.options.max
+        }]
+      },
+      max: {
+        type: 'Number',
+        validators: ['required', {
+          type: 'interval',
+          min: self.options.min,
+          max: self.options.max
+        }]
+      }
+    };
+
+    this._formModel.bind('change', function (input) {
+      this.model.set('range', [(+input.get('min')), (+input.get('max'))]);
+    }, this);
+
+    this._formView = new Backbone.Form({
+      className: 'Editor-boxList',
+      model: this._formModel
+    });
+
+    this._formView.bind('change', function () {
+      this.commit();
+    });
+
+    this.$('.js-content').append(this._formView.render().$el);
+  },
+
+  _removeForm: function () {
+    // Backbone.Form removes the view with the following method
+    this._formView && this._formView.remove();
+  },
+
+  _onClickBack: function (e) {
+    this.killEvent(e);
+    this.trigger('back', this);
+  },
+
+  _onClickQuantification: function (e) {
+    this.killEvent(e);
+    this.trigger('selectQuantification', this);
+  },
+
+  _onClickBins: function (e) {
+    this.killEvent(e);
+    this.trigger('selectBins', this);
+  },
+
+  clean: function () {
+    this._removeForm();
+    CoreView.prototype.clean.call(this);
+  }
+});

lib/assets/javascripts/builder/components/input-number/input-number-content-view.tpl

@@ -0,0 +1,17 @@
+<div class="CDB-Box-modalHeaderItem">
+  <button class="u-actionTextColor js-back u-rSpace">
+    <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+  </button>
+  <%- attribute %>
+</div>
+<div class="CDB-Box-modalHeaderItem">
+  <%- _t('form-components.editors.fill.quantification.methods.' + quantification) %>
+  <button class="CDB-Shape u-lSpace js-quantification">
+    <div class="CDB-Shape-threePoints is-horizontal is-blue is-small">
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+      <div class="CDB-Shape-threePointsItem"></div>
+    </div>
+  </button>
+</div>
+<div class="js-content"></div>

lib/assets/javascripts/builder/components/input-number/input-number-dialog-content.js

@@ -0,0 +1,139 @@
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var tabPaneTemplate = require('builder/components/form-components/editors/fill/fill-tab-pane.tpl');
+var createTextLabelsTabPane = require('builder/components/tab-pane/create-text-labels-tab-pane');
+var InputNumberFixedContentView = require('./input-number-fixed-content-view');
+var InputNumberValueContentView = require('./input-number-value-content-view');
+var FillConstants = require('builder/components/form-components/_constants/_fill');
+
+var DEFAULT_INPUT_MIN_VALUE = 0;
+var DEFAULT_INPUT_MAX_VALUE = 100;
+var DEFAULT_INPUT_STEP_VALUE = 1;
+
+module.exports = CoreView.extend({
+  initialize: function (opts) {
+    if (!opts.columns) throw new Error('columns param is required');
+    this._columns = opts.columns;
+
+    this.listenTo(this.model, 'change:attribute', this._updateRangeValue);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+    this._initViews();
+    return this;
+  },
+
+  _initViews: function () {
+    var self = this;
+
+    var fixedPane = {
+      name: 'fixed',
+      label: _t('form-components.editors.fill.input-number.fixed'),
+      createContentView: function () {
+        return self._generateFixedContentView();
+      }
+    };
+
+    var valuePane = {
+      name: 'value',
+      label: _t('form-components.editors.fill.input-number.by-value'),
+      createContentView: function () {
+        return self._generateValueContentView();
+      }
+    };
+
+    this._tabPaneTabs = [];
+
+    if (this.options.editorAttrs && this.options.editorAttrs.hidePanes) {
+      var hidePanes = this.options.editorAttrs.hidePanes;
+      if (!_.contains(hidePanes, FillConstants.Panes.FIXED)) {
+        this._tabPaneTabs.push(fixedPane);
+      }
+      if (!_.contains(hidePanes, FillConstants.Panes.BY_VALUE)) {
+        this._tabPaneTabs.push(valuePane);
+      }
+    } else {
+      this._tabPaneTabs = [fixedPane, valuePane];
+    }
+
+    var tabPaneOptions = {
+      tabPaneOptions: {
+        template: tabPaneTemplate,
+        tabPaneItemOptions: {
+          tagName: 'li',
+          klassName: 'CDB-NavMenu-item'
+        }
+      },
+      tabPaneItemLabelOptions: {
+        tagName: 'button',
+        className: 'CDB-NavMenu-link u-upperCase'
+      }
+    };
+
+    if (this.model.get('range') && this._tabPaneTabs.length > 1) {
+      this._tabPaneTabs[1].selected = true;
+    }
+
+    this._tabPaneView = createTextLabelsTabPane(this._tabPaneTabs, tabPaneOptions);
+    this.listenTo(this._tabPaneView.collection, 'change:selected', this._onChangeTabPaneViewTab);
+    this.addView(this._tabPaneView);
+    this.$el.append(this._tabPaneView.render().$el);
+  },
+
+  _onChangeTabPaneViewTab: function () {
+    var selectedTabPaneName = this._tabPaneView.getSelectedTabPaneName();
+
+    if (selectedTabPaneName === 'fixed') {
+      this._updateFixedValue();
+    } else {
+      this._updateRangeValue();
+    }
+
+    this.trigger('change', selectedTabPaneName, this);
+  },
+
+  _updateFixedValue: function () {
+    if (this.model.get('range')) {
+      // when coming from range calculate the average
+      var r = this.model.get('range');
+      var avg = 0.5 * (+r[0] + +r[1]);
+      this.model.set('fixed', avg);
+      this.model.unset('range');
+    }
+  },
+
+  _updateRangeValue: function () {
+    if (this.model.get('fixed') !== null && this.model.get('fixed') !== undefined && this.model.get('attribute')) {
+      var editorAttrs = this.options.editorAttrs;
+      var range = (editorAttrs && editorAttrs.defaultRange) || [this.model.get('fixed'), this.model.get('fixed')];
+      this.model.set('range', range);
+      this.model.unset('fixed');
+    }
+  },
+
+  _generateFixedContentView: function () {
+    var editorAttrs = this.options.editorAttrs;
+    return new InputNumberFixedContentView({
+      model: this.model,
+      min: (editorAttrs && editorAttrs.min) || DEFAULT_INPUT_MIN_VALUE,
+      max: (editorAttrs && editorAttrs.max) || DEFAULT_INPUT_MAX_VALUE,
+      step: (editorAttrs && editorAttrs.step) || DEFAULT_INPUT_STEP_VALUE
+    });
+  },
+
+  _generateValueContentView: function () {
+    var editorAttrs = this.options.editorAttrs;
+    return new InputNumberValueContentView({
+      model: this.model,
+      columns: this._columns,
+      min: (editorAttrs && editorAttrs.min) || DEFAULT_INPUT_MIN_VALUE,
+      max: (editorAttrs && editorAttrs.max) || DEFAULT_INPUT_MAX_VALUE
+    });
+  },
+
+  _onChangeValue: function (input) {
+    this.model.set('fixed', input.value);
+  }
+});

lib/assets/javascripts/builder/components/input-number/input-number-fixed-content-view.js

@@ -0,0 +1,55 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+
+module.exports = CoreView.extend({
+  render: function () {
+    this.clearSubViews();
+    this._removeForm();
+    this.$el.empty();
+    this._initForm();
+    return this;
+  },
+
+  _initForm: function () {
+    this._formModel = new Backbone.Model({
+      value: this.model.get('fixed')
+    });
+
+    this._formModel.schema = {
+      value: {
+        type: 'Number',
+        validators: ['required', {
+          type: 'interval',
+          min: this.options.min,
+          max: this.options.max,
+          step: this.options.step
+        }]
+      }
+    };
+
+    this._formModel.bind('change', function (input) {
+      this.model.set('fixed', input.get('value'));
+    }, this);
+
+    this._formView = new Backbone.Form({
+      className: 'CDB-ListDecoration-itemPadding',
+      model: this._formModel
+    });
+
+    this._formView.bind('change', function () {
+      this.commit();
+    });
+
+    this.$el.append(this._formView.render().$el);
+  },
+
+  _removeForm: function () {
+    // Backbone.Form removes the view with the following method
+    this._formView && this._formView.remove();
+  },
+
+  clean: function () {
+    this._removeForm();
+    CoreView.prototype.clean.call(this);
+  }
+});

lib/assets/javascripts/builder/components/input-number/input-number-value-content-view.js

@@ -0,0 +1,183 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var StackLayoutView = require('builder/components/stack-layout/stack-layout-view');
+var ColumnListView = require('builder/components/custom-list/column-list/column-list-view');
+var columnListQuantificationMethodItemTemplate = require('builder/components/custom-list/column-list/column-list-quantification-method-item.tpl');
+var InputNumberContentView = require('./input-number-content-view');
+var FillConstants = require('builder/components/form-components/_constants/_fill');
+
+/**
+ * add the number of classes
+ * change the max depending on the min
+ * smaller values on top
+ */
+var COLUMN_PANE_INDEX = 0;
+var MAIN_PAIN_INDEX = 1;
+var QUANTIFICATION_PANE_INDEX = 2;
+
+module.exports = CoreView.extend({
+  events: {
+    'click .js-back': '_onClickBack'
+  },
+
+  initialize: function (opts) {
+    if (!opts.columns) throw new Error('columns param is required');
+    this._columns = opts.columns;
+
+    this._settings = FillConstants.Settings.NUMBER;
+
+    this._setupModel();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+    this._initViews();
+    return this;
+  },
+
+  _setupModel: function () {
+    var options = {};
+
+    if (!this.model.get('quantification')) {
+      options.quantification = this._settings.quantifications.items[this._settings.quantifications.defaultIndex];
+    }
+
+    if (!this.model.get('bins')) {
+      options.bins = this._settings.bins.items[this._settings.bins.defaultIndex];
+    }
+
+    if (+this.model.get('bins') > +this._settings.bins.items[this._settings.bins.items.length - 1]) {
+      options.bins = this._settings.bins.items[this._settings.bins.items.length - 1];
+    }
+
+    this.model.set(options);
+  },
+
+  _initViews: function () {
+    var self = this;
+
+    var stackViewCollection = new Backbone.Collection([{
+      createStackView: function (stackLayoutModel, opts) {
+        return self._createInputRampContentView(stackLayoutModel, opts).bind(self);
+      }
+    }, {
+      createStackView: function (stackLayoutModel, opts) {
+        return self._createInputNumberContentView(stackLayoutModel, opts).bind(self);
+      }
+    }, {
+      createStackView: function (stackLayoutModel, opts) {
+        return self._createQuantificationListView(stackLayoutModel, opts).bind(self);
+      }
+    }, {
+      createStackView: function (stackLayoutModel, opts) {
+        return self._createBinsListView(stackLayoutModel, opts).bind(self);
+      }
+    }]);
+
+    this._stackLayoutView = new StackLayoutView({
+      collection: stackViewCollection
+    });
+
+    var position = MAIN_PAIN_INDEX;
+
+    if (!this.model.get('attribute')) {
+      position = COLUMN_PANE_INDEX;
+    } else if (!this.model.get('quantification')) {
+      position = QUANTIFICATION_PANE_INDEX;
+    }
+
+    this._stackLayoutView.model.set('position', position);
+    this.$el.append(this._stackLayoutView.render().$el);
+    this.addView(this._stackLayoutView);
+  },
+
+  _createInputRampContentView: function (stackLayoutModel, opts) {
+    var view = new ColumnListView({
+      stackLayoutModel: stackLayoutModel,
+      columns: this._columns.filter(function (f) {
+        return f.type === 'number';
+      }),
+      showSearch: true,
+      typeLabel: 'column'
+    });
+
+    view.bind('selectItem', function (item) {
+      this.model.set('attribute', item.get('val'));
+      var step = MAIN_PAIN_INDEX;
+      if (!this.model.get('quantification')) {
+        step = QUANTIFICATION_PANE_INDEX;
+      }
+      this._stackLayoutView.model.goToStep(step);
+    }, this);
+
+    return view;
+  },
+
+  _createInputNumberContentView: function (stackLayoutModel, opts) {
+    var view = new InputNumberContentView({
+      stackLayoutModel: stackLayoutModel,
+      model: this.model,
+      min: this.options.min,
+      max: this.options.max
+    });
+
+    view.bind('back', function (value) {
+      stackLayoutModel.prevStep();
+    }, this);
+
+    view.bind('selectQuantification', function (value) {
+      stackLayoutModel.goToStep(2);
+    }, this);
+
+    view.bind('selectBins', function (value) {
+      stackLayoutModel.goToStep(3);
+    }, this);
+
+    return view;
+  },
+
+  _createQuantificationListView: function (stackLayoutModel, opts) {
+    var view = new ColumnListView({
+      headerTitle: _t('form-components.editors.fill.quantification.title'),
+      stackLayoutModel: stackLayoutModel,
+      columns: this._settings.quantifications.items,
+      itemTemplate: columnListQuantificationMethodItemTemplate,
+      showSearch: false
+    });
+
+    view.bind('selectItem', function (item) {
+      this.model.set('quantification', item.get('val'));
+      stackLayoutModel.prevStep();
+    }, this);
+
+    view.bind('back', function (value) {
+      stackLayoutModel.prevStep();
+    }, this);
+
+    return view;
+  },
+
+  _createBinsListView: function (stackLayoutModel, opts) {
+    var view = new ColumnListView({
+      headerTitle: _t('form-components.editors.fill.bins'),
+      stackLayoutModel: stackLayoutModel,
+      columns: this._settings.bins.items
+    });
+
+    view.bind('selectItem', function (item) {
+      this.model.set('bins', item.get('val'));
+      stackLayoutModel.goToStep(1);
+    }, this);
+
+    view.bind('back', function (value) {
+      stackLayoutModel.goToStep(1);
+    }, this);
+
+    return view;
+  },
+
+  _onClickBack: function (e) {
+    this.killEvent(e);
+  }
+});

lib/assets/javascripts/builder/components/input-number/input-number-value-content-view.tpl

@@ -0,0 +1,39 @@
+<div class="CDB-Box-modalHeader">
+  <ul class="CDB-Box-modalHeaderItem CDB-Box-modalHeaderItem--block CDB-Box-modalHeaderItem--paddingHorizontal">
+    <li class="InputColor-modalHeader CDB-ListDecoration-item CDB-ListDecoration-itemPadding--vertical CDB-Text CDB-Size-medium u-secondaryTextColor">
+      <div class="u-flex u-alignStart u-ellipsis">
+        <button class="u-rSpace u-actionTextColor js-back">
+          <i class="CDB-IconFont CDB-IconFont-arrowPrev Size-large"></i>
+        </button>
+        <div class="u-ellipsis">
+          <%- attribute %>
+        </div>
+      </div>
+    </li>
+    <li class="CDB-ListDecoration-item CDB-ListDecoration-itemPadding--vertical CDB-Text CDB-Size-medium u-secondaryTextColor">
+      <ul class="u-flex u-justifySpace">
+        <li class="u-flex">
+          <%- bins %> <%- _t('form-components.editors.fill.input-ramp.buckets', { smart_count: bins }) %>
+          <button class="CDB-Shape u-lSpace js-bins">
+            <div class="CDB-Shape-threePoints is-horizontal is-blue is-small">
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+            </div>
+          </button>
+        </li>
+        <li class="u-flex">
+          <%- _t('form-components.editors.fill.quantification.methods.' + quantification) %>
+          <button class="CDB-Shape u-lSpace js-quantification">
+            <div class="CDB-Shape-threePoints is-horizontal is-blue is-small">
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+              <div class="CDB-Shape-threePointsItem"></div>
+            </div>
+          </button>
+        </li>
+      </ul>
+    </li>
+  </ul>
+</div>
+<div class="js-content"></div>

lib/assets/javascripts/builder/components/input-number/input-number.js

@@ -0,0 +1,107 @@
+var $ = require('jquery');
+var CoreView = require('backbone/core-view');
+var template = require('./input-number.tpl');
+var InputDialogContent = require('./input-number-dialog-content');
+var TipsyTooltipView = require('builder/components/tipsy-tooltip-view');
+
+module.exports = CoreView.extend({
+  tagName: 'li',
+  className: 'CDB-OptionInput-item',
+
+  events: {
+    'click': '_onClick'
+  },
+
+  initialize: function (opts) {
+    if (!opts.columns) throw new Error('columns is required');
+    this._columns = opts.columns;
+
+    if (this.options.editorAttrs && this.options.editorAttrs.help) {
+      this._help = this.options.editorAttrs.help;
+    }
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+
+    if (this.options.disabled) {
+      this.$el.addClass('is-disabled');
+    }
+
+    this.$el.html(template({
+      help: this._help || '',
+      value: this._getValue()
+    }));
+
+    this._initViews();
+
+    return this;
+  },
+
+  _initViews: function () {
+    if (this._help) {
+      var tooltip = new TipsyTooltipView({
+        el: this.$('.js-help'),
+        gravity: 'w',
+        title: function () {
+          return $(this).data('tooltip');
+        }
+      });
+      this.addView(tooltip);
+    }
+  },
+
+  _createContentView: function () {
+    var view = new InputDialogContent({
+      model: this.model,
+      columns: this._columns,
+      editorAttrs: this.options.editorAttrs
+    });
+
+    view.bind('change', this.render, this);
+
+    return view;
+  },
+
+  _onClick: function (e) {
+    if (this.options.disabled) {
+      return;
+    }
+    this.trigger('click', this.model);
+  },
+
+  _initBinds: function () {
+    this.model.set('createContentView', function () {
+      return this._createContentView();
+    }.bind(this));
+
+    this.listenTo(this.model, 'change:selected', this._onToggleSelected);
+    this.listenTo(this.model, 'change:fixed', this._onChangeValue);
+    this.listenTo(this.model, 'change:range', this._onChangeValue);
+  },
+
+  _getValue: function () {
+    // 1.0 -> 1
+    function dropDecimal (f) {
+      return f.replace(/\.0$/, '');
+    }
+
+    if (this.model.get('range')) {
+      return this.model.get('range').map(function (v) {
+        return dropDecimal((+v).toFixed(1));
+      }).join('..');
+    }
+    return dropDecimal((+this.model.get('fixed')).toFixed(1));
+  },
+
+  _onChangeValue: function () {
+    this.$('.js-value').text(this._getValue());
+  },
+
+  _onToggleSelected: function () {
+    this.$el.toggleClass('is-active', this.model.get('selected'));
+  }
+});

lib/assets/javascripts/builder/components/input-number/input-number.tpl

@@ -0,0 +1 @@
+<button type="button" class="CDB-OptionInput-content js-value <% if (help) { %> js-help<% } %>" <% if (help) { %> data-tooltip="<%- help %>"<% } %>><%- value %></button>

lib/assets/javascripts/builder/components/input-number/quantification-method-item.tpl

@@ -0,0 +1,3 @@
+<div class="CDB-ListDecoration-itemLink u-flex u-justifySpace u-alignCenter u-actionTextColor <% if (isSelected) { %> is-selected <% } %>">
+  <%- _t('form-components.editors.fill.quantification.methods.' + name) %>
+</div>