pageflow 0.5.0 → 0.6.0

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

@@ -8,12 +8,19 @@ pageflow.ConfigurationEditorView.register('video', {
     });
 
     this.tab('files', function() {
-      this.input('video_file_id', pageflow.FileInputView, {collection: pageflow.videoFiles});
+      this.input('video_file_id', pageflow.FileInputView, {
+        collection: pageflow.videoFiles,
+        positioning: false
+      });
       this.input('poster_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
-        imagePositioning: false
+        positioning: false
       });
       this.input('thumbnail_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        positioning: false
+      });
+      this.input('mobile_poster_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
         imagePositioning: false
       });

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

@@ -15,18 +15,22 @@ pageflow.EditMetaDataView = Backbone.Marionette.Layout.extend({
   },
 
   onRender: function() {
+    var entry = this.model;
+
     var configurationEditor = new pageflow.ConfigurationEditorView({
-      model: this.model
+      model: entry.configuration,
+      tab: this.options.tab
     });
 
     configurationEditor.tab('general', function() {
       this.input('title', pageflow.TextInputView);
-      this.input('summary', pageflow.TextAreaInputView);
       this.input('credits', pageflow.TextAreaInputView);
     });
 
     configurationEditor.tab('widgets', function() {
       this.input('manual_start', pageflow.CheckBoxInputView);
+      this.input('emphasize_chapter_beginning', pageflow.CheckBoxInputView);
+      this.input('emphasize_new_pages', pageflow.CheckBoxInputView);
       this.input('home_button_enabled', pageflow.CheckBoxInputView, {
         disabled: !pageflow.theming.hasHomeButton(),
         displayUncheckedIfDisabled: true
@@ -37,6 +41,18 @@ pageflow.EditMetaDataView = Backbone.Marionette.Layout.extend({
           visibleBinding: 'home_button_enabled'
         });
       }
+      this.view(pageflow.EditWidgetsView, {
+        model: entry,
+        widgetTypes: pageflow.editor.widgetTypes
+      });
+    });
+
+    configurationEditor.tab('social', function() {
+      this.input('share_image_id', pageflow.FileInputView, {
+        collection: pageflow.imageFiles,
+        fileSelectionHandler: 'entryConfiguration'
+      });
+      this.input('summary', pageflow.TextAreaInputView);
     });
 
     this.formContainer.show(configurationEditor);

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

@@ -0,0 +1,29 @@
+pageflow.EditWidgetView = Backbone.Marionette.Layout.extend({
+  template: 'templates/edit_widget',
+  tagName: 'li',
+  className: 'edit_widget',
+
+  regions: {
+    widgetTypeContainer: '.widget_type'
+  },
+
+  ui: {
+    role: 'h2'
+  },
+
+  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
+    }));
+
+    this.$el.toggle(widgetTypes.length > 1);
+  }
+});

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

@@ -0,0 +1,20 @@
+pageflow.EditWidgetsView = Backbone.Marionette.Layout.extend({
+  template: 'templates/edit_widgets',
+
+  ui: {
+    widgets: '.widgets'
+  },
+
+  onRender: function() {
+    this.subview(new pageflow.CollectionView({
+      el: this.ui.widgets,
+      collection: this.model.widgets,
+      itemViewConstructor: pageflow.EditWidgetView,
+      itemViewOptions: {
+        widgetTypes: this.options.widgetTypes
+      }
+    }).render());
+
+    this.model.fetchWidgets();
+  }
+});

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

@@ -10,9 +10,9 @@ pageflow.BackgroundImageEmbeddedView = Backbone.Marionette.View.extend({
 
   update: function() {
     this.$el.css({
-      backgroundImage: 'url("' + this.model.getImageFileUrl(this.options.propertyName) + '")',
-      backgroundPosition: this.model.getImageFilePosition(this.options.propertyName, 'x') + '% ' +
-        this.model.getImageFilePosition(this.options.propertyName, 'y') + '%',
+      backgroundImage: this.imageValue(),
+      backgroundPosition: this.model.getFilePosition(this.options.propertyName, 'x') + '% ' +
+        this.model.getFilePosition(this.options.propertyName, 'y') + '%'
     });
 
     if (this.options.dataSizeAttributes) {
@@ -28,5 +28,10 @@ pageflow.BackgroundImageEmbeddedView = Backbone.Marionette.View.extend({
       }
       this.$el.css({backgroundPosition:'0 0'});
     }
+  },
+
+  imageValue: function() {
+    var url = this.model.getImageFileUrl(this.options.propertyName);
+    return url ? 'url("' + url  + '")' : 'none';
   }
 });

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

@@ -5,11 +5,13 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
   ui: {
     header: '.header',
     entry: '.entry',
-    navigation: '.navigation',
-    navigationMobile: '.navigation_mobile',
     overview: '.overview'
   },
 
+  initialize: function() {
+    this.widgets = $();
+  },
+
   onRender: function() {
     this.pageViews = this.subview(new pageflow.CollectionView({
       el: this.ui.entry,
@@ -22,8 +24,8 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
 
     this.update();
 
-    this.listenTo(pageflow.entry, 'sync:order', this.update);
-    this.listenTo(pageflow.entry, 'change:credits change:home_url change:home_button_enabled', function() {
+    this.listenTo(pageflow.entry, 'sync:order sync:widgets', this.update);
+    this.listenTo(pageflow.entry, 'change:configuration', function() {
       pageflow.entry.once('sync', this.update, this);
     });
 
@@ -37,6 +39,7 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
 
   onShow: function() {
     var slideshow = pageflow.slides =  new pageflow.Slideshow(this.ui.entry);
+    slideshow.update();
 
     this.listenTo(this.model.pages, 'add', function() {
       slideshow.update();
@@ -52,7 +55,24 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
 
     this.listenTo(pageflow.app, 'resize', function() {
       slideshow.triggerResizeHooks();
+      this.updateSimulatedMediaQueryClasses();
     });
+
+    this.updateSimulatedMediaQueryClasses();
+  },
+
+  updateSimulatedMediaQueryClasses: function() {
+    var width = this.$el.width();
+    var portrait = this.$el.width() < this.$el.height();
+
+    $('html')
+      .toggleClass('simulate_mobile', width <= 900)
+      .toggleClass('simulate_phone', width <= 700)
+      .toggleClass('simulate_desktop', width > 700)
+      .toggleClass('simulate_narrow_desktop', width <= 1200)
+      .toggleClass('simulate_wide_desktop', width > 1600)
+      .toggleClass('simulate_pad_portrait', width <= 768 && portrait)
+      .toggleClass('simulate_phone_portrait', width <= 500 && portrait);
   },
 
   update: function() {
@@ -62,18 +82,42 @@ pageflow.EntryPreviewView = Backbone.Marionette.ItemView.extend({
       var partials = $('<div />').html(response);
 
       view.ui.header.replaceWith(partials.find('.header'));
-      view.ui.navigation.replaceWith(partials.find('.navigation'));
-      view.ui.navigationMobile.replaceWith(partials.find('.navigation_mobile'));
       view.ui.overview.replaceWith(partials.find('.overview'));
-
       view.bindUIElements();
 
+      view.updateWidgets(partials);
+
       view.ui.header.header({
         slideshow: pageflow.slides
       });
-      view.ui.navigation.navigation();
-      view.ui.navigationMobile.navigationMobile();
       view.ui.overview.overview();
     });
+
+    this.$el.toggleClass('emphasize_chapter_beginning', !!this.model.configuration.get('emphasize_chapter_beginning'));
+  },
+
+  updateWidgets: function(partials) {
+    var widgets = partials.find('[data-widget]');
+    this.updatePresentWidgetsCssClasses(widgets);
+
+    this.widgets.remove();
+    this.widgets = widgets;
+    this.ui.entry.before(this.widgets);
+
+    pageflow.widgetTypes.enhance(this.$el);
+  },
+
+  updatePresentWidgetsCssClasses: function(newWidgets) {
+    var previousClasses = this.widgetNames(this.widgets);
+    var newClasses = this.widgetNames(newWidgets);
+
+    this.$el.removeClass(_.difference(previousClasses, newClasses).join(' '));
+    this.$el.addClass(newClasses.join(' '));
+  },
+
+  widgetNames: function(widgets) {
+    return widgets.map(function() {
+      return 'widget_' + $(this).data('widget') + '_present';
+    }).get();
   }
 });

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

@@ -37,7 +37,7 @@ pageflow.PageItemView = Backbone.Marionette.ItemView.extend({
   },
 
   _getPictogramTitle: function() {
-    var result = I18n.t('activerecord.values.page.template.' + this.model.get('template'));
+    var result = I18n.t(this.model.pageType().translation_key);
     result += ' Seite';
 
     if (this.options.displayInNavigationHint && !this.model.configuration.get('display_in_navigation')) {

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

@@ -7,6 +7,8 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
 
     'change:configuration': 'update',
 
+    'change:position': 'updateChapterBeginningClass',
+
     'sync': function() {
       this.$el.attr('data-id', this.model.id);
       this.$el.attr('data-perma-id', this.model.get('perma_id'));
@@ -31,6 +33,7 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
     this.$el.data('configuration', this.model.get('configuration'));
 
     this.$el.page();
+    this.updateChapterBeginningClass();
     this.update();
     this.$el.page('reactivate');
 
@@ -40,13 +43,13 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
   },
 
   updateTemplate: function() {
+    this.$el.page('cleanup');
+
     this.$el.html(this.pageTemplate());
-    this.$el.attr('data-id', this.model.id);
-    this.$el.attr('data-perma-id', this.model.get('perma_id'));
     this.$el.data('template', this.model.get('template'));
-    this.$el.data('configuration', this.model.get('configuration'));
 
     this.$el.page('reinit');
+    this.updateChapterBeginningClass();
     this.update();
     this.$el.page('reactivate');
 
@@ -60,6 +63,11 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
     this.refreshScroller();
   },
 
+  updateChapterBeginningClass: function() {
+    var chapterBeginning = this.model.get('position') === 0;
+    this.$el.toggleClass('chapter_beginning', chapterBeginning);
+  },
+
   pageType: function() {
     return this.$el.data('pageType');
   },

data/app/assets/javascripts/pageflow/events.js

@@ -0,0 +1 @@
+pageflow.events = _.extend({}, Backbone.Events);

data/app/assets/javascripts/pageflow/features/hashchange_support.js

@@ -0,0 +1,8 @@
+pageflow.features.add('hashchange support', function() {
+  var iOS = parseFloat(
+  ('' + (/CPU.*OS ([0-9_]{1,5})|(CPU like).*AppleWebKit.*Mobile/i.exec(navigator.userAgent) || [0,''])[1])
+  .replace('undefined', '3_2').replace('_', '.').replace('_', '')
+) || false;
+
+  return !(iOS >=8);
+});

data/app/assets/javascripts/pageflow/history.js

@@ -1,16 +1,28 @@
 pageflow.History = function(slideshow) {
   slideshow.on('slideshowchangepage', function() {
-    window.location.hash = '#' + slideshow.currentPage().attr('id');
+    if(pageflow.features.has('hashchange support')) {
+      window.location.hash = '#' + slideshow.currentPage().attr('id');
+    }
   });
 
   $(window).on('hashchange', function() {
     slideshow.goToByPermaId(getHash());
   });
 
-  slideshow.goToByPermaId(getHash());
+  slideshow.goToByPermaId(getPermaId());
 
   function getHash() {
     var match = window.location.href.match(/#(.*)$/);
     return match ? match[1] : '';
   }
+
+  function getPermaId() {
+    if (getHash().length) {
+      return getHash();
+    }
+    else {
+      var match = window.location.href.match(/page=([^&]*)/);
+      return match ? match[1] : '';
+    }
+  }
 };

data/app/assets/javascripts/pageflow/page_types/audio.js

@@ -26,7 +26,9 @@ pageflow.pageType.register('audio', _.extend({
     this.audioPlayer.readyPromise.then(function() {
       that.audioPlayer.volume(pageflow.settings.get('volume'));
       that.listenTo(pageflow.settings, "change:volume", function(model, value) {
-        that.fadeSound(that.audioPlayer, value, 40);
+        that.audioPlayer.loadedPromise.then(function() {
+          that.fadeSound(that.audioPlayer, value, 40);
+        });
       });
     });
 
@@ -43,17 +45,22 @@ pageflow.pageType.register('audio', _.extend({
   },
 
   activated: function(pageElement, configuration) {
+    this.active = true;
     var that = this;
-    if(!pageflow.features.has('mobile platform')) {
 
+    if(!pageflow.features.has('mobile platform')) {
       if (configuration.autoplay === false) {
         that.audioPlayer.volume(pageflow.settings.get('volume'));
       } else {
         this.fadeInTimeout = setTimeout(function() {
           that.audioPlayer.readyPromise.then(function() {
-            that.audioPlayer.volume(0);
-            that.audioPlayer.play();
-            that.fadeSound(that.audioPlayer, pageflow.settings.get('volume'), 1000);
+            if (that.active) {
+              that.audioPlayer.volume(0);
+              that.audioPlayer.play();
+              that.audioPlayer.loadedPromise.then(function() {
+                that.fadeSound(that.audioPlayer, pageflow.settings.get('volume'), 1000);
+              });
+            }
           });
         }, 1000);
       }
@@ -61,8 +68,13 @@ pageflow.pageType.register('audio', _.extend({
   },
 
   deactivating: function(pageElement, configuration) {
+    this.active = false;
+    var that = this;
+
     clearTimeout(this.fadeInTimeout);
-    this.fadeSound(this.audioPlayer, 0, 400);
+    this.audioPlayer.loadedPromise.then(function() {
+      that.fadeSound(that.audioPlayer, 0, 400);
+    });
     this.stopListening();
     $('body').off('keyup');
   },

data/app/assets/javascripts/pageflow/page_types/audio_loop.js

@@ -26,27 +26,39 @@ pageflow.pageType.register('audio_loop', _.extend({
     this.audioPlayer.readyPromise.then(function() {
       that.audioPlayer.volume(pageflow.settings.get('volume'));
       that.listenTo(pageflow.settings, "change:volume", function(model, value) {
-        that.fadeSound(that.audioPlayer, value, 40);
+        that.audioPlayer.loadedPromise.then(function() {
+          that.fadeSound(that.audioPlayer, value, 40);
+        });
       });
     });
   },
 
   activated: function(pageElement, configuration) {
+    this.active = true;
     var that = this;
+
     this.fadeInTimeout = setTimeout(function() {
       that.audioPlayer.readyPromise.then(function() {
-        that.audioPlayer.volume(0);
-        that.audioPlayer.play();
-        that.fadeSound(that.audioPlayer, pageflow.settings.get('volume'), 1000);
+        if (that.active) {
+          that.audioPlayer.volume(0);
+          that.audioPlayer.play();
+          that.audioPlayer.loadedPromise.then(function() {
+            that.fadeSound(that.audioPlayer, pageflow.settings.get('volume'), 1000);
+          });
+        }
       });
     }, 1000);
   },
 
   deactivating: function(pageElement, configuration) {
+    this.active = false;
+    var that = this;
+
     clearTimeout(this.fadeInTimeout);
-    this.fadeSound(this.audioPlayer, 0, 400);
+    this.audioPlayer.loadedPromise.then(function() {
+      that.fadeSound(that.audioPlayer, 0, 400);
+    });
     this.stopListening();
-    $('body').off('keyup');
   },
 
   deactivated: function(pageElement, configuration) {
@@ -81,7 +93,7 @@ pageflow.pageType.register('audio_loop', _.extend({
   },
 
   _ensureAudioPlayer: function(pageElement) {
-    this.audioPlayer = this.audioPlayer || pageflow.AudioPlayer.fromScriptTag(pageElement.find('script[data-audio]'));
+    this.audioPlayer = this.audioPlayer || pageflow.AudioPlayer.fromScriptTag(pageElement.find('script[data-audio]'), {loop: true});
 
     pageElement.find('.vjs-controls').playerControls({
       player: this.audioPlayer