back to revealing module pattern

_src/_assets/js/_analytics.js

@@ -1,78 +1,78 @@
-/* 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)
+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
         }
 
-        // Update the breakpoint as the matched media changes
-        mql.addListener(() => {
+        // 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) {
-                clearTimeout(timeout)
-                timeout = setTimeout(() => {
-                    ga('set', 'dimension1', breakpoint)
-                }, 1000)
+                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
+    //
+    // 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)
-}
+        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
+    //
+    // 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)
-}
+        window.ga('set', 'dimension3', pixeldensity)
+    }
 
 
-const dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack
-
-if (dnt !== 'yes' && dnt !== '1') {
-    gaBreakpoints()
-    gaViewport()
-    gaPixelDensity()
-}
+    return {
+        init: [
+            gaBreakpoints(),
+            gaViewport(),
+            gaPixelDensity()
+        ]
+    }
+})(); // eslint-disable-line semi

_src/_assets/js/_menu.js

@@ -1,27 +1,39 @@
-$(document).ready(() => {
-    const thesite = $('.site')
-    const thelink = $('.menu-btn')
-    const thepop = $('.nav-popover')
+/* exported krlcMenu */
 
-    thelink.on('click', e => {
-        e.preventDefault()
+const krlcMenu = (() => { // eslint-disable-line no-unused-vars
+    const _config = {
+        thesite: $('.site'),
+        thelink: $('.menu-btn'),
+        thepop: $('.nav-popover')
+    }
 
-        // Toggle menu
-        thesite.toggleClass('has-menu-open')
+    const _private = {
+        toggleMenu() {
+            _config.thelink.on('click', e => {
+                e.preventDefault()
 
-        // Bind the hide controls
-        $(document).bind('click.hidethepop', () => {
-            thesite.removeClass('has-menu-open')
-            // Unbind the hide controls
-            $(document).unbind('click.hidethepop')
-        })
+                // Toggle menu
+                _config.thesite.toggleClass('has-menu-open')
 
-        // Dont close thepop when you click on thepop
-        thepop.on('click', e => {
-            e.stopPropagation()
-        })
+                // Bind the hide controls
+                $(document).bind('click.hidethepop', () => {
+                    _config.thesite.removeClass('has-menu-open')
+                    // Unbind the hide controls
+                    $(document).unbind('click.hidethepop')
+                })
 
-        // And dont close thepop now
-        e.stopPropagation()
-    })
-})
+                // Dont close thepop when you click on thepop
+                _config.thepop.on('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,35 @@
+//
+// Vex modals
+//
+
+/* global vex */
+/* 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 = {
+        vexTriggers: document.querySelectorAll('.js-vex-btc'),
+        modalContent: '<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>'
+    }
+
+    const _private = {
+        initVex() {
+            _config.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: _config.modalContent})
+                }, false)
+            })
+        }
+    }
+
+    return {
+        init: _private.initVex
+    }
+})(); // eslint-disable-line semi

_src/_assets/js/_search.js

@@ -1,84 +1,100 @@
 /* global SimpleJekyllSearch */
+/* exported krlcSearch */
 
 /* eslint-disable spaced-comment */
 //=require simple-jekyll-search/dest/simple-jekyll-search.js
 /* eslint-enable spaced-comment */
 
-$(document).ready(() => {
-    const searchlink = $('.search-btn, .js-search-init')
-    const searcharea = $('.search-area')
-    const searchfield = $('#search-input')
-    const searchpop = $('#search-popover')
-
-    const searchReset = () => {
-        // Revert all search elements
-        searcharea
-            .removeClass('animation-slidedown')
-            .addClass('animation-bounceOutUp')
-            .on('animationend webkitAnimationEnd oAnimationEnd', () => {
-                $('body').removeClass('has-search-open')
-            })
-        searchpop.addClass('hide')
+const krlcSearch = (() => { // eslint-disable-line no-unused-vars
+    const _config = {
+        searchlink: $('.search-btn, .js-search-init'),
+        searcharea: $('.search-area'),
+        searchfield: $('#search-input'),
+        searchpop: $('#search-popover')
     }
 
-    searchlink.on('click', e => {
-        e.preventDefault()
+    const _private = {
+        searchHide() {
+            // Revert all search elements
+            _config.searcharea
+                .removeClass('animation-slidedown')
+                .addClass('animation-bounceOutUp')
+                .on('animationend webkitAnimationEnd oAnimationEnd', () => {
+                    $('body').removeClass('has-search-open')
+                })
+            _config.searchpop.addClass('hide')
+        },
 
-        // Show search field
-        searcharea
-            .removeClass('is-ready animation-bounceOutUp')
-            .addClass('is-ready animation-slidedown')
-            .on('animationend webkitAnimationEnd oAnimationEnd', () => {
-                $('body').addClass('has-search-open')
+        searchClose() {
+            $('.search-close').on('click', e => {
+                e.preventDefault()
+
+                _private.searchHide()
+
+                // Empty search field
+                _config.searchfield.val('').blur()
+            })
+        },
+
+        searchShow() {
+            _config.searchlink.on('click', e => {
+                e.preventDefault()
+
+                // Show search field
+                _config.searcharea
+                    .removeClass('is-ready animation-bounceOutUp')
+                    .addClass('is-ready animation-slidedown')
+                    .on('animationend webkitAnimationEnd oAnimationEnd', () => {
+                        $('body').addClass('has-search-open')
+                    })
+
+                _config.searchfield.focus()
+
+                SimpleJekyllSearch({ // eslint-disable-line new-cap
+                    searchInput: document.getElementById('search-input'),
+                    resultsContainer: document.getElementById('search-results'),
+                    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')) {
+                    $('body').removeClass('has-menu-open')
+                }
+
+                // Bind the hide controls
+                $(document).bind('click.hidethepop', () => {
+                    _private.searchHide()
+
+                    // Unbind the hide controls
+                    $(document).unbind('click.hidethepop')
+                })
+
+                // Dont close thepop when click on thepop
+                _config.searchpop.on('click', e => {
+                    e.stopPropagation()
+                })
+                // Dont close thepop when click on search field
+                _config.searchfield.on('click', e => {
+                    e.stopPropagation()
+                })
+
+                // And dont close thepop now
+                e.stopPropagation()
             })
 
-        searchfield.focus()
+            // Show popup upon first keypress
+            _config.searchfield.on('keyup', () => {
+                _config.searchpop.removeClass('hide')
+            })
 
-        SimpleJekyllSearch({ // eslint-disable-line new-cap
-            searchInput: document.getElementById('search-input'),
-            resultsContainer: document.getElementById('search-results'),
-            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')) {
-            $('body').removeClass('has-menu-open')
+            // Listen for close icon
+            _private.searchClose()
         }
+    }
 
-        // 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 => {
-            e.stopPropagation()
-        })
-        // Dont close thepop when click on search field
-        searchfield.on('click', e => {
-            e.stopPropagation()
-        })
-
-        // And dont close thepop now
-        e.stopPropagation()
-    })
-
-    // Show popup upon first keypress
-    searchfield.on('keyup', () => {
-        searchpop.removeClass('hide')
-    })
-
-    $('.search-close').on('click', e => {
-        e.preventDefault()
-
-        searchReset()
-
-        // Empty search field
-        searchfield.val('').blur()
-    })
-})
+    return {
+        init: _private.searchShow
+    }
+})(); // eslint-disable-line semi

_src/_assets/js/kremalicious3.js

@@ -1,40 +1,38 @@
-/* global svg4everybody, vex */
+/* global krlcMenu, krlcSearch, krlcModals, krlcAnalytics, svg4everybody */
 
 /* 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
+//=include _analytics.js
 /* eslint-enable spaced-comment */
 
 
 //
-// Vex modals
+// Init jQuery-based modules
 //
-const vexInit = () => {
-    const vexTriggers = document.querySelectorAll('.js-vex-btc')
+$(document).ready(() => {
+    krlcMenu.init()
+    krlcSearch.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)
-    })
+//
+// Init js modules
+//
+krlcModals.init()
+
+const dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack
+
+if (dnt !== 'yes' && dnt !== '1') {
+    krlcAnalytics.init()
 }
 
-vexInit()
-
 svg4everybody({
     nosvg: false
 })