pageflow 0.0.1

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

@@ -0,0 +1,78 @@
+/*global IScroll*/
+
+(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();
+        }
+      };
+
+      $('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');
+        }
+      });
+
+      $('.menu.index', that.element).click(function() {
+        if(!$(that.element).hasClass('sharing') && !$(that.element).hasClass('imprint')) {
+          $(that.element).toggleClass('active');
+        }
+        $(that.element).removeClass('imprint sharing');
+      });
+      $('.menu.sharing', that.element).click(function() {
+        $(that.element).addClass('sharing');
+        $(that.element).removeClass('imprint');
+      });
+      $('.menu.imprint', that.element).click(function() {
+        $(that.element).addClass('imprint');
+        $(that.element).removeClass('sharing');
+      });
+
+      $('.wrapper', this.element).each(function() {
+        scroller = new IScroll(this, {
+          mouseWheel: true,
+          bounce: false,
+          probeType: 3
+        });
+
+        $('ul', that.element).pageNavigationList({
+          scroller: scroller
+        });
+
+        scroller.on('scroll', function() {
+          $('li', that.element).removeClass('touched').off('touchend mouseup MSPointerUp', goToPage);
+        });
+
+        $('.menu', that.element).click(function() {
+          scroller.refresh();
+        });
+
+        $('li', that.element).each(function() {
+          $(this).on({
+            'touchstart mousedown MSPointerDown': function() {
+              $(this).addClass('touched');
+              $(this).one('touchend mouseup MSPointerUp', goToPage);
+            },
+            'touchend mouseup MSPointerUp': function() {
+              $(this).removeClass('touched');
+            }
+          });
+        });
+      });
+    }
+  });
+}(jQuery));

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

@@ -0,0 +1,112 @@
+/*global pageflow, IScroll, jQuery*/
+
+jQuery(function($) {
+  $.widget('pageflow.overview', {
+    _create: function() {
+      var that = this,
+        scroller,
+        chapterParts = $('.ov_chapter', this.element),
+        pages = $('.ov_page', this.element),
+        noOfChapterParts = chapterParts.size(),
+        scrollerWidth = noOfChapterParts * chapterParts.outerWidth(true),
+        closeButton = $('.close', this.element),
+        indexButton = $('.navigation .navigation_index'),
+        homeButton = $('.navigation .navigation_home'),
+        overview = $('.overview'),
+        wrapper = $('.wrapper', this.element);
+
+      var toggleContent = function(state) {
+        var scrollIndicator = $('.slideshow .scroll_indicator');
+
+        overview.toggleClass('active', state);
+        indexButton
+          .toggleClass('active', state)
+          .updateTitle();
+
+        $('.page .content').toggleClass('hidden', state);
+        scrollIndicator.toggleClass('hidden', state);
+      };
+
+      var goToPage = function() {
+        if (!$(this).hasClass('active')) {
+          toggleContent();
+          pageflow.slides.goToById(this.getAttribute("data-link"));
+        }
+      };
+
+      $('.scroller', this.element).width(scrollerWidth);
+
+      if (wrapper.find('.ov_chapter').length) {
+        // scroller throws exception if initialized with empty set
+        // of pages
+
+        scroller = new IScroll(wrapper[0], {
+          snap: '.ov_chapter',
+          bounce: false,
+          scrollX: true,
+          scrollY: false,
+          probeType: 2,
+          mouseWheel: true,
+          preventDefault: false
+        });
+
+        scroller.on('scroll', function() {
+          pages.removeClass('touched').off('touchend mouseup', goToPage);
+        });
+
+        wrapper.pageNavigationList({
+          scroller: scroller
+        });
+
+        this.element.find('.scroll_indicator.left').scrollButton({
+          scroller: scroller,
+          page: true,
+          direction: 'left'
+        });
+
+        this.element.find('.scroll_indicator.right').scrollButton({
+          scroller: scroller,
+          page: true,
+          direction: 'right'
+        });
+      }
+
+      pages.each(function() {
+        $(this).on({
+          'touchstart mousedown': function() {
+            $(this).addClass('touched');
+            $(this).one('touchend mouseup', goToPage);
+          },
+          'touchend mouseup': function() {
+            $(this).removeClass('touched');
+          },
+          'click': function(event) {
+            event.preventDefault();
+          }
+        });
+      });
+
+      if (scrollerWidth < wrapper.width()) {
+        var closeButtonLeft = Math.max(400, scrollerWidth - closeButton.width() - 10);
+
+        closeButton.css({
+          left: closeButtonLeft + 'px',
+          right: 'auto'
+        });
+      }
+
+      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

@@ -0,0 +1,67 @@
+(function($) {
+  $.widget('pageflow.pageNavigationList', {
+    _create: function() {
+      var element = this.element;
+      var options = this.options;
+      var scroller = options.scroller;
+      var links = element.find('a');
+
+      pageflow.ready.then(function() {
+        highlightActivePage(getPageId(pageflow.slides.currentPage()));
+      });
+
+      pageflow.slides.on('pageactivate', function(e) {
+        highlightActivePage(getPageId(e.target));
+      });
+
+      function getPageId(section) {
+        return $(section).attr('id') || ($(section).data('permaId') || '').toString();
+      }
+
+      function highlightActivePage(id) {
+        var displayPageId = _.find(pageIdsUpUntil(id).reverse(), function(id) {
+          return links.filter('[href="#' + id + '"]').length;
+        });
+
+        highlightPage(displayPageId);
+      }
+
+      function highlightPage(id) {
+        links.each(function() {
+          var link = $(this);
+          var active = '#' + id === link.attr('href');
+
+          link.toggleClass('active', active);
+          link.attr('tabindex', active ? '-1' : '3');
+
+          if (options.scrollToActive && active) {
+            scroller.scrollToElement(link[0], 800);
+          }
+        });
+      }
+
+      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();
+          });
+        }
+      }
+    }
+  });
+}(jQuery));

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

@@ -0,0 +1,117 @@
+jQuery.widget('pageflow.playerControls', {
+  _create: function() {
+    var player = this.options.player;
+
+    var playButton = this.element.find('.vjs-play-control');
+    var progressHolder = this.element.find('.vjs-progress-holder');
+    var playProgress = this.element.find('.vjs-play-progress');
+    var currentTimeDisplay = this.element.find('.vjs-current-time-display');
+    var durationDisplay = this.element.find('.vjs-duration-display');
+    var progressHandler = this.element.find('.vjs-slider-handle');
+    var seeking = false;
+    var smallTimestamp = durationDisplay.html().length === 5 && durationDisplay.html().charAt(0) === "0";
+
+    if(smallTimestamp) {
+      durationDisplay.html("0:00");
+      currentTimeDisplay.html(currentTimeDisplay.html().substr(1));
+    }
+    else {
+      durationDisplay.html("00:00");
+    }
+
+    player.on('timeupdate', function (position, duration) {
+      var percent = duration > 0 ? (player.position / player.duration) * 100 : 0;
+      if(!isNaN(position)) {
+        if(smallTimestamp) {
+          $(currentTimeDisplay).html(player.formatTime(position).substr(1));
+          $(durationDisplay).html(player.formatTime(duration).substr(1));
+        }
+        else {
+          $(currentTimeDisplay).html(player.formatTime(position));
+          $(durationDisplay).html(player.formatTime(duration));
+        }
+      }
+
+      $(progressHandler).css({left: percent + "%"});
+      $(playProgress).css({width: percent + "%"});
+    });
+
+    player.on('play', function (position, duration) {
+      $(playButton).removeClass('vjs-play');
+      $(playButton).addClass('vjs-pause');
+    });
+
+    player.on('pause', function (position, duration) {
+      $(playButton).removeClass('vjs-pause');
+      $(playButton).addClass('vjs-play');
+    });
+
+    player.on('ended', function (position, duration) {
+      $(playButton).removeClass('vjs-pause');
+      $(playButton).addClass('vjs-play');
+    });
+
+    function togglePlay() {
+      if (player.playing) {
+        player.pause();
+      }
+      else {
+        player.play();
+      }
+    }
+
+    playButton.on({
+      'mousedown touchstart': function() {
+        $(this).addClass('pressed');
+      },
+      'mouseup touchend': function() {
+        $(this).removeClass('pressed');
+      },
+      'click': function() {
+        togglePlay();
+      },
+      'keypress': function(e) {
+        if (e.which == 13) {
+          var that = this;
+
+          togglePlay();
+          setTimeout(function() {
+            $(that).focus();
+          }, 20);
+        }
+      }
+    });
+
+    $(progressHolder).on('mousedown touchstart', function(event) {
+      var newProgress = (event.pageX - $(progressHolder).offset().left) / $(progressHolder).width();
+      player.seek(newProgress * player.duration);
+
+      $('body').on({
+        'mousemove touchmove': onMouseMove,
+        'mouseup touchend': onMouseUp
+      });
+
+      function onMouseMove(event) {
+        var pageX;
+        if(event.originalEvent.changedTouches || event.originalEvent.touches) {
+          pageX = event.originalEvent.changedTouches[0].pageX || event.originalEvent.touches[0].pageX;
+        } else {
+          pageX = event.pageX;
+        }
+        var newProgress = (pageX - $(progressHolder).offset().left) / $(progressHolder).width();
+
+        if (newProgress > 1) { newProgress = 1; }
+        if (newProgress < 0) { newProgress = 0; }
+
+        player.seek(newProgress * player.duration);
+      }
+
+      function onMouseUp() {
+        $('body').off({
+          'mousemove touchmove': onMouseMove,
+          'mouseup touchend': onMouseUp
+        });
+      }
+    });
+  }
+});

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

@@ -0,0 +1,87 @@
+/*global IScroll*/
+
+(function($) {
+  var ENTER_KEY = 13;
+  var SPACE_KEY = 32;
+
+  $.widget('pageflow.scrollButton', {
+    _create: function() {
+      var element = this.element;
+      var scroller = this.options.scroller;
+      var direction = this.options.direction;
+      var interval;
+
+      scroller.on('scrollEnd', function() {
+        updateVisibility();
+      });
+
+      this.element.on('click', function() {
+      });
+
+      if (this.options.page) {
+        element.on({
+          click: function () {
+            changePage();
+            element.blur();
+            return false;
+          },
+
+          keypress: function(e) {
+            if (e.which == SPACE_KEY) {
+              changePage();
+            }
+          },
+
+          touchstart: function() {
+            changePage();
+          }
+        });
+      }
+
+      updateVisibility();
+
+      function updateVisibility() {
+        element.toggle(!atBoundary());
+      }
+
+      function changePage() {
+        if (direction === 'top' || direction === 'left') {
+          scroller.prev();
+        }
+        else if (direction === 'down' || direction === 'right') {
+          scroller.next();
+        }
+      }
+
+      function scrollBy(delta, duration) {
+        if (direction === 'top') {
+          scroller.scrollBy(0, delta, duration);
+        }
+        else if (direction === 'left') {
+          scroller.scrollBy(delta, 0, duration);
+        }
+        else if (direction === 'down') {
+          scroller.scrollBy(0, -delta, duration);
+        }
+        else {
+          scroller.scrollBy(-delta, 0, duration);
+        }
+      }
+
+      function atBoundary() {
+        if (direction === 'top') {
+          return (scroller.y >= 0);
+        }
+        else if (direction === 'left') {
+          return (scroller.x >= 0);
+        }
+        else if (direction === 'down') {
+          return (scroller.y <= scroller.maxScrollY);
+        }
+        else {
+          return (scroller.x <= scroller.maxScrollX);
+        }
+      }
+    }
+  });
+}(jQuery));