back to revealing module pattern

_src/_assets/js/_analytics.js

@@ -1,12 +1,11 @@
-/* global ga */
+const krlcAnalytics = (() => { // eslint-disable-line no-unused-vars
-
+    //
-//
+    // Track Responsive Breakpoints
-// Track Responsive Breakpoints
+    //
-//
+    // stolen & adapted from
-// stolen & adapted from
+    // http://philipwalton.com/articles/measuring-your-sites-responsive-breakpoint-usage/
-// http://philipwalton.com/articles/measuring-your-sites-responsive-breakpoint-usage/
+    //
-//
+    const gaBreakpoints = () => {
-const gaBreakpoints = () => {
         // Do nothing in browsers that don't support `window.matchMedia`.
         if (!window.matchMedia) {
             return
@@ -29,7 +28,7 @@ const gaBreakpoints = () => {
 
             // Set the initial breakpoint on page load.
             if (mql.matches) {
-            ga('set', 'dimension1', breakpoint)
+                window.ga('set', 'dimension1', breakpoint)
             }
 
             // Update the breakpoint as the matched media changes
@@ -37,42 +36,43 @@ const gaBreakpoints = () => {
                 if (mql.matches) {
                     clearTimeout(timeout)
                     timeout = setTimeout(() => {
-                    ga('set', 'dimension1', breakpoint)
+                        window.ga('set', 'dimension1', breakpoint)
                     }, 1000)
                 }
             })
         })
-}
+    }
 
 
-//
+    //
-// Track Viewport
+    // Track Viewport
-//
+    //
-const gaViewport = () => {
+    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
+    // Track Pixel Density
-//
+    //
-const gaPixelDensity = () => {
+    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
+    return {
-
+        init: [
-if (dnt !== 'yes' && dnt !== '1') {
+            gaBreakpoints(),
-    gaBreakpoints()
+            gaViewport(),
-    gaViewport()
             gaPixelDensity()
-}
+        ]
+    }
+})(); // eslint-disable-line semi

_src/_assets/js/_menu.js

@@ -1,27 +1,39 @@
-$(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: $('.site'),
+        thelink: $('.menu-btn'),
+        thepop: $('.nav-popover')
+    }
+
+    const _private = {
+        toggleMenu() {
+            _config.thelink.on('click', e => {
                 e.preventDefault()
 
                 // Toggle menu
-        thesite.toggleClass('has-menu-open')
+                _config.thesite.toggleClass('has-menu-open')
 
                 // Bind the hide controls
                 $(document).bind('click.hidethepop', () => {
-            thesite.removeClass('has-menu-open')
+                    _config.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.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,38 +1,54 @@
 /* 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: $('.search-btn, .js-search-init'),
-    const searchfield = $('#search-input')
+        searcharea: $('.search-area'),
-    const searchpop = $('#search-popover')
+        searchfield: $('#search-input'),
+        searchpop: $('#search-popover')
+    }
 
-    const searchReset = () => {
+    const _private = {
+        searchHide() {
             // Revert all search elements
-        searcharea
+            _config.searcharea
                 .removeClass('animation-slidedown')
                 .addClass('animation-bounceOutUp')
                 .on('animationend webkitAnimationEnd oAnimationEnd', () => {
                     $('body').removeClass('has-search-open')
                 })
-        searchpop.addClass('hide')
+            _config.searchpop.addClass('hide')
-    }
+        },
 
-    searchlink.on('click', e => {
+        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
-        searcharea
+                _config.searcharea
                     .removeClass('is-ready animation-bounceOutUp')
                     .addClass('is-ready animation-slidedown')
                     .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'),
@@ -49,18 +65,18 @@ $(document).ready(() => {
 
                 // Bind the hide controls
                 $(document).bind('click.hidethepop', () => {
-            searchReset()
+                    _private.searchHide()
 
                     // Unbind the hide controls
                     $(document).unbind('click.hidethepop')
                 })
 
                 // Dont close thepop when click on thepop
-        searchpop.on('click', e => {
+                _config.searchpop.on('click', e => {
                     e.stopPropagation()
                 })
                 // Dont close thepop when click on search field
-        searchfield.on('click', e => {
+                _config.searchfield.on('click', e => {
                     e.stopPropagation()
                 })
 
@@ -69,16 +85,16 @@ $(document).ready(() => {
             })
 
             // Show popup upon first keypress
-    searchfield.on('keyup', () => {
+            _config.searchfield.on('keyup', () => {
-        searchpop.removeClass('hide')
+                _config.searchpop.removeClass('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/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 = () => {
+$(document).ready(() => {
-    const vexTriggers = document.querySelectorAll('.js-vex-btc')
+    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'
+// Init js modules
-            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>'
+krlcModals.init()
-            })
+
-        }, false)
+const dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack
-    })
+
+if (dnt !== 'yes' && dnt !== '1') {
+    krlcAnalytics.init()
 }
 
-vexInit()
-
 svg4everybody({
     nosvg: false
 })