pageflow 0.8.2 → 0.9.0

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

@@ -4,10 +4,12 @@ pageflow.Settings = Backbone.Model.extend({
   },
 
   initialize: function() {
-    if (window.localStorage) {
-      if (localStorage['pageflow.settings']) {
+    var storage = this.getLocalStorage();
+
+    if (storage) {
+      if (storage['pageflow.settings']) {
         try {
-          this.set(JSON.parse(localStorage['pageflow.settings']));
+          this.set(JSON.parse(storage['pageflow.settings']));
         }
         catch(e) {
           pageflow.log(e);
@@ -15,9 +17,20 @@ pageflow.Settings = Backbone.Model.extend({
       }
 
       this.on('change', function() {
-        localStorage['pageflow.settings'] = JSON.stringify(this);
+        storage['pageflow.settings'] = JSON.stringify(this);
       });
     }
+  },
+
+  getLocalStorage: function() {
+    try {
+      return window.localStorage;
+    }
+    catch(e) {
+      // Safari throws SecurityError when accessing window.localStorage
+      // if cookies/website data are disabled.
+      return null;
+    }
   }
 });
 

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

@@ -1,18 +1,23 @@
+//=require ./slideshow/atmo
+//=require ./slideshow/lazy_page_widget
 //=require ./slideshow/page_widget
 //=require ./slideshow/scroller_widget
 //=require ./slideshow/scroll_indicator_widget
 //=require ./slideshow/hidden_text_indicator_widget
 //=require ./slideshow/progressive_preload
+//=require ./slideshow/adjacent_preparer
 //=require ./slideshow/swipe_gesture
 //=require ./slideshow/hide_text
 //=require ./slideshow/hide_text_on_swipe
+//=require ./slideshow/dom_order_scroll_navigator
 
 pageflow.Slideshow = function($el, configurations) {
-  var transitionDuration = 1000,
-      transitioning = false,
+  var transitioning = false,
       preload = new pageflow.ProgressivePreload(),
       currentPage = $(),
-      currentPageIndex, pages;
+      pages = $(),
+      that = this,
+      currentPageIndex;
 
   configurations = configurations || {};
 
@@ -20,7 +25,7 @@ pageflow.Slideshow = function($el, configurations) {
     if (transitioning) { return; }
     transitioning = true;
 
-    fn.call(context);
+    var transitionDuration = fn.call(context);
 
     setTimeout(function() {
       transitioning = false;
@@ -37,25 +42,49 @@ pageflow.Slideshow = function($el, configurations) {
     return result;
   }
 
+  function currentPagePermaId() {
+    return parseInt(currentPage.attr('id'), 10);
+  }
+
   this.nextPageExists = function() {
-    return (!currentPage.is(pages.last()));
+    return this.scrollNavigator.nextPageExists(currentPage, pages);
+  };
+
+  this.previousPageExists = function() {
+    return this.scrollNavigator.previousPageExists(currentPage, pages);
+  };
+
+  this.isOnLandingPage = function() {
+    return currentPage.is(this.scrollNavigator.getLandingPage(pages));
+  };
+
+  this.goToLandingPage = function() {
+    this.goTo(this.scrollNavigator.getLandingPage(pages));
   };
 
   this.back = function() {
-    this.goTo(currentPage.prev('.page'), {position: 'bottom'});
+    this.scrollNavigator.back(currentPage);
   };
 
   this.next = function() {
-    this.goTo(currentPage.next('.page'));
+    this.scrollNavigator.next(currentPage);
   };
 
-  this.goToById = function(id) {
-    this.goTo($el.find('[data-id=' + id + ']'));
+  this.parentPageExists = function() {
+    return !!pageflow.entryData.getParentPagePermaIdByPagePermaId(currentPagePermaId());
   };
 
-  this.goToByPermaId = function(permaId) {
+  this.goToParentPage = function() {
+    this.goToByPermaId(pageflow.entryData.getParentPagePermaIdByPagePermaId(currentPagePermaId()));
+  };
+
+  this.goToById = function(id, options) {
+    return this.goTo($el.find('[data-id=' + id + ']'), options);
+  };
+
+  this.goToByPermaId = function(permaId, options) {
     if (permaId) {
-      this.goTo($el.find('#' + permaId));
+      return this.goTo($el.find('#' + permaId), options);
     }
   };
 
@@ -68,19 +97,31 @@ pageflow.Slideshow = function($el, configurations) {
         currentPage = page;
         currentPageIndex = currentPage.index();
 
-        var direction = currentPageIndex > previousPage.index() ? 'forwards' : 'backwards';
+        var direction = this.scrollNavigator.getTransitionDirection(previousPage, currentPage, options);
 
-        previousPage.page('deactivate', {direction: direction});
-        currentPage.page('activate', {direction: direction, position: options.position});
+        var outDuration = previousPage.page('deactivate', {
+          direction: direction,
+          transition: options.transition
+        });
+
+        var inDuration = currentPage.page('activate', {
+          direction: direction,
+          position: options.position,
+          transition: options.transition
+        });
 
         preload.start(currentPage);
-        $el.trigger('slideshowchangepage');
+        $el.trigger('slideshowchangepage', [options]);
+
+        return Math.max(outDuration, inDuration);
       }, this);
+
+      return true;
     }
   };
 
   this.goToFirstPage = function() {
-    this.goTo(pages.first());
+    return this.goTo(pages.first());
   };
 
   this.update = function() {
@@ -102,6 +143,10 @@ pageflow.Slideshow = function($el, configurations) {
     return currentPage;
   };
 
+  this.currentPageConfiguration = function() {
+    return currentPage.page('getConfiguration');
+  };
+
   function ensureCurrentPage() {
     var newCurrentPage = findNewCurrentPage();
 
@@ -116,7 +161,7 @@ pageflow.Slideshow = function($el, configurations) {
 
   function findNewCurrentPage() {
     if (!currentPage.length) {
-      return pages.first();
+      return that.scrollNavigator.getLandingPage(pages);
     }
     else if (!currentPage.parent().length) {
       return nearestPage(currentPageIndex);
@@ -140,7 +185,7 @@ pageflow.Slideshow = function($el, configurations) {
   }, this));
 
   $el.on('click', 'a.to_top', _.bind(function() {
-    this.goToFirstPage();
+    this.goToLandingPage();
   }, this));
 
   $(window).on('resize', this.triggerResizeHooks);
@@ -155,9 +200,44 @@ pageflow.Slideshow = function($el, configurations) {
     pageflow.hideText.deactivate();
   });
 
-  var scrollIndicator = $el.find('.scroll_indicator');
-  scrollIndicator.scrollIndicator({parent : this});
-  scrollIndicator.on('click', _.bind(function(event) {
-    this.next();
-  }, this));
+  $el.find('.scroll_indicator').scrollIndicator({parent: this});
+
+  this.scrollNavigator = new pageflow.DomOrderScrollNavigator(this);
+  this.preparer = pageflow.AdjacentPreparer.create(function() { return pages; }, this.scrollNavigator).attach(pageflow.events);
+};
+
+pageflow.Slideshow.setup = function(options) {
+  function configurationsById(pages) {
+    return _.reduce(pages, function(memo, page) {
+      memo[page.id] = page.configuration;
+      return memo;
+    }, {});
+  }
+
+  pageflow.slides = new pageflow.Slideshow(
+    options.element,
+    configurationsById(options.pages)
+  );
+
+  pageflow.features.enable('slideshow', options.enabledFeatureNames || []);
+
+  pageflow.atmo = pageflow.Atmo.create(
+    pageflow.slides,
+    pageflow.events,
+    pageflow.audio
+  );
+
+  pageflow.history = pageflow.History.create(
+    pageflow.slides,
+    {simulate: options.simulateHistory}
+  );
+
+  if (options.beforeFirstUpdate) {
+    options.beforeFirstUpdate();
+  }
+
+  pageflow.slides.update();
+  pageflow.history.start();
+
+  return pageflow.slides;
 };

data/app/assets/javascripts/pageflow/slideshow/adjacent_pages.js

@@ -0,0 +1,26 @@
+pageflow.AdjacentPages = pageflow.Object.extend({
+  initialize: function(pages, scrollNavigator) {
+    this.pages = pages;
+    this.scrollNavigator = scrollNavigator;
+  },
+
+  of: function(page) {
+    var result = [];
+    var pages = this.pages();
+    var nextPage = this.scrollNavigator.getNextPage(page.element, pages);
+
+    if (nextPage.length) {
+      result.push(nextPage.page('instance'));
+    }
+
+    _(page.linkedPages()).each(function(permaId) {
+      var linkedPage = pages.filter('#' + permaId);
+
+      if (linkedPage.length) {
+        result.push(linkedPage.page('instance'));
+      }
+    }, this);
+
+    return result;
+  }
+});

data/app/assets/javascripts/pageflow/slideshow/adjacent_preparer.js

@@ -0,0 +1,44 @@
+//= require ./adjacent_pages
+
+pageflow.AdjacentPreparer = pageflow.Object.extend({
+  initialize: function(adjacentPages) {
+    this.adjacentPages = adjacentPages;
+  },
+
+  attach: function(events) {
+    this.listenTo(events, 'page:change', this.schedule);
+  },
+
+  schedule: function(page) {
+    clearTimeout(this.scheduleTimeout);
+
+    var prepare = _.bind(this.prepareAdjacent, this, page.element.page('instance'));
+    this.scheduleTimeout = setTimeout(prepare, page.prepareNextPageTimeout());
+  },
+
+  prepareAdjacent: function(page) {
+    var adjacentPages = this.adjacentPages.of(page);
+    var noLongerAdjacentPages = _.difference(this.lastAdjacentPages, adjacentPages, [page]);
+    var newAdjacentPages = _.difference(adjacentPages, this.lastAdjacentPages);
+
+    _(noLongerAdjacentPages).each(function(page) {
+      page.unprepare();
+    });
+
+    _(newAdjacentPages).each(function(adjacentPage) {
+      adjacentPage.prepare();
+      adjacentPage.preload();
+    });
+
+    this.lastAdjacentPages = adjacentPages;
+  }
+});
+
+pageflow.AdjacentPreparer.create = function(pages, scrollNavigator) {
+  return new pageflow.AdjacentPreparer(
+    new pageflow.AdjacentPages(
+      pages,
+      scrollNavigator
+    )
+  );
+};

data/app/assets/javascripts/pageflow/slideshow/atmo.js

@@ -0,0 +1,105 @@
+(function() {
+  var attributeName = 'atmo_audio_file_id';
+
+  pageflow.Atmo = pageflow.Object.extend({
+    initialize: function(slideshow, events, multiPlayer) {
+      this.slideshow = slideshow;
+      this.multiPlayer = multiPlayer;
+      this.disabled = false;
+
+      this.listenTo(events, 'page:change page:update', function() {
+        this.update();
+      });
+    },
+
+    disable: function() {
+      this.disabled = true;
+      this.multiPlayer.fadeOutAndPause();
+
+      pageflow.events.trigger('atmo:disabled');
+    },
+
+    enable: function() {
+      this.disabled = false;
+      this.update();
+
+      pageflow.events.trigger('atmo:enabled');
+    },
+
+    pause: function() {
+      if (pageflow.browser.has('volume control support')) {
+        return this.multiPlayer.fadeOutAndPause();
+      }
+      else {
+        this.multiPlayer.pause();
+      }
+    },
+
+    turnDown: function() {
+      if (pageflow.browser.has('volume control support')) {
+        return this.multiPlayer.changeVolumeFactor(0.2);
+      }
+      else {
+        this.multiPlayer.pause();
+      }
+    },
+
+    resume: function() {
+      if (this.multiPlayer.paused()) {
+        if (this.disabled) {
+          return new $.Deferred().resolve().promise();
+        }
+        else {
+          return this.multiPlayer.resumeAndFadeIn();
+        }
+      }
+      else {
+        return this.multiPlayer.changeVolumeFactor(1);
+      }
+    },
+
+    update: function() {
+      var configuration = this.slideshow.currentPageConfiguration();
+
+      if (!this.disabled) {
+        this.multiPlayer.fadeTo(configuration[attributeName]);
+      }
+    },
+
+    createMediaPlayerHooks: function(configuration) {
+      var atmo = this;
+
+      return {
+        before: function() {
+          if (configuration.atmo_during_playback === 'mute') {
+            atmo.pause();
+          }
+          else if (configuration.atmo_during_playback === 'turn_down') {
+            atmo.turnDown();
+          }
+        },
+
+        after: function() {
+          atmo.resume();
+        }
+      };
+    }
+  });
+
+  pageflow.Atmo.create = function(slideshow, events, audio) {
+    return new pageflow.Atmo(
+      slideshow,
+      events,
+      audio.createMultiPlayer({
+        loop: true,
+        fadeDuration: 500,
+        crossFade: true,
+        playFromBeginning: false,
+        rewindOnChange: true,
+        pauseInBackground: true
+      })
+    );
+  };
+
+  pageflow.Atmo.duringPlaybackModes = ['play', 'mute', 'turn_down'];
+}());

data/app/assets/javascripts/pageflow/slideshow/dom_order_scroll_navigator.js

@@ -0,0 +1,29 @@
+pageflow.DomOrderScrollNavigator = function(slideshow) {
+  this.getLandingPage = function(pages) {
+    return pages.first();
+  };
+
+  this.back = function(currentPage) {
+    slideshow.goTo(currentPage.prev('.page'), {position: 'bottom'});
+  };
+
+  this.next = function(currentPage) {
+    slideshow.goTo(currentPage.next('.page'));
+  };
+
+  this.nextPageExists = function(currentPage, pages) {
+    return !currentPage.is(pages.last());
+  };
+
+  this.previousPageExists = function(currentPage, pages) {
+    return !currentPage.is(pages.first());
+  };
+
+  this.getNextPage = function(currentPage, pages) {
+    return currentPage.next('.page');
+  };
+
+  this.getTransitionDirection = function(previousPage, currentPage, options) {
+    return (currentPage.index() > previousPage.index() ? 'forwards' : 'backwards');
+  };
+};