svgedit/screencasts/svgopen2010/script.js

/* eslint-disable no-var */
(function () {
var doc = document;
var disableBuilds = true;

var ctr = 0;
var spaces = /\s+/, a1 = [''];

var toArray = function (list) {
	return Array.prototype.slice.call(list || [], 0);
};

var byId = function (id) {
	if (typeof id === 'string') { return doc.getElementById(id); }
	return id;
};

var query = function (query, root) {
	if (!query) { return []; }
	if (typeof query !== 'string') { return toArray(query); }
	if (typeof root === 'string') {
		root = byId(root);
		if (!root) { return []; }
	}

	root = root || document;
	var rootIsDoc = (root.nodeType === 9);
	var doc = rootIsDoc ? root : (root.ownerDocument || document);

	// rewrite the query to be ID rooted
	if (!rootIsDoc || ('>~+'.indexOf(query.charAt(0)) >= 0)) {
		root.id = root.id || ('qUnique' + (ctr++));
		query = '#' + root.id + ' ' + query;
	}
	// don't choke on something like ".yada.yada >"
	if ('>~+'.indexOf(query.slice(-1)) >= 0) { query += ' *'; }

	return toArray(doc.querySelectorAll(query));
};

var strToArray = function (s) {
	if (typeof s === 'string' || s instanceof String) {
		if (s.indexOf(' ') < 0) {
			a1[0] = s;
			return a1;
		}
		return s.split(spaces);
	}
	return s;
};

var addClass = function (node, classStr) {
	classStr = strToArray(classStr);
	var cls = ' ' + node.className + ' ';
	for (var i = 0, len = classStr.length, c; i < len; ++i) {
		c = classStr[i];
		if (c && cls.indexOf(' ' + c + ' ') < 0) {
			cls += c + ' ';
		}
	}
	node.className = cls.trim();
};

var removeClass = function (node, classStr) {
	var cls;
	if (classStr !== undefined) {
		classStr = strToArray(classStr);
		cls = ' ' + node.className + ' ';
		for (var i = 0, len = classStr.length; i < len; ++i) {
			cls = cls.replace(' ' + classStr[i] + ' ', ' ');
		}
		cls = cls.trim();
	} else {
		cls = '';
	}
	if (node.className !== cls) {
		node.className = cls;
	}
};

var toggleClass = function (node, classStr) {
	var cls = ' ' + node.className + ' ';
	if (cls.indexOf(' ' + classStr.trim() + ' ') >= 0) {
		removeClass(node, classStr);
	} else {
		addClass(node, classStr);
	}
};

var ua = navigator.userAgent;
var isFF = parseFloat(ua.split('Firefox/')[1]) || undefined;
var isWK = parseFloat(ua.split('WebKit/')[1]) || undefined;
var isOpera = parseFloat(ua.split('Opera/')[1]) || undefined;

var canTransition = (function () {
	var ver = parseFloat(ua.split('Version/')[1]) || undefined;
	// test to determine if this browser can handle CSS transitions.
	var cachedCanTransition =
		(isWK || (isFF && isFF > 3.6) || (isOpera && ver >= 10.5));
	return function () { return cachedCanTransition; };
})();

//
// Slide class
//
var Slide = function (node, idx) {
	this._node = node;
	if (idx >= 0) {
		this._count = idx + 1;
	}
	if (this._node) {
		addClass(this._node, 'slide distant-slide');
	}
	this._makeCounter();
	this._makeBuildList();
};

Slide.prototype = {
	_node: null,
	_count: 0,
	_buildList: [],
	_visited: false,
	_currentState: '',
	_states: [ 'distant-slide', 'far-past',
		'past', 'current', 'future',
		'far-future', 'distant-slide' ],
	setState: function (state) {
		if (typeof state !== 'string') {
			state = this._states[state];
		}
		if (state === 'current' && !this._visited) {
			this._visited = true;
			this._makeBuildList();
		}
		removeClass(this._node, this._states);
		addClass(this._node, state);
		this._currentState = state;

		// delay first auto run. Really wish this were in CSS.
		/*
		this._runAutos();
		*/
		var _t = this;
		setTimeout(function () { _t._runAutos(); }, 400);
	},
	_makeCounter: function () {
		if (!this._count || !this._node) { return; }
		var c = doc.createElement('span');
		c.innerHTML = this._count;
		c.className = 'counter';
		this._node.appendChild(c);
	},
	_makeBuildList: function () {
		this._buildList = [];
		if (disableBuilds) { return; }
		if (this._node) {
			this._buildList = query('[data-build] > *', this._node);
		}
		this._buildList.forEach(function (el) {
			addClass(el, 'to-build');
		});
	},
	_runAutos: function () {
		if (this._currentState !== 'current') {
			return;
		}
		// find the next auto, slice it out of the list, and run it
		var idx = -1;
		this._buildList.some(function (n, i) {
			if (n.hasAttribute('data-auto')) {
				idx = i;
				return true;
			}
			return false;
		});
		if (idx >= 0) {
			var elem = this._buildList.splice(idx, 1)[0];
			var transitionEnd = isWK ? 'webkitTransitionEnd' : (isFF ? 'mozTransitionEnd' : 'oTransitionEnd');
			var _t = this;
			if (canTransition()) {
				var l = function (evt) {
					elem.parentNode.removeEventListener(transitionEnd, l, false);
					_t._runAutos();
				};
				elem.parentNode.addEventListener(transitionEnd, l, false);
				removeClass(elem, 'to-build');
			} else {
				setTimeout(function () {
					removeClass(elem, 'to-build');
					_t._runAutos();
				}, 400);
			}
		}
	},
	buildNext: function () {
		if (!this._buildList.length) {
			return false;
		}
		removeClass(this._buildList.shift(), 'to-build');
		return true;
	}
};

//
// SlideShow class
//
var SlideShow = function (slides) {
	this._slides = (slides || []).map(function (el, idx) {
		return new Slide(el, idx);
	});

	var h = window.location.hash;
	try {
		this.current = parseInt(h.split('#slide')[1], 10);
	} catch (e) { /* squeltch */ }
	this.current = isNaN(this.current) ? 1 : this.current;
	var _t = this;
	doc.addEventListener('keydown',
		function (e) { _t.handleKeys(e); }, false);
	doc.addEventListener('mousewheel',
		function (e) { _t.handleWheel(e); }, false);
	doc.addEventListener('DOMMouseScroll',
		function (e) { _t.handleWheel(e); }, false);
	doc.addEventListener('touchstart',
		function (e) { _t.handleTouchStart(e); }, false);
	doc.addEventListener('touchend',
		function (e) { _t.handleTouchEnd(e); }, false);
	window.addEventListener('popstate',
		function (e) { _t.go(e.state); }, false);
	this._update();
};

SlideShow.prototype = {
	_slides: [],
	_update: function (dontPush) {
		document.querySelector('#presentation-counter').innerText = this.current;
		if (history.pushState) {
			if (!dontPush) {
				history.pushState(this.current, 'Slide ' + this.current, '#slide' + this.current);
			}
		} else {
			window.location.hash = 'slide' + this.current;
		}
		for (var x = this.current - 1; x < this.current + 7; x++) {
			if (this._slides[x - 4]) {
				this._slides[x - 4].setState(Math.max(0, x - this.current));
			}
		}
	},

	current: 0,
	next: function () {
		if (!this._slides[this.current - 1].buildNext()) {
			this.current = Math.min(this.current + 1, this._slides.length);
			this._update();
		}
	},
	prev: function () {
		this.current = Math.max(this.current - 1, 1);
		this._update();
	},
	go: function (num) {
		if (history.pushState && this.current !== num) {
			history.replaceState(this.current, 'Slide ' + this.current, '#slide' + this.current);
		}
		this.current = num;
		this._update(true);
	},

	_notesOn: false,
	showNotes: function () {
		var notesOn = this._notesOn = !this._notesOn;
		query('.notes').forEach(function (el) {
			el.style.display = (notesOn) ? 'block' : 'none';
		});
	},
	switch3D: function () {
		toggleClass(document.body, 'three-d');
	},
	handleWheel: function (e) {
		var delta = 0;
		if (e.wheelDelta) {
			delta = e.wheelDelta / 120;
			if (isOpera) {
				delta = -delta;
			}
		} else if (e.detail) {
			delta = -e.detail / 3;
		}

		if (delta > 0) {
			this.prev();
			return;
		}
		if (delta < 0) {
			this.next();
		}
	},
	handleKeys: function (e) {
		if (/^(input|textarea)$/i.test(e.target.nodeName)) return;

		switch (e.keyCode) {
		case 37: // left arrow
			this.prev(); break;
		case 39: // right arrow
		case 32: // space
			this.next(); break;
		case 50: // 2
			this.showNotes(); break;
		case 51: // 3
			this.switch3D(); break;
		}
	},
	_touchStartX: 0,
	handleTouchStart: function (e) {
		this._touchStartX = e.touches[0].pageX;
	},
	handleTouchEnd: function (e) {
		var delta = this._touchStartX - e.changedTouches[0].pageX;
		var SWIPE_SIZE = 150;
		if (delta > SWIPE_SIZE) {
			this.next();
		} else if (delta < -SWIPE_SIZE) {
			this.prev();
		}
	}
};

// Initialize
var slideshow = new SlideShow(query('.slide')); // eslint-disable-line no-unused-vars

document.querySelector('#toggle-counter').addEventListener('click', toggleCounter, false);
document.querySelector('#toggle-size').addEventListener('click', toggleSize, false);
document.querySelector('#toggle-transitions').addEventListener('click', toggleTransitions, false);
document.querySelector('#toggle-gradients').addEventListener('click', toggleGradients, false);

var counters = document.querySelectorAll('.counter');
var slides = document.querySelectorAll('.slide');

function toggleCounter () {
	toArray(counters).forEach(function (el) {
		el.style.display = (el.offsetHeight) ? 'none' : 'block';
	});
}

function toggleSize () {
	toArray(slides).forEach(function (el) {
		if (!/reduced/.test(el.className)) {
			addClass(el, 'reduced');
		} else {
			removeClass(el, 'reduced');
		}
	});
}

function toggleTransitions () {
	toArray(slides).forEach(function (el) {
		if (!/no-transitions/.test(el.className)) {
			addClass(el, 'no-transitions');
		} else {
			removeClass(el, 'no-transitions');
		}
	});
}

function toggleGradients () {
	toArray(slides).forEach(function (el) {
		if (!/no-gradients/.test(el.className)) {
			addClass(el, 'no-gradients');
		} else {
			removeClass(el, 'no-gradients');
		}
	});
}
})();