pageflow 12.0.4 → 12.1.0

data/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));
+  }
+});

data/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];
+  }
+});

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

@@ -28,15 +28,23 @@ pageflow.EditorApi = pageflow.Object.extend(
     this.failures = new pageflow.FailuresAPI();
 
     /**
-     * Setup editor integration for page types.
+     * Set up editor integration for page types.
      * @alias pageTypes
      * @memberof module:pageflow/editor.pageflow.editor
      */
     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
+     * Set up editor integration for file types
      */
     this.fileTypes = new pageflow.FileTypes();
   },

data/app/assets/javascripts/pageflow/editor/base.js

@@ -52,7 +52,6 @@
 //= require ./initializers/setup_file_uploader
 //= require ./initializers/setup_page_types
 //= require ./initializers/setup_hotkeys
-//= require ./initializers/setup_file_uploader
 //= require ./initializers/edit_lock
 //= require ./initializers/files_polling
 //= require ./initializers/stylesheet_reloading

data/app/assets/javascripts/pageflow/editor/collections/pages_collection.js

@@ -35,6 +35,7 @@ pageflow.PagesCollection = Backbone.Collection.extend({
     if (!this._persisted) {
       this._persisted = new pageflow.SubsetCollection({
         parent: this,
+        sortOnParentSort: true,
 
         filter: function(page) {
           return !page.isNew();

data/app/assets/javascripts/pageflow/editor/collections/subset_collection.js

@@ -1,6 +1,8 @@
 pageflow.SubsetCollection = Backbone.Collection.extend({
   constructor: function(options) {
     var adding = false;
+    var sorting = false;
+    var parentSorting = false;
 
     options = options || {};
 
@@ -41,8 +43,26 @@ pageflow.SubsetCollection = Backbone.Collection.extend({
       });
     }
 
+    if (options.sortOnParentSort) {
+      this.listenTo(this.parent, 'sort', function() {
+        parentSorting = true;
+
+        if (!sorting) {
+          this.sort();
+        }
+
+        parentSorting = false;
+      });
+    }
+
     this.listenTo(this, 'sort', function() {
-      this.parent.sort();
+      sorting = true;
+
+      if (!parentSorting) {
+        this.parent.sort();
+      }
+
+      sorting = false;
     });
 
     Backbone.Collection.prototype.constructor

data/app/assets/javascripts/pageflow/editor/collections/themes_collection.js

@@ -0,0 +1,13 @@
+pageflow.ThemesCollection = Backbone.Collection.extend({
+  model: pageflow.Theme,
+
+  findByName: function(name) {
+    var theme = this.findWhere({name: name});
+
+    if (!theme) {
+      throw new Error('Found no theme by name ' + name);
+    }
+
+    return theme;
+  }
+});

data/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, {});
+      }
+    }));
+  }
+});

data/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)
+    }));
+  },
 });

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

@@ -6,18 +6,25 @@ 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,
     chapters: pageflow.chapters,
-    pages: pageflow.pages,
-    theming: pageflow.theming
+    pages: pageflow.pages
   });
 
   pageflow.storylineOrdering = new pageflow.StorylineOrdering(pageflow.storylines, pageflow.pages);

data/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);
 });

data/app/assets/javascripts/pageflow/editor/initializers/stylesheet_reloading.js

@@ -1,11 +1,16 @@
 pageflow.app.addInitializer(function(options) {
   pageflow.entry.on('change:pending_files_count', function(model, value) {
     if (value < pageflow.entry.previous('pending_files_count')) {
-      pageflow.reloadStylesheet('entry');
+      pageflow.stylesheet.reload('entry');
     }
   });
 
   pageflow.entry.on('use:files', function() {
-    pageflow.reloadStylesheet('entry');
+    pageflow.stylesheet.reload('entry');
   });
-});
+
+  pageflow.entry.configuration.on('change:theme_name', function() {
+    var theme = pageflow.entry.getTheme();
+    pageflow.stylesheet.update('theme', theme.get('stylesheet_path'));
+  });
+});

data/app/assets/javascripts/pageflow/editor/models/edit_lock_container.js

@@ -29,7 +29,7 @@ pageflow.EditLockContainer = Backbone.Model.extend({
     if (!this.pollingInteval) {
       this.pollingInteval = setInterval(_.bind(function() {
         this.acquire({polling: true});
-      }, this), 2000);
+      }, this), pageflow.config.editLockPollingIntervalInSeconds * 1000);
     }
   },
 

data/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 || {};
@@ -18,6 +15,7 @@ pageflow.Entry = Backbone.Model.extend({
     this.configuration = new pageflow.EntryConfiguration(this.get('configuration') || {});
     this.configuration.parent = this;
 
+    this.themes = options.themes || pageflow.themes;
     this.files = options.files || pageflow.files;
     this.fileTypes = options.fileTypes || pageflow.editor.fileTypes;
     this.storylines = options.storylines || pageflow.storylines;
@@ -25,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;
@@ -56,6 +55,10 @@ pageflow.Entry = Backbone.Model.extend({
     });
   },
 
+  getTheme: function() {
+    return this.themes.findByName(this.configuration.get('theme_name'));
+  },
+
   addStoryline: function(attributes) {
     var storyline = this.buildStoryline(attributes);
     storyline.save();

data/app/assets/javascripts/pageflow/editor/models/entry_configuration.js

@@ -1,4 +1,4 @@
 pageflow.EntryConfiguration = pageflow.Configuration.extend({
   modelName: 'entry',
   i18nKey: 'pageflow/entry'
-});
+});

data/app/assets/javascripts/pageflow/editor/models/file_stage.js

@@ -12,6 +12,7 @@ pageflow.FileStage = Backbone.Model.extend({
     this.update();
     this.listenTo(this.file, 'change:state', this.update);
     this.listenTo(this.file, 'change:' + this.get('name') + '_progress', this.update);
+    this.listenTo(this.file, 'change:' + this.get('name') + '_error_message', this.update);
   },
 
   update: function() {

data/app/assets/javascripts/pageflow/editor/models/page.js

@@ -48,7 +48,9 @@ pageflow.Page = Backbone.Model.extend({
   },
 
   title: function() {
-    return this.configuration.get('title') || this.configuration.get('additional_title');
+    return this.configuration.get('title') ||
+      this.configuration.get('additional_title') ||
+      '';
   },
 
   thumbnailFile: function() {

data/app/assets/javascripts/pageflow/editor/models/preview_entry_data.js

@@ -1,13 +1,13 @@
 pageflow.PreviewEntryData = pageflow.EntryData.extend({
   initialize: function(options) {
+    this.entry = options.entry;
     this.storylines = options.storylines;
     this.chapters = options.chapters;
     this.pages = options.pages;
-    this.theming = options.theming;
   },
 
   getThemingOption: function(name) {
-    return this.theming.get(name);
+    return this.entry.getTheme().get(name);
   },
 
   getStorylineConfiguration: function(id) {

data/app/assets/javascripts/pageflow/editor/models/theme.js

@@ -0,0 +1,25 @@
+pageflow.Theme = Backbone.Model.extend({
+  title: function() {
+    return I18n.t('pageflow.' + this.get('name') + '_theme.name');
+  },
+
+  thumbnailUrl: function() {
+    return this.get('preview_thumbnail_url');
+  },
+
+  hasHomeButton: function() {
+    return this.get('home_button');
+  },
+
+  hasOverviewButton: function() {
+    return this.get('overview_button');
+  },
+
+  supportsEmphasizedPages: function() {
+    return this.get('emphasized_pages');
+  },
+
+  supportsScrollIndicatorModes: function() {
+    return this.get('scroll_indicator_modes');
+  }
+});

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

@@ -1,23 +1,5 @@
 pageflow.Theming = Backbone.Model.extend({
   modelName: 'theming',
   i18nKey: 'pageflow/theming',
-  collectionName: 'themings',
-
-  mixins: [pageflow.widgetSubject],
-
-  hasHomeButton: function() {
-    return this.get('home_button');
-  },
-
-  hasOverviewButton: function() {
-    return this.get('overview_button');
-  },
-
-  supportsEmphasizedPages: function() {
-    return this.get('emphasized_pages');
-  },
-
-  supportsScrollIndicatorModes: function() {
-    return this.get('scroll_indicator_modes');
-  }
+  collectionName: 'themings'
 });

data/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()
     };
   },
 });

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

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

data/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',

data/app/assets/javascripts/pageflow/editor/templates/change_theme_dialog.jst.ejs

@@ -0,0 +1,23 @@
+<div class="box">
+  <div class="content">
+    <div>
+      <h2 class="themes_header"><%= I18n.t('pageflow.editor.templates.change_theme_dialog.header') %></h2>
+      <div class="themes_panel">
+      </div>
+      <div class="preview_panel">
+        <h2 class="preview_header"><%= I18n.t('pageflow.editor.templates.change_theme_dialog.preview_header_prefix') %>
+          <span class="preview_header_theme_name"></span><%= I18n.t('pageflow.editor.templates.change_theme_dialog.preview_header_suffix') %>
+        </h2>
+        <div class="preview_image_region">
+          <img class="preview_image" src="default_template.png">
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="footer">
+    <a href="" class="close">
+      <%= I18n.t('pageflow.editor.templates.change_theme_dialog.close') %>
+    </a>
+  </div>
+</div>

data/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>

data/app/assets/javascripts/pageflow/editor/templates/inputs/reference.jst.ejs

@@ -3,5 +3,5 @@
   <span class="inline_help"></span>
 </label>
 <div class="title"></div>
-<button class="unset" title="<%= I18n.t('pageflow.editor.templates.inputs.reference.reset') %>"></button>
-<button class="choose" title="<%= I18n.t('pageflow.editor.templates.inputs.reference.edit') %>"></button>
+<button class="unset"></button>
+<button class="choose"></button>

data/app/assets/javascripts/pageflow/editor/templates/static_thumbnail.jst.ejs

@@ -0,0 +1 @@
+

data/app/assets/javascripts/pageflow/editor/templates/theme_item.jst.ejs

@@ -0,0 +1,5 @@
+<span class="theme_name"></span>
+<span class="button_or_checkmark">
+  <p class="theme_in_use"></p>
+  <a class="use_theme"><%= I18n.t('pageflow.editor.templates.theme.use') %></a>
+</span>

data/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>

data/app/assets/javascripts/pageflow/editor/utils/stylesheet.js

@@ -0,0 +1,23 @@
+pageflow.stylesheet = {
+  reload: function(name) {
+    var link = this.selectLink(name);
+
+    if (!link.data('originalHref')) {
+      link.data('originalHref', link.attr('href'));
+    }
+
+    link.attr('href', link.data('originalHref') + '&reload=' + new Date().getTime());
+  },
+
+  update: function(name, stylesheetPath) {
+    var link = this.selectLink(name);
+
+    if (link.attr('href') !== stylesheetPath) {
+      link.attr('href', stylesheetPath);
+    }
+  },
+
+  selectLink: function(name) {
+    return $('head link[data-name=' + name + ']');
+  }
+};

data/app/assets/javascripts/pageflow/editor/views/change_theme_dialog_view.js

@@ -0,0 +1,76 @@
+pageflow.ChangeThemeDialogView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/change_theme_dialog',
+  className: 'change_theme dialog editor',
+
+  mixins: [pageflow.dialogView],
+
+  ui: {
+    content: '.content',
+    themesPanel: '.themes_panel',
+    previewPanel: '.preview_panel',
+    previewImageRegion: '.preview_image_region',
+    previewImage: '.preview_image',
+    previewHeaderThemeName: '.preview_header_theme_name'
+  },
+
+  initialize: function(options) {
+    this.selection = new Backbone.Model();
+    var themeInUse = this.options.themes.findByName(this.options.themeInUse);
+    this.selection.set('theme', themeInUse);
+    this.listenTo(this.selection, 'change:theme', function() {
+      if (!this.selection.get('theme')) {
+        this.selection.set('theme', themeInUse);
+      }
+      this.update();
+    });
+  },
+
+  onRender: function() {
+    var themes = this.options.themes;
+    this.themesView = new pageflow.CollectionView({
+      collection: themes,
+      tagName: 'ul',
+      itemViewConstructor: pageflow.ThemeItemView,
+      itemViewOptions: {
+        selection: this.selection,
+        onUse: this.options.onUse,
+        themes: themes,
+        themeInUse: this.options.themeInUse
+      }
+    });
+
+    this.ui.themesPanel.append(this.subview(this.themesView).el);
+
+    this.ui.previewPanel.append(this.subview(new pageflow.LoadingView({tagName: 'div'})).el);
+
+    this.update();
+  },
+
+  update: function() {
+    var that = this;
+    var selectedTheme = this.options.themes.findByName(that.selection.get('theme').get('name'));
+    this.ui.previewImage.hide();
+    this.ui.previewImage.one('load', function() {
+      $(this).show();
+    });
+    this.ui.previewImage.attr('src', selectedTheme.get('preview_image_url'));
+    this.ui.previewHeaderThemeName.text(selectedTheme.title());
+  }
+});
+
+pageflow.ChangeThemeDialogView.changeTheme = function(options) {
+  return $.Deferred(function(deferred) {
+    options.onUse = function(theme) {
+      deferred.resolve(theme);
+      view.close();
+    };
+
+    var view = new pageflow.ChangeThemeDialogView(options);
+
+    view.on('close', function() {
+      deferred.reject();
+    });
+
+    pageflow.app.dialogRegion.show(view.render());
+  }).promise();
+};

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/groups/options.js

@@ -1,7 +1,9 @@
 pageflow.ConfigurationEditorTabView.groups.define('options', function(options) {
+  var theme = pageflow.entry.getTheme();
+
   this.input('display_in_navigation', pageflow.CheckBoxInputView);
 
-  if (pageflow.theming.supportsEmphasizedPages()) {
+  if (theme.supportsEmphasizedPages()) {
     this.input('emphasize_in_navigation', pageflow.CheckBoxInputView);
   }
 
@@ -23,7 +25,7 @@ pageflow.ConfigurationEditorTabView.groups.define('options', function(options) {
     });
   }
 
-  if (pageflow.theming.supportsScrollIndicatorModes()) {
+  if (theme.supportsScrollIndicatorModes()) {
     this.input('scroll_indicator_mode', pageflow.SelectInputView, {
       values: pageflow.Page.scrollIndicatorModes
     });