pageflow 0.9.2 → 0.10.0

data/app/assets/javascripts/pageflow/ui/templates/tooltip.jst.ejs

@@ -0,0 +1,2 @@
+<span class="label">
+</span>

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

@@ -20,13 +20,17 @@ pageflow.TextAreaInputView = Backbone.Marionette.ItemView.extend({
 
     this.editor = new wysihtml5.Editor(this.ui.textarea[0], {
       toolbar: this.ui.toolbar[0],
+      autoLink: this.options.disableLinks ? 0 : 1,
       parserRules: {
         tags: {
-          u: {},
-          b: {},
-          i: {},
+          em: {unwrap: this.options.disableRichtext ? 1 : 0, rename_tag: "i"},
+          strong: {unwrap: this.options.disableRichtext ? 1 : 0, rename_tag: "b"},
+          u: {unwrap: this.options.disableRichtext ? 1 : 0},
+          b: {unwrap: this.options.disableRichtext ? 1 : 0},
+          i: {unwrap: this.options.disableRichtext ? 1 : 0},
           br: {},
           a: {
+            unwrap: this.options.disableLinks ? 1 : 0,
             check_attributes: {
               href: "href"
             },
@@ -39,6 +43,15 @@ pageflow.TextAreaInputView = Backbone.Marionette.ItemView.extend({
       }
     });
 
+    if (this.options.disableRichtext) {
+      this.ui.toolbar.find('a[data-wysihtml5-command="bold"]').hide();
+      this.ui.toolbar.find('a[data-wysihtml5-command="italic"]').hide();
+      this.ui.toolbar.find('a[data-wysihtml5-command="underline"]').hide();
+    }
+    if (this.options.disableLinks) {
+      this.ui.toolbar.find('a[data-wysihtml5-command="createLink"]').hide();
+    }
+
     this.editor.on('change', _.bind(this.save, this));
     this.editor.on('aftercommand:composer', _.bind(this.save, this));
   },
@@ -63,4 +76,4 @@ pageflow.TextAreaInputView = Backbone.Marionette.ItemView.extend({
     // we really are not IE 11.
     return isGecko && !isIE11;
   };
-}());
+}());

data/app/assets/javascripts/pageflow/ui/views/mixins/tooltip_container.js

@@ -0,0 +1,42 @@
+pageflow.tooltipContainer = {
+  events: {
+    'mouseover [data-tooltip]': function(event) {
+      if (!this.tooltip.visible) {
+        var target = $(event.target);
+        var key = target.data('tooltip');
+        var position;
+
+        if (target.data('tooltipAlign') === 'bottom left') {
+          position = {
+            left: target.position().left,
+            top: target.position().top + target.outerHeight()
+          };
+        }
+        else if (target.data('tooltipAlign') === 'bottom right') {
+          position = {
+            left: target.position().left + target.outerWidth(),
+            top: target.position().top + target.outerHeight()
+          };
+        }
+        else {
+          position = {
+            left: target.position().left + target.outerWidth(),
+            top: target.position().top + target.outerHeight() / 2
+          };
+        }
+
+        this.tooltip.show(I18n.t(key), position, {
+          align: target.data('tooltipAlign')
+        })
+      }
+    },
+
+    'mouseout [data-tooltip]': function() {
+      this.tooltip.hide();
+    }
+  },
+
+  onRender: function() {
+    this.appendSubview(this.tooltip = new pageflow.TooltipView());
+  }
+};

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

@@ -0,0 +1,49 @@
+pageflow.TooltipView = Backbone.Marionette.ItemView.extend({
+  template: 'pageflow/ui/templates/tooltip',
+  className: 'tooltip',
+
+  ui: {
+    label: '.label'
+  },
+
+  hide: function() {
+    this.visible = false;
+    clearTimeout(this.timeout);
+    this.$el.removeClass('visible');
+  },
+
+  show: function(text, position, options) {
+    options = options || {};
+    this.visible = true;
+
+    clearTimeout(this.timeout);
+
+    this.timeout = setTimeout(_.bind(function() {
+      var offsetTop;
+      var offsetLeft;
+
+      this.ui.label.text(text);
+
+      this.$el.toggleClass('align_bottom_right', options.align === 'bottom right');
+      this.$el.toggleClass('align_bottom_left', options.align === 'bottom left');
+
+      if (options.align === 'bottom right' ||
+          options.align === 'bottom left' ) {
+
+        offsetTop = 10;
+        offsetLeft = 0;
+      }
+      else {
+        offsetTop = -17;
+        offsetLeft = 10;
+      }
+
+      this.$el.css({
+        top: (position.top + offsetTop) + 'px',
+        left: (position.left + offsetLeft) + 'px'
+      });
+
+      this.$el.addClass('visible');
+    }, this), 200);
+  }
+});

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

@@ -8,13 +8,13 @@
 //= require ./video_player/src_from_options_method
 //= require ./video_player/play_button_patch
 //= require ./video_player/player_buffered_patch
-//= require ./video_player/filter_for_silk
+//= require ./video_player/filter_sources
 //= require ./video_player/lazy
 
 pageflow.VideoPlayer = function(element, options) {
   options = options || {};
 
-  element = pageflow.VideoPlayer.filterSourcesForSilkBrowser(element);
+  element = pageflow.VideoPlayer.filterSources(element);
   var player = vjs(element, options);
 
   pageflow.VideoPlayer.prebuffering(player);

data/app/assets/javascripts/pageflow/video_player/{filter_for_silk.js → filter_sources.js}

@@ -1,5 +1,5 @@
-pageflow.VideoPlayer.filterSourcesForSilkBrowser = function(playerElement) {
-  if (/\bSilk\b/.test(navigator.userAgent)) {
+pageflow.VideoPlayer.filterSources = function(playerElement) {
+  if (pageflow.browser.has('mp4 support only')) {
     // keep only mp4 source
     $(playerElement).find('source').not('source[type="video/mp4"]').remove();
 

data/app/assets/javascripts/pageflow/widgets/navigation.js

@@ -72,11 +72,6 @@
         pageLinks.off('mouseup touchend', goToPage);
       }
 
-      function closeOverview() {
-        $('.overview').removeClass("active");
-        $('.navigation_index', element).removeClass("active");
-      }
-
       function hideOverlay() {
         $(overlays).addClass('hidden').removeClass('visible');
       }
@@ -86,8 +81,6 @@
           return;
         }
         hideOverlay();
-        closeOverview();
-        $('.page .content, .scroll_indicator').removeClass('hidden');
         pageflow.slides.goToById(this.getAttribute("data-link"));
         e.preventDefault();
       }
@@ -139,16 +132,16 @@
         toggleIndicators = function () {
           if (atBoundary('down')) {
             clearInterval(scrollDownIntervalID);
-            bottomIndicator.hide().removeClass('pressed');
+            bottomIndicator.removeClass('pressed');
           }
+
           if (atBoundary('up')) {
             clearInterval(scrollUpIntervalID);
-            topIndicator.hide().removeClass('pressed');
-          }
-          if (!atBoundary('up') && !atBoundary('down')) {
-            topIndicator.show();
-            bottomIndicator.show();
+            topIndicator.removeClass('pressed');
           }
+
+          topIndicator.toggleClass('visible', !atBoundary('up'));
+          bottomIndicator.toggleClass('visible', !atBoundary('down'));
         };
 
         var keyPressHandler = function(e) {
@@ -193,7 +186,17 @@
 
         $('ul.navigation_thumbnails', element).pageNavigationList({
           scroller: scroller,
-          scrollToActive: true
+          scrollToActive: true,
+          animationDuration: 500,
+          onAnimationStart: function() {
+            element.addClass('is_animating');
+          },
+          onAnimationEnd: function() {
+            element.removeClass('is_animating');
+          },
+          onFilterChange: function() {
+            toggleIndicators();
+          }
         });
 
         pageflow.ready.then(function() {

data/app/assets/javascripts/pageflow/widgets/navigation_mobile.js

@@ -33,6 +33,10 @@
         event.stopPropagation();
       });
 
+      $('.parent_page', element).parentPageButton({
+        visibleClass: 'is_visible'
+      });
+
       $('.wrapper', element).each(function() {
         var sharingMobile = $(this).parents('.sharing_mobile');
 
@@ -42,8 +46,9 @@
           probeType: 3
         });
 
-        $('ul', element).pageNavigationList({
-          scroller: scroller
+        $('ul.pages', element).pageNavigationList({
+          scroller: scroller,
+          animationDuration: 500
         });
 
         scroller.on('scroll', function() {

data/app/assets/javascripts/pageflow/widgets/overview.js

@@ -11,7 +11,6 @@ jQuery(function($) {
         scrollerWidth = noOfChapterParts * chapterParts.outerWidth(true),
         closeButton = $('.close', this.element),
         indexButton = $('.navigation_index'),
-        homeButton = $('.navigation_home'),
         overview = $('.overview'),
         wrapper = $('.wrapper', this.element);
 
@@ -25,11 +24,19 @@ jQuery(function($) {
 
         $('section.page').toggleClass('hidden_by_overlay', state);
         scrollIndicator.toggleClass('hidden', state);
+
+        if (overview.hasClass('active')) {
+          pageflow.events.once('page:change', function() {
+            toggleContent(false);
+          }, that);
+        }
+        else {
+          pageflow.events.off('page:change', null, that);
+        }
       };
 
       var goToPage = function() {
         if (!$(this).hasClass('active')) {
-          toggleContent();
           pageflow.slides.goToById(this.getAttribute("data-link"));
         }
       };
@@ -98,10 +105,6 @@ jQuery(function($) {
       closeButton.click(toggleContent);
       indexButton.click(toggleContent);
 
-      homeButton.click(function() {
-        toggleContent(false);
-      });
-
       $('body').keyup(function(e) {
         if (e.which == 27 && overview.hasClass('active')) {
           toggleContent();

data/app/assets/javascripts/pageflow/widgets/page_navigation_list.js

@@ -1,3 +1,5 @@
+//= require ./page_navigation_list_animation
+
 (function($) {
   $.widget('pageflow.pageNavigationList', {
     _create: function() {
@@ -8,6 +10,7 @@
 
       var chapterFilter = pageflow.ChapterFilter.create();
       var highlightedPage = pageflow.HighlightedPage.create();
+      var animation = pageflow.PageNavigationListAnimation.create()
 
       pageflow.ready.then(function() {
         highlightUnvisitedPages(pageflow.visited.getUnvisitedPages());
@@ -25,14 +28,21 @@
 
       function update(currentPagePermaId) {
         var highlightedPagePermaId = highlightedPage.getPagePermaId(currentPagePermaId);
+        var highlightedChapterId = pageflow.entryData.getChapterIdByPagePermaId(highlightedPagePermaId);
 
         element.toggleClass('inside_sub_chapter', highlightedPagePermaId !== currentPagePermaId);
 
-        highlightPage(highlightedPagePermaId);
-        filterChapters(currentPagePermaId);
+        filterChapters(currentPagePermaId).then(function() {
+          highlightPage(highlightedPagePermaId, {animate: !animation.enabled});
+          highlightChapter(highlightedChapterId);
+
+          if (options.onFilterChange) {
+            options.onFilterChange();
+          }
+        });
       }
 
-      function highlightPage(permaId) {
+      function highlightPage(permaId, highlightOptions) {
         links.each(function() {
           var link = $(this);
           var active = '#' + permaId === link.attr('href');
@@ -41,12 +51,8 @@
           link.attr('tabindex', active ? '-1' : '3');
 
           if (active) {
-            if (link.data('chapterId')) {
-              highlightChapter(link.data('chapterId'));
-            }
-
             if (options.scrollToActive) {
-              scroller.scrollToElement(link[0], 800);
+              scroller.scrollToElement(link[0], highlightOptions.animate ? 800 : 0);
             }
           }
         });
@@ -75,16 +81,48 @@
       }
 
       function filterChapters(currentPagePermaId) {
+        animation.update(currentPagePermaId);
+
         links.each(function() {
           var link = $(this);
+          animation.start(link.parent(), visible(currentPagePermaId, link));
+        });
 
-          link.toggleClass('filtered', !chapterFilter.chapterVisibleFromPage(
-            currentPagePermaId,
-            link.data('chapterId')
-          ));
+        return $.when(animation.enabled && animationDurationElapsed()).then(function() {
+          links.each(function() {
+            var link = $(this);
+
+            animation.finish(link.parent(), visible(currentPagePermaId, link));
+            link.parent().andSelf().toggleClass('filtered', !visible(currentPagePermaId, link));
+          });
+
+          scroller.refresh();
         });
+      }
+
+      function visible(currentPagePermaId, link) {
+        return chapterFilter.chapterVisibleFromPage(
+          currentPagePermaId,
+          link.data('chapterId')
+        );
+      }
+
+      function animationDurationElapsed() {
+        if (options.animationDuration) {
+          if (options.onAnimationStart) {
+            options.onAnimationStart();
+          }
+
+          return $.Deferred(function(deferred) {
+            setTimeout(function() {
+              deferred.resolve();
 
-        scroller.refresh();
+              if (options.onAnimationEnd) {
+                setTimeout(options.onAnimationEnd, 500);
+              }
+            }, 500);
+          }).promise();
+        }
       }
     }
   });

data/app/assets/javascripts/pageflow/widgets/page_navigation_list_animation.js

@@ -0,0 +1,48 @@
+pageflow.PageNavigationListAnimation = pageflow.Object.extend({
+  initialize: function(entryData) {
+    this.entry = entryData;
+  },
+
+  update: function(currentPagePermaId) {
+    var currentPagePosition =
+      this.entry.getPagePosition(currentPagePermaId);
+    var currentStorylineId =
+      this.entry.getStorylineIdByPagePermaId(currentPagePermaId);
+    var currentStorylineLevel =
+      this.entry.getStorylineLevel(currentStorylineId);
+
+    this.enabled = this.lastStorylineId && this.lastStorylineId !== currentStorylineId;
+
+    this.movingUp = (this.lastStorylineLevel > currentStorylineLevel);
+    this.movingDown = (this.lastStorylineLevel < currentStorylineLevel);
+    this.movingForwards = (this.lastStorylineLevel === currentStorylineLevel &&
+                          this.lastPagePosition < currentPagePosition);
+    this.movingBackwards = (this.lastStorylineLevel === currentStorylineLevel &&
+                           this.lastPagePosition > currentPagePosition);
+
+    this.lastPagePosition = currentPagePosition;
+    this.lastStorylineId = currentStorylineId;
+    this.lastStorylineLevel = currentStorylineLevel;
+  },
+
+  start: function(element, visible) {
+    if (this.enabled) {
+      element.toggleClass('moving_up', this.movingUp);
+      element.toggleClass('moving_down', this.movingDown);
+      element.toggleClass('moving_forwards', this.movingForwards);
+      element.toggleClass('moving_backwards', this.movingBackwards);
+
+      element.toggleClass('animate_out', !visible);
+    }
+  },
+
+  finish: function(element, visible) {
+    if (this.enabled) {
+      element.toggleClass('animate_in', !!visible);
+    }
+  }
+});
+
+pageflow.PageNavigationListAnimation.create = function() {
+  return new pageflow.PageNavigationListAnimation(pageflow.entryData);
+};

data/app/assets/javascripts/pageflow/widgets/parent_page_button.js

@@ -2,6 +2,7 @@
   $.widget('pageflow.parentPageButton', {
     _create: function() {
       var element = this.element;
+      var options = this.options;
 
       element.click(function(event) {
         pageflow.slides.goToParentPage();
@@ -18,9 +19,15 @@
         var pagePermaId = parseInt(pageflow.slides.currentPage().attr('id'), 10);
         var chapterId = pageflow.entryData.getChapterIdByPagePermaId(pagePermaId);
         var chapterConfiguration = pageflow.entryData.getChapterConfiguration(chapterId);
+        var visible = pageflow.slides.parentPageExists() &&
+          chapterConfiguration.display_parent_page_button !== false;
 
-        element.toggle(pageflow.slides.parentPageExists() &&
-                       chapterConfiguration.display_parent_page_button);
+        if (options.visibleClass) {
+          element.toggleClass(options.visibleClass, visible);
+        }
+        else {
+          element.toggle(visible);
+        }
       }
     }
   });