1(function($) { 2 var canvas = false; 3 var $canvas = false; 4 var sketcher = false; 5 6 var new_brush_url = ""; 7 var cache_brush_img = false; 8 var cache_brush_url = ""; 9 var selected_color = "#000000"; 10 11 var $brushholder = false; 12 13 var ctx = false; 14 var WIDTH = 250; 15 var HEIGHT = 250; 16 var CANVASID = "canvas"; 17 18 $(document).ready(init); 19 20 function init() { 21 startCanvas(); 22 startColorPicker(); 23 startBrushPicker(); 24 startButtons(); 25 doIEStuff(); 26 } 27 28 function gotoStep2() { 29 $('#toolkit').hide(); 30 $('#form').show(); 31 sketcher.setEnabled(false); 32 $canvas.css('cursor', 'auto').css('background-image', 'none'); 33 } 34 35 function gotoStep1() { 36 $('#toolkit').show(); 37 $('#form').hide(); 38 sketcher.setEnabled(true); 39 updateBrush(); 40 } 41 42 function doIEStuff() { 43 if ($('html').hasClass('ie9')) { 44 $brushholder.addClass('ie'); 45 $canvas.addClass('ie'); 46 } 47 } 48 49 function startButtons() { 50 $('#btnSave').click(onSave); 51 $('#btnReset').click(onReset); 52 $('#btnOk').click(onOk); 53 $('#btnBack').click(onBack); 54 55 } 56 57 function onOk() { 58 var data = {}; 59 data.name = $('#name').val(); 60 data.title = $('#title').val(); 61 data.url = $('#url').val(); 62 data.description = $('#description').val(); 63 data.imagedata = sketcher.toDataURL(); 64 65 $('#form').fadeOut(400, null, function() { 66 $('#waiting').fadeIn(); 67 $.post(DooodlVars.post_new, data, function(response, status, xhr) { 68 console.log(response); 69 $('#waiting').fadeOut(400, null, function() { 70 $('#success').fadeIn(400); 71 }); 72 }); 73 }); 74 75 return false; 76 } 77 78 function onBack() { 79 gotoStep1(); 80 return false; 81 } 82 83 function onSave() { 84 gotoStep2(); 85 return false; 86 } 87 88 function onReset() { 89 var ok = confirm('This will remove your current drawing. This cannot be undone. \nAre you sure?'); 90 if (ok) { 91 resetToRandomBGColor(); 92 } 93 return false; 94 } 95 96 function resetToRandomBGColor() { 97 var r = Math.floor(Math.random() * 256); 98 var g = Math.floor(Math.random() * 256); 99 var b = Math.floor(Math.random() * 256); 100 var color = rgbToHex(r, g, b); 101 resetBG(color); 102 } 103 104 function startColorPicker() { 105 $('div#color ul li a').click(function() { 106 var $this = $(this); 107 setBrushColor($this.data('color')); 108 return false; 109 }); 110 } 111 112 function startBrushPicker() { 113 $('div#brush ul li a').click(function() { 114 var $this = $(this); 115 var type = $this.data('type'); 116 var size = $this.data('size'); 117 118 var url = DooodlVars.plugin_root + "creator/images/brush_" + type + "_" + size + ".png"; 119 setBrushImage(url); 120 return false; 121 }); 122 } 123 124 function setBrushImage(brushurl) { 125 new_brush_url = brushurl; 126 updateBrush(); 127 } 128 129 function setBrushColor(color) { 130 selected_color = color; 131 updateBrush(); 132 } 133 134 function updateBrushholder(url, w, h) { 135 var nx = Math.round(w / -2) + 3; 136 var ny = Math.round(h / -2) + 3; 137 138 //$canvas.css('cursor','url("'+ url +'") '+ nx +' '+ ny +',auto'); 139 if (!$brushholder.hasClass('ie')) { 140 $brushholder 141 .css('background-image', 'url("' + url + '")') 142 .css('margin-left', nx + 'px') 143 .css('margin-top', ny + 'px') 144 .css('width', w + "px") 145 .css('height', h + "px"); 146 $canvas.css('cursor', 'none') 147 } 148 } 149 150 function updateBrush() { 151 if (new_brush_url == cache_brush_url) { 152 var brush = document.createElement('canvas'); 153 brush.width = cache_brush_img.width; 154 brush.height = cache_brush_img.height; 155 brushctx = brush.getContext('2d'); 156 157 //color brush 158 brushctx.fillStyle = selected_color; 159 brushctx.fillRect(0, 0, brush.width, brush.height); 160 brushctx.globalCompositeOperation = "destination-atop"; 161 brushctx.drawImage(cache_brush_img, 0, 0); 162 163 updateBrushholder(brush.toDataURL(), brush.width, brush.height); 164 sketcher.setBrush(brush); 165 } else { 166 var brushimg = new Image(); 167 brushimg.src = new_brush_url; 168 cache_brush_url = new_brush_url; 169 brushimg.onload = function() { 170 cache_brush_img = brushimg; 171 172 //create brush 173 var brush = document.createElement('canvas'); 174 brush.width = brushimg.width; 175 brush.height = brushimg.height; 176 brushctx = brush.getContext('2d'); 177 178 //color brush 179 brushctx.fillStyle = selected_color; 180 brushctx.fillRect(0, 0, brush.width, brush.height); 181 brushctx.globalCompositeOperation = "destination-atop"; 182 brushctx.drawImage(cache_brush_img, 0, 0); 183 184 updateBrushholder(brush.toDataURL(), brush.width, brush.height); 185 sketcher.setBrush(brush); 186 } 187 } 188 } 189 190 function startCanvas() { 191 $canvas = $(CANVASID); 192 $brushholder = $('#brushholder').hide(); 193 194 canvas = document.getElementById(CANVASID); 195 ctx = canvas.getContext("2d"); 196 canvas.width = WIDTH; 197 canvas.height = HEIGHT; 198 199 $canvas.mouseover(function() { 200 if (sketcher.getEnabled()) { 201 $brushholder.show() 202 } 203 }); 204 $canvas.mouseout(function() { 205 $brushholder.hide() 206 }); 207 208 resetToRandomBGColor(); 209 210 sketcher = new Sketcher(CANVASID, null, $); 211 setBrushImage(DooodlVars.plugin_root + 'creator/images/brush_round_5.png'); 212 $(document).mousemove(onMousemove); 213 214 } 215 216 function onMousemove(e) { 217 $brushholder.css('top', e.clientY + "px").css('left', e.clientX); 218 } 219 220 function resetBG(color) { 221 ctx.fillStyle = color; 222 ctx.fillRect(0, 0, WIDTH, HEIGHT); 223 } 224 225 function rgbToHex(r, g, b) { 226 var hex = r.toString(16); 227 var hr = hex.length == 1 ? "0" + hex : hex; 228 229 hex = g.toString(16); 230 var hg = hex.length == 1 ? "0" + hex : hex; 231 232 hex = b.toString(16); 233 var hb = hex.length == 1 ? "0" + hex : hex; 234 235 return "#" + hr + hg + hb; 236 } 237 238 239 function hexToRgb(hex) { 240 var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex); 241 return result ? {
242 r: parseInt(result[1], 16), 243 g: parseInt(result[2], 16), 244 b: parseInt(result[3], 16) 245 } : null; 246 } 247 248})(jQuery)
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.