daeslide.js

(function() {
	NodeList.prototype.forEach = Array.prototype.forEach;

	var daeslide = window.daeslide = function(root) {
		this.root = document.querySelector(root);
		this.slides = [];
		this._transition = [0, 'linear'];
		this.curSlide = undefined;
		this.affected = {hidden: {}};
		this._slideNum = -1;
		this._currentFuncs = [];
		this._totalFuncs = [];

		this.find = function(selector) { return this.root.querySelector(selector) };
		this.findAll = function(selector) { return this.root.querySelectorAll(selector) };
		this.affect = function(type, selector) { this.affected[type][selector] = true };
		this.apply = function(selector, func) {
			var element = this.root.querySelector(selector);
			if(element)
				return func(element);
		};
		this.applyAll = function(selector, func) {
			this.root.querySelectorAll(selector).forEach(func, this);
		};

		this.delta = function(selector, func) {
			this.curSlide.deltas.push({
				selector: selector, 
				func: func, 
				params: Array.prototype.slice.call(arguments, 2), 
				transition: this.curSlide.transition
			});
		};

		this.show_slide = function(num) {
			if(num < 0 || num >= this.slides.length || num == this._slideNum)
				return;

			var dir = num >= this._slideNum ? 1 : -1;
			var off = dir == 1 ? 1 : 0;
			for(var i = off; i < Math.abs(num-this._slideNum) + off; ++i) {
				var n = this._slideNum + i*dir;
				this.curSlide = this.slides[n];
				this.slides[n].deltas.forEach(function(delta) {
					this._transition = delta.transition;
					delta.func.apply(this, [delta.selector, dir==-1].concat(delta.params));
				}, this);
			}
			this._slideNum = num;
			this._currentFuncs.forEach(function(f) { f(num) });
		};

		this.animate = function(element, name, start, end) {
			var self = this;
			element.style['transition-property'] = '';
			if(this._transition[0] == 0)
				element.style[name] = end;
			else {
				element.style[name] = start;
				setTimeout(function() {
					element.style['transition-property'] = name;
					element.style['transition-duration'] = self._transition[0] + 's';
					element.style['transition-timing-function'] = self._transition[1];
					element.style[name] = end;
				}, 0)
			}
		};

		this._show = function(selector, invert, instant) {
			if(invert) return this._hide(selector, false);
			this.applyAll(selector, function(element) {
				if(instant === true)
					element.style.opacity = '1';
				else
					this.animate(element, 'opacity', '0', '1');
			});
		};
		this._hide = function(selector, invert, instant) {
			if(invert) return this._show(selector, false);
			this.applyAll(selector, function(element) {
				if(instant === true)
					element.style.opacity = '0';
				else
					this.animate(element, 'opacity', '1', '0');
			});
		};
		this._style = function(selector, invert, name, start, end) {
			if(invert) {
				var temp = start;
				start = end;
				end = temp;
			}
			this.applyAll(selector, function(element) {
				this.animate(element, name, start, end);
			})
		};
	}

	daeslide.prototype.move_slide = function(off) {
		this.show_slide(this._slideNum+off)
	};
	daeslide.prototype.next = function() { this.move_slide(1) };
	daeslide.prototype.prev = function() { this.move_slide(-1) };

	daeslide.prototype.connect_current = function(func) {
		if(typeof func !== 'function') {
			var elements = this.findAll(func);
			func = function(num) {
				elements.forEach(function(element) {
					element.textContent = num+1
				})
			}
		}

		func(this._slideNum);
		this._currentFuncs.push(func);
		return this;
	};

	daeslide.prototype.connect_total = function(func) {
		if(typeof func !== 'function') {
			var elements = this.findAll(func);
			func = function(num) {
				elements.forEach(function(element) {
					element.textContent = num
				})
			}
		}

		this._totalFuncs.push(func);
		return this;
	};

	daeslide.prototype.connect_prev = function(selector) {
		var self = this;
		this.applyAll(selector, function(element) {
			element.addEventListener('click', function() { self.prev() })
		});
		return this
	};

	daeslide.prototype.connect_next = function(selector) {
		var self = this;
		this.applyAll(selector, function(element) {
			element.addEventListener('click', function() { self.next() })
		});
		return this
	};

	daeslide.prototype.transition = function(time, style) {
		if(this.curSlide !== undefined)
			this.curSlide.transition = [time, style === undefined ? this.curSlide.transition[1] : style];
		else
			this._transition = [time, style === undefined ? 'linear' : style];
		return this;
	};

	daeslide.prototype.slide = function(id) {
		this.curSlide = {
			id : (id === undefined ? this.slides.length : id), 
			transition : this._transition, 
			deltas : []
		};
		this.slides.push(this.curSlide);

		return this;
	};

	daeslide.prototype.show = function(selector) {
		this.affect('hidden', selector);
		this.delta(selector, this._show);

		return this;
	};

	daeslide.prototype.hide = function(selector) {
		this.affect('hidden', selector);
		this.delta(selector, this._hide);

		return this;
	};

	daeslide.prototype.animate = function(type) {
		return this;
	};

	daeslide.prototype.style = function(selector, name, start, end) {
		this.delta(selector, this._style, name, start, end);

		return this;
	};

	daeslide.prototype.done = function() {
		var self = this;
		Object.keys(this.affected['hidden']).forEach(function(selector) {
			self._hide(selector, false, true);
		});
		this._totalFuncs.forEach(function(f) { f(self.slides.length) });

		this.show_slide(0)
	};
})()

test.html

<!doctype html>
<html>
	<head>
		<link rel="stylesheet" type="text/css" media="all" href="style.css" />
		<script src="daeslide.js"></script>
	</head>
	<body>
		<div id="deck">
			<span id="foo">Foo</span>
			<span id="bar">Bar</span>
			<br>
			<br>
			<span id="prev">Prev</span> <span id="current"></span>/<span id="total"></span> <span id="next">Next</span>
		</div>

		<script>
			new daeslide('#deck')
				.connect_prev('#prev').connect_next('#next')
				.connect_current('#current').connect_total('#total')
				.transition(0.3)
				.slide()
					.show('#foo')
				.slide()
					.show('#bar')
				.slide()
					.hide('#bar')
				.slide()
					.style('#foo', 'color', 'black', 'red')
				.slide()
					.transition(1, 'ease').style('#foo', 'font-size', '100%', '400%')
					.transition(5, 'ease').show('#bar')
				.slide()
					.hide('#foo')
				.done();
		</script>
	</body>
</html>