ThumbnailBuilder
Changes
css/main.css 29(+29 -0)
css/materialize-colorpicker.min.css 9(+9 -0)
img/materialize-colorpicker/hue.png 0(+0 -0)
index.html 111(+111 -0)
js/editCanvas.js 181(+181 -0)
js/materialize-colorpicker.min.js 1(+1 -0)
Details
css/main.css 29(+29 -0)
diff --git a/css/main.css b/css/main.css
new file mode 100644
index 0000000..9822421
--- /dev/null
+++ b/css/main.css
@@ -0,0 +1,29 @@
+canvas {
+ height: 233px;
+ width: 350px;
+ border: 1px solid black;
+ margin-top: 25px;
+}
+#editCanvas {
+ height: 233px;
+ weidth: 350px;
+ border: 1px solid black;
+}
+h2 {
+ font-size: 18px;
+}
+.color-input {
+ width: 80% !important;
+}
+#title-color .btn {
+ background-color: rgba(0, 255, 0, 0.8);
+}
+#category-color .btn {
+ background-color: rgba(0,0,255,0.8);
+}
+.brand-logo {
+ margin-left: 25px;
+}
+nav {
+ background-color: #26a69a;
+}
css/materialize-colorpicker.min.css 9(+9 -0)
diff --git a/css/materialize-colorpicker.min.css b/css/materialize-colorpicker.min.css
new file mode 100755
index 0000000..a1d89d9
--- /dev/null
+++ b/css/materialize-colorpicker.min.css
@@ -0,0 +1,9 @@
+/*!
+ * Bootstrap Colorpicker
+ * http://mjolnic.github.io/materialize-colorpicker/
+ *
+ * Originally written by (c) 2012 Stefan Petre
+ * Licensed under the Apache License v2.0
+ * http://www.apache.org/licenses/LICENSE-2.0.txt
+ *
+ */.colorpicker-saturation{float:left;width:100px;height:100px;cursor:crosshair;background-image:url(../img/materialize-colorpicker/saturation.png)}.colorpicker-saturation i{position:absolute;top:0;left:0;display:block;width:5px;height:5px;margin:-4px 0 0 -4px;border:1px solid #000;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-saturation i b{display:block;width:5px;height:5px;border:1px solid #fff;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}.colorpicker-alpha,.colorpicker-hue{float:left;width:15px;height:100px;margin-bottom:4px;margin-left:4px;cursor:row-resize}.colorpicker-alpha i,.colorpicker-hue i{position:absolute;top:0;left:0;display:block;width:100%;height:1px;margin-top:-1px;background:#000;border-top:1px solid #fff}.colorpicker-hue{background-image:url(../img/materialize-colorpicker/hue.png)}.colorpicker-alpha,.colorpicker-color{background-image:url(../img/materialize-colorpicker/alpha.png)}.colorpicker-alpha{display:none}.colorpicker:after,.colorpicker:before{position:absolute;display:inline-block;content:''}.colorpicker-alpha,.colorpicker-hue,.colorpicker-saturation{background-size:contain}.colorpicker{top:0;left:0;z-index:2500;min-width:125px;padding:4px;margin-top:1px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px}.colorpicker:after,.colorpicker:before{line-height:0}.colorpicker:before{top:-7px;left:6px;border-right:7px solid transparent;border-bottom:7px solid #ccc;border-left:7px solid transparent;border-bottom-color:rgba(0,0,0,.2)}.colorpicker:after{clear:both;top:-6px;left:7px;border-right:6px solid transparent;border-bottom:6px solid #fff;border-left:6px solid transparent}.colorpicker div{position:relative}.colorpicker.colorpicker-with-alpha{min-width:140px}.colorpicker.colorpicker-with-alpha .colorpicker-alpha{display:block}.colorpicker-color{height:10px;margin-top:5px;clear:both;background-position:0 100%}.colorpicker-color div{height:10px}.colorpicker-selectors{display:none;height:10px;margin-top:5px;clear:both}.colorpicker-selectors i{float:left;width:10px;height:10px;cursor:pointer}.colorpicker-selectors i+i{margin-left:3px}.colorpicker-element .add-on i,.colorpicker-element .input-group-addon i{display:inline-block;width:16px;height:16px;vertical-align:text-top;cursor:pointer}.colorpicker.colorpicker-inline{position:relative;z-index:auto;display:inline-block;float:none}.colorpicker.colorpicker-horizontal{width:110px;height:auto;min-width:110px}.colorpicker.colorpicker-horizontal .colorpicker-saturation{margin-bottom:4px}.colorpicker.colorpicker-horizontal .colorpicker-color{width:100px}.colorpicker.colorpicker-horizontal .colorpicker-alpha,.colorpicker.colorpicker-horizontal .colorpicker-hue{float:left;width:100px;height:15px;margin-bottom:4px;margin-left:0;cursor:col-resize}.colorpicker.colorpicker-horizontal .colorpicker-alpha i,.colorpicker.colorpicker-horizontal .colorpicker-hue i{position:absolute;top:0;left:0;display:block;width:1px;height:15px;margin-top:0;background:#fff;border:none}.colorpicker.colorpicker-horizontal .colorpicker-hue{background-image:url(../img/materialize-colorpicker/hue-horizontal.png)}.colorpicker.colorpicker-horizontal .colorpicker-alpha{background-image:url(../img/materialize-colorpicker/alpha-horizontal.png)}.colorpicker.colorpicker-hidden{display:none}.colorpicker.colorpicker-visible{display:block}.colorpicker-inline.colorpicker-visible{display:inline-block}.colorpicker-right:before{right:6px;left:auto}.colorpicker-right:after{right:7px;left:auto}.colorpicker-dropdown{position:absolute;top:100%;left:0;z-index:2500;display:none;float:left;padding:2px;margin:2px 0 0;font-size:14px;text-align:left;list-style:none;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid #ccc;border:1px solid rgba(0,0,0,.15);border-radius:4px;-webkit-box-shadow:0 6px 12px rgba(0,0,0,.175);box-shadow:0 6px 12px rgba(0,0,0,.175)}.colorpicker-no-arrow:after,.colorpicker-no-arrow:before{border-right:0;border-left:0}
diff --git a/img/materialize-colorpicker/alpha.png b/img/materialize-colorpicker/alpha.png
new file mode 100755
index 0000000..38043f1
Binary files /dev/null and b/img/materialize-colorpicker/alpha.png differ
diff --git a/img/materialize-colorpicker/alpha-horizontal.png b/img/materialize-colorpicker/alpha-horizontal.png
new file mode 100755
index 0000000..d0a65c0
Binary files /dev/null and b/img/materialize-colorpicker/alpha-horizontal.png differ
img/materialize-colorpicker/hue.png 0(+0 -0)
diff --git a/img/materialize-colorpicker/hue.png b/img/materialize-colorpicker/hue.png
new file mode 100755
index 0000000..d89560e
Binary files /dev/null and b/img/materialize-colorpicker/hue.png differ
diff --git a/img/materialize-colorpicker/hue-horizontal.png b/img/materialize-colorpicker/hue-horizontal.png
new file mode 100755
index 0000000..a0d9add
Binary files /dev/null and b/img/materialize-colorpicker/hue-horizontal.png differ
diff --git a/img/materialize-colorpicker/saturation.png b/img/materialize-colorpicker/saturation.png
new file mode 100755
index 0000000..594ae50
Binary files /dev/null and b/img/materialize-colorpicker/saturation.png differ
index.html 111(+111 -0)
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..5806878
--- /dev/null
+++ b/index.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<head>
+ <meta charset="utf-8">
+ <meta name="viewport" content="width=device-width">
+ <title>Playing with Canvas</title>
+ <!-- Compiled and minified CSS -->
+ <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
+ <link rel="stylesheet" href="./css/materialize-colorpicker.min.css">
+ <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
+ <link rel="stylesheet" href="./css/main.css" />
+</head>
+<body>
+<div class="container">
+ <nav>
+ <div class="nav-wrapper">
+ <a href="#" class="brand-logo">ArcGIS Thumbnail Builder</a>
+ </div>
+ </nav>
+
+ <div class="row">
+
+ <div class="col m6 s12">
+ <div class="row">
+ <canvas id="edit-canvas"></canvas>
+ </div>
+
+ <div class="row">
+ <div id="title-color" class="file-field">
+ <div class="btn color-icon"></div>
+ <div class="file-path-wrapper">
+ <input type="text" class="color-input"/>
+ </div>
+ </div>
+ <div id="category-color" class="file-field">
+ <div class="btn color-icon"></div>
+ <div class="file-path-wrapper">
+ <input type="text" class="color-input"/>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+ <div class="col m6 s12">
+
+ <div class="row">
+ <h2>Title</h2>
+ <div class="input-field col s12">
+ <input placeholder="Item Title" type="text" id="title" name="title" />
+ <label for="title">Item Title</label>
+ </div>
+ </div>
+
+ <div class="row">
+ <h2>Sidebar</h2>
+ <div class="input-field col s12">
+ <select name="category" id="category">
+ <option value="Web Map">Web Map</option>
+ <option value="Story Map">Story Map</option>
+ <option value="Web App">Web App</option>
+ <option value="Document">Document</option>
+ </select>
+ </div>
+ </div>
+
+ <div class="row">
+ <h2>Background Image</h2>
+ <div class="input-field col s12">
+ <div class="file-field input-field">
+ <div class="btn">
+ <span>File</span>
+ <input type="file" id="background">
+ </div>
+ <div class="file-path-wrapper">
+ <input class="file-path validate" type="text">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ <div class="row">
+ <h2>Logo Image</h2>
+ <div class="input-field col s12">
+ <div class="file-field input-field">
+ <div class="btn">
+ <span>File</span>
+ <input type="file" id="logo">
+ </div>
+ <div class="file-path-wrapper">
+ <input class="file-path validate" type="text">
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div> <!-- /row -->
+
+</div> <!-- /container -->
+<!-- Compiled and minified JavaScript -->
+<script
+ src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
+ integrity="sha256-3edrmyuQ0w65f8gfBsqowzjJe2iM6n0nKciPUp8y+7E="
+ crossorigin="anonymous"></script>
+<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
+<script src="./js/materialize-colorpicker.min.js"></script>
+<script src="./js/editCanvas.js"></script>
+</body>
+</html>
js/editCanvas.js 181(+181 -0)
diff --git a/js/editCanvas.js b/js/editCanvas.js
new file mode 100644
index 0000000..9cd68f9
--- /dev/null
+++ b/js/editCanvas.js
@@ -0,0 +1,181 @@
+var editCanvas = document.querySelector("#edit-canvas");
+editCanvas.height = 400;
+editCanvas.width = 600;
+
+var ctx = editCanvas.getContext('2d');
+
+// Title and Title Background
+var titleComponent = {
+ properties: {
+ text : function () {
+ return document.querySelector("#title").value
+ },
+ bgColor: function () {
+ return $("#title-color").colorpicker('getValue');
+ }
+ },
+ draw: function () {
+ this._bg();
+ this._text();
+ },
+ _bg: function () {
+ ctx.fillStyle = this.properties.bgColor();
+ ctx.fillRect(0,300,500,120);
+ },
+ _text: function() {
+ editCanvas.letterSpacing = 2;
+ ctx.fillStyle = 'rgba(255, 255, 255, 1)';
+ ctx.font = '30px sans-serif';
+ ctx.textAlign = 'center';
+ ctx.textBaseline = 'top';
+ function wrapText(context, text, x, y, maxWidth, lineHeight) {
+ var words = text.split(' ');
+ var line = '';
+
+ for(var n = 0; n < words.length; n++) {
+ var testLine = line + words[n] + ' ';
+ var metrics = context.measureText(testLine);
+ var testWidth = metrics.width;
+ if (testWidth > maxWidth && n > 0) {
+ context.fillText(line, x, y);
+ line = words[n] + ' ';
+ y += lineHeight;
+ }
+ else {
+ line = testLine;
+ }
+ }
+ context.fillText(line, x, y);
+ }
+ wrapText(ctx, this.properties.text(), 255, 326, 450, 35);
+ }
+}
+
+// Category and Category Background
+var categoryComponent = {
+ properties: {
+ text : function () {
+ return document.querySelector('#category').value;
+ },
+ bgColor: function () {
+ return $("#category-color").colorpicker('getValue');
+ }
+ },
+ draw: function () {
+ this._bg();
+ this._text();
+ },
+ _bg: function () {
+ ctx.fillStyle = this.properties.bgColor();
+ ctx.fillRect(500,0,150,400);
+ },
+ _text: function () {
+ ctx.save();
+ ctx.translate(524, 200)
+ ctx.rotate(-0.5*Math.PI);
+ editCanvas.style.letterSpacing = 4;
+ ctx.fillStyle = 'rgba(255, 255, 255, 0.8)';
+ ctx.font = '48px sans-serif';
+ ctx.textAlign = "center";
+ ctx.fillText(this.properties.text(), 0, 0);
+ ctx.restore();
+ }
+}
+
+// Background Image
+var backgroundComponent = {
+ properties: {
+ domId: "#background",
+ },
+ draw: function () {
+ this._addImage();
+ },
+ _addImage: function () {
+
+ var file = document.querySelector(this.properties.domId).files[0];
+ if(file == undefined) return;
+ var background = new Image();
+ var reader = new FileReader();
+
+ background.onload = function () {
+ sourceHeight = background.height;
+ sourceWidth = background.width;
+ ctx.globalCompositeOperation = 'destination-over';
+ ctx.drawImage(background, 0, 0, sourceWidth, sourceHeight,
+ 0, 0, 600, 400);
+ ctx.globalCompositeOperation = 'source-over';
+ }
+
+ reader.addEventListener("load", function () {
+ background.src = reader.result;
+ }, false);
+
+ reader.readAsDataURL(file);
+ }
+}
+
+// Logo
+
+var logoComponent = {
+ properties: {
+ domId: "#logo",
+ },
+ draw: function () {
+ this._addImage();
+ },
+ _addImage: function () {
+
+ var file = document.querySelector(this.properties.domId).files[0];
+ if(file == undefined) return;
+ var background = new Image();
+ var reader = new FileReader();
+
+ background.onload = function () {
+ sourceHeight = background.height;
+ sourceWidth = background.width;
+ ctx.drawImage(background, 0, 0, sourceWidth, sourceHeight,
+ 5, 5, 145, 145);
+ }
+
+ reader.addEventListener("load", function () {
+ background.src = reader.result;
+ }, false);
+
+ reader.readAsDataURL(file);
+ }
+}
+
+// main function to draw / redraw canvas
+function draw() {
+ //Draw Title Component
+ ctx.clearRect(0, 0, editCanvas.width, editCanvas.height);
+ titleComponent.draw();
+ categoryComponent.draw();
+ backgroundComponent.draw();
+ logoComponent.draw();
+}
+
+document.addEventListener('DOMContentLoaded', function() {
+ // Color Picker
+ $('#title-color').colorpicker({
+ component: '.btn'
+ }).on('changeColor', draw)
+
+ $('#category-color').colorpicker({
+ component: '.btn'
+ }).on('changeColor', draw)
+
+ // Select Dropdowns
+ var elems = document.querySelectorAll('select');
+ var instances = M.FormSelect.init(elems);
+
+ // Update Events
+ document.querySelector('#title').addEventListener('keyup', draw);
+ document.querySelector('#category').addEventListener('change', draw);
+ document.querySelector('#background')
+ .addEventListener('change', draw);
+ document.querySelector('#logo')
+ .addEventListener('change', draw);
+
+ draw();
+});
js/materialize-colorpicker.min.js 1(+1 -0)
diff --git a/js/materialize-colorpicker.min.js b/js/materialize-colorpicker.min.js
new file mode 100755
index 0000000..440ac11
--- /dev/null
+++ b/js/materialize-colorpicker.min.js
@@ -0,0 +1 @@
+!function(t){"use strict";"object"==typeof exports?module.exports=t(window.jQuery):"function"==typeof define&&define.amd?define(["jquery"],t):window.jQuery&&!window.jQuery.fn.colorpicker&&t(window.jQuery)}(function(t){"use strict";var e=function(e,o){this.value={h:0,s:0,b:0,a:1},this.origFormat=null,o&&t.extend(this.colors,o),e&&(void 0!==e.toLowerCase?(e+="",this.setColor(e)):void 0!==e.h&&(this.value=e))};e.prototype={constructor:e,colors:{aliceblue:"#f0f8ff",antiquewhite:"#faebd7",aqua:"#00ffff",aquamarine:"#7fffd4",azure:"#f0ffff",beige:"#f5f5dc",bisque:"#ffe4c4",black:"#000000",blanchedalmond:"#ffebcd",blue:"#0000ff",blueviolet:"#8a2be2",brown:"#a52a2a",burlywood:"#deb887",cadetblue:"#5f9ea0",chartreuse:"#7fff00",chocolate:"#d2691e",coral:"#ff7f50",cornflowerblue:"#6495ed",cornsilk:"#fff8dc",crimson:"#dc143c",cyan:"#00ffff",darkblue:"#00008b",darkcyan:"#008b8b",darkgoldenrod:"#b8860b",darkgray:"#a9a9a9",darkgreen:"#006400",darkkhaki:"#bdb76b",darkmagenta:"#8b008b",darkolivegreen:"#556b2f",darkorange:"#ff8c00",darkorchid:"#9932cc",darkred:"#8b0000",darksalmon:"#e9967a",darkseagreen:"#8fbc8f",darkslateblue:"#483d8b",darkslategray:"#2f4f4f",darkturquoise:"#00ced1",darkviolet:"#9400d3",deeppink:"#ff1493",deepskyblue:"#00bfff",dimgray:"#696969",dodgerblue:"#1e90ff",firebrick:"#b22222",floralwhite:"#fffaf0",forestgreen:"#228b22",fuchsia:"#ff00ff",gainsboro:"#dcdcdc",ghostwhite:"#f8f8ff",gold:"#ffd700",goldenrod:"#daa520",gray:"#808080",green:"#008000",greenyellow:"#adff2f",honeydew:"#f0fff0",hotpink:"#ff69b4",indianred:"#cd5c5c",indigo:"#4b0082",ivory:"#fffff0",khaki:"#f0e68c",lavender:"#e6e6fa",lavenderblush:"#fff0f5",lawngreen:"#7cfc00",lemonchiffon:"#fffacd",lightblue:"#add8e6",lightcoral:"#f08080",lightcyan:"#e0ffff",lightgoldenrodyellow:"#fafad2",lightgrey:"#d3d3d3",lightgreen:"#90ee90",lightpink:"#ffb6c1",lightsalmon:"#ffa07a",lightseagreen:"#20b2aa",lightskyblue:"#87cefa",lightslategray:"#778899",lightsteelblue:"#b0c4de",lightyellow:"#ffffe0",lime:"#00ff00",limegreen:"#32cd32",linen:"#faf0e6",magenta:"#ff00ff",maroon:"#800000",mediumaquamarine:"#66cdaa",mediumblue:"#0000cd",mediumorchid:"#ba55d3",mediumpurple:"#9370d8",mediumseagreen:"#3cb371",mediumslateblue:"#7b68ee",mediumspringgreen:"#00fa9a",mediumturquoise:"#48d1cc",mediumvioletred:"#c71585",midnightblue:"#191970",mintcream:"#f5fffa",mistyrose:"#ffe4e1",moccasin:"#ffe4b5",navajowhite:"#ffdead",navy:"#000080",oldlace:"#fdf5e6",olive:"#808000",olivedrab:"#6b8e23",orange:"#ffa500",orangered:"#ff4500",orchid:"#da70d6",palegoldenrod:"#eee8aa",palegreen:"#98fb98",paleturquoise:"#afeeee",palevioletred:"#d87093",papayawhip:"#ffefd5",peachpuff:"#ffdab9",peru:"#cd853f",pink:"#ffc0cb",plum:"#dda0dd",powderblue:"#b0e0e6",purple:"#800080",red:"#ff0000",rosybrown:"#bc8f8f",royalblue:"#4169e1",saddlebrown:"#8b4513",salmon:"#fa8072",sandybrown:"#f4a460",seagreen:"#2e8b57",seashell:"#fff5ee",sienna:"#a0522d",silver:"#c0c0c0",skyblue:"#87ceeb",slateblue:"#6a5acd",slategray:"#708090",snow:"#fffafa",springgreen:"#00ff7f",steelblue:"#4682b4",tan:"#d2b48c",teal:"#008080",thistle:"#d8bfd8",tomato:"#ff6347",turquoise:"#40e0d0",violet:"#ee82ee",wheat:"#f5deb3",white:"#ffffff",whitesmoke:"#f5f5f5",yellow:"#ffff00",yellowgreen:"#9acd32",transparent:"transparent"},_sanitizeNumber:function(t){return"number"==typeof t?t:isNaN(t)||null===t||""===t||void 0===t?1:void 0!==t.toLowerCase?parseFloat(t):1},isTransparent:function(t){return t?(t=t.toLowerCase().trim(),"transparent"===t||t.match(/#?00000000/)||t.match(/(rgba|hsla)\(0,0,0,0?\.?0\)/)):!1},rgbaIsTransparent:function(t){return 0===t.r&&0===t.g&&0===t.b&&0===t.a},setColor:function(t){t=t.toLowerCase().trim(),t&&(this.value=this.isTransparent(t)?{h:0,s:0,b:0,a:0}:this.stringToHSB(t)||{h:0,s:0,b:0,a:1})},stringToHSB:function(e){e=e.toLowerCase();var o;"undefined"!=typeof this.colors[e]&&(e=this.colors[e],o="alias");var i=this,r=!1;return t.each(this.stringParsers,function(t,s){var a=s.re.exec(e),n=a&&s.parse.apply(i,[a]),l=o||s.format||"rgba";return n?(r=l.match(/hsla?/)?i.RGBtoHSB.apply(i,i.HSLtoRGB.apply(i,n)):i.RGBtoHSB.apply(i,n),i.origFormat=l,!1):!0}),r},setHue:function(t){this.value.h=1-t},setSaturation:function(t){this.value.s=t},setBrightness:function(t){this.value.b=1-t},setAlpha:function(t){this.value.a=parseInt(100*(1-t),10)/100},toRGB:function(t,e,o,i){t||(t=this.value.h,e=this.value.s,o=this.value.b),t*=360;var r,s,a,n,l;return t=t%360/60,l=o*e,n=l*(1-Math.abs(t%2-1)),r=s=a=o-l,t=~~t,r+=[l,n,0,0,n,l][t],s+=[n,l,l,n,0,0][t],a+=[0,0,n,l,l,n][t],{r:Math.round(255*r),g:Math.round(255*s),b:Math.round(255*a),a:i||this.value.a}},toHex:function(t,e,o,i){var r=this.toRGB(t,e,o,i);return this.rgbaIsTransparent(r)?"transparent":"#"+(1<<24|parseInt(r.r)<<16|parseInt(r.g)<<8|parseInt(r.b)).toString(16).substr(1)},toHSL:function(t,e,o,i){t=t||this.value.h,e=e||this.value.s,o=o||this.value.b,i=i||this.value.a;var r=t,s=(2-e)*o,a=e*o;return a/=s>0&&1>=s?s:2-s,s/=2,a>1&&(a=1),{h:isNaN(r)?0:r,s:isNaN(a)?0:a,l:isNaN(s)?0:s,a:isNaN(i)?0:i}},toAlias:function(t,e,o,i){var r=this.toHex(t,e,o,i);for(var s in this.colors)if(this.colors[s]===r)return s;return!1},RGBtoHSB:function(t,e,o,i){t/=255,e/=255,o/=255;var r,s,a,n;return a=Math.max(t,e,o),n=a-Math.min(t,e,o),r=0===n?null:a===t?(e-o)/n:a===e?(o-t)/n+2:(t-e)/n+4,r=(r+360)%6*60/360,s=0===n?0:n/a,{h:this._sanitizeNumber(r),s:s,b:a,a:this._sanitizeNumber(i)}},HueToRGB:function(t,e,o){return 0>o?o+=1:o>1&&(o-=1),1>6*o?t+(e-t)*o*6:1>2*o?e:2>3*o?t+(e-t)*(2/3-o)*6:t},HSLtoRGB:function(t,e,o,i){0>e&&(e=0);var r;r=.5>=o?o*(1+e):o+e-o*e;var s=2*o-r,a=t+1/3,n=t,l=t-1/3,c=Math.round(255*this.HueToRGB(s,r,a)),h=Math.round(255*this.HueToRGB(s,r,n)),p=Math.round(255*this.HueToRGB(s,r,l));return[c,h,p,this._sanitizeNumber(i)]},toString:function(t){t=t||"rgba";var e=!1;switch(t){case"rgb":return e=this.toRGB(),this.rgbaIsTransparent(e)?"transparent":"rgb("+e.r+","+e.g+","+e.b+")";case"rgba":return e=this.toRGB(),"rgba("+e.r+","+e.g+","+e.b+","+e.a+")";case"hsl":return e=this.toHSL(),"hsl("+Math.round(360*e.h)+","+Math.round(100*e.s)+"%,"+Math.round(100*e.l)+"%)";case"hsla":return e=this.toHSL(),"hsla("+Math.round(360*e.h)+","+Math.round(100*e.s)+"%,"+Math.round(100*e.l)+"%,"+e.a+")";case"hex":return this.toHex();case"alias":return this.toAlias()||this.toHex();default:return e}},stringParsers:[{re:/rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*?\)/,format:"rgb",parse:function(t){return[t[1],t[2],t[3],1]}},{re:/rgb\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*?\)/,format:"rgb",parse:function(t){return[2.55*t[1],2.55*t[2],2.55*t[3],1]}},{re:/rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,format:"rgba",parse:function(t){return[t[1],t[2],t[3],t[4]]}},{re:/rgba\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,format:"rgba",parse:function(t){return[2.55*t[1],2.55*t[2],2.55*t[3],t[4]]}},{re:/hsl\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*?\)/,format:"hsl",parse:function(t){return[t[1]/360,t[2]/100,t[3]/100,t[4]]}},{re:/hsla\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,format:"hsla",parse:function(t){return[t[1]/360,t[2]/100,t[3]/100,t[4]]}},{re:/#?([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,format:"hex",parse:function(t){return[parseInt(t[1],16),parseInt(t[2],16),parseInt(t[3],16),1]}},{re:/#?([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,format:"hex",parse:function(t){return[parseInt(t[1]+t[1],16),parseInt(t[2]+t[2],16),parseInt(t[3]+t[3],16),1]}}],colorNameToHex:function(t){return"undefined"!=typeof this.colors[t.toLowerCase()]?this.colors[t.toLowerCase()]:!1}};var o={horizontal:!1,inline:!1,color:!1,format:!1,input:"input",container:!1,component:".add-on, .input-group-addon",sliders:{saturation:{maxLeft:100,maxTop:100,callLeft:"setSaturation",callTop:"setBrightness"},hue:{maxLeft:0,maxTop:100,callLeft:!1,callTop:"setHue"},alpha:{maxLeft:0,maxTop:100,callLeft:!1,callTop:"setAlpha"}},slidersHorz:{saturation:{maxLeft:100,maxTop:100,callLeft:"setSaturation",callTop:"setBrightness"},hue:{maxLeft:100,maxTop:0,callLeft:"setHue",callTop:!1},alpha:{maxLeft:100,maxTop:0,callLeft:"setAlpha",callTop:!1}},template:'<div class="colorpicker colorpicker-dropdown"><div class="colorpicker-saturation"><i><b></b></i></div><div class="colorpicker-hue"><i></i></div><div class="colorpicker-alpha"><i></i></div><div class="colorpicker-color"><div /></div><div class="colorpicker-selectors"></div></div>',align:"right",customClass:null,colorSelectors:null},i=function(i,r){if(this.element=t(i).addClass("colorpicker-element"),this.options=t.extend(!0,{},o,this.element.data(),r),this.component=this.options.component,this.component=this.component!==!1?this.element.find(this.component):!1,this.component&&0===this.component.length?this.component=!1:this.options.color=this.component.css("background-color"),this.container=this.options.container===!0?this.element:this.options.container,this.container=this.container!==!1?t(this.container):!1,this.input=this.element.is("input")?this.element:this.options.input?this.element.find(this.options.input):!1,this.input&&0===this.input.length&&(this.input=!1),this.color=new e(this.options.color!==!1?this.options.color:this.getValue(),this.options.colorSelectors),this.format=this.options.format!==!1?this.options.format:this.color.origFormat,this.picker=t(this.options.template),this.options.customClass&&this.picker.addClass(this.options.customClass),this.picker.addClass(this.options.inline?"colorpicker-inline colorpicker-visible":"colorpicker-hidden"),this.options.horizontal&&this.picker.addClass("colorpicker-horizontal"),("rgba"===this.format||"hsla"===this.format||this.options.format===!1)&&this.picker.addClass("colorpicker-with-alpha"),"right"===this.options.align&&this.picker.addClass("colorpicker-right"),this.options.inline===!0&&this.picker.addClass("colorpicker-no-arrow"),this.options.colorSelectors){var s=this;t.each(this.options.colorSelectors,function(e,o){var i=t("<i />").css("background-color",o).data("class",e);i.click(function(){s.setValue(t(this).css("background-color"))}),s.picker.find(".colorpicker-selectors").append(i)}),this.picker.find(".colorpicker-selectors").show()}this.picker.on("mousedown.colorpicker touchstart.colorpicker",t.proxy(this.mousedown,this)),this.picker.appendTo(this.container?this.container:t("body")),this.input!==!1&&(this.input.on({"keyup.colorpicker":t.proxy(this.keyup,this)}),this.input.on({"change.colorpicker":t.proxy(this.change,this)}),this.component===!1&&this.element.on({"focus.colorpicker":t.proxy(this.show,this)}),this.options.inline===!1&&this.element.on({"focusout.colorpicker":t.proxy(this.hide,this)})),this.component!==!1&&this.component.on({"click.colorpicker":t.proxy(this.show,this)}),this.input===!1&&this.component===!1&&this.element.on({"click.colorpicker":t.proxy(this.show,this)}),this.input!==!1&&this.component!==!1&&"color"===this.input.attr("type")&&this.input.on({"click.colorpicker":t.proxy(this.show,this),"focus.colorpicker":t.proxy(this.show,this)}),this.update(!0),t(t.proxy(function(){this.element.trigger("create")},this))};i.Color=e,i.prototype={constructor:i,destroy:function(){this.picker.remove(),this.element.removeData("colorpicker").off(".colorpicker"),this.input!==!1&&this.input.off(".colorpicker"),this.component!==!1&&this.component.off(".colorpicker"),this.element.removeClass("colorpicker-element"),this.element.trigger({type:"destroy"})},reposition:function(){if(this.options.inline!==!1||this.options.container)return!1;var t=this.container&&this.container[0]!==document.body?"position":"offset",e=this.component||this.element,o=e[t]();"right"===this.options.align&&(o.left-=this.picker.outerWidth()-e.outerWidth()),this.picker.css({top:o.top+e.outerHeight(),left:o.left})},show:function(e){return this.isDisabled()?!1:(this.picker.addClass("colorpicker-visible").removeClass("colorpicker-hidden"),this.reposition(),t(window).on("resize.colorpicker",t.proxy(this.reposition,this)),!e||this.hasInput()&&"color"!==this.input.attr("type")||e.stopPropagation&&e.preventDefault&&(e.stopPropagation(),e.preventDefault()),this.options.inline===!1&&t(window.document).on({"mousedown.colorpicker":t.proxy(this.hide,this)}),void this.element.trigger({type:"showPicker",color:this.color}))},hide:function(){this.picker.addClass("colorpicker-hidden").removeClass("colorpicker-visible"),t(window).off("resize.colorpicker",this.reposition),t(document).off({"mousedown.colorpicker":this.hide}),this.update(),this.element.trigger({type:"hidePicker",color:this.color})},updateData:function(t){return t=t||this.color.toString(this.format),this.element.data("color",t),t},updateInput:function(t){if(t=t||this.color.toString(this.format),this.input!==!1){if(this.options.colorSelectors){var o=new e(t,this.options.colorSelectors),i=o.toAlias();"undefined"!=typeof this.options.colorSelectors[i]&&(t=i)}this.input.prop("value",t)}return t},updatePicker:function(t){void 0!==t&&(this.color=new e(t,this.options.colorSelectors));var o=this.options.horizontal===!1?this.options.sliders:this.options.slidersHorz,i=this.picker.find("i");return 0!==i.length?(this.options.horizontal===!1?(o=this.options.sliders,i.eq(1).css("top",o.hue.maxTop*(1-this.color.value.h)).end().eq(2).css("top",o.alpha.maxTop*(1-this.color.value.a))):(o=this.options.slidersHorz,i.eq(1).css("left",o.hue.maxLeft*(1-this.color.value.h)).end().eq(2).css("left",o.alpha.maxLeft*(1-this.color.value.a))),i.eq(0).css({top:o.saturation.maxTop-this.color.value.b*o.saturation.maxTop,left:this.color.value.s*o.saturation.maxLeft}),this.picker.find(".colorpicker-saturation").css("backgroundColor",this.color.toHex(this.color.value.h,1,1,1)),this.picker.find(".colorpicker-alpha").css("backgroundColor",this.color.toHex()),this.picker.find(".colorpicker-color, .colorpicker-color div").css("backgroundColor",this.color.toString(this.format)),t):void 0},updateComponent:function(t){if(t=t||this.color.toString(this.format),this.component!==!1){var e=this.component.find("i").eq(0);e.length>0?e.css({backgroundColor:t}):this.component.css({backgroundColor:t})}return t},update:function(t){var e;return(this.getValue(!1)!==!1||t===!0)&&(e=this.updateComponent(),this.updateInput(e),this.updateData(e),this.updatePicker()),e},setValue:function(t){this.color=new e(t,this.options.colorSelectors),this.update(!0),this.element.trigger({type:"changeColor",color:this.color,value:t})},getValue:function(t){t=void 0===t?"#000000":t;var e;return e=this.hasInput()?this.input.val():this.element.data("color"),(void 0===e||""===e||null===e)&&(e=t),e},hasInput:function(){return this.input!==!1},isDisabled:function(){return this.hasInput()?this.input.prop("disabled")===!0:!1},disable:function(){return this.hasInput()?(this.input.prop("disabled",!0),this.element.trigger({type:"disable",color:this.color,value:this.getValue()}),!0):!1},enable:function(){return this.hasInput()?(this.input.prop("disabled",!1),this.element.trigger({type:"enable",color:this.color,value:this.getValue()}),!0):!1},currentSlider:null,mousePointer:{left:0,top:0},mousedown:function(e){e.pageX||e.pageY||!e.originalEvent||(e.pageX=e.originalEvent.touches[0].pageX,e.pageY=e.originalEvent.touches[0].pageY),e.stopPropagation(),e.preventDefault();var o=t(e.target),i=o.closest("div"),r=this.options.horizontal?this.options.slidersHorz:this.options.sliders;if(!i.is(".colorpicker")){if(i.is(".colorpicker-saturation"))this.currentSlider=t.extend({},r.saturation);else if(i.is(".colorpicker-hue"))this.currentSlider=t.extend({},r.hue);else{if(!i.is(".colorpicker-alpha"))return!1;this.currentSlider=t.extend({},r.alpha)}var s=i.offset();this.currentSlider.guide=i.find("i")[0].style,this.currentSlider.left=e.pageX-s.left,this.currentSlider.top=e.pageY-s.top,this.mousePointer={left:e.pageX,top:e.pageY},t(document).on({"mousemove.colorpicker":t.proxy(this.mousemove,this),"touchmove.colorpicker":t.proxy(this.mousemove,this),"mouseup.colorpicker":t.proxy(this.mouseup,this),"touchend.colorpicker":t.proxy(this.mouseup,this)}).trigger("mousemove")}return!1},mousemove:function(t){t.pageX||t.pageY||!t.originalEvent||(t.pageX=t.originalEvent.touches[0].pageX,t.pageY=t.originalEvent.touches[0].pageY),t.stopPropagation(),t.preventDefault();var e=Math.max(0,Math.min(this.currentSlider.maxLeft,this.currentSlider.left+((t.pageX||this.mousePointer.left)-this.mousePointer.left))),o=Math.max(0,Math.min(this.currentSlider.maxTop,this.currentSlider.top+((t.pageY||this.mousePointer.top)-this.mousePointer.top)));return this.currentSlider.guide.left=e+"px",this.currentSlider.guide.top=o+"px",this.currentSlider.callLeft&&this.color[this.currentSlider.callLeft].call(this.color,e/this.currentSlider.maxLeft),this.currentSlider.callTop&&this.color[this.currentSlider.callTop].call(this.color,o/this.currentSlider.maxTop),"setAlpha"===this.currentSlider.callTop&&this.options.format===!1&&(1!==this.color.value.a?(this.format="rgba",this.color.origFormat="rgba"):(this.format="hex",this.color.origFormat="hex")),this.update(!0),this.element.trigger({type:"changeColor",color:this.color}),!1},mouseup:function(e){return e.stopPropagation(),e.preventDefault(),t(document).off({"mousemove.colorpicker":this.mousemove,"touchmove.colorpicker":this.mousemove,"mouseup.colorpicker":this.mouseup,"touchend.colorpicker":this.mouseup}),!1},change:function(t){this.keyup(t)},keyup:function(t){38===t.keyCode?(this.color.value.a<1&&(this.color.value.a=Math.round(100*(this.color.value.a+.01))/100),this.update(!0)):40===t.keyCode?(this.color.value.a>0&&(this.color.value.a=Math.round(100*(this.color.value.a-.01))/100),this.update(!0)):(this.color=new e(this.input.val(),this.options.colorSelectors),this.color.origFormat&&this.options.format===!1&&(this.format=this.color.origFormat),this.getValue(!1)!==!1&&(this.updateData(),this.updateComponent(),this.updatePicker())),this.element.trigger({type:"changeColor",color:this.color,value:this.input.val()})}},t.colorpicker=i,t.fn.colorpicker=function(e){var o,r=arguments,s=this.each(function(){var s=t(this),a=s.data("colorpicker"),n="object"==typeof e?e:{};a||"string"==typeof e?"string"==typeof e&&(o=a[e].apply(a,Array.prototype.slice.call(r,1))):s.data("colorpicker",new i(this,n))});return"getValue"===e?o:s},t.fn.colorpicker.constructor=i});