pageflow 0.5.0 → 0.6.0

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

@@ -0,0 +1,33 @@
+jQuery(function($) {
+  $('body').on('click', 'a.navigation_main', function() {
+    pageflow.events.trigger('button:header');
+  });
+
+  $('body').on('click', 'a.navigation_index', function() {
+    pageflow.events.trigger('button:overview');
+  });
+
+  $('body').on('click', 'a.navigation_fullscreen', function() {
+    pageflow.events.trigger('button:fullscreen');
+  });
+
+  $('body').on('click', '.mute a', function() {
+    pageflow.events.trigger('button:mute');
+  });
+
+  $('body').on('click', 'a.share.facebook', function() {
+    pageflow.events.trigger('share:facebook');
+  });
+
+  $('body').on('click', 'a.share.twitter', function() {
+    pageflow.events.trigger('share:twitter');
+  });
+
+  $('body').on('click', 'a.share.google', function() {
+    pageflow.events.trigger('share:google');
+  });
+
+  $('body').on('pageactivate', function(event, ui) {
+    pageflow.events.trigger('page:change', ui.page);
+  });
+});

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

@@ -3,33 +3,33 @@
 (function($) {
   $.widget('pageflow.navigation', {
     _create: function() {
-      var overlays = this.element.find('.navigation_site_detail'),
-          that = this,
-          hasHomeButton = !!this.element.find('.navigation_home').length,
+      var element = this.element,
+          overlays = element.find('.navigation_site_detail'),
+          hasHomeButton = !!element.find('.navigation_home').length,
           toggleIndicators = function() {};
 
-      this.element.addClass('js').append(overlays);
+      element.addClass('js').append(overlays);
 
-      $('a.navigation_top', this.element).topButton();
+      $('a.navigation_top', element).topButton();
 
-      $('.navigation_bar_bottom', this.element)
-        .append($('.navigation_bar_top > li', this.element).slice(hasHomeButton ? 4 : 3));
+      $('.navigation_bar_bottom', element)
+        .append($('.navigation_bar_top > li', element).slice(hasHomeButton ? 4 : 3));
 
       /* Volume */
 
       var handlingVolume = false;
       var volumeBeforeMute = 1;
-      var muteButton = $('.navigation_bg.navigation_mute', that.element);
+      var muteButton = $('.navigation_bg.navigation_mute', element);
 
       var changeVolume = function(event) {
-        var volume = (event.pageX - $('.volume-slider', that.element).offset().left) / $(('.volume-slider')).width();
+        var volume = (event.pageX - $('.volume-slider', element).offset().left) / $(('.volume-slider')).width();
         if (volume > 1) { volume = 1; }
         if (volume < 0) { volume = 0; }
         setVolume(volume);
       };
 
       var setVolume = function(volume) {
-        $('.volume-level', that.element).css({width: volume * 100 + "%"});
+        $('.volume-level', element).css({width: volume * 100 + "%"});
         pageflow.settings.set('volume', volume);
 
         if (volume === 0) {
@@ -58,16 +58,16 @@
         toggleMute();
       });
 
-      $('.volume-level', this.element).css({
+      $('.volume-level', element).css({
         width: pageflow.settings.get("volume") * 100 + "%"
       });
 
-      $('.navigation_volume_box', this.element).on("mousedown", function(event) {
+      $('.navigation_volume_box', element).on("mousedown", function(event) {
         handlingVolume = true;
         changeVolume(event);
       });
 
-      $('.navigation_volume_box', this.element).on("mousemove", function(event) {
+      $('.navigation_volume_box', element).on("mousemove", function(event) {
         if(handlingVolume) {
           changeVolume(event);
         }
@@ -77,14 +77,14 @@
 
       /* hide volume button on mobile devices */
       if (pageflow.features.has('mobile platform')) {
-        $('li.mute', this.element).hide();
-        $('.navigation_bar_bottom', this.element).css('height', '224px');
-        $('.scroller', this.element).css('bottom', '224px');
-        $('.scroll_indicator.bottom', this.element).css('bottom', '190px');
+        $('li.mute', element).hide();
+        $('.navigation_bar_bottom', element).css('height', '224px');
+        $('.scroller', element).css('bottom', '224px');
+        $('.scroll_indicator.bottom', element).css('bottom', '190px');
       }
 
       /* header button */
-      $('.navigation_main', this.element).click(function() {
+      $('.navigation_main', element).click(function() {
         $(this)
           .toggleClass('active')
           .updateTitle();
@@ -93,20 +93,29 @@
 
       /* open header through skiplinks */
       $('a[href="#header"], a[href="#search"]', '#skipLinks').click(function() {
-        $('.navigation_main', that.element).addClass('active');
+        $('.navigation_main', element).addClass('active');
         $('.header').addClass('active');
         $(this.getAttribute('href')).select();
       });
 
       /* share-button */
-      $('.navigation_menu .navigation_menu_box a', this.element).focus(function() {
+      $('.navigation_menu .navigation_menu_box a', element).focus(function() {
         $(this).parent().parent().addClass('focused');
       }).blur(function() {
         $(this).parent().parent().removeClass('focused');
       });
 
+      var shareBox = $('.navigation_share_box', element),
+          links = $('> a', shareBox);
+      shareBox.shareMenu({
+        subMenu: $('.sub_share', element),
+        links: links,
+        insertAfter: links.last(),
+        closeOnMouseLeaving: shareBox
+      });
+
       /* pages */
-      var pageLinks = $('.navigation_thumbnails a', that.element),
+      var pageLinks = $('.navigation_thumbnails a', element),
         target;
 
       function registerHandler() {
@@ -120,7 +129,7 @@
 
       function closeOverview() {
         $('.overview').removeClass("active");
-        $('.navigation_index', that.element).removeClass("active");
+        $('.navigation_index', element).removeClass("active");
       }
 
       function hideOverlay() {
@@ -160,14 +169,14 @@
 
       var initiateIndicators = function() {
         setTimeout(function() {
-          $('.scroll_indicator', that.element).show();
+          $('.scroll_indicator', element).show();
           toggleIndicators();
         }, 500);
       };
 
-      $('.scroller', this.element).each(function () {
-        var bottomIndicator = $('.scroll_indicator.bottom', that.element),
-          topIndicator = $('.scroll_indicator.top', that.element),
+      $('.scroller', element).each(function () {
+        var bottomIndicator = $('.scroll_indicator.bottom', element),
+          topIndicator = $('.scroll_indicator.top', element),
           scrollUpIntervalID, scrollDownIntervalID,
           hideOverlay = function () {
             overlays.addClass('hidden').removeClass('visible');
@@ -237,7 +246,7 @@
 
         var scroller = new IScroll(this, scrollerOptions);
 
-        $('ul.navigation_thumbnails', that.element).pageNavigationList({
+        $('ul.navigation_thumbnails', element).pageNavigationList({
           scroller: scroller,
           scrollToActive: true
         });
@@ -287,7 +296,7 @@
       });
 
       /* hide text button */
-      var hideText = $('.navigation_hide_text', this.element);
+      var hideText = $('.navigation_hide_text', element);
 
       hideText.click(function() {
         pageflow.hideText.toggle();
@@ -299,7 +308,7 @@
 
       /* fullscreen button */
       if ($.support.fullscreen) {
-        var fs = $('.navigation_fullscreen', this.element),
+        var fs = $('.navigation_fullscreen', element),
             fullscreenCallback = function(isFullScreen) {
               fs
                 .toggleClass('active', !!isFullScreen)
@@ -312,10 +321,10 @@
         });
       }
       else {
-        $('.navigation_bar_bottom .fullscreen a', this.element).css('visibility', 'hidden');
+        $('.navigation_bar_bottom .fullscreen a', element).css('visibility', 'hidden');
       }
 
-      $('.button, .navigation_mute, .scroll_indicator', this.element).on({
+      $('.button, .navigation_mute, .scroll_indicator', element).on({
         'touchstart mousedown': function() {
           $(this).addClass('pressed');
         },
@@ -324,7 +333,7 @@
         }
       });
 
-      $('.navigation_share, .navigation_credits', this.element).on({
+      $('.navigation_share, .navigation_credits', element).on({
         'touchstart': function() {
           var element = $(this).parent().parent();
           element.addClass('open');
@@ -339,7 +348,7 @@
         }
       });
 
-      $('li', this.element).on('mouseleave', function() {
+      $('li', element).on('mouseleave', function() {
         $(this).blur();
       });
 

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

@@ -3,76 +3,98 @@
 (function($) {
   $.widget('pageflow.navigationMobile', {
     _create: function() {
-      /* mobile version */
-      var that = this,
-        scroller;
-
-      var goToPage = function () {
-        var a = $('a', this),
-          id = a.attr("data-link");
 
-        if (id !== undefined) {
-          pageflow.slides.goToById(id);
-          $('.navigation_mobile').removeClass('active');
-        }
-        else {
-          window.open(a.attr('href'), '_blank');
-          a.preventDefault();
-        }
-      };
+      var that = this,
+          element = this.element,
+          scroller;
 
-      $('body').on('touchstart mousedown MSPointerDown', function(event) {
-        if (that.element.hasClass('active') && !$(event.target).parents().filter(that.element).length) {
-          that.element.removeClass('active imprint sharing');
+      $('body').on('touchstart mousedown MSPointerDown pointerdown', function(event) {
+        if (element.hasClass('active') && !$(event.target).parents().filter(element).length) {
+          element.removeClass('active imprint sharing');
         }
       });
 
-      $('.menu.index', that.element).click(function() {
-        if(!$(that.element).hasClass('sharing') && !$(that.element).hasClass('imprint')) {
-          $(that.element).toggleClass('active');
+      $('.menu.index', element).click(function() {
+        if(!$(element).hasClass('sharing') && !$(element).hasClass('imprint')) {
+          $(element).toggleClass('active');
         }
-        $(that.element).removeClass('imprint sharing');
+        $(element).removeClass('imprint sharing');
       });
-      $('.menu.sharing', that.element).click(function() {
-        $(that.element).addClass('sharing');
-        $(that.element).removeClass('imprint');
+      $('.menu.sharing', element).click(function() {
+        $(element).addClass('sharing');
+        $(element).removeClass('imprint');
       });
-      $('.menu.imprint', that.element).click(function() {
-        $(that.element).addClass('imprint');
-        $(that.element).removeClass('sharing');
+      $('.menu.imprint', element).click(function() {
+        $(element).addClass('imprint');
+        $(element).removeClass('sharing');
       });
 
-      $('.wrapper', this.element).each(function() {
+      $('.wrapper', element).each(function() {
+        var sharingMobile = $(this).parents('.sharing_mobile');
+
         scroller = new IScroll(this, {
           mouseWheel: true,
           bounce: false,
           probeType: 3
         });
 
-        $('ul', that.element).pageNavigationList({
+        $('ul', element).pageNavigationList({
           scroller: scroller
         });
 
         scroller.on('scroll', function() {
-          $('li', that.element).removeClass('touched').off('touchend mouseup MSPointerUp', goToPage);
+          $('.overview_mobile li', element).removeClass('touched').off('touchend mouseup MSPointerUp pointerup', that._goToPage);
+          $('.sub_share a', sharingMobile).off('touchend mouseup MSPointerUp pointerup', that._openLink);
         });
 
-        $('.menu', that.element).click(function() {
+        $('.menu', element).click(function() {
           scroller.refresh();
         });
 
-        $('li', that.element).each(function() {
-          $(this).on({
-            'touchstart mousedown MSPointerDown': function() {
+        if (!$(element).data('touchBound')) {
+          $('li', element).on({
+            'touchstart mousedown MSPointerDown pointerdown': function() {
               $(this).addClass('touched');
-              $(this).one('touchend mouseup MSPointerUp', goToPage);
             },
-            'touchend mouseup MSPointerUp': function() {
+            'touchend mouseup MSPointerUp pointerup': function() {
               $(this).removeClass('touched');
             }
           });
+          $('.overview_mobile li', element).on({
+            'touchstart mousedown MSPointerDown pointerdown': function() {
+              $(this).one('touchend mouseup MSPointerUp pointerup', that._goToPage);
+            }
+          });
+          $(element).data('touchBound', true);
+        }
+
+        $('.sub_share a', sharingMobile).on({
+          'touchstart mousedown MSPointerDown pointerdown': function() {
+            $(this).one('touchend mouseup MSPointerUp pointerup', that._openLink);
+          }
+        });
+
+        sharingMobile.shareMenu({
+          subMenu: $('.sub_share', element),
+          links: $('li > a', sharingMobile),
+          scroller: scroller
         });
       });
+    },
+
+    _goToPage: function () {
+      var a = $('a', this),
+          id = a.attr("data-link");
+
+      if (id !== undefined) {
+        pageflow.slides.goToById(id);
+        $('.navigation_mobile').removeClass('active');
+      }
+    },
+
+    _openLink: function(event) {
+      event.preventDefault();
+      window.open(this.href, '_blank');
     }
   });
 }(jQuery));

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

@@ -10,8 +10,8 @@ jQuery(function($) {
         noOfChapterParts = chapterParts.size(),
         scrollerWidth = noOfChapterParts * chapterParts.outerWidth(true),
         closeButton = $('.close', this.element),
-        indexButton = $('.navigation .navigation_index'),
-        homeButton = $('.navigation .navigation_home'),
+        indexButton = $('.navigation_index'),
+        homeButton = $('.navigation_home'),
         overview = $('.overview'),
         wrapper = $('.wrapper', this.element);
 
@@ -23,7 +23,7 @@ jQuery(function($) {
           .toggleClass('active', state)
           .updateTitle();
 
-        $('.page .content').toggleClass('hidden', state);
+        $('section.page').toggleClass('hidden_by_overlay', state);
         scrollIndicator.toggleClass('hidden', state);
       };
 

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

@@ -4,18 +4,20 @@
       var element = this.element;
       var options = this.options;
       var scroller = options.scroller;
-      var links = element.find('a');
+      var links = element.find('a[href]');
 
       pageflow.ready.then(function() {
+        highlightUnvisitedPages(pageflow.visited.getUnvisitedPages());
         highlightActivePage(getPageId(pageflow.slides.currentPage()));
       });
 
       pageflow.slides.on('pageactivate', function(e) {
+        setPageVisited(e.target.getAttribute('id'));
         highlightActivePage(getPageId(e.target));
       });
 
       function getPageId(section) {
-        return $(section).attr('id') || ($(section).data('permaId') || '').toString();
+        return $(section).attr('id') || ($(section).attr('data-perma-id') || '').toString();
       }
 
       function highlightActivePage(id) {
@@ -34,12 +36,27 @@
           link.toggleClass('active', active);
           link.attr('tabindex', active ? '-1' : '3');
 
-          if (options.scrollToActive && active) {
-            scroller.scrollToElement(link[0], 800);
+          if (active) {
+            if (link.data('chapterId')) {
+              highlightChapter(link.data('chapterId'));
+            }
+
+            if (options.scrollToActive) {
+              scroller.scrollToElement(link[0], 800);
+            }
           }
         });
       }
 
+      function highlightChapter(activeChapterId) {
+        links.each(function() {
+          var link = $(this);
+          var active = activeChapterId === link.data('chapterId');
+
+          link.toggleClass('in_active_chapter', active);
+        });
+      }
+
       function pageIdsUpUntil(id) {
         var found = false;
 
@@ -62,6 +79,19 @@
           });
         }
       }
+
+      function highlightUnvisitedPages(ids) {
+        links.each(function() {
+          var link = $(this);
+          var unvisited = ids.indexOf(parseInt(link.attr('href').substr(1), 10)) >= 0;
+
+          link.toggleClass('unvisited', unvisited);
+        });
+      }
+
+      function setPageVisited(id) {
+        element.find('[href="#' + id + '"]').removeClass('unvisited');
+      }
     }
   });
 }(jQuery));