Taglist component structure.

.scss-lint.yml

@@ -3,6 +3,8 @@ exclude:
   - 'lib/assets/stylesheets/old_common/**/*.css.scss'
   - 'app/assets/stylesheets/table/table_panel/layer-views-panels/filters_panel.css.scss'
   - 'app/assets/stylesheets/editor-3/codemirror.css.scss'
+  - 'app/assets/stylesheets/editor-3/tagit.css.scss'
+  - 'app/assets/stylesheets/editor-3/form-tags.css.scss'
 linters:
   BangFormat:
     enabled: true

app/assets/stylesheets/editor-3/form-tags.css.scss

@@ -0,0 +1,52 @@
+.Form-tags {
+  position: relative;
+  width: 100%;
+  min-height: 38px;
+  padding: 0;
+  outline: none;
+  border: 1px solid #CCC;
+  border-radius: 4px;
+  background: white;
+  z-index: 2;
+}
+.Form-tagsList.tagit { padding: 0 5px 5px 5px }
+.Form-tagsList.tagit .tagit-choice {
+  padding: 0 30px 0 11px;
+  margin: 5px 5px 0 0;
+  line-height: 28px;
+  background: #EFF8FF;
+  color: #746E76;
+  border-radius: 2px;
+}
+.Form-tagsList.tagit .tagit-choice .tagit-close {
+  line-height: normal;
+  right: 10px;
+}
+.Form-tagsList.tagit .tagit-choice .tagit-close .text-icon {
+  display: inline-block;
+  color: #C5CCD1;
+  &:hover { color: #AAA }
+}
+.Form-tagsList.tagit li.tagit-new { padding: 7px 4px 2px 7px }
+.Form-tagsList.tagit .ui-autocomplete-input::-webkit-input-placeholder {
+  font-weight: $sFontWeight-normal;
+  font-style: italic;
+  color: #AAA
+}
+.Form-tagsList.tagit .ui-autocomplete-input::-moz-placeholder {
+  font-weight: $sFontWeight-normal;
+  font-style: italic;
+  color: #AAA
+}
+.Form-tagsList.tagit .ui-autocomplete-input:-ms-placeholder {
+  font-weight: $sFontWeight-normal;
+  font-style: italic;
+  color: #AAA
+}
+.Form-tags.is-focus { border-color: #999 }
+.Form-tags.is-disabled {
+  background: $cStructure-grayBkg;
+
+  .tagit-choice { padding: 0 11px }
+  .tagit-choice .tagit-close { display: none }
+}

app/assets/stylesheets/editor-3/tagit.css.scss

@@ -0,0 +1,54 @@
+ul.tagit {
+    padding: 1px 5px;
+    overflow: auto;
+    margin-left: inherit; /* usually we don't want the regular ul margins. */
+    margin-right: inherit;
+}
+ul.tagit li {
+    display: block;
+    float: left;
+    margin: 2px 5px 2px 0;
+}
+ul.tagit li.tagit-choice {
+    padding: .2em 18px .2em .5em;
+    position: relative;
+    line-height: inherit;
+}
+ul.tagit li.tagit-new {
+    padding: .25em 4px .25em 0;
+}
+
+ul.tagit li.tagit-choice a.tagit-label {
+    cursor: pointer;
+    text-decoration: none;
+}
+ul.tagit li.tagit-choice .tagit-close {
+    cursor: pointer;
+    position: absolute;
+    right: .1em;
+    top: 50%;
+    margin-top: -8px;
+}
+
+/* used for some custom themes that don't need image icons */
+ul.tagit li.tagit-choice .tagit-close .text-icon {
+    display: none;
+}
+
+ul.tagit li.tagit-choice input {
+    display: block;
+    float: left;
+    margin: 2px 5px 2px 0;
+}
+ul.tagit input[type="text"] {
+    -moz-box-sizing:    border-box;
+    -webkit-box-sizing: border-box;
+    box-sizing:         border-box;
+
+    border: none;
+    margin: 0;
+    padding: 0;
+    width: inherit;
+    background-color: inherit;
+    outline: none;
+}

lib/assets/javascripts/cartodb3/components/form-components/editors/taglist/taglist-collection.js

@@ -0,0 +1,10 @@
+var Backbone = require('backbone');
+
+module.exports = Backbone.Collection.extend({
+
+  model: function (attrs, opts) {
+    return new Backbone.Model(attrs, {
+      label: attrs
+    });
+  }
+});

lib/assets/javascripts/cartodb3/components/form-components/editors/taglist/taglist-item-view.js

@@ -0,0 +1,23 @@
+var CoreView = require('backbone/core-view');
+var _ = require('underscore');
+
+var REQUIRED_OPTS = [
+  'label'
+];
+
+module.exports = CoreView.extend({
+  tagName: 'li',
+
+  initialize: function (opts) {
+    _.each(REQUIRED_OPTS, function (item) {
+      if (!opts[item]) throw new Error(item + ' is required');
+      this['_' + item] = opts[item];
+    }, this);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(this._label);
+    return this;
+  }
+});

lib/assets/javascripts/cartodb3/components/form-components/editors/taglist/taglist.js

@@ -0,0 +1,112 @@
+var Backbone = require('backbone');
+var template = require('./number.tpl');
+var _ = require('underscore');
+require('jquery');
+require('jquery-ui');
+require('tagit');
+
+Backbone.Form.editors.Taglist = Backbone.Form.editors.Base.extend({
+  className: 'Form-tags',
+
+  initialize: function (opts) {
+    this.options = _.extend(
+      {},
+      this.options,
+      opts.schema.options
+    );
+    Backbone.Form.editors.Base.prototype.initialize.call(this, opts);
+    this._initViews();
+  },
+
+  _initViews: function () {
+    this.$el.html(
+      template({
+        value: this.value
+      })
+    );
+
+    this.$('.js-slider').slider({
+      range: 'min',
+      value: this.value,
+      min: this.options.min,
+      max: this.options.max,
+      step: this.options.step,
+      orientation: 'horizontal',
+      slide: this._onSlideChange.bind(this),
+      stop: this._onSlideStop.bind(this)
+    });
+  },
+
+  _onSlideChange: function (ev, ui) {
+    this.value = ui.value;
+    this.$('.js-input').val(this.value);
+  },
+
+  _onSlideStop: function (ev, ui) {
+    this.trigger('change', this);
+  },
+
+  _onInputKeyDown: function (e) {
+    if (e.shiftKey === true) {
+      if (e.which !== TAB_KEY_CODE && e.which !== LEFT_ARROW_KEY_CODE && e.which !== RIGHT_ARROW_KEY_CODE) {
+        return false;
+      }
+    } else {
+      if (e.which > NUMBER_NINE_KEY_CODE && e.which !== POINT_KEY_CODE) {
+        return false;
+      }
+      if (e.which === SPACE_KEY_CODE) {
+        return false;
+      }
+      if (e.which === ENTER_KEY_CODE) {
+        return false;
+      }
+    }
+  },
+
+  _onInputKeyUp: function () {
+    var value = this.$('.js-input').val();
+    var isFloatNotCompleted = new RegExp(/\d+\.$/);
+    var isDifferent = parseFloat(value) !== parseFloat(this.value);
+    if (!isFloatNotCompleted.test(value) && isDifferent) {
+      this.$('.js-slider').slider('value', value);
+      this.value = value;
+      this.trigger('change', this);
+    }
+  },
+
+  focus: function () {
+    if (this.hasFocus) return;
+    this.$('.js-input').focus();
+  },
+
+  blur: function () {
+    if (!this.hasFocus) return;
+    this.$('.js-input').blur();
+  },
+
+  getValue: function () {
+    return this.$('.js-input').val();
+  },
+
+  setValue: function (value) {
+    this.$('.js-slider').slider('value', value);
+    this.$('.js-input').val(value);
+    this.value = value;
+  },
+
+  _destroySlider: function () {
+    if (this.$('.js-slider').data('ui-slider')) {
+      this.$('.js-slider').slider('destroy');
+    }
+  },
+
+  remove: function () {
+    this._destroySlider();
+    Backbone.Form.editors.Base.prototype.remove.apply(this);
+  },
+
+  clean: function () {
+    this.$el.remove();
+  }
+});

lib/assets/javascripts/cartodb3/components/form-components/editors/taglist/taglist.tpl

@@ -0,0 +1 @@
+<ul class="Form-tagsList js-tagsList"></ul>

lib/assets/javascripts/cartodb3/components/modals/map-metadata/vis-metadata-model.js

@@ -0,0 +1,118 @@
+var cdb = require('cartodb.js-v3');
+
+/**
+ *  Edit vis metadata dialog model
+ *  to control if name and metadata
+ *  are editable or not.
+ *
+ */
+
+module.exports = cdb.core.Model.extend({
+
+  defaults: {
+    name: '',
+    description: '',
+    tags: '',
+    privacy: ''
+  },
+
+  initialize: function(attrs, opts) {
+    if (!opts || !opts.vis || !opts.user || !opts.dataLayer) {
+      throw new Error('Visualization, user and dataLayer models are required');
+    }
+    this.vis = opts.vis;
+    this.user = opts.user;
+    this.dataLayer = opts.dataLayer;
+
+    var data = {
+      name: this.vis.get('name'),
+      description: this.vis.get('description'),
+      tags: this.vis.get('tags'),
+      privacy: this.vis.get('privacy')
+    };
+    if (!this.vis.isVisualization()) {
+      // Additional fields, only for dataset, w/ fallbacks for defaults
+      data.source = this.vis.get('source') || '';
+      data.attributions = this.vis.get('attributions') || '';
+      data.license = this.vis.get('license') || '';
+      data.display_name = this.vis.get('display_name') || '';
+    }
+    this.set(data);
+
+    // Validation control variable
+    this.validationError = '';
+    this._initBinds();
+  },
+
+  _initBinds: function() {
+    this.bind('valid', function() {
+      this.validationError = '';
+    }, this);
+    this.bind('error', function(m, error) {
+      this.validationError = error;
+    }, this);
+  },
+
+  // Validation
+  _validate: function(attrs) {
+    var valid = cdb.core.Model.prototype._validate.apply(this, arguments);
+    if (valid) {
+      this.trigger('valid')
+      return true;
+    } else {
+      return false;
+    }
+  },
+
+  validate: function(attrs) {
+    if (!attrs) return;
+
+    if (!attrs.name) {
+      return "Name can't be blank"
+    }
+  },
+
+  getError: function() {
+    return this.validationError;
+  },
+
+  isValid: function() {
+    if (!this.validate) {
+      return true;
+    }
+    return !this.validate(this.attributes) && this.validationError === "";
+  },
+
+  // Helper functions
+  isDataset: function() {
+    return !this.vis.isVisualization();
+  },
+
+  isVisEditable: function() {
+    return this.vis.permission.isOwner(this.user);
+  },
+
+  isAttributeEditable: function(type) {
+    if (this.vis.isVisualization()) {
+      return this.isVisEditable();
+    } else {
+      var isReadOnly = type === "name" ? this.dataLayer.isReadOnly() : false;
+      if (!this.dataLayer) {
+        return false;
+      } else if (this.dataLayer && (isReadOnly || !this.dataLayer.permission.isOwner(this.user))) {
+        return false;
+      } else {
+        return true;
+      }
+    }
+  },
+
+  isNameEditable: function() {
+    return this.isAttributeEditable('name');
+  },
+
+  isMetadataEditable: function() {
+    return this.isAttributeEditable('rest');
+  }
+
+});

package.json

@@ -88,6 +88,7 @@
   },
   "browser": {
     "tipsy": "./vendor/assets/javascripts/jquery.tipsy.js",
+    "tagit": "./vendor/assets/javascripts/tag-it.js",
     "markdown": "./vendor/assets/javascripts/markdown.js",
     "dragster": "./vendor/assets/javascripts/dragster.js",
     "dropzone": "./vendor/assets/javascripts/dropzone.js",