pageflow 0.8.2 → 0.9.0

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

@@ -19,7 +19,7 @@ pageflow.Page = Backbone.Model.extend({
     this.configuration.parent = this.configuration.page = this;
 
     this.listenTo(this.configuration, 'change', function() {
-      this.trigger('change:configuration');
+      this.trigger('change:configuration', this);
     });
 
     this.listenTo(this.configuration, 'change:title', function() {
@@ -50,13 +50,17 @@ pageflow.Page = Backbone.Model.extend({
   thumbnailFile: function() {
     var configuration = this.configuration;
 
-    return _.reduce(this.pageType().thumbnail_candidates, function(result, candidate) {
+    return _.reduce(this.pageType().thumbnailCandidates(), function(result, candidate) {
       return result || configuration.getReference(candidate.attribute, candidate.file_collection);
     }, null);
   },
 
+  pageLinks: function() {
+    return this.pageType().pageLinks(this.configuration);
+  },
+
   pageType: function() {
-    return pageflow.Page.typesByName[this.get('template')];
+    return pageflow.editor.pageTypes.findByName(this.get('template'));
   },
 
   toJSON: function() {
@@ -70,6 +74,9 @@ pageflow.Page = Backbone.Model.extend({
   }
 });
 
-pageflow.Page.transitions = ['fade', 'scroll'];
 pageflow.Page.linkedPagesLayouts = ['default', 'hero_top_left', 'hero_top_right'];
 pageflow.Page.textPositions = ['left', 'right'];
+
+pageflow.Page.scrollIndicatorModes = ['all', 'only_back', 'only_next', 'non'];
+pageflow.Page.scrollIndicatorOrientations = ['vertical', 'horizontal'];
+pageflow.Page.delayedTextFadeIn = ['no_fade', 'short', 'medium', 'long'];

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

@@ -0,0 +1,31 @@
+pageflow.PreviewEntryData = pageflow.EntryData.extend({
+  initialize: function(options) {
+    this.chapters = options.chapters;
+    this.pages = options.pages;
+    this.theming = options.theming;
+  },
+
+  getThemingOption: function(name) {
+    return this.theming.get(name);
+  },
+
+  getChapterConfiguration: function(id) {
+    var chapter = this.chapters.get(id);
+    return chapter ? chapter.configuration.attributes : {};
+  },
+
+  getChapterPagePermaIds: function(id) {
+    var chapter = this.chapters.get(id);
+    return chapter ? chapter.pages.pluck('perma_id') : [];
+  },
+
+  getChapterIdByPagePermaId: function(permaId) {
+    var page = this.pages.getByPermaId(permaId);
+    return page && page.get('chapter_id');
+  },
+
+  getPageConfiguration: function(permaId) {
+    var page = this.pages.getByPermaId(permaId);
+    return page ? page.configuration.attributes : {};
+  }
+});

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

@@ -7,5 +7,13 @@ pageflow.Theming = Backbone.Model.extend({
 
   hasHomeButton: function() {
     return this.get('home_button');
+  },
+
+  supportsEmphasizedPages: function() {
+    return this.get('emphasized_pages');
+  },
+
+  supportsScrollIndicatorModes: function() {
+    return this.get('scroll_indicator_modes');
   }
 });

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

@@ -9,6 +9,14 @@ pageflow.UploadedFile = Backbone.Model.extend({
     return this.collection && this.collection.fileType;
   },
 
+  title: function() {
+    return this.get('file_name');
+  },
+
+  thumbnailFile: function() {
+    return this;
+  },
+
   isUploading: function() {
     return this.get('state') === 'uploading';
   },

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

@@ -0,0 +1,6 @@
+<button></button>
+
+<div class="drop_down_button_menu">
+  <ul class="drop_down_button_items" role="menu">
+  </ul>
+</div>

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

@@ -0,0 +1 @@
+<a href="#"></a>

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

@@ -2,8 +2,8 @@
   <h2><%= I18n.t('pageflow.editor.templates.files_explorer.reuse_files') %></h2>
 
   <div class="panels">
-    <div class="entries_panel">
-    </div>
+    <ul class="entries_panel">
+    </ul>
 
     <div class="files_panel">
     </div>

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

@@ -0,0 +1,7 @@
+<label>
+  <span class="name"></span>
+  <span class="inline_help"></span>
+</label>
+<div class="title"></div>
+<a href="" class="unset" title="<%= I18n.t('pageflow.editor.templates.inputs.reference.reset') %>"></a>
+<a href="" class="choose" title="<%= I18n.t('pageflow.editor.templates.inputs.reference.edit') %>"></a>

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

@@ -0,0 +1,5 @@
+<label>
+  <span class="list_label"></span>
+</label>
+
+<ul class="list_items"></ul>

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

@@ -0,0 +1 @@
+<%= I18n.t('pageflow.editor.templates.list_blank_slate.text') %>

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

@@ -0,0 +1,11 @@
+<span class="list_item_thumbnail"></span>
+<span class="list_item_missing_thumbnail"></span>
+<span class="list_item_type_pictogram type_pictogram"></span>
+
+<div class="list_item_title"></div>
+<div class="list_item_description"></div>
+
+<div class="list_item_buttons">
+  <a class="list_item_edit_button" title="<%= I18n.t('pageflow.editor.templates.list_item.edit') %>"></a>
+  <a class="list_item_remove_button" title="<%= I18n.t('pageflow.editor.templates.list_item.remove') %>"></a>
+</div>

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

@@ -1 +1,7 @@
-<li class="loading"><%= I18n.t('pageflow.editor.templates.loading.loading') %></li>
+<div class="spinner">
+  <div class="rect1"></div>
+  <div class="rect2"></div>
+  <div class="rect3"></div>
+  <div class="rect4"></div>
+  <div class="rect5"></div>
+</div>

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

@@ -1 +1 @@
-<li class="blank_slate"><%= I18n.t('pageflow.editor.templates.other_entries_blank_slate.none_available') %><li>
+<%= I18n.t('pageflow.editor.templates.other_entries_blank_slate.none_available') %>

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

@@ -0,0 +1,7 @@
+<div>
+  <span class="missing_page_thumbnail"></span>
+  <span class="page_thumbnail"></span>
+  <div class="title"></div>
+  <div class="label"></div>
+  <a class="edit" title="<%= I18n.t('pageflow.editor.templates.page_link_item.edit') %>"></a>
+<div>

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

@@ -0,0 +1,6 @@
+<label>
+  <span class="name"><%= I18n.t('pageflow.editor.templates.page_links.label') %></span>
+</label>
+<ul class="links outline"></ul>
+
+<a href="" class="add_link"><%= I18n.t('pageflow.editor.templates.page_links.add') %></a>

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

@@ -0,0 +1,12 @@
+<div class="box">
+  <h2><%= I18n.t('pageflow.editor.templates.page_selection.title') %></h2>
+
+  <div class="wrapper editor">
+    <ul class="chapters">
+    </ul>
+  </div>
+
+  <div class="footer">
+    <a href="" class="close"><%= I18n.t('pageflow.editor.templates.page_selection.cancel') %></a>
+  </div>
+</div>

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

@@ -23,16 +23,52 @@
   <div class="radio_input">
     <input id="publish_entry_until" type="radio" name="mode" value="publish_until">
     <label for="publish_entry_until"><%= I18n.t('pageflow.editor.templates.publish_entry.until_including') %></label>
+  </div>
+
+  <div class="publish_until_fields disabled">
+    <label>
+      <%= I18n.t('pageflow.editor.templates.publish_entry.date') %>
+      <input type="text" name="publish_until">
+    </label>
+
+    <label>
+      <%= I18n.t('pageflow.editor.templates.publish_entry.time') %>
+      <input type="text" name="publish_until_time" value="00:00">
+    </label>
+  </div>
+
+  <div class="check_box_input">
+    <input id="publish_password_protected" type="checkbox" name="password_protected" value="1">
+    <label for="publish_password_protected">
+      <span class="name">
+        <%= I18n.t('pageflow.editor.templates.publish_entry.password_protected') %>
+      </span>
+      <span class="inline_help">
+        <%= I18n.t('pageflow.editor.templates.publish_entry.password_help') %>
+      </span>
+    </label>
+  </div>
+
+  <div class="password_fields disabled">
+    <label>
+      <%= I18n.t('pageflow.editor.templates.publish_entry.user_name') %>
+      <input type="text" name="user_name" disabled>
+    </label>
 
-    <div class="publish_until_fields disabled">
-      <label><%= I18n.t('pageflow.editor.templates.publish_entry.date') %>
-        <input type="text" name="publish_until">
-      </label>
+    <label>
+      <%= I18n.t('pageflow.editor.templates.publish_entry.password') %>
+      <input type="text" name="password">
+    </label>
 
-      <label><%= I18n.t('pageflow.editor.templates.publish_entry.time') %>
-        <input type="text" name="publish_until_time" value="00:00">
-      </label>
-    </div>
+    <p class="already_published_with_password">
+      <%= I18n.t('pageflow.editor.templates.publish_entry.already_published_with_password_help') %>
+    </p>
+    <p class="previously_published_with_password">
+      <%= I18n.t('pageflow.editor.templates.publish_entry.previously_published_with_password_help') %>
+    </p>
+    <p class="already_published_without_password">
+      <%= I18n.t('pageflow.editor.templates.publish_entry.already_published_without_password_help') %>
+    </p>
   </div>
 
   <button class="save" disabled><%= I18n.t('pageflow.editor.templates.publish_entry.publish') %></a>

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

@@ -13,7 +13,9 @@ pageflow.ChapterItemView = Backbone.Marionette.ItemView.extend({
   },
 
   onRender: function() {
-    this.subview(new pageflow.SortableCollectionView({
+    var collectionView = this.options.sortable ? pageflow.SortableCollectionView : pageflow.CollectionView;
+
+    this.subview(new collectionView({
       el: this.ui.pages,
       collection: this.model.pages,
       itemViewConstructor: this.options.pageItemView || pageflow.NavigatablePageItemView,

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/audio.js

@@ -18,7 +18,7 @@ pageflow.ConfigurationEditorView.register('audio', {
 
     this.tab('options', function() {
       this.input('autoplay', pageflow.CheckBoxInputView);
-      this.group('options');
+      this.group('options', {canPauseAtmo: true});
     });
   }
 });

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

@@ -1,5 +1,37 @@
-pageflow.ConfigurationEditorTabView.groups.define('options', function() {
+pageflow.ConfigurationEditorTabView.groups.define('options', function(options) {
   this.input('display_in_navigation', pageflow.CheckBoxInputView);
-  this.input('transition', pageflow.SelectInputView, {values: pageflow.Page.transitions});
+
+  if (pageflow.theming.supportsEmphasizedPages()) {
+    this.input('emphasize_in_navigation', pageflow.CheckBoxInputView);
+  }
+
+  this.group('page_transitions');
+
+  if (pageflow.features.isEnabled('delayed_text_fade_in')) {
+    this.input('delayed_text_fade_in', pageflow.SelectInputView, {values: pageflow.Page.delayedTextFadeIn});
+  }
+
   this.input('description', pageflow.TextAreaInputView, {size: 'short'});
+
+  if (pageflow.features.isEnabled('atmo')) {
+    this.input('atmo_audio_file_id', pageflow.FileInputView, {
+      collection: pageflow.audioFiles
+    });
+
+    if (options.canPauseAtmo) {
+      this.input('atmo_during_playback', pageflow.SelectInputView, {
+        values: pageflow.Atmo.duringPlaybackModes
+      });
+    }
+  }
+
+  if (pageflow.theming.supportsScrollIndicatorModes()) {
+    this.input('scroll_indicator_mode', pageflow.SelectInputView, {
+      values: pageflow.Page.scrollIndicatorModes
+    });
+
+    this.input('scroll_indicator_orientation', pageflow.SelectInputView, {
+      values: pageflow.Page.scrollIndicatorOrientations
+    });
+  }
 });

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

@@ -0,0 +1,6 @@
+pageflow.ConfigurationEditorTabView.groups.define('page_transitions', function() {
+  this.input('transition', pageflow.SelectInputView, {
+    translationKeyPrefix: 'pageflow.page_transitions',
+    values: pageflow.pageTransitions.names()
+  });
+});

data/app/assets/javascripts/pageflow/editor/views/configuration_editors/video.js

@@ -28,7 +28,12 @@ pageflow.ConfigurationEditorView.register('video', {
 
     this.tab('options', function() {
       this.input('autoplay', pageflow.CheckBoxInputView);
-      this.group('options');
+
+      if (pageflow.features.isEnabled('auto_change_page')) {
+        this.input('auto_change_page_on_ended', pageflow.CheckBoxInputView);
+      }
+
+      this.group('options', {canPauseAtmo: true});
     });
   }
 });

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

@@ -0,0 +1,27 @@
+pageflow.DisabledAtmoIndicatorView = Backbone.Marionette.View.extend({
+  className: 'disabled_atmo_indicator',
+
+  events: {
+    'click': function() {
+      pageflow.atmo.enable();
+    }
+  },
+
+  initialize: function() {
+    this.listenTo(pageflow.events, 'atmo:disabled', function() {
+      this.$el.show();
+    });
+
+    this.listenTo(pageflow.events, 'atmo:enabled', function() {
+      this.$el.hide();
+    });
+
+    this.$el.toggle(pageflow.atmo.disabled);
+  },
+
+  render: function() {
+    this.$el.attr('title', I18n.t('pageflow.editor.atmo.disabled'));
+
+    return this;
+  }
+});

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

@@ -0,0 +1,33 @@
+/** @api private */
+pageflow.DropDownButtonItemView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/editor/templates/drop_down_button_item',
+  tagName: 'li',
+  className: 'drop_down_button_item',
+
+  ui: {
+    link: '> a'
+  },
+
+  events: {
+    'click > a': function() {
+      if (!this.model.get('disabled')) {
+        this.model.selected();
+      }
+
+      return false;
+    }
+  },
+
+  modelEvents: {
+    change: 'update'
+  },
+
+  onRender: function() {
+    this.update();
+  },
+
+  update: function() {
+    this.ui.link.text(this.model.get('label'));
+    this.$el.toggleClass('is_disabled', !!this.model.get('disabled'));
+  }
+});

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

@@ -0,0 +1,80 @@
+/**
+ * A button that displays a drop down menu on hover.
+ *
+ * @option label [String]
+ * @options items [Backbone.Collection] The `label` attribute is used
+ *   as text for the item. Items can be disabled by setting the
+ *   `disabled` property to `true`. On click a `selected` method is
+ *   called on the item model.
+ */
+pageflow.DropDownButtonView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/editor/templates/drop_down_button',
+  className: 'drop_down_button',
+
+  ui: {
+    button: '> button',
+    menu: '.drop_down_button_menu',
+    items: '.drop_down_button_items'
+  },
+
+  events: {
+    'mouseenter': function() {
+      this.positionMenu();
+      this.showMenu();
+    },
+
+    'mouseleave': function() {
+      this.hideMenu();
+    }
+  },
+
+  onRender: function() {
+    var view = this;
+
+    this.ui.button.text(this.options.label);
+
+    this.subview(new pageflow.CollectionView({
+      el: this.ui.items,
+      collection: this.options.items,
+      itemViewConstructor: pageflow.DropDownButtonItemView
+    }));
+
+    this.ui.menu.on({
+      'mouseenter': function() {
+        view.showMenu();
+      },
+
+      'mouseleave': function() {
+        view.hideMenu();
+      }
+    });
+
+    this.ui.menu.appendTo('#editor_menu_container');
+  },
+
+  onClose: function() {
+    this.ui.menu.remove();
+  },
+
+  positionMenu: function() {
+    var offset = this.$el.offset();
+
+    this.ui.menu.css({
+      top: offset.top + this.$el.height(),
+      left: offset.left
+    });
+  },
+
+  showMenu: function() {
+    clearTimeout(this.hideMenuTimeout);
+    this.ui.menu.addClass('is_visible');
+  },
+
+  hideMenu: function() {
+    this.hideMenuTimeout = setTimeout(_.bind(function() {
+      if (!this.isClosed) {
+        this.ui.menu.removeClass('is_visible');
+      }
+    }, this), 500);
+  }
+});