slideshow-service 0.2.0 → 0.3.0

data/lib/slideshow/service/public/slideshow-csss/slideshow.js

@@ -0,0 +1,508 @@
+/**
+ * CSSS javascript code
+ * @author Lea Verou (http://leaverou.me)
+ * @version 2.0
+ */
+ 
+/**
+ * Make the environment a bit friendlier
+ */
+function $(expr, con) { return (con || document).querySelector(expr); }
+function $$(expr, con) { return [].slice.call((con || document).querySelectorAll(expr)); }
+
+(function(head, body){
+
+// Check for classList support and include the polyfill if it's not supported
+if(!('classList' in body)) {
+	var thisScript = $('script[src$="slideshow.js"]'),
+	    script = document.createElement('script');
+	    script.src = thisScript.src.replace(/\bslideshow\.js/, 'classList.js');
+	thisScript.parentNode.insertBefore(script, thisScript);
+}
+
+// Cache <title> element, we may need it for slides that don't have titles
+var documentTitle = document.title + '';
+
+var self = window.SlideShow = function(container, slide) {
+	var me = this;
+	
+	// Set instance
+	if(!window.slideshow) {
+		window.slideshow = this;
+	}
+	
+	this.container = container = container || body;
+	
+	// Current slide
+	this.index = this.slide = slide || 0;
+	
+	// Current .delayed item in the slide
+	this.item = 0;
+	
+	// Create timer, if needed
+	this.duration = container.getAttribute('data-duration');
+	
+	if(this.duration > 0) {
+		var timer = document.createElement('div');
+		    
+		timer.id = 'timer';
+		timer.setAttribute('style', PrefixFree.prefixCSS('transition: ' + this.duration * 60 + 's linear;'));
+		container.appendChild(timer);
+		
+		setTimeout(function() {
+			timer.className = 'end';
+		}, 1);
+	}
+	
+	// Create slide indicator
+	this.indicator = document.createElement('div');
+	
+	this.indicator.id = 'indicator';
+	container.appendChild(this.indicator);
+	
+	// Get the slide elements into an array
+	this.slides = $$('.slide', container);
+	
+	// Order of the slides
+	this.order = [];
+	
+	for(var i=0; i<this.slides.length; i++) {
+		var slide = this.slides[i]; // to speed up references
+		
+		// Asign ids to slides that don't have one
+		if(!slide.id) {
+			slide.id = 'slide' + (i+1);
+		}
+		
+		// Set data-title attribute to the title of the slide
+		if(!slide.title) {
+			// no title attribute, fetch title from heading(s)
+			var heading = $('hgroup', slide) || $('h1,h2,h3,h4,h5,h6', slide);
+			
+			if(heading && heading.textContent.trim()) {
+				slide.setAttribute('data-title', heading.textContent);
+			}
+		}
+		else {
+			// The title attribute is set, use that
+			slide.setAttribute('data-title', slide.title);
+			slide.removeAttribute('title');
+		}
+		
+		slide.setAttribute('data-index', i);
+		
+		var imp = slide.getAttribute('data-import'),
+			imported = imp? this.getSlideById(imp) : null;
+		
+		this.order.push(imported? +imported.getAttribute('data-index') : i);
+	}
+	
+	if(window.name === 'projector' && window.opener && opener.slideshow) {
+		document.body.classList.add('projector');
+		this.presenter = opener.slideshow;
+		this.presenter.projector = this;
+	}
+	
+	// Adjust the font-size when the window is resized
+	addEventListener('resize', this, false);
+	
+	// In some browsers DOMContentLoaded is too early, so try again onload
+	addEventListener('load', this, false);
+	
+	addEventListener('hashchange', this, false);
+	
+	// If there's already a hash, update current slide number...
+	this.handleEvent({type: 'hashchange'});
+	
+	document.addEventListener('keyup', this, false);
+	document.addEventListener('keydown', this, false);
+	
+	// Rudimentary style[scoped] polyfill
+	$$('style[scoped]', container).forEach(function(style) {
+		var rulez = style.sheet.cssRules,
+			parentid = style.parentNode.id || self.getSlide(style).id;
+		
+		for(var j=rulez.length; j--;) {
+			var cssText = rulez[j].cssText.replace(/^|,/g, function($0) {
+				return '#' + parentid + ' ' + $0
+			});
+
+			style.sheet.deleteRule(0);
+			style.sheet.insertRule(cssText, 0);
+		}
+	});
+	
+	// Process iframe slides
+	$$('.slide > iframe:only-child', container).forEach(function(iframe) {
+		var slide = iframe.parentNode,
+			h = document.createElement('h1'),
+			a = document.createElement('a'),
+			src = iframe.src || iframe.getAttribute('data-src');
+		
+		slide.classList.add('iframe');
+		slide.classList.add('dont-resize');
+			
+		var title = iframe.title || src.replace(/\/#?$/, '')
+						 .replace(/^\w+:\/\/w{0,3}\.?/, '');
+		
+		a.href = iframe.src;
+		a.target = '_blank';
+		a.textContent = title;
+		h.appendChild(a);
+		
+		slide.appendChild(h);
+	});
+}
+
+self.prototype = {
+	handleEvent: function(evt) {
+		switch(evt.type) {
+			/**
+				Keyboard navigation
+				Ctrl+G : Go to slide...
+				Ctrl+H : Show thumbnails and go to slide
+				Ctrl+P : Presenter view
+				(Shift instead of Ctrl works too)
+			*/
+			case 'keyup':
+				if(evt.ctrlKey || evt.shiftKey) {
+					switch(evt.keyCode) {
+						case 71: // G
+							var slide = prompt('Which slide?');
+							me.goto(+slide? slide - 1 : slide);
+							break;
+						case 72: // H
+							if(body.classList.contains('show-thumbnails')) {
+								body.classList.remove('show-thumbnails');
+								body.classList.remove('headers-only');
+							}
+							else {
+								body.classList.add('show-thumbnails');
+								
+								if(!evt.shiftKey || !evt.ctrlKey) {
+									body.classList.add('headers-only');
+								}
+		
+								body.addEventListener('click', function(evt) {
+									var slide = evt.target;
+									
+									while(slide && !slide.classList.contains('slide')) {
+										slide = slide.parentNode;
+									}
+									
+									if(slide) {
+										this.goto(slide.id);
+										setTimeout(function() { me.adjustFontSize(); }, 1000); // for Opera
+									}
+									
+									body.classList.remove('show-thumbnails');
+									body.classList.remove('headers-only');
+								}, false);
+							}
+							break;
+						case 74: // J
+							if(body.classList.contains('hide-elements')) {
+								body.classList.remove('hide-elements');
+							}
+							else {
+								body.classList.add('hide-elements');
+							}
+							break;
+						case 80: // P
+							// Open new window for attendee view
+							this.projector = open(location, 'projector');
+		
+							// Get the focus back
+							window.focus();
+							
+							// Switch this one to presenter view
+							body.classList.add('presenter');
+					}
+				}
+				break;
+			case 'keydown':
+				/**
+					Keyboard navigation
+					Home : First slide
+					End : Last slide
+					Space/Up/Right arrow : Next item/slide
+					Ctrl + Space/Up/Right arrow : Next slide
+					Down/Left arrow : Previous item/slide
+					Ctrl + Down/Left arrow : Previous slide 
+					(Shift instead of Ctrl works too)
+				*/
+				if(evt.target === body || evt.target === body.parentNode || evt.altKey) {
+					if(evt.keyCode >= 32 && evt.keyCode <= 40) {
+						evt.preventDefault();
+					}
+		
+					switch(evt.keyCode) {
+						case 33: //page up
+							this.previous();
+							break;
+						case 34: //page down
+							this.next();
+							break;
+						case 35: // end
+							this.end();
+							break;
+						case 36: // home
+							this.start();
+							break;
+						case 37: // <-
+						case 38: // up arrow
+							this.previous(evt.ctrlKey || evt.shiftKey);
+							break;
+						case 32: // space
+						case 39: // ->
+						case 40: // down arrow
+							this.next(evt.ctrlKey || evt.shiftKey);
+							break;
+					}
+				}
+				break;
+			case 'load':
+			case 'resize':
+				this.adjustFontSize();
+				break;
+			case 'hashchange':
+				this.goto(location.hash.substr(1) || 0);
+		}
+	},
+	
+	start: function() {
+		this.goto(0);
+	},
+	
+	end: function() {
+		this.goto(this.slides.length - 1);
+	},
+	
+	/**
+		@param hard {Boolean} Whether to advance to the next slide (true) or 
+			just the next step (which could very well be showing a list item)
+	 */
+	next: function(hard) {
+		if(!hard && this.items.length) {
+			this.nextItem();
+		}
+		else {	
+			this.goto(this.index + 1);
+			
+			this.item = 0;
+			
+			// Mark all items as not displayed, if there are any
+			if(this.items.length) {	
+				for (var i=0; i<this.items.length; i++) {
+					if(this.items[i].classList) {
+						this.items[i].classList.remove('displayed');
+						this.items[i].classList.remove('current');
+					}
+				}
+			}
+		}
+	},
+	
+	nextItem: function() {
+		if(this.item < this.items.length) {
+			this.gotoItem(++this.item);
+		}
+		else {
+			this.item = 0;
+			this.next(true);
+		}
+	},
+	
+	previous: function(hard) {
+		if(!hard && this.item > 0) {
+			this.previousItem();
+		}
+		else {	
+			this.goto(this.index - 1);
+			
+			this.item = this.items.length;
+
+			// Mark all items as displayed, if there are any
+			if(this.items.length) {	
+				for (var i=0; i<this.items.length; i++) {
+					if(this.items[i].classList) {
+						this.items[i].classList.add('displayed');
+					}
+				}
+				
+				// Mark the last one as current
+				var lastItem = this.items[this.items.length - 1];
+				
+				lastItem.classList.remove('displayed');
+				lastItem.classList.add('current');
+			}
+		}
+	},
+	
+	previousItem: function() {
+		this.gotoItem(--this.item);
+	},
+	
+	getSlideById: function(id) {
+		return $('.slide#' + id, this.container);
+	},
+	
+	/**
+		Go to an aribtary slide
+		@param which {String|Integer} Which slide (identifier or slide number)
+	*/
+	goto: function(which) {
+		var slide;
+		
+		// We have to remove it to prevent multiple calls to goto messing up
+		// our current item (and there's no point either, so we save on performance)
+		window.removeEventListener('hashchange', this, false);
+		
+		var id;
+		
+		if(which + 0 === which && which in this.slides) { 
+			// Argument is a valid slide number
+			this.index = which;
+			this.slide = this.order[which]
+			
+			slide = this.slides[this.slide];
+			
+			location.hash = '#' + slide.id;
+		}
+		else if(which + '' === which) { // Argument is a slide id
+			slide = this.getSlideById(which);
+			
+			if(slide) {
+				this.slide = this.index = +slide.getAttribute('data-index');
+				location.hash = '#' + which;	
+			}
+		}
+		
+		if(slide) { // Slide actually changed, perform any other tasks needed
+			document.title = slide.getAttribute('data-title') || documentTitle;
+			
+			this.adjustFontSize();
+			
+			this.indicator.textContent = this.index;
+			
+			// Update items collection
+			this.items = $$('.delayed, .delayed-children > *', this.slides[this.slide]);
+			this.item = 0;
+			
+			this.projector && this.projector.goto(which);
+			
+			// Update next/previous
+			for (var i=this.slides.length; i--;) {
+				this.slides[i].classList.remove('previous');
+				this.slides[i].classList.remove('next');
+			}
+			
+			this.slides.previous = this.slides[this.order[this.index - 1]];
+			this.slides.next = this.slides[this.order[this.index + 1]];
+			
+			this.slides.previous && this.slides.previous.classList.add('previous');
+			this.slides.next && this.slides.next.classList.add('next');
+		}
+		
+		// If you attach the listener immediately again then it will catch the event
+		// We have to do it asynchronously
+		var me = this;
+		setTimeout(function() {
+			addEventListener('hashchange', me, false);
+		}, 1000);
+	},
+	
+	gotoItem: function(which) {
+		this.item = which;
+		
+		var items = this.items, classes;
+		
+		for(var i=items.length; i-- > 0;) {
+			classes = this.items[i].classList;
+			
+			classes.remove('current');
+			classes.remove('displayed');
+		}
+		
+		for(var i=this.item - 1; i-- > 0;) {
+			this.items[i].classList.add('displayed');
+		}
+		
+		if(this.item > 0) {
+			this.items[this.item - 1].classList.add('current');
+		}
+		
+		this.projector && this.projector.gotoItem(which);
+	},
+	
+	adjustFontSize: function() {
+		// Cache long lookup chains, for performance
+		var bodyStyle = body.style,
+			scrollRoot = document[document.documentElement.scrollHeight? 'documentElement' : 'body'],
+			innerHeight = window.innerHeight,
+			innerWidth = window.innerWidth,
+			slide = this.slides[this.slide];
+			
+		// Clear previous styles
+		bodyStyle.fontSize = '';
+		
+		if(body.classList.contains('show-thumbnails') 
+			|| slide.classList.contains('dont-resize')) {
+			return;
+		}
+
+		for(
+			var percent = 100;	
+			(scrollRoot.scrollHeight > innerHeight || scrollRoot.scrollWidth > innerWidth) && percent >= 35;
+			percent-=5
+		) {
+			bodyStyle.fontSize = percent + '%';
+		}
+		
+		// Individual slide
+
+		if(slide.clientHeight && slide.clientWidth) {
+			// Strange FF bug: scrollHeight doesn't work properly with overflow:hidden
+			var previousStyle = slide.getAttribute('style');
+			slide.style.overflow = 'auto';
+			
+			for(
+				;	
+				(slide.scrollHeight > slide.clientHeight || slide.scrollWidth > slide.clientWidth) && percent >= 35;
+				percent--
+			) {
+				bodyStyle.fontSize = percent + '%';
+			}
+			
+			slide.setAttribute('style', previousStyle);
+		}
+	},
+	
+	// Is the element on the current slide?
+	onCurrent: function(element) {
+		var slide = self.getSlide(element);
+		
+		if(slide) {
+			return '#' + slide.id === location.hash;
+		}
+		
+		return false;
+	}
+};
+
+/**********************************************
+ * Static methods 
+ **********************************************/
+ 
+// Helper method for plugins
+self.getSlide = function(element) {
+	var slide = element;
+	
+	while (slide && slide.classList && !slide.classList.contains('slide')) {
+		slide = slide.parentNode;
+	}
+	
+	return slide;
+}
+
+})(document.head || document.getElementsByTagName('head')[0], document.body);

data/lib/slideshow/service/public/slideshow-csss/style.css

@@ -0,0 +1,45 @@
+#intro {
+	background: rgba(0,0,0,.7);
+	padding: 0;
+	border: 0;
+}
+
+#intro h1 {
+	width: 60%;
+	min-height: 500px;
+	margin: 5% auto 0;
+}
+
+#intro .attribution {
+	font-family: Helvetica, sans-serif;
+	font-weight: bold;
+	text-align: center;
+	font-size: 100%;
+/*	line-height: .3; */
+/*	color: rgba(0,0,0,.7); */
+	text-shadow: none;
+/*	background: url(img/rainbow-wood.jpg) bottom; */
+	padding:.6em 0 0;
+	overflow: hidden;
+}
+
+
+#css-controls-demo label {
+	display: block;
+}
+
+@media only screen and (-webkit-min-device-pixel-ratio:0) {
+/* hack to avoid using the Object element in Safari/WebKit, due to WebKit Bug 27190 */
+	object[type="image/svg+xml"] {
+		display: none;
+	}
+
+	#intro h1 {
+		background: url(logo.svg) no-repeat center;
+		background-size:100% auto;
+	}
+}
+
+/*
+ {{ more_content_for_css }}
+*/