pageflow 0.8.2 → 0.9.0

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

@@ -0,0 +1,26 @@
+(function($) {
+  $.widget('pageflow.fullscreenButton', {
+    _create: function() {
+      pageflow.fullscreen.on('change', this.update, this);
+      this.update();
+
+      this.element.click(function() {
+        pageflow.fullscreen.toggle();
+      });
+
+      if (!pageflow.fullscreen.isSupported()) {
+        this.element.css('visibility', 'hidden');
+      }
+    },
+
+    _destroy: function() {
+      pageflow.fullscreen.off('change', this.update);
+    },
+
+    update: function() {
+      this.element
+        .toggleClass('active', !!pageflow.fullscreen.isActive())
+        .updateTitle();
+    }
+  });
+}(jQuery));

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

@@ -3,18 +3,26 @@
     _create: function() {
       var widget = this;
 
+      function show() {
+        widget.element.show();
+        toggleContent(false);
+      }
+
+      function hide() {
+        widget.element.hide();
+        toggleContent(true);
+      }
+
       function toggleContent(state) {
         $('.page .content').toggleClass('initially_hidden', !state);
         $('.slideshow .scroll_indicator').toggleClass('initially_hidden', !state);
       }
 
       pageflow.manualStart.required().then(function(start) {
-        widget.element.show();
-        toggleContent(false);
+        show();
 
-        widget.element.find('.close').on('click', function() {
-          widget.element.hide();
-          toggleContent(true);
+        widget.element.find('.close').one('click', function() {
+          hide();
 
           pageflow.events.trigger('button:close_multimedia_alert');
           start();
@@ -22,6 +30,14 @@
           return false;
         });
       });
+
+      pageflow.events.on('request:multimedia_alert', function() {
+        show();
+
+        widget.element.find('.close').one('click', function() {
+          hide();
+        });
+      }, this);
     }
   });
 }(jQuery));

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

@@ -0,0 +1,42 @@
+(function($) {
+  $.widget('pageflow.muteButton', {
+    _create: function() {
+      var element = this.element;
+      var volumeBeforeMute = 1;
+
+      element.on('click', toggleMute);
+
+      pageflow.settings.on('change:volume', this.update, this);
+      this.update();
+
+      function toggleMute() {
+        if (pageflow.settings.get('volume') > 0) {
+          volumeBeforeMute = pageflow.settings.get('volume');
+          pageflow.settings.set('volume', 0);
+        }
+        else {
+          pageflow.settings.set('volume', volumeBeforeMute);
+        }
+      }
+    },
+
+    _destroy: function() {
+      pageflow.settings.off('change:volume', this.update);
+    },
+
+    update: function() {
+      var volume = pageflow.settings.get('volume');
+
+      if (volume === 0) {
+        this.element
+          .attr('title', this.element.attr('data-muted-title'))
+          .addClass('muted');
+      }
+      else {
+        this.element
+          .attr('title', this.element.attr('data-not-muted-title'))
+          .removeClass('muted');
+      }
+    }
+  });
+}(jQuery));

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

@@ -15,68 +15,13 @@
       $('.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', element);
-
-      var changeVolume = function(event) {
-        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', element).css({width: volume * 100 + "%"});
-        pageflow.settings.set('volume', volume);
-
-        if (volume === 0) {
-          muteButton
-            .attr('title', muteButton.attr('data-muted-title'))
-            .addClass('muted');
-        }
-        else {
-          muteButton
-            .attr('title', muteButton.attr('data-not-muted-title'))
-            .removeClass('muted');
-        }
-      };
-
-      var toggleMute = function () {
-        if (pageflow.settings.get('volume') > 0) {
-          volumeBeforeMute = pageflow.settings.get('volume');
-          setVolume(0);
-        }
-        else {
-          setVolume(volumeBeforeMute);
-        }
-      };
-
-      muteButton.on("click", function() {
-        toggleMute();
-      });
-
-      $('.volume-level', element).css({
-        width: pageflow.settings.get("volume") * 100 + "%"
-      });
-
-      $('.navigation_volume_box', element).on("mousedown", function(event) {
-        handlingVolume = true;
-        changeVolume(event);
-      });
-
-      $('.navigation_volume_box', element).on("mousemove", function(event) {
-        if(handlingVolume) {
-          changeVolume(event);
-        }
-      });
-
-      setVolume(pageflow.settings.get('volume'));
+      $('.navigation_volume_box', element).volumeSlider({orientation: 'h'});
+      $('.navigation_mute', element).muteButton();
 
       /* hide volume button on mobile devices */
-      if (pageflow.features.has('mobile platform')) {
+
+      if (pageflow.browser.has('mobile platform')) {
         $('li.mute', element).hide();
         $('.navigation_bar_bottom', element).css('height', '224px');
         $('.scroller', element).css('bottom', '224px');
@@ -307,22 +252,7 @@
       });
 
       /* fullscreen button */
-      if ($.support.fullscreen) {
-        var fs = $('.navigation_fullscreen', element),
-            fullscreenCallback = function(isFullScreen) {
-              fs
-                .toggleClass('active', !!isFullScreen)
-                .updateTitle();
-            };
-
-        fs.click(function() {
-          fs.toggleClass('fs').updateTitle();
-          $('#outer_wrapper').fullScreen({'callback': fullscreenCallback});
-        });
-      }
-      else {
-        $('.navigation_bar_bottom .fullscreen a', element).css('visibility', 'hidden');
-      }
+      $('.navigation_bar_bottom .fullscreen a', element).fullscreenButton();
 
       $('.button, .navigation_mute, .scroll_indicator', element).on({
         'touchstart mousedown': function() {
@@ -353,9 +283,6 @@
       });
 
       $('body').on({
-        'mouseup': function() {
-          handlingVolume = false;
-        },
         'pageactivate': function(e) {
           toggleIndicators();
         }

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

@@ -29,6 +29,10 @@
         $(element).removeClass('sharing');
       });
 
+      $('.imprint_mobile a', element).on('click touchstart', function(event) {
+        event.stopPropagation();
+      });
+
       $('.wrapper', element).each(function() {
         var sharingMobile = $(this).parents('.sharing_mobile');
 

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

@@ -6,32 +6,36 @@
       var scroller = options.scroller;
       var links = element.find('a[href]');
 
+      var chapterFilter = pageflow.ChapterFilter.create();
+      var highlightedPage = pageflow.HighlightedPage.create();
+
       pageflow.ready.then(function() {
         highlightUnvisitedPages(pageflow.visited.getUnvisitedPages());
-        highlightActivePage(getPageId(pageflow.slides.currentPage()));
+        update(getPagePermaId(pageflow.slides.currentPage()));
       });
 
       pageflow.slides.on('pageactivate', function(e) {
         setPageVisited(e.target.getAttribute('id'));
-        highlightActivePage(getPageId(e.target));
+        update(getPagePermaId(e.target));
       });
 
-      function getPageId(section) {
-        return $(section).attr('id') || ($(section).attr('data-perma-id') || '').toString();
+      function getPagePermaId(section) {
+        return parseInt($(section).attr('id') || $(section).attr('data-perma-id'), 10);
       }
 
-      function highlightActivePage(id) {
-        var displayPageId = _.find(pageIdsUpUntil(id).reverse(), function(id) {
-          return links.filter('[href="#' + id + '"]').length;
-        });
+      function update(currentPagePermaId) {
+        var highlightedPagePermaId = highlightedPage.getPagePermaId(currentPagePermaId);
 
-        highlightPage(displayPageId);
+        element.toggleClass('inside_sub_chapter', highlightedPagePermaId !== currentPagePermaId);
+
+        highlightPage(highlightedPagePermaId);
+        filterChapters(currentPagePermaId);
       }
 
-      function highlightPage(id) {
+      function highlightPage(permaId) {
         links.each(function() {
           var link = $(this);
-          var active = '#' + id === link.attr('href');
+          var active = '#' + permaId === link.attr('href');
 
           link.toggleClass('active', active);
           link.attr('tabindex', active ? '-1' : '3');
@@ -57,29 +61,6 @@
         });
       }
 
-      function pageIdsUpUntil(id) {
-        var found = false;
-
-        return _.filter(pageIds(), function(other) {
-          var result = !found;
-          found = found || (id === other);
-          return result;
-        });
-      }
-
-      function pageIds() {
-        if (_.isArray(pageflow.pages)) {
-          return _.map(pageflow.pages, function(page) {
-            return page.perma_id.toString();
-          });
-        }
-        else {
-          return pageflow.pages.map(function(page) {
-            return page.get('perma_id').toString();
-          });
-        }
-      }
-
       function highlightUnvisitedPages(ids) {
         links.each(function() {
           var link = $(this);
@@ -92,6 +73,19 @@
       function setPageVisited(id) {
         element.find('[href="#' + id + '"]').removeClass('unvisited');
       }
+
+      function filterChapters(currentPagePermaId) {
+        links.each(function() {
+          var link = $(this);
+
+          link.toggleClass('filtered', !chapterFilter.chapterVisibleFromPage(
+            currentPagePermaId,
+            link.data('chapterId')
+          ));
+        });
+
+        scroller.refresh();
+      }
     }
   });
 }(jQuery));

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

@@ -0,0 +1,27 @@
+(function($) {
+  $.widget('pageflow.parentPageButton', {
+    _create: function() {
+      var element = this.element;
+
+      element.click(function(event) {
+        pageflow.slides.goToParentPage();
+        event.preventDefault();
+      });
+
+      pageflow.slides.on('pageactivate', function(e, ui) {
+        update();
+      });
+
+      update();
+
+      function update() {
+        var pagePermaId = parseInt(pageflow.slides.currentPage().attr('id'), 10);
+        var chapterId = pageflow.entryData.getChapterIdByPagePermaId(pagePermaId);
+        var chapterConfiguration = pageflow.entryData.getChapterConfiguration(chapterId);
+
+        element.toggle(pageflow.slides.parentPageExists() &&
+                       chapterConfiguration.display_parent_page_button);
+      }
+    }
+  });
+}(jQuery));

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

@@ -0,0 +1,22 @@
+(function($) {
+  $.widget('pageflow.skipPageButton', {
+    _create: function() {
+      this.element.on('click', function() {
+        pageflow.slides.next();
+      });
+
+      pageflow.events.on('page:change page:update', this.update, this);
+      this.update();
+    },
+
+    _destroy: function() {
+      pageflow.events.off(null, this.update);
+    },
+
+    update: function() {
+      if (pageflow.slides) {
+        this.element.toggleClass('enabled', !!pageflow.slides.nextPageExists());
+      }
+    }
+  });
+}(jQuery));

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

@@ -4,22 +4,21 @@
       var element = this.element;
 
       element.click(function(event) {
-        pageflow.slides.goToById(element.data('link'));
+        pageflow.slides.goToLandingPage();
         event.preventDefault();
       });
 
       pageflow.slides.on('pageactivate', function(e, ui) {
-        toggle($(e.target));
+        toggle();
       });
 
       toggle(pageflow.slides.currentPage());
 
-      function toggle(currentPage) {
-        var currentPageId = currentPage.data('id');
-        var onFirstPage = (currentPageId === element.data('link'));
+      function toggle() {
+        var onLandingPage = pageflow.slides.isOnLandingPage();
 
-        element.toggleClass('deactivated', onFirstPage);
-        element.attr('tabindex', onFirstPage ? '-1' : '2');
+        element.toggleClass('deactivated', onLandingPage);
+        element.attr('tabindex', onLandingPage ? '-1' : '2');
       }
     }
   });

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

@@ -0,0 +1,62 @@
+(function($) {
+  $.widget('pageflow.volumeSlider', {
+    _create: function() {
+      var element = this.element;
+      var orientation = this.options.orientation;
+      var slider = $('.volume-slider', element);
+      var handlingVolume = false;
+
+      element.on('mousedown', function(event) {
+        var parent = $('body');
+
+        parent.on('mousemove.volumeSlider', changeVolume);
+        element.addClass('lock_showing');
+
+        parent.on('mouseup.volumeSlider', function() {
+          parent.off('mousemove.volumeSlider mouseup.volumeSlider');
+          element.removeClass('lock_showing');
+        });
+
+        changeVolume(event);
+
+        function changeVolume(event) {
+          var volume;
+
+          if (orientation === 'v') {
+            volume = 1 - (event.pageY - slider.offset().top) / slider.height();
+          }
+          else {
+            volume = (event.pageX - slider.offset().left) / slider.width();
+          }
+
+          pageflow.settings.set('volume', Math.min(1, Math.max(0, volume)));
+        }
+      });
+
+      pageflow.settings.on('change:volume', this.update, this);
+      this.update();
+    },
+
+    _destroy: function() {
+      pageflow.settings.off('change:volume', this.update);
+    },
+
+    update: function() {
+      var volume = pageflow.settings.get('volume');
+
+      if (this.options.orientation === 'v') {
+        $('.volume-level', this.element).css({height: volume * 100 + '%'});
+        $('.volume-handle', this.element).css({bottom: volume * 100 + '%', top: 'initial'});
+      }
+      else {
+        $('.volume-level', this.element).css({width: volume * 100 + '%'});
+        $('.volume-handle', this.element).css({left: volume * 100 + '%'});
+      }
+
+      this.element.toggleClass('volume-high', volume > 2 / 3);
+      this.element.toggleClass('volume-medium', volume >= 1 / 3 && volume <= 2 / 3 );
+      this.element.toggleClass('volume-low', volume < 1 / 3 && volume > 0);
+      this.element.toggleClass('volume-mute', volume === 0);
+    }
+  });
+}(jQuery));