Initial commit

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/code-mirror-error.tpl

@@ -0,0 +1,5 @@
+<ul class="CodeMirror-error">
+  <li class="CodeMirror-errorMessage u-lSpace--xl u-rSpace--xl">
+    <%- _t('components.codemirror.syntax-error') %>. <%- _t('components.codemirror.line') %> <%- line %>: <span><%- message %></span>
+  </li>
+</ul>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-base-view.js

@@ -0,0 +1,362 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var _ = require('underscore');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+var PanelWithOptionsView = require('builder/components/view-options/panel-with-options-view');
+var InfoWindowHTMLView = require('./infowindow-html-view');
+var InfowindowContentView = require('./infowindow-content-view');
+var ScrollView = require('builder/components/scroll/scroll-view');
+var TabPaneView = require('builder/components/tab-pane/tab-pane-view');
+var TabPaneCollection = require('builder/components/tab-pane/tab-pane-collection');
+var Toggler = require('builder/components/toggler/toggler-view');
+var ApplyButtonView = require('builder/components/apply-button/apply-button-view');
+var Infobox = require('builder/components/infobox/infobox-factory');
+var InfoboxModel = require('builder/components/infobox/infobox-model');
+var InfoboxCollection = require('builder/components/infobox/infobox-collection');
+var MetricsTracker = require('builder/components/metrics/metrics-tracker');
+var MetricsTypes = require('builder/components/metrics/metrics-types');
+
+var cdb = require('internal-carto.js');
+
+var REQUIRED_OPTS = [
+  'editorModel',
+  'layerDefinitionModel',
+  'userActions'
+];
+
+module.exports = CoreView.extend({
+  module: 'infowindow-base-view',
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+
+    this._initModels();
+    this._initBinds();
+    this._configPanes();
+    this._initTemplates();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+
+    this._initViews();
+    this._infoboxState();
+    this._toggleOverlay();
+
+    return this;
+  },
+
+  _initModels: function () {
+    var content;
+    if (this.model.isCustomTemplate()) {
+      content = this.model.get('template');
+    } else {
+      content = this._getTemplateContent();
+    }
+
+    this._codemirrorModel = new Backbone.Model({
+      content: content
+    });
+
+    this._infoboxModel = new InfoboxModel({
+      state: this._isLayerHidden() ? 'layer-hidden' : ''
+    });
+
+    this._overlayModel = new Backbone.Model({
+      visible: this._isLayerHidden()
+    });
+
+    // Set edition attribute in case custom html is applied and
+    // in case none template is applied
+    this._editorModel.set({
+      edition: this.model.isCustomTemplate(),
+      disabled: !this.model.hasTemplate() && !this.model.isCustomTemplate()
+    });
+
+    this._togglerModel = new Backbone.Model({
+      labels: [_t('editor.infowindow.html-toggle.values'), _t('editor.infowindow.html-toggle.html')],
+      active: this._editorModel.isEditing(),
+      disabled: this._editorModel.isDisabled(),
+      isDisableable: true,
+      tooltip: _t('editor.infowindow.html-toggle.tooltip')
+    });
+  },
+
+  _initViews: function () {
+    var self = this;
+
+    var infoboxSstates = [
+      {
+        state: 'confirm',
+        createContentView: function () {
+          return Infobox.createWithAction({
+            type: 'alert',
+            title: _t('editor.infowindow.messages.custom-html-applied.title'),
+            body: _t('editor.infowindow.messages.custom-html-applied.body'),
+            action: {
+              label: _t('editor.infowindow.messages.custom-html-applied.accept')
+            }
+          });
+        },
+        onAction: self._cancelHTML.bind(self)
+      }, {
+        state: 'layer-hidden',
+        createContentView: function () {
+          return Infobox.createWithAction({
+            type: 'alert',
+            title: _t('editor.messages.layer-hidden.title'),
+            body: _t('editor.messages.layer-hidden.body'),
+            action: {
+              label: _t('editor.messages.layer-hidden.show')
+            }
+          });
+        },
+        onAction: self._showHiddenLayer.bind(self)
+      }
+    ];
+
+    var infoboxCollection = new InfoboxCollection(infoboxSstates);
+
+    var panelWithOptionsView = new PanelWithOptionsView({
+      className: 'Editor-content',
+      editorModel: self._editorModel,
+      infoboxModel: self._infoboxModel,
+      infoboxCollection: infoboxCollection,
+      createContentView: function () {
+        return new TabPaneView({
+          collection: self._collectionPane
+        });
+      },
+      createControlView: function () {
+        return new Toggler({
+          model: self._togglerModel
+        });
+      },
+      createActionView: function () {
+        return new TabPaneView({
+          collection: self._collectionPane,
+          createContentKey: 'createActionView'
+        });
+      }
+    });
+
+    this.$el.append(panelWithOptionsView.render().el);
+    this.addView(panelWithOptionsView);
+  },
+
+  _initBinds: function () {
+    this.listenTo(this.model, 'change', this._onChange);
+    this.listenTo(this._layerDefinitionModel, 'change:visible', this._infoboxState);
+
+    this.listenTo(this._editorModel, 'change:edition', this._onChangeEdition);
+    this.listenTo(this._editorModel, 'change:disabled', this._onChangeDisabled);
+    this.listenTo(this._togglerModel, 'change:active', this._onTogglerChanged);
+    this.listenTo(this._overlayModel, 'change:visible', this._toggleOverlay);
+  },
+
+  _toggleOverlay: function () {
+    var isDisabled = this._overlayModel.get('visible');
+    this.$('.js-overlay').toggleClass('is-disabled', isDisabled);
+  },
+
+  _setContent: function () {
+    if (this._editorModel.get('edition')) {
+      return;
+    }
+
+    var html_value = this._getTemplateContent();
+    this._codemirrorModel.set({
+      content: html_value
+    });
+  },
+
+  _saveInfowindowHTML: function () {
+    var content = this._codemirrorModel.get('content');
+    // Parse
+    var errors = this._getErrors(content);
+
+    if (errors.length === 0) {
+      this._clearErrors();
+
+      // Save old fields
+      if (!this.model.get('old_fields')) {
+        this.model.saveFields();
+      }
+
+      // Save old template name
+      if (!this.model.get('old_template_name')) {
+        this.model.set('old_template_name', this.model.get('template_name'));
+      }
+
+      // new custom template
+      this.model.set({
+        template: content,
+        template_name: ''
+      });
+
+      MetricsTracker.track(MetricsTypes.USED_ADVANCED_MODE, {
+        mode_type: 'popup'
+      });
+
+      this._userActions.saveLayer(this._layerDefinitionModel);
+    } else {
+      this._parseErrors(errors);
+    }
+  },
+
+  _getErrors: function (content) {
+    try {
+      var template = new cdb.core.Template({
+        template: content,
+        type: 'mustache'
+      });
+      template.compile()();
+      if (content === '') {
+        return [{
+          line: 1,
+          message: _t('editor.infowindow.code-mirror.errors.empty')
+        }];
+      } else {
+        return [];
+      }
+    } catch (e) {
+      return e;
+    }
+  },
+
+  _showErrors: function (model) {
+    var errors = this._querySchemaModel.get('query_errors');
+    this._codemirrorModel.set('errors', this._parseErrors(errors));
+  },
+
+  _parseErrors: function (errors) {
+    return errors.map(function (error) {
+      return {
+        line: error.line,
+        message: error.message.split('\n\n')[1]
+      };
+    });
+  },
+
+  _clearErrors: function () {
+    this._codemirrorModel.set({ errors: [] });
+  },
+
+  _getTemplateContent: function () {
+    var fields = [];
+    var alternative_names = this.model.get('alternative_names');
+
+    _.each(this.model.get('fields'), function (field, i) {
+      var f = _.clone(field);
+      f.position = i;
+      if (alternative_names && alternative_names[f.name]) {
+        f.alternative_name = alternative_names[f.name];
+      }
+      fields.push(f);
+    });
+
+    var tmpl = new cdb.core.Template({
+      template: this.model.getTemplate(),
+      type: 'mustache'
+    });
+
+    return tmpl.render({ content: { fields: fields } });
+  },
+
+  _configPanes: function () {
+    var self = this;
+
+    var tabPaneTabs = [{
+      selected: !self.model.isCustomTemplate(),
+      createContentView: function () {
+        return new ScrollView({
+          createContentView: function () {
+            return new InfowindowContentView(_.extend(self.options, {
+              templates: self._templates
+            }));
+          }
+        });
+      },
+      createActionView: function () {
+        return new CoreView();
+      }
+    }, {
+      selected: self.model.isCustomTemplate(),
+      createContentView: function () {
+        return new InfoWindowHTMLView({
+          onApplyEvent: self._saveInfowindowHTML.bind(self),
+          codemirrorModel: self._codemirrorModel
+        });
+      },
+      createActionView: function () {
+        return new ApplyButtonView({
+          onApplyClick: self._saveInfowindowHTML.bind(self),
+          overlayModel: self._overlayModel
+        });
+      }
+    }];
+
+    this._collectionPane = new TabPaneCollection(tabPaneTabs);
+  },
+
+  _onChange: function () {
+    this._userActions.saveLayer(this._layerDefinitionModel);
+    this._setContent();
+  },
+
+  _onChangeEdition: function () {
+    this._infoboxState();
+
+    var edition = this._editorModel.get('edition');
+    var index = edition ? 1 : 0;
+    this._collectionPane.at(index).set({ selected: true });
+    this._togglerModel.set({ active: edition });
+  },
+
+  _onChangeDisabled: function () {
+    var disabled = this._editorModel.get('disabled');
+    this._togglerModel.set({ disabled: disabled });
+  },
+
+  _onTogglerChanged: function () {
+    var checked = this._togglerModel.get('active');
+    this._editorModel.set({ edition: checked });
+  },
+
+  _cancelHTML: function () {
+    this.model.setDefault();
+    this._infoboxModel.set({ state: '' });
+    this._overlayModel.set({ visible: false });
+  },
+
+  _isLayerHidden: function () {
+    return this._layerDefinitionModel.get('visible') === false;
+  },
+
+  _infoboxState: function () {
+    var edition = this._editorModel.get('edition');
+    var customTemplate = this.model.isCustomTemplate();
+
+    if (!edition && customTemplate) {
+      this._infoboxModel.set({ state: 'confirm' });
+      this._overlayModel.set({ visible: true });
+    } else if (this._isLayerHidden()) {
+      this._infoboxModel.set({ state: 'layer-hidden' });
+      this._overlayModel.set({ visible: true });
+      this._togglerModel.set({ disabled: true });
+    } else {
+      this._infoboxModel.set({ state: '' });
+      this._overlayModel.set({ visible: false });
+      this._togglerModel.set({ disabled: false });
+    }
+  },
+
+  _showHiddenLayer: function () {
+    var savingOptions = {
+      shouldPreserveAutoStyle: true
+    };
+    this._layerDefinitionModel.toggleVisible();
+    this._userActions.saveLayer(this._layerDefinitionModel, savingOptions);
+  }
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-carousel.tpl

@@ -0,0 +1,6 @@
+<div class="js-selector">
+  <div class="Editor-HeaderInfo-title u-bSpace--m">
+    <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large"><%- _t('editor.layers.infowindow.style.title-label') %></h2>
+  </div>
+  <p class="CDB-Text u-upperCase CDB-FontSize-small u-altTextColor u-bSpace--m js-highlight"><%- _t('editor.layers.infowindow.style.select-style') %></p>
+</div>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-click-view.js

@@ -0,0 +1,50 @@
+var InfowindowBaseView = require('./infowindow-base-view');
+
+/**
+ * Select for an Infowindow style type.
+ */
+module.exports = InfowindowBaseView.extend({
+
+  _initTemplates: function () {
+    this._templates = [
+      {
+        value: '',
+        infowindowIcon: require('./infowindow-icons/infowindow-none.tpl'),
+        label: _t('editor.layers.infowindow.style.none'),
+        tooltip: _t('editor.layers.infowindow.tooltips.none')
+      }, {
+        value: 'infowindow_light',
+        infowindowIcon: require('./infowindow-icons/infowindow-light.tpl'),
+        label: _t('editor.layers.infowindow.style.infowindow_light'),
+        tooltip: _t('editor.layers.infowindow.tooltips.infowindow_light')
+      }, {
+        value: 'infowindow_dark',
+        infowindowIcon: require('./infowindow-icons/infowindow-dark.tpl'),
+        label: _t('editor.layers.infowindow.style.infowindow_dark'),
+        tooltip: _t('editor.layers.infowindow.tooltips.infowindow_dark')
+      }, {
+        value: 'infowindow_color',
+        infowindowIcon: require('./infowindow-icons/infowindow-color.tpl'),
+        label: _t('editor.layers.infowindow.style.infowindow_color'),
+        tooltip: _t('editor.layers.infowindow.tooltips.infowindow_color')
+      }, {
+        value: 'infowindow_header_with_image',
+        infowindowIcon: require('./infowindow-icons/infowindow-image.tpl'),
+        label: _t('editor.layers.infowindow.style.infowindow_header_with_image'),
+        tooltip: _t('editor.layers.infowindow.tooltips.infowindow_header_with_image')
+      },{
+        value: 'infowindow_header_with_video',
+        infowindowIcon: require('./infowindow-icons/infowindow-image.tpl'),
+        label: _t('editor.layers.infowindow.style.infowindow_header_with_video'),
+        tooltip: _t('editor.layers.infowindow.tooltips.infowindow_header_with_video')
+      },{
+        value: 'infowindow_header_with_url',
+        infowindowIcon: require('./infowindow-icons/infowindow-image.tpl'),
+        label: _t('editor.layers.infowindow.style.infowindow_header_with_url'),
+        tooltip: _t('editor.layers.infowindow.tooltips.infowindow_header_with_url')
+      }
+      
+    ];
+  }
+
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-content-view.js

@@ -0,0 +1,92 @@
+var _ = require('underscore');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+var CoreView = require('backbone/core-view');
+var InfowindowSelectView = require('./infowindow-select-view');
+var InfowindowItemsView = require('./infowindow-items-view');
+var CarouselCollection = require('builder/components/custom-carousel/custom-carousel-collection');
+
+var REQUIRED_OPTS = [
+  'querySchemaModel',
+  'layerDefinitionModel',
+  'templates',
+  'editorModel'
+];
+
+module.exports = CoreView.extend({
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+
+    this._initCollection();
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+
+    this._initViews();
+
+    return this;
+  },
+
+  _initBinds: function () {
+    this.listenTo(this.model, 'change:template_name', this._renderItems);
+    this.listenTo(this.model, 'change:template', this._updateEditor);
+  },
+
+  _initViews: function () {
+    var selectView = new InfowindowSelectView({
+      model: this.model,
+      templatesCollection: this._templatesCollection
+    });
+    this.addView(selectView);
+    this.$el.append(selectView.render().el);
+
+    this._renderItems();
+  },
+
+  _renderItems: function () {
+    if (this._itemsView) {
+      this.removeView(this._itemsView);
+      this._itemsView.clean();
+    }
+
+    this._itemsView = new InfowindowItemsView({
+      model: this.model,
+      querySchemaModel: this._querySchemaModel,
+      layerDefinitionModel: this._layerDefinitionModel,
+      hasValidTemplate: !!this._checkValidTemplate()
+    });
+    this.addView(this._itemsView);
+    this.$el.append(this._itemsView.render().el);
+  },
+
+  _initCollection: function () {
+    this._templatesCollection = new CarouselCollection(
+      _.map(this._templates, function (template) {
+        return {
+          selected: this.model.get('template_name') === template.value,
+          val: template.value,
+          label: template.label,
+          template: function () {
+            return (template.infowindowIcon && template.infowindowIcon()) || template.value;
+          },
+          tooltip: template.tooltip
+        };
+      }, this)
+    );
+  },
+
+  _updateEditor: function () {
+    this._editorModel.set('disabled', !this.model.hasTemplate());
+  },
+
+  _checkValidTemplate: function () {
+    var template = this._templatesCollection.find(function (mdl) {
+      return this.model.get('template_name') === mdl.get('val');
+    }, this);
+
+    return template && template.get('val') !== '';
+  }
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-description-view.js

@@ -0,0 +1,34 @@
+var template = require('./infowindow-description.tpl');
+var CoreView = require('backbone/core-view');
+
+module.exports = CoreView.extend({
+
+  events: {
+    'click .js-toggle': '_toggle'
+  },
+
+  initialize: function (opts) {
+    if (typeof opts.namesCount === 'undefined') throw new Error('namesCount has to be defined');
+
+    this._namesCount = opts.namesCount;
+  },
+
+  render: function () {
+    var totalFields = this._namesCount;
+    var selectedFields = this.model.fieldCount();
+
+    this.$el.html(
+      template({
+        allSelected: selectedFields && (selectedFields === totalFields),
+        noneSelected: !selectedFields,
+        selectedFields: selectedFields
+      })
+    );
+
+    return this;
+  },
+
+  _toggle: function () {
+    this.trigger('toggle');
+  }
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-description.tpl

@@ -0,0 +1,11 @@
+<div class="u-flex u-justifySpace u-alignCenter">
+  <p class="CDB-Text is-semibold CDB-Size-small u-upperCase js-textInfo">
+    <% if (noneSelected) { %>
+      None selected
+    <% } else { %>
+      <%- allSelected ? "All selected" : selectedFields + " selected" %>
+    <% }%>
+  </p>
+ 
+  <button class="CDB-Text CDB-Size-small u-upperCase u-actionTextColor js-toggle"><% if (allSelected) { %>none<% } else { %>all<% } %></button>
+</div>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-field-view.js

@@ -0,0 +1,124 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var template = require('./infowindow-field.tpl');
+var TipsyTooltipView = require('builder/components/tipsy-tooltip-view');
+
+/**
+ * View for an individual column model.
+ */
+module.exports = CoreView.extend({
+
+  tagName: 'li',
+
+  className: 'js-field Infowindow-listFieldItem',
+
+  events: {
+    'click .js-checkbox': 'toggle',
+    'keyup .js-input': '_onKeyUp',
+    'blur .js-input': '_onBlur'
+  },
+
+  initialize: function (opts) {
+    if (!opts.layerInfowindowModel) throw new Error('layerInfowindowModel is required');
+
+    this._layerInfowindowModel = opts.layerInfowindowModel;
+
+    this.fieldName = opts.field.name;
+    this.fieldTitle = opts.field.title;
+    this.position = opts.position;
+
+    this._layerInfowindowModel.bind('change:fields', this.render, this);
+
+    this.model = new Backbone.Model({
+      title: this._layerInfowindowModel.getAlternativeName(this.fieldName) || this.fieldName,
+      selected: !!this._layerInfowindowModel.containsField(this.fieldName)
+    });
+    this.model.bind('change:title', this._updateTitle, this);
+    this.model.bind('change:selected', this._updateSelected, this);
+  },
+
+  _onBlur: function (e) {
+    var value = this.$el.find('.js-input').val();
+    value = this._stripHTML(value);
+
+    this.model.set('title', value);
+  },
+
+  _updateTitle: function () {
+    var value = this.model.get('title');
+    value = this._stripHTML(value);
+    this._layerInfowindowModel.setAlternativeName(this.fieldName, value);
+
+    var isBlank = this._isBlank(value);
+    this._layerInfowindowModel.setFieldProperty(this.fieldName, 'title', !isBlank);
+  },
+
+  _onKeyUp: function (e) {
+    if (e.keyCode === 13) { // Enter
+      var value = this.$el.find('.js-input').val();
+      value = this._stripHTML(value);
+
+      this.model.set('title', value);
+    // } else if (e.keyCode === 27) { // Esc
+    //   this._close();
+    }
+  },
+
+  _isBlank: function (str) {
+    return (!str || /^\s*$/.test(str));
+  },
+
+  _stripHTML: function (input, allowed) {
+    allowed = (((allowed || '') + '').toLowerCase().match(/<[a-z][a-z0-9]*>/g) || []).join('');
+    var tags = /<\/?([a-z][a-z0-9]*)\b[^>]*>/gi;
+    if (!input || (typeof input !== 'string')) return '';
+    return input.replace(tags, function ($0, $1) {
+      return allowed.indexOf('<' + $1.toLowerCase() + '>') > -1 ? $0 : '';
+    });
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    this.$el.html(template({
+      name: this.fieldName,
+      title: this._layerInfowindowModel.getFieldProperty(this.fieldName, 'title'),
+      alternativeName: this._layerInfowindowModel.getAlternativeName(this.fieldName),
+      isSelected: !!this._layerInfowindowModel.containsField(this.fieldName)
+    }));
+    this.$el.attr('data-view-cid', this.cid);
+
+    this._initViews();
+
+    return this;
+  },
+
+  _initViews: function () {
+    var tooltip = new TipsyTooltipView({
+      el: this.$('.js-input'),
+      gravity: 'w',
+      title: function () {
+        return _t('editor.layers.infowindow.items.help');
+      }
+    });
+    this.addView(tooltip);
+  },
+
+  toggle: function (e) {
+    e && e.preventDefault();
+
+    this.model.set('selected', !this.model.get('selected'));
+
+    return false;
+  },
+
+  _updateSelected: function (e) {
+    if (!this._layerInfowindowModel.containsField(this.fieldName)) {
+      this._layerInfowindowModel.addField(this.fieldName, this.position);
+    } else {
+      this.model.set('title', null);
+      this._layerInfowindowModel.removeField(this.fieldName);
+    }
+  }
+
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-field.tpl

@@ -0,0 +1,15 @@
+<div class="CDB-Text CDB-Fieldset u-tSpace--m">
+  <div class="CDB-Legend CDB-Legend--big u-ellipsis CDB-Text CDB-Size-medium u-rSpace--m">
+    <div class="Infowindow-listFieldsOrder CDB-Shape u-iblock u-malign">
+      <div class="CDB-Shape-rectsHandle is-small">
+        <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-first"></div>
+        <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-second"></div>
+        <div class="CDB-Shape-rectsHandleItem CDB-Shape-rectsHandleItem--grey is-third"></div>
+      </div>
+    </div>
+    <input class="CDB-Checkbox js-checkbox" type="checkbox" <% if (isSelected) { %>checked="checked"<% } %>">
+    <span class="u-iBlock CDB-Checkbox-face u-rSpace"></span>
+    <label class="u-rSpace--m" title="<%- name %>"><%- name %></label>
+  </div>
+  <input type="text" name="text" placeholder='"<%- name %>"' value="<% if (!isSelected) { %><%- name %><% } else { %><% if (title) { %><% if (alternativeName) { %><%- alternativeName %><% } else { %><%- name %><% } %><% } %><% } %>" class="CDB-InputText js-input" <% if (!isSelected) { %>disabled<% } %>>
+</div>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-fields-view.js

@@ -0,0 +1,217 @@
+var FieldView = require('./infowindow-field-view.js');
+var InfowindowDescriptionView = require('./infowindow-description-view.js');
+var template = require('./infowindow-fields.tpl');
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var _ = require('underscore');
+var $ = require('jquery');
+require('jquery-ui');
+
+module.exports = CoreView.extend({
+
+  initialize: function (opts) {
+    if (!opts.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!opts.layerDefinitionModel) throw new Error('layerDefinitionModel is required');
+
+    this._querySchemaModel = opts.querySchemaModel;
+    this._layerDefinitionModel = opts.layerDefinitionModel;
+
+    // An internal collection to keep track of the columns and their order
+    this._sortedFields = new Backbone.Collection();
+    this._sortedFields.comparator = function (model) {
+      return model.get('position');
+    };
+
+    this._initBinds();
+  },
+
+  _initBinds: function () {
+    this.model.bind('remove:fields', this._renderDescription, this);
+    this.model.bind('add:fields', this._renderDescription, this);
+  },
+
+  render: function () {
+    this._destroySortable();
+    this.clearSubViews();
+
+    this.$el.html(template());
+
+    this._renderDescription();
+    this._renderFields();
+    this._initSortable();
+    this._renderSelectAll();
+    this._storeSortedFields();
+
+    return this;
+  },
+
+  _renderDescription: function () {
+    if (this._fieldsDescriptionView) {
+      this.removeView(this._fieldsDescriptionView);
+      this._fieldsDescriptionView.clean();
+    }
+
+    this._fieldsDescriptionView = new InfowindowDescriptionView({
+      model: this.model,
+      namesCount: this._getColumnNames().length
+    });
+
+    this._fieldsDescriptionView.bind('toggle', this.manageAll, this);
+
+    this.addView(this._fieldsDescriptionView);
+    this.$('.js-description').append(this._fieldsDescriptionView.render().el);
+
+    this._renderSelectAll();
+  },
+
+  _renderSelectAll: function () {
+    this.selectedAll = this._allFieldsSelected();
+  },
+
+  _allFieldsSelected: function () {
+    var selectedAll = true;
+
+    _.each(this._getColumnNames(), function (field) {
+      if (!this.model.containsField(field)) {
+        selectedAll = false;
+      }
+    }, this);
+
+    return selectedAll;
+  },
+
+  manageAll: function (e) {
+    if (!this.selectedAll) {
+      this._selectAll();
+    } else {
+      this._unselectAll();
+    }
+  },
+
+  _selectAll: function () {
+    var names = this._sortedFields.map(function (w) { return w.get('name'); });
+    var promises = [];
+
+    _.each(names, function (f) {
+      if (!this.model.containsField(f)) {
+        promises.push(this.model._addField(f));
+      }
+    }, this);
+
+    $.when.apply($, promises).then(function () {
+      this.model.sortFields();
+      this.model.trigger('add:fields');
+      this.model.trigger('change:fields', this.model, this.model.get('fields'));
+      this.model.trigger('change', this.model);
+
+      this._toggleSelectAll();
+    }.bind(this));
+  },
+
+  _unselectAll: function () {
+    this.model.clearFields();
+    this.model.trigger('change:fields');
+    this._toggleSelectAll();
+  },
+
+  _toggleSelectAll: function () {
+    this.selectedAll = !this.selectedAll;
+    this._renderDescription();
+  },
+
+  _initSortable: function () {
+    this.$('.js-fields').sortable({
+      axis: 'y',
+      items: '> li',
+      opacity: 0.8,
+      update: this._onSortableFinish.bind(this),
+      forcePlaceholderSize: false
+    });
+  },
+
+  _destroySortable: function () {
+    if (this.$('.js-fields').data('ui-sortable')) {
+      this.$('.js-fields').sortable('destroy');
+    }
+  },
+
+  _onSortableFinish: function () {
+    this._storeSortedFields();
+  },
+
+  _getSortedColumnNames: function () {
+    var names = this._getColumnNames();
+
+    if (this.model.fieldCount() > 0) {
+      names.sort(function (a, b) {
+        var pos_a = this.model.getFieldPos(a);
+        var pos_b = this.model.getFieldPos(b);
+        return pos_a - pos_b;
+      }.bind(this));
+    }
+    return names;
+  },
+
+  _storeSortedFields: function () {
+    this._sortedFields.reset([]);
+
+    this.$('.js-fields > .js-field').each(function (index, item) {
+      var view = this._subviews[$(item).data('view-cid')];
+
+      this.model.setFieldProperty(view.fieldName, 'position', index);
+      view.position = index;
+
+      this._sortedFields.add({
+        name: view.fieldName,
+        position: index
+      });
+    }.bind(this));
+  },
+
+  _getColumnNames: function () {
+    var filteredColumns = this._querySchemaModel.columnsCollection.filter(function (c) {
+      return !_.contains(this.model.SYSTEM_COLUMNS, c.get('name'));
+    }.bind(this));
+
+    var columnNames = [];
+
+    _.each(filteredColumns, function (m) {
+      columnNames.push(m.get('name'));
+    });
+
+    return columnNames;
+  },
+
+  _renderFields: function () {
+    var renderField = function (field) {
+      var title = this.model.getFieldProperty(field, 'title');
+
+      var view = new FieldView({
+        layerInfowindowModel: this.model,
+        field: { name: field, title: title },
+        position: this.model.getFieldPos(field)
+      });
+
+      this.addView(view);
+      this.$('.js-fields').append(view.render().el);
+    }.bind(this);
+
+    var names = this._getSortedColumnNames();
+    var selected = [];
+    var fields = this.model.get('fields');
+
+    if (_.isArray(fields)) {
+      selected = fields.map(function (field) {
+        return field.name;
+      });
+    }
+
+    var rest = _.difference(names, selected);
+    _.each(selected.concat(rest), renderField);
+  },
+
+  clean: function () {
+    this._destroySortable();
+    CoreView.prototype.clean.apply(this);
+  }
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-fields.tpl

@@ -0,0 +1,2 @@
+<div class="js-description"></div>
+<ul class="js-fields Infowindow-listFields"></ul>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-form-model.js

@@ -0,0 +1,84 @@
+var _ = require('underscore');
+var Backbone = require('backbone');
+var DialogConstants = require('builder/components/form-components/_constants/_dialogs');
+var DEBOUNCE_TIME = 350;
+
+module.exports = Backbone.Model.extend({
+
+  initialize: function (attrs, opts) {
+    if (!opts.layerInfowindowModel) throw new Error('layerInfowindowModel is required');
+    this._layerInfowindowModel = opts.layerInfowindowModel;
+
+    this._generateSchema();
+    this._initBinds();
+  },
+
+  _initBinds: function () {
+    this.bind('change', _.debounce(this._onChange.bind(this), DEBOUNCE_TIME), this);
+  },
+
+  _onChange: function () {
+    var self = this;
+
+    _.each(this.changed, function (val, key) {
+      // if the attr doesn't exist in the infowindowModel it will be created, BOOM
+      self._layerInfowindowModel.set(key, val);
+    });
+  },
+
+  _generateSchema: function () {
+    this.schema = {};
+
+    var type = this._layerInfowindowModel.get('template_name');
+
+    if (type !== '' && type !== 'none') {
+      if (this._layerInfowindowModel.has('width')) {
+        this.schema.width = {
+          type: 'Number',
+          title: _t('editor.layers.infowindow.style.size.label'),
+          validators: ['required', {
+            type: 'interval',
+            min: 200,
+            max: 400
+          }],
+          editorAttrs: {
+            help: _t('editor.layers.infowindow.style.size.help')
+          }
+        };
+      }
+    }
+
+    if (type === 'infowindow_color') {
+      this.schema.headerColor = {
+        type: 'Fill',
+        title: _t('editor.layers.infowindow.style.header-color'),
+        options: [],
+        dialogMode: DialogConstants.Mode.FLOAT,
+        editorAttrs: {
+          color: {
+            hidePanes: ['value']
+          }
+        },
+        validators: ['required']
+      };
+    }
+    
+    //infowindow_header_with_url
+    
+    if (type === 'infowindow_header_with_url') {
+      this.schema.height = {
+         type: 'Number',
+          title: _t('editor.layers.infowindow.style.h5-height'),
+          validators: ['required', {
+            type: 'interval',
+            min: 100,
+            max: 600
+          }],
+          editorAttrs: {
+            help: _t('editor.layers.infowindow.style.h5-height')
+          }
+      };
+    }
+  }
+
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-form-view.js

@@ -0,0 +1,51 @@
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var template = require('./infowindow-form.tpl');
+var InfowindowFormModel = require('./infowindow-form-model');
+
+module.exports = CoreView.extend({
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.html(template());
+
+    this._generateForms();
+    this._initBinds();
+
+    return this;
+  },
+
+  _initBinds: function () {
+    this.model.bind('change:template_name', this._generateForms, this);
+  },
+
+  _generateForms: function () {
+    if (this._formView) {
+      this._formView.remove();
+    }
+
+    this._formModel = new InfowindowFormModel({
+      width: this.model.get('width'),
+      headerColor: this.model.get('headerColor'),
+      height:this.model.get('height')
+    }, {
+      layerInfowindowModel: this.model
+    });
+
+    this._formView = new Backbone.Form({
+      model: this._formModel
+    });
+
+    this._formView.bind('change', function () {
+      this.commit();
+    });
+
+    this.$('.js-form').append(this._formView.render().$el);
+  },
+
+  clean: function () {
+    if (this._formView) {
+      this._formView.remove();
+    }
+  }
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-form.tpl

@@ -0,0 +1 @@
+<div class="js-form"></div>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-hover-view.js

@@ -0,0 +1,29 @@
+var InfowindowBaseView = require('./infowindow-base-view');
+
+/**
+ * Select for an Infowindow style type.
+ */
+module.exports = InfowindowBaseView.extend({
+
+  _initTemplates: function () {
+    this._templates = [
+      {
+        value: '',
+        infowindowIcon: require('./tooltip-icons/tooltip-none.tpl'),
+        label: _t('editor.layers.infowindow.style.none'),
+        tooltip: _t('editor.layers.infowindow.tooltips.none')
+      }, {
+        value: 'tooltip_light',
+        infowindowIcon: require('./tooltip-icons/tooltip-light.tpl'),
+        label: _t('editor.layers.infowindow.style.infowindow_light'),
+        tooltip: _t('editor.layers.infowindow.tooltips.infowindow_light')
+      }, {
+        value: 'tooltip_dark',
+        infowindowIcon: require('./tooltip-icons/tooltip-dark.tpl'),
+        label: _t('editor.layers.infowindow.style.infowindow_dark'),
+        tooltip: _t('editor.layers.infowindow.tooltips.infowindow_dark')
+      }
+    ];
+  }
+
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-html-view.js

@@ -0,0 +1,45 @@
+var CoreView = require('backbone/core-view');
+var CodeMirrorView = require('builder/components/code-mirror/code-mirror-view');
+var ErrorTemplate = require('./code-mirror-error.tpl');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+
+var REQUIRED_OPTS = [
+  'codemirrorModel',
+  'onApplyEvent'
+];
+
+module.exports = CoreView.extend({
+  module: 'editor:layers:layer-content-views:infowindow:infowindow-html-view',
+
+  className: 'Editor-content',
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+    this._initViews();
+    return this;
+  },
+
+  _initViews: function () {
+    this.codeMirrorView = new CodeMirrorView({
+      model: this._codemirrorModel,
+      tips: [
+        _t('editor.infowindow.code-mirror.save'),
+        _t('editor.infowindow.code-mirror.sanitize')
+      ],
+      errorTemplate: ErrorTemplate
+    });
+
+    this.codeMirrorView.bind('codeSaved', this._triggerCodeSaved, this);
+    this.addView(this.codeMirrorView);
+    this.$el.append(this.codeMirrorView.render().el);
+  },
+
+  _triggerCodeSaved: function (code, view) {
+    this._onApplyEvent && this._onApplyEvent();
+  }
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-icons/infowindow-color.tpl

@@ -0,0 +1,14 @@
+<svg width="58px" height="38px" viewBox="608 430 58 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="PopUp" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(608.000000, 431.000000)">
+        <path d="M1,2.00174332 C1,0.89621101 1.90230818,0 2.99306965,0 L55.0069304,0 C56.1076723,0 57,0.889261723 57,2.00174332 L57,29.9982567 C57,31.103789 56.1032859,32 55.0073354,32 L18.4262695,32 L9,36 L9,32 L2.99810135,32 C1.89458045,32 1,31.1107383 1,29.9982567 L1,2.00174332 L1,2.00174332 Z" id="Rectangle-2087" stroke="#EEEEEE" fill="#FFFFFF"></path>
+        <path d="M15,4.35207426e-14 L10.3214747,12 L1,12 L1,3.48144531 C1,3.48144531 0.787841764,1.33203125 1.49902344,0.666015625 C2.21020511,4.35207426e-14 3.82543945,4.35207426e-14 3.82543945,4.35207426e-14 L15,4.35207426e-14 Z" id="Rectangle-678" fill="#9AE0AA"></path>
+        <polygon id="Rectangle-678" fill="#F4F1DE" points="27 0 22.3214747 12 9 12 13.6785253 0"></polygon>
+        <polygon id="Rectangle-678" fill="#E37E62" points="39 0 34.3214747 12 21 12 25.6785253 0"></polygon>
+        <polygon id="Rectangle-678" fill="#3D3D5B" points="51 0 46.3214747 12 33 12 37.6785253 0"></polygon>
+        <path d="M54.2199707,0 C54.2199707,0 56.0734097,0.047231609 56.5109863,0.508300759 C57.0344286,1.05984554 57.1030273,3.0378418 57.1030273,3.0378418 L57.1030273,12 L46,12 L50.6785253,0 L54.2199707,0 Z" id="Rectangle-678" fill="#F2CF8F"></path>
+        <rect id="Rectangle-678" fill="#FFFFFF" opacity="0.32" x="7" y="4" width="36" height="4"></rect>
+        <rect id="Rectangle-679" fill="#DDDDDD" x="6" y="17" width="45" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="6" y="21" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="6" y="25" width="19" height="2"></rect>
+    </g>
+</svg>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-icons/infowindow-dark.tpl

@@ -0,0 +1,10 @@
+<svg width="56px" height="36px" viewBox="512 431 56 36" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="PopUp" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(512.000000, 431.000000)">
+        <path d="M0,2.00174332 C0,0.89621101 0.902308181,0 1.99306965,0 L54.0069304,0 C55.1076723,0 56,0.889261723 56,2.00174332 L56,29.9982567 C56,31.103789 55.1032859,32 54.0073354,32 L17.4262695,32 L8,36 L8,32 L1.99810135,32 C0.894580447,32 0,31.1107383 0,29.9982567 L0,2.00174332 L0,2.00174332 Z" id="Rectangle-2087" fill="#2E3C43"></path>
+        <rect id="Rectangle-679" fill="#636D72" x="5" y="15" width="45" height="2"></rect>
+        <rect id="Rectangle-680" fill="#636D72" x="5" y="19" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#636D72" x="5" y="23" width="19" height="2"></rect>
+        <rect id="Rectangle-680" fill="#636D72" x="5" y="11" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#636D72" x="5" y="7" width="36" height="2"></rect>
+    </g>
+</svg>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-icons/infowindow-image.tpl

@@ -0,0 +1,11 @@
+<svg width="58px" height="38px" viewBox="688 430 58 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="IMG" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(689.000000, 431.000000)">
+        <path d="M0,2.00174332 C0,0.89621101 0.902308181,0 1.99306965,0 L54.0069304,0 C55.1076723,0 56,0.889261723 56,2.00174332 L56,29.9982567 C56,31.103789 55.1032859,32 54.0073354,32 L17.4262695,32 L8,36 L8,32 L1.99810135,32 C0.894580447,32 0,31.1107383 0,29.9982567 L0,2.00174332 L0,2.00174332 Z" id="Rectangle-2087" stroke="#EEEEEE" fill="#FFFFFF"></path>
+        <path d="M54.0069304,0 C55.1076723,0 56,0.901950359 56,2.0085302 L56,12 L0,12 L0,2.0085302 C0,0.899249601 0.902308181,0 1.99306965,0 L54.0069304,0 Z" id="Rectangle-678" fill="#CBCED0"></path>
+        <rect id="Rectangle-678" fill="#FFFFFF" opacity="0.32" x="6" y="4" width="28" height="4"></rect>
+        <rect id="Rectangle-679" fill="#DDDDDD" x="5" y="17" width="45" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="5" y="21" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="5" y="25" width="19" height="2"></rect>
+        <path d="M43.6,6 L46,8 L49.6,2 L52,10 L40,10 L43.6,6 Z M41,4 C41.5522847,4 42,3.55228475 42,3 C42,2.44771525 41.5522847,2 41,2 C40.4477153,2 40,2.44771525 40,3 C40,3.55228475 40.4477153,4 41,4 Z" id="Rectangle-5896" fill="#FFFFFF"></path>
+    </g>
+</svg>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-icons/infowindow-light.tpl

@@ -0,0 +1,10 @@
+<svg width="58px" height="38px" viewBox="429 431 58 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="PopUp-Copy" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(430.000000, 432.000000)">
+        <path d="M0,2.00174332 C0,0.89621101 0.902308181,0 1.99306965,0 L54.0069304,0 C55.1076723,0 56,0.889261723 56,2.00174332 L56,29.9982567 C56,31.103789 55.1032859,32 54.0073354,32 L17.4262695,32 L8,36 L8,32 L1.99810135,32 C0.894580447,32 0,31.1107383 0,29.9982567 L0,2.00174332 L0,2.00174332 Z" id="Rectangle-2087" stroke="#EEEEEE" fill="#FFFFFF"></path>
+        <rect id="Rectangle-679" fill="#DDDDDD" x="4" y="14" width="45" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="4" y="18" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="4" y="22" width="19" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="4" y="10" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="4" y="6" width="36" height="2"></rect>
+    </g>
+</svg>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-icons/infowindow-none.tpl

@@ -0,0 +1 @@
+<p class="CDB-Text CDB-Size-small u-altTextColor u-upperCase">None</p>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-icons/infowindow-url.tpl

@@ -0,0 +1,11 @@
+<svg width="58px" height="38px" viewBox="688 430 58 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="IMG" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(689.000000, 431.000000)">
+        <path d="M0,2.00174332 C0,0.89621101 0.902308181,0 1.99306965,0 L54.0069304,0 C55.1076723,0 56,0.889261723 56,2.00174332 L56,29.9982567 C56,31.103789 55.1032859,32 54.0073354,32 L17.4262695,32 L8,36 L8,32 L1.99810135,32 C0.894580447,32 0,31.1107383 0,29.9982567 L0,2.00174332 L0,2.00174332 Z" id="Rectangle-2087" stroke="#EEEEEE" fill="#FFFFFF"></path>
+        <path d="M54.0069304,0 C55.1076723,0 56,0.901950359 56,2.0085302 L56,12 L0,12 L0,2.0085302 C0,0.899249601 0.902308181,0 1.99306965,0 L54.0069304,0 Z" id="Rectangle-678" fill="#CBCED0"></path>
+        <rect id="Rectangle-678" fill="#FFFFFF" opacity="0.32" x="6" y="4" width="28" height="4"></rect>
+        <rect id="Rectangle-679" fill="#DDDDDD" x="5" y="17" width="45" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="5" y="21" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="5" y="25" width="19" height="2"></rect>
+        <path d="M43.6,6 L46,8 L49.6,2 L52,10 L40,10 L43.6,6 Z M41,4 C41.5522847,4 42,3.55228475 42,3 C42,2.44771525 41.5522847,2 41,2 C40.4477153,2 40,2.44771525 40,3 C40,3.55228475 40.4477153,4 41,4 Z" id="Rectangle-5896" fill="#FFFFFF"></path>
+    </g>
+</svg>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-icons/infowindow-video.tpl

@@ -0,0 +1,11 @@
+<svg width="58px" height="38px" viewBox="688 430 58 38" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="IMG" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(689.000000, 431.000000)">
+        <path d="M0,2.00174332 C0,0.89621101 0.902308181,0 1.99306965,0 L54.0069304,0 C55.1076723,0 56,0.889261723 56,2.00174332 L56,29.9982567 C56,31.103789 55.1032859,32 54.0073354,32 L17.4262695,32 L8,36 L8,32 L1.99810135,32 C0.894580447,32 0,31.1107383 0,29.9982567 L0,2.00174332 L0,2.00174332 Z" id="Rectangle-2087" stroke="#EEEEEE" fill="#FFFFFF"></path>
+        <path d="M54.0069304,0 C55.1076723,0 56,0.901950359 56,2.0085302 L56,12 L0,12 L0,2.0085302 C0,0.899249601 0.902308181,0 1.99306965,0 L54.0069304,0 Z" id="Rectangle-678" fill="#CBCED0"></path>
+        <rect id="Rectangle-678" fill="#FFFFFF" opacity="0.32" x="6" y="4" width="28" height="4"></rect>
+        <rect id="Rectangle-679" fill="#DDDDDD" x="5" y="17" width="45" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="5" y="21" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="5" y="25" width="19" height="2"></rect>
+        <path d="M43.6,6 L46,8 L49.6,2 L52,10 L40,10 L43.6,6 Z M41,4 C41.5522847,4 42,3.55228475 42,3 C42,2.44771525 41.5522847,2 41,2 C40.4477153,2 40,2.44771525 40,3 C40,3.55228475 40.4477153,4 41,4 Z" id="Rectangle-5896" fill="#FFFFFF"></path>
+    </g>
+</svg>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-items-view.js

@@ -0,0 +1,48 @@
+var CoreView = require('backbone/core-view');
+var template = require('./infowindow-items.tpl');
+var InfowindowFieldsView = require('./infowindow-fields-view');
+
+module.exports = CoreView.extend({
+
+  initialize: function (opts) {
+    if (!opts.querySchemaModel) throw new Error('querySchemaModel is required');
+    if (!opts.layerDefinitionModel) throw new Error('layerDefinitionModel is required');
+    if (typeof opts.hasValidTemplate === 'undefined') throw new Error('hasValidTemplate has to be defined');
+    this._querySchemaModel = opts.querySchemaModel;
+    this._layerDefinitionModel = opts.layerDefinitionModel;
+    this._hasValidTemplate = opts.hasValidTemplate;
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+
+    if (this._hasValidTemplate) {
+      this._initViews();
+    }
+
+    return this;
+  },
+
+  _initViews: function () {
+    this.$el.html(template({
+      title: _t('editor.layers.infowindow.items.title-label')
+    }));
+
+    if (this._infowindowFieldsView) {
+      this.removeView(this._infowindowFieldsView);
+      this._infowindowFieldsView.clean();
+    }
+
+    this._infowindowFieldsView = new InfowindowFieldsView({
+      model: this.model,
+      querySchemaModel: this._querySchemaModel,
+      layerDefinitionModel: this._layerDefinitionModel
+    });
+
+    this.$('.js-content').append(this._infowindowFieldsView.render().$el);
+    this.addView(this._infowindowFieldsView);
+
+    return this;
+  }
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-items.tpl

@@ -0,0 +1,11 @@
+<div class="Editor-HeaderInfo">
+  <div class="Editor-HeaderNumeration CDB-Text is-semibold u-rSpace--m">2</div>
+
+  <div class="Editor-HeaderInfo-Inner CDB-Text">
+    <div class="Editor-HeaderInfo-Title u-bSpace--m">
+      <h2 class="Editor-HeaderInfo-TitleText CDB-Text CDB-Size-large"><%- _t('editor.layers.infowindow.items.title-label') %></h2>
+    </div>
+
+    <div class="js-content"></div>
+  </div>
+</div>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-select-view.js

@@ -0,0 +1,88 @@
+var CoreView = require('backbone/core-view');
+var template = require('./infowindow-select.tpl');
+var CarouselFormView = require('builder/components/carousel-form-view');
+var InfowindowFormView = require('./infowindow-form-view');
+
+module.exports = CoreView.extend({
+
+  initialize: function (opts) {
+    if (!opts.templatesCollection) throw new Error('templatesCollection is required');
+    this._templatesCollection = opts.templatesCollection;
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    this.$el.html(template());
+
+    this._renderCarousel();
+    this._renderForm();
+
+    return this;
+  },
+
+  _initBinds: function () {
+    this.model.bind('change:headerColor', this._onColorChange, this);
+  },
+
+  _onColorChange: function () {
+    this._setTemplate(this.model.get('template_name'));
+  },
+
+  _checkValidTemplate: function () {
+    var template = this._templatesCollection.find(function (mdl) {
+      return this.model.get('template_name') === mdl.get('val');
+    }, this);
+
+    return template && template.get('val') !== '';
+  },
+
+  _setNoneTemplate: function () {
+    var noneTemplate = this._templatesCollection.find(function (mdl) {
+      return mdl.get('val') === '';
+    }, this);
+
+    noneTemplate.set('selected', true);
+  },
+
+  _setTemplate: function (template_name) {
+    this.model.setTemplate(template_name);
+  },
+
+  _renderCarousel: function () {
+    if (!this._checkValidTemplate()) {
+      this._setNoneTemplate();
+    }
+
+    this._templatesCollection.bind('change:selected', function (mdl) {
+      if (mdl.get('selected')) {
+        var value = mdl.getValue();
+        this._setTemplate(value);
+      }
+    }, this);
+    this.add_related_model(this._templatesCollection);
+
+    var view = new CarouselFormView({
+      collection: this._templatesCollection,
+      template: require('./infowindow-carousel.tpl')
+    });
+    this.addView(view);
+    this.$('.js-select').append(view.render().el);
+  },
+
+  _renderForm: function () {
+    if (this._infowindowFormView) {
+      this.removeView(this._infowindowFormView);
+      this._infowindowFormView.clean();
+    }
+
+    this._infowindowFormView = new InfowindowFormView({
+      model: this.model
+    });
+    this.addView(this._infowindowFormView);
+    this.$('.js-select').append(this._infowindowFormView.render().el);
+  }
+
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindow-select.tpl

@@ -0,0 +1,4 @@
+<div class="Editor-HeaderInfo">
+  <div class="Editor-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+  <div class="Editor-HeaderInfo-inner CDB-Text js-select"></div>
+</div>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/infowindows-view.js

@@ -0,0 +1,239 @@
+var Backbone = require('backbone');
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var InfowindowClickView = require('./infowindow-click-view');
+var TooltipView = require('./infowindow-hover-view');
+var createTextLabelsTabPane = require('builder/components/tab-pane/create-text-labels-tab-pane');
+var TabPaneTemplate = require('builder/editor/tab-pane-submenu.tpl');
+var popupPlaceholderTemplate = require('./popups-placeholder.tpl');
+var layerTabMessageTemplate = require('builder/editor/layers/layer-tab-message.tpl');
+var checkAndBuildOpts = require('builder/helpers/required-opts');
+
+var REQUIRED_OPTS = [
+  'userActions',
+  'layerDefinitionModel',
+  'querySchemaModel',
+  'editorModel',
+  'layerContentModel'
+];
+
+module.exports = CoreView.extend({
+  module: 'infowindows-view',
+
+  initialize: function (opts) {
+    checkAndBuildOpts(opts, REQUIRED_OPTS, this);
+
+    this._initViewState();
+    this._initModels();
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+    this.$el.empty();
+
+    if (this._viewState.get('isDataFiltered')) {
+      this._renderFilteredData();
+    } else if (this._isNotAggregatedType() && this._hasColumns()) {
+      this._initViews();
+    } else {
+      this._renderPlaceholder();
+    }
+
+    return this;
+  },
+
+  _initViewState: function () {
+    this._viewState = new Backbone.Model({
+      isDataFiltered: false
+    });
+
+    this._setViewValues();
+  },
+
+  _initModels: function () {
+    this._layerInfowindowModel = this._layerDefinitionModel.infowindowModel;
+    this._layerTooltipModel = this._layerDefinitionModel.tooltipModel;
+
+    this._editorModel.set({
+      edition: false
+    });
+  },
+
+  _initBinds: function () {
+    this.listenTo(this._editorModel, 'change:edition', this._changeStyle);
+    this.listenTo(this._layerInfowindowModel, 'change:template', this._updateSelectedChild);
+    this.listenTo(this._layerTooltipModel, 'change:template', this._updateSelectedChild);
+    this.listenTo(this._layerContentModel, 'change:state', this._setViewValues);
+    this.listenTo(this._viewState, 'change:isDataFiltered', this.render);
+    this.listenTo(this._querySchemaModel, 'change:status', this.render);
+  },
+
+  _initViews: function () {
+    var self = this;
+
+    var clickTemplate = _t('editor.layers.infowindow.style.none');
+    var hoverTemplate = _t('editor.layers.tooltip.style.none');
+
+    if (this._layerInfowindowModel.isCustomTemplate()) {
+      clickTemplate = _t('editor.layers.infowindow.style.custom');
+    } else if (this._layerInfowindowModel.hasTemplate()) {
+      clickTemplate = _t('editor.layers.infowindow.style.' + this._layerInfowindowModel.get('template_name'));
+    }
+
+    if (this._layerTooltipModel.isCustomTemplate()) {
+      hoverTemplate = _t('editor.layers.tooltip.style.custom');
+    } else if (this._layerTooltipModel.hasTemplate()) {
+      hoverTemplate = _t('editor.layers.tooltip.style.' + this._layerTooltipModel.get('template_name'));
+    }
+
+    var selectedModel = this._layerTabPaneView && this._layerTabPaneView.collection.find(function (model) {
+      return model.get('selected');
+    });
+    var selectedTab = selectedModel ? selectedModel.get('name') : 'click';
+
+    var tabPaneTabs = [{
+      name: 'click',
+      selected: selectedTab === 'click',
+      label: _t('editor.layers.infowindow-menu-tab-pane-labels.click'),
+      createContentView: function () {
+        return new InfowindowClickView({
+          className: 'Editor-content',
+          querySchemaModel: self._querySchemaModel,
+          userActions: self._userActions,
+          editorModel: self._editorModel,
+          model: self._layerInfowindowModel,
+          layerDefinitionModel: self._layerDefinitionModel
+        });
+      },
+      selectedChild: clickTemplate
+    }, {
+      name: 'hover',
+      selected: selectedTab === 'hover',
+      label: _t('editor.layers.infowindow-menu-tab-pane-labels.hover'),
+      createContentView: function () {
+        return new TooltipView({
+          className: 'Editor-content',
+          querySchemaModel: self._querySchemaModel,
+          userActions: self._userActions,
+          editorModel: self._editorModel,
+          model: self._layerTooltipModel,
+          layerDefinitionModel: self._layerDefinitionModel
+        });
+      },
+      selectedChild: hoverTemplate
+    }];
+
+    var tabPaneOptions = {
+      tabPaneOptions: {
+        template: TabPaneTemplate,
+        tabPaneItemOptions: {
+          tagName: 'li',
+          klassName: 'CDB-NavSubmenu-item'
+        }
+      },
+      tabPaneItemLabelOptions: {
+        tagName: 'button',
+        className: 'CDB-NavSubmenu-link u-upperCase'
+      }
+    };
+
+    this._layerTabPaneView = createTextLabelsTabPane(tabPaneTabs, tabPaneOptions);
+    this.$el.append(this._layerTabPaneView.render().$el);
+    this.addView(this._layerTabPaneView);
+  },
+
+  _isLayerHidden: function () {
+    return this._layerDefinitionModel.get('visible') === false;
+  },
+
+  _hasColumns: function () {
+    var columns = this._querySchemaModel.columnsCollection.models;
+
+    var filteredColumns = _(columns).filter(function (c) {
+      return !_.contains(this._layerInfowindowModel.SYSTEM_COLUMNS, c.get('name'));
+    }, this);
+
+    return filteredColumns.length;
+  },
+
+  _isNotAggregatedType: function () {
+    var styleModel = this._layerDefinitionModel.styleModel;
+    return this._layerInfowindowModel && styleModel && !styleModel.isAggregatedType() && !styleModel.isAnimation();
+  },
+
+  _renderPlaceholder: function () {
+    if (this._layerInfowindowModel && !this._hasColumns()) {
+      this.$el.append(popupPlaceholderTemplate({
+        placeholder: _t('editor.layers.infowindow.placeholder-columns-text')
+      }));
+    } else {
+      this.$el.append(popupPlaceholderTemplate({
+        placeholder: _t('editor.layers.infowindow.placeholder-interactivity-text')
+      }));
+    }
+  },
+
+  _renderFilteredData: function () {
+    this.$el.append(
+      layerTabMessageTemplate({
+        message: _t('editor.layers.warnings.no-data.message'),
+        action: _t('editor.layers.warnings.no-data.action-message')
+      })
+    );
+  },
+
+  _changeStyle: function (model) {
+    if (this._layerTabPaneView) { this._layerTabPaneView.changeStyleMenu(model); }
+  },
+
+  _updateSelectedChild: function () {
+    // TODO: Move to tabPaneView
+    var selectedChild;
+    var selectedChildTxt;
+
+    switch (this._layerTabPaneView.getSelectedTabPaneName()) {
+      case 'click':
+        selectedChild = this._layerInfowindowModel.get('template_name');
+        selectedChildTxt = _t('editor.layers.infowindow.style.none');
+
+        if (this._layerInfowindowModel.isCustomTemplate()) {
+          selectedChildTxt = _t('editor.layers.infowindow.style.custom');
+        } else if (this._layerInfowindowModel.hasTemplate()) {
+          selectedChildTxt = _t('editor.layers.infowindow.style.' + selectedChild);
+        }
+
+        break;
+      case 'hover':
+        selectedChild = this._layerTooltipModel.get('template_name');
+        selectedChildTxt = _t('editor.layers.tooltip.style.none');
+
+        if (this._layerTooltipModel.isCustomTemplate()) {
+          selectedChildTxt = _t('editor.layers.tooltip.style.custom');
+        } else if (this._layerTooltipModel.hasTemplate()) {
+          selectedChildTxt = _t('editor.layers.tooltip.style.' + selectedChild);
+        }
+
+        break;
+    }
+
+    this._layerTabPaneView.$('.js-menu .CDB-NavSubmenu-item.is-selected .js-NavSubmenu-status').html(selectedChildTxt);
+    this._layerTabPaneView.$('.js-list .Carousel-item').removeClass('is-selected');
+    this._layerTabPaneView.$('.js-list .Carousel-item.js-' + selectedChild).addClass('is-selected');
+  },
+
+  _showHiddenLayer: function () {
+    var savingOptions = {
+      shouldPreserveAutoStyle: true
+    };
+    this._layerDefinitionModel.toggleVisible();
+    this._userActions.saveLayer(this._layerDefinitionModel, savingOptions);
+  },
+
+  _setViewValues: function () {
+    this._layerDefinitionModel.isDataFiltered()
+      .then(function (isDataFiltered) {
+        this._viewState.set('isDataFiltered', isDataFiltered);
+      }.bind(this));
+  }
+});

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/popups-placeholder.tpl

@@ -0,0 +1 @@
+<h2 class="CDB-Text CDB-Size-huge is-light u-secondaryTextColor"><%- placeholder %></h2>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/tooltip-icons/tooltip-dark.tpl

@@ -0,0 +1,10 @@
+<svg width="58px" height="32px" viewBox="494 496 58 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="PopUp-Copy-3" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(494.000000, 496.000000)">
+        <path d="M2.99306965,0 L55.0069304,0 C56.1076723,0 57,0.889261723 57,2.00174332 L57,29.9982567 C57,31.103789 56.1032859,32 55.0073354,32 L18.4262695,32 L9,32 L0.998101354,32 L1,2.00174332 C1,0.89621101 1.90230818,0 2.99306965,0 Z" id="Rectangle-2087" fill="#2E3C43"></path>
+        <rect id="Rectangle-679" fill="#636D72" x="6" y="15" width="45" height="2"></rect>
+        <rect id="Rectangle-680" fill="#636D72" x="6" y="19" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#636D72" x="6" y="23" width="19" height="2"></rect>
+        <rect id="Rectangle-680" fill="#636D72" x="6" y="11" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#636D72" x="6" y="7" width="36" height="2"></rect>
+    </g>
+</svg>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/tooltip-icons/tooltip-light.tpl

@@ -0,0 +1,10 @@
+<svg width="58px" height="34px" viewBox="429 496 58 34" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g id="PopUp-Copy-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(429.000000, 497.000000)">
+        <path d="M2.99306965,0 L55.0069304,0 C56.1076723,0 57,0.889261723 57,2.00174332 L57,29.9982567 C57,31.103789 56.1032859,32 55.0073354,32 L18.4262695,32 L9,32 L0.998101354,32 L1,2.00174332 C1,0.89621101 1.90230818,0 2.99306965,0 Z" id="Rectangle-2087" stroke="#EEEEEE" fill="#FFFFFF"></path>
+        <rect id="Rectangle-679" fill="#DDDDDD" x="5" y="14" width="45" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="5" y="18" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="5" y="22" width="19" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="5" y="10" width="26" height="2"></rect>
+        <rect id="Rectangle-680" fill="#DDDDDD" x="5" y="6" width="36" height="2"></rect>
+    </g>
+</svg>

lib/assets/javascripts/builder/editor/layers/layer-content-views/infowindow/tooltip-icons/tooltip-none.tpl

@@ -0,0 +1 @@
+<p class="CDB-Text CDB-Size-small u-altTextColor u-upperCase">None</p>