diff --git a/assets/css/editor.css b/assets/css/editor.css index 13f5863..d5cf8ea 100644 --- a/assets/css/editor.css +++ b/assets/css/editor.css @@ -1,6 +1,6 @@ /* ICEcoder default theme by Matt Pass */ -.cm-s-icecoder {color: #666; background: #1d1d1b} +.cm-s-icecoder {color: #888; background: #1d1d1b} .cm-s-icecoder span.cm-keyword {color: #eee; font-weight: bold} /* off-white 1 */ .cm-s-icecoder span.cm-atom {color: #e1c76e} /* yellow */ @@ -13,12 +13,12 @@ .cm-s-icecoder span.cm-property {color: #eee} /* off-white 1 */ .cm-s-icecoder span.cm-operator {color: #9179bb} /* purple */ -.cm-s-icecoder span.cm-comment {color: #97a3aa} /* grey-blue */ +.cm-s-icecoder span.cm-comment {color: #444; font-style: italic} /* grey-blue */ .cm-s-icecoder span.cm-string {color: #b9ca4a} /* green */ .cm-s-icecoder span.cm-string-2 {color: #6cb5d9} /* blue */ -.cm-s-icecoder span.cm-meta {color: #555} /* grey */ +.cm-s-icecoder span.cm-meta {color: #888} /* grey */ .cm-s-icecoder span.cm-qualifier {color: #555} /* grey */ .cm-s-icecoder span.cm-builtin {color: #214e7b} /* bright blue */ diff --git a/assets/js/difflib.js b/assets/js/difflib.js index ee40ba2..b733c99 100644 --- a/assets/js/difflib.js +++ b/assets/js/difflib.js @@ -7,14 +7,14 @@ All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: - * Redistributions of source code must retain the above copyright notice, this - list of conditions and the following disclaimer. - * Redistributions in binary form must reproduce the above copyright notice, - this list of conditions and the following disclaimer in the documentation - and/or other materials provided with the distribution. - * Neither the name of the Snowtide Informatics Systems nor the names of its - contributors may be used to endorse or promote products derived from this - software without specific prior written permission. + * Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + * Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + * Neither the name of the Snowtide Informatics Systems nor the names of its + contributors may be used to endorse or promote products derived from this + software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES @@ -31,382 +31,382 @@ DAMAGE. var __whitespace = {" ":true, "\t":true, "\n":true, "\f":true, "\r":true}; var difflib = { - defaultJunkFunction: function (c) { - return __whitespace.hasOwnProperty(c); - }, - - stripLinebreaks: function (str) { return str.replace(/^[\n\r]*|[\n\r]*$/g, ""); }, - - stringAsLines: function (str) { - var lfpos = str.indexOf("\n"); - var crpos = str.indexOf("\r"); - var linebreak = ((lfpos > -1 && crpos > -1) || crpos < 0) ? "\n" : "\r"; - - var lines = str.split(linebreak); - for (var i = 0; i < lines.length; i++) { - lines[i] = difflib.stripLinebreaks(lines[i]); - } - - return lines; - }, - - // iteration-based reduce implementation - __reduce: function (func, list, initial) { - if (initial != null) { - var value = initial; - var idx = 0; - } else if (list) { - var value = list[0]; - var idx = 1; - } else { - return null; - } - - for (; idx < list.length; idx++) { - value = func(value, list[idx]); - } - - return value; - }, - - // comparison function for sorting lists of numeric tuples - __ntuplecomp: function (a, b) { - var mlen = Math.max(a.length, b.length); - for (var i = 0; i < mlen; i++) { - if (a[i] < b[i]) return -1; - if (a[i] > b[i]) return 1; - } - - return a.length == b.length ? 0 : (a.length < b.length ? -1 : 1); - }, - - __calculate_ratio: function (matches, length) { - return length ? 2.0 * matches / length : 1.0; - }, - - // returns a function that returns true if a key passed to the returned function - // is in the dict (js object) provided to this function; replaces being able to - // carry around dict.has_key in python... - __isindict: function (dict) { - return function (key) { return dict.hasOwnProperty(key); }; - }, - - // replacement for python's dict.get function -- need easy default values - __dictget: function (dict, key, defaultValue) { - return dict.hasOwnProperty(key) ? dict[key] : defaultValue; - }, - - SequenceMatcher: function (a, b, isjunk) { - this.set_seqs = function (a, b) { - this.set_seq1(a); - this.set_seq2(b); - } - - this.set_seq1 = function (a) { - if (a == this.a) return; - this.a = a; - this.matching_blocks = this.opcodes = null; - } - - this.set_seq2 = function (b) { - if (b == this.b) return; - this.b = b; - this.matching_blocks = this.opcodes = this.fullbcount = null; - this.__chain_b(); - } - - this.__chain_b = function () { - var b = this.b; - var n = b.length; - var b2j = this.b2j = {}; - var populardict = {}; - for (var i = 0; i < b.length; i++) { - var elt = b[i]; - if (b2j.hasOwnProperty(elt)) { - var indices = b2j[elt]; - if (n >= 200 && indices.length * 100 > n) { - populardict[elt] = 1; - delete b2j[elt]; - } else { - indices.push(i); - } - } else { - b2j[elt] = [i]; - } - } - - for (var elt in populardict) { - if (populardict.hasOwnProperty(elt)) { - delete b2j[elt]; - } - } - - var isjunk = this.isjunk; - var junkdict = {}; - if (isjunk) { - for (var elt in populardict) { - if (populardict.hasOwnProperty(elt) && isjunk(elt)) { - junkdict[elt] = 1; - delete populardict[elt]; - } - } - for (var elt in b2j) { - if (b2j.hasOwnProperty(elt) && isjunk(elt)) { - junkdict[elt] = 1; - delete b2j[elt]; - } - } - } - - this.isbjunk = difflib.__isindict(junkdict); - this.isbpopular = difflib.__isindict(populardict); - } - - this.find_longest_match = function (alo, ahi, blo, bhi) { - var a = this.a; - var b = this.b; - var b2j = this.b2j; - var isbjunk = this.isbjunk; - var besti = alo; - var bestj = blo; - var bestsize = 0; - var j = null; - var k; - - var j2len = {}; - var nothing = []; - for (var i = alo; i < ahi; i++) { - var newj2len = {}; - var jdict = difflib.__dictget(b2j, a[i], nothing); - for (var jkey in jdict) { - if (jdict.hasOwnProperty(jkey)) { - j = jdict[jkey]; - if (j < blo) continue; - if (j >= bhi) break; - newj2len[j] = k = difflib.__dictget(j2len, j - 1, 0) + 1; - if (k > bestsize) { - besti = i - k + 1; - bestj = j - k + 1; - bestsize = k; - } - } - } - j2len = newj2len; - } - - while (besti > alo && bestj > blo && !isbjunk(b[bestj - 1]) && a[besti - 1] == b[bestj - 1]) { - besti--; - bestj--; - bestsize++; - } - - while (besti + bestsize < ahi && bestj + bestsize < bhi && - !isbjunk(b[bestj + bestsize]) && - a[besti + bestsize] == b[bestj + bestsize]) { - bestsize++; - } - - while (besti > alo && bestj > blo && isbjunk(b[bestj - 1]) && a[besti - 1] == b[bestj - 1]) { - besti--; - bestj--; - bestsize++; - } - - while (besti + bestsize < ahi && bestj + bestsize < bhi && isbjunk(b[bestj + bestsize]) && - a[besti + bestsize] == b[bestj + bestsize]) { - bestsize++; - } - - return [besti, bestj, bestsize]; - } - - this.get_matching_blocks = function () { - if (this.matching_blocks != null) return this.matching_blocks; - var la = this.a.length; - var lb = this.b.length; - - var queue = [[0, la, 0, lb]]; - var matching_blocks = []; - var alo, ahi, blo, bhi, qi, i, j, k, x; - while (queue.length) { - qi = queue.pop(); - alo = qi[0]; - ahi = qi[1]; - blo = qi[2]; - bhi = qi[3]; - x = this.find_longest_match(alo, ahi, blo, bhi); - i = x[0]; - j = x[1]; - k = x[2]; - - if (k) { - matching_blocks.push(x); - if (alo < i && blo < j) - queue.push([alo, i, blo, j]); - if (i+k < ahi && j+k < bhi) - queue.push([i + k, ahi, j + k, bhi]); - } - } - - matching_blocks.sort(difflib.__ntuplecomp); - - var i1 = 0, j1 = 0, k1 = 0, block = 0; - var i2, j2, k2; - var non_adjacent = []; - for (var idx in matching_blocks) { - if (matching_blocks.hasOwnProperty(idx)) { - block = matching_blocks[idx]; - i2 = block[0]; - j2 = block[1]; - k2 = block[2]; - if (i1 + k1 == i2 && j1 + k1 == j2) { - k1 += k2; - } else { - if (k1) non_adjacent.push([i1, j1, k1]); - i1 = i2; - j1 = j2; - k1 = k2; - } - } - } - - if (k1) non_adjacent.push([i1, j1, k1]); - - non_adjacent.push([la, lb, 0]); - this.matching_blocks = non_adjacent; - return this.matching_blocks; - } - - this.get_opcodes = function () { - if (this.opcodes != null) return this.opcodes; - var i = 0; - var j = 0; - var answer = []; - this.opcodes = answer; - var block, ai, bj, size, tag; - var blocks = this.get_matching_blocks(); - for (var idx in blocks) { - if (blocks.hasOwnProperty(idx)) { - block = blocks[idx]; - ai = block[0]; - bj = block[1]; - size = block[2]; - tag = ''; - if (i < ai && j < bj) { - tag = 'replace'; - } else if (i < ai) { - tag = 'delete'; - } else if (j < bj) { - tag = 'insert'; - } - if (tag) answer.push([tag, i, ai, j, bj]); - i = ai + size; - j = bj + size; - - if (size) answer.push(['equal', ai, i, bj, j]); - } - } - - return answer; - } - - // this is a generator function in the python lib, which of course is not supported in javascript - // the reimplementation builds up the grouped opcodes into a list in their entirety and returns that. - this.get_grouped_opcodes = function (n) { - if (!n) n = 3; - var codes = this.get_opcodes(); - if (!codes) codes = [["equal", 0, 1, 0, 1]]; - var code, tag, i1, i2, j1, j2; - if (codes[0][0] == 'equal') { - code = codes[0]; - tag = code[0]; - i1 = code[1]; - i2 = code[2]; - j1 = code[3]; - j2 = code[4]; - codes[0] = [tag, Math.max(i1, i2 - n), i2, Math.max(j1, j2 - n), j2]; - } - if (codes[codes.length - 1][0] == 'equal') { - code = codes[codes.length - 1]; - tag = code[0]; - i1 = code[1]; - i2 = code[2]; - j1 = code[3]; - j2 = code[4]; - codes[codes.length - 1] = [tag, i1, Math.min(i2, i1 + n), j1, Math.min(j2, j1 + n)]; - } - - var nn = n + n; - var group = []; - var groups = []; - for (var idx in codes) { - if (codes.hasOwnProperty(idx)) { - code = codes[idx]; - tag = code[0]; - i1 = code[1]; - i2 = code[2]; - j1 = code[3]; - j2 = code[4]; - if (tag == 'equal' && i2 - i1 > nn) { - group.push([tag, i1, Math.min(i2, i1 + n), j1, Math.min(j2, j1 + n)]); - groups.push(group); - group = []; - i1 = Math.max(i1, i2-n); - j1 = Math.max(j1, j2-n); - } - - group.push([tag, i1, i2, j1, j2]); - } - } - - if (group && !(group.length == 1 && group[0][0] == 'equal')) groups.push(group) - - return groups; - } - - this.ratio = function () { - matches = difflib.__reduce( - function (sum, triple) { return sum + triple[triple.length - 1]; }, - this.get_matching_blocks(), 0); - return difflib.__calculate_ratio(matches, this.a.length + this.b.length); - } - - this.quick_ratio = function () { - var fullbcount, elt; - if (this.fullbcount == null) { - this.fullbcount = fullbcount = {}; - for (var i = 0; i < this.b.length; i++) { - elt = this.b[i]; - fullbcount[elt] = difflib.__dictget(fullbcount, elt, 0) + 1; - } - } - fullbcount = this.fullbcount; - - var avail = {}; - var availhas = difflib.__isindict(avail); - var matches = numb = 0; - for (var i = 0; i < this.a.length; i++) { - elt = this.a[i]; - if (availhas(elt)) { - numb = avail[elt]; - } else { - numb = difflib.__dictget(fullbcount, elt, 0); - } - avail[elt] = numb - 1; - if (numb > 0) matches++; - } - - return difflib.__calculate_ratio(matches, this.a.length + this.b.length); - } - - this.real_quick_ratio = function () { - var la = this.a.length; - var lb = this.b.length; - return _calculate_ratio(Math.min(la, lb), la + lb); - } - - this.isjunk = isjunk ? isjunk : difflib.defaultJunkFunction; - this.a = this.b = null; - this.set_seqs(a, b); - } + defaultJunkFunction: function (c) { + return __whitespace.hasOwnProperty(c); + }, + + stripLinebreaks: function (str) { return str.replace(/^[\n\r]*|[\n\r]*$/g, ""); }, + + stringAsLines: function (str) { + var lfpos = str.indexOf("\n"); + var crpos = str.indexOf("\r"); + var linebreak = ((lfpos > -1 && crpos > -1) || crpos < 0) ? "\n" : "\r"; + + var lines = str.split(linebreak); + for (var i = 0; i < lines.length; i++) { + lines[i] = difflib.stripLinebreaks(lines[i]); + } + + return lines; + }, + + // iteration-based reduce implementation + __reduce: function (func, list, initial) { + if (initial != null) { + var value = initial; + var idx = 0; + } else if (list) { + var value = list[0]; + var idx = 1; + } else { + return null; + } + + for (; idx < list.length; idx++) { + value = func(value, list[idx]); + } + + return value; + }, + + // comparison function for sorting lists of numeric tuples + __ntuplecomp: function (a, b) { + var mlen = Math.max(a.length, b.length); + for (var i = 0; i < mlen; i++) { + if (a[i] < b[i]) return -1; + if (a[i] > b[i]) return 1; + } + + return a.length == b.length ? 0 : (a.length < b.length ? -1 : 1); + }, + + __calculate_ratio: function (matches, length) { + return length ? 2.0 * matches / length : 1.0; + }, + + // returns a function that returns true if a key passed to the returned function + // is in the dict (js object) provided to this function; replaces being able to + // carry around dict.has_key in python... + __isindict: function (dict) { + return function (key) { return dict.hasOwnProperty(key); }; + }, + + // replacement for python's dict.get function -- need easy default values + __dictget: function (dict, key, defaultValue) { + return dict.hasOwnProperty(key) ? dict[key] : defaultValue; + }, + + SequenceMatcher: function (a, b, isjunk) { + this.set_seqs = function (a, b) { + this.set_seq1(a); + this.set_seq2(b); + } + + this.set_seq1 = function (a) { + if (a == this.a) return; + this.a = a; + this.matching_blocks = this.opcodes = null; + } + + this.set_seq2 = function (b) { + if (b == this.b) return; + this.b = b; + this.matching_blocks = this.opcodes = this.fullbcount = null; + this.__chain_b(); + } + + this.__chain_b = function () { + var b = this.b; + var n = b.length; + var b2j = this.b2j = {}; + var populardict = {}; + for (var i = 0; i < b.length; i++) { + var elt = b[i]; + if (b2j.hasOwnProperty(elt)) { + var indices = b2j[elt]; + if (n >= 200 && indices.length * 100 > n) { + populardict[elt] = 1; + delete b2j[elt]; + } else { + indices.push(i); + } + } else { + b2j[elt] = [i]; + } + } + + for (var elt in populardict) { + if (populardict.hasOwnProperty(elt)) { + delete b2j[elt]; + } + } + + var isjunk = this.isjunk; + var junkdict = {}; + if (isjunk) { + for (var elt in populardict) { + if (populardict.hasOwnProperty(elt) && isjunk(elt)) { + junkdict[elt] = 1; + delete populardict[elt]; + } + } + for (var elt in b2j) { + if (b2j.hasOwnProperty(elt) && isjunk(elt)) { + junkdict[elt] = 1; + delete b2j[elt]; + } + } + } + + this.isbjunk = difflib.__isindict(junkdict); + this.isbpopular = difflib.__isindict(populardict); + } + + this.find_longest_match = function (alo, ahi, blo, bhi) { + var a = this.a; + var b = this.b; + var b2j = this.b2j; + var isbjunk = this.isbjunk; + var besti = alo; + var bestj = blo; + var bestsize = 0; + var j = null; + var k; + + var j2len = {}; + var nothing = []; + for (var i = alo; i < ahi; i++) { + var newj2len = {}; + var jdict = difflib.__dictget(b2j, a[i], nothing); + for (var jkey in jdict) { + if (jdict.hasOwnProperty(jkey)) { + j = jdict[jkey]; + if (j < blo) continue; + if (j >= bhi) break; + newj2len[j] = k = difflib.__dictget(j2len, j - 1, 0) + 1; + if (k > bestsize) { + besti = i - k + 1; + bestj = j - k + 1; + bestsize = k; + } + } + } + j2len = newj2len; + } + + while (besti > alo && bestj > blo && !isbjunk(b[bestj - 1]) && a[besti - 1] == b[bestj - 1]) { + besti--; + bestj--; + bestsize++; + } + + while (besti + bestsize < ahi && bestj + bestsize < bhi && + !isbjunk(b[bestj + bestsize]) && + a[besti + bestsize] == b[bestj + bestsize]) { + bestsize++; + } + + while (besti > alo && bestj > blo && isbjunk(b[bestj - 1]) && a[besti - 1] == b[bestj - 1]) { + besti--; + bestj--; + bestsize++; + } + + while (besti + bestsize < ahi && bestj + bestsize < bhi && isbjunk(b[bestj + bestsize]) && + a[besti + bestsize] == b[bestj + bestsize]) { + bestsize++; + } + + return [besti, bestj, bestsize]; + } + + this.get_matching_blocks = function () { + if (this.matching_blocks != null) return this.matching_blocks; + var la = this.a.length; + var lb = this.b.length; + + var queue = [[0, la, 0, lb]]; + var matching_blocks = []; + var alo, ahi, blo, bhi, qi, i, j, k, x; + while (queue.length) { + qi = queue.pop(); + alo = qi[0]; + ahi = qi[1]; + blo = qi[2]; + bhi = qi[3]; + x = this.find_longest_match(alo, ahi, blo, bhi); + i = x[0]; + j = x[1]; + k = x[2]; + + if (k) { + matching_blocks.push(x); + if (alo < i && blo < j) + queue.push([alo, i, blo, j]); + if (i+k < ahi && j+k < bhi) + queue.push([i + k, ahi, j + k, bhi]); + } + } + + matching_blocks.sort(difflib.__ntuplecomp); + + var i1 = 0, j1 = 0, k1 = 0, block = 0; + var i2, j2, k2; + var non_adjacent = []; + for (var idx in matching_blocks) { + if (matching_blocks.hasOwnProperty(idx)) { + block = matching_blocks[idx]; + i2 = block[0]; + j2 = block[1]; + k2 = block[2]; + if (i1 + k1 == i2 && j1 + k1 == j2) { + k1 += k2; + } else { + if (k1) non_adjacent.push([i1, j1, k1]); + i1 = i2; + j1 = j2; + k1 = k2; + } + } + } + + if (k1) non_adjacent.push([i1, j1, k1]); + + non_adjacent.push([la, lb, 0]); + this.matching_blocks = non_adjacent; + return this.matching_blocks; + } + + this.get_opcodes = function () { + if (this.opcodes != null) return this.opcodes; + var i = 0; + var j = 0; + var answer = []; + this.opcodes = answer; + var block, ai, bj, size, tag; + var blocks = this.get_matching_blocks(); + for (var idx in blocks) { + if (blocks.hasOwnProperty(idx)) { + block = blocks[idx]; + ai = block[0]; + bj = block[1]; + size = block[2]; + tag = ''; + if (i < ai && j < bj) { + tag = 'replace'; + } else if (i < ai) { + tag = 'delete'; + } else if (j < bj) { + tag = 'insert'; + } + if (tag) answer.push([tag, i, ai, j, bj]); + i = ai + size; + j = bj + size; + + if (size) answer.push(['equal', ai, i, bj, j]); + } + } + + return answer; + } + + // this is a generator function in the python lib, which of course is not supported in javascript + // the reimplementation builds up the grouped opcodes into a list in their entirety and returns that. + this.get_grouped_opcodes = function (n) { + if (!n) n = 3; + var codes = this.get_opcodes(); + if (!codes) codes = [["equal", 0, 1, 0, 1]]; + var code, tag, i1, i2, j1, j2; + if (codes[0][0] == 'equal') { + code = codes[0]; + tag = code[0]; + i1 = code[1]; + i2 = code[2]; + j1 = code[3]; + j2 = code[4]; + codes[0] = [tag, Math.max(i1, i2 - n), i2, Math.max(j1, j2 - n), j2]; + } + if (codes[codes.length - 1][0] == 'equal') { + code = codes[codes.length - 1]; + tag = code[0]; + i1 = code[1]; + i2 = code[2]; + j1 = code[3]; + j2 = code[4]; + codes[codes.length - 1] = [tag, i1, Math.min(i2, i1 + n), j1, Math.min(j2, j1 + n)]; + } + + var nn = n + n; + var group = []; + var groups = []; + for (var idx in codes) { + if (codes.hasOwnProperty(idx)) { + code = codes[idx]; + tag = code[0]; + i1 = code[1]; + i2 = code[2]; + j1 = code[3]; + j2 = code[4]; + if (tag == 'equal' && i2 - i1 > nn) { + group.push([tag, i1, Math.min(i2, i1 + n), j1, Math.min(j2, j1 + n)]); + groups.push(group); + group = []; + i1 = Math.max(i1, i2-n); + j1 = Math.max(j1, j2-n); + } + + group.push([tag, i1, i2, j1, j2]); + } + } + + if (group && !(group.length == 1 && group[0][0] == 'equal')) groups.push(group) + + return groups; + } + + this.ratio = function () { + matches = difflib.__reduce( + function (sum, triple) { return sum + triple[triple.length - 1]; }, + this.get_matching_blocks(), 0); + return difflib.__calculate_ratio(matches, this.a.length + this.b.length); + } + + this.quick_ratio = function () { + var fullbcount, elt; + if (this.fullbcount == null) { + this.fullbcount = fullbcount = {}; + for (var i = 0; i < this.b.length; i++) { + elt = this.b[i]; + fullbcount[elt] = difflib.__dictget(fullbcount, elt, 0) + 1; + } + } + fullbcount = this.fullbcount; + + var avail = {}; + var availhas = difflib.__isindict(avail); + var matches = numb = 0; + for (var i = 0; i < this.a.length; i++) { + elt = this.a[i]; + if (availhas(elt)) { + numb = avail[elt]; + } else { + numb = difflib.__dictget(fullbcount, elt, 0); + } + avail[elt] = numb - 1; + if (numb > 0) matches++; + } + + return difflib.__calculate_ratio(matches, this.a.length + this.b.length); + } + + this.real_quick_ratio = function () { + var la = this.a.length; + var lb = this.b.length; + return _calculate_ratio(Math.min(la, lb), la + lb); + } + + this.isjunk = isjunk ? isjunk : difflib.defaultJunkFunction; + this.a = this.b = null; + this.set_seqs(a, b); + } }; \ No newline at end of file diff --git a/assets/js/farbtastic.js b/assets/js/farbtastic.js index 9e1bb0d..93a2158 100644 --- a/assets/js/farbtastic.js +++ b/assets/js/farbtastic.js @@ -6,248 +6,248 @@ */ farbtasticFunc = function (options) { - farbtastic(this, options); - return this; + farbtastic(this, options); + return this; }; -farbtastic = function (container, callback) { - var container = document.getElementById(container); - var callback = document.getElementById(callback); - return container.farbtastic || (container.farbtastic = new _farbtastic(container, callback)); +farbtastic = function (cont, cb) { + var container = document.getElementById(cont); + var callback = document.getElementById(cb); + return container.farbtastic || (container.farbtastic = new _farbtastic(container, callback)); }; _farbtastic = function (container, callback) { - // Store farbtastic object - var fb = this; + // Store farbtastic object + var fb = this; - // Insert markup - container.innerHTML = '
'; - fb.wheel = document.getElementsByClassName('wheel')[0]; - // Dimensions - fb.radius = 84; - fb.square = 100; - fb.width = 194; + // Insert markup + container.innerHTML = '
'; + fb.wheel = document.getElementsByClassName('wheel')[0]; + // Dimensions + fb.radius = 84; + fb.square = 100; + fb.width = 194; - /** - * Link to the given element(s) or callback. - */ - fb.linkTo = function (callback) { - // Unbind previous nodes - if (typeof fb.callback == 'object') { - console.log("Doesn't do anything?"); - fb.callback.removeEventListener('keyup', fb.updateValue); - } - - // Reset color - fb.color = null; - - // Bind callback or elements - if (typeof callback == 'function') { - fb.callback = callback; - } - else if (typeof callback == 'object' || typeof callback == 'string') { - fb.callback = callback; - fb.callback.addEventListener('keyup',fb.updateValue); - if (fb.callback.value) { - fb.setColor(fb.callback.value); - } - } - return this; - }; - fb.updateValue = function (event) { - if (this.value && this.value != fb.color) { - fb.setColor(this.value); - } - }; - - /** - * Change color with HTML syntax #123456 - */ - fb.setColor = function (color) { - var unpack = fb.unpack(color); - if (fb.color != color && unpack) { - fb.color = color; - fb.rgb = unpack; - fb.hsl = fb.RGBToHSL(fb.rgb); - fb.updateDisplay(); - } - return this; - }; - - /** - * Change color with HSL triplet [0..1, 0..1, 0..1] - */ - fb.setHSL = function (hsl) { - fb.hsl = hsl; - fb.rgb = fb.HSLToRGB(hsl); - fb.color = fb.pack(fb.rgb); - fb.updateDisplay(); - return this; - }; - - ///////////////////////////////////////////////////// - - /** - * Retrieve the coordinates of the given event relative to the center - * of the widget. - */ - fb.widgetCoords = function (event) { - return { x: (event.pageX - fb.wheel.offsetParent.offsetLeft) - fb.width / 2, y: (event.pageY - fb.wheel.offsetParent.offsetTop) - fb.width / 2 }; - }; - - /** - * Mousedown handler - */ - fb.mousedown = function (event) { - // Capture mouse - if (!document.dragging) { - document.addEventListener('mousemove', fb.mousemove); - document.addEventListener('mouseup', fb.mouseup); - document.dragging = true; - } - - // Check which area is being dragged - var pos = fb.widgetCoords(event); - fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square; - - // Process - fb.mousemove(event); - return false; - }; - - /** - * Mousemove handler - */ - fb.mousemove = function (event) { - // Get coordinates relative to color picker center - var pos = fb.widgetCoords(event); - - // Set new HSL parameters - if (fb.circleDrag) { - var hue = Math.atan2(pos.x, -pos.y) / 6.28; - if (hue < 0) hue += 1; - fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]); - } - else { - var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5)); - var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5)); - fb.setHSL([fb.hsl[0], sat, lum]); - } - return false; - }; - - /** - * Mouseup handler - */ - fb.mouseup = function () { - // Uncapture mouse - document.removeEventListener('mousemove', fb.mousemove); - document.removeEventListener('mouseup', fb.mouseup); - document.dragging = false; - }; - - /** - * Update the markers and styles - */ - fb.updateDisplay = function () { - // Markers - var angle = fb.hsl[0] * 6.28; - document.getElementsByClassName('h-marker')[0].style.left = Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px'; - document.getElementsByClassName('h-marker')[0].style.top = Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'; - - document.getElementsByClassName('sl-marker')[0].style.left = Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px'; - document.getElementsByClassName('sl-marker')[0].style.top = Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'; - - // Saturation/Luminance gradient - document.getElementsByClassName('color')[0].style.backgroundColor = fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])); - - // Linked elements or callback - if (typeof fb.callback == 'object') { - // Set background/foreground color - document.getElementById(fb.callback.id).style.backgroundColor = document.getElementById(fb.callback.id + 'RGB').style.backgroundColor = fb.color; - document.getElementById(fb.callback.id).style.color = document.getElementById(fb.callback.id + 'RGB').style.color = fb.hsl[2] > 0.5 ? '#000' : '#fff'; - document.getElementById('colorRGB').value = document.getElementById(fb.callback.id).style.backgroundColor.replace(/\s/g,''); - - // Change linked value - if (callback.value && callback.value != fb.color) { - callback.value = fb.color; + /** + * Link to the given element(s) or callback. + */ + fb.linkTo = function (callback) { + // Unbind previous nodes + if (typeof fb.callback == 'object') { + console.log("Doesn't do anything?"); + fb.callback.removeEventListener('keyup', fb.updateValue); } - } - else if (typeof fb.callback == 'function') { - fb.callback.call(fb, fb.color); - } - }; - /* Various color utility functions */ - fb.pack = function (rgb) { - var r = Math.round(rgb[0] * 255); - var g = Math.round(rgb[1] * 255); - var b = Math.round(rgb[2] * 255); - return '#' + (r < 16 ? '0' : '') + r.toString(16) + - (g < 16 ? '0' : '') + g.toString(16) + - (b < 16 ? '0' : '') + b.toString(16); - }; + // Reset color + fb.color = null; - fb.unpack = function (color) { - if (color.length == 7) { - return [parseInt('0x' + color.substring(1, 3)) / 255, - parseInt('0x' + color.substring(3, 5)) / 255, - parseInt('0x' + color.substring(5, 7)) / 255]; - } - else if (color.length == 4) { - return [parseInt('0x' + color.substring(1, 2)) / 15, - parseInt('0x' + color.substring(2, 3)) / 15, - parseInt('0x' + color.substring(3, 4)) / 15]; - } - }; + // Bind callback or elements + if (typeof callback == 'function') { + fb.callback = callback; + } + else if (typeof callback == 'object' || typeof callback == 'string') { + fb.callback = callback; + fb.callback.addEventListener('keyup',fb.updateValue); + if (fb.callback.value) { + fb.setColor(fb.callback.value); + } + } + return this; + }; + fb.updateValue = function (event) { + if (this.value && this.value != fb.color) { + fb.setColor(this.value); + } + }; - fb.HSLToRGB = function (hsl) { - var m1, m2, r, g, b; - var h = hsl[0], s = hsl[1], l = hsl[2]; - m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s; - m1 = l * 2 - m2; - return [this.hueToRGB(m1, m2, h+0.33333), - this.hueToRGB(m1, m2, h), - this.hueToRGB(m1, m2, h-0.33333)]; - }; + /** + * Change color with HTML syntax #123456 + */ + fb.setColor = function (color) { + var unpack = fb.unpack(color); + if (fb.color != color && unpack) { + fb.color = color; + fb.rgb = unpack; + fb.hsl = fb.RGBToHSL(fb.rgb); + fb.updateDisplay(); + } + return this; + }; - fb.hueToRGB = function (m1, m2, h) { - h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); - if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; - if (h * 2 < 1) return m2; - if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; - return m1; - }; + /** + * Change color with HSL triplet [0..1, 0..1, 0..1] + */ + fb.setHSL = function (hsl) { + fb.hsl = hsl; + fb.rgb = fb.HSLToRGB(hsl); + fb.color = fb.pack(fb.rgb); + fb.updateDisplay(); + return this; + }; - fb.RGBToHSL = function (rgb) { - var min, max, delta, h, s, l; - var r = rgb[0], g = rgb[1], b = rgb[2]; - min = Math.min(r, Math.min(g, b)); - max = Math.max(r, Math.max(g, b)); - delta = max - min; - l = (min + max) / 2; - s = 0; - if (l > 0 && l < 1) { - s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); - } - h = 0; - if (delta > 0) { - if (max == r && max != g) h += (g - b) / delta; - if (max == g && max != b) h += (2 + (b - r) / delta); - if (max == b && max != r) h += (4 + (r - g) / delta); - h /= 6; - } - return [h, s, l]; - }; + ///////////////////////////////////////////////////// - // Install mousedown handler (the others are set on the document on-demand) - document.getElementsByClassName('farbtastic')[0].onmousedown = fb.mousedown; + /** + * Retrieve the coordinates of the given event relative to the center + * of the widget. + */ + fb.widgetCoords = function (event) { + return { x: (event.pageX - fb.wheel.offsetParent.offsetLeft) - fb.width / 2, y: (event.pageY - fb.wheel.offsetParent.offsetTop) - fb.width / 2 }; + }; + + /** + * Mousedown handler + */ + fb.mousedown = function (event) { + // Capture mouse + if (!document.dragging) { + document.addEventListener('mousemove', fb.mousemove); + document.addEventListener('mouseup', fb.mouseup); + document.dragging = true; + } + + // Check which area is being dragged + var pos = fb.widgetCoords(event); + fb.circleDrag = Math.max(Math.abs(pos.x), Math.abs(pos.y)) * 2 > fb.square; + + // Process + fb.mousemove(event); + return false; + }; + + /** + * Mousemove handler + */ + fb.mousemove = function (event) { + // Get coordinates relative to color picker center + var pos = fb.widgetCoords(event); + + // Set new HSL parameters + if (fb.circleDrag) { + var hue = Math.atan2(pos.x, -pos.y) / 6.28; + if (hue < 0) hue += 1; + fb.setHSL([hue, fb.hsl[1], fb.hsl[2]]); + } + else { + var sat = Math.max(0, Math.min(1, -(pos.x / fb.square) + .5)); + var lum = Math.max(0, Math.min(1, -(pos.y / fb.square) + .5)); + fb.setHSL([fb.hsl[0], sat, lum]); + } + return false; + }; + + /** + * Mouseup handler + */ + fb.mouseup = function () { + // Uncapture mouse + document.removeEventListener('mousemove', fb.mousemove); + document.removeEventListener('mouseup', fb.mouseup); + document.dragging = false; + }; + + /** + * Update the markers and styles + */ + fb.updateDisplay = function () { + // Markers + var angle = fb.hsl[0] * 6.28; + document.getElementsByClassName('h-marker')[0].style.left = Math.round(Math.sin(angle) * fb.radius + fb.width / 2) + 'px'; + document.getElementsByClassName('h-marker')[0].style.top = Math.round(-Math.cos(angle) * fb.radius + fb.width / 2) + 'px'; + + document.getElementsByClassName('sl-marker')[0].style.left = Math.round(fb.square * (.5 - fb.hsl[1]) + fb.width / 2) + 'px'; + document.getElementsByClassName('sl-marker')[0].style.top = Math.round(fb.square * (.5 - fb.hsl[2]) + fb.width / 2) + 'px'; + + // Saturation/Luminance gradient + document.getElementsByClassName('color')[0].style.backgroundColor = fb.pack(fb.HSLToRGB([fb.hsl[0], 1, 0.5])); + + // Linked elements or callback + if (typeof fb.callback == 'object') { + // Set background/foreground color + document.getElementById(fb.callback.id).style.backgroundColor = document.getElementById(fb.callback.id + 'RGB').style.backgroundColor = fb.color; + document.getElementById(fb.callback.id).style.color = document.getElementById(fb.callback.id + 'RGB').style.color = fb.hsl[2] > 0.5 ? '#000' : '#fff'; + document.getElementById('colorRGB').value = document.getElementById(fb.callback.id).style.backgroundColor.replace(/\s/g,''); + + // Change linked value + if (callback.value && callback.value != fb.color) { + callback.value = fb.color; + } + } + else if (typeof fb.callback == 'function') { + fb.callback.call(fb, fb.color); + } + }; + + /* Various color utility functions */ + fb.pack = function (rgb) { + var r = Math.round(rgb[0] * 255); + var g = Math.round(rgb[1] * 255); + var b = Math.round(rgb[2] * 255); + return '#' + (r < 16 ? '0' : '') + r.toString(16) + + (g < 16 ? '0' : '') + g.toString(16) + + (b < 16 ? '0' : '') + b.toString(16); + }; + + fb.unpack = function (color) { + if (color.length == 7) { + return [parseInt('0x' + color.substring(1, 3)) / 255, + parseInt('0x' + color.substring(3, 5)) / 255, + parseInt('0x' + color.substring(5, 7)) / 255]; + } + else if (color.length == 4) { + return [parseInt('0x' + color.substring(1, 2)) / 15, + parseInt('0x' + color.substring(2, 3)) / 15, + parseInt('0x' + color.substring(3, 4)) / 15]; + } + }; + + fb.HSLToRGB = function (hsl) { + var m1, m2, r, g, b; + var h = hsl[0], s = hsl[1], l = hsl[2]; + m2 = (l <= 0.5) ? l * (s + 1) : l + s - l*s; + m1 = l * 2 - m2; + return [this.hueToRGB(m1, m2, h+0.33333), + this.hueToRGB(m1, m2, h), + this.hueToRGB(m1, m2, h-0.33333)]; + }; + + fb.hueToRGB = function (m1, m2, h) { + h = (h < 0) ? h + 1 : ((h > 1) ? h - 1 : h); + if (h * 6 < 1) return m1 + (m2 - m1) * h * 6; + if (h * 2 < 1) return m2; + if (h * 3 < 2) return m1 + (m2 - m1) * (0.66666 - h) * 6; + return m1; + }; + + fb.RGBToHSL = function (rgb) { + var min, max, delta, h, s, l; + var r = rgb[0], g = rgb[1], b = rgb[2]; + min = Math.min(r, Math.min(g, b)); + max = Math.max(r, Math.max(g, b)); + delta = max - min; + l = (min + max) / 2; + s = 0; + if (l > 0 && l < 1) { + s = delta / (l < 0.5 ? (2 * l) : (2 - 2 * l)); + } + h = 0; + if (delta > 0) { + if (max == r && max != g) h += (g - b) / delta; + if (max == g && max != b) h += (2 + (b - r) / delta); + if (max == b && max != r) h += (4 + (r - g) / delta); + h /= 6; + } + return [h, s, l]; + }; + + // Install mousedown handler (the others are set on the document on-demand) + document.getElementsByClassName('farbtastic')[0].onmousedown = fb.mousedown; // Init color - fb.setColor('#000000'); + fb.setColor('#000000'); - // Set linked elements/callback - if (callback) { - fb.linkTo(callback); - } + // Set linked elements/callback + if (callback) { + fb.linkTo(callback); + } }; \ No newline at end of file