123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568 |
- /**
- * 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);
|