pageflow 13.0.0.beta6 → 13.0.0.beta7

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

@@ -50,5 +50,9 @@ pageflow.PageType = pageflow.Object.extend({
         'pageflow.common_page_link_attributes'
       ]
     }, options));
+  },
+
+  supportsPhoneEmulation: function() {
+    return !!this.options.supportsPhoneEmulation;
   }
 });

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

@@ -42,6 +42,7 @@
 //= require_tree ./views
 
 //= require ./initializers/setup_config
+//= require ./initializers/setup_asset_urls
 //= require ./initializers/setup_common_seed
 //= require ./initializers/setup_features
 //= require ./initializers/setup_audio

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

@@ -24,6 +24,14 @@ pageflow.FilesCollection = Backbone.Collection.extend({
     return Backbone.Collection.prototype.fetch.call(this, options);
   },
 
+  findOrCreateBy: function(attributes) {
+    return this.findWhere(attributes) ||
+      this.create(attributes, {
+        noUpload: true,
+        fileType: this.fileType
+      });
+  },
+
   getEntry: function() {
     return this.entry || pageflow.entry;
   },

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

@@ -12,9 +12,11 @@ pageflow.app.addInitializer(function(options) {
     model: pageflow.entry
   }));
 
-  pageflow.app.indicatorsRegion.show(new pageflow.DisabledAtmoIndicatorView().render());
-  pageflow.app.notificationsRegion.show(new pageflow.NotificationsView().render());
-  pageflow.app.helpButtonRegion.show(new pageflow.HelpButtonView().render());
+  pageflow.app.indicatorsRegion.show(new pageflow.DisabledAtmoIndicatorView());
+  pageflow.app.notificationsRegion.show(new pageflow.NotificationsView());
+  pageflow.app.sidebarFooterRegion.show(new pageflow.SidebarFooterView({
+    model: pageflow.entry
+  }));
 
   Backbone.history.start({root: options.root});
 });
@@ -26,5 +28,5 @@ pageflow.app.addRegions({
   sidebarRegion: 'sidebar .container',
   dialogRegion: '.dialog_container',
   notificationsRegion: 'sidebar .notifications_container',
-  helpButtonRegion: 'sidebar .help_button_container'
+  sidebarFooterRegion: 'sidebar .sidebar_footer_container'
 });

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

@@ -0,0 +1,3 @@
+pageflow.app.addInitializer(function(options) {
+  pageflow.editorAssetUrls = options.asset_urls;
+});

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

@@ -102,8 +102,8 @@ pageflow.Entry = Backbone.Model.extend({
     });
   },
 
-  getFileCollection: function(fileType) {
-    return this.files[fileType.collectionName];
+  getFileCollection: function(fileTypeOrFileTypeName) {
+    return this.files[fileTypeOrFileTypeName.collectionName || fileTypeOrFileTypeName];
   },
 
   pollForPendingFiles: function() {

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

@@ -56,6 +56,11 @@ pageflow.FileStage = Backbone.Model.extend({
   },
 
   localizedDescription: function() {
-    return I18n.t('pageflow.editor.files.stages.' + this.get('name') + '.' + this.get('state'));
+    var prefix = 'pageflow.editor.files.stages.';
+    var suffix = this.get('name') + '.' + this.get('state');
+
+    return I18n.t(prefix + this.file.i18nKey + '.' + suffix, {
+      defaultValue: I18n.t(prefix + suffix)
+    });
   }
 });

data/app/assets/javascripts/pageflow/editor/models/mixins/stage_provider.js

@@ -14,6 +14,15 @@ pageflow.stageProvider = {
 
       return fileStage;
     }, this).reverse().value());
+
+    this.unfinishedStages = new pageflow.SubsetCollection({
+      parent: this.stages,
+      watchAttribute: 'finished',
+
+      filter: function(stage) {
+        return !stage.get('finished');
+      }
+    });
   },
 
   currentStage: function() {

data/app/assets/javascripts/pageflow/editor/models/mixins/transient_references.js

@@ -38,11 +38,20 @@ pageflow.transientReferences = {
 
   _setIdOnceSynced: function(attribute, record) {
     record.once('change:id', function() {
-      delete this.transientReferences[attribute];
-      this.set(attribute, record.id);
+      this._onceRecordCanBeFoundInCollection(record, function() {
+        delete this.transientReferences[attribute];
+        this.set(attribute, record.id);
+      });
     }, this);
   },
 
+  _onceRecordCanBeFoundInCollection: function(record, callback) {
+    // Backbone collections update their modelsById map in the change
+    // event which is dispatched after the `change:<attribute>`
+    // events.
+    record.once('change', _.bind(callback, this));
+  },
+
   _listenForReady: function(attribute, record) {
     if (!record.isReady()) {
       this.pendingReferences[attribute] = record;
@@ -51,6 +60,7 @@ pageflow.transientReferences = {
         if (record.isReady()) {
           this._cleanUpReadyListener(attribute);
           this.trigger('change');
+          this.trigger('change:' + attribute + ':ready');
         }
       });
     }

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

@@ -10,6 +10,11 @@ pageflow.PreviewEntryData = pageflow.EntryData.extend({
     return this.entry.getTheme().get(name);
   },
 
+  getFile: function(collectionName, id) {
+    var file = this.entry.getFileCollection(collectionName).get(id);
+    return file && file.attributes;
+  },
+
   getStorylineConfiguration: function(id) {
     var storyline = this.storylines.get(id);
     return storyline ? storyline.configuration.attributes : {};

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

@@ -38,7 +38,12 @@ pageflow.UploadedFile = Backbone.Model.extend({
   },
 
   urlRoot: function() {
-    return this.collection.url();
+    if (this.isNew() && this.options.noUpload) {
+      return this.collection.url() + '/empty';
+    }
+    else {
+      return this.collection.url();
+    }
   },
 
   fileType: function() {

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

@@ -0,0 +1,26 @@
+<div class="emulation_mode_button-menu">
+  <div class="emulation_mode_button-menu_header">
+    <%= I18n.t('pageflow.editor.templates.emulation_mode_button.header') %>
+  </div>
+  <ul>
+    <li class="emulation_mode_button-menu_item emulation_mode_button-desktop">
+      <a class="emulation_mode_button-menu_link">
+        <%= I18n.t('pageflow.editor.templates.emulation_mode_button.desktop') %>
+      </a>
+    </li>
+    <li class="emulation_mode_button-menu_item emulation_mode_button-phone">
+      <a class="emulation_mode_button-menu_link">
+        <%= I18n.t('pageflow.editor.templates.emulation_mode_button.phone') %>
+        <div class="emulation_mode_button-disabled_hint">
+          <%= I18n.t('pageflow.editor.templates.emulation_mode_button.disabled_hint') %>
+        </div>
+      </a>
+    </li>
+  </ul>
+</div>
+<div class="emulation_mode_button-display emulation_mode_button-desktop">
+  <%= I18n.t('pageflow.editor.templates.emulation_mode_button.desktop') %>
+</div>
+<div class="emulation_mode_button-display emulation_mode_button-phone">
+  <%= I18n.t('pageflow.editor.templates.emulation_mode_button.phone') %>
+</div>

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

@@ -1,4 +1,9 @@
-<div class="header"></div>
-<div class="overview"></div>
+<div class="container">
+  <div class="header"></div>
+  <div class="overview"></div>
 
-<div class="entry"></div>
+  <div class="entry"></div>
+</div>
+<div class="navigation_disabled_hint">
+  <%= I18n.t('pageflow.editor.templates.entry_preview.navigation_disabled_hint') %>
+</div>

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

@@ -7,7 +7,7 @@ pageflow.ConfigurationEditorTabView.groups.define('options', function(options) {
     this.input('emphasize_in_navigation', pageflow.CheckBoxInputView);
   }
 
-  this.group('page_transitions');
+  this.group('page_transitions', {propertyName: 'transition'});
 
   if (pageflow.features.isEnabled('delayed_text_fade_in')) {
     this.input('delayed_text_fade_in', pageflow.SelectInputView, {values: pageflow.Page.delayedTextFadeIn});

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

@@ -1,10 +1,7 @@
 pageflow.ConfigurationEditorTabView.groups.define('page_link', function() {
   this.input('label', pageflow.TextInputView);
   this.input('target_page_id', pageflow.PageLinkInputView);
-  this.input('page_transition', pageflow.SelectInputView, {
-    translationKeyPrefix: 'pageflow.page_transitions',
-    includeBlank: true,
-    blankTranslationKey: 'pageflow.editor.views.edit_page_link_view.default_page_transition',
-    values: pageflow.pageTransitions.names()
+  this.group('page_transitions', {
+    includeBlank: true
   });
-});
+});

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

@@ -1,6 +1,16 @@
-pageflow.ConfigurationEditorTabView.groups.define('page_transitions', function() {
-  this.input('transition', pageflow.SelectInputView, {
+pageflow.ConfigurationEditorTabView.groups.define('page_transitions', function(options) {
+  var inputOptions = {
     translationKeyPrefix: 'pageflow.page_transitions',
+    blankTranslationKey: 'pageflow.page_transitions.default',
     values: pageflow.pageTransitions.names()
-  });
-});
+  };
+
+  if (pageflow.navigationDirection.isHorizontalOnPhone()) {
+    inputOptions.additionalInlineHelpText =
+      I18n.t('pageflow.editor.phone_horizontal_slideshow_mode.page_transitions_inline_help');
+  }
+
+  this.input(options.propertyName || 'page_transition',
+             pageflow.SelectInputView,
+             _.extend(inputOptions, options));
+});

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

@@ -49,11 +49,8 @@ pageflow.EditStorylineView = Backbone.Marionette.Layout.extend({
         disabled: true,
         visibleBinding: 'main'
       });
-      this.input('page_transition', pageflow.SelectInputView, {
-        translationKeyPrefix: 'pageflow.page_transitions',
-        includeBlank: true,
-        blankTranslationKey: 'pageflow.editor.views.edit_storyline_view.default_parent_page_transition',
-        values: pageflow.pageTransitions.names()
+      this.group('page_transitions', {
+        includeBlank: true
       });
       this.input('main', pageflow.CheckBoxInputView, {
         visibleBinding: 'main',
@@ -94,4 +91,4 @@ pageflow.EditStorylineView = Backbone.Marionette.Layout.extend({
   goBack: function() {
     editor.navigate('/?storyline=' + this.model.id, {trigger: true});
   }
-});
+});

data/app/assets/javascripts/pageflow/editor/views/embedded/background_image_embedded_view.js

@@ -9,25 +9,60 @@ pageflow.BackgroundImageEmbeddedView = Backbone.Marionette.View.extend({
   },
 
   update: function() {
+    if (this.options.useInlineStyles !== false){
+      this.updateInlineStyle();
+    }
+    else {
+      this.updateClassName();
+    }
+
+    if (this.options.dataSizeAttributes) {
+      this.updateDataSizeAttributes();
+    }
+  },
+
+  updateClassName: function() {
+    this.$el.addClass('load_image');
+
+    var propertyName = this.options.propertyName.call ?
+      this.options.propertyName() :
+      this.options.propertyName;
+    var id = this.model.get(propertyName);
+    var prefix = this.options.backgroundImageClassNamePrefix.call ?
+      this.options.backgroundImageClassNamePrefix() :
+      this.options.backgroundImageClassNamePrefix;
+
+    prefix = prefix || 'image';
+    var backgroundImageClassName = id && prefix + '_' + id;
+
+    if (this.currentBackgroundImageClassName !== backgroundImageClassName) {
+      this.$el.removeClass(this.currentBackgroundImageClassName);
+      this.$el.addClass(backgroundImageClassName);
+
+      this.currentBackgroundImageClassName = backgroundImageClassName;
+    }
+  },
+
+  updateInlineStyle: function() {
     this.$el.css({
       backgroundImage: this.imageValue(),
       backgroundPosition: this.model.getFilePosition(this.options.propertyName, 'x') + '% ' +
         this.model.getFilePosition(this.options.propertyName, 'y') + '%'
     });
+  },
 
-    if (this.options.dataSizeAttributes) {
-      var imageFile = this.model.getImageFile(this.options.propertyName);
-
-      if (imageFile && imageFile.isReady()) {
-        this.$el.attr('data-width',  imageFile.get('width'));
-        this.$el.attr('data-height',  imageFile.get('height'));
-      }
-      else {
-        this.$el.attr('data-width', '16');
-        this.$el.attr('data-height', '9');
-      }
-      this.$el.css({backgroundPosition:'0 0'});
+  updateDataSizeAttributes: function() {
+    var imageFile = this.model.getImageFile(this.options.propertyName);
+
+    if (imageFile && imageFile.isReady()) {
+      this.$el.attr('data-width',  imageFile.get('width'));
+      this.$el.attr('data-height',  imageFile.get('height'));
+    }
+    else {
+      this.$el.attr('data-width', '16');
+      this.$el.attr('data-height', '9');
     }
+    this.$el.css({backgroundPosition:'0 0'});
   },
 
   imageValue: function() {

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

@@ -0,0 +1,45 @@
+pageflow.EmulationModeButtonView = Backbone.Marionette.ItemView.extend({
+  template: 'templates/emulation_mode_button',
+  className: 'emulation_mode_button',
+
+  ui: {
+    phoneItem: '.emulation_mode_button-phone',
+    desktopItem: '.emulation_mode_button-desktop',
+
+    phoneDisplay: '.emulation_mode_button-display.emulation_mode_button-phone',
+    desktopDisplay: '.emulation_mode_button-display.emulation_mode_button-desktop'
+  },
+
+  events: {
+    'click .emulation_mode_button-desktop a': function() {
+      this.model.unset('emulation_mode');
+    },
+
+    'click .emulation_mode_button-phone a': function() {
+      if (!this.model.get('current_page_supports_emulation_mode')) {
+        return;
+      }
+
+      this.model.set('emulation_mode', 'phone');
+    }
+  },
+
+  modelEvents: {
+    'change:emulation_mode change:current_page_supports_emulation_mode': 'update'
+  },
+
+  onRender: function() {
+    this.update();
+  },
+
+  update: function() {
+    this.ui.phoneItem.toggleClass('disabled',
+                                  !this.model.get('current_page_supports_emulation_mode'));
+
+    this.ui.phoneItem.toggleClass('active', this.model.has('emulation_mode'));
+    this.ui.desktopItem.toggleClass('active', !this.model.has('emulation_mode'));
+
+    this.ui.phoneDisplay.toggleClass('active', this.model.has('emulation_mode'));
+    this.ui.desktopDisplay.toggleClass('active', !this.model.has('emulation_mode'));
+  }
+});

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

@@ -1,11 +1,13 @@
 pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
   template: 'templates/entry_preview',
-  className: 'container',
+  className: 'entry_preview',
 
   ui: {
-    header: '> .header',
-    entry: '> .entry',
-    overview: '> .overview'
+    container: '> .container',
+    header: '> .container > .header',
+    entry: '> .container > .entry',
+    overview: '> .container > .overview',
+    navigationDisabledHint: '.navigation_disabled_hint'
   },
 
   initialize: function() {
@@ -31,6 +33,7 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
     this.listenTo(pageflow.entry, 'change:configuration', function() {
       pageflow.entry.once('sync', this.update, this);
     });
+    this.listenTo(pageflow.entry, 'change:emulation_mode', this.updateEmulationMode);
 
     this.listenTo(pageflow.storylines, 'sync', this.update);
     this.listenTo(pageflow.chapters, 'sync', this.update);
@@ -39,6 +42,23 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
     this.listenTo(pageflow.audioFiles, 'sync', this.update);
     this.listenTo(pageflow.imageFiles, 'sync', this.update);
     this.listenTo(pageflow.videoFiles, 'sync', this.update);
+
+    this.listenTo(pageflow.events, 'page:changing', function(event) {
+      if (pageflow.entry.get('emulation_mode')) {
+        this.ui.navigationDisabledHint.css('opacity', 1);
+
+        clearTimeout(this.navigationDisabledHintTimeout);
+        this.navigationDisabledHintTimeout = setTimeout(_.bind(function() {
+          this.ui.navigationDisabledHint.css('opacity', 0);
+        }, this), 2000);
+
+        event.cancel();
+      }
+    });
+
+    this.listenTo(pageflow.events, 'page:change', function(page) {
+      this.updateEmulationModeSupport(page.getPermaId());
+    });
   },
 
   onShow: function() {
@@ -57,6 +77,12 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
     });
 
     this.listenTo(this.pages, 'edit', function(model) {
+      if (this.lastEditedPage != model) {
+        pageflow.entry.unset('emulation_mode');
+      }
+
+      this.lastEditedPage = model;
+
       slideshow.goTo(this.pageViews.itemViews.findByModel(model).$el);
     });
 
@@ -65,17 +91,29 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
       this.updateSimulatedMediaQueryClasses();
     });
 
+    this.listenTo(pageflow.pages, 'change:template', function() {
+      this.updateEmulationModeSupport(slideshow.currentPagePermaId());
+    });
+
     this.updateSimulatedMediaQueryClasses();
   },
 
+  updateEmulationModeSupport: function(permaId) {
+    var model = pageflow.pages.getByPermaId(permaId);
+
+    pageflow.entry.set('current_page_supports_emulation_mode',
+                       model && model.pageType().supportsPhoneEmulation());
+  },
+
   updateSimulatedMediaQueryClasses: function() {
-    var width = this.$el.width();
-    var portrait = this.$el.width() < this.$el.height();
+    var width = this.ui.container.width();
+    var height = this.ui.container.height();
+    var portrait = width < height;
 
     $('html')
       .toggleClass('simulate_mobile', width <= 900)
-      .toggleClass('simulate_phone', width <= 700)
-      .toggleClass('simulate_desktop', width > 700)
+      .toggleClass('simulate_phone', (portrait && width <= 500) || (!portrait && height <= 500))
+      .toggleClass('simulate_desktop', (portrait && width > 500) || (!portrait && height > 500))
       .toggleClass('simulate_narrow_desktop', width <= 1200)
       .toggleClass('simulate_wide_desktop', width > 1600)
       .toggleClass('simulate_pad_portrait', width <= 768 && portrait)
@@ -137,5 +175,21 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
     return widgets.map(function() {
       return 'widget_' + $(this).data('widget') + '_present';
     }).get();
+  },
+
+  updateEmulationMode: function() {
+    if (pageflow.entry.previous('emulation_mode')) {
+      this.$el.removeClass(this.emulationModeClassName(pageflow.entry.previous('emulation_mode')));
+    }
+
+    if (pageflow.entry.get('emulation_mode')) {
+      this.$el.addClass(this.emulationModeClassName(pageflow.entry.get('emulation_mode')));
+    }
+
+    pageflow.app.trigger('resize');
+  },
+
+  emulationModeClassName: function(mode) {
+    return 'emulation_mode_' + mode;
   }
 });