pageflow 12.1.0 → 12.2.0

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

@@ -33,7 +33,6 @@ pageflow.app.addInitializer(function(options) {
 
   pageflow.pages.sort();
 
-  // TODO
   pageflow.storylines.on('sort', _.debounce(function() {
     pageflow.storylines.saveOrder();
   }, 100));

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

@@ -67,7 +67,6 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
     pageflow.events.trigger('page:update', this.model);
 
     this.refreshScroller();
-    this.ensureTargetBlankForContentLinks();
     this.updateChapterBeginningClass();
   },
 
@@ -88,10 +87,6 @@ pageflow.PagePreviewView = Backbone.Marionette.View.extend({
     this.$el.page('refreshScroller');
   },
 
-  ensureTargetBlankForContentLinks: function() {
-    pageflow.links.ensureTargetBlankForContentLinks(this.el);
-  },
-
   initEmbeddedViews: function() {
     var view = this;
 

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

@@ -2,7 +2,6 @@ pageflow.links = {
   setup: function() {
     this.ensureClickOnEnterKeyPress();
     this.setupContentSkipLinks();
-    this.ensureTargetBlankForContentLinks();
   },
 
   ensureClickOnEnterKeyPress: function() {
@@ -25,11 +24,5 @@ pageflow.links = {
       e.preventDefault();
       return false;
     });
-  },
-
-  // There was a time when the rich text editor did not add target
-  // attributes to inline links even though it should have.
-  ensureTargetBlankForContentLinks: function(context) {
-    $('.contentText p a', context).attr('target', '_blank');
   }
 };

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

@@ -8,6 +8,8 @@ pageflow.ready = new $.Deferred(function(readyDeferred) {
         readyDeferred.resolve();
       });
 
+      pageflow.Visited.setup();
+
       slideshow.each(function() {
         pageflow.events.trigger('seed:loaded');
 

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

@@ -1,5 +1,6 @@
 //=require ./slideshow/atmo
 //=require ./slideshow/lazy_page_widget
+//=require ./slideshow/page_split_layout
 //=require ./slideshow/page_widget
 //=require ./slideshow/scroller_widget
 //=require ./slideshow/scroll_indicator

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

@@ -2,18 +2,23 @@
   $.widget('pageflow.hideTextOnSwipe', {
     _create: function() {
       this.element.swipeGesture({
-        orientation: 'x'
+        orientation: 'x',
+        eventTargetSelector: this.options.eventTargetSelector
       });
 
       this.element.on('swipegestureleft', function() {
         pageflow.hideText.activate();
       });
 
-      this.element.on('touchstart MSPointerDown pointerdown mousedown', function() {
-        if (pageflow.hideText.isActive()) {
-          pageflow.hideText.deactivate();
+      this.element.on(
+        'touchstart MSPointerDown pointerdown mousedown',
+        this.options.eventTargetSelector,
+        function() {
+          if (pageflow.hideText.isActive()) {
+            pageflow.hideText.deactivate();
+          }
         }
-      });
+      );
 
       this.element.on('scrollermove', function() {
         if (pageflow.hideText.isActive()) {

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

@@ -0,0 +1,74 @@
+/**
+ * Utility functions for page types that dynamically switch to a two
+ * column layout where some kind of embed is displayed next to the
+ * text (i.e. `pageflow-chart` and `pageflow-embedded-video`).
+ *
+ * Works closely with the `page-with_split_layout` CSS class (see
+ * `pageflow/themes/default/page/line_lengths.scss`).
+ *
+ * @since 12.2
+ */
+pageflow.pageSplitLayout = (function() {
+  return {
+    /**
+     * Determine if the page is wide enough to display two columns.
+     *
+     * @memberof pageflow.pageSplitLayout
+     */
+    pageIsWideEnough: function(pageElement) {
+      var pageClientRect = pageElement[0].getBoundingClientRect();
+      var contentClientRect = getContentClientRect(pageElement, pageClientRect);
+
+      var spaceRightFromTitle = pageClientRect.right - contentClientRect.right;
+      var spaceLeftFromTitle = contentClientRect.left - pageClientRect.left;
+
+      var leftPositionedEmbedWidth = pageClientRect.width * 0.51;
+      var rightPositionedEmbedWidth = pageClientRect.width * 0.55;
+
+      return (spaceLeftFromTitle >= leftPositionedEmbedWidth ||
+              spaceRightFromTitle >= rightPositionedEmbedWidth);
+    }
+  };
+
+  function getContentClientRect(pageElement, pageClientRect) {
+    var pageTitle = pageElement.find('.page_header .title');
+    var contentText = pageElement.find('.contentText p');
+
+    var pageTitleClientRect = pageTitle[0].getBoundingClientRect();
+    var contentTextClientRect = contentText[0].getBoundingClientRect();
+
+    var contentRight;
+    var contentLeft;
+
+    if (isTitleHidden(pageTitleClientRect)) {
+      contentRight = contentTextClientRect.right;
+      contentLeft = contentTextClientRect.left;
+    }
+    else {
+      contentRight = Math.max(pageTitleClientRect.right, contentTextClientRect.right);
+      contentLeft = pageTitleClientRect.left;
+    }
+
+    var contentTranslation = getContentTranslationCausedByHiddenText(pageElement,
+                                                                     pageClientRect);
+
+    return {
+      right: contentRight - contentTranslation,
+      left: contentLeft - contentTranslation
+    };
+  }
+
+  function isTitleHidden(pageTitleClientRect) {
+    return pageTitleClientRect.width === 0;
+  }
+
+  function getContentTranslationCausedByHiddenText(pageElement, pageClientRect) {
+    var contentWrapper = pageElement.find('.contentWrapper');
+    var contentWrapperClientRect = contentWrapper[0].getBoundingClientRect();
+
+    var contentWrapperMarginInsidePage = contentWrapper[0].offsetLeft;
+    var nonTranslatedContentWrapperLeft = pageClientRect.left + contentWrapperMarginInsidePage;
+
+    return contentWrapperClientRect.left - nonTranslatedContentWrapperLeft;
+  }
+}());

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

@@ -6,6 +6,7 @@
       this.index = this.options.index;
 
       this._setupNearBoundaryCssClasses();
+      this._setupContentLinkTargetHandling();
 
       this.reinit();
     },
@@ -185,7 +186,9 @@
     _setupHideTextOnSwipe: function() {
       if (pageflow.entryData.getThemingOption('hide_text_on_swipe') &&
           !this.pageType.noHideTextOnSwipe) {
-        this.content.hideTextOnSwipe();
+        this.element.hideTextOnSwipe({
+          eventTargetSelector: '.content > .scroller'
+        });
       }
     },
 
@@ -201,6 +204,27 @@
           element.removeClass('is_near_' + boundary);
         });
       });
+    },
+
+    _setupContentLinkTargetHandling: function() {
+      this._on({
+        'click .contentText p a': function(event) {
+          var href = $(event.currentTarget).attr('href');
+
+          if (href[0] === '#') {
+            pageflow.slides.goToByPermaId(href.substr(1));
+          }
+          else {
+            // There was a time when the rich text editor did not add
+            // target attributes to inline links even though it should
+            // have. Ensure all content links to external urls open in
+            // new tab.
+            window.open(href, '_blank');
+          }
+
+          event.preventDefault();
+        }
+      });
     }
   });
 }(jQuery));

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

@@ -11,7 +11,9 @@
         maxDuration: 500
       }, this.options);
 
-      this.element.on('touchstart MSPointerDown pointerdown', _.bind(function(event) {
+      var selector = this.options.eventTargetSelector;
+
+      this.element.on('touchstart MSPointerDown pointerdown', selector, _.bind(function(event) {
         if (isNonTouchPointer(event)) { return; }
         var point = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
 
@@ -24,7 +26,7 @@
         startTime = new Date().getTime();
       }, this));
 
-      this.element.on('touchmove MSPointerMove pointermove', _.bind(function(event) {
+      this.element.on('touchmove MSPointerMove pointermove', selector, _.bind(function(event) {
         if (isNonTouchPointer(event)) { return; }
         var point = event.originalEvent.touches ? event.originalEvent.touches[0] : event.originalEvent;
 
@@ -32,7 +34,7 @@
         distY = point.pageY - startY;
       }, this));
 
-      this.element.on('touchend MSPointerUp pointerup', _.bind(function(event) {
+      this.element.on('touchend MSPointerUp pointerup', selector, _.bind(function(event) {
         if (isNonTouchPointer(event)) { return; }
         var elapsedTime = new Date().getTime() - startTime;
 

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

@@ -1,6 +1,7 @@
 //= require_self
 
 //= require wysihtml5x-toolbar
+//= require jquery.minicolors
 
 //= require i18n
 //= require i18n/translations

data/app/assets/javascripts/pageflow/ui/templates/inputs/text_area_input.jst.ejs

@@ -4,7 +4,7 @@
 </label>
 
 <!-- inline style for wysihtml5 to pick up -->
-<textarea style="width: 100%;"></textarea>
+<textarea style="width: 100%;" dir="auto"></textarea>
 
 <div class="toolbar">
   <a data-wysihtml5-command="bold" title="<%= I18n.t('pageflow.ui.templates.inputs.text_area_input.bold') %>"></a>

data/app/assets/javascripts/pageflow/ui/templates/inputs/text_input.jst.ejs

@@ -2,4 +2,4 @@
   <span class="name"></span>
   <span class="inline_help"></span>
 </label>
-<input type="text" />
+<input type="text" dir="auto" />

data/app/assets/javascripts/pageflow/ui/views/inputs/color_input_view.js

@@ -0,0 +1,105 @@
+/**
+ * Input view for a color value in hex representation.
+ *
+ * @param {string|function} [options.defaultValue]
+ *   Color value to display by default. The corresponding value is not
+ *   stored in the model. Selecting the default value when a different
+ *   value was set before, unsets the attribute in the model.
+ *
+ * @param {string} [options.defaultValueBinding]
+ *   Name of an attribute the default value depends on. If a function
+ *   is used as defaultValue option, it will be passed the value of the
+ *   defaultValueBinding attribute each time it changes. If no
+ *   defaultValue option is set, the value of the defaultValueBinding
+ *   attribute will be used as default value.
+ *
+ * @param {string[]} [options.swatches]
+ *   Preset color values to be displayed inside the picker drop
+ *   down. The default value, if present, is always used as the
+ *   first swatch automatically.
+ *
+ * @see {@link module:pageflow/ui.pageflow.inputView pageflow.inputView} for further options
+ * @class
+ * @memberof module:pageflow/ui
+ */
+pageflow.ColorInputView = Backbone.Marionette.ItemView.extend({
+  mixins: [pageflow.inputView],
+
+  template: 'pageflow/ui/templates/inputs/text_input',
+  className: 'color_input',
+
+  ui: {
+    input: 'input'
+  },
+
+  events: {
+    'mousedown': 'refreshPicker'
+  },
+
+  onRender: function() {
+    this.ui.input.minicolors({
+      changeDelay: 200,
+      change: _.bind(function(color) {
+        if (color === this.defaultValue()) {
+          this.model.unset(this.options.propertyName);
+        }
+        else {
+          this.model.set(this.options.propertyName, color);
+        }
+      }, this)
+    });
+
+    this.listenTo(this.model, 'change:' + this.options.propertyName, this.load);
+
+    if (this.options.defaultValueBinding) {
+      this.listenTo(this.model, 'change:' + this.options.defaultValueBinding, this.updateSettings);
+    }
+
+    this.updateSettings();
+  },
+
+  updateSettings: function() {
+    this.ui.input.minicolors('settings', {
+      defaultValue: this.defaultValue(),
+      swatches: this.getSwatches()
+    });
+
+    this.load();
+  },
+
+  load: function() {
+    this.ui.input.minicolors('value',
+                             this.model.get(this.options.propertyName) || this.defaultValue());
+    this.$el.toggleClass('is_default', !this.model.has(this.options.propertyName));
+  },
+
+  refreshPicker: function() {
+    this.ui.input.minicolors('value', {});
+  },
+
+  getSwatches: function() {
+    return _.chain([this.defaultValue(), this.options.swatches])
+      .flatten()
+      .uniq()
+      .compact()
+      .value();
+  },
+
+  defaultValue: function () {
+    var bindingValue;
+
+    if (this.options.defaultValueBinding) {
+      bindingValue = this.model.get(this.options.defaultValueBinding);
+    }
+
+    if (typeof this.options.defaultValue === 'function') {
+      return this.options.defaultValue(bindingValue);
+    }
+    else if ('defaultValue' in this.options) {
+      return this.options.defaultValue;
+    }
+    else {
+      return bindingValue;
+    }
+  }
+});

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

@@ -1,35 +1,55 @@
-pageflow.visited = (function() {
+pageflow.Visited = function(entryId, pages, events, cookies) {
+  var cookieName = '_pageflow_visited';
 
-  var name, cookies = pageflow.cookies;
-
-  $(function() {
-    name = '_pageflow_' + pageflow.entryId + '_visited';
-
-    if (pageflow.visited.enabled) {
-      init();
-    }
-  });
+  var unvisitedPages = [];
 
   function init() {
-    if (!cookies.hasItem(name)) {
-      cookies.setItem(name, _getAllIds(), Infinity);
+    if (!cookies.hasItem(cookieName)) {
+      storeVisitedPageIds(getAllIds());
+    }
+    else {
+      var visitedIds = getVisitedPageIds();
+      unvisitedPages = _.difference(getAllIds(), visitedIds);
     }
 
-    pageflow.ready.then(function() {
-      pageflow.slides.on('pageactivate', function (e) {
-        var id = e.target.getAttribute('id');
-        var ids = _getCookieIds();
+    events.on('page:change', function (page) {
+      var id = page.getPermaId();
+      var ids = getVisitedPageIds();
 
-        if (ids.indexOf(id) < 0) {
-          ids.push(id);
-        }
+      if (ids.indexOf(id) < 0) {
+        ids.push(id);
+      }
 
-        cookies.setItem(name, ids, Infinity);
-      });
+      storeVisitedPageIds(ids);
+    });
+  }
+
+  function migrateLegacyCookie() {
+    var legacyCookieName = '_pageflow_' + entryId + '_visited';
+
+    if (cookies.hasItem(legacyCookieName)) {
+      var ids = getCookieIds(legacyCookieName);
+      storeVisitedPageIds(_.uniq(ids));
+
+      cookies.removeItem(legacyCookieName);
+    }
+  }
+
+  function getAllIds() {
+    return pages.map(function(page) {
+      return page.perma_id;
     });
   }
 
-  function _getCookieIds() {
+  function storeVisitedPageIds(ids) {
+    cookies.setItem(cookieName, ids, Infinity, location.pathname);
+  }
+
+  function getVisitedPageIds() {
+    return getCookieIds(cookieName);
+  }
+
+  function getCookieIds(name) {
     if (cookies.hasItem(name) && !!cookies.getItem(name)) {
       return cookies.getItem(name).split(',').map(function(id) {
         return parseInt(id, 10);
@@ -38,19 +58,27 @@ pageflow.visited = (function() {
     return [];
   }
 
-  function _getAllIds() {
-    return pageflow.pages.map(function(page) {
-      return page.perma_id;
-    });
-  }
-
   return {
+    init: function() {
+      migrateLegacyCookie();
+      init();
+    },
+
     getUnvisitedPages: function() {
-      if (pageflow.visited.enabled) {
-        var visitedIds = _getCookieIds();
-        return visitedIds.length ? _.difference(_getAllIds(), visitedIds) : visitedIds;
-      }
-      return [];
+      return unvisitedPages;
     }
   };
-}());
+};
+
+pageflow.Visited.setup = function() {
+  pageflow.visited = new pageflow.Visited(
+    pageflow.entryId,
+    pageflow.pages,
+    pageflow.events,
+    pageflow.cookies
+  );
+
+  if (pageflow.Visited.enabled) {
+    pageflow.visited.init();
+  }
+};