Merge pull request #33 from kremalicious/feature/js

js cleanup

_src/_assets/js/_analytics.js

@@ -1,78 +0,0 @@
-/* global ga */
-
-//
-// Track Responsive Breakpoints
-//
-// stolen & adapted from
-// http://philipwalton.com/articles/measuring-your-sites-responsive-breakpoint-usage/
-//
-const gaBreakpoints = () => {
-    // Do nothing in browsers that don't support `window.matchMedia`.
-    if (!window.matchMedia) {
-        return
-    }
-
-    // Prevent rapid breakpoint changes for all firing at once.
-    let timeout
-
-    const breakpoints = {
-        xxs: '(max-width: 479px)',
-        xs: '(min-width: 480px) and (max-width: 767px)',
-        sm: '(min-width: 768px) and (max-width: 991px)',
-        md: '(min-width: 992px) and (max-width: 1199px)',
-        lg: '(min-width: 1200px) and (max-width: 1599px)',
-        hg: '(min-width: 1600px)'
-    }
-
-    Object.keys(breakpoints).forEach(breakpoint => {
-        const mql = window.matchMedia(breakpoints[breakpoint])
-
-        // Set the initial breakpoint on page load.
-        if (mql.matches) {
-            ga('set', 'dimension1', breakpoint)
-        }
-
-        // Update the breakpoint as the matched media changes
-        mql.addListener(() => {
-            if (mql.matches) {
-                clearTimeout(timeout)
-                timeout = setTimeout(() => {
-                    ga('set', 'dimension1', breakpoint)
-                }, 1000)
-            }
-        })
-    })
-}
-
-
-//
-// Track Viewport
-//
-const gaViewport = () => {
-    const width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
-    const height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
-    const dimensions = width + 'x' + height
-
-    ga('set', 'dimension2', dimensions)
-}
-
-
-//
-// Track Pixel Density
-//
-const gaPixelDensity = () => {
-    // Heads up!
-    // window.devicePixelRatio doesn't work correctly in IE but whatever
-    const pixeldensity = window.devicePixelRatio
-
-    ga('set', 'dimension3', pixeldensity)
-}
-
-
-const dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack
-
-if (dnt !== 'yes' && dnt !== '1') {
-    gaBreakpoints()
-    gaViewport()
-    gaPixelDensity()
-}

_src/_assets/js/_menu.js

@@ -1,27 +1,32 @@
-$(document).ready(() => {
+/* exported krlcMenu */
-    const thesite = $('.site')
-    const thelink = $('.menu-btn')
-    const thepop = $('.nav-popover')
 
-    thelink.on('click', e => {
+const krlcMenu = (() => { // eslint-disable-line no-unused-vars
+    const _config = {
+        thesite: document.getElementsByClassName('site')[0],
+        thelink: document.getElementsByClassName('menu-btn')[0],
+        thepop: document.getElementsByClassName('nav-popover')[0]
+    }
+
+    const _private = {
+        toggleMenu() {
+            _config.thelink.addEventListener('click', e => {
                 e.preventDefault()
 
                 // Toggle menu
-        thesite.toggleClass('has-menu-open')
+                _config.thesite.classList.toggle('has-menu-open')
-
-        // Bind the hide controls
-        $(document).bind('click.hidethepop', () => {
-            thesite.removeClass('has-menu-open')
-            // Unbind the hide controls
-            $(document).unbind('click.hidethepop')
-        })
 
                 // Dont close thepop when you click on thepop
-        thepop.on('click', e => {
+                _config.thepop.addEventListener('click', e => {
                     e.stopPropagation()
                 })
 
                 // And dont close thepop now
                 e.stopPropagation()
             })
-})
+        }
+    }
+
+    return {
+        init: _private.toggleMenu
+    }
+})(); // eslint-disable-line semi

_src/_assets/js/_modals.js

@@ -0,0 +1,52 @@
+//
+// Vex modals
+//
+
+/* global vex, fetch */
+/* exported krlcModals */
+
+/* eslint-disable spaced-comment */
+//=require vex-js/dist/js/vex.combined.js
+/* eslint-enable spaced-comment */
+
+const krlcModals = (() => { // eslint-disable-line no-unused-vars
+    const _config = {
+        btcVexTriggers: document.querySelectorAll('.js-vex-btc')
+    }
+
+    let btcAddress
+
+    const _private = {
+        getBtcAddress() {
+            const url = '/api/site.json'
+
+            fetch(url)
+                .then(res => res.json())
+                .then(data_ => {
+                    btcAddress = data_[0].author.bitcoin
+                })
+                .catch(err => console.error(err))
+
+            return btcAddress
+        },
+
+        vexBtc() {
+            _config.btcVexTriggers.forEach(el => {
+                el.addEventListener('click', e => {
+                    e.preventDefault()
+
+                    vex.defaultOptions.className = 'vex-theme-kremalicious vex-bitcoin'
+                    vex.dialog.buttons.YES.text = 'Close'
+                    vex.open({unsafeContent: '<h3 class="vex__title">My Bitcoin Address</h3>\n <img src="/assets/img/btc-qr.png" />\n <pre class="highlight"><a href="bitcoin:' + btcAddress + '"><code class="btcAddress nt">' + btcAddress + '</code></a></pre>'})
+                })
+            })
+        }
+    }
+
+    return {
+        init() {
+            _private.getBtcAddress()
+            _private.vexBtc()
+        }
+    }
+})(); // eslint-disable-line semi

_src/_assets/js/_search.js

@@ -1,66 +1,72 @@
 /* global SimpleJekyllSearch */
+/* exported krlcSearch */
 
 /* eslint-disable spaced-comment */
 //=require simple-jekyll-search/dest/simple-jekyll-search.js
 /* eslint-enable spaced-comment */
 
-$(document).ready(() => {
+const krlcSearch = (() => { // eslint-disable-line no-unused-vars
-    const searchlink = $('.search-btn, .js-search-init')
+    const _config = {
-    const searcharea = $('.search-area')
+        searchlink: document.getElementsByClassName('search-btn')[0],
-    const searchfield = $('#search-input')
+        searcharea: document.getElementsByClassName('search-area')[0],
-    const searchpop = $('#search-popover')
+        searchclose: document.getElementsByClassName('search-close')[0],
-
+        searchfield: document.getElementById('search-input'),
-    const searchReset = () => {
+        searchpop: document.getElementById('search-popover'),
-        // Revert all search elements
+        searchresults: document.getElementById('search-results')
-        searcharea
-            .removeClass('animation-slidedown')
-            .addClass('animation-bounceOutUp')
-            .on('animationend webkitAnimationEnd oAnimationEnd', () => {
-                $('body').removeClass('has-search-open')
-            })
-        searchpop.addClass('hide')
     }
 
-    searchlink.on('click', e => {
+    const _private = {
+        searchHide() {
+            // Revert all search elements
+            _config.searcharea.classList.remove('animation-slidedown')
+            _config.searcharea.classList.add('animation-bounceOutUp')
+            _config.searchpop.classList.add('hide')
+            document.body.classList.remove('has-search-open')
+        },
+
+        searchClose() {
+            _config.searchclose.addEventListener('click', e => {
+                e.preventDefault()
+
+                _private.searchHide()
+
+                // Empty search field
+                _config.searchfield.value = ''
+                _config.searchfield.blur()
+            })
+        },
+
+        searchShow() {
+            _config.searchlink.addEventListener('click', e => {
                 e.preventDefault()
 
                 // Show search field
-        searcharea
+                _config.searcharea.classList.remove('is-ready', 'animation-bounceOutUp')
-            .removeClass('is-ready animation-bounceOutUp')
+                _config.searcharea.classList.add('is-ready', 'animation-slidedown')
-            .addClass('is-ready animation-slidedown')
+                document.body.classList.add('has-search-open')
-            .on('animationend webkitAnimationEnd oAnimationEnd', () => {
-                $('body').addClass('has-search-open')
-            })
 
-        searchfield.focus()
+                _config.searchfield.focus()
 
                 SimpleJekyllSearch({ // eslint-disable-line new-cap
-            searchInput: document.getElementById('search-input'),
+                    searchInput: _config.searchfield,
-            resultsContainer: document.getElementById('search-results'),
+                    resultsContainer: _config.searchresults,
                     json: '/api/search.json',
                     searchResultTemplate: '<a class="search-link" href="{url}">{title}</a>',
                     fuzzy: false
                 })
 
                 // Hide menu too just in case
-        if ($('body').hasClass('has-menu-open')) {
+                if (document.body.classList.contains('has-menu-open')) {
-            $('body').removeClass('has-menu-open')
+                    document.body.classList.remove('has-menu-open')
                 }
 
-        // Bind the hide controls
-        $(document).bind('click.hidethepop', () => {
-            searchReset()
-
-            // Unbind the hide controls
-            $(document).unbind('click.hidethepop')
-        })
-
                 // Dont close thepop when click on thepop
-        searchpop.on('click', e => {
+                _config.searchpop.addEventListener('click', e => {
                     e.stopPropagation()
                 })
+
                 // Dont close thepop when click on search field
-        searchfield.on('click', e => {
+                _config.searchfield.addEventListener('click', e => {
                     e.stopPropagation()
                 })
 
@@ -69,16 +75,16 @@ $(document).ready(() => {
             })
 
             // Show popup upon first keypress
-    searchfield.on('keyup', () => {
+            _config.searchfield.addEventListener('keyup', () => {
-        searchpop.removeClass('hide')
+                _config.searchpop.classList.remove('hide')
             })
 
-    $('.search-close').on('click', e => {
+            // Listen for close icon
-        e.preventDefault()
+            _private.searchClose()
+        }
+    }
 
-        searchReset()
+    return {
-
+        init: _private.searchShow
-        // Empty search field
+    }
-        searchfield.val('').blur()
+})(); // eslint-disable-line semi
-    })
-})

_src/_assets/js/analytics.js

@@ -0,0 +1,82 @@
+const krlcAnalytics = (() => { // eslint-disable-line no-unused-vars
+    //
+    // Track Responsive Breakpoints
+    //
+    // stolen & adapted from
+    // http://philipwalton.com/articles/measuring-your-sites-responsive-breakpoint-usage/
+    //
+    const gaBreakpoints = () => {
+        // Do nothing in browsers that don't support `window.matchMedia`.
+        if (!window.matchMedia) {
+            return
+        }
+
+        // Prevent rapid breakpoint changes for all firing at once.
+        let timeout
+
+        const breakpoints = {
+            xxs: '(max-width: 479px)',
+            xs: '(min-width: 480px) and (max-width: 767px)',
+            sm: '(min-width: 768px) and (max-width: 991px)',
+            md: '(min-width: 992px) and (max-width: 1199px)',
+            lg: '(min-width: 1200px) and (max-width: 1599px)',
+            hg: '(min-width: 1600px)'
+        }
+
+        Object.keys(breakpoints).forEach(breakpoint => {
+            const mql = window.matchMedia(breakpoints[breakpoint])
+
+            // Set the initial breakpoint on page load.
+            if (mql.matches) {
+                window.ga('set', 'dimension1', breakpoint)
+            }
+
+            // Update the breakpoint as the matched media changes
+            mql.addListener(() => {
+                if (mql.matches) {
+                    clearTimeout(timeout)
+                    timeout = setTimeout(() => {
+                        window.ga('set', 'dimension1', breakpoint)
+                    }, 1000)
+                }
+            })
+        })
+    }
+
+
+    //
+    // Track Viewport
+    //
+    const gaViewport = () => {
+        const width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0)
+        const height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
+        const dimensions = width + 'x' + height
+
+        window.ga('set', 'dimension2', dimensions)
+    }
+
+
+    //
+    // Track Pixel Density
+    //
+    const gaPixelDensity = () => {
+        // Heads up!
+        // window.devicePixelRatio doesn't work correctly in IE but whatever
+        const pixeldensity = window.devicePixelRatio
+
+        window.ga('set', 'dimension3', pixeldensity)
+    }
+
+
+    return {
+        init() {
+            const dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack
+
+            if (dnt !== 'yes' && dnt !== '1') {
+                gaBreakpoints()
+                gaViewport()
+                gaPixelDensity()
+            }
+        }
+    }
+})(); // eslint-disable-line semi

_src/_assets/js/kremalicious3.js

@@ -1,40 +1,17 @@
-/* global svg4everybody, vex */
+/* global krlcMenu, krlcSearch, krlcModals */
 
 /* eslint-disable spaced-comment */
 //=require webcomponents.js/CustomElements.js
-//=require svg4everybody/dist/svg4everybody.js
-//=require jquery/dist/jquery.js
 //=require time-elements/time-elements.js
-//=require vex-js/dist/js/vex.combined.js
 
-/* eslint-disable spaced-comment */
-//=include _analytics.js
-//=include _search.js
 //=include _menu.js
+//=include _search.js
+//=include _modals.js
 /* eslint-enable spaced-comment */
 
-
 //
-// Vex modals
+// Init js modules
 //
-const vexInit = () => {
+krlcSearch.init()
-    const vexTriggers = document.querySelectorAll('.js-vex-btc')
+krlcMenu.init()
-
+krlcModals.init()
-    vexTriggers.forEach(el => {
-        el.addEventListener('click', e => {
-            e.preventDefault()
-
-            vex.defaultOptions.className = 'vex-theme-kremalicious vex-bitcoin'
-            vex.dialog.buttons.YES.text = 'Close'
-            vex.open({
-                unsafeContent: '<h3 class="vex__title">My Bitcoin Address</h3>\n <img src="/assets/img/btc-qr.png" />\n <pre class="highlight"><code class="nt">171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V</code></pre>'
-            })
-        }, false)
-    })
-}
-
-vexInit()
-
-svg4everybody({
-    nosvg: false
-})

_src/_includes/scripts.html

@@ -1,7 +1,7 @@
 <script src="/assets/js/kremalicious3.min.js" async></script>
 
 {% if page.js %}
-    <script src="/assets/js/{{ page.js }}"></script>
+    <script src="/assets/js/{{ page.js }}" async></script>
 {% endif %}
 
 
@@ -69,3 +69,5 @@
 {% else %}
     <script async src="//www.google-analytics.com/analytics_debug.js"></script>
 {% endif%}
+
+<script src="/assets/js/analytics.min.js" async></script>

_src/api/site.json

@@ -1,10 +1,13 @@
 ---
-layout: null
 ---
 [
     {
         "name"         : "{{ site.name }}",
         "description"  : "{{ site.description | xml_escape }}",
-        "url"          : "{{ site.url }}"
+        "url"          : "{{ site.url }}",
+        "author"       : {
+          {% for item in site.author %}"{{ item[0] }}": "{{ item[1] }}"{% unless forloop.last %},{% endunless %}
+          {% endfor %}
+        }
     }
 ]

gulpfile.babel.js

@@ -213,7 +213,8 @@ export const criticalCss = done => {
 //
 export const js = () =>
     src([
-        SRC + '/_assets/js/kremalicious3.js',
+        SRC + '/_assets/js/*.js',
+        '!' + SRC + '/_assets/js/_*.js',
         'node_modules/picturefill/dist/picturefill.js'
     ])
     .pipe($.sourcemaps.init())

package.json

@@ -38,13 +38,10 @@
     ]
   },
   "dependencies": {
-    "bootstrap": "^3.3.7",
-    "jquery": "^3.2.1",
     "normalize-css": "^2.3.1",
     "normalize-opentype.css": "^0.2.4",
     "picturefill": "^3.0.2",
     "simple-jekyll-search": "^1.4.1",
-    "svg4everybody": "^2.1.9",
     "time-elements": "^0.6.1",
     "vex-js": "^4.0.0",
     "webcomponents.js": "^0.7.24"