pageflow 0.0.1

data/app/assets/javascripts/pageflow/page_types/mixins/common_page_css_classes.js

@@ -0,0 +1,11 @@
+pageflow.commonPageCssClasses = {
+  updateCommonPageCssClasses: function(pageElement, configuration) {
+    pageElement.toggleClass('invert', configuration.get('invert'));
+    pageElement.toggleClass('hide_title', configuration.get('hide_title'));
+
+    _.each(pageflow.Page.textPositions, function(position) {
+      pageElement.removeClass('text_position_' + position);
+    });
+    pageElement.addClass('text_position_' + configuration.get('text_position'));
+  }
+};

data/app/assets/javascripts/pageflow/page_types/mixins/info_box.js

@@ -0,0 +1,14 @@
+pageflow.infoBox = {
+  updateInfoBox: function(pageElement, configuration) {
+    var infoBox = pageElement.find('.add_info_box');
+
+    if (!infoBox.find('h3').length) {
+      infoBox.prepend($('<h3 />'));
+    }
+
+    infoBox.find('h3').html(configuration.get('additional_title') || '');
+    infoBox.find('p').html(configuration.get('additional_description') || '');
+
+    infoBox.toggleClass('empty', !configuration.get('additional_description') && !configuration.get('additional_title'));
+  }
+};

data/app/assets/javascripts/pageflow/page_types/mixins/video_helpers.js

@@ -0,0 +1,21 @@
+pageflow.videoHelpers = {
+  updateVideoTagForHighBandwidth: function(video) {
+    if (pageflow.features.has('high bandwidth') && !pageflow.features.has('mobile platform')) {
+      video.attr('poster', video.attr('data-large-poster'));
+
+      if (pageflow.features.has('rewrite video sources support')) {
+        video.find('source').each(function() {
+          var source = $(this);
+          source.attr('src', source.attr('data-high-src'));
+        });
+      }
+    }
+    else {
+      video.attr('poster', video.attr('data-poster'));
+    }
+  },
+
+  updateVideoPoster: function(pageElement, imageUrl) {
+    pageElement.find('.vjs-poster').css('background-image', 'url(' + imageUrl + ')');
+  }
+};

data/app/assets/javascripts/pageflow/page_types/mixins/volume_fade.js

@@ -0,0 +1,20 @@
+pageflow.volumeFade = {
+  fadeSound: function(media, endVolume, fadeTime) {
+    var fadeResolution = 10;
+    var startVolume = media.volume();
+    var steps = fadeTime / fadeResolution;
+    var leap = (endVolume - startVolume) / steps;
+
+    clearInterval(this.fadeInterval);
+
+    if(endVolume != startVolume) {
+      var fade = this.fadeInterval = setInterval(_.bind(function() {
+        media.volume(media.volume() + leap);
+        if ((media.volume() >= endVolume && endVolume >= startVolume) ||
+          (media.volume() <= endVolume && endVolume <= startVolume)) {
+          clearInterval(fade);
+        }
+      }, this), fadeResolution);
+    }
+  }
+};

data/app/assets/javascripts/pageflow/page_types/video.js

@@ -0,0 +1,225 @@
+pageflow.pageType.register('video', _.extend({
+
+  enhance: function(pageElement, configuration) {
+    pageElement.find('.contentText').before(pageElement.find('.page_header'));
+    this._initVideoPlayer(pageElement);
+  },
+
+  preload: function(pageElement, configuration) {
+    return pageflow.preload.backgroundImage(pageElement.find('.background_image'));
+  },
+
+  prepare: function(pageElement, configuration) {
+    this.videoPlayer.ensureCreated();
+  },
+
+  activating: function(pageElement, configuration) {
+    var videoPlayer = this.videoPlayer;
+
+    // for SkipLinks
+    $('#firstContent').attr("id","");
+    var firstContentElement = pageElement.find('*[tabindex="4"], a');
+    $(firstContentElement[0]).attr('id','firstContent');
+    //
+
+    this.videoPlayer.ensureCreated();
+
+    if (pageflow.features.has('mobile platform')) {
+      this.videoPlayer.showPosterImage();
+    }
+
+    this.listenTo(pageflow.settings, "change:volume", function(model, value) {
+      this.fadeSound(this.videoPlayer, value, 10);
+    });
+
+    $('body').on('keyup', function(e) {
+      if(e.keyCode == 32){
+        if(videoPlayer.paused()) {
+          videoPlayer.play();
+        }
+        else {
+          videoPlayer.pause();
+        }
+      }
+    });
+  },
+
+  activated: function(pageElement, configuration) {
+    this.pageElement = pageElement;
+    var videoPlayer = this.videoPlayer;
+    var that = this;
+
+    if (pageflow.features.has('mobile platform')) {
+       videoPlayer.src(videoPlayer.srcFromOptions()); // needed for iOS
+    }
+    else {
+      videoPlayer.prebuffer().done(function() {
+        videoPlayer.hidePosterImage();
+
+        that.fadeInTimeout = setTimeout(function() {
+          videoPlayer.volume(0);
+          videoPlayer.play();
+          that.fadeSound(videoPlayer, pageflow.settings.get('volume'), 1000);
+        }, 1000);
+      });
+    }
+  },
+
+  deactivating: function(pageElement, configuration) {
+    clearTimeout(this.fadeInTimeout);
+    this.fadeSound(this.videoPlayer, 0, 400);
+    this.stopListening();
+    $('body').off('keyup');
+  },
+
+  deactivated: function(pageElement, configuration) {
+    if (pageflow.features.has('mobile platform')) {
+      this.videoPlayer.showPosterImage();
+    }
+    this.videoPlayer.pause();
+    this.videoPlayer.scheduleDispose();
+  },
+
+  update: function(pageElement, configuration) {
+    pageElement.find('h2 .tagline').text(configuration.get('tagline') || '');
+    pageElement.find('h2 .title').text(configuration.get('title') || '');
+    pageElement.find('h2 .subtitle').text(configuration.get('subtitle') || '');
+
+    pageElement.find('p').html(configuration.get('text') || '');
+
+    this.updateInfoBox(pageElement, configuration);
+    this.updateCommonPageCssClasses(pageElement, configuration);
+
+    pageElement.find('.shadow').css({opacity: configuration.get('gradient_opacity') / 100});
+
+    var videoPlayer = this.videoPlayer;
+    videoPlayer.ensureCreated();
+
+    if (!this.srcDefined) {
+      videoPlayer.ready(function() {
+        videoPlayer.src(configuration.getVideoFileSources('video_file_id'));
+      });
+    }
+
+    if (!this.srcDefined || configuration.hasChanged('video_file_id')) {
+      this.srcDefined = true;
+      this.videoPlayer.src(configuration.getVideoFileSources('video_file_id'));
+    }
+
+    this.updateVideoPoster(pageElement, configuration.getVideoPosterUrl());
+  },
+
+  _initVideoPlayer: function(pageElement) {
+    var videoPlayer = new pageflow.VideoPlayer.Lazy(pageElement.find('[data-template=video]'), {
+      bufferUnderrunWaiting: true,
+      controls: true,
+      customControlsOnMobile: true,
+      width: '100%',
+      height: '100%'
+    });
+
+    this.videoPlayer = videoPlayer;
+
+    videoPlayer.ready(function() {
+      videoPlayer.showPosterImage();
+
+      var addInfoBox = pageElement.find('.add_info_box'),
+          controls = pageElement.find('.controls'),
+          controlBar = pageElement.find('.vjs-control-bar'),
+          playButton = pageElement.find('.vjs-play-control'),
+          loadingSpinner = pageElement.find('.vjs-loading-spinner'),
+          poster = pageElement.find('.vjs-poster'),
+          video =  pageElement.find('video');
+
+      controlBar.appendTo(controls);
+      //pageElement.find('.scroller').after(controls);
+
+      controlBar.addClass('vjs-default-skin vjs-player');
+      playButton.before(loadingSpinner);
+      playButton.attr('tabindex','4');
+
+      playButton.on({
+        'mousedown touchstart': function() {
+          $(this).addClass('pressed');
+        },
+        'mouseup touchend': function() {
+          $(this).removeClass('pressed');
+        }
+      });
+
+      videoPlayer.on('bufferunderrun', function() {
+        loadingSpinner.addClass('showing-for-underrun');
+      });
+
+      videoPlayer.on('timeupdate', function() {
+        loadingSpinner.removeClass('showing-for-underrun');
+      });
+
+      if (pageflow.features.has('phone platform')) {
+        // alternate poster image handling
+        video.attr("style", "visibility:hidden");
+        $("<div class='vjs-poster-mobile' style='" +
+          poster.attr('style') +
+          "display:block; background-size: coverr;'></div>").appendTo(pageElement.find(".videoWrapper"));
+        poster.removeClass('vjs-poster').addClass('vjs-poster-mobile');
+
+        // listening for exit fullscreen to force pausing
+        $(document).on("fullscreenchange mozfullscreenchange webkitfullscreenchange", function() {
+          if (!document.fullscreenElement && !document.mozFullScreen && !document.webkitIsFullScreen) {
+            videoPlayer.pause();
+          }
+        });
+      }
+
+      var timeout, scrollIndicatorTimeout,
+          scrollIndicator = $('.entry .scroll_indicator'),
+          pageContent = pageElement.find('.scroller, .controls, .shadow');
+
+      videoPlayer.on("pause", function() {
+        pageContent.addClass('lock-showing');
+
+        scrollIndicator.removeClass('faded');
+        clearTimeout(scrollIndicatorTimeout);
+      });
+
+      videoPlayer.on("play", function() {
+        pageContent.removeClass('lock-showing');
+
+        scrollIndicatorTimeout = setTimeout(function() {
+          scrollIndicator.addClass('faded');
+        }, 2000);
+      });
+
+      videoPlayer.on("ended", function() {
+        scrollIndicator.removeClass('faded');
+        clearTimeout(scrollIndicatorTimeout);
+
+        if(pageflow.features.has('mobile platform')) {
+          this.showPosterImage();
+        }
+      });
+
+      pageElement.on('mousemove', autoHideControls);
+      $('body').on('keydown', autoHideControls);
+      pageElement.find('.content').on('touchstart', autoHideControls);
+
+      function autoHideControls() {
+        showControls();
+        if (!pageflow.features.has('phone platform')) {
+          clearTimeout(timeout);
+          timeout = setTimeout(hideControls, 2000);
+        }
+      }
+
+      function hideControls() {
+        if (!videoPlayer.paused()) {
+          pageContent.addClass('fade-out').removeClass('fade-in');
+        }
+      }
+
+      function showControls() {
+        pageContent.addClass('fade-in').removeClass('fade-out');
+      }
+    });
+  }
+}, pageflow.volumeFade, pageflow.videoHelpers, pageflow.infoBox, pageflow.commonPageCssClasses));

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

@@ -0,0 +1,28 @@
+(function() {
+  pageflow.preload = {
+    image: function(url) {
+      return $.Deferred(function(deferred) {
+        var image = new Image();
+
+        image.onload = deferred.resolve;
+        image.onerror = deferred.resolve;
+
+        image.src = url;
+      }).promise();
+    },
+
+    backgroundImage: function(element) {
+      $(element).parent().addClass('load_images');
+
+      if ($(element).length) {
+        var propertyValue = window.getComputedStyle($(element)[0]).getPropertyValue('background-image');
+
+        if (propertyValue.match(/^url/)) {
+          return this.image(propertyValue.replace(/^url\(['"]?/, '').replace(/['"]?\)$/, ''));
+        }
+      }
+
+      return $.Deferred().resolve().promise();
+    }
+  };
+}());

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

@@ -0,0 +1,35 @@
+/**
+ * A promise that is resolved once the document is printed.
+ */
+
+
+// old promise not working properly, resolved in print-mode
+
+/*  return new $.Deferred(function(deferred) {
+    if (window.matchMedia) {
+      var mediaQueryList = window.matchMedia('print');
+      mediaQueryList.addListener(function(mql) {
+        if (mql.matches) {
+          deferred.resolve();
+        }
+      });
+    }
+
+    window.onbeforeprint = deferred.resolve;
+  });
+}; */
+
+jQuery(function($) {
+
+// now bound to pageflow.ready
+
+  pageflow.ready.then(function() {
+    $('img.print_image').each(function() {
+      var img = $(this);
+
+      if (img.data('src')) {
+        img.attr('src', img.data('printsrc'));
+      }
+    });
+  });
+});

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

@@ -0,0 +1,48 @@
+pageflow.ready = new $.Deferred(function(readyDeferred) {
+  window.onload = function() {
+    pageflow.features.detect().then(function() {
+      $('body').one('pagepreloaded', function() {
+        readyDeferred.resolve();
+      });
+
+      $('[data-role=slideshow]').each(function() {
+        var configurationsById = _.reduce(pageflow.pages, function(memo, page) {
+          memo[page.id] = page.configuration;
+          return memo;
+        }, {});
+
+        pageflow.slides = new pageflow.Slideshow($(this), configurationsById);
+        pageflow.history = new pageflow.History(pageflow.slides);
+      });
+
+      $('.header').header({
+        slideshow: pageflow.slides
+      });
+      $('.navigation').navigation();
+      $('.navigation_mobile').navigationMobile();
+      $('.overview').overview();
+      $('.multimedia_alert').multimediaAlert();
+
+      $("body").on('click mousedown', 'a, [tabindex]', function() {
+        $(this).blur();
+      });
+
+      $("body").on('keypress', 'a, [tabindex]', function(e) {
+        if (e.which == 13) {
+          $(this).click();
+        }
+      });
+
+      $("body").on("keyup", "a, [tabindex]", function (e) {
+        e.stopPropagation();
+      });
+
+      $(".content_link").attr("href","#firstContent");
+      $(".content_link").click(function(e) {
+        $("#firstContent").focus();
+        e.preventDefault();
+        return false; }
+      );
+    });
+  };
+}).promise();

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

@@ -0,0 +1,22 @@
+pageflow.Settings = Backbone.Model.extend({
+  defaults: {
+    volume: 1
+  },
+
+  initialize: function() {
+    if (localStorage['pageflow.settings']) {
+      try {
+        this.set(JSON.parse(localStorage['pageflow.settings']));
+      }
+      catch(e) {
+        pageflow.log(e);
+      }
+    }
+
+    this.on('change', function() {
+      localStorage['pageflow.settings'] = JSON.stringify(this);
+    });
+  }
+});
+
+pageflow.settings = new pageflow.Settings();

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

@@ -0,0 +1,163 @@
+//=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/swipe_gesture
+//=require ./slideshow/hide_text
+//=require ./slideshow/hide_text_on_swipe
+
+pageflow.Slideshow = function($el, configurations) {
+  var transitionDuration = 1000,
+      transitioning = false,
+      preload = new pageflow.ProgressivePreload(),
+      currentPage = $(),
+      currentPageIndex, pages;
+
+  configurations = configurations || {};
+
+  function transitionMutex(fn, context) {
+    if (transitioning) { return; }
+    transitioning = true;
+
+    fn.call(context);
+
+    setTimeout(function() {
+      transitioning = false;
+    }, transitionDuration);
+  }
+
+  function nearestPage(index) {
+    var result = $(pages.get(index));
+
+    if (!result.length) {
+      return pages.last();
+    }
+
+    return result;
+  }
+
+  this.nextPageExists = function() {
+    return (!currentPage.is(pages.last()));
+  };
+
+  this.back = function() {
+    this.goTo(currentPage.prev('.page'));
+  };
+
+  this.next = function() {
+    this.goTo(currentPage.next('.page'));
+  };
+
+  this.goToById = function(id) {
+    this.goTo($el.find('[data-id=' + id + ']'));
+  };
+
+  this.goToByPermaId = function(permaId) {
+    if (permaId) {
+      this.goTo($el.find('#' + permaId));
+    }
+  };
+
+  this.goTo = function(page) {
+    if (page.length && !page.is(currentPage)) {
+      transitionMutex(function() {
+        var previousPage = currentPage;
+        currentPage = page;
+        currentPageIndex = currentPage.index();
+
+        var direction = currentPageIndex > previousPage.index() ? 'forwards' : 'backwards';
+
+        previousPage.page('deactivate', {direction: direction});
+        currentPage.page('activate', {direction: direction});
+
+        preload.start(currentPage);
+        $el.trigger('slideshowchangepage');
+      }, this);
+    }
+  };
+
+  this.goToFirstPage = function() {
+    this.goTo(pages.first());
+  };
+
+  this.update = function() {
+    pages = $el.find('section.page');
+
+    pages.each(function(index) {
+      var $page = $(this);
+
+      $page.page({
+        index: index,
+        configuration: configurations[$page.data('id')]
+      });
+    });
+
+    ensureCurrentPage();
+  };
+
+  this.currentPage = function() {
+    return currentPage;
+  };
+
+  function ensureCurrentPage() {
+    var newCurrentPage = findNewCurrentPage();
+
+    if (newCurrentPage) {
+      currentPage = newCurrentPage;
+      currentPageIndex = currentPage.index();
+
+      currentPage.page('activateAsLandingPage');
+      preload.start(currentPage);
+    }
+  }
+
+  function findNewCurrentPage() {
+    if (!currentPage.length) {
+      return pages.first();
+    }
+    else if (!currentPage.parent().length) {
+      return nearestPage(currentPageIndex);
+    }
+  }
+
+  this.on = function() {
+    $el.on.apply($el, arguments);
+  };
+
+  this.triggerResizeHooks = function() {
+    currentPage.page('resize');
+  };
+
+  $el.on('scrollerbumpup', _.bind(function(event) {
+    this.back();
+  }, this));
+
+  $el.on('scrollerbumpdown', _.bind(function(event) {
+    this.next();
+  }, this));
+
+  $el.on('click', 'a.to_top', _.bind(function() {
+    this.goToFirstPage();
+  }, this));
+
+  $(window).on('resize', this.triggerResizeHooks);
+
+  // prevent page from bouncing in modern browsers
+  $(document).on('touchmove', function (e) { e.preventDefault(); });
+
+  $el.addClass('slideshow');
+
+  $el.find('.hidden_text_indicator').hiddenTextIndicator({parent : $('body')});
+  this.on('slideshowchangepage', function() {
+    pageflow.hideText.deactivate();
+  });
+
+  var scrollIndicator = $el.find('.scroll_indicator');
+  scrollIndicator.scrollIndicator({parent : this});
+  scrollIndicator.on('click', _.bind(function(event) {
+    this.next();
+  }, this));
+
+  this.update();
+};