mirror/pixel-editor
1
0
Fork 0
mirror of https://github.com/lospec/pixel-editor.git synced 2023-08-10 21:12:51 +03:00
Code Issues Projects Releases Wiki Activity

ported to static site, removed _ext folder, split hbs files into partials

Browse Source
This commit is contained in:
skeddles
2021-07-06 17:24:20 -04:00
parent 1e3549b016
commit 1f820fd97e
86 changed files with 1203 additions and 977 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
js/_logs.js
View File

@ -1,15 +0,0 @@
var rawFile = new XMLHttpRequest();
rawFile.open("GET", '/pixel-editor/latestLog.html', false);
rawFile.onreadystatechange = function ()
{
if(rawFile.readyState === 4)
{
if(rawFile.status === 200 || rawFile.status == 0)
{
var allText = rawFile.responseText;
document.getElementById("latest-update").innerHTML = allText;
}
}
}
rawFile.send(null);

2
js/_newPixel.js
View File

@ -103,7 +103,7 @@ function newPixel (width, height, editorMode, fileContent = null) {
// If the user selected a palette and isn't opening a file, I load the selected palette
if (selectedPalette != 'Choose a palette...' && fileContent == null) {
console.log('HELO', selectedPalette, palettes[selectedPalette])
//if this palette isnt the one specified in the url, then reset the url
if (!palettes[selectedPalette].specified)
history.pushState(null, null, '/pixel-editor');

67
js/_onLoad.js
View File

@ -1,17 +1,68 @@
//when the page is done loading, you can get ready to start
window.onload = function () {
featureToggles.onLoad();
currentTool.updateCursor();
//check if there are any url parameters
if (window.location.pathname.replace('/pixel-editor/','').length <= 1) {
console.log('no url parameters were found');
//if the user specified dimensions
if (specifiedDimentions) {
//create a new pixel
newPixel(getValue('size-width'), getValue('size-height'), getValue('editor-mode'));
} else {
//otherwise show the new pixel dialog
showDialogue('splash', false);
}
//show splash screen
showDialogue('splash', false);
}
//url parameters were specified
else {
console.log('loading preset from url parameters', window.location.pathname);
let args = window.location.pathname.split('/');
let paletteSlug = args[2];
let dimentions = args[3];
//fetch palette via lospec palette API
fetch('https://lospec.com/palette-list/'+paletteSlug+'.json')
.then(response => response.json())
.then(data => {
//palette loaded successfully
console.log('loaded palette', data);
palettes[paletteSlug] = data;
palettes[paletteSlug].specified = true;
//refresh list of palettes
document.getElementById('palette-menu-splash').refresh();
//if the dimentions were specified
if (dimentions && dimentions.length >= 3 && dimentions.includes('x')) {
let width = dimentions.split('x')[0];
let height = dimentions.split('x')[1];
console.log('dimentions were specified',width,'x',height)
//firstPixel = false;
//create new document
newPixel(width, height, getValue('editor-mode'));
}
//dimentions were not specified -- show splash screen with palette preselected
else {
//show splash
showDialogue('new-pixel', false);
}
})
//error fetching url (either palette doesn't exist, or lospec is down)
.catch((error) => {
console.warn('failed to load palette "'+paletteSlug+'"', error);
//proceed to splash screen
showDialogue('splash', false);
});
}
};

123
js/_palettes.js
View File

@ -1,3 +1,59 @@
palettes = {
"Endesga 32": {
colors: "be4a2f,d77643,ead4aa,e4a672,b86f50,733e39,3e2731,a22633,e43b44,f77622,feae34,fee761,63c74d,3e8948,265c42,193c3e,124e89,0099db,2ce8f5,ffffff,c0cbdc,8b9bb4,5a6988,3a4466,262b44,181425,ff0044,68386c,b55088,f6757a,e8b796,c28569".split(
","
),
},
"Resurrect 64": {
colors: "2e222f,3e3546,625565,966c6c,ab947a,694f62,7f708a,9babb2,c7dcd0,ffffff,6e2727,b33831,ea4f36,f57d4a,ae2334,e83b3b,fb6b1d,f79617,f9c22b,7a3045,9e4539,cd683d,e6904e,fbb954,4c3e24,676633,a2a947,d5e04b,fbff86,165a4c,239063,1ebc73,91db69,cddf6c,313638,374e4a,547e64,92a984,b2ba90,0b5e65,0b8a8f,0eaf9b,30e1b9,8ff8e2,323353,484a77,4d65b4,4d9be6,8fd3ff,45293f,6b3e75,905ea9,a884f3,eaaded,753c54,a24b6f,cf657f,ed8099,831c5d,c32454,f04f78,f68181,fca790,fdcbb0".split(
","
),
},
"AAP-64": {
colors: "060608,141013,3b1725,73172d,b4202a,df3e23,fa6a0a,f9a31b,ffd541,fffc40,d6f264,9cdb43,59c135,14a02e,1a7a3e,24523b,122020,143464,285cc4,249fde,20d6c7,a6fcdb,ffffff,fef3c0,fad6b8,f5a097,e86a73,bc4a9b,793a80,403353,242234,221c1a,322b28,71413b,bb7547,dba463,f4d29c,dae0ea,b3b9d1,8b93af,6d758d,4a5462,333941,422433,5b3138,8e5252,ba756a,e9b5a3,e3e6ff,b9bffb,849be4,588dbe,477d85,23674e,328464,5daf8d,92dcba,cdf7e2,e4d2aa,c7b08b,a08662,796755,5a4e44,423934".split(
","
),
},
"Zughy 32": {
colors: "472d3c,5e3643,7a444a,a05b53,bf7958,eea160,f4cca1,b6d53c,71aa34,397b44,3c5956,302c2e,5a5353,7d7071,a0938e,cfc6b8,dff6f5,8aebf1,28ccdf,3978a8,394778,39314b,564064,8e478c,cd6093,ffaeb6,f4b41b,f47e1b,e6482e,a93b3b,827094,4f546b".split(
","
),
},
Journey: {
colors: "050914,110524,3b063a,691749,9c3247,d46453,f5a15d,ffcf8e,ff7a7d,ff417d,d61a88,94007a,42004e,220029,100726,25082c,3d1132,73263d,bd4035,ed7b39,ffb84a,fff540,c6d831,77b02a,429058,2c645e,153c4a,052137,0e0421,0c0b42,032769,144491,488bd4,78d7ff,b0fff1,faffff,c7d4e1,928fb8,5b537d,392946,24142c,0e0f2c,132243,1a466b,10908e,28c074,3dff6e,f8ffb8,f0c297,cf968c,8f5765,52294b,0f022e,35003b,64004c,9b0e3e,d41e3c,ed4c40,ff9757,d4662f,9c341a,691b22,450c28,2d002e".split(
","
),
},
Vinik24: {
colors: "000000,6f6776,9a9a97,c5ccb8,8b5580,c38890,a593a5,666092,9a4f50,c28d75,7ca1c0,416aa3,8d6268,be955c,68aca9,387080,6e6962,93a167,6eaa78,557064,9d9f7f,7e9e99,5d6872,433455".split(
","
),
},
"Sweetie 16": {
colors: "1a1c2c,5d275d,b13e53,ef7d57,ffcd75,a7f070,38b764,257179,29366f,3b5dc9,41a6f6,73eff7,f4f4f4,94b0c2,566c86,333c57".split(
","
),
},
Lospec500: {
colors: "10121c,2c1e31,6b2643,ac2847,ec273f,94493a,de5d3a,e98537,f3a833,4d3533,6e4c30,a26d3f,ce9248,dab163,e8d282,f7f3b7,1e4044,006554,26854c,5ab552,9de64e,008b8b,62a477,a6cb96,d3eed3,3e3b65,3859b3,3388de,36c5f4,6dead6,5e5b8c,8c78a5,b0a7b8,deceed,9a4d76,c878af,cc99ff,fa6e79,ffa2ac,ffd1d5,f6e8e0,ffffff".split(
","
),
},
};
palettes["Commodore 64"] = {"name":"Commodore 64","author":"","colors":["000000","626262","898989","adadad","ffffff","9f4e44","cb7e75","6d5412","a1683c","c9d487","9ae29b","5cab5e","6abfc6","887ecb","50459b","a057a3"]};
palettes["PICO-8"] = {"name":"PICO-8","author":"","colors":["000000","1D2B53","7E2553","008751","AB5236","5F574F","C2C3C7","FFF1E8","FF004D","FFA300","FFEC27","00E436","29ADFF","83769C","FF77A8","FFCCAA"]};
palettes["Gameboy Color"] = {"name":"Nintendo Gameboy (Black Zero)","author":"","colors":["2e463d","385d49","577b46","7e8416"]};
//populate palettes list in new pixel menu
(() => {
const palettesMenu = document.getElementById('palette-menu');
@ -9,43 +65,50 @@
const loadPaletteButton = document.getElementById('load-palette-button');
const loadPaletteButtonSplash = document.getElementById('load-palette-button-splash');
Object.keys(palettes).forEach((paletteName,) => {
splashPalettes.refresh = function () {
splashPalettes.innerHTML = '';
palettesMenu.innerHTML = '';
const button = document.createElement('button');
button.appendChild(document.createTextNode(paletteName));
Object.keys(palettes).forEach((paletteName,) => {
//if the palette was specified by the user, change the dropdown to it
if (palettes[paletteName].specified) {
Util.setText('palette-button', paletteName);
Util.setText('palette-button-splash', paletteName)
//Show empty palette option
noPaletteButton.style.display = 'block';
}
const button = document.createElement('button');
button.appendChild(document.createTextNode(paletteName));
const buttonEvent = () => {
//hide the dropdown menu
Util.deselect('palette-menu');
Util.deselect('palette-button');
Util.deselect('palette-menu-splash');
Util.deselect('palette-button-splash');
//if the palette was specified by the user, change the dropdown to it
if (palettes[paletteName].specified) {
Util.setText('palette-button', paletteName);
Util.setText('palette-button-splash', paletteName)
//Show empty palette option
noPaletteButton.style.display = 'block';
}
//show empty palette option
noPaletteButton.style.display = 'block';
const buttonEvent = () => {
//hide the dropdown menu
Util.deselect('palette-menu');
Util.deselect('palette-button');
Util.deselect('palette-menu-splash');
Util.deselect('palette-button-splash');
//set the text of the dropdown to the newly selected preset
Util.setText('palette-button', paletteName);
Util.setText('palette-button-splash', paletteName);
}
//show empty palette option
noPaletteButton.style.display = 'block';
// Making a copy for the splash page too
const copyButton = button.cloneNode(true);
copyButton.addEventListener('click', buttonEvent);
button.addEventListener('click', buttonEvent);
//set the text of the dropdown to the newly selected preset
Util.setText('palette-button', paletteName);
Util.setText('palette-button-splash', paletteName);
}
// Appending it to the splash palette menu
splashPalettes.appendChild(copyButton);
palettesMenu.appendChild(button);
});
// Making a copy for the splash page too
const copyButton = button.cloneNode(true);
copyButton.addEventListener('click', buttonEvent);
button.addEventListener('click', buttonEvent);
// Appending it to the splash palette menu
splashPalettes.appendChild(copyButton);
palettesMenu.appendChild(button);
});
}
splashPalettes.refresh();
const loadPaletteButtonEvent = () => {

2
js/_splashPage.js
View File

@ -18,6 +18,6 @@ let coverImage = document.getElementById('editor-logo');
let authorLink = coverImage.getElementsByTagName('a')[0];
let chosenImage = images[Math.round(Math.random() * (images.length - 1))];
coverImage.style.backgroundImage = 'url("/pixel-editor/' + chosenImage.path + '.png")';
coverImage.style.backgroundImage = 'url("' + chosenImage.path + '.png")';
authorLink.setAttribute('href', chosenImage.link);
authorLink.innerHTML = 'Art by ' + chosenImage.author;

2
js/_variables.js
View File

@ -3,7 +3,7 @@ var canvasSize;
var zoom = 7;
var dragging = false;
var lastMouseClickPos = [0,0];
var dialogueOpen = false;
var dialogueOpen = true;
var documentCreated = false;
var pixelEditorMode = "Advanced";

15
js/checkCompatibilityPixelEditor.js Normal file
View File

@ -0,0 +1,15 @@
function closeCompatibilityWarning() {
document.getElementById("compatibility-warning").style.visibility = "hidden";
}
//check browser/version
if (
(bowser.firefox && bowser.version >= 28) ||
(bowser.chrome && bowser.version >= 29) ||
(!bowser.mobile && !bowser.tablet)
)
console.log("compatibility check passed");
//show warning
else document.getElementById("compatibility-warning").style.visibility = "visible";

172
js/lib/cookies.js Normal file
View File

@ -0,0 +1,172 @@
/*
* Cookies.js - 1.2.3
* https://github.com/ScottHamper/Cookies
*
* This is free and unencumbered software released into the public domain.
*/
(function (global, undefined) {
'use strict';
var factory = function (window) {
if (typeof window.document !== 'object') {
throw new Error('Cookies.js requires a `window` with a `document` object');
}
var Cookies = function (key, value, options) {
return arguments.length === 1 ?
Cookies.get(key) : Cookies.set(key, value, options);
};
// Allows for setter injection in unit tests
Cookies._document = window.document;
// Used to ensure cookie keys do not collide with
// built-in `Object` properties
Cookies._cacheKeyPrefix = 'cookey.'; // Hurr hurr, :)
Cookies._maxExpireDate = new Date('Fri, 31 Dec 9999 23:59:59 UTC');
Cookies.defaults = {
path: '/',
secure: false
};
Cookies.get = function (key) {
if (Cookies._cachedDocumentCookie !== Cookies._document.cookie) {
Cookies._renewCache();
}
var value = Cookies._cache[Cookies._cacheKeyPrefix + key];
return value === undefined ? undefined : decodeURIComponent(value);
};
Cookies.set = function (key, value, options) {
options = Cookies._getExtendedOptions(options);
options.expires = Cookies._getExpiresDate(value === undefined ? -1 : options.expires);
Cookies._document.cookie = Cookies._generateCookieString(key, value, options);
return Cookies;
};
Cookies.expire = function (key, options) {
return Cookies.set(key, undefined, options);
};
Cookies._getExtendedOptions = function (options) {
return {
path: options && options.path || Cookies.defaults.path,
domain: options && options.domain || Cookies.defaults.domain,
expires: options && options.expires || Cookies.defaults.expires,
secure: options && options.secure !== undefined ? options.secure : Cookies.defaults.secure
};
};
Cookies._isValidDate = function (date) {
return Object.prototype.toString.call(date) === '[object Date]' && !isNaN(date.getTime());
};
Cookies._getExpiresDate = function (expires, now) {
now = now || new Date();
if (typeof expires === 'number') {
expires = expires === Infinity ?
Cookies._maxExpireDate : new Date(now.getTime() + expires * 1000);
} else if (typeof expires === 'string') {
expires = new Date(expires);
}
if (expires && !Cookies._isValidDate(expires)) {
throw new Error('`expires` parameter cannot be converted to a valid Date instance');
}
return expires;
};
Cookies._generateCookieString = function (key, value, options) {
key = key.replace(/[^#$&+\^`|]/g, encodeURIComponent);
key = key.replace(/\(/g, '%28').replace(/\)/g, '%29');
value = (value + '').replace(/[^!#$&-+\--:<-\[\]-~]/g, encodeURIComponent);
options = options || {};
var cookieString = key + '=' + value;
cookieString += options.path ? ';path=' + options.path : '';
cookieString += options.domain ? ';domain=' + options.domain : '';
cookieString += options.expires ? ';expires=' + options.expires.toUTCString() : '';
cookieString += options.secure ? ';secure' : '';
return cookieString;
};
Cookies._getCacheFromString = function (documentCookie) {
var cookieCache = {};
var cookiesArray = documentCookie ? documentCookie.split('; ') : [];
for (var i = 0; i < cookiesArray.length; i++) {
var cookieKvp = Cookies._getKeyValuePairFromCookieString(cookiesArray[i]);
if (cookieCache[Cookies._cacheKeyPrefix + cookieKvp.key] === undefined) {
cookieCache[Cookies._cacheKeyPrefix + cookieKvp.key] = cookieKvp.value;
}
}
return cookieCache;
};
Cookies._getKeyValuePairFromCookieString = function (cookieString) {
// "=" is a valid character in a cookie value according to RFC6265, so cannot `split('=')`
var separatorIndex = cookieString.indexOf('=');
// IE omits the "=" when the cookie value is an empty string
separatorIndex = separatorIndex < 0 ? cookieString.length : separatorIndex;
var key = cookieString.substr(0, separatorIndex);
var decodedKey;
try {
decodedKey = decodeURIComponent(key);
} catch (e) {
if (console && typeof console.error === 'function') {
console.error('Could not decode cookie with key "' + key + '"', e);
}
}
return {
key: decodedKey,
value: cookieString.substr(separatorIndex + 1) // Defer decoding value until accessed
};
};
Cookies._renewCache = function () {
Cookies._cache = Cookies._getCacheFromString(Cookies._document.cookie);
Cookies._cachedDocumentCookie = Cookies._document.cookie;
};
Cookies._areEnabled = function () {
var testKey = 'cookies.js';
var areEnabled = Cookies.set(testKey, 1).get(testKey) === '1';
Cookies.expire(testKey);
return areEnabled;
};
Cookies.enabled = Cookies._areEnabled();
return Cookies;
};
var cookiesExport = (global && typeof global.document === 'object') ? factory(global) : factory;
// AMD support
if (typeof define === 'function' && define.amd) {
define(function () { return cookiesExport; });
// CommonJS/Node.js support
} else if (typeof exports === 'object') {
// Support Node.js specific `module.exports` (which can be a function)
if (typeof module === 'object' && typeof module.exports === 'object') {
exports = module.exports = cookiesExport;
}
// But always support CommonJS module 1.1.1 spec (`exports` cannot be a function)
exports.Cookies = cookiesExport;
} else {
global.Cookies = cookiesExport;
}
})(typeof window === 'undefined' ? this : window);

0
js/sortable.js → js/lib/sortable.js
View File

29
js/pixel-editor.js
View File

@ -1,18 +1,18 @@
/**utilities**/
//=include utilities/on.js
//=include utilities/onChildren.js
//=include utilities/onClick.js
//=include utilities/onClickChildren.js
//=include utilities/select.js
//=include utilities/getSetText.js
//=include utilities/getSetValue.js
//=include utilities/hexToRgb.js
//=include utilities/rgbToHex.js
//=include utilities/rgbToHsl.js
//=include utilities/hslToRgb.js
//=include libraries/cookies.js
//=include util/on.js
//=include util/onChildren.js
//=include util/onClick.js
//=include util/onClickChildren.js
//=include util/select.js
//=include util/getSetText.js
//=include util/getSetValue.js
//=include util/hexToRgb.js
//=include util/rgbToHex.js
//=include util/rgbToHsl.js
//=include util/hslToRgb.js
//=include lib/cookies.js
//=include _pixelEditorUtility.js
//=include sortable.js
//=include lib/sortable.js
//=include _algorithms.js
//=include Util.js
@ -36,7 +36,7 @@
//=include _colorChanged.js
//=include _initColor.js
//=include _dialogue.js
//=include _featuresLog.js
//!=include _featuresLog.js
//=include _drawLine.js
//=include _getCursorPosition.js
//=include _fill.js
@ -53,7 +53,6 @@
//=include _colorPicker.js
//=include _paletteBlock.js
//=include _splashPage.js
//=include _logs.js
/**load file**/
//=include _loadImage.js

79
js/util/ajax.js Normal file
View File

@ -0,0 +1,79 @@
//GET: ajax(String url, Function success [,timeout])
//POST: ajax(String url, Object postData, Function success [,timeout])
Util.ajax = function (url, arg2, arg3, arg4) {
if (typeof arg2 == 'function') {
var success = arg2;
var timeout = arg3 || 10000;
}
else {
var postData = arg2;
var success = arg3;
var timeout = arg4 || 10000;
}
var start = new Date();
console.log('AJAX - STARTING REQUEST', url, '(' + timeout + ')');
//start new request
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
var result;
//try to parse as json
try {
result = JSON.parse(this.response);
console.log('AJAX - COMPLETE ('+(new Date()-start)+'ms) - json:', result);
}
catch (e) {
result = this.response;
console.log('AJAX - COMPLETE ('+(new Date()-start)+'ms) - string:', this.response, e);
}
//return result
success(result);
xhr = null;
}
else if (this.readyState == 4) {
console.log('ajax failed', this.readyState, this.status);
success({ error: 'failure' });
}
};
xhr.ontimeout = function(e) {
console.log('ajax request timed out')
success({ error: 'timeout' });
};
if (postData) {
//post request
console.log('post data: ', postData instanceof FormData, postData);
//the the input isn't already formdata, convert it to form data
if (!(postData instanceof FormData)) {
console.log('converting to form data');
var formData = new FormData();
for (var key in postData) {
formData.append(key, postData[key]);
}
postData = formData;
}
//send to server
xhr.open("POST", url, true);
xhr.timeout = timeout;
xhr.send(postData);
}
else {
//get request
xhr.open("GET", url, true);
xhr.timeout = timeout;
xhr.send();
}
return xhr;
}

10
js/util/getSetText.js Normal file
View File

@ -0,0 +1,10 @@
//get text of specified element
function getText(elementId) {
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
return element.textContent;
}
function setText(elementId, text) {
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
element.textContent = text;
}

12
js/util/getSetValue.js Normal file
View File

@ -0,0 +1,12 @@
function getValue(elementId) {
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
console.log("setting: " + elementId + ": " + element.value);
return element.value;
}
function setValue(elementId, value) {
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
element.value = value;
}

21
js/util/hexToRgb.js Normal file
View File

@ -0,0 +1,21 @@
//put in a hex color code (f464b2 or #f464b2) string
//and get an rgb color object {r:0,g:0,b:0}
//divisor is an optional argument, which makes it so you can get values other than 0-255
function hexToRgb(hex, divisor) {
//if divisor isn't set, set it to one (so it has no effect)
divisor = divisor || 1;
//split given hex code into array of 3 values
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex.trim());
//console.log('hex: '+hex)
//console.log([parseInt(result[1], 16)/divisor, parseInt(result[2], 16)/divisor, parseInt(result[3], 16)/divisor])
//console.log(result)
return result ? {
r: parseInt(result[1], 16)/divisor,
g: parseInt(result[2], 16)/divisor,
b: parseInt(result[3], 16)/divisor
} : null;
}

32
js/util/hslToRgb.js Normal file
View File

@ -0,0 +1,32 @@
function hslToRgb(h, s, l){
h /= 255;
s /= 255;
l /= 255;
var r, g, b;
if(s == 0){
r = g = b = l; // achromatic
}else{
var hue2rgb = function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return {
r:Math.round(r * 255),
g:Math.round(g * 255),
b:Math.round(b * 255)
};
}

22
js/util/on.js Normal file
View File

@ -0,0 +1,22 @@
//add event listener for any element which calls a function
//element can be provided as a direct reference or with just a string of the name
function on(event, elementId, functionCallback) {
//if element provided is string, get the actual element
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
//console.log('added '+event+' event listener on '+element)
element.addEventListener(event,
function (e) {
// e = event
//this = element clicked
functionCallback(e, this);
//if you need to access the event or this variable, you need to add them
//when you define the callback, but you cant use the word this, eg:
//on('click', menuButton, function (e, button) {});
});
}

14
js/util/onChildren.js Normal file
View File

@ -0,0 +1,14 @@
//add event listener to each of specified element's children
function onChildren(event, parentElement, functionCallback) {
console.log('onChildren()');
var parentElement = (typeof parentElement == 'string' ? document.getElementById(parentElement) : parentElement);
var children = parentElement.children;
//loop through children and add onClick listener
for (var i = 0; i < children.length; i++) {
on(event, children[i],functionCallback);
}
}

9
js/util/onClick.js Normal file
View File

@ -0,0 +1,9 @@
//DEPRECATED - USE on('click')
//add click event listener for any element which calls a function
//element can be provided as a direct reference or with just a string of the name
function onClick(elementId, functionCallback) {
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
element.addEventListener('click',functionCallback);
}

13
js/util/onClickChildren.js Normal file
View File

@ -0,0 +1,13 @@
//add click listener to each of specified element's children
function onClickChildren(parentElement, functionCallback) {
var parentElement = (typeof parentElement == 'string' ? document.getElementById(parentElement) : parentElement);
var children = parentElement.children;
//loop through children and add onClick listener
for (var i = 0; i < children.length; i++) {
onClick(children[i],functionCallback);
}
}

23
js/util/rgbToHex.js Normal file
View File

@ -0,0 +1,23 @@
//convert rgb values to a hex string for html
function rgbToHex (argument0,g,b) {
var r;
//if the first argument is an object
if (typeof argument0 === 'object'){
r = argument0.r;
g = argument0.g;
b = argument0.b;
}
else
r = argument0;
//console.log('converting rgb('+r+','+g+','+b+') to hex');
//convert a decimal number to 2-digit hex
function componentToHex (c) {
var hex = c.toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
return componentToHex(r) + componentToHex(g) + componentToHex(b);
}

36
js/util/rgbToHsl.js Normal file
View File

@ -0,0 +1,36 @@
//put in red green blue values and get out hue saturation luminosity values
function rgbToHsl(argument0, g, b){
var r;
//if the first argument is an object
if (typeof argument0 === 'object'){
r = argument0.r;
g = argument0.g;
b = argument0.b;
}
else
r = argument0;
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var hue, saturation, luminosity = (max + min) / 2;
if(max == min){
hue = saturation = 0; // achromatic
}else{
var d = max - min;
saturation = luminosity > 0.5 ? d / (2 - max - min) : d / (max + min);
switch(max){
case r: hue = (g - b) / d + (g < b ? 6 : 0); break;
case g: hue = (b - r) / d + 2; break;
case b: hue = (r - g) / d + 4; break;
}
hue /= 6;
}
return {h:hue, s:saturation, l:luminosity};
}

20
js/util/select.js Normal file
View File

@ -0,0 +1,20 @@
//add class .selected to specified element
function select(elementId) {
//console.log(arguments.callee.caller.name, 'selected ', elementId);
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
element.classList.add('selected');
}
//remove .selected class from specified element
function deselect(elementId) {
//console.log('deselected ', elementId);
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
element.classList.remove('selected');
}
//toggle the status of the .selected class on the specified element
function toggle(elementId) {
//console.log('toggled ', elementId);
var element = (typeof elementId == 'string' ? document.getElementById(elementId) : elementId);
element.classList.toggle('selected');
}