m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-26 11:49:04 +01:00
Code

simplify & lint all js

Browse Source
This commit is contained in:
Matthias Kretschmann 2017-09-09 02:44:03 +02:00
parent e627d1717b
commit a0d6b38a4e
Signed by: m
GPG Key ID: 606EEEF3C479A91F
7 changed files with 186 additions and 281 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

145
_src/_assets/js/_analytics.js
View File

@ -1,87 +1,78 @@
/* global ga */
var GoogleAnalytics = (function(w, d, dnt) {
//
// 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
}
var app, _private;
// Prevent rapid breakpoint changes for all firing at once.
let timeout
_private = {
//
// Track Responsive Breakpoints
//
// stolen & adapted from
// http://philipwalton.com/articles/measuring-your-sites-responsive-breakpoint-usage/
//
gaBreakpoints: function() {
// Do nothing in browsers that don't support `window.matchMedia`.
if (!window.matchMedia) return;
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)'
}
// Prevent rapid breakpoint changes for all firing at once.
var timeout;
Object.keys(breakpoints).forEach(breakpoint => {
const mql = window.matchMedia(breakpoints[breakpoint])
var 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(function(breakpoint) {
var 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(function() {
if (mql.matches) {
clearTimeout(timeout);
timeout = setTimeout(function() {
ga('set', 'dimension1', breakpoint);
}, 1000);
}
});
});
},
//
// Track Viewport
//
gaViewport: function() {
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
var dimensions = width + 'x' + height;
ga('set', 'dimension2', dimensions);
},
//
// Track Pixel Density
//
gaPixelDensity: function() {
// Heads up!
// window.devicePixelRatio doesn't work correctly in IE but whatever
var pixeldensity = window.devicePixelRatio;
ga('set', 'dimension3', pixeldensity);
// Set the initial breakpoint on page load.
if (mql.matches) {
ga('set', 'dimension1', breakpoint)
}
};
app = {
init: function() {
if (dnt !== "yes" && dnt !== "1") {
_private.gaBreakpoints();
_private.gaViewport();
_private.gaPixelDensity();
// Update the breakpoint as the matched media changes
mql.addListener(() => {
if (mql.matches) {
clearTimeout(timeout)
timeout = setTimeout(() => {
ga('set', 'dimension1', breakpoint)
}, 1000)
}
}
};
})
})
}
return app;
})(window, document, navigator.doNotTrack || navigator.msDoNotTrack || null);
//
// 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()
}

64
_src/_assets/js/_menu.js
View File

@ -1,47 +1,27 @@
var Menu = (function(w, d) {
$(document).ready(() => {
const thesite = $('.site')
const thelink = $('.menu-btn')
const thepop = $('.nav-popover')
var app, _private, _config;
thelink.on('click', e => {
e.preventDefault()
_config = {
thesite : $('.site'),
thelink : $('.menu-btn'),
thepop : $('.nav-popover')
};
// Toggle menu
thesite.toggleClass('has-menu-open')
_private = {
menuShow: function() {
_config.thelink.on('click', function(e) {
e.preventDefault();
// Bind the hide controls
$(document).bind('click.hidethepop', () => {
thesite.removeClass('has-menu-open')
// Unbind the hide controls
$(document).unbind('click.hidethepop')
})
$('[data-toggle="tooltip"]').tooltip('hide');
// Dont close thepop when you click on thepop
thepop.on('click', e => {
e.stopPropagation()
})
// toggle menu
_config.thesite.toggleClass('has-menu-open');
// bind the hide controls
$(document).bind('click.hidethepop', function() {
_config.thesite.removeClass('has-menu-open');
// unbind the hide controls
$(document).unbind('click.hidethepop');
});
// dont close thepop when you click on thepop
_config.thepop.on('click', function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
}
};
app = {
init: function() {
_private.menuShow();
}
};
return app;
})(window, document);
// And dont close thepop now
e.stopPropagation()
})
})

173
_src/_assets/js/_search.js
View File

@ -1,115 +1,84 @@
/* global SimpleJekyllSearch */
/* eslint-disable spaced-comment */
//=require simple-jekyll-search/dest/simple-jekyll-search.js
/* eslint-enable spaced-comment */
var Search = (function(w, d) {
$(document).ready(() => {
const searchlink = $('.search-btn, .js-search-init')
const searcharea = $('.search-area')
const searchfield = $('#search-input')
const searchpop = $('#search-popover')
var app, _private, _config;
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')
}
_config = {
content : $('.site__content'),
searchlink : $('.search-btn, .js-search-init'),
searcharea : $('.search-area'),
searchfield : $('#search-input'),
searchresults : $('#search-results'),
searchpop : $('#search-popover'),
body : $('body')
};
searchlink.on('click', e => {
e.preventDefault()
_private = {
searchShow: function() {
// Show search field
searcharea
.removeClass('is-ready animation-bounceOutUp')
.addClass('is-ready animation-slidedown')
.on('animationend webkitAnimationEnd oAnimationEnd', () => {
$('body').addClass('has-search-open')
})
_config.searchlink.on('click', function(e) {
e.preventDefault();
searchfield.focus()
$('[data-toggle="tooltip"]').tooltip('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
})
// show search field
_config.searcharea
.removeClass('is-ready animation-bounceOutUp')
.addClass('is-ready animation-slidedown')
.on('animationend webkitAnimationEnd oAnimationEnd', function(){
_config.body.addClass('has-search-open');
});
_config.searchfield.focus();
_private.searchSimpleJekyllSearch();
// hide menu too just in case
if (_config.body.hasClass('has-menu-open')) {
_config.body.removeClass('has-menu-open');
}
// bind the hide controls
$(document).bind('click.hidethepop', function() {
_private.searchReset();
// unbind the hide controls
$(document).unbind('click.hidethepop');
});
// dont close thepop when click on thepop
_config.searchpop.on('click', function(e) {
e.stopPropagation();
});
// dont close thepop when click on search field
_config.searchfield.on('click', function(e) {
e.stopPropagation();
});
// and dont close thepop now
e.stopPropagation();
});
},
searchResultsShow: function() {
// show popup upon first keypress
_config.searchfield.on('keyup', function() {
_config.searchpop.removeClass('hide');
});
},
searchSimpleJekyllSearch: function() {
SimpleJekyllSearch({
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
});
},
searchHide: function() {
$('.search-close').on('click', function(e) {
e.preventDefault();
_private.searchReset();
// empty search field
_config.searchfield.val('').blur();
});
},
searchReset: function() {
// revert all search elements
_config.searcharea
.removeClass('animation-slidedown')
.addClass('animation-bounceOutUp')
.on('animationend webkitAnimationEnd oAnimationEnd', function(){
_config.body.removeClass('has-search-open');
});
_config.searchpop.addClass('hide');
// Hide menu too just in case
if ($('body').hasClass('has-menu-open')) {
$('body').removeClass('has-menu-open')
}
};
app = {
init: function() {
_private.searchShow();
_private.searchResultsShow();
_private.searchHide();
}
};
// Bind the hide controls
$(document).bind('click.hidethepop', () => {
searchReset()
return app;
// Unbind the hide controls
$(document).unbind('click.hidethepop')
})
})(document, window);
// 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()
})
})

26
_src/_assets/js/_tooltips.js
View File

@ -1,26 +0,0 @@
//=require bootstrap/js/tooltip.js
var Tooltips = (function(w, d) {
var app, _private;
_private = {
tooltipsShow: function() {
$('[data-toggle="tooltip"]').tooltip({
placement: 'bottom',
template: '<div class="tooltip" role="tooltip"><div class="tooltip-inner"></div></div>',
container: 'body'
})
}
};
app = {
init: function() {
_private.tooltipsShow();
}
};
return app;
})(window, document);

50
_src/_assets/js/kremalicious3.js
View File

@ -1,4 +1,4 @@
/* global Menu, Search, GoogleAnalytics, svg4everybody, vex */
/* global svg4everybody, vex */
/* eslint-disable spaced-comment */
//=require webcomponents.js/CustomElements.js
@ -7,42 +7,34 @@
//=require time-elements/time-elements.js
//=require vex-js/dist/js/vex.combined.js
//=include _menu.js
//=include _search.js
//=include _tooltips.js
/* eslint-disable spaced-comment */
//=include _analytics.js
//=include _search.js
//=include _menu.js
/* eslint-enable spaced-comment */
$(document).ready(() => {
//
// init modules
//
Menu.init()
Search.init()
GoogleAnalytics.init()
})
//
// Vex modals
//
const vexTriggers = document.querySelectorAll('.js-vex-btc')
const vexInit = () => {
const vexTriggers = document.querySelectorAll('.js-vex-btc')
vexTriggers.forEach(el => {
el.addEventListener('click', e => {
e.preventDefault()
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)
})
document.addEventListener('DOMContentLoaded', () => {
svg4everybody({
nosvg: false
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
})

5
_src/_includes/scripts.html
View File

@ -4,6 +4,7 @@
<script src="/assets/js/{{ page.js }}"></script>
{% endif %}
{% if jekyll.environment == "production" %}
<script>
var _paq = _paq || [];
@ -17,7 +18,7 @@
var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
g.type='text/javascript'; g.async=true; g.defer=true; g.src=u+'piwik.js'; s.parentNode.insertBefore(g,s);
}
}(navigator.doNotTrack || navigator.msDoNotTrack || null));
}(navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack || null));
</script>
<noscript><p><img src="//analytics.kremalicious.com/piwik.php?idsite=1" style="border:0;" alt="" /></p></noscript>
{% endif %}
@ -60,7 +61,7 @@
};
}
}(window, navigator.doNotTrack || navigator.msDoNotTrack || null));
}(window, navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack || null));
</script>
{% if jekyll.environment == "production" %}

4
package.json
View File

@ -32,11 +32,9 @@
"globals": [
"window",
"document",
"navigator",
"jQuery",
"$"
],
"ignores": [
"_src/_assets/js/_*.js"
]
},
"dependencies": {