integrate smoothstate.js

5 files changed, 85 insertions, 60 deletions

diff --git a/layouts/shortcodes/map.html b/layouts/shortcodes/map.html
index 0ee7d3c..8041d43 100644
--- a/layouts/shortcodes/map.html
+++ b/layouts/shortcodes/map.html
@@ -1,50 +1,57 @@
 <div class="section">
     <div id="map" style="width: 100%; height: 40em;"></div>
-    <script>
-        document.addEventListener("DOMContentLoaded", function() {
+    <script type="text/javascript">
+        /* smoothstate-loaded pages do not trigger the DOM ready event */
+        if(typeof $ !== 'undefined' && typeof mapboxgl !== 'undefined') {
+            showMap();
+        } else {
+            document.addEventListener("DOMContentLoaded", loadMapbox);
+        }
+        function loadMapbox() {
             $('<link>').appendTo('head')
               .attr({type: 'text/css', rel: 'stylesheet'})
               .attr('href', 'https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.css');
-            $.getScript('https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.js', function() {
-                mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
-                var lon = parseFloat({{ .Get "lon" }}),
-                    lat = parseFloat({{ .Get "lat" }});
-                var map = new mapboxgl.Map({
-                    pitch: 60,
-                    bearing: 45,
-                    container: 'map',
-                    style: 'mapbox://styles/mapbox/basic-v9',
-                    zoom: {{ .Get "zoom" }},
-                    center: [lon, lat]
-                });
-                map.on('load', function() {
-                    var markers = {
-                        "type": "FeatureCollection",
-                        "features": [{
-                            "type": "Feature",
-                            "properties": {
-                                "icon": "fast-food"
-                            },
-                            "geometry": {
-                                "type": "Point",
-                                "coordinates": [lon, lat]
-                            }
-                        }]
-                    };
-                    map.addSource("markers", {
-                        "type": "geojson",
-                        "data": markers
-                    });
-                    map.addLayer({
-                        "id": "markers",
-                        "type": "symbol",
-                        "source": "markers",
-                        "layout": {
-                            "icon-image": "{icon}-15"
+            $.getScript('https://api.mapbox.com/mapbox-gl-js/v0.22.1/mapbox-gl.js', showMap);
+        };
+        function showMap() {
+            mapboxgl.accessToken = 'pk.eyJ1IjoiY29kZS13dnMiLCJhIjoiY2lzNHM4bWUwMDAwdTJ0cDBjYms5em9hYSJ9.VLxxJ6aTbWUbQchg58tgkA';
+            var lon = parseFloat({{ .Get "lon" }}),
+                lat = parseFloat({{ .Get "lat" }});
+            var map = new mapboxgl.Map({
+                pitch: 60,
+                bearing: 45,
+                container: 'map',
+                style: 'mapbox://styles/mapbox/basic-v9',
+                zoom: {{ .Get "zoom" }},
+                center: [lon, lat]
+            });
+            map.on('load', function() {
+                var markers = {
+                    "type": "FeatureCollection",
+                    "features": [{
+                        "type": "Feature",
+                        "properties": {
+                            "icon": "fast-food"
+                        },
+                        "geometry": {
+                            "type": "Point",
+                            "coordinates": [lon, lat]
                         }
-                    });
+                    }]
+                };
+                map.addSource("markers", {
+                    "type": "geojson",
+                    "data": markers
+                });
+                map.addLayer({
+                    "id": "markers",
+                    "type": "symbol",
+                    "source": "markers",
+                    "layout": {
+                        "icon-image": "{icon}-15"
+                    }
                 });
             });
-        });
+        }
     </script>
     </div>
diff --git a/themes/flog/layouts/partials/footer.html b/themes/flog/layouts/partials/footer.html
index c3c6fca..c499460 100644
--- a/themes/flog/layouts/partials/footer.html
+++ b/themes/flog/layouts/partials/footer.html
@@ -1,17 +1,21 @@
-        </div> <!-- .container -->
+            </div> <!-- .container -->
+        </div> <!-- #main -->
         <script type="text/javascript" src="/js/jquery-2.2.4.min.js"></script>
         <script type="text/javascript" src="/js/materialize-0.97.7.min.js"></script>
-        <script type="text/javascript" src="/js/masonry-4.1.min.js"></script>
+        <script type="text/javascript" src="/js/smoothstate-0.5.2.min.js"></script>
         <script type="text/javascript">
             function parallax() {
                 var yPos = -($(window).scrollTop() / $('body').data('speed'));
                 var coords = '50% ' + yPos + 'px';
                 $('body').css({ backgroundPosition: coords });
             };
+            function ready() {
+                parallax();
+            };
             $(document).ready(function() {
-                new Masonry('.grid', { itemSelector: '.grid-item', percentPosition: true, columnWidth: '.grid-sizer' });
                 $(window).scroll(parallax);
-                parallax();
+                $('#main').smoothState({ prefetch: true, onAfter: ready });
+                ready();
             });
         </script>
     </body>
diff --git a/themes/flog/layouts/partials/header.html b/themes/flog/layouts/partials/header.html
index 03331a0..5b85cdb 100644
--- a/themes/flog/layouts/partials/header.html
+++ b/themes/flog/layouts/partials/header.html
@@ -10,19 +10,20 @@
         <title>{{ .Title }}{{ if not .IsHome }} - {{ .Site.Title }}{{ end }}</title>
     </head>
     <body style="background: url(/background.jpg);" data-speed="5">
-        <header>
-            <nav class="teal lighten-2">
-                <div class="nav-wrapper">
-                    <a href="/" class="brand-logo center">{{ .Title }}</a>
-                    <ul class="left">
-                        {{ $active_section := (or .Section (or (and (not .IsPage) (lower .Title)) "")) }}
-                        {{ range $section, $p := .Site.Sections }}
-                        <li{{ if eq $active_section $section }} class="active"{{ end }}>
-                            <a href="/{{ $section }}/">{{ $section }}</a>
-                        </li>
-                        {{ end }}
-                    <ul>
-                </div>
-            </nav>
-        </header>
-        <div class="container">
+        <div id="main">
+            <header>
+                <nav class="teal lighten-2">
+                    <div class="nav-wrapper">
+                        <a href="/" class="brand-logo center">{{ .Title }}</a>
+                        <ul class="left">
+                            {{ $active_section := (or .Section (or (and (not .IsPage) (lower .Title)) "")) }}
+                            {{ range $section, $p := .Site.Sections }}
+                            <li{{ if eq $active_section $section }} class="active"{{ end }}>
+                                <a href="/{{ $section }}/">{{ $section }}</a>
+                            </li>
+                            {{ end }}
+                        <ul>
+                    </div>
+                </nav>
+            </header>
+            <div class="container">
diff --git a/themes/flog/layouts/partials/listing.html b/themes/flog/layouts/partials/listing.html
index bc97b30..4c42879 100644
--- a/themes/flog/layouts/partials/listing.html
+++ b/themes/flog/layouts/partials/listing.html
@@ -26,3 +26,7 @@
         {{ end }}
     </div>
 </main>
+<script type="text/javascript" src="/js/masonry-4.1.min.js"></script>
+<script type="text/javascript">
+    new Masonry('.grid', { itemSelector: '.grid-item', percentPosition: true, columnWidth: '.grid-sizer' });
+</script>
diff --git a/themes/flog/static/js/smoothstate-0.5.2.min.js b/themes/flog/static/js/smoothstate-0.5.2.min.js
new file mode 100644
index 0000000..329be17
--- /dev/null
+++ b/themes/flog/static/js/smoothstate-0.5.2.min.js
@@ -0,0 +1,9 @@
+/*!
+ * smoothState.js is jQuery plugin that progressively enhances
+ * page loads to behave more like a single-page application.
+ *
+ * @author  Miguel Ángel Pérez   reachme@miguel-perez.com
+ * @see     http://smoothstate.com
+ *
+ */
+!function(t){"use strict";"object"==typeof module&&"object"==typeof module.exports?t(require("jquery"),window,document):t(jQuery,window,document)}(function(t,e,n,o){"use strict";if(!e.history.pushState)return t.fn.smoothState=function(){return this},void(t.fn.smoothState.options={});if(!t.fn.smoothState){var r=t("html, body"),a=e.console,i={debug:!1,anchors:"a",hrefRegex:"",forms:"form",allowFormCaching:!1,repeatDelay:500,blacklist:".no-smoothState",prefetch:!1,prefetchOn:"mouseover touchstart",prefetchBlacklist:".no-prefetch",locationHeader:"X-SmoothState-Location",cacheLength:0,loadingClass:"is-loading",scroll:!0,alterRequest:function(t){return t},alterChangeState:function(t,e,n){return t},onBefore:function(t,e){},onStart:{duration:0,render:function(t){}},onProgress:{duration:0,render:function(t){}},onReady:{duration:0,render:function(t,e){t.html(e)}},onAfter:function(t,e){}},s={isExternal:function(t){var n=t.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);return"string"==typeof n[1]&&n[1].length>0&&n[1].toLowerCase()!==e.location.protocol?!0:"string"==typeof n[2]&&n[2].length>0&&n[2].replace(new RegExp(":("+{"http:":80,"https:":443}[e.location.protocol]+")?$"),"")!==e.location.host},stripHash:function(t){return t.replace(/#.*/,"")},isHash:function(t,n){n=n||e.location.href;var o=t.indexOf("#")>-1,r=s.stripHash(t)===s.stripHash(n);return o&&r},translate:function(e){var n={dataType:"html",type:"GET"};return e="string"==typeof e?t.extend({},n,{url:e}):t.extend({},n,e)},shouldLoadAnchor:function(t,e,n){var r=t.prop("href");return!(s.isExternal(r)||s.isHash(r)||t.is(e)||t.prop("target")||typeof n!==o&&""!==n&&-1===t.prop("href").search(n))},clearIfOverCapacity:function(t,e){return Object.keys||(Object.keys=function(t){var e,n=[];for(e in t)Object.prototype.hasOwnProperty.call(t,e)&&n.push(e);return n}),Object.keys(t).length>e&&(t={}),t},storePageIn:function(e,n,o,r,a,i){var s=t("<html></html>").append(t(o));return"undefined"==typeof a&&(a={}),"undefined"==typeof i&&(i=n),e[n]={status:"loaded",title:s.find("title").first().text(),html:s.find("#"+r),doc:o,state:a,destUrl:i},e},triggerAllAnimationEndEvent:function(e,n){n=" "+n||"";var o=0,r="animationstart webkitAnimationStart oanimationstart MSAnimationStart",a="animationend webkitAnimationEnd oanimationend MSAnimationEnd",i="allanimationend",l=function(n){t(n.delegateTarget).is(e)&&(n.stopPropagation(),o++)},u=function(n){t(n.delegateTarget).is(e)&&(n.stopPropagation(),o--,0===o&&e.trigger(i))};e.on(r,l),e.on(a,u),e.on("allanimationend"+n,function(){o=0,s.redraw(e)})},redraw:function(t){t.height()}},l=function(n){if(null!==n.state){var o=e.location.href,r=t("#"+n.state.id),a=r.data("smoothState"),i=a.href!==o&&!s.isHash(o,a.href),l=n.state!==a.cache[a.href].state;(i||l)&&(l&&a.clear(a.href),a.load(o,!1))}},u=function(i,l){var u=t(i),c=u.prop("id"),f=null,d=!1,h={},p={},g=e.location.href,m=function(t){t=t||!1,t&&h.hasOwnProperty(t)?delete h[t]:h={},u.data("smoothState").cache=h},y=function(e,n){n=n||t.noop;var o=s.translate(e);if(h=s.clearIfOverCapacity(h,l.cacheLength),!h.hasOwnProperty(o.url)||"undefined"!=typeof o.data){h[o.url]={status:"fetching"};var r=t.ajax(o);r.done(function(t){s.storePageIn(h,o.url,t,c),u.data("smoothState").cache=h}),r.fail(function(){h[o.url].status="error"}),l.locationHeader&&r.always(function(t,e,n){var r=t.statusCode?t:n,a=r.getResponseHeader(l.locationHeader);a&&(h[o.url].destUrl=a)}),n&&r.always(n)}},v=function(){if(f){var e=t(f,u);if(e.length){var n=e.offset().top;r.scrollTop(n)}f=null}},S=function(o){var i="#"+c,s=h[o]?t(h[o].html.html()):null;s.length?(n.title=h[o].title,u.data("smoothState").href=o,l.loadingClass&&r.removeClass(l.loadingClass),l.onReady.render(u,s),u.one("ss.onReadyEnd",function(){d=!1,l.onAfter(u,s),l.scroll&&v(),O(u)}),e.setTimeout(function(){u.trigger("ss.onReadyEnd")},l.onReady.duration)):!s&&l.debug&&a?a.warn("No element with an id of "+i+" in response from "+o+" in "+h):e.location=o},w=function(t,n,o){var i=s.translate(t);"undefined"==typeof n&&(n=!0),"undefined"==typeof o&&(o=!0);var f=!1,d=!1,g={loaded:function(){var t=f?"ss.onProgressEnd":"ss.onStartEnd";if(d&&f?d&&S(i.url):u.one(t,function(){S(i.url),o||m(i.url)}),n){var r=h[i.url].destUrl;p=l.alterChangeState({id:c},h[i.url].title,r),h[i.url].state=p,e.history.pushState(p,h[i.url].title,r)}d&&!o&&m(i.url)},fetching:function(){f||(f=!0,u.one("ss.onStartEnd",function(){l.loadingClass&&r.addClass(l.loadingClass),l.onProgress.render(u),e.setTimeout(function(){u.trigger("ss.onProgressEnd"),d=!0},l.onProgress.duration)})),e.setTimeout(function(){h.hasOwnProperty(i.url)&&g[h[i.url].status]()},10)},error:function(){l.debug&&a?a.log("There was an error loading: "+i.url):e.location=i.url}};h.hasOwnProperty(i.url)||y(i),l.onStart.render(u),e.setTimeout(function(){l.scroll&&r.scrollTop(0),u.trigger("ss.onStartEnd")},l.onStart.duration),g[h[i.url].status]()},E=function(e){var n,o=t(e.currentTarget);s.shouldLoadAnchor(o,l.blacklist,l.hrefRegex)&&!d&&(e.stopPropagation(),n=s.translate(o.prop("href")),n=l.alterRequest(n),y(n))},b=function(e){var n=t(e.currentTarget);if(!e.metaKey&&!e.ctrlKey&&s.shouldLoadAnchor(n,l.blacklist,l.hrefRegex)&&(e.stopPropagation(),e.preventDefault(),!T())){A();var o=s.translate(n.prop("href"));d=!0,f=n.prop("hash"),o=l.alterRequest(o),l.onBefore(n,u),w(o)}},C=function(e){var n=t(e.currentTarget);if(!n.is(l.blacklist)&&(e.preventDefault(),e.stopPropagation(),!T())){A();var r={url:n.prop("action"),data:n.serialize(),type:n.prop("method")};d=!0,r=l.alterRequest(r),"get"===r.type.toLowerCase()&&(r.url=r.url+"?"+r.data),l.onBefore(n,u),w(r,o,l.allowFormCaching)}},P=0,T=function(){var t=null===l.repeatDelay,e=parseInt(Date.now())>P;return!(t||e)},A=function(){P=parseInt(Date.now())+parseInt(l.repeatDelay)},O=function(t){l.anchors&&l.prefetch&&t.find(l.anchors).not(l.prefetchBlacklist).on(l.prefetchOn,null,E)},R=function(t){l.anchors&&(t.on("click",l.anchors,b),O(t)),l.forms&&t.on("submit",l.forms,C)},x=function(){var t=u.prop("class");u.removeClass(t),s.redraw(u),u.addClass(t)};return l=t.extend({},t.fn.smoothState.options,l),null===e.history.state?(p=l.alterChangeState({id:c},n.title,g),e.history.replaceState(p,n.title,g)):p={},s.storePageIn(h,g,n.documentElement.outerHTML,c,p),s.triggerAllAnimationEndEvent(u,"ss.onStartEnd ss.onProgressEnd ss.onEndEnd"),R(u),{href:g,cache:h,clear:m,load:w,fetch:y,restartCSSAnimations:x}},c=function(e){return this.each(function(){var n=this.tagName.toLowerCase();this.id&&"body"!==n&&"html"!==n&&!t.data(this,"smoothState")?t.data(this,"smoothState",new u(this,e)):!this.id&&a?a.warn("Every smoothState container needs an id but the following one does not have one:",this):"body"!==n&&"html"!==n||!a||a.warn("The smoothstate container cannot be the "+this.tagName+" tag")})};e.onpopstate=l,t.smoothStateUtility=s,t.fn.smoothState=c,t.fn.smoothState.options=i}});
\ No newline at end of file