bespoke-theme-build-wars
Version:
A theme for Bespoke.js, based on the presentation-build-wars-gulp-vs-grunt presentation
415 lines (339 loc) • 18.9 kB
JavaScript
(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);throw new Error("Cannot find module '"+o+"'")}var f=n[o]={exports:{}};t[o][0].call(f.exports,function(e){var n=t[o][1][e];return s(n?n:e)},f,f.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var bespoke = require('bespoke'),
buildWars = require('../../../lib/bespoke-theme-build-wars.js'),
keys = require('bespoke-keys'),
touch = require('bespoke-touch'),
bullets = require('bespoke-bullets'),
scale = require('bespoke-scale'),
progress = require('bespoke-progress'),
backdrop = require('bespoke-backdrop');
bespoke.from('article', [
buildWars(),
keys(),
touch(),
bullets('li, .bullet'),
scale(),
progress(),
backdrop()
]);
},{"../../../lib/bespoke-theme-build-wars.js":2,"bespoke":10,"bespoke-backdrop":3,"bespoke-bullets":4,"bespoke-keys":6,"bespoke-progress":7,"bespoke-scale":8,"bespoke-touch":9}],2:[function(require,module,exports){
var classes = require('bespoke-classes');
var insertCss = require('insert-css');
module.exports = function() {
var css = "/*! normalize.css v3.0.0 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background:0 0}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:700}dfn{font-style:italic}h1{margin:.67em 0}mark{background:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type=\"button\"],input[type=\"reset\"],input[type=\"submit\"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=\"checkbox\"],input[type=\"radio\"]{box-sizing:border-box;padding:0}input[type=\"number\"]::-webkit-inner-spin-button,input[type=\"number\"]::-webkit-outer-spin-button{height:auto}input[type=\"search\"]{-webkit-appearance:textfield;box-sizing:content-box}input[type=\"search\"]::-webkit-search-cancel-button,input[type=\"search\"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:700}table{border-collapse:collapse;border-spacing:0}td,th,*{padding:0}*{box-sizing:border-box;margin:0}@media print{*{-webkit-print-color-adjust:exact}}@page{size:landscape;margin:0}article{transition:all .3s ease;display:none}article.bespoke-parent{display:block;position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;-webkit-perspective:600px;perspective:600px}@media print{article.bespoke-parent{overflow:visible;position:static}}article.bespoke-parent.green{background:#00f3a5}article.bespoke-parent.white{background:#fff}.bespoke-slide{transition:-webkit-transform .6s ease,opacity .6s ease,background .6s ease;transition:transform .6s ease,opacity .6s ease,background .6s ease;-webkit-transform-origin:50% 50% 0;transform-origin:50% 50% 0;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;backface-visibility:hidden;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;text-align:center;width:640px;height:480px;position:absolute;top:50%;margin-top:-240px;left:50%;margin-left:-320px;background:0 0;padding:40px;border-radius:0}@media print{.bespoke-slide{zoom:1!important;height:743px;width:100%;page-break-before:always;position:static;margin:0}}.bespoke-before{-webkit-transform:translateX(640px) translateX(-320px) rotateY(-20deg) translateX(-320px);transform:translateX(640px) translateX(-320px) rotateY(-20deg) translateX(-320px)}.bespoke-after{-webkit-transform:translateX(-640px) translateX(320px) rotateY(20deg) translateX(320px);transform:translateX(-640px) translateX(320px) rotateY(20deg) translateX(320px)}@media print{.bespoke-after{-webkit-transform:none;transform:none}}.bespoke-inactive{opacity:0;pointer-events:none}@media print{.bespoke-inactive{opacity:1}}.bespoke-active{opacity:1;transition-delay:.2s}.bespoke-bullet{transition:all .3s ease}.bespoke-bullet-inactive{opacity:0}li.bespoke-bullet-inactive{-webkit-transform:translateX(-10px) translateZ(-10px) rotateY(20deg);transform:translateX(-10px) translateZ(-10px) rotateY(20deg)}@media print{.bespoke-bullet-inactive{opacity:1}}.bespoke-bullet-active{opacity:1}.bespoke-scale-parent{-webkit-perspective:600px;perspective:600px;position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none}.bespoke-scale-parent .bespoke-active{pointer-events:auto}@media print{.bespoke-scale-parent{-webkit-transform:none!important;transform:none!important}}.bespoke-progress-parent{position:absolute;top:0;left:0;right:0;height:5px}@media only screen and (min-width:1366px){.bespoke-progress-parent{height:10px}}@media print{.bespoke-progress-parent{display:none}}.bespoke-progress-bar{transition:width .6s ease;position:absolute;height:100%;background:#00c284}.emphatic,.emphatic .bespoke-slide{background:#00f3a5}.bespoke-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;-webkit-transform:translateZ(0);transform:translateZ(0);transition:opacity .6s ease;opacity:0;z-index:-1}.bespoke-backdrop-active{opacity:1}pre{padding:26px!important;border-radius:8px;border:none!important;box-shadow:none!important}pre span{text-shadow:none!important}body{background:#303030;font-family:'open sans',helvetica,arial,sans-serif;font-weight:300;font-size:18px;color:#f0f0f0}body .gif{color:rgba(255,255,255,.8)}body .bespoke-slide.emphatic-text{color:rgba(0,0,0,.5)}h1{font-size:72px;font-weight:600;line-height:82px;letter-spacing:-2px;margin-bottom:16px;margin-top:0}h2{font-weight:300;font-size:42px;letter-spacing:-1px;margin-bottom:8px;color:#f0f0f0}.bespoke-slide.emphatic-text h2{color:rgba(0,0,0,.6)}h3{font-size:24px;font-weight:300;margin-bottom:24px;color:#e0e0e0}.bespoke-slide.emphatic-text h3{color:rgba(0,0,0,.5)}hr{visibility:hidden;height:20px}ul{list-style:none}li{margin-bottom:12px}p{margin:0 50px 12px;line-height:22px}blockquote{max-width:75%}small{font-size:75%}a{color:#00f3a5;text-decoration:none}a.black{color:#000}.bespoke-slide.emphatic-text a{color:rgba(0,0,0,.7)}.bespoke-slide.emphatic-text h1 a{color:#00f3a5}.avatar{display:block;margin:0 auto;width:120px;height:120px;border-radius:120px}.avatar--small{width:70px;height:70px}.logo,.gif{background-position:center;background-repeat:no-repeat}.gif{background-size:cover}";
insertCss(css, { prepend: true });
insertCss("@import url('https://fonts.googleapis.com/css?family=Open+Sans:300italic,300,600,700');",
{ prepend: true });
return function(deck) {
classes()(deck);
};
};
},{"bespoke-classes":5,"insert-css":11}],3:[function(require,module,exports){
module.exports = function() {
return function(deck) {
var backdrops;
function createBackdropForSlide(slide) {
var backdropAttribute = slide.getAttribute('data-bespoke-backdrop');
if (backdropAttribute) {
var backdrop = document.createElement('div');
backdrop.className = backdropAttribute;
backdrop.classList.add('bespoke-backdrop');
deck.parent.appendChild(backdrop);
return backdrop;
}
}
function updateClasses(el) {
if (el) {
var index = backdrops.indexOf(el),
currentIndex = deck.slide();
removeClass(el, 'active');
removeClass(el, 'inactive');
removeClass(el, 'before');
removeClass(el, 'after');
if (index !== currentIndex) {
addClass(el, 'inactive');
addClass(el, index < currentIndex ? 'before' : 'after');
} else {
addClass(el, 'active');
}
}
}
function removeClass(el, className) {
el.classList.remove('bespoke-backdrop-' + className);
}
function addClass(el, className) {
el.classList.add('bespoke-backdrop-' + className);
}
backdrops = deck.slides
.map(createBackdropForSlide);
deck.on('activate', function() {
backdrops.forEach(updateClasses);
});
};
};
},{}],4:[function(require,module,exports){
module.exports = function(options) {
return function(deck) {
var activeSlideIndex,
activeBulletIndex,
bullets = deck.slides.map(function(slide) {
return [].slice.call(slide.querySelectorAll((typeof options === 'string' ? options : '[data-bespoke-bullet]')), 0);
}),
next = function() {
var nextSlideIndex = activeSlideIndex + 1;
if (activeSlideHasBulletByOffset(1)) {
activateBullet(activeSlideIndex, activeBulletIndex + 1);
return false;
} else if (bullets[nextSlideIndex]) {
activateBullet(nextSlideIndex, 0);
}
},
prev = function() {
var prevSlideIndex = activeSlideIndex - 1;
if (activeSlideHasBulletByOffset(-1)) {
activateBullet(activeSlideIndex, activeBulletIndex - 1);
return false;
} else if (bullets[prevSlideIndex]) {
activateBullet(prevSlideIndex, bullets[prevSlideIndex].length - 1);
}
},
activateBullet = function(slideIndex, bulletIndex) {
activeSlideIndex = slideIndex;
activeBulletIndex = bulletIndex;
bullets.forEach(function(slide, s) {
slide.forEach(function(bullet, b) {
bullet.classList.add('bespoke-bullet');
if (s < slideIndex || s === slideIndex && b <= bulletIndex) {
bullet.classList.add('bespoke-bullet-active');
bullet.classList.remove('bespoke-bullet-inactive');
} else {
bullet.classList.add('bespoke-bullet-inactive');
bullet.classList.remove('bespoke-bullet-active');
}
if (s === slideIndex && b === bulletIndex) {
bullet.classList.add('bespoke-bullet-current');
} else {
bullet.classList.remove('bespoke-bullet-current');
}
});
});
},
activeSlideHasBulletByOffset = function(offset) {
return bullets[activeSlideIndex][activeBulletIndex + offset] !== undefined;
};
deck.on('next', next);
deck.on('prev', prev);
deck.on('slide', function(e) {
activateBullet(e.index, 0);
});
activateBullet(0, 0);
};
};
},{}],5:[function(require,module,exports){
module.exports = function() {
return function(deck) {
var addClass = function(el, cls) {
el.classList.add('bespoke-' + cls);
},
removeClass = function(el, cls) {
el.className = el.className
.replace(new RegExp('bespoke-' + cls +'(\\s|$)', 'g'), ' ')
.trim();
},
deactivate = function(el, index) {
var activeSlide = deck.slides[deck.slide()],
offset = index - deck.slide(),
offsetClass = offset > 0 ? 'after' : 'before';
['before(-\\d+)?', 'after(-\\d+)?', 'active', 'inactive'].map(removeClass.bind(null, el));
if (el !== activeSlide) {
['inactive', offsetClass, offsetClass + '-' + Math.abs(offset)].map(addClass.bind(null, el));
}
};
addClass(deck.parent, 'parent');
deck.slides.map(function(el) { addClass(el, 'slide'); });
deck.on('activate', function(e) {
deck.slides.map(deactivate);
addClass(e.slide, 'active');
removeClass(e.slide, 'inactive');
});
};
};
},{}],6:[function(require,module,exports){
module.exports = function(options) {
return function(deck) {
var isHorizontal = options !== 'vertical';
document.addEventListener('keydown', function(e) {
if (e.which == 34 || // PAGE DOWN
(e.which == 32 && !e.shiftKey) || // SPACE WITHOUT SHIFT
(isHorizontal && e.which == 39) || // RIGHT
(!isHorizontal && e.which == 40) // DOWN
) { deck.next(); }
if (e.which == 33 || // PAGE UP
(e.which == 32 && e.shiftKey) || // SPACE + SHIFT
(isHorizontal && e.which == 37) || // LEFT
(!isHorizontal && e.which == 38) // UP
) { deck.prev(); }
});
};
};
},{}],7:[function(require,module,exports){
module.exports = function(options) {
return function (deck) {
var progressParent = document.createElement('div'),
progressBar = document.createElement('div'),
prop = options === 'vertical' ? 'height' : 'width';
progressParent.className = 'bespoke-progress-parent';
progressBar.className = 'bespoke-progress-bar';
progressParent.appendChild(progressBar);
deck.parent.appendChild(progressParent);
deck.on('activate', function(e) {
progressBar.style[prop] = (e.index * 100 / (deck.slides.length - 1)) + '%';
});
};
};
},{}],8:[function(require,module,exports){
module.exports = function(options) {
return function(deck) {
var parent = deck.parent,
firstSlide = deck.slides[0],
slideHeight = firstSlide.offsetHeight,
slideWidth = firstSlide.offsetWidth,
useZoom = options === 'zoom' || ('zoom' in parent.style && options !== 'transform'),
wrap = function(element) {
var wrapper = document.createElement('div');
wrapper.className = 'bespoke-scale-parent';
element.parentNode.insertBefore(wrapper, element);
wrapper.appendChild(element);
return wrapper;
},
elements = useZoom ? deck.slides : deck.slides.map(wrap),
transformProperty = (function(property) {
var prefixes = 'Moz Webkit O ms'.split(' ');
return prefixes.reduce(function(currentProperty, prefix) {
return prefix + property in parent.style ? prefix + property : currentProperty;
}, property.toLowerCase());
}('Transform')),
scale = useZoom ?
function(ratio, element) {
element.style.zoom = ratio;
} :
function(ratio, element) {
element.style[transformProperty] = 'scale(' + ratio + ')';
},
scaleAll = function() {
var xScale = parent.offsetWidth / slideWidth,
yScale = parent.offsetHeight / slideHeight;
elements.forEach(scale.bind(null, Math.min(xScale, yScale)));
};
window.addEventListener('resize', scaleAll);
scaleAll();
};
};
},{}],9:[function(require,module,exports){
module.exports = function(options) {
return function(deck) {
var axis = options == 'vertical' ? 'Y' : 'X',
startPosition,
delta;
deck.parent.addEventListener('touchstart', function(e) {
if (e.touches.length == 1) {
startPosition = e.touches[0]['page' + axis];
delta = 0;
}
});
deck.parent.addEventListener('touchmove', function(e) {
if (e.touches.length == 1) {
e.preventDefault();
delta = e.touches[0]['page' + axis] - startPosition;
}
});
deck.parent.addEventListener('touchend', function() {
if (Math.abs(delta) > 50) {
deck[delta > 0 ? 'prev' : 'next']();
}
});
};
};
},{}],10:[function(require,module,exports){
var from = function(opts, plugins) {
var parent = (opts.parent || opts).nodeType === 1 ? (opts.parent || opts) : document.querySelector(opts.parent || opts),
slides = [].filter.call(typeof opts.slides === 'string' ? parent.querySelectorAll(opts.slides) : (opts.slides || parent.children), function(el) { return el.nodeName !== 'SCRIPT'; }),
activeSlide = slides[0],
listeners = {},
activate = function(index, customData) {
if (!slides[index]) {
return;
}
fire('deactivate', createEventData(activeSlide, customData));
activeSlide = slides[index];
fire('activate', createEventData(activeSlide, customData));
},
slide = function(index, customData) {
if (arguments.length) {
fire('slide', createEventData(slides[index], customData)) && activate(index, customData);
} else {
return slides.indexOf(activeSlide);
}
},
step = function(offset, customData) {
var slideIndex = slides.indexOf(activeSlide) + offset;
fire(offset > 0 ? 'next' : 'prev', createEventData(activeSlide, customData)) && activate(slideIndex, customData);
},
on = function(eventName, callback) {
(listeners[eventName] || (listeners[eventName] = [])).push(callback);
return off.bind(null, eventName, callback);
},
off = function(eventName, callback) {
listeners[eventName] = (listeners[eventName] || []).filter(function(listener) { return listener !== callback; });
},
fire = function(eventName, eventData) {
return (listeners[eventName] || [])
.reduce(function(notCancelled, callback) {
return notCancelled && callback(eventData) !== false;
}, true);
},
createEventData = function(el, eventData) {
eventData = eventData || {};
eventData.index = slides.indexOf(el);
eventData.slide = el;
return eventData;
},
deck = {
on: on,
off: off,
fire: fire,
slide: slide,
next: step.bind(null, 1),
prev: step.bind(null, -1),
parent: parent,
slides: slides
};
(plugins || []).forEach(function(plugin) {
plugin(deck);
});
activate(0);
return deck;
};
module.exports = {
from: from
};
},{}],11:[function(require,module,exports){
var inserted = {};
module.exports = function (css, options) {
if (inserted[css]) return;
inserted[css] = true;
var elem = document.createElement('style');
elem.setAttribute('type', 'text/css');
if ('textContent' in elem) {
elem.textContent = css;
} else {
elem.styleSheet.cssText = css;
}
var head = document.getElementsByTagName('head')[0];
if (options && options.prepend) {
head.insertBefore(elem, head.childNodes[0]);
} else {
head.appendChild(elem);
}
};
},{}]},{},[1])