Initial commit

lib/assets/javascripts/builder/editor/settings/preview/enabler.tpl

@@ -0,0 +1,9 @@
+<div class="Editor-formInner CDB-Text CDB-Size-small u-upperCase <% if (disabled) { %>u-altTextColor<% } %> u-upperCase">
+  <div class="u-flex u-alignCenter">
+    <div class="u-iBlock u-rSpace--m">
+      <input id="<%- id %>" class="CDB-Checkbox js-input" type="checkbox" name="" value="" <% if (checked) { %>checked<% } %> <% if (disabled) { %>disabled<% } %>>
+      <span class="u-iBlock CDB-Checkbox-face"></span>
+    </div>
+    <label for="<%- id %>" class="<% if (help) { %> js-help is-underlined<% } %>" <% if (help) { %> data-tooltip="<%- help %>"<% } %> ><%- title %></label>
+  </div>
+</div>

lib/assets/javascripts/builder/editor/settings/preview/options-not-ready.tpl

@@ -0,0 +1,25 @@
+<div class="FormPlaceholder-paragraph u-tSpace-m u-flex">
+  <div class="FormPlaceholder-step u-rSpace--m"></div>
+  <div class="FormPlaceholder-inner">
+    <span class="FormPlaceholder-title FormPlaceholder-size--long u-bSpace"></span>
+    <span class="FormPlaceholder-title FormPlaceholder-size--med u-bSpace--xl"></span>
+
+    <span class="FormPlaceholder-title FormPlaceholder-size--med"></span>
+    <span class="FormPlaceholder-title FormPlaceholder-size--med u-bSpace--m"></span>
+
+    <span class="FormPlaceholder-title FormPlaceholder-size--med"></span>
+    <span class="FormPlaceholder-title FormPlaceholder-size--med u-bSpace--m"></span>
+
+    <span class="FormPlaceholder-title FormPlaceholder-size--med"></span>
+    <span class="FormPlaceholder-title FormPlaceholder-size--med u-bSpace--m"></span>
+
+    <span class="FormPlaceholder-title FormPlaceholder-size--med"></span>
+    <span class="FormPlaceholder-title FormPlaceholder-size--med u-bSpace--m"></span>
+
+    <span class="FormPlaceholder-title FormPlaceholder-size--med"></span>
+    <span class="FormPlaceholder-title FormPlaceholder-size--med u-bSpace--m"></span>
+
+    <span class="FormPlaceholder-title FormPlaceholder-size--med"></span>
+    <span class="FormPlaceholder-title FormPlaceholder-size--med u-bSpace--m"></span>
+  </div>
+</div>

lib/assets/javascripts/builder/editor/settings/preview/preview-options-item-view.js

@@ -0,0 +1,41 @@
+var _ = require('underscore');
+var Backbone = require('backbone');
+var CoreView = require('backbone/core-view');
+var enablerTemplate = require('./enabler.tpl');
+require('builder/components/form-components/index');
+
+var REQUIRED_OPTS = [
+  'model'
+];
+
+module.exports = CoreView.extend({
+  initialize: function (opts) {
+    _.each(REQUIRED_OPTS, function (item) {
+      if (!opts[item]) throw new Error(item + ' is required');
+      this['_' + item] = opts[item];
+    }, this);
+
+    // For enabler compatibility
+    this.model.set(this.model.get('setting'), this.model.get('enabler'), {silent: true});
+  },
+
+  render: function () {
+    this.$el.empty();
+    this._initViews();
+    return this;
+  },
+
+  _initViews: function () {
+    this._enablerView = new Backbone.Form.editors.Enabler({
+      template: enablerTemplate,
+      model: this.model,
+      inputId: this.cid,
+      title: this.model.get('label'),
+      disabled: this.model.get('disabled'),
+      help: '',
+      key: this.model.get('setting')
+    });
+
+    this.$el.append(this._enablerView.render().$el);
+  }
+});

lib/assets/javascripts/builder/editor/settings/preview/preview-options-view.js

@@ -0,0 +1,87 @@
+var _ = require('underscore');
+var CoreView = require('backbone/core-view');
+var OptionsItemView = require('./preview-options-item-view');
+var template = require('./preview-options.tpl');
+var templateNotReady = require('./options-not-ready.tpl');
+
+var REQUIRED_OPTS = [
+  'mapDefinitionModel',
+  'settingsCollection',
+  'overlaysCollection'
+];
+
+module.exports = CoreView.extend({
+  initialize: function (opts) {
+    _.each(REQUIRED_OPTS, function (item) {
+      if (!opts[item]) throw new Error(item + ' is required');
+      this['_' + item] = opts[item];
+    }, this);
+
+    this._initBinds();
+  },
+
+  render: function () {
+    this.clearSubViews();
+
+    if (!this._overlaysCollection.hasFetched()) {
+      this.$el.html(templateNotReady());
+    } else {
+      this.$el.html(template());
+      this._initViews();
+    }
+
+    return this;
+  },
+
+  _initBinds: function () {
+    this._settingsCollection.on('change', this._onChangeOptions, this);
+    this.add_related_model(this._settingsCollection);
+  },
+
+  _onChangeOptions: function (m) {
+    var handler = m.get('related');
+    var property = m.get('setting');
+    var value = m.get('enabler');
+
+    if (handler === 'overlays') {
+      this._overlayHandler(property, value);
+    }
+
+    if (handler === 'map') {
+      this._mapHandler(property, value);
+    }
+  },
+
+  _initViews: function () {
+    this._settingsCollection.each(this._renderSetting, this);
+  },
+
+  _renderSetting: function (model) {
+    const hidden = model.get('hidden');
+    if (hidden) {
+      return;
+    }
+
+    const view = new OptionsItemView({
+      model: model
+    });
+
+    this.$('.js-settings').append(view.render().$el);
+    this.addView(view);
+  },
+
+  _overlayHandler: function (property, value) {
+    if (value === false) {
+      this._overlaysCollection.removeOverlay(property);
+    } else {
+      this._overlaysCollection.createOverlay(property);
+    }
+  },
+
+  _mapHandler: function (property, value) {
+    var payload = {};
+    payload[property] = value;
+    this._mapDefinitionModel.set(payload);
+    this._mapDefinitionModel.save();
+  }
+});

lib/assets/javascripts/builder/editor/settings/preview/preview-options.tpl

@@ -0,0 +1,13 @@
+<div class="Editor-HeaderInfo">
+  <div class="Editor-HeaderNumeration CDB-Text is-semibold u-rSpace--m">1</div>
+  <div class="Editor-HeaderInfo-inner CDB-Text">
+    <div class="Editor-HeaderInfo-title u-bSpace--m">
+      <h2 class="CDB-Text CDB-HeaderInfo-titleText CDB-Size-large"><%- _t('editor.settings.preview.options.title') %></h2>
+    </div>
+    <p class="CDB-Text u-upperCase CDB-Size-small u-altTextColor u-bSpace--xl"><%- _t('editor.settings.preview.options.subtitle') %></p>
+    <div class="u-flex u-justifySpace">
+      <div class="js-settings Options-form"></div>
+    </div>
+
+  </div>
+</div>

lib/assets/javascripts/builder/editor/settings/preview/preview-view.js

@@ -0,0 +1,37 @@
+var CoreView = require('backbone/core-view');
+var _ = require('underscore');
+var OptionsView = require('./preview-options-view');
+
+var REQUIRED_OPTS = [
+  'mapDefinitionModel',
+  'settingsCollection',
+  'overlaysCollection'
+];
+
+module.exports = CoreView.extend({
+
+  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.empty();
+    this._renderOptions();
+    return this;
+  },
+
+  _renderOptions: function () {
+    var view = new OptionsView({
+      mapDefinitionModel: this._mapDefinitionModel,
+      settingsCollection: this._settingsCollection,
+      overlaysCollection: this._overlaysCollection
+    });
+
+    this.$el.append(view.render().el);
+    this.addView(view);
+  }
+});

lib/assets/javascripts/builder/editor/settings/settings.tpl

@@ -0,0 +1,2 @@
+<div class="CDB-Text CDB-Size-huge is-light u-bSpace--xl"><%- _t("editor.settings.title") %></div>
+<div class="js-settings"></div>