survivalkit 0.1 → 0.1.1

data/templates/project/sources/PaintbrushJS/demo/script/playground.js

@@ -1,357 +0,0 @@
-// --------------------------------------------------
-//
-// playground.js, v0.2
-// supporting script for PaintbrushJS playground demo
-//
-// Developed by Dave Shea, http://www.mezzoblue.com/
-//
-// This project lives on GitHub:
-//    http://github.com/mezzoblue/PaintbrushJS
-//
-// Except where otherwise noted, PaintbrushJS is licensed under the MIT License:
-//    http://www.opensource.org/licenses/mit-license.php
-//
-// --------------------------------------------------
-
-
-
-// filter master control object
-var filterControl = {
-	"filters"	:	[
-
-		{
-			"name"			: "blur",
-			"label"			: "Gaussian Blur",
-			"filterClass"	: "filter-blur",
-			"controlId"		: "controls-blur"
-		},
-
-
-		{
-			"name"			: "edges",
-			"label"			: "Detect Edges",
-			"filterClass"	: "filter-edges",
-			"controlId"		: "controls-edges"
-		},
-
-		{
-			"name"			: "emboss",
-			"label"			: "Emboss",
-			"filterClass"	: "filter-emboss",
-			"controlId"		: "controls-emboss"
-		},
-
-		{
-			"name"			: "greyscale",
-			"label"			: "Greyscale",
-			"filterClass"	: "filter-greyscale",
-			"controlId"		: "controls-greyscale"
-		},
-
-
-		{
-			"name"			: "mosaic",
-			"label"			: "Mosaic",
-			"filterClass"	: "filter-mosaic",
-			"controlId"		: "controls-mosaic"
-		},
-
-		{
-			"name"			: "noise",
-			"label"			: "Noise",
-			"filterClass"	: "filter-noise",
-			"controlId"		: "controls-noise"
-		},
-
-		{
-			"name"			: "posterize",
-			"label"			: "Posterize",
-			"filterClass"	: "filter-posterize",
-			"controlId"		: "controls-posterize"
-		},
-		
-		{
-			"name"			: "sepia",
-			"label"			: "Sepia Tone",
-			"filterClass"	: "filter-sepia",
-			"controlId"		: "controls-sepia"
-		},
-
-		{
-			"name"			: "sharpen",
-			"label"			: "Sharpen",
-			"filterClass"	: "filter-sharpen",
-			"controlId"		: "controls-sharpen"
-		},
-
-		{
-			"name"			: "tint",
-			"label"			: "Colour Tint",
-			"filterClass"	: "filter-tint",
-			"controlId"		: "controls-tint"
-		}
-	]
-}
-
-
-// filter selection events
-addLoadEvent(function() {
-
-	// get the main image
-	var img = getFilterTarget();
-	// get the filter chooser
-	var filterSelector = getFilterSelector();
-
-	// populate the select list with defined filters
-	for (var i = 0; i < filterControl.filters.length; i++) {
-
-		// create the new option element
-		newOption = document.createElement("option");
-		newOption.text = filterControl.filters[i].label;
-		newOption.value = filterControl.filters[i].name;
-
-		// add it to the list
-		filterSelector.appendChild(newOption);
-	}
-
-	// add an event handler to swap control panels
-	filterSelector.onchange = function() {
-		removeClasses(img);
-		flushDataAttributes(img);
-		destroyStash(img, true);
-		// adjust visible control panel
-		displayControls();
-		updateFilters(img);
-	}
-	
-	// initialize the control panel
-	displayControls();
-
-});
-
-
-
-
-// thumbnail / photo swapping
-addLoadEvent(function() {
-
-	// get the main image
-	var img = getFilterTarget();
-	// get every element with the specified thumb class
-	var thumbParents = getElementsByClassName("thumb");
-	
-	// walk through each thumbnail and attach an event handler
-	for (var i = 0; i < thumbParents.length; i++) {
-		var thumbs = thumbParents[i].getElementsByTagName("img");
-		for (var j = 0; j < thumbs.length; j++) {
-		
-			// swap the main image with the thumbnail source on click
-			thumbs[j].onclick = function() {
-			
-				// clear classes on parent li elements
-				var parentLi = this.parentNode;
-				var parentUl = parentLi.parentNode;
-				var lis = parentUl.getElementsByTagName("li");
-				for (var k = 0; k < lis.length; k++) {
-					removeClass(lis[k], "current");
-				}
-
-				// add a "current" class to highlight current thumbnail
-				addClass(parentLi, "current");
-				
-			
-				// clean up old image
-				removeClasses(img);
-				destroyStash(img);
-				img.src = this.getAttribute("src");
-				
-				// re-apply filters
-				displayControls();
-				updateFilters(img);
-			}
-			
-		}
-	}
-
-});
-
-		
-// add events to update the image upon various interactions
-addLoadEvent(function() {
-
-	// get our two main interaction objects, the form and the image
-	var thisForm = getInteractionForm();
-	var interaction = getInteractionTarget();
-	var img = getFilterTarget();
-
-	// initial filter application
-	updateFilters(img);
-
-	// when the form is submitted...
-	thisForm.onsubmit = function() {
-		updateFilters(img);
-		return false;
-	};
-
-	// also add a hook for range sliders
-	inputs = interaction.getElementsByTagName("input");
-
-	for (var i = 0; i < inputs.length; i++) {
-		if (inputs[i].type.toLowerCase() == "range") {
-			// kills performance if we're calling it onchange.
-			// but inaccessible / irrelevant to mobile if we do it onmouseup.
-			// damned if we do... I'm favouring speed here, would love input.
-			inputs[i].onmouseup = function() {		
-				updateFilters(img);
-			}
-		}
-		// fallback for radio buttons, colour input
-		// (and browsers that don't do range yet, hint hint Firefox)
-		if ((inputs[i].type.toLowerCase() == "text") || (inputs[i].type.toLowerCase() == "radio")) {
-			inputs[i].onchange = function() {
-				updateFilters(img);
-			}
-		}
-	}
-
-
-});
-
-
-
-
-
-// refresh filters after various actions have been performed
-function updateFilters(img) {
-
-	// first, does the reference object have an original image in the DOM?
-	var classList = (img.className.toLowerCase()).split(' ');
-	for (var i = 0; i < classList.length; i++) {
-	
-		// quick reference
-		var currentClass = classList[i];
-
-		// okay, we're good, there's an original
-		if (currentClass.substr(0, 7) == "pb-ref-") {
-
-			// clear reference object's data-pb-* attributes
-			flushDataAttributes(img);
-
-			// get the filter chooser
-			var filterSelector = getFilterSelector();
-
-			// go fetch the original and update the reference object source
-			var original = document.getElementById("pb-original-" + currentClass.substr(7, currentClass.length - 7));
-			placeReferenceImage(img, original.src, img);
-			img.style.visibility = "hidden";
-
-			// find the currently-selected filter
-			var options = filterSelector.getElementsByTagName("option");
-			var obj = getCurrentControl(options);
-			if (obj) {
-
-				// get all inputs in the form
-				currentForm = document.getElementById(obj.controlId);
-				inputs = currentForm.getElementsByTagName("input");
-	
-				// loop through the inputs, grabbing the names and values and 
-				// setting them as attributes on the reference object
-				for (var j = 0; j < inputs.length; j++) {
-					if ((inputs[j].type == "range") || (inputs[j].type == "text")) addAttribute(img, inputs[j].name, inputs[j].value);
-					if ((inputs[j].type == "radio")) {
-						if (inputs[j].checked) {
-							addAttribute(img, inputs[j].name, inputs[j].value);
-						}
-					}
-				}
-			}
-		}
-	}
-
-	// finally, apply the filters
-	processFilters();
-
-	img.style.visibility = "visible";
-}
-
-
-
-
-
-// update to current filter controls when switching filters
-function displayControls() {
-	// get the main image
-	var img = getFilterTarget();
-	// get the filter chooser
-	var filterSelector = getFilterSelector();
-
-	// set up the control panels
-	hideControls();
-	showCurrentControl(filterSelector);
-	flushDataAttributes(img);
-	removeClasses(img);
-
-	// find the currently-selected filter
-	var options = filterSelector.getElementsByTagName("option");
-	var obj = getCurrentControl(options);
-	if (obj) {
-		// if we've got a match, display this current filter's control panel
-		addClass(img, obj.filterClass);
-	}
-
-	// kinda weird that I need to apply this inside and outside the filter. ideally it'd only happen here.
-	// Haven't quite tracked down why the 2x application is necessary yet.
-	updateFilters(img);
-}
-
-
-// hide all control panels
-function hideControls() {
-	var controls = getElementsByClassName("controls");
-	for (var i = 0; i < controls.length; i++) {
-		controls[i].style.display = "none";
-	}
-}
-
-// show currently-selected control panel
-function showCurrentControl(filterSelector) {
-
-	// find the currently-selected filter
-	var options = filterSelector.getElementsByTagName("option");
-	var obj = getCurrentControl(options);
-	if (obj) {
-		// if we've got a match, display this current filter's control panel
-		var current = document.getElementById(obj.controlId);
-		current.style.display = "block";
-	}
-}
-
-// helper functions to grab the needed DOM elements
-function getFilterSelector() {
-	return document.getElementById("filter-selector");
-}
-function getFilterTarget() {
-	return document.getElementById("filter-target");
-}
-function getInteractionForm() {
-	return document.getElementById("interaction-form");
-}
-function getInteractionTarget() {
-	return document.getElementById("interaction");
-}
-
-// helper function to match the currently-selected option in the select list to a filter control
-function getCurrentControl(options) {
-	// first, loop through the list of select options
-	for (var i = 0; i < options.length; i++) {
-		// when we find the currently-selected one, loop through the filter control object
-		if (options[i].selected) {
-			for (var j = 0; j < filterControl.filters.length; j++) {
-				// if we can match the selected option to a filter, return the filter
-				if (filterControl.filters[j].name == options[i].value) {
-					return(filterControl.filters[j]);
-				}
-			}
-		}
-	}
-}

data/templates/project/sources/PaintbrushJS/demo/script/timing.js

@@ -1,23 +0,0 @@
-// --------------------------------------------------
-//
-// timing.js
-// simple functions for timing filter render speeds
-// (not part of the core PaintbrushJS, safe to delete)
-//
-// This project lives on GitHub:
-//    http://github.com/mezzoblue/PaintbrushJS
-//
-// --------------------------------------------------
-//
-
-var runTimer = true;
-
-function startTimer() {
-	var s = new Date();
-	return(s.getTime());	
-}
-function endTimer(s) {
-	// set an end timer and log the delta
-	var e = new Date();
-	document.getElementById("copyright").innerHTML += (" " + (e.getTime() - s) / 1000 + "s to execute all filters on this page.");
-}

data/templates/project/sources/PaintbrushJS/demo/usage.html

@@ -1,183 +0,0 @@
-<!doctype html>
-<html>
-	<head>
-		<title>PaintbrushJS Playground &#8212; Example Usage</title>
-		<meta charset="utf-8" />
-
-		<script type="text/javascript" src="script/common.js"></script>
-		<script type="text/javascript" src="script/paintbrush.js"></script>
-
-		<link rel="stylesheet" type="text/css" href="css/playground.css" />
-	</head>
-	<body>
-		
-		<header>
-			<h1><a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS</a> Playground</h1>
-			<aside>
-				<span>by Dave Shea</span>
-				<a href="http://twitter.com/mezzoblue">@mezzoblue</a>
-			</aside>
-		</header>
-		
-		<a href="http://github.com/mezzoblue/PaintbrushJS" class="github">Fork me on GitHub</a>
-		
-		<div id="examples">
-
-			<img class="filtered filter-blur" src="images/500/bee.jpg" width="200" height="133" alt="">
-			<h2>Basic Blur</h2>
-			<textarea>&lt;img src="bee.jpg" 
-	width="200" height="133"
-	class="filter-blur"&gt;</textarea>
-
-			<img class="filtered filter-blur" data-pb-blur-amount="5" src="images/500/jordan.jpg" width="200" height="133" alt="">
-			<h2>Blur Amount 5</h2>
-			<textarea>&lt;img src="jordan.jpg" 
-	width="200" height="133"
-	class="filter-blur"
-	data-pb-blur-amount="5"&gt;</textarea>
-
-			<img class="filtered filter-edges" src="images/500/sign.jpg" width="200" height="133" alt="">
-			<h2>Detect Edges</h2>
-			<textarea>&lt;img src="sign.jpg" 
-	width="200" height="133"
-	class="filter-edges"&gt;</textarea>
-
-			<img class="filtered filter-emboss" src="images/500/lighthouse.jpg" width="200" height="133" alt="">
-			<h2>Basic Emboss</h2>
-			<textarea>&lt;img src="lighthouse.jpg" 
-	width="200" height="133"
-	class="filter-emboss"&gt;</textarea>
-
-			<img class="filtered filter-emboss" data-pb-emboss-amount="0.8" data-pb-noise-type="colour" src="images/500/stones.jpg" width="200" height="133" alt="">
-			<h2>Emboss Amount 0.8</h2>
-			<textarea>&lt;img src="stones.jpg" 
-	width="200" height="133"
-	class="filter-emboss"
-	data-pb-noise-amount="0.8"&gt;</textarea>
-
-			<img class="filtered filter-greyscale" src="images/500/sign.jpg" width="200" height="133" alt="">
-			<h2>Basic Greyscale</h2>
-			<textarea>&lt;img src="sign.jpg" 
-	width="200" height="133"
-	class="filter-greyscale"&gt;</textarea>
-
-			<img class="filtered filter-greyscale" data-pb-greyscale-opacity="0.5" src="images/500/leaves.jpg" width="200" height="133" alt="">
-			<h2>Greyscale Opacity 0.5</h2>
-			<textarea>&lt;img src="leaves.jpg" 
-	width="200" height="133"
-	class="filter-greyscale"
-	data-pb-greyscale-opacity="0.5"&gt;</textarea>
-
-			<img class="filtered filter-mosaic" src="images/500/staples.jpg" width="200" height="133" alt="">
-			<h2>Basic Mosaic</h2>
-			<textarea>&lt;img src="staples.jpg" 
-	width="200" height="133"
-	class="filter-mosaic"&gt;</textarea>
-
-			<img class="filtered filter-mosaic" data-pb-mosaic-size="15" data-pb-mosaic-opacity="0.5" src="images/500/louvre.jpg" width="200" height="133" alt="">
-			<h2>Mosaic Size 15, Opacity 0.5</h2>
-			<textarea>&lt;img src="louvre.jpg" 
-	width="200" height="133"
-	class="filter-mosaic"
-	data-pb-mosaic-size="15"
-	data-pb-mosaic-opacity="0.5"&gt;</textarea>
-
-			<img class="filtered filter-noise" src="images/500/lighthouse.jpg" width="200" height="133" alt="">
-			<h2>Basic Noise</h2>
-			<textarea>&lt;img src="lighthouse.jpg" 
-	width="200" height="133"
-	class="filter-noise"&gt;</textarea>
-
-			<img class="filtered filter-noise" data-pb-noise-amount="100" data-pb-noise-type="colour" src="images/500/stones.jpg" width="200" height="133" alt="">
-			<h2>Noise Amount 100, Type Colour</h2>
-			<textarea>&lt;img src="stones.jpg" 
-	width="200" height="133"
-	class="filter-noise"
-	data-pb-noise-amount="100"
-	data-pb-noise-type="colour"&gt;</textarea>
-
-			<img class="filtered filter-posterize" src="images/500/bee.jpg" width="200" height="133" alt="">
-			<h2>Basic Posterize</h2>
-			<textarea>&lt;img src="bee.jpg" 
-	width="200" height="133"
-	class="filter-posterize"&gt;</textarea>
-
-			<img class="filtered filter-posterize" data-pb-posterize-amount="3" data-pb-posterize-opacity="0.4" src="images/500/jordan.jpg" width="200" height="133" alt="">
-			<h2>Posterize Amount 3, Opacity 0.4</h2>
-			<textarea>&lt;img src="jordan.jpg" 
-	width="200" height="133"
-	data-pb-posterize-amount="3"
-	data-pb-posterize-opacity="0.4"
-	class="filter-posterize"&gt;</textarea>
-
-			<img class="filtered filter-sepia" src="images/500/sign.jpg" width="200" height="133" alt="">
-			<h2>Basic Sepia</h2>
-			<textarea>&lt;img src="sign.jpg" 
-	width="200" height="133"
-	class="filter-sepia"&gt;</textarea>
-
-			<img class="filtered filter-sepia" data-pb-sepia-opacity="0.5" src="images/500/leaves.jpg" width="200" height="133" alt="">
-			<h2>Sepia Opacity 0.5</h2>
-			<textarea>&lt;img src="leaves.jpg" 
-	width="200" height="133"
-	class="filter-sepia"
-	data-pb-sepia-opacity="0.5"&gt;</textarea>
-
-
-
-			<img class="filtered filter-sharpen" src="images/500/bee.jpg" width="200" height="133" alt="">
-			<h2>Basic Sharpen</h2>
-			<textarea>&lt;img src="bee.jpg" 
-	width="200" height="133"
-	class="filter-sharpen"&gt;</textarea>
-
-			<img class="filtered filter-sharpen" data-pb-sharpen-amount="0.8" src="images/500/lighthouse.jpg" width="200" height="133" alt="">
-			<h2>Sharpen Amount 0.8</h2>
-			<textarea>&lt;img src="lighthouse.jpg" 
-	width="200" height="133"
-	class="filter-sharpen"
-	data-pb-sharpen-amount="0.8"&gt;</textarea>
-
-
-			<img class="filtered filter-tint" src="images/500/staples.jpg" width="200" height="133" alt="">
-			<h2>Basic Tint</h2>
-			<textarea>&lt;img src="staples.jpg" 
-	width="200" height="133"
-	class="filter-tint"&gt;</textarea>
-
-			<img class="filtered filter-tint" data-pb-tint-color="#0066CC" data-pb-tint-opacity="0.1" src="images/500/louvre.jpg" width="200" height="133" alt="">
-			<h2>Tint Colour #0066CC, Opacity 0.1</h2>
-			<textarea>&lt;img src="louvre.jpg" 
-	width="200" height="133"
-	class="filter-tint"
-	data-pb-tint-colour="#0066CC"
-	data-pb-tint-opacity="0.1"&gt;</textarea>
-
-		</div>
-
-
-
-		<section id="description">
-			<aside>
-				<a href="http://github.com/mezzoblue/PaintbrushJS/zipball/master">Download Now</a>
-				<p>PaintbrushJS v0.3</p>
-			</aside>
-		
-			<p>PaintbrushJS is a lightweight browser-based image processing library built with Javascript and canvas. All photos by <a href="http://www.flickr.com/photos/mezzoblue/sets/72057594064508706/">Dave Shea</a>.</p>
-
-			<ul>
-				<li>Get the source code on GitHub: <a href="http://github.com/mezzoblue/PaintbrushJS">mezzoblue/PaintbrushJS</a></li>
-				<li>See <a href="http://wiki.github.com/mezzoblue/PaintbrushJS/documentation">usage &amp; documentation</a></li>
-				<li>There are some <a href="http://wiki.github.com/mezzoblue/PaintbrushJS/known-issues">known issues</a></li>
-			</ul>
-		</section>
-
-
-
-		
-		<footer>
-			<p id="copyright">&copy; Copyright 2010, Dave Shea. <a href="http://github.com/mezzoblue/PaintbrushJS">PaintbrushJS lives on GitHub</a>. <a href="http://www.opensource.org/licenses/mit-license.php">MIT Licensed</a>.</p>
-		</footer>
-
-	</body>
-</html>