pageflow 0.4.0 → 0.5.0

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

@@ -37,47 +37,31 @@ pageflow.FilesExplorerView = Backbone.Marionette.ItemView.extend({
       selection: this.selection
     }));
 
-
     this.tabsView = new pageflow.TabsView({
       model: this.model,
       i18n: 'editor.files.tabs',
       defaultTab: this.options.tabName
     });
 
-    this.tab('image_files', {
-      collectionName: 'imageFiles',
-      itemView: pageflow.ExplorerFileItemView
-    });
-
-    this.tab('video_files', {
-      collectionName: 'videoFiles',
-      itemView: pageflow.ExplorerFileItemView
-    });
-
-    this.tab('audio_files', {
-      collectionName: 'audioFiles',
-      itemView: pageflow.ExplorerFileItemView
-    });
+    pageflow.editor.fileTypes.each(function(fileType) {
+      this.tab(fileType);
+    }, this);
 
     this.ui.filesPanel.append(this.subview(this.tabsView).el);
 
     this.ui.okButton.prop('disabled', true);
   },
 
-  tab: function(name, options) {
-    this.tabsView.tab(name, _.bind(function() {
-      var collection = this._collection(options.collectionName),
-      disabledIds = [];
-
-      if (collection.name) { // collection.name indicates *FilesCollection
-        disabledIds = pageflow.entry.getFileCollection(collection.fileType()).pluck('id');
-      }
+  tab: function(fileType) {
+    this.tabsView.tab(fileType.collectionName, _.bind(function() {
+      var collection = this._collection(fileType);
+      var disabledIds = pageflow.entry.getFileCollection(fileType).pluck('id');
 
       return new pageflow.CollectionView({
         tagName: 'ul',
         className: 'files_gallery',
         collection: collection,
-        itemViewConstructor: options.itemView,
+        itemViewConstructor: pageflow.ExplorerFileItemView,
         itemViewOptions: {
           selection: this.selection,
           disabledIds: disabledIds
@@ -87,12 +71,12 @@ pageflow.FilesExplorerView = Backbone.Marionette.ItemView.extend({
     }, this));
   },
 
-  _collection: function(collectionName) {
+  _collection: function(fileType) {
     var collection,
         entry = this.selection.get('entry');
 
     if (entry) {
-      collection = entry[collectionName];
+      collection = entry.getFileCollection(fileType);
       collection.fetch();
     } else {
       collection = new Backbone.Collection();
@@ -107,23 +91,7 @@ pageflow.FilesExplorerView = Backbone.Marionette.ItemView.extend({
   },
 
   _selectedFile: function() {
-    var sel = this.selection,
-        file;
-
-    if ((file = sel.get('image_file'))) {
-      file.set('typeName', 'Pageflow::ImageFile');
-      return file;
-    }
-
-    if ((file = sel.get('audio_file'))) {
-      file.set('typeName', 'Pageflow::AudioFile');
-      return file;
-    }
-
-    if ((file = sel.get('video_file'))) {
-      file.set('typeName', 'Pageflow::VideoFile');
-      return file;
-    }
+    return this.selection.get('file');
   }
 });
 

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

@@ -35,33 +35,23 @@ pageflow.FilesView = Backbone.Marionette.ItemView.extend({
       defaultTab: this.options.tabName
     });
 
-    this.tab('image_files', {
-      collection: this.model.imageFiles,
-      itemView: pageflow.ImageFileItemView
-    });
-
-    this.tab('video_files', {
-      collection: this.model.videoFiles,
-      itemView: pageflow.VideoFileItemView
-    });
-
-    this.tab('audio_files', {
-      collection: this.model.audioFiles,
-      itemView: pageflow.AudioFileItemView
-    });
+    pageflow.editor.fileTypes.each(function(fileType) {
+      this.tab(fileType);
+    }, this);
 
     this.$el.append(this.subview(this.tabsView).el);
   },
 
-  tab: function(name, options) {
-    this.tabsView.tab(name, _.bind(function() {
+  tab: function(fileType) {
+    this.tabsView.tab(fileType.collectionName, _.bind(function() {
       return this.subview(new pageflow.CollectionView({
         tagName: 'ul',
         className: 'files expandable',
-        collection: options.collection,
-        itemViewConstructor: options.itemView,
+        collection: pageflow.entry.getFileCollection(fileType),
+        itemViewConstructor: pageflow.FileItemView,
         itemViewOptions: {
-          selectionHandler: this.options.tabName === name && this.options.selectionHandler
+          metaDataAttributes: fileType.metaDataAttributes,
+          selectionHandler: this.options.tabName === fileType.collectionName && this.options.selectionHandler
         },
         blankSlateViewConstructor: Backbone.Marionette.ItemView.extend({
           template: 'templates/files_blank_slate'
@@ -69,8 +59,8 @@ pageflow.FilesView = Backbone.Marionette.ItemView.extend({
       }));
     }, this));
 
-    this.listenTo(this.model, 'change:uploading_' + name +'_count', function(model, value) {
-      this.tabsView.toggleSpinnerOnTab(name, value > 0);
+    this.listenTo(this.model, 'change:uploading_' + fileType.collectionName +'_count', function(model, value) {
+      this.tabsView.toggleSpinnerOnTab(fileType.collectionName, value > 0);
     });
   },
 

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

@@ -57,7 +57,7 @@ pageflow.inputView = {
     }
 
     function updateVisible(model, value) {
-      view.$el.toggle(!!value);
+      view.$el.toggle(view.options.visibleBindingValue ? value === view.options.visibleBindingValue : !!value);
     }
   }
 };

data/app/assets/javascripts/pageflow/editor/views/inputs/file_input_view.js

@@ -45,6 +45,12 @@ pageflow.FileInputView = Backbone.Marionette.ItemView.extend({
     this.options = _.extend({
       imagePositioning: true
     }, this.options);
+
+    if (typeof this.options.collection === 'string') {
+      this.options.collection = pageflow.entry.getFileCollection(
+        pageflow.editor.fileTypes.findByCollectionName(this.options.collection)
+      );
+    }
   },
 
   onRender: function() {

data/app/assets/javascripts/pageflow/editor/views/inputs/select_input_view.js

@@ -47,6 +47,11 @@ pageflow.SelectInputView = Backbone.Marionette.ItemView.extend({
     }, this);
 
     this.load();
+
+    if (this.options.ensureValueDefined && !this.ui.select.val()) {
+      this.ui.select.val(this.options.values[0]);
+      this.save();
+    }
   },
 
   save: function() {

data/app/assets/javascripts/pageflow/editor/views/mixins/selectable_view.js

@@ -1,19 +1,21 @@
 pageflow.selectableView = {
   initialize: function() {
-    this.listenTo(this.options.selection, 'change:' + this.model.modelName, function(selection, selectedModel) {
+    this.selectionAttribute = this.selectionAttribute || this.model.modelName;
+
+    this.listenTo(this.options.selection, 'change:' + this.selectionAttribute, function(selection, selectedModel) {
       this.$el.toggleClass('active', selectedModel === this.model);
     });
 
-    this.$el.toggleClass('active', this.options.selection.get(this.model.modelName) === this.model);
+    this.$el.toggleClass('active', this.options.selection.get(this.selectionAttribute) === this.model);
   },
 
   select: function() {
-    this.options.selection.set(this.model.modelName, this.model);
+    this.options.selection.set(this.selectionAttribute, this.model);
   },
 
   onClose: function() {
-    if (this.options.selection.get(this.model.modelName) === this.model) {
-      this.options.selection.set(this.model.modelName, null);
+    if (this.options.selection.get(this.selectionAttribute) === this.model) {
+      this.options.selection.set(this.selectionAttribute, null);
     }
   }
 };

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

@@ -20,12 +20,22 @@ pageflow.UploaderView = Backbone.Marionette.View.extend({
       dataType: 'json',
 
       add: function(event, data) {
-        data.record = pageflow.entry.addFile(data.files[0]);
-        var xhr = data.submit();
+        try {
+          data.record = pageflow.entry.addFileUpload(data.files[0]);
+          var xhr = data.submit();
 
-        that.listenTo(data.record, 'uploadCancelled', function() {
-          xhr.abort();
-        });
+          that.listenTo(data.record, 'uploadCancelled', function() {
+            xhr.abort();
+          });
+        }
+        catch(e) {
+          if (e instanceof pageflow.FileTypes.UnmatchedUploadError) {
+            pageflow.app.trigger('error', e);
+          }
+          else {
+            throw(e);
+          }
+        }
       },
 
       progress: function(event, data) {

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

@@ -99,7 +99,7 @@ pageflow.pageType.register('audio', _.extend({
   },
 
   _ensureAudioPlayer: function(pageElement) {
-    this.audioPlayer = this.audioPlayer || pageflow.AudioPlayer.fromAudioTag(pageElement.find('audio'));
+    this.audioPlayer = this.audioPlayer || pageflow.AudioPlayer.fromScriptTag(pageElement.find('script[data-audio]'));
 
     pageElement.find('.vjs-controls').playerControls({
       player: this.audioPlayer

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

@@ -0,0 +1,90 @@
+pageflow.pageType.register('audio_loop', _.extend({
+  enhance: function(pageElement, configuration) {
+    pageElement.find('.contentText').before(pageElement.find('.page_header'));
+    pageElement.find('audio').hide();
+  },
+
+  prepare: function(pageElement, configuration) {
+  },
+
+  preload: function(pageElement, configuration) {
+    return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
+  },
+
+  activating: function(pageElement, configuration) {
+    // for SkipLinks
+    $('#firstContent').attr("id","");
+    var firstContentElement = pageElement.find('*[tabindex], a');
+
+    $(firstContentElement[0]).attr('id','firstContent');
+    //
+
+    this._ensureAudioPlayer(pageElement);
+
+    var that = this;
+
+    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);
+      });
+    });
+  },
+
+  activated: function(pageElement, configuration) {
+    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);
+      });
+    }, 1000);
+  },
+
+  deactivating: function(pageElement, configuration) {
+    clearTimeout(this.fadeInTimeout);
+    this.fadeSound(this.audioPlayer, 0, 400);
+    this.stopListening();
+    $('body').off('keyup');
+  },
+
+  deactivated: function(pageElement, configuration) {
+    this.audioPlayer.pause();
+  },
+
+  update: function(pageElement, configuration) {
+    pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
+    pageElement.find('h2 .title').text(configuration.get('title') || '');
+    pageElement.find('h2 .subtitle').text(configuration.get('subtitle') || '');
+    pageElement.find('p').html(configuration.get('text') || '');
+
+    this.updateInfoBox(pageElement, configuration);
+    this.updateCommonPageCssClasses(pageElement, configuration);
+
+    pageElement.find('.shadow').css({
+      opacity: configuration.get('gradient_opacity') / 100
+    });
+
+    this._ensureAudioPlayer(pageElement);
+    this.audioPlayer.src(configuration.getAudioFileSources('audio_file_id'));
+  },
+
+
+  embeddedEditorViews: function() {
+    return {
+      '.background_image': {
+        view: pageflow.BackgroundImageEmbeddedView,
+        options: {propertyName: 'background_image_id'}
+      }
+    };
+  },
+
+  _ensureAudioPlayer: function(pageElement) {
+    this.audioPlayer = this.audioPlayer || pageflow.AudioPlayer.fromScriptTag(pageElement.find('script[data-audio]'));
+
+    pageElement.find('.vjs-controls').playerControls({
+      player: this.audioPlayer
+    });
+  }
+}, pageflow.volumeFade, pageflow.infoBox, pageflow.commonPageCssClasses));

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

@@ -163,7 +163,7 @@ pageflow.pageType.register('video', _.extend({
         // alternate poster image handling
         $("<div class='vjs-poster-mobile' style='" +
           poster.attr('style') +
-          "display:block; background-size: coverr;'></div>").appendTo(pageElement.find(".videoWrapper"));
+          "display:block; background-size: cover;'></div>").appendTo(pageElement.find(".videoWrapper"));
         poster.removeClass('vjs-poster').addClass('vjs-poster-mobile');
 
         // listening for exit fullscreen to force pausing

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

@@ -1,5 +1,5 @@
 pageflow.ready = new $.Deferred(function(readyDeferred) {
-  window.onload = function() {
+  onLoadWithTimeout(function() {
     pageflow.features.detect().then(function() {
       $('body').one('pagepreloaded', function() {
         readyDeferred.resolve();
@@ -44,5 +44,20 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
         return false; }
       );
     });
-  };
+  });
+
+  function onLoadWithTimeout(callback) {
+    var invoked = false;
+    var invokeOnce = function() {
+      clearTimeout(timeout);
+
+      if (!invoked) {
+        callback();
+        invoked = true;
+      }
+    };
+
+    var timeout = setTimeout(invokeOnce, 10000);
+    window.onload = invokeOnce;
+  }
 }).promise();

data/app/assets/javascripts/pageflow/video_player/player_buffered_patch.js

@@ -8,8 +8,8 @@ vjs.Player.prototype.buffered = function(){
 
   if (buffered && buffered.length > 0) {
     for (var i = 0; i < buffered.length; i++) {
-      if (buffered.end(i) > max) {
-        max = buffered.end(i);
+      if (getEnd(buffered, i) > max) {
+        max = getEnd(buffered, i);
       }
     }
 
@@ -21,6 +21,17 @@ vjs.Player.prototype.buffered = function(){
   }
 
   return vjs.createTimeRange(start, end);
+
+  function getEnd(buffered, i) {
+    // Firefox 32 sometimes reports negative values as start and
+    // end. If both are negative, treat difference as end time stamp.
+    if (buffered.start(i) < 0 && buffered.end(i) < 0) {
+      return buffered.end(i) - buffered.start(i);
+    }
+    else {
+      return buffered.end(i);
+    }
+  }
 };
 
 // If end is after duration return buffered percent 0

data/app/assets/stylesheets/pageflow/mixins/pageflow.css.scss

@@ -2,4 +2,13 @@
   .#{$name} .type_pictogram {
     background-image: image-url("pageflow/#{$name}_pictogram_small.png");
   }
+}
+
+@mixin pageflow-hosted-file-stage($stage-name) {
+  .editor {
+    .file_thumbnail .pictogram.#{$stage-name},
+    .file_stage_item.#{$stage-name} {
+      @content;
+    }
+  }
 }

data/app/assets/stylesheets/pageflow/mixins/shadow.css.scss

@@ -31,7 +31,7 @@
   background: linear-gradient(to right, rgba($color,0) 0%,rgba($color,1) 100%); /* W3C */
   filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str(rgba($color, 0))}', endColorstr='#{ie_hex_str(rgba($color, 1))}',GradientType=1 ); /* IE6-9 */
 
-  @include mobile {
+  @include pad_portrait {
     /* IE9 SVG, needs conditional override of 'filter' to 'none' */
     background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iNjYlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
     background: -moz-linear-gradient(left, rgba($color,0) 0%, rgba($color,0.4) 33%, rgba($color,0.8) 100%); /* FF3.6+ */
@@ -42,4 +42,15 @@
     background: linear-gradient(to right, rgba($color,0) 0%,rgba($color,0.4) 33%,rgba($color,0.8) 100%); /* W3C */
     filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str(rgba($color, 0))}', endColorstr='#{ie_hex_str(rgba($color, 1))}',GradientType=1 ); /* IE6-8 */
   }
+  @include phone {
+    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
+    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICAgIDxzdG9wIG9mZnNldD0iNjYlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuNCIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICA8L2xpbmVhckdyYWRpZW50PgogIDxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxIiBoZWlnaHQ9IjEiIGZpbGw9InVybCgjZ3JhZC11Y2dnLWdlbmVyYXRlZCkiIC8+Cjwvc3ZnPg==);
+    background: -moz-linear-gradient(left, rgba($color,0.8) 0%, rgba($color,0.4) 66%, rgba($color,0) 100%); /* FF3.6+ */
+    background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba($color,0.8)), color-stop(66%,rgba($color,0.4)), color-stop(100%,rgba($color,0))); /* Chrome,Safari4+ */
+    background: -webkit-linear-gradient(left, rgba($color,0.8) 0%,rgba($color,0.4) 66%,rgba($color,0) 100%); /* Chrome10+,Safari5.1+ */
+    background: -o-linear-gradient(left, rgba($color,0.8) 0%,rgba($color,0.4) 66%,rgba($color,0) 100%); /* Opera 11.10+ */
+    background: -ms-linear-gradient(left, rgba($color,0.8) 0%,rgba($color,0.4) 66%,rgba($color,0) 100%); /* IE10+ */
+    background: linear-gradient(to right, rgba($color,0.8) 0%,rgba($color,0.4) 66%,rgba($color,0) 100%); /* W3C */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#{ie_hex_str(rgba($color, 1))}', endColorstr='#{ie_hex_str(rgba($color, 0))}',GradientType=1 ); /* IE6-8 */
+  }
 }