Browse Source

https://twitter.com/iamdevloper/status/520457121222377472

windhamdavid 5 years ago
parent
commit
94a2bc45cd
2 changed files with 3726 additions and 0 deletions
  1. 3158 0
      css/animate.css
  2. 568 0
      js/smooth.js

File diff suppressed because it is too large
+ 3158 - 0
css/animate.css


+ 568 - 0
js/smooth.js

@@ -0,0 +1,568 @@
+/**
+ * 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);