pageflow 13.0.0.beta5 → 13.0.0.beta6

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

@@ -40,25 +40,25 @@ pageflow.Configuration = Backbone.Model.extend({
   },
 
   getFilePosition: function(attribute, coord) {
-    var propertyName = this._filePositionProperty(attribute, coord);
+    var propertyName = this.filePositionProperty(attribute, coord);
     return this.has(propertyName) ? this.get(propertyName) : 50;
   },
 
   setFilePosition: function(attribute, coord, value) {
-    var propertyName = this._filePositionProperty(attribute, coord);
+    var propertyName = this.filePositionProperty(attribute, coord);
     this.set(propertyName, value);
   },
 
   setFilePositions: function(attribute, x, y) {
     var attributes = {};
 
-    attributes[this._filePositionProperty(attribute, 'x')] = x;
-    attributes[this._filePositionProperty(attribute, 'y')] = y;
+    attributes[this.filePositionProperty(attribute, 'x')] = x;
+    attributes[this.filePositionProperty(attribute, 'y')] = y;
 
     this.set(attributes);
   },
 
-  _filePositionProperty: function(attribute, coord) {
+  filePositionProperty: function(attribute, coord) {
     return attribute.replace(/_id$/, '_' + coord);
   },
 

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

@@ -3,4 +3,12 @@
   </div>
   <div class="slider vertical">
   </div>
+  <div class="percent horizontal">
+    <input type="number" min="0" max="100">
+    %
+  </div>
+  <div class="percent vertical">
+    <input type="number" min="0" max="100">
+    %
+  </div>
 </div>

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

@@ -6,7 +6,10 @@ pageflow.BackgroundPositioningSlidersView = Backbone.Marionette.ItemView.extend(
     container: '.container',
 
     sliderHorizontal: '.horizontal.slider',
-    sliderVertical: '.vertical.slider'
+    sliderVertical: '.vertical.slider',
+
+    inputHorizontal: '.percent.horizontal input',
+    inputVertical: '.percent.vertical input'
   },
 
   events: {
@@ -34,6 +37,10 @@ pageflow.BackgroundPositioningSlidersView = Backbone.Marionette.ItemView.extend(
     }
   },
 
+  modelEvents: {
+    change: 'update'
+  },
+
   onRender: function() {
     var view = this;
     var file = this.model.getReference(this.options.propertyName, this.options.filesCollection),
@@ -43,52 +50,59 @@ pageflow.BackgroundPositioningSlidersView = Backbone.Marionette.ItemView.extend(
 
     this.ui.sliderVertical.slider({
       orientation: 'vertical',
-      step: 0.01,
-      value: 100 - this.model.getFilePosition(this.options.propertyName, 'y'),
 
-      change: function() {
-        view.save();
+      change: function(event, ui) {
+        view.save('y', 100 - ui.value);
       },
 
       slide: function(event, ui) {
-        view.save({y: ui.value});
+        view.save('y', 100 - ui.value);
       }
     });
 
     this.ui.sliderHorizontal.slider({
       orientation: 'horizontal',
-      step: 0.01,
-      value: this.model.getFilePosition(this.options.propertyName, 'x'),
 
-      change: function() {
-        view.save();
+      change: function(event, ui) {
+        view.save('x', ui.value);
       },
 
       slide: function(event, ui) {
-        view.save({y: ui.value});
+        view.save('x', ui.value);
       }
     });
+
+    this.ui.inputVertical.on('change', function() {
+      view.save('y', $(this).val());
+    });
+
+    this.ui.inputHorizontal.on('change', function() {
+      view.save('x', $(this).val());
+    });
+
+    this.update();
   },
 
-  onShow: function() {
+  update: function() {
+    var x = this.model.getFilePosition(this.options.propertyName, 'x');
+    var y = this.model.getFilePosition(this.options.propertyName, 'y');
+
+    this.ui.sliderVertical.slider('value', 100 - y);
+    this.ui.sliderHorizontal.slider('value', x);
+
+    this.ui.inputVertical.val(y);
+    this.ui.inputHorizontal.val(x);
   },
 
   saveFromEvent: function(event) {
     var x = event.pageX - this.ui.container.offset().left;
     var y = event.pageY - this.ui.container.offset().top;
 
-    this.ui.sliderHorizontal.slider('value', x / this.ui.container.width() * 100);
-    this.ui.sliderVertical.slider('value', (1 - y / this.ui.container.height()) * 100);
-    this.save();
+    this.save('x', Math.round(x / this.ui.container.width() * 100));
+    this.save('y', Math.round(y / this.ui.container.width() * 100));
   },
 
-  save: function(options) {
-    options = options || {};
-
-    var x = x in options ? options.x : this.ui.sliderHorizontal.slider('value');
-    var y = y in options ? options.y : 100 - this.ui.sliderVertical.slider('value');
-
-    this.model.setFilePosition(this.options.propertyName, 'x', x);
-    this.model.setFilePosition(this.options.propertyName, 'y', y);
+  save: function(coord, value) {
+    this.model.setFilePosition(this.options.propertyName, coord, Math.min(100, Math.max(0, value)));
   }
 });

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

@@ -63,5 +63,5 @@ pageflow.BackgroundPositioningView = Backbone.Marionette.ItemView.extend({
 });
 
 pageflow.BackgroundPositioningView.open = function(options) {
-  pageflow.app.dialogRegion.show(new pageflow.BackgroundPositioningView(options).render());
-};
+  pageflow.app.dialogRegion.show(new pageflow.BackgroundPositioningView(options));
+};

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

@@ -19,7 +19,7 @@ pageflow.ConfigurationEditorView.register('video', {
       });
       this.input('mobile_poster_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,
-        positioning: false
+        positioning: true
       });
       this.input('thumbnail_image_id', pageflow.FileInputView, {
         collection: pageflow.imageFiles,

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

@@ -8,6 +8,15 @@ pageflow.EditWidgetView = Backbone.Marionette.ItemView.extend({
     }
   },
 
+  initialize: function() {
+    this.model.set('editing', true);
+  },
+
+  onClose: function() {
+    Backbone.Marionette.ItemView.prototype.onClose.call(this);
+    this.model.set('editing', false);
+  },
+
   onRender: function() {
     var configurationEditor = this.model.widgetType().createConfigurationEditorView({
       model: this.model.configuration,

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

@@ -0,0 +1,8 @@
+pageflow.InfoBoxView = Backbone.Marionette.View.extend({
+  className: 'info_box',
+
+  render: function() {
+    this.$el.text(this.options.text);
+    return this;
+  }
+});

data/app/assets/javascripts/pageflow/editor/views/widget_types/cookie_notice_bar.js

@@ -0,0 +1,15 @@
+pageflow.editor.widgetTypes.registerRole('cookie_notice', {
+  isOptional: true
+});
+
+pageflow.editor.widgetTypes.register('cookie_notice_bar', {
+  configurationEditorView: pageflow.ConfigurationEditorView.extend({
+    configure: function() {
+      this.tab('cookie_notice_bar', function() {
+        this.view(pageflow.InfoBoxView, {
+          text: I18n.t('pageflow.editor.cookie_notice_bar.widget_type_info_box_text')
+        });
+      });
+    }
+  })
+});

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

@@ -1,6 +1,6 @@
 pageflow.SeedEntryData = pageflow.EntryData.extend({
   initialize: function(options) {
-    this.theming = options.theming;
+    this.theme = options.theme;
 
     this.storylineConfigurations = _(options.storylines).reduce(function(memo, storyline) {
       memo[storyline.id] = storyline.configuration;
@@ -40,7 +40,7 @@ pageflow.SeedEntryData = pageflow.EntryData.extend({
   },
 
   getThemingOption: function(name) {
-    return this.theming[name];
+    return this.theme[name];
   },
 
   getChapterConfiguration: function(id) {
@@ -70,4 +70,4 @@ pageflow.SeedEntryData = pageflow.EntryData.extend({
   getStorylineIdByChapterId: function(id) {
     return this.storylineIdsByChapterIds[id];
   }
-});
+});

data/app/assets/javascripts/pageflow/slideshow/adjacent_preparer.js

@@ -1,8 +1,10 @@
 //= require ./adjacent_pages
 
 pageflow.AdjacentPreparer = pageflow.Object.extend({
-  initialize: function(adjacentPages) {
+  initialize: function(adjacentPages, settings, debugMode) {
     this.adjacentPages = adjacentPages;
+    this.settings = settings || new Backbone.Model();
+    this.debugMode = debugMode;
   },
 
   attach: function(events) {
@@ -17,7 +19,10 @@ pageflow.AdjacentPreparer = pageflow.Object.extend({
   },
 
   prepareAdjacent: function(page) {
-    var adjacentPages = this.adjacentPages.of(page);
+    var max = this.settings.has('max_prepared_adjacent_pages') && this.debugMode ?
+              this.settings.get('max_prepared_adjacent_pages') :
+              5;
+    var adjacentPages = _.first(this.adjacentPages.of(page), max);
     var noLongerPreparedPages = _.difference(this.lastPreparedPages, adjacentPages, [page]);
     var newAdjacentPages = _.difference(adjacentPages, this.lastPreparedPages);
 
@@ -41,6 +46,8 @@ pageflow.AdjacentPreparer.create = function(pages, scrollNavigator) {
     new pageflow.AdjacentPages(
       pages,
       scrollNavigator
-    )
+    ),
+    pageflow.settings,
+    pageflow.debugMode()
   );
-};
+};

data/app/assets/javascripts/pageflow/ui/views/configuration_editor_view.js

@@ -3,7 +3,7 @@ pageflow.ConfigurationEditorView = Backbone.Marionette.View.extend({
 
   initialize: function() {
     this.tabsView = new pageflow.TabsView({
-      i18n: 'pageflow.ui.configuration_editor.tabs',
+      i18n: this.options.tabTranslationKeyPrefix || 'pageflow.ui.configuration_editor.tabs',
       defaultTab: this.options.tab
     });
     this.configure();
@@ -40,4 +40,4 @@ _.extend(pageflow.ConfigurationEditorView, {
   register: function(pageTypeName, prototype) {
     this.repository[pageTypeName] = pageflow.ConfigurationEditorView.extend(prototype);
   }
-});
+});

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

@@ -4,6 +4,8 @@ pageflow.Visited = function(entryId, pages, events, cookies) {
   var unvisitedPages = [];
 
   function init() {
+    pageflow.cookieNotice.request();
+
     if (!cookies.hasItem(cookieName)) {
       storeVisitedPageIds(getAllIds());
     }

data/app/assets/stylesheets/pageflow/admin.scss

@@ -1,5 +1,10 @@
 @import "active_admin/searchable_select";
 
+// Needs to be imported before bourbon which redefines functions used
+// by active admin mixins (i.e. `linear-gradient` used by
+// `light-button`)
+@import "pageflow/admin/active_admin_patches";
+
 @import "bourbon";
 @import "pageflow/mixins";
 
@@ -19,25 +24,3 @@
 @import "pageflow/admin/status_tags";
 @import "pageflow/admin/tabs_view";
 @import "pageflow/admin/tooltip_bubble";
-
-#wrapper {
-  overflow: hidden;
-  position: relative;
-}
-
-.action_items {
-  form, div {
-    display: inline;
-  }
-
-  input[type="submit"] {
-    @include light-button;
-    padding: 12px 17px 10px;
-    span.icon { vertical-align: bottom; margin-right: 4px;}
-    margin: 0px;
-  }
-}
-
-.blank_slate_container {
-  margin: 10px 0;
-}

data/app/assets/stylesheets/pageflow/admin/active_admin_patches.scss

@@ -0,0 +1,21 @@
+#wrapper {
+  overflow: hidden;
+  position: relative;
+}
+
+.action_items {
+  form,
+  div {
+    display: inline;
+  }
+
+  input[type="submit"] {
+    @include light-button;
+    padding: 12px 17px 10px;
+    margin: 0;
+  }
+}
+
+.blank_slate_container {
+  margin: 10px 0;
+}

data/app/assets/stylesheets/pageflow/editor/background_positioning.scss

@@ -47,7 +47,7 @@
 
   .wrapper {
     text-align: center;
-    margin: 20px;
+    margin: 35px;
   }
 
   .previews {
@@ -96,6 +96,7 @@
   .slider {
     position: absolute;
     border: none;
+    background: #ddd;
 
     a {
       @include background-icon-center($font-size: 20px);
@@ -113,10 +114,10 @@
     }
 
     &.horizontal {
-      bottom: 0;
-      left: 40px;
-      right: 40px;
-      height: 0;
+      bottom: -10px;
+      left: 9px;
+      right: 11px;
+      height: 2px;
 
       a {
         @include transform(rotate(90deg));
@@ -126,10 +127,10 @@
     }
 
     &.vertical {
-      right: 0;
-      top: 40px;
-      bottom: 40px;
-      width: 0;
+      right: -10px;
+      top: 12px;
+      bottom: 11px;
+      width: 2px;
       height: auto;
 
       a {
@@ -139,6 +140,29 @@
     }
   }
 
+  .percent {
+    position: absolute;
+    font-size: 12px;
+    white-space: nowrap;
+
+    input {
+      width: 45px;
+      height: 25px;
+      box-sizing: border-box;
+      text-align: right;
+    }
+
+    &.horizontal {
+      left: -65px;
+      bottom: -26px;
+    }
+
+    &.vertical {
+      left: 100%;
+      top: -30px;
+    }
+  }
+
   a.save {
     @include check-icon;
     @include icon-button;
@@ -147,4 +171,4 @@
   a.close {
     @include icon-button(#888);
   }
-}
+}

data/app/assets/stylesheets/pageflow/page_types/video.scss

@@ -1,4 +1,5 @@
 @import "./video/content_hiding";
+@import "./video/mobile_poster";
 
 .has_native_video_player .page .videoPage .videoWrapper {
   margin-right: 0;
@@ -114,7 +115,3 @@
 .js .non_js_video {
   display: none;
 }
-
-.has_no_native_video_player .videoPage .background_image {
-  display: none;
-}