|
|
@@ -1,568 +0,0 @@
|
|
|
-/**
|
|
|
- * smoothState.js is a jQuery plugin to stop page load jank.
|
|
|
- *
|
|
|
- * This jQuery plugin progressively enhances page loads to
|
|
|
- * behave more like a single-page application.
|
|
|
- *
|
|
|
- * @author Miguel Ángel Pérez reachme@miguel-perez.com
|
|
|
- * @see https://github.com/miguel-perez/jquery.smoothState.js
|
|
|
- *
|
|
|
- */
|
|
|
-;(function ( $, window, document, undefined ) {
|
|
|
- "use strict";
|
|
|
-
|
|
|
- var
|
|
|
- /** Used later to scroll page to the top */
|
|
|
- $body = $("html, body"),
|
|
|
-
|
|
|
- /** Used in development mode to console out useful warnings */
|
|
|
- consl = (window.console || false),
|
|
|
-
|
|
|
- /** Plugin default options */
|
|
|
- defaults = {
|
|
|
-
|
|
|
- /** jquery element string to specify which anchors smoothstate should bind to */
|
|
|
- anchors : "a",
|
|
|
-
|
|
|
- /** If set to true, smoothState will prefetch a link's contents on hover */
|
|
|
- prefetch : false,
|
|
|
-
|
|
|
- /** A selecor that deinfes with links should be ignored by smoothState */
|
|
|
- blacklist : ".no-smoothstate, [target]",
|
|
|
-
|
|
|
- /** If set to true, smoothState will log useful debug information instead of aborting */
|
|
|
- development : false,
|
|
|
-
|
|
|
- /** The number of pages smoothState will try to store in memory and not request again */
|
|
|
- pageCacheSize : 0,
|
|
|
-
|
|
|
- /** A function that can be used to alter urls before they are used to request content */
|
|
|
- alterRequestUrl : function (url) {
|
|
|
- return url;
|
|
|
- },
|
|
|
-
|
|
|
- /** Run when a link has been activated */
|
|
|
- onStart : {
|
|
|
- duration: 0,
|
|
|
- render: function (url, $container) {
|
|
|
- $body.scrollTop(0);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /** Run if the page request is still pending and onStart has finished animating */
|
|
|
- onProgress : {
|
|
|
- duration: 0,
|
|
|
- render: function (url, $container) {
|
|
|
- $body.css("cursor", "wait");
|
|
|
- $body.find("a").css("cursor", "wait");
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /** Run when requested content is ready to be injected into the page */
|
|
|
- onEnd : {
|
|
|
- duration: 0,
|
|
|
- render: function (url, $container, $content) {
|
|
|
- $body.css("cursor", "auto");
|
|
|
- $body.find("a").css("cursor", "auto");
|
|
|
- $container.html($content);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /** Run when content has been injected and all animations are complete */
|
|
|
- callback : function(url, $container, $content) {
|
|
|
-
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /** Utility functions that are decoupled from SmoothState */
|
|
|
- utility = {
|
|
|
-
|
|
|
- /**
|
|
|
- * Checks to see if the url is external
|
|
|
- * @param {string} url - url being evaluated
|
|
|
- * @see http://stackoverflow.com/questions/6238351/fastest-way-to-detect-external-urls
|
|
|
- *
|
|
|
- */
|
|
|
- isExternal: function (url) {
|
|
|
- var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
|
|
|
- if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== window.location.protocol) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(":(" + {"http:": 80, "https:": 443}[window.location.protocol] + ")?$"), "") !== window.location.host) {
|
|
|
- return true;
|
|
|
- }
|
|
|
- return false;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Checks to see if the url is an internal hash
|
|
|
- * @param {string} url - url being evaluated
|
|
|
- *
|
|
|
- */
|
|
|
- isHash: function (url) {
|
|
|
- var hasPathname = (url.indexOf(window.location.pathname) > 0) ? true : false,
|
|
|
- hasHash = (url.indexOf("#") > 0) ? true : false;
|
|
|
- return (hasPathname && hasHash) ? true : false;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Checks to see if we should be loading this URL
|
|
|
- * @param {string} url - url being evaluated
|
|
|
- * @param {string} blacklist - jquery selector
|
|
|
- *
|
|
|
- */
|
|
|
- shouldLoad: function ($anchor, blacklist) {
|
|
|
- var url = $anchor.prop("href");
|
|
|
- // URL will only be loaded if it"s not an external link, hash, or blacklisted
|
|
|
- return (!utility.isExternal(url) && !utility.isHash(url) && !$anchor.is(blacklist));
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Prevents jQuery from stripping elements from $(html)
|
|
|
- * @param {string} url - url being evaluated
|
|
|
- * @author Ben Alman http://benalman.com/
|
|
|
- * @see https://gist.github.com/cowboy/742952
|
|
|
- *
|
|
|
- */
|
|
|
- htmlDoc: function (html) {
|
|
|
- var parent,
|
|
|
- elems = $(),
|
|
|
- matchTag = /<(\/?)(html|head|body|title|base|meta)(\s+[^>]*)?>/ig,
|
|
|
- prefix = "ss" + Math.round(Math.random() * 100000),
|
|
|
- htmlParsed = html.replace(matchTag, function(tag, slash, name, attrs) {
|
|
|
- var obj = {};
|
|
|
- if (!slash) {
|
|
|
- elems = elems.add("<" + name + "/>");
|
|
|
- if (attrs) {
|
|
|
- $.each($("<div" + attrs + "/>")[0].attributes, function(i, attr) {
|
|
|
- obj[attr.name] = attr.value;
|
|
|
- });
|
|
|
- }
|
|
|
- elems.eq(-1).attr(obj);
|
|
|
- }
|
|
|
- return "<" + slash + "div" + (slash ? "" : " id='" + prefix + (elems.length - 1) + "'") + ">";
|
|
|
- });
|
|
|
-
|
|
|
- // If no placeholder elements were necessary, just return normal
|
|
|
- // jQuery-parsed HTML.
|
|
|
- if (!elems.length) {
|
|
|
- return $(html);
|
|
|
- }
|
|
|
- // Create parent node if it hasn"t been created yet.
|
|
|
- if (!parent) {
|
|
|
- parent = $("<div/>");
|
|
|
- }
|
|
|
- // Create the parent node and append the parsed, place-held HTML.
|
|
|
- parent.html(htmlParsed);
|
|
|
-
|
|
|
- // Replace each placeholder element with its intended element.
|
|
|
- $.each(elems, function(i) {
|
|
|
- var elem = parent.find("#" + prefix + i).before(elems[i]);
|
|
|
- elems.eq(i).html(elem.contents());
|
|
|
- elem.remove();
|
|
|
- });
|
|
|
-
|
|
|
- return parent.children().unwrap();
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Resets an object if it has too many properties
|
|
|
- *
|
|
|
- * This is used to clear the "cache" object that stores
|
|
|
- * all of the html. This would prevent the client from
|
|
|
- * running out of memory and allow the user to hit the
|
|
|
- * server for a fresh copy of the content.
|
|
|
- *
|
|
|
- * @param {object} obj
|
|
|
- * @param {number} cap
|
|
|
- *
|
|
|
- */
|
|
|
- clearIfOverCapacity: function (obj, cap) {
|
|
|
- // Polyfill Object.keys if it doesn"t exist
|
|
|
- if (!Object.keys) {
|
|
|
- Object.keys = function (obj) {
|
|
|
- var keys = [],
|
|
|
- k;
|
|
|
- for (k in obj) {
|
|
|
- if (Object.prototype.hasOwnProperty.call(obj, k)) {
|
|
|
- keys.push(k);
|
|
|
- }
|
|
|
- }
|
|
|
- return keys;
|
|
|
- };
|
|
|
- }
|
|
|
-
|
|
|
- if (Object.keys(obj).length > cap) {
|
|
|
- obj = {};
|
|
|
- }
|
|
|
-
|
|
|
- return obj;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Finds the inner content of an element, by an ID, from a jQuery object
|
|
|
- * @param {string} id
|
|
|
- * @param {object} $html
|
|
|
- *
|
|
|
- */
|
|
|
- getContentById: function (id, $html) {
|
|
|
- $html = ($html instanceof jQuery) ? $html : utility.htmlDoc($html);
|
|
|
- var $insideElem = $html.find(id),
|
|
|
- updatedContainer = ($insideElem.length) ? $.trim($insideElem.html()) : $html.filter(id).html(),
|
|
|
- newContent = (updatedContainer.length) ? $(updatedContainer) : null;
|
|
|
- return newContent;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Stores html content as jquery object in given object
|
|
|
- * @param {object} object - object contents will be stored into
|
|
|
- * @param {string} url - url to be used as the prop
|
|
|
- * @param {jquery} html - contents to store
|
|
|
- *
|
|
|
- */
|
|
|
- storePageIn: function (object, url, $html) {
|
|
|
- $html = ($html instanceof jQuery) ? $html : utility.htmlDoc($html);
|
|
|
- object[url] = { // Content is indexed by the url
|
|
|
- status: "loaded",
|
|
|
- title: $html.find("title").text(), // Stores the title of the page
|
|
|
- html: $html // Stores the contents of the page
|
|
|
- };
|
|
|
- return object;
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Triggers an "allanimationend" event when all animations are complete
|
|
|
- * @param {object} $element - jQuery object that should trigger event
|
|
|
- * @param {string} resetOn - which other events to trigger allanimationend on
|
|
|
- *
|
|
|
- */
|
|
|
- triggerAllAnimationEndEvent: function ($element, resetOn) {
|
|
|
-
|
|
|
- resetOn = " " + resetOn || "";
|
|
|
-
|
|
|
- var animationCount = 0,
|
|
|
- animationstart = "animationstart webkitAnimationStart oanimationstart MSAnimationStart",
|
|
|
- animationend = "animationend webkitAnimationEnd oanimationend MSAnimationEnd",
|
|
|
- eventname = "allanimationend",
|
|
|
- onAnimationStart = function (e) {
|
|
|
- if ($(e.delegateTarget).is($element)) {
|
|
|
- e.stopPropagation();
|
|
|
- animationCount ++;
|
|
|
- }
|
|
|
- },
|
|
|
- onAnimationEnd = function (e) {
|
|
|
- if ($(e.delegateTarget).is($element)) {
|
|
|
- e.stopPropagation();
|
|
|
- animationCount --;
|
|
|
- if(animationCount === 0) {
|
|
|
- $element.trigger(eventname);
|
|
|
- }
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- $element.on(animationstart, onAnimationStart);
|
|
|
- $element.on(animationend, onAnimationEnd);
|
|
|
-
|
|
|
- $element.on("allanimationend" + resetOn, function(){
|
|
|
- animationCount = 0;
|
|
|
- utility.redraw($element);
|
|
|
- });
|
|
|
- },
|
|
|
-
|
|
|
- /** Forces browser to redraw elements */
|
|
|
- redraw: function ($element) {
|
|
|
- $element.height(0);
|
|
|
- setTimeout(function(){$element.height("auto");}, 0);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /** Handles the popstate event, like when the user hits "back" */
|
|
|
- onPopState = function ( e ) {
|
|
|
- if(e.state !== null) {
|
|
|
- var url = window.location.href,
|
|
|
- $page = $("#" + e.state.id),
|
|
|
- page = $page.data("smoothState");
|
|
|
-
|
|
|
- if(page.href !== url && !utility.isHash(url)) {
|
|
|
- page.load(url, true);
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /** Constructor function */
|
|
|
- SmoothState = function ( element, options ) {
|
|
|
- var
|
|
|
- /** Container element smoothState is run on */
|
|
|
- $container = $(element),
|
|
|
-
|
|
|
- /** Variable that stores pages after they are requested */
|
|
|
- cache = {},
|
|
|
-
|
|
|
- /** Url of the content that is currently displayed */
|
|
|
- currentHref = window.location.href,
|
|
|
-
|
|
|
- /**
|
|
|
- * Loads the contents of a url into our container
|
|
|
- *
|
|
|
- * @param {string} url
|
|
|
- * @param {bool} isPopped - used to determine if whe should
|
|
|
- * add a new item into the history object
|
|
|
- *
|
|
|
- */
|
|
|
- load = function (url, isPopped) {
|
|
|
-
|
|
|
- /** Makes this an optional variable by setting a default */
|
|
|
- isPopped = isPopped || false;
|
|
|
-
|
|
|
- var
|
|
|
- /** Used to check if the onProgress function has been run */
|
|
|
- hasRunCallback = false,
|
|
|
-
|
|
|
- callbBackEnded = false,
|
|
|
-
|
|
|
- /** List of responses for the states of the page request */
|
|
|
- responses = {
|
|
|
-
|
|
|
- /** Page is ready, update the content */
|
|
|
- loaded: function() {
|
|
|
- var eventName = hasRunCallback ? "ss.onProgressEnd" : "ss.onStartEnd";
|
|
|
-
|
|
|
- if(!callbBackEnded || !hasRunCallback) {
|
|
|
- $container.one(eventName, function(){
|
|
|
- updateContent(url);
|
|
|
- });
|
|
|
- } else if(callbBackEnded) {
|
|
|
- updateContent(url);
|
|
|
- }
|
|
|
-
|
|
|
- if(!isPopped) {
|
|
|
- window.history.pushState({ id: $container.prop("id") }, cache[url].title, url);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /** Loading, wait 10 ms and check again */
|
|
|
- fetching: function() {
|
|
|
-
|
|
|
- if(!hasRunCallback) {
|
|
|
-
|
|
|
- hasRunCallback = true;
|
|
|
-
|
|
|
- // Run the onProgress callback and set trigger
|
|
|
- $container.one("ss.onStartEnd", function(){
|
|
|
- options.onProgress.render(url, $container, null);
|
|
|
-
|
|
|
- setTimeout(function(){
|
|
|
- $container.trigger("ss.onProgressEnd");
|
|
|
- callbBackEnded = true;
|
|
|
- }, options.onStart.duration);
|
|
|
-
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- setTimeout(function () {
|
|
|
- // Might of been canceled, better check!
|
|
|
- if(cache.hasOwnProperty(url)){
|
|
|
- responses[cache[url].status]();
|
|
|
- }
|
|
|
- }, 10);
|
|
|
- },
|
|
|
-
|
|
|
- /** Error, abort and redirect */
|
|
|
- error: function(){
|
|
|
- window.location = url;
|
|
|
- }
|
|
|
- };
|
|
|
-
|
|
|
- if (!cache.hasOwnProperty(url)) {
|
|
|
- fetch(url);
|
|
|
- }
|
|
|
-
|
|
|
- // Run the onStart callback and set trigger
|
|
|
- options.onStart.render(url, $container, null);
|
|
|
- setTimeout(function(){
|
|
|
- $container.trigger("ss.onStartEnd");
|
|
|
- }, options.onStart.duration);
|
|
|
-
|
|
|
- // Start checking for the status of content
|
|
|
- responses[cache[url].status]();
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- /** Updates the contents from cache[url] */
|
|
|
- updateContent = function (url) {
|
|
|
- // If the content has been requested and is done:
|
|
|
- var containerId = "#" + $container.prop("id"),
|
|
|
- $content = cache[url] ? utility.getContentById(containerId, cache[url].html) : null;
|
|
|
-
|
|
|
- if($content) {
|
|
|
- document.title = cache[url].title;
|
|
|
- $container.data("smoothState").href = url;
|
|
|
-
|
|
|
- // Call the onEnd callback and set trigger
|
|
|
- options.onEnd.render(url, $container, $content);
|
|
|
-
|
|
|
- $container.one("ss.onEndEnd", function(){
|
|
|
- options.callback(url, $container, $content);
|
|
|
- });
|
|
|
-
|
|
|
- setTimeout(function(){
|
|
|
- $container.trigger("ss.onEndEnd");
|
|
|
- }, options.onEnd.duration);
|
|
|
-
|
|
|
- } else if (!$content && options.development && consl) {
|
|
|
- // Throw warning to help debug in development mode
|
|
|
- consl.warn("No element with an id of " + containerId + " in response from " + url + " in " + cache);
|
|
|
- } else {
|
|
|
- // No content availble to update with, aborting...
|
|
|
- window.location = url;
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Fetches the contents of a url and stores it in the "cache" varible
|
|
|
- * @param {string} url
|
|
|
- *
|
|
|
- */
|
|
|
- fetch = function (url) {
|
|
|
-
|
|
|
- // Don"t fetch we have the content already
|
|
|
- if(cache.hasOwnProperty(url)) {
|
|
|
- return;
|
|
|
- }
|
|
|
-
|
|
|
- cache = utility.clearIfOverCapacity(cache, options.pageCacheSize);
|
|
|
-
|
|
|
- cache[url] = { status: "fetching" };
|
|
|
-
|
|
|
- var requestUrl = options.alterRequestUrl(url) || url,
|
|
|
- request = $.ajax(requestUrl);
|
|
|
-
|
|
|
- // Store contents in cache variable if successful
|
|
|
- request.success(function (html) {
|
|
|
- // Clear cache varible if it"s getting too big
|
|
|
- utility.storePageIn(cache, url, html);
|
|
|
- $container.data("smoothState").cache = cache;
|
|
|
- });
|
|
|
-
|
|
|
- // Mark as error
|
|
|
- request.error(function () {
|
|
|
- cache[url].status = "error";
|
|
|
- });
|
|
|
- },
|
|
|
- /**
|
|
|
- * Binds to the hover event of a link, used for prefetching content
|
|
|
- *
|
|
|
- * @param {object} event
|
|
|
- *
|
|
|
- */
|
|
|
- hoverAnchor = function (event) {
|
|
|
- var $anchor = $(event.currentTarget),
|
|
|
- url = $anchor.prop("href");
|
|
|
- if (utility.shouldLoad($anchor, options.blacklist)) {
|
|
|
- event.stopPropagation();
|
|
|
- fetch(url);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Binds to the click event of a link, used to show the content
|
|
|
- *
|
|
|
- * @param {object} event
|
|
|
- *
|
|
|
- */
|
|
|
- clickAnchor = function (event) {
|
|
|
- var $anchor = $(event.currentTarget),
|
|
|
- url = $anchor.prop("href");
|
|
|
-
|
|
|
- // Ctrl (or Cmd) + click must open a new tab
|
|
|
- if (!event.metaKey && !event.ctrlKey && utility.shouldLoad($anchor, options.blacklist)) {
|
|
|
- // stopPropagation so that event doesn"t fire on parent containers.
|
|
|
- event.stopPropagation();
|
|
|
- event.preventDefault();
|
|
|
- load(url);
|
|
|
- }
|
|
|
- },
|
|
|
-
|
|
|
- /**
|
|
|
- * Binds all events and inits functionality
|
|
|
- *
|
|
|
- * @param {object} event
|
|
|
- *
|
|
|
- */
|
|
|
- bindEventHandlers = function ($element) {
|
|
|
- //@todo: Handle form submissions
|
|
|
- $element.on("click", options.anchors, clickAnchor);
|
|
|
-
|
|
|
- if (options.prefetch) {
|
|
|
- $element.on("mouseover touchstart", options.anchors, hoverAnchor);
|
|
|
- }
|
|
|
-
|
|
|
- },
|
|
|
-
|
|
|
- /** Used to restart css animations with a class */
|
|
|
- toggleAnimationClass = function (classname) {
|
|
|
- var classes = $container.addClass(classname).prop("class");
|
|
|
-
|
|
|
- $container.removeClass(classes);
|
|
|
-
|
|
|
- setTimeout(function(){
|
|
|
- $container.addClass(classes);
|
|
|
- },0);
|
|
|
-
|
|
|
- $container.one("ss.onStartEnd ss.onProgressEnd ss.onEndEnd", function(){
|
|
|
- $container.removeClass(classname);
|
|
|
- });
|
|
|
-
|
|
|
- };
|
|
|
-
|
|
|
- /** Override defaults with options passed in */
|
|
|
- options = $.extend(defaults, options);
|
|
|
-
|
|
|
- /** Sets a default state */
|
|
|
- if(window.history.state === null) {
|
|
|
- window.history.replaceState({ id: $container.prop("id") }, document.title, currentHref);
|
|
|
- }
|
|
|
-
|
|
|
- /** Stores the current page in cache variable */
|
|
|
- utility.storePageIn(cache, currentHref, document.documentElement.outerHTML);
|
|
|
-
|
|
|
- /** Bind all of the event handlers on the container, not anchors */
|
|
|
- utility.triggerAllAnimationEndEvent($container, "ss.onStartEnd ss.onProgressEnd ss.onEndEnd");
|
|
|
-
|
|
|
- /** Bind all of the event handlers on the container, not anchors */
|
|
|
- bindEventHandlers($container);
|
|
|
-
|
|
|
- /** Public methods */
|
|
|
- return {
|
|
|
- href: currentHref,
|
|
|
- cache: cache,
|
|
|
- load: load,
|
|
|
- fetch: fetch,
|
|
|
- toggleAnimationClass: toggleAnimationClass
|
|
|
- };
|
|
|
- },
|
|
|
-
|
|
|
- /** Returns elements with SmoothState attached to it */
|
|
|
- declareSmoothState = function ( options ) {
|
|
|
- return this.each(function () {
|
|
|
- // Checks to make sure the smoothState element has an id and isn"t already bound
|
|
|
- if(this.id && !$.data(this, "smoothState")) {
|
|
|
- // Makes public methods available via $("element").data("smoothState");
|
|
|
- $.data(this, "smoothState", new SmoothState(this, options));
|
|
|
- } else if (!this.id && consl) {
|
|
|
- // Throw warning if in development mode
|
|
|
- consl.warn("Every smoothState container needs an id but the following one does not have one:", this);
|
|
|
- }
|
|
|
- });
|
|
|
- };
|
|
|
-
|
|
|
- /** Sets the popstate function */
|
|
|
- window.onpopstate = onPopState;
|
|
|
-
|
|
|
- /** Makes utility functions public for unit tests */
|
|
|
- $.smoothStateUtility = utility;
|
|
|
-
|
|
|
- /** Defines the smoothState plugin */
|
|
|
- $.fn.smoothState = declareSmoothState;
|
|
|
-
|
|
|
-})(jQuery, window, document);
|
