Merge pull request #694 from tf/widget-configuration

Widget configuration

app/assets/javascripts/pageflow/editor/api.js

@@ -34,6 +34,13 @@ pageflow.EditorApi = pageflow.Object.extend(
      */
     this.pageTypes = new pageflow.PageTypes();
 
+    /**
+     * Setup editor integration for widget types.
+     * @alias widgetType
+     * @memberof module:pageflow/editor.pageflow.editor
+     */
+    this.widgetTypes = new pageflow.WidgetTypes();
+
     /**
      * @alias fileTypes
      * @memberof module:pageflow/editor.pageflow.editor

app/assets/javascripts/pageflow/editor/api/widget_type.js

@@ -0,0 +1,23 @@
+pageflow.WidgetType = pageflow.Object.extend({
+  initialize: function(serverSideConfig, clientSideConfig) {
+    this.name = serverSideConfig.name;
+    this.translationKey = serverSideConfig.translationKey;
+    this.configurationEditorView = clientSideConfig.configurationEditorView;
+    this.isOptional = clientSideConfig.isOptional;
+  },
+
+  hasConfiguration: function() {
+    return !!this.configurationEditorView;
+  },
+
+  createConfigurationEditorView: function(options) {
+    var constructor = this.configurationEditorView;
+
+    return new constructor(_.extend({
+      attributeTranslationKeyPrefixes: [
+        'pageflow.editor.widgets.attributes.' + this.name,
+        'pageflow.editor.widgets.common_attributes'
+      ]
+    }, options));
+  }
+});

app/assets/javascripts/pageflow/editor/api/widget_types.js

@@ -0,0 +1,53 @@
+pageflow.WidgetTypes = pageflow.Object.extend({
+  initialize: function() {
+    this._clientSideConfigs = {};
+    this._optionalRoles = {};
+  },
+
+  register: function(name, config) {
+    if (this._setup) {
+      throw 'Widget types already set up. Register widget types before initializers run.';
+    }
+
+    this._clientSideConfigs[name] = config;
+  },
+
+  setup: function(serverSideConfigsByRole) {
+    this._setup = true;
+    this._widgetTypesByName = {};
+
+    var roles = _.keys(serverSideConfigsByRole);
+
+    this._widgetTypesByRole = roles.reduce(_.bind(function(result, role) {
+      result[role] = serverSideConfigsByRole[role].map(_.bind(function(serverSideConfig) {
+        var clientSideConfig = this._clientSideConfigs[serverSideConfig.name] || {};
+        var widgetType = new pageflow.WidgetType(serverSideConfig, clientSideConfig);
+
+        this._widgetTypesByName[serverSideConfig.name] = widgetType;
+        return widgetType;
+      }, this));
+
+      return result;
+    }, this), {});
+  },
+
+  findAllByRole: function(role) {
+    return this._widgetTypesByRole[role] || [];
+  },
+
+  findByName: function(name) {
+    if (!this._widgetTypesByName[name]) {
+      throw('Could not find widget type with name "' + name +'"');
+    }
+
+    return this._widgetTypesByName[name];
+  },
+
+  registerRole: function(role, options) {
+    this._optionalRoles[role] = options.isOptional;
+  },
+
+  isOptional: function(role) {
+    return !!this._optionalRoles[role];
+  }
+});

app/assets/javascripts/pageflow/editor/collections/widgets_collection.js

@@ -1,16 +1,31 @@
 pageflow.WidgetsCollection = Backbone.Collection.extend({
   model: pageflow.Widget,
 
-  initialize: function(models, options) {
-    options = options || {};
-    this.subject = options.subject;
+  initialize: function() {
+    this.listenTo(this, 'change:type_name change:configuration', function() {
+      this.batchSave();
+    });
   },
 
   url: function() {
-    return this.subject.widgetsUrlRoot() + '/widgets';
+    return '/editor/subjects/entries/' + this.subject.id + '/widgets';
   },
-});
 
-pageflow.WidgetsCollection.createForSubject = function(subject) {
-  return new pageflow.WidgetsCollection([], {subject: subject});
-};
+  batchSave: function(options) {
+    var subject = this.subject;
+
+    return Backbone.sync('patch', subject, _.extend(options || {}, {
+      url: this.url() + '/batch',
+
+      attrs: {
+        widgets: this.map(function(widget) {
+          return widget.toJSON();
+        })
+      },
+
+      success: function(response) {
+        subject.trigger('sync:widgets', subject, response, {});
+      }
+    }));
+  }
+});

app/assets/javascripts/pageflow/editor/controllers/sidebar_controller.js

@@ -78,5 +78,11 @@ pageflow.SidebarController = Backbone.Marionette.Controller.extend({
       model: page.pageLinks().get(linkId),
       page: page
     }));
-  }
+  },
+
+  widget: function(id) {
+    this.region.show(new pageflow.EditWidgetView({
+      model: this.entry.widgets.get(id)
+    }));
+  },
 });

app/assets/javascripts/pageflow/editor/initializers/setup_collections.js

@@ -6,14 +6,20 @@ pageflow.app.addInitializer(function(options) {
   pageflow.audioFiles = pageflow.files.audio_files;
   pageflow.textTrackFiles = pageflow.files.text_track_files;
 
+  var widgets = new pageflow.WidgetsCollection(options.widgets, {
+    widgetTypes: pageflow.editor.widgetTypes
+  });
+
   pageflow.themes = new pageflow.ThemesCollection(options.themes);
   pageflow.pages = new pageflow.PagesCollection(options.pages);
   pageflow.chapters = new pageflow.ChaptersCollection(options.chapters);
   pageflow.storylines = new pageflow.StorylinesCollection(options.storylines);
-  pageflow.entry = new pageflow.Entry(options.entry);
+  pageflow.entry = new pageflow.Entry(options.entry, {widgets: widgets});
   pageflow.theming = new pageflow.Theming(options.theming);
   pageflow.account = new Backbone.Model(options.account);
 
+  widgets.subject = pageflow.entry;
+
   pageflow.entryData = new pageflow.PreviewEntryData({
     entry: pageflow.entry,
     storylines: pageflow.storylines,

app/assets/javascripts/pageflow/editor/initializers/setup_widget_types.js

@@ -1,3 +1,7 @@
 pageflow.app.addInitializer(function(options) {
-  pageflow.editor.widgetTypes = options.widget_types;
+  pageflow.editor.widgetTypes.registerRole('navigation', {
+    isOptional: true
+  });
+
+  pageflow.editor.widgetTypes.setup(options.widget_types);
 });

app/assets/javascripts/pageflow/editor/models/entry.js

@@ -5,12 +5,9 @@ pageflow.Entry = Backbone.Model.extend({
   i18nKey: 'pageflow/entry',
   collectionName: 'entries',
 
-  autoSaveWidgets: true,
-
   mixins: [pageflow.filesCountWatcher,
            pageflow.polling,
-           pageflow.failureTracking,
-           pageflow.widgetSubject],
+           pageflow.failureTracking],
 
   initialize: function(attributes, options) {
     options = options || {};
@@ -26,6 +23,7 @@ pageflow.Entry = Backbone.Model.extend({
     this.chapters = options.chapters || pageflow.chapters;
     this.chapters.parentModel = this;
     this.pages = pageflow.pages;
+    this.widgets = options.widgets;
 
     this.imageFiles = pageflow.imageFiles;
     this.videoFiles = pageflow.videoFiles;

app/assets/javascripts/pageflow/editor/models/theming.js

@@ -1,7 +1,5 @@
 pageflow.Theming = Backbone.Model.extend({
   modelName: 'theming',
   i18nKey: 'pageflow/theming',
-  collectionName: 'themings',
-
-  mixins: [pageflow.widgetSubject]
+  collectionName: 'themings'
 });

app/assets/javascripts/pageflow/editor/models/widget.js

@@ -2,6 +2,26 @@ pageflow.Widget = Backbone.Model.extend({
   paramRoot: 'widget',
   i18nKey: 'pageflow/widget',
 
+  initialize: function(attributes, options) {
+    this.widgetTypes = options.widgetTypes;
+
+    this.configuration = new pageflow.WidgetConfiguration(
+      this.get('configuration') || {}
+    );
+
+    this.listenTo(this.configuration, 'change', function() {
+      this.trigger('change:configuration', this);
+    });
+  },
+
+  widgetType: function() {
+    return this.get('type_name') && this.widgetTypes.findByName(this.get('type_name'));
+  },
+
+  hasConfiguration: function() {
+    return !!(this.widgetType() && this.widgetType().hasConfiguration());
+  },
+
   role: function() {
     return this.id;
   },
@@ -13,7 +33,8 @@ pageflow.Widget = Backbone.Model.extend({
   toJSON: function() {
     return {
       role: this.role(),
-      type_name: this.get('type_name')
+      type_name: this.get('type_name'),
+      configuration: this.configuration.toJSON()
     };
   },
 });

app/assets/javascripts/pageflow/editor/models/widget_configuration.js

@@ -0,0 +1,5 @@
+pageflow.WidgetConfiguration = pageflow.Configuration.extend({
+  i18nKey: 'pageflow/widget',
+
+  defaults: {}
+});

app/assets/javascripts/pageflow/editor/routers/sidebar_router.js

@@ -5,6 +5,7 @@ pageflow.SidebarRouter = Backbone.Marionette.AppRouter.extend({
     'pages/:id/:tab': 'page',
     'chapters/:id': 'chapter',
     'storylines/:id': 'storyline',
+    'widgets/:id': 'widget',
 
     'files/:collectionName?handler=:handler&payload=:payload&filter=:filter': 'files',
     'files/:collectionName?handler=:handler&payload=:payload': 'files',

app/assets/javascripts/pageflow/editor/templates/edit_widget.jst.ejs

@@ -1,2 +1 @@
-<div class="widget_type">
-</div>
+<a class="back"><%= I18n.t('pageflow.editor.templates.edit_widget.back') %></a>

app/assets/javascripts/pageflow/editor/templates/widget_item.jst.ejs

@@ -0,0 +1,3 @@
+<div class="widget_type">
+</div>
+<a class="settings" title="<%= I18n.t('pageflow.editor.templates.widget_item.settings') %>"></a>

app/assets/javascripts/pageflow/editor/views/edit_widget_view.js

@@ -1,29 +1,19 @@
-pageflow.EditWidgetView = Backbone.Marionette.Layout.extend({
+pageflow.EditWidgetView = Backbone.Marionette.ItemView.extend({
   template: 'templates/edit_widget',
-  tagName: 'li',
   className: 'edit_widget',
 
-  regions: {
-    widgetTypeContainer: '.widget_type'
-  },
-
-  ui: {
-    role: 'h2'
+  events: {
+    'click a.back': function() {
+      editor.navigate('/meta_data/widgets', {trigger: true});
+    }
   },
 
   onRender: function() {
-    var widgetTypes = this.options.widgetTypes[this.model.role()] || [];
-
-    this.widgetTypeContainer.show(new pageflow.SelectInputView({
-      model: this.model,
-      propertyName: 'type_name',
-      label: I18n.t('pageflow.widgets.roles.' + this.model.role()),
-      collection: widgetTypes,
-      valueProperty: 'name',
-      translationKeyProperty: 'translationKey',
-      includeBlank: true
-    }));
+    var configurationEditor = this.model.widgetType().createConfigurationEditorView({
+      model: this.model.configuration,
+      tab: this.options.tab
+    });
 
-    this.$el.toggle(widgetTypes.length > 1);
+    this.appendSubview(configurationEditor);
   }
-});
+});

app/assets/javascripts/pageflow/editor/views/edit_widgets_view.js

@@ -9,12 +9,10 @@ pageflow.EditWidgetsView = Backbone.Marionette.Layout.extend({
     this.subview(new pageflow.CollectionView({
       el: this.ui.widgets,
       collection: this.model.widgets,
-      itemViewConstructor: pageflow.EditWidgetView,
+      itemViewConstructor: pageflow.WidgetItemView,
       itemViewOptions: {
         widgetTypes: this.options.widgetTypes
       }
     }).render());
-
-    this.model.fetchWidgets();
   }
 });