pageflow-outline-navigation-bar 0.1.0

data/app/assets/javascript/pageflow/outline_navigation_bar/resizer.js

@@ -0,0 +1,32 @@
+(function($) {
+  var BAR_MIN_WIDTH = 65;
+
+  pageflow.outlineNavigationBar.Resizer = pageflow.Object.extend({
+    initialize: function(element, options) {
+      this.element = element;
+      this.options = options;
+
+      this.list = this.element.find('.chapters_panel ul');
+
+      this._setupWidth();
+    },
+
+    _setupWidth: function() {
+      this.expandedWidth = Math.max(BAR_MIN_WIDTH, this.list.width()) + 'px';
+
+      if (this.options.isFixed) {
+        this.element.css('width', this.expandedWidth);
+      }
+    },
+
+    expand: function() {
+      this.element.addClass('expanded');
+      this.element.css('width', this.expandedWidth);
+    },
+
+    collapse: function() {
+      this.element.removeClass('expanded');
+      this.element.css('width', '');
+    },
+  });
+}(jQuery));

data/app/assets/javascript/pageflow/outline_navigation_bar/scroller.js

@@ -0,0 +1,144 @@
+/*global IScroll*/
+
+(function($) {
+  var MIN_LINK_HEIGHT = 0;
+  var MAX_LINK_HEIGHT = 35;
+  var EXPANDED_OUTER_LINK_HEIGHT = 42;
+  var LINK_MARGIN = 2;
+
+  $.widget('pageflow.outlineNavigationBarScroller', {
+    _create: function() {
+      this.list = this.element.find('ul');
+      this.pageLinks = this.element.find('li a');
+
+      this.setupScroller();
+      this.setupResizing();
+    },
+
+    _destroy: function() {
+      this.teardownResizing();
+    },
+
+    on: function(event, handler) {
+      this.iscroll.on(event, handler);
+    },
+
+    setupScroller: function() {
+      var scrollerOptions = {
+        mouseWheel: true,
+        bounce: false,
+        probeType: 2
+      };
+
+      if (window.navigator.msPointerEnabled) {
+        scrollerOptions.preventDefault = false;
+      }
+
+      this.iscroll = new IScroll(this.element[0], scrollerOptions);
+
+      if (!this.options.isFixed) {
+        this.iscroll.disable();
+      }
+
+      this.list.pageNavigationList({
+        scroller: this.iscroll,
+        scrollToActive: this.options.isFixed,
+        highlightedPage: {
+          customNavigationBarMode: function(storylineId, entryData) {
+            if (!entryData.getStorylineConfiguration(storylineId).main) {
+              return 'inherit_from_parent';
+            }
+          }
+        }
+      });
+    },
+
+    setupResizing: function() {
+      this.resizeHandler = this.resizeHandler || _.bind(function() {
+        setTimeout(_.bind(this.refresh, this), 200);
+      }, this);
+
+      $(window).on('resize', this.resizeHandler);
+      this.refresh();
+    },
+
+    teardownResizing: function() {
+      $(window).off('resize', this.resizeHandler);
+    },
+
+    refresh: function() {
+      var height = this.element.parent().height() - 5;
+      var linkCount = this.pageLinks.length;
+      var linkHeight = (height / linkCount) - 2;
+
+      linkHeight = Math.min(Math.max(linkHeight, MIN_LINK_HEIGHT), MAX_LINK_HEIGHT);
+      this.collapsedOuterLinkHeight = linkHeight + LINK_MARGIN;
+
+      var collapsedListHeight = this.collapsedOuterLinkHeight * linkCount;
+      var expandedListHeight = EXPANDED_OUTER_LINK_HEIGHT * linkCount;
+
+      this.isOverflowing = (height < expandedListHeight);
+      this.collapsedTop = (height - collapsedListHeight) / 2;
+      this.expandedTop = (height - expandedListHeight) / 2;
+      this.maxTop = height - linkCount * EXPANDED_OUTER_LINK_HEIGHT;
+
+      this.setTop(this.collapsedTop);
+      this.pageLinks.css('height', linkHeight + 'px');
+    },
+
+    expand: function() {
+      var activeItemIndex = this.pageLinks.filter('.in_active_chapter').parent().index();
+      var top;
+
+      if (this.isOverflowing) {
+        if (activeItemIndex < this.pageLinks.length - 1) {
+          top = activeItemIndex * (this.collapsedOuterLinkHeight - EXPANDED_OUTER_LINK_HEIGHT);
+        }
+        else {
+          top = this.maxTop;
+        }
+
+        this.animateTop(top);
+
+        this.scrollTimeout = setTimeout(_.bind(function() {
+          this.setTop(0);
+
+          this.iscroll.refresh();
+          this.iscroll.scrollTo(0, Math.max(Math.min(0, top), this.iscroll.maxScrollY));
+          this.iscroll.enable();
+        }, this), 500);
+      }
+      else {
+        this.animateTop(this.expandedTop);
+      }
+    },
+
+    collapse: function() {
+      clearTimeout(this.scrollTimeout);
+
+      if (this.isOverflowing && this.iscroll.enabled) {
+        this.setTop(this.iscroll.y);
+        this.triggerRepaint();
+      }
+
+      this.iscroll.disable();
+      this.iscroll.scrollTo(0, 0, 0);
+
+      this.animateTop(this.collapsedTop);
+    },
+
+    animateTop: function(top) {
+      this.element.addClass('animated');
+      this.element.css('top', top);
+    },
+
+    setTop: function(top) {
+      this.element.removeClass('animated');
+      this.element.css('top', top);
+    },
+
+    triggerRepaint: function() {
+      this.element[0].offsetWidth
+    }
+  });
+}(jQuery));

data/app/assets/javascript/pageflow/outline_navigation_bar/widget.js

@@ -0,0 +1,227 @@
+/*global IScroll*/
+
+(function($) {
+  var o = pageflow.outlineNavigationBar;
+  var events = o.events;
+
+  $.widget('pageflow.outlineNavigationBar', {
+    _create: function() {
+      this.element.toggleClass('expandable', !this._isFixed());
+
+      this.expander = this._setupExpander();
+      this.panels = this._setupPanels();
+      this.scroller = this._setupChaptersPanel();
+      this.resizer = this._setupResizer();
+
+      this._setupPointerDownCollapsing();
+      this._setupPageChangeCollapsing();
+      this._setupMouseExpanding();
+      this._setupFocusExpanding();
+      this._setupGlobalSkipLinks();
+      this._setupButtonsPanel();
+      this._setupMobilePanels();
+    },
+
+    _destroy: function() {
+      this._teardownPageChangeCollapsing();
+    },
+
+    _setupExpander: function() {
+      var widget = this;
+
+      return new o.Expander({
+        enabled: function() {
+          return !widget._isFixed();
+        },
+
+        expand: function(options) {
+          widget.resizer.expand();
+          widget.scroller.expand();
+
+          if (mobileLayout()) {
+            hidePageContent();
+          }
+        },
+
+        collapse: function(options) {
+          if (!widget.element.hasClass('buttons_active')) {
+            widget.panels.reset();
+          }
+
+          widget.resizer.collapse();
+          widget.scroller.collapse();
+
+          showPageContent();
+        }
+      });
+    },
+
+    _setupPanels: function() {
+      var element = this.element;
+
+      return element
+        .outlineNavigationBarPanels({
+          expander: this.expander,
+          panels: element.find('.panel'),
+          toggles: element.find('.toggle'),
+        })
+        .outlineNavigationBarPanels('instance');
+    },
+
+    _setupChaptersPanel: function() {
+      var element = this.element;
+      var scroller = element.find('.scroller')
+        .outlineNavigationBarScroller({isFixed: this._isFixed()})
+        .outlineNavigationBarScroller('instance');
+
+      element.find('.scroller').outlineNavigationBarNavigator({
+        scroller: scroller
+      });
+
+      return scroller;
+    },
+
+    _setupResizer: function() {
+      return new o.Resizer(this.element, {
+        isFixed: this._isFixed()
+      });
+    },
+
+    _setupPointerDownCollapsing: function() {
+      var expander = this.expander;
+      var element = this.element;
+
+      $('body').on(events.pointerDown, function(event) {
+        if (!$(event.target).parents().andSelf().filter(element).length) {
+          expander.collapse();
+        }
+      });
+    },
+
+    _setupPageChangeCollapsing: function() {
+      var expander = this.expander;
+
+      pageflow.events.on('page:change', function() {
+        expander.collapse();
+      }, this);
+    },
+
+    _teardownPageChangeCollapsing: function() {
+      pageflow.events.off('page:change', null, this);
+    },
+
+    _setupMouseExpanding: function() {
+      var expander = this.expander;
+
+      if (!pageflow.browser.has('mobile platform')) {
+        this.element.on({
+          mouseenter: function() {
+            if (!mobileLayout()) {
+              expander.expand({by: 'mouse'});
+            }
+          },
+
+          mouseleave: function() {
+            if (!mobileLayout()) {
+              expander.collapse({by: 'mouse'});
+            }
+          }
+        });
+      }
+    },
+
+    _setupFocusExpanding: function() {
+      var expander = this.expander;
+
+      this.element.find('a, *[tabindex]').on({
+        focus: function() {
+          expander.expand({by: 'focus'});
+        },
+
+        blur: function() {
+          expander.scheduleCollapse({by: 'focus'});
+        }
+      });
+    },
+
+    _setupButtonsPanel: function() {
+      var element = this.element;
+
+      element.find('.toggle.buttons a').on('click', function() {
+        $('.header').toggleClass('active');
+        element.toggleClass('buttons_active');
+      });
+
+      element.find('.menu_item').outlineNavigationBarMenuItem();
+      element.find('.top a').topButton();
+      element.find('.fullscreen a').fullscreenButton();
+      element.find('.hide_text a').outlineNavigationBarHideTextButton();
+      element.find('.navigation_volume_box').volumeSlider({
+        orientation: 'v'
+      });
+
+      var shareBox = $('.share_box', this.element),
+          shareLinks = $('a', shareBox);
+
+      shareBox.shareMenu({
+        insertAfter: shareLinks.parent().last(),
+        closeOnMouseLeaving: shareBox
+      });
+    },
+
+    _setupMobilePanels: function() {
+      var element = this.element;
+
+      element.find('.parent_page').parentPageButton({
+        visibleClass: 'is_visible'
+      });
+
+      element.find('.mobile_panel').each(function() {
+        var sharingBox = $(this).filter('.mobile_sharing');
+        var scroller = new IScroll($(this).find('.wrapper')[0], {
+          mouseWheel: true,
+          bounce: false,
+          probeType: 3
+        });
+
+        element.on(events.pointerDown, '.toggle.mobile_only a', function() {
+          scroller.refresh();
+        });
+
+        sharingBox.shareMenu({
+          scroller: scroller
+        });
+      });
+
+      $('.mobile_panel a', element).on('click touchstart', function(event) {
+        event.stopPropagation();
+      });
+    },
+
+    _setupGlobalSkipLinks: function() {
+      $('a[href="#header"], a[href="#search"]', '#skipLinks').click(function() {
+        $('.header').addClass('active');
+        $(this.getAttribute('href')).select();
+      });
+    },
+
+    _isFixed: function() {
+      return (this.element.data('widget') === 'outline_navigation_bar_fixed' &&
+              !mobileLayout());
+    }
+  });
+
+  function mobileLayout() {
+    return ($('body').width() <= 900);
+  }
+
+  function hidePageContent() {
+    $('section.page').addClass('hidden_by_overlay');
+    $('.scroll_indicator').addClass('hidden');
+  }
+
+  function showPageContent() {
+    $('section.page').removeClass('hidden_by_overlay');
+    $('.scroll_indicator').removeClass('hidden');
+  }
+}(jQuery));

data/app/assets/stylesheets/pageflow/outline_navigation_bar/themes/default.scss

@@ -0,0 +1,87 @@
+@import "./default/cross_dependant_styles";
+@import "./default/widget_margin";
+
+/// Type of icons to use:
+///
+/// - `"icon-font"`: Circular buttons with font awesome icons.
+///
+/// - `"sprite"`: Custom icons from `icon_sprite.png` in theme
+///   directory.
+$outline-navigation-bar-icons: $widget-icons !default;
+
+/// @see $default-widget-icon-font-options
+$outline-navigation-bar-icon-font-options: (
+  share-icon-color: #fff,
+  active-share-icon-color: $main-color
+) !default;
+
+.outline_navigation_bar {
+  @import "./default/mixins";
+
+  @import "./default/icons/icon_font";
+  @import "./default/icons/sprite";
+
+  $basic-text-color: #fff !default;
+
+  $outline-navigation-bar-basic-background-color: $basic-background-color-transparent !default;
+  $outline-navigation-bar-active-chapter-color: $main-color !default;
+
+  $outline-navigation-bar-menu-box-background-color: $widget-background-color !default;
+  $outline-navigation-bar-menu-box-color: $widget-text-color !default;
+
+  @if $outline-navigation-bar-icons == "sprite" {
+    @include outline-navigation-bar-icons-sprite;
+  } @else {
+    @include outline-navigation-bar-icons-icon-font(
+      widget-icon-font-options($outline-navigation-bar-icon-font-options)...
+    );
+  }
+
+  position: absolute;
+  right: 0;
+  top: 0;
+  z-index: 3;
+  height: 100%;
+
+  font-family: $standard-font;
+  background-color: $outline-navigation-bar-basic-background-color;
+  @include transition(min-width 0.2s ease, width 0.2s ease);
+  @include user-select(none);
+
+  &.fixed {
+    min-width: 65px;
+  }
+
+  &.expandable {
+    width: 18px;
+  }
+
+  &.buttons_active {
+    width: 65px !important;
+  }
+
+  @include mobile {
+    &.expanded {
+      width: 200px !important;
+    }
+  }
+
+  .has_mobile_platform &.expanded {
+    width: 200px !important;
+  }
+
+  @import "./default/prevent_focus_rect_on_pointer_down";
+
+  @import "./default/panel";
+  @import "./default/parent_page_button";
+  @import "./default/mobile_panel";
+  @import "./default/mobile_images";
+  @import "./default/menu_item";
+  @import "./default/menu_items";
+  @import "./default/toggle";
+  @import "./default/volume_box";
+  @import "./default/share_box";
+  @import "./default/credits_box";
+  @import "./default/mobile_sharing";
+  @import "./default/scroller";
+}