From c3abc79d2d342653f0f35f8c921d063479414d99 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 9 Sep 2017 19:22:04 +0200 Subject: [PATCH 1/6] back to revealing module pattern --- _src/_assets/js/_analytics.js | 130 +++++++++++++------------- _src/_assets/js/_menu.js | 56 ++++++----- _src/_assets/js/_modals.js | 35 +++++++ _src/_assets/js/_search.js | 156 +++++++++++++++++-------------- _src/_assets/js/kremalicious3.js | 38 ++++---- 5 files changed, 238 insertions(+), 177 deletions(-) create mode 100644 _src/_assets/js/_modals.js diff --git a/_src/_assets/js/_analytics.js b/_src/_assets/js/_analytics.js index 0c0d9aad..87c4b73f 100644 --- a/_src/_assets/js/_analytics.js +++ b/_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 diff --git a/_src/_assets/js/_menu.js b/_src/_assets/js/_menu.js index 1a38bc0a..81301e18 100644 --- a/_src/_assets/js/_menu.js +++ b/_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 diff --git a/_src/_assets/js/_modals.js b/_src/_assets/js/_modals.js new file mode 100644 index 00000000..04274e95 --- /dev/null +++ b/_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: '

My Bitcoin Address

\n \n 
171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
' + } + + 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 diff --git a/_src/_assets/js/_search.js b/_src/_assets/js/_search.js index 373b7607..b97bdf0a 100644 --- a/_src/_assets/js/_search.js +++ b/_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: '{title}', + 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: '{title}', - 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 diff --git a/_src/_assets/js/kremalicious3.js b/_src/_assets/js/kremalicious3.js index 3dc722b2..52b10286 100644 --- a/_src/_assets/js/kremalicious3.js +++ b/_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: '

My Bitcoin Address

\n \n 
171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
' - }) - }, 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 }) From c031a063f096083f38e7354e55d13e16beff42dd Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 9 Sep 2017 19:34:38 +0200 Subject: [PATCH 2/6] output individual analytics script --- _src/_assets/js/{_analytics.js => analytics.js} | 14 +++++++++----- _src/_assets/js/kremalicious3.js | 9 +-------- _src/_includes/scripts.html | 2 ++ gulpfile.babel.js | 1 + 4 files changed, 13 insertions(+), 13 deletions(-) rename _src/_assets/js/{_analytics.js => analytics.js} (89%) diff --git a/_src/_assets/js/_analytics.js b/_src/_assets/js/analytics.js similarity index 89% rename from _src/_assets/js/_analytics.js rename to _src/_assets/js/analytics.js index 87c4b73f..c77dcb17 100644 --- a/_src/_assets/js/_analytics.js +++ b/_src/_assets/js/analytics.js @@ -69,10 +69,14 @@ const krlcAnalytics = (() => { // eslint-disable-line no-unused-vars return { - init: [ - gaBreakpoints(), - gaViewport(), - gaPixelDensity() - ] + init() { + const dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack + + if (dnt !== 'yes' && dnt !== '1') { + gaBreakpoints() + gaViewport() + gaPixelDensity() + } + } } })(); // eslint-disable-line semi diff --git a/_src/_assets/js/kremalicious3.js b/_src/_assets/js/kremalicious3.js index 52b10286..fb3d8b93 100644 --- a/_src/_assets/js/kremalicious3.js +++ b/_src/_assets/js/kremalicious3.js @@ -1,4 +1,4 @@ -/* global krlcMenu, krlcSearch, krlcModals, krlcAnalytics, svg4everybody */ +/* global krlcMenu, krlcSearch, krlcModals, svg4everybody */ /* eslint-disable spaced-comment */ //=require webcomponents.js/CustomElements.js @@ -9,7 +9,6 @@ //=include _menu.js //=include _search.js //=include _modals.js -//=include _analytics.js /* eslint-enable spaced-comment */ @@ -27,12 +26,6 @@ $(document).ready(() => { // krlcModals.init() -const dnt = navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack - -if (dnt !== 'yes' && dnt !== '1') { - krlcAnalytics.init() -} - svg4everybody({ nosvg: false }) diff --git a/_src/_includes/scripts.html b/_src/_includes/scripts.html index deb667d0..772304f1 100644 --- a/_src/_includes/scripts.html +++ b/_src/_includes/scripts.html @@ -69,3 +69,5 @@ {% else %} {% endif%} + + diff --git a/gulpfile.babel.js b/gulpfile.babel.js index b549992c..6876c0b9 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -214,6 +214,7 @@ export const criticalCss = done => { export const js = () => src([ SRC + '/_assets/js/kremalicious3.js', + SRC + '/_assets/js/analytics.js', 'node_modules/picturefill/dist/picturefill.js' ]) .pipe($.sourcemaps.init()) From 11dd15c58449f7bb502176c88b3461183f700e13 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 9 Sep 2017 19:35:12 +0200 Subject: [PATCH 3/6] rewrite menu.js without jQuery --- _src/_assets/js/_menu.js | 19 ++++++------------- _src/_assets/js/kremalicious3.js | 2 +- _src/_includes/scripts.html | 2 +- gulpfile.babel.js | 4 ++-- 4 files changed, 10 insertions(+), 17 deletions(-) diff --git a/_src/_assets/js/_menu.js b/_src/_assets/js/_menu.js index 81301e18..80546c51 100644 --- a/_src/_assets/js/_menu.js +++ b/_src/_assets/js/_menu.js @@ -2,28 +2,21 @@ const krlcMenu = (() => { // eslint-disable-line no-unused-vars const _config = { - thesite: $('.site'), - thelink: $('.menu-btn'), - thepop: $('.nav-popover') + thesite: document.getElementsByClassName('site')[0], + thelink: document.getElementsByClassName('menu-btn')[0], + thepop: document.getElementsByClassName('nav-popover')[0] } const _private = { toggleMenu() { - _config.thelink.on('click', e => { + _config.thelink.addEventListener('click', e => { e.preventDefault() // Toggle menu - _config.thesite.toggleClass('has-menu-open') - - // Bind the hide controls - $(document).bind('click.hidethepop', () => { - _config.thesite.removeClass('has-menu-open') - // Unbind the hide controls - $(document).unbind('click.hidethepop') - }) + _config.thesite.classList.toggle('has-menu-open') // Dont close thepop when you click on thepop - _config.thepop.on('click', e => { + _config.thepop.addEventListener('click', e => { e.stopPropagation() }) diff --git a/_src/_assets/js/kremalicious3.js b/_src/_assets/js/kremalicious3.js index fb3d8b93..b223611d 100644 --- a/_src/_assets/js/kremalicious3.js +++ b/_src/_assets/js/kremalicious3.js @@ -16,7 +16,6 @@ // Init jQuery-based modules // $(document).ready(() => { - krlcMenu.init() krlcSearch.init() }) @@ -24,6 +23,7 @@ $(document).ready(() => { // // Init js modules // +krlcMenu.init() krlcModals.init() svg4everybody({ diff --git a/_src/_includes/scripts.html b/_src/_includes/scripts.html index 772304f1..34f3c10e 100644 --- a/_src/_includes/scripts.html +++ b/_src/_includes/scripts.html @@ -1,7 +1,7 @@ {% if page.js %} - + {% endif %} diff --git a/gulpfile.babel.js b/gulpfile.babel.js index 6876c0b9..17f36e30 100644 --- a/gulpfile.babel.js +++ b/gulpfile.babel.js @@ -213,8 +213,8 @@ export const criticalCss = done => { // export const js = () => src([ - SRC + '/_assets/js/kremalicious3.js', - SRC + '/_assets/js/analytics.js', + SRC + '/_assets/js/*.js', + '!' + SRC + '/_assets/js/_*.js', 'node_modules/picturefill/dist/picturefill.js' ]) .pipe($.sourcemaps.init()) From 3ebfa122b8be4b03da499caf6143f8a45d8249ee Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 9 Sep 2017 20:02:12 +0200 Subject: [PATCH 4/6] rewrite search.js without jQuery --- _src/_assets/js/_search.js | 62 ++++++++++++++------------------ _src/_assets/js/kremalicious3.js | 10 +----- 2 files changed, 27 insertions(+), 45 deletions(-) diff --git a/_src/_assets/js/_search.js b/_src/_assets/js/_search.js index b97bdf0a..117250e7 100644 --- a/_src/_assets/js/_search.js +++ b/_src/_assets/js/_search.js @@ -7,76 +7,66 @@ 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: document.getElementsByClassName('search-btn')[0], + searcharea: document.getElementsByClassName('search-area')[0], + searchclose: document.getElementsByClassName('search-close')[0], + searchfield: document.getElementById('search-input'), + searchpop: document.getElementById('search-popover'), + searchresults: document.getElementById('search-results') } 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') + _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() { - $('.search-close').on('click', e => { + _config.searchclose.addEventListener('click', e => { e.preventDefault() _private.searchHide() // Empty search field - _config.searchfield.val('').blur() + _config.searchfield.value = '' + _config.searchfield.blur() }) }, searchShow() { - _config.searchlink.on('click', e => { + _config.searchlink.addEventListener('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.searcharea.classList.remove('is-ready', 'animation-bounceOutUp') + _config.searcharea.classList.add('is-ready', 'animation-slidedown') + document.body.classList.add('has-search-open') _config.searchfield.focus() SimpleJekyllSearch({ // eslint-disable-line new-cap - searchInput: document.getElementById('search-input'), - resultsContainer: document.getElementById('search-results'), + searchInput: _config.searchfield, + resultsContainer: _config.searchresults, json: '/api/search.json', searchResultTemplate: '{title}', fuzzy: false }) // Hide menu too just in case - if ($('body').hasClass('has-menu-open')) { - $('body').removeClass('has-menu-open') + if (document.body.classList.contains('has-menu-open')) { + document.body.classList.remove('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 => { + _config.searchpop.addEventListener('click', e => { e.stopPropagation() }) + // Dont close thepop when click on search field - _config.searchfield.on('click', e => { + _config.searchfield.addEventListener('click', e => { e.stopPropagation() }) @@ -85,8 +75,8 @@ const krlcSearch = (() => { // eslint-disable-line no-unused-vars }) // Show popup upon first keypress - _config.searchfield.on('keyup', () => { - _config.searchpop.removeClass('hide') + _config.searchfield.addEventListener('keyup', () => { + _config.searchpop.classList.remove('hide') }) // Listen for close icon diff --git a/_src/_assets/js/kremalicious3.js b/_src/_assets/js/kremalicious3.js index b223611d..28b8c4b8 100644 --- a/_src/_assets/js/kremalicious3.js +++ b/_src/_assets/js/kremalicious3.js @@ -11,18 +11,10 @@ //=include _modals.js /* eslint-enable spaced-comment */ - -// -// Init jQuery-based modules -// -$(document).ready(() => { - krlcSearch.init() -}) - - // // Init js modules // +krlcSearch.init() krlcMenu.init() krlcModals.init() From 069c71d09fe06fc7c18945b24264ed37da71800b Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 9 Sep 2017 20:16:32 +0200 Subject: [PATCH 5/6] kick out jQuery completely, remove svg4everybody --- _src/_assets/js/kremalicious3.js | 8 +------- package.json | 3 --- 2 files changed, 1 insertion(+), 10 deletions(-) diff --git a/_src/_assets/js/kremalicious3.js b/_src/_assets/js/kremalicious3.js index 28b8c4b8..558f1a47 100644 --- a/_src/_assets/js/kremalicious3.js +++ b/_src/_assets/js/kremalicious3.js @@ -1,9 +1,7 @@ -/* global krlcMenu, krlcSearch, krlcModals, svg4everybody */ +/* 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 //=include _menu.js @@ -17,7 +15,3 @@ krlcSearch.init() krlcMenu.init() krlcModals.init() - -svg4everybody({ - nosvg: false -}) diff --git a/package.json b/package.json index dd9bc3d9..d15785d1 100644 --- a/package.json +++ b/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" From 75aa3ffb8df9fd5d9a20a685239416e58cef7626 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sat, 9 Sep 2017 21:20:59 +0200 Subject: [PATCH 6/6] grab author metadata from one source --- _src/_assets/js/_modals.js | 33 +++++++++++++++++++++++++-------- _src/api/site.json | 7 +++++-- 2 files changed, 30 insertions(+), 10 deletions(-) diff --git a/_src/_assets/js/_modals.js b/_src/_assets/js/_modals.js index 04274e95..67ffbb96 100644 --- a/_src/_assets/js/_modals.js +++ b/_src/_assets/js/_modals.js @@ -2,7 +2,7 @@ // Vex modals // -/* global vex */ +/* global vex, fetch */ /* exported krlcModals */ /* eslint-disable spaced-comment */ @@ -11,25 +11,42 @@ const krlcModals = (() => { // eslint-disable-line no-unused-vars const _config = { - vexTriggers: document.querySelectorAll('.js-vex-btc'), - modalContent: '

My Bitcoin Address

\n \n 
171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V
' + btcVexTriggers: document.querySelectorAll('.js-vex-btc') } + let btcAddress + const _private = { - initVex() { - _config.vexTriggers.forEach(el => { + 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: _config.modalContent}) - }, false) + vex.open({unsafeContent: '

My Bitcoin Address

\n \n 
' + btcAddress + '
'}) + }) }) } } return { - init: _private.initVex + init() { + _private.getBtcAddress() + _private.vexBtc() + } } })(); // eslint-disable-line semi diff --git a/_src/api/site.json b/_src/api/site.json index e95267d3..b9015cfb 100644 --- a/_src/api/site.json +++ b/_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 %} + } } ]