[WIP] Entry theme selection

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

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

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

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

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

@@ -0,0 +1,7 @@
+pageflow.ThemesCollection = Backbone.Collection.extend({
+  model: pageflow.Theme,
+
+  findByName: function(name) {
+    return this.findWhere({name: name});
+  }
+});

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

@@ -0,0 +1,3 @@
+pageflow.app.addInitializer(function(options) {
+  pageflow.editor.themes = new pageflow.ThemesCollection(options.themes);
+});

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

@@ -1,11 +1,11 @@
 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');
   });
-});
+});

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() {

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

@@ -0,0 +1,13 @@
+pageflow.Theme = Backbone.Model.extend({
+  initialize: function(attributes, options) {
+    this.options = options || {};
+  },
+
+  title: function() {
+    return I18n.t('pageflow.' + this.get('name') + '_theme.name');
+  },
+
+  thumbnailUrl: function() {
+    return this.options.thumbnailUrl || this.get('preview_thumbnail_url');
+  }
+});

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>

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

@@ -0,0 +1 @@
+

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>

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

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

@@ -0,0 +1,74 @@
+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',
+    previewImageRegion: '.preview_image_region',
+    previewImage: '.preview_image',
+    previewHeaderThemeName: '.preview_header_theme_name'
+  },
+
+  initialize: function(options) {
+    this.listenTo(this.model, 'change', this.update);
+    this.selection = new Backbone.Model();
+    var themeInUse = this.options.themes.findByName(pageflow.entry.configuration.get('theme_name'));
+    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() {
+    this.themesView = new pageflow.CollectionView({
+      collection: this.options.themes,
+      tagName: 'ul',
+      itemViewConstructor: pageflow.ThemeItemView,
+      itemViewOptions: {
+        configuration: this.model,
+        selection: this.selection,
+        onUse: this.options.onUse
+      }
+    });
+
+    this.ui.themesPanel.append(this.subview(this.themesView).el);
+
+    this.update();
+  },
+
+  update: function() {
+    var that = this;
+    var selectedTheme = this.options.themes.findByName(that.selection.get('theme').get('name'));
+    this.ui.previewImage.attr('src', selectedTheme.get('preview_image_url'));
+    this.ui.previewHeaderThemeName.text(that.translateThemeName({
+      name: selectedTheme.get('name')
+    }));
+  },
+
+  translateThemeName: function(options) {
+    var name = options.name;
+    return I18n.t('pageflow.' + name + '_theme.name');
+  }
+});
+
+pageflow.ChangeThemeDialogView.changeTheme = function(options) {
+  return $.Deferred(function(deferred) {
+    options.onUse = function() {
+      deferred.resolve(this.model);
+    };
+
+    var view = new pageflow.ChangeThemeDialogView(options);
+
+    view.on('close', function() {
+      deferred.reject();
+    });
+
+    pageflow.app.dialogRegion.show(view.render());
+  }).promise();
+};

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

@@ -24,7 +24,7 @@ pageflow.EditMetaDataView = Backbone.Marionette.Layout.extend({
 
     configurationEditor.tab('general', function() {
       this.input('title', pageflow.TextInputView, {
-        placeholder: entry.attributes.entry_title
+        placeholder: entry.get('entry_title')
       });
       this.input('locale', pageflow.SelectInputView, {
         values: pageflow.config.availablePublicLocales,
@@ -68,6 +68,14 @@ pageflow.EditMetaDataView = Backbone.Marionette.Layout.extend({
         model: entry,
         widgetTypes: pageflow.editor.widgetTypes
       });
+      if (pageflow.features.isEnabled('selectable_themes') &&
+          pageflow.editor.themes.length > 1) {
+        this.view(pageflow.ThemeInputView, {
+          themes: pageflow.editor.themes,
+          propertyName: 'theme_name',
+          hideUnsetButton: true
+        });
+      }
     });
 
     configurationEditor.tab('social', function() {

app/assets/javascripts/pageflow/editor/views/inputs/reference_input_view.js

@@ -22,8 +22,8 @@ pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend(
     'click .choose': function() {
       var view = this;
 
-      this.choose().then(function(site) {
-        view.model.set(view.options.propertyName, site.get('perma_id'));
+      this.chooseValue().then(function(id) {
+        view.model.set(view.options.propertyName, id);
       });
 
       return false;
@@ -44,11 +44,26 @@ pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend(
     this.listenTo(this.model, 'change:' + this.options.propertyName, this.update);
   },
 
+  /**
+   * Returns a promise for some identifying attribute.
+   *
+   * Default attribute name is perma_id. If the attribute is named
+   * differently, you can have your specific ReferenceInputView
+   * implement `chooseValue()` accordingly.
+   *
+   * Will be used to set the chosen Model for this View.
+   */
+  chooseValue: function() {
+    return this.choose().then(function(model) {
+      return model.get('perma_id');
+    });
+  },
+
   choose: function() {
     throw 'Not implemented: Override ReferenceInputView#choose to return a promise';
   },
 
-  getTarget: function() {
+  getTarget: function(targetId) {
     throw 'Not implemented: Override ReferenceInputView#getTarget';
   },
 
@@ -62,7 +77,7 @@ pageflow.ReferenceInputView = Backbone.Marionette.ItemView.extend(
     var target = this.getTarget(this.model.get(this.options.propertyName));
 
     this.ui.title.text(target ? target.title() : I18n.t('pageflow.editor.views.inputs.reference_input_view.none'));
-    this.ui.unsetButton.toggle(!!target);
+    this.ui.unsetButton.toggle(!!target && !this.options.hideUnsetButton);
 
     this.updateDisabledAttribute(this.ui.buttons);
 

app/assets/javascripts/pageflow/editor/views/inputs/theme_input_view.js

@@ -0,0 +1,18 @@
+pageflow.ThemeInputView = pageflow.ReferenceInputView.extend({
+  choose: function() {
+    return pageflow.ChangeThemeDialogView.changeTheme({
+      model: this.model,
+      themes: this.options.themes
+    });
+  },
+
+  chooseValue: function() {
+    return this.choose().then(function(model) {
+      return model.get('name');
+    });
+  },
+
+  getTarget: function(themeName) {
+    return this.options.themes.findByName(themeName);
+  }
+});

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

@@ -17,24 +17,37 @@ pageflow.ModelThumbnailView = Backbone.Marionette.View.extend({
   },
 
   update: function() {
-    var file = this.model && this.model.thumbnailFile();
-
-    if (this.fileThumbnailView && this.currentFileThumbnail == file) {
-      return;
+    if (this.model) {
+      if (_.isFunction(this.model.thumbnailFile)) {
+        var file = this.model && this.model.thumbnailFile();
+
+        if (this.thumbnailView && this.currentFileThumbnail == file) {
+          return;
+        }
+
+        this.currentFileThumbnail = file;
+
+        this.newThumbnailView = new pageflow.FileThumbnailView({
+          model: file,
+          className: 'thumbnail file_thumbnail',
+          imageUrlPropertyName: this.options.imageUrlPropertyName
+        });
+      }
+      else {
+        this.newThumbnailView = new pageflow.StaticThumbnailView({
+          model: this.model
+        });
+      }
     }
 
-    this.currentFileThumbnail = file;
-
-    if (this.fileThumbnailView) {
-      this.fileThumbnailView.close();
+    if (this.thumbnailView) {
+      this.thumbnailView.close();
     }
 
-    this.fileThumbnailView = this.subview(new pageflow.FileThumbnailView({
-      model: file,
-      className: 'thumbnail file_thumbnail',
-      imageUrlPropertyName: this.options.imageUrlPropertyName
-    }));
+    if (this.model) {
+      this.thumbnailView = this.subview(this.newThumbnailView);
 
-    this.$el.append(this.fileThumbnailView.el);
+      this.$el.append(this.thumbnailView.el);
+    }
   }
 });

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

@@ -0,0 +1,16 @@
+pageflow.StaticThumbnailView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/static_thumbnail',
+  className: 'static_thumbnail',
+
+  onRender: function() {
+    this.update();
+  },
+
+  update: function() {
+    this.$el.css('background-image', 'url(' + this._imageUrl() + ')');
+  },
+
+  _imageUrl: function() {
+    return this.model.thumbnailUrl();
+  }
+});