added example for Medium.com

example/exampleMedium/buttons.js

@@ -0,0 +1,78 @@
+!function(){
+	/*I will use this variable for storing frames
+	for button clicks below*/
+	var resetFrame;
+	function makeButtons(exports){
+		/*create an 2 element array of arrays,
+		I will chain forEach to generate buttons 
+		using the button function*/
+		[
+			[
+				"Stop",
+				function(event){
+					/*either resume or pause taskq, changing the button
+					text accordingly*/
+					this.textContent = this.textContent === "Stop"
+					? (taskq.pause,exports.message("paused!;"),"Resume")
+					: (taskq.resume,exports.message("resumed!;"),"Stop");
+				}
+			],
+			[
+				"Restart",
+				function(event){
+					/*clear all the points, and reset the counter*/
+					var row = document.getElementsByClassName("row")[0];
+					while(row.hasChildNodes()){
+						row.removeChild(row.lastChild);
+					};
+					exports.counter = 0;
+					/*if the main thread has ended, we have to restart. But here is
+					the catch: taskq.running is set by 2 threads when they shift() their tasks
+					at start, the main and the immediate thread. They both operate under 
+					Promises and requestAnimationFrame. So in a single frame of ~17ms, 
+					taskq.running might return false before it is true again the next frame.
+					When you are checking taskq.running, it good to check it next frame as well
+					to make sure the threads are done. Below is normally not necessary unless
+					someone spams the buttons faster than ~17ms.*/
+					if(!taskq.running){
+						window.cancelAnimationFrame(resetFrame);
+						resetFrame = window.requestAnimationFrame(function(){
+							/*taskq was infact running, return*/
+							if(taskq.running){
+								return;
+							}
+							/*push a function to main thread and call perform to start. 
+							This was automatically done for you at the load event.*/
+							taskq
+							.push(function(){
+								/*exports are flushed from taskq at the end of main thread.
+								Luckily its kept in memory here, so we can re-export it.*/
+								taskq.export(exports,"exports");
+								taskq.load("./draw.js")
+								.then(function(res){
+									res.init;
+									setTimeout(function(){
+										res(true);
+									},500);
+								});
+							}).perform();
+						});
+					}
+				}
+			]
+		].forEach(function(d,i){
+			button.apply(null,d);
+		});
+		/*create a button generator that takes
+		as arguments a text to display and a function
+		to fire on click event.*/
+		function button(text,f){
+			var div = document.createElement("div");
+			div.addEventListener("click",f,false);
+			button.div = button.div || document.getElementsByClassName("buttons")[0];
+			button.div.appendChild(div);
+			div.textContent = encodeURI(text).replace(/(?:%20)/gi," ");
+		};
+	};
+	taskq.push(makeButtons);
+}();

example/exampleMedium/draw.js

@@ -0,0 +1,43 @@
+!function(){
+	function draw(exports){
+		/*instead of recreating similar divs,
+		I will make one template div, store it
+		in exports and then clone it each time.*/
+		if(!exports.point) {
+			var div = document.createElement("div");
+			div.className = "point";
+			exports.point = div;
+		}
+		/*Store the main div, so we dont have to
+		grab it each time*/
+		if(!exports.row){
+			exports.row = document.getElementsByClassName("row")[0];
+		}
+		div = exports.point.cloneNode();
+		div.style.top = (50 - Math.sin(exports.counter * exports.step) * 50) + "%";
+		div.style.left = exports.counter + "%";
+		exports.row.appendChild(div);
+		/*introduce a small delay which allows the
+		css styles to kick in.*/
+		window.requestAnimationFrame(function(){
+			div.style.boxShadow = "0px 0px 0px 0px Orange";
+		});
+		/*if we reach 101, we are done*/
+		exports.counter = ++exports.counter % 101;
+		/*if we did not reach 101, load draw.js again,
+		updating the immediate thread*/
+		if (exports.counter) {
+			taskq.load("./draw.js")
+			.then(function(res){
+				res.init;
+				setTimeout(function(){
+					res(true);
+				},500);
+			});
+		} else {
+			/*otherwise report*/
+			exports.message("routine ended!;");
+		}
+	};
+	taskq.push(draw);
+}();

example/exampleMedium/index.html

@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en" style="font-size:24px;">
+	<head>
+		<meta charset="utf-8">
+		<script type="text/javascript" src="../../taskq.js" charset="UTF-8"></script>
+		<script type="text/javascript" src="./index.js" charset="UTF-8" async></script>
+	</head>
+	<body>
+		<div class="row">
+		</div>
+		<div class="sideCar">
+		</div>
+		<div class="buttons">
+		</div>
+		<a class="github-corner" aria-label="View source on Github">
+		</a>
+	</body>
+</html>

example/exampleMedium/index.js

@@ -0,0 +1,93 @@
+!function(){
+	/*in our main thread there is only index function
+	so there is no need to use _taskqId or _taskqWaitFor.
+	We define the function and directly do taskq.push 
+	to start the main thread.*/
+	function index(exports){
+		/*start by loading the message generator
+		then wait 3 seconds before proceeding next*/
+		taskq.load("./message.js")
+		.then(function(){
+			exports.message("message generator added!;");
+		})
+		.then(function(res){
+			res.init;
+			exports.message("Waiting 3 seconds...");
+			setTimeout(function(){
+				res(true);
+			},3000);
+		});
+		/*load the styles, wait for 3 seconds,
+		then export some variables that we will
+		need later*/
+		taskq.load("./loadStyles.js")
+		.then(function(){
+			exports.message("styleSheets loaded!;");
+		})
+		.then(function(res){
+			res.init;
+			exports.message("Waiting 3 seconds...");
+			setTimeout(function(){
+				res(true);
+			},3000);
+		})
+		.then(function(){
+			/*To draw sin(x), everytime draw.js is loaded, it will
+			increment the counter. We will finish the graph in 
+			100 steps. Since the period is 2PI, we divide it by 100*/
+			exports.counter = 0;
+			exports.step = Math.PI*2/100;
+			exports.message("Variables set!;");
+		});
+		/*Let's add a github button, then wait for 3 seconds*/
+		taskq.load("./githubButtons.js")
+		.then(function(res){
+			res.init;
+			setTimeout(function(){
+				exports.message("Added github corner!;");
+				res(true);
+			},3000);
+		})
+		.then(function(res){
+			res.init;
+			setTimeout(function(){
+				exports.message("Let's add some buttons!;");
+				res(true);
+			},3000);
+		});
+		/*Add buttons to resume or pause, 
+		wait for another 3 seconds twice*/
+		taskq.load("./buttons.js")
+		.then(function(res){
+			res.init;
+			setTimeout(function(){
+				exports.message("Buttons made!;");
+				res(true);
+			},3000);
+		})
+		.then(function(res){
+			res.init;
+			exports.message("Starting to draw in 3 seconds...");
+			setTimeout(function(){
+				res(true);
+			},3000);
+		});
+		/*recursively load draw function,
+		this will not blow the stack.
+		Wait for 500 milliseconds before 
+		proceeding reload*/
+		taskq.load("./draw.js")
+		.then(function(res){
+			res.init;
+			setTimeout(function(){
+				res(true);
+			},500);
+		});
+	};
+	/*since iief executes immediately
+	we can export a variable to be available
+	for the pushed functions*/
+	taskq.export({},"exports");
+	/*start the main thread*/
+	taskq.push(index);
+}();

example/exampleMedium/loadStyles.js

@@ -0,0 +1,10 @@
+!function(){
+	function loadStyles(){
+		var link = document.createElement("link");
+		link.href = "./styles.css";
+		link.type = "text/css";
+		link.rel = "stylesheet";
+		document.head.appendChild(link);
+	};
+	taskq.push(loadStyles);
+}();

example/exampleMedium/message.js

@@ -0,0 +1,15 @@
+!function(){
+	function messenger(exports){
+		/*export the message so it is visible for other functions*/
+		exports.message = message;
+		/*function for message generator*/
+		function message(text){
+			var div = document.createElement("div");
+			message.count = message.count || 0;
+			message.div = message.div || document.getElementsByClassName("sideCar")[0];
+			message.div.appendChild(div);
+			div.textContent = ++message.count + ") " + encodeURI(text).replace(/(?:%20)/gi," ");
+		};
+	};
+	taskq.push(messenger);
+}();

example/exampleMedium/styles.css

@@ -0,0 +1,93 @@
+html {
+	font-size:16px;
+	font-family:Helvetica, Arial, "sans-serif";
+	color:DimGray;
+	cursor:pointer;
+}
+html * {
+	box-sizing:border-box;
+	-webkit-user-select: none;
+	-moz-user-select: none;
+	-ms-user-select: none;
+	user-select: none;
+}
+div.row {
+	position:absolute;
+	width:50%;
+	height:50%;
+	top:0;
+	left:0;
+	bottom:0;
+	right:0;
+	margin:auto;
+	text-align:center;
+	font-size:1rem;
+	line-height:200%;
+	border: 20px solid DimGray;
+	background-color:DimGray;
+	border-radius:10px;
+}
+div.sideCar {
+	font-size:0.75rem;
+	padding: 20px;
+	position:absolute;
+	top:0;
+	left:0;
+	width:20%;
+	height:100%;
+	overflow-y:auto;
+}
+div.sideCar > div {
+	margin-bottom:20px;
+}
+div.buttons {
+	padding: 20px;
+	position:absolute;
+	top:80%;
+	left:30%;
+	width:40%;
+	height:20%;
+	text-align:center;
+}
+div.buttons > div {
+	margin:0px 20px 0px 20px;
+	background-color: Orange;
+	border: 0px solid transparent;
+	border-radius:5px;
+	min-width:35%;
+	display:inline-block;
+	padding:10px;
+	transition: background-color 1s ease;
+}
+div.buttons > div:hover {
+	background-color: OrangeRed;
+}
+div.point {
+	position:absolute;
+	width:6px;
+	height:6px;
+	border-radius:100%;
+	transform:translate(-50%,-50%);
+	background-color: Orange;
+	box-shadow:0px 0px 30px 30px Orange;
+	transition: box-shadow 1.5s ease;
+}
+.github-corner:hover .octo-arm{
+	animation:octocat-wave 560ms ease-in-out
+}
+@keyframes octocat-wave{
+	0%,100% {
+		transform:rotate(0)
+	}
+	20%,60% {
+		transform:rotate(-25deg)
+	}
+	40%,80% {
+		transform:rotate(10deg)
+	}
+}
+@media (max-width:500px){
+	.github-corner:hover .octo-arm{animation:none}.github-corner .octo-arm{
+		animation:octocat-wave 560ms ease-in-out
+	}
+}