Skip to content

Instantly share code, notes, and snippets.

@sivagao

sivagao/FE: Toolkit-showcase bespoke.js

Created April 6, 2013 14:50
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save sivagao/5326350 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save sivagao/5326350 to your computer and use it in GitHub Desktop.
Download ZIP
FE: Toolkit-showcase bespoke
Raw
FE: Toolkit-showcase bespoke.js
Bespoke.js
To create a Bespoke.js presentation, follow these 3 simple steps:
Create a page with required slide markup and resources
Activate your deck via the JavaScript API
Create a custom style sheet using the Bespoke.js classes
<link rel="stylesheet" href="theme.css">
<aritle>
<section>Slide 1</section>
<section>Slide 2</section>
<section>Slide 3</section>
<section>Slide 4</section>
</aritle>
<script src="bespoke.js"></script>
<script type="text/javascript"></script>
<style>
article {
-webkit-perspective: 600px;
perspective: 600px;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
}
section {
-webkit-transform: none;
background: #c0c0c0;
border-radius: 30px;
width: 512px;
height: 380px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -256px;
margin-top: -220px;
opacity: 0;
}
body,
section.bespoke-slide {
-webkit-transition: -webkit-transform .7s ease, opacity .7s ease, background-color .7s ease;
}
section.bespoke-active {
opacity: 1;
z-index: 1;
}
/* Classic Theme */
.classic {
background: rgba(243, 111, 86, 0.2);
}
.classic section,
.classic .arrow:hover {
background: rgb(243, 111, 86);
}
.classic section.bespoke-before {
-webkit-transform: translate3d(-1920px, 0, 0);
}
.classic section.bespoke-before-2 {
-webkit-transform: translate3d(-1280px, 0, 0);
opacity: 0.1;
}
.cube section.bespoke-after {
-webkit-transform: translateX(332px) rotateY(70deg) translateX(652px) rotateY(110deg) translateX(530px);
}
.cube section.bespoke-after-1 {
-webkit-transform: translateX(332px) rotateY(70deg) translateX(512px);
opacity: 0.5;
}
</style>
<body class="coverflow">
<div id="main">
<header>
<a href="https://github.com/markdalgleish/bespoke.js">
<h1>Bespoke.js</h1>
<h2>DIY Presentation Micro-Framework</h2>
</a>
<p class="hidden"><span id="input-method">Press up and down keys</span> to view example themes.</p>
</header>
<article>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
<section></section>
</article>
</div>
</body>
<script>
var themes,
selectedThemeIndex,
instructionsTimeout,
deck;
function init(){
deck = bespoke.from('article');
initThemeSwitching();
}
init();
function initThemeSwitching(){
themes = [
];
selectedThemeIndex = 0;
initTnstructions();
initKeys();
initSlideGestures();
initThemeGestures();
initButtons();
selectTheme(0);
}
function initKeys() {
document.addEventListener('keydown', function(e) {
var key = e.which;
key === 37 && deck.prev();
(key === 32 || key === 39) && deck.next();
key === 38 && prevTheme();
key === 40 && nextTheme();
});
}
function selectTheme(index) {
var theme = themes[index];
document.body.className = theme;
document.getElementById('theme').innerHTML = theme[0].toUpperCase() + theme.slice(1);
selectedThemeIndex = index;
}
</script>
<script type="text/javascript">
var slides = [].slice.call(parent.children, 0),
activeSlide = slides[0],
deckListeners = {},
next = function() {
var nextSlideIndex = slides.indexOf(activeSlide) + 1;
fire(deckListeners, 'next', {
slide: activeSlide,
index: slides.indexOf(activeSlide)
}) && activate(nextSlideIndex);
},
activate = function(index) {
if (!slides[index]) {
return;
}
fire(deckListeners, 'deactivate', {
slide: activeSlide,
index: slides.indexOf(activeSlide)
});
activeSlide = slides[index];
slides.map(deactivate);
fire(deckListeners, 'activate', {
slide: activeSlide,
index: index
});
addClass(activeSlide, 'active');
removeClass(activeSlide, 'inactive');
},
deactivate = function(slide, index) {
var offset = index - slides.indexOf(activeSlide),
offsetClass = offset > 0 ? 'after' : 'before';
['before(-\\d+)?', 'after(-\\d+)?', 'active', 'inactive'].map(removeClass.bind(null, slide));
slide !== activeSlide &&
['inactive', offsetClass, offsetClass + '-' + Math.abs(offset)].map(addClass.bind(null, slide));
},
</script>
<script type="text/javascript">
(function(bespoke) {
var INVOKE_CHAR_CODE = 81; // q
var SEARCH_SELECTORS = [
function( slide ) { return slide.querySelectorAll( "header, h1, h2, h3, h4, h5, h6" ); },
function( slide ) { return [ slide ]; }
];
function escapeRegExp( str ) {
var ret = "", esc = "\\^$*+?.()=|{,}[]-";
for ( var i = 0; i < str.length; i++) {
ret += (esc.indexOf(str.charAt(i)) === -1 ? "" : "\\") + str.charAt(i);
}
return ret;
}
var plugin = function( deck ) {
var activeSlide = 0;
var rememberSlide = 0;
deck.on("activate", function( ev ) {
activeSlide = ev.index;
});
var shown = false;
function show() {
rememberSlide = activeSlide;
el.style["display"] = "block";
field.value = "";
field.focus();
shown = true;
}
function hide() {
el.style["display"] = "none";
field.className = "";
shown = false;
}
var indicies = SEARCH_SELECTORS.map( function( selector ) {
return deck.slides.map( function( slide ) {
return Array.prototype.reduce.call( selector(slide), function( a, el ) {
return a + " " + el.textContent;
}, "" ).trim().replace(/\s+/g, " " );
} );
});
var outer = document.createElement("DIV");
outer.innerHTML = '<div id="bespoke-spotlight" style="display: none"><input type="text" id="bespoke-spotlight-q"></div>';
document.body.appendChild( outer.firstChild );
var el = document.getElementById("bespoke-spotlight");
var field = document.getElementById("bespoke-spotlight-q");
field.addEventListener('blur', hide );
field.addEventListener('keyup', function() {
var val = field.value;
if( val.length === 0 ) {
return;
}
var re = new RegExp( escapeRegExp( val ), "i" );
for( var i = 0; i < indicies.length; i++ ) {
var index = indicies[ i ];
for( var j = 0; j < index.length; j++ ) {
if( re.test( index[ j ] ) ) {
deck.slide( j );
field.className = "";
return;
}
}
}
field.className = "no-match";
deck.slide( rememberSlide );
});
window.addEventListener('keydown', function(e) {
if( !shown && e.which === INVOKE_CHAR_CODE ) {
show();
e.preventDefault();
}
if( shown && ( e.which === 27 || e.which === 13 ) ) {
hide();
}
} );
};
bespoke.plugins.spotlight = plugin;
}(bespoke));
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment