m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-28 23:16:22 +01:00
Code

Merge pull request #33 from kremalicious/feature/js

Browse Source 
js cleanup
This commit is contained in:
Matthias Kretschmann 2017-09-09 22:19:55 +02:00 committed by GitHub
commit 8686244dfa
10 changed files with 254 additions and 207 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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()
}

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

@ -1,27 +1,32 @@
$(document).ready(() => {
const thesite = $('.site')
const thelink = $('.menu-btn')
const thepop = $('.nav-popover')
/* exported krlcMenu */
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')
// Bind the hide controls
$(document).bind('click.hidethepop', () => {
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
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

52
_src/_assets/js/_modals.js Normal file
View File

@ -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

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

@ -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 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: 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')
}
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
.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')
searchfield.focus()
_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: '<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')
if (document.body.classList.contains('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', () => {
searchpop.removeClass('hide')
_config.searchfield.addEventListener('keyup', () => {
_config.searchpop.classList.remove('hide')
})
$('.search-close').on('click', e => {
e.preventDefault()
// Listen for close icon
_private.searchClose()
}
}
searchReset()
// Empty search field
searchfield.val('').blur()
})
})
return {
init: _private.searchShow
}
})(); // eslint-disable-line semi

82
_src/_assets/js/analytics.js Normal file
View File

@ -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

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

@ -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 = () => {
const vexTriggers = document.querySelectorAll('.js-vex-btc')
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
})
krlcSearch.init()
krlcMenu.init()
krlcModals.init()

4
_src/_includes/scripts.html
View File

@ -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>

7
_src/api/site.json
View File

@ -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 %}
}
}
]

3
gulpfile.babel.js
View File

@ -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())

3
package.json
View File

@ -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"