mirror of https://github.com/luileito/jsketch.git
Enforce single quotes
This commit is contained in:
parent
fad61979e4
commit
1cef44c5e5
|
|
@ -17,7 +17,7 @@
|
|||
*/
|
||||
;(function($){
|
||||
// Custom namespace ID.
|
||||
var _ns = "sketchable";
|
||||
var _ns = 'sketchable';
|
||||
/**
|
||||
* jQuery sketchable plugin API.
|
||||
* @namespace methods
|
||||
|
|
@ -40,12 +40,12 @@
|
|||
if (!data) {
|
||||
// Attach event listeners.
|
||||
if (options.interactive) {
|
||||
elem.bind("mousedown", mousedownHandler);
|
||||
elem.bind("mousemove", mousemoveHandler);
|
||||
elem.bind("mouseup", mouseupHandler);
|
||||
elem.bind("touchstart", touchdownHandler);
|
||||
elem.bind("touchmove", touchmoveHandler);
|
||||
elem.bind("touchend", touchupHandler);
|
||||
elem.bind('mousedown', mousedownHandler);
|
||||
elem.bind('mousemove', mousemoveHandler);
|
||||
elem.bind('mouseup', mouseupHandler);
|
||||
elem.bind('touchstart', touchdownHandler);
|
||||
elem.bind('touchmove', touchmoveHandler);
|
||||
elem.bind('touchend', touchupHandler);
|
||||
// Fix Chrome "bug".
|
||||
this.onselectstart = function(){ return false };
|
||||
}
|
||||
|
|
@ -174,12 +174,12 @@
|
|||
return this.each(function(){
|
||||
var elem = $(this), data = elem.data(_ns) || {}, options = data.options;
|
||||
if (options.interactive) {
|
||||
elem.unbind("mouseup", mouseupHandler);
|
||||
elem.unbind("mousemove", mousemoveHandler);
|
||||
elem.unbind("mousedown", mousedownHandler);
|
||||
elem.unbind("touchstart", touchdownHandler);
|
||||
elem.unbind("touchmove", touchmoveHandler);
|
||||
elem.unbind("touchend", touchupHandler);
|
||||
elem.unbind('mouseup', mouseupHandler);
|
||||
elem.unbind('mousemove', mousemoveHandler);
|
||||
elem.unbind('mousedown', mousedownHandler);
|
||||
elem.unbind('touchstart', touchdownHandler);
|
||||
elem.unbind('touchmove', touchmoveHandler);
|
||||
elem.unbind('touchend', touchupHandler);
|
||||
}
|
||||
elem.removeData(_ns);
|
||||
|
||||
|
|
@ -209,7 +209,7 @@
|
|||
$.fn.sketchable = function(method) {
|
||||
// These "magic" keywords return internal plugin methods,
|
||||
// so that they can be easily extended/overriden.
|
||||
if ("methods functions hooks".split(" ").indexOf(method) > -1) {
|
||||
if ('methods functions hooks'.split(' ').indexOf(method) > -1) {
|
||||
return methods;
|
||||
} else if (methods[method]) {
|
||||
return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
|
||||
|
|
@ -247,8 +247,8 @@
|
|||
* lineWidth: 3,
|
||||
* strokeStyle: '#F0F',
|
||||
* fillStyle: '#F0F',
|
||||
* lineCap: "round",
|
||||
* lineJoin: "round",
|
||||
* lineCap: 'round',
|
||||
* lineJoin: 'round',
|
||||
* miterLimit: 10
|
||||
* }
|
||||
* });
|
||||
|
|
@ -279,8 +279,8 @@
|
|||
lineWidth: 3,
|
||||
strokeStyle: '#F0F',
|
||||
fillStyle: '#F0F',
|
||||
lineCap: "round",
|
||||
lineJoin: "round",
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
miterLimit: 10
|
||||
}
|
||||
};
|
||||
|
|
@ -292,7 +292,7 @@
|
|||
if (!options) options = elem.data(_ns).options;
|
||||
if (options.cssCursors) {
|
||||
// Visually indicate whether this element is interactive or not.
|
||||
elem[0].style.cursor = options.interactive ? "pointer" : "not-allowed";
|
||||
elem[0].style.cursor = options.interactive ? 'pointer' : 'not-allowed';
|
||||
}
|
||||
};
|
||||
|
||||
|
|
|
|||
|
|
@ -140,8 +140,8 @@
|
|||
* @memberOf MementoCanvas
|
||||
*/
|
||||
this.init = function() {
|
||||
$(document).off("keypress", keyManager);
|
||||
$(document).on("keypress", keyManager);
|
||||
$(document).off('keypress', keyManager);
|
||||
$(document).on('keypress', keyManager);
|
||||
};
|
||||
/**
|
||||
* Destroy instance.
|
||||
|
|
@ -149,14 +149,14 @@
|
|||
* @memberOf MementoCanvas
|
||||
*/
|
||||
this.destroy = function() {
|
||||
$(document).off("keypress", keyManager);
|
||||
$(document).off('keypress', keyManager);
|
||||
this.reset();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
// Bind plugin extension ////////////////////////////////////////////////////
|
||||
var namespace = "sketchable";
|
||||
var namespace = 'sketchable';
|
||||
var plugin = $.fn.sketchable;
|
||||
var availMethods = plugin('methods');
|
||||
|
||||
|
|
@ -200,7 +200,7 @@
|
|||
|
||||
// Event order matters.
|
||||
// Init must go first, since it's called when instantiating the plugin.
|
||||
var events = 'init mouseup clear destroy'.split(" ");
|
||||
var events = 'init mouseup clear destroy'.split(' ');
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
override(events[i]);
|
||||
}
|
||||
|
|
|
|||
73
jsketch.js
73
jsketch.js
|
|
@ -1,5 +1,5 @@
|
|||
/*!
|
||||
* jSketch 0.8 | Luis A. Leiva | MIT license
|
||||
* jSketch 0.9 | Luis A. Leiva | MIT license
|
||||
* A simple JavaScript library for drawing facilities on HTML5 canvas.
|
||||
*/
|
||||
/**
|
||||
|
|
@ -8,8 +8,7 @@
|
|||
* such as function chainability and old-school AS3-like notation.
|
||||
* @name jSketch
|
||||
* @class
|
||||
* @version 0.8
|
||||
* @date 9 Jul 2014
|
||||
* @version 0.9
|
||||
* @author Luis A. Leiva
|
||||
* @license MIT license
|
||||
* @example
|
||||
|
|
@ -21,17 +20,17 @@
|
|||
* // Switching between contexts removes the need of having to reinstantiate the jSketch class.
|
||||
* brush.context(canvas2).beginFill('#5F7').fillCircle(30,30,8).endFill();
|
||||
*/
|
||||
;(function(window){
|
||||
;(function(window) {
|
||||
/**
|
||||
* @constructor
|
||||
* @param {Object} elem - MUST be a DOM element
|
||||
* @param {Object} options - Configuration
|
||||
*/
|
||||
var jSketch = function(elem, options){
|
||||
var jSketch = function(elem, options) {
|
||||
return new Sketch(elem, options);
|
||||
};
|
||||
// Base class, private.
|
||||
var Sketch = function(elem, options){
|
||||
var Sketch = function(elem, options) {
|
||||
// Although discouraged, we can instantiate the class without arguments.
|
||||
if (!elem) return;
|
||||
// Set drawing context first.
|
||||
|
|
@ -60,10 +59,10 @@
|
|||
* @memberof jSketch
|
||||
*/
|
||||
context: function(elem) {
|
||||
if (elem === null) throw("No canvas element specified.");
|
||||
if (elem === null) throw('No canvas element specified.');
|
||||
// Save shortcuts: canvas (DOM elem) & graphics (2D canvas context).
|
||||
this.canvas = elem;
|
||||
this.graphics = elem.getContext("2d");
|
||||
this.graphics = elem.getContext('2d');
|
||||
// Always allow chainability.
|
||||
return this;
|
||||
},
|
||||
|
|
@ -100,7 +99,7 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
size: function(width,height) {
|
||||
size: function(width, height) {
|
||||
this.stageWidth = width;
|
||||
this.stageHeight = height;
|
||||
this.canvas.width = width;
|
||||
|
|
@ -117,7 +116,7 @@
|
|||
*/
|
||||
background: function(color) {
|
||||
this.beginFill(color);
|
||||
this.graphics.fillRect(0,0,this.stageWidth,this.stageHeight);
|
||||
this.graphics.fillRect(0,0, this.stageWidth,this.stageHeight);
|
||||
this.endFill();
|
||||
return this;
|
||||
},
|
||||
|
|
@ -129,7 +128,7 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
stage: function(width,height,bgcolor) {
|
||||
stage: function(width, height, bgcolor) {
|
||||
this.size(width,height).background(bgcolor);
|
||||
return this;
|
||||
},
|
||||
|
|
@ -163,7 +162,7 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
lineStyle: function(color,thickness,capStyle,joinStyle,miter) {
|
||||
lineStyle: function(color, thickness, capStyle, joinStyle, miter) {
|
||||
var options = {
|
||||
strokeStyle: color || this.graphics.strokeStyle,
|
||||
lineWidth: thickness || this.graphics.lineWidth,
|
||||
|
|
@ -182,7 +181,7 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
moveTo: function(x,y) {
|
||||
moveTo: function(x, y) {
|
||||
this.graphics.moveTo(x,y);
|
||||
return this;
|
||||
},
|
||||
|
|
@ -193,7 +192,7 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
lineTo: function(x,y) {
|
||||
lineTo: function(x, y) {
|
||||
this.graphics.lineTo(x,y);
|
||||
return this;
|
||||
},
|
||||
|
|
@ -206,7 +205,7 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
line: function(x1,y1,x2,y2) {
|
||||
line: function(x1,y1, x2,y2) {
|
||||
this.graphics.moveTo(x1,y1);
|
||||
this.lineTo(x2,y2);
|
||||
return this;
|
||||
|
|
@ -220,8 +219,8 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
curveTo: function(x,y,cpx,cpy) {
|
||||
this.graphics.quadraticCurveTo(cpx,cpy,x,y);
|
||||
curveTo: function(x,y, cpx,cpy) {
|
||||
this.graphics.quadraticCurveTo(cpx,cpy, x,y);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
|
|
@ -235,9 +234,9 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
curve: function(x1,y1,x2,y2,cpx,cpy) {
|
||||
curve: function(x1,y1, x2,y2, cpx,cpy) {
|
||||
this.graphics.moveTo(x1,y1);
|
||||
this.curveTo(x2,y2,cpx,cpy);
|
||||
this.curveTo(x2,y2, cpx,cpy);
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
|
|
@ -258,9 +257,9 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
strokeRect: function(x,y,width,height) {
|
||||
strokeRect: function(x,y, width,height) {
|
||||
this.graphics.beginPath();
|
||||
this.graphics.strokeRect(x,y,width,height);
|
||||
this.graphics.strokeRect(x,y, width,height);
|
||||
this.graphics.closePath();
|
||||
return this;
|
||||
},
|
||||
|
|
@ -273,9 +272,9 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
fillRect: function(x,y,width,height) {
|
||||
fillRect: function(x,y, width,height) {
|
||||
this.graphics.beginPath();
|
||||
this.graphics.fillRect(x,y,width,height);
|
||||
this.graphics.fillRect(x,y, width,height);
|
||||
this.graphics.closePath();
|
||||
return this;
|
||||
},
|
||||
|
|
@ -287,9 +286,9 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
strokeCircle: function(x,y,radius) {
|
||||
strokeCircle: function(x,y, radius) {
|
||||
this.graphics.beginPath();
|
||||
this.graphics.arc(x,y, radius, 0, Math.PI * 2, false);
|
||||
this.graphics.arc(x,y, radius, 0, 2*Math.PI, false);
|
||||
this.graphics.stroke();
|
||||
this.graphics.closePath();
|
||||
return this;
|
||||
|
|
@ -302,9 +301,9 @@
|
|||
* @return jSketch
|
||||
* @memberof jSketch
|
||||
*/
|
||||
fillCircle: function(x,y,radius) {
|
||||
fillCircle: function(x,y, radius) {
|
||||
this.graphics.beginPath();
|
||||
this.graphics.arc(x,y, radius, 0, Math.PI * 2, false);
|
||||
this.graphics.arc(x,y, radius, 0, 2*Math.PI, false);
|
||||
this.graphics.fill();
|
||||
this.graphics.closePath();
|
||||
return this;
|
||||
|
|
@ -313,11 +312,17 @@
|
|||
* Experimental.
|
||||
* @ignore
|
||||
*/
|
||||
radialCircle: function(x,y,radius,glowSize,color1,color2) {
|
||||
var g = this.graphics.createRadialGradient(x,y,radius,x,y, glowSize || 5);
|
||||
g.addColorStop(0, color1 || this.graphics.fillStyle);
|
||||
g.addColorStop(1, color2 || 'white');
|
||||
this.beginFill(g).fillCircle(x,y,radius).endFill();
|
||||
radialCircle: function(x,y, radius, glowSize, colors) {
|
||||
var g = this.graphics.createRadialGradient(x,y, radius, x,y, glowSize || 5);
|
||||
if (colors.constructor.name !== 'array') {
|
||||
colors = [this.graphics.fillStyle, 'white'];
|
||||
} else {
|
||||
for (var s = 0; s < colors.length; s++) {
|
||||
var color = colors[i];
|
||||
g.addColorStop(i, color);
|
||||
}
|
||||
}
|
||||
this.beginFill(g).fillCircle(x,y, radius).endFill();
|
||||
return this;
|
||||
},
|
||||
/**
|
||||
|
|
@ -348,7 +353,7 @@
|
|||
*/
|
||||
eraser: function(brushSize) {
|
||||
if (typeof brushSize === 'undefined') brushSize = 15;
|
||||
this.graphics.globalCompositeOperation = "destination-out";
|
||||
this.graphics.globalCompositeOperation = 'destination-out';
|
||||
this.lineStyle(null, brushSize);
|
||||
return this;
|
||||
},
|
||||
|
|
@ -360,7 +365,7 @@
|
|||
*/
|
||||
pencil: function(brushSize) {
|
||||
if (typeof brushSize === 'undefined') brushSize = 2;
|
||||
this.graphics.globalCompositeOperation = "source-over";
|
||||
this.graphics.globalCompositeOperation = 'source-over';
|
||||
this.lineStyle(null, brushSize);
|
||||
return this;
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
*/
|
||||
;(function(window){
|
||||
// Custom namespace ID.
|
||||
var _ns = "sketchable";
|
||||
var _ns = 'sketchable';
|
||||
/**
|
||||
* Creates a <tt>sketchable</tt> instance.
|
||||
* This is a plugin for the <tt>jSketch</tt> drawing class.
|
||||
|
|
@ -66,18 +66,18 @@
|
|||
if (!data) {
|
||||
// Attach event listeners.
|
||||
if (options.interactive) {
|
||||
Event.add(elem, "mousedown", mousedownHandler);
|
||||
Event.add(elem, "mousemove", mousemoveHandler);
|
||||
Event.add(elem, "mouseup", mouseupHandler);
|
||||
Event.add(elem, "touchstart", touchdownHandler);
|
||||
Event.add(elem, "touchmove", touchmoveHandler);
|
||||
Event.add(elem, "touchend", touchupHandler);
|
||||
Event.add(elem, 'mousedown', mousedownHandler);
|
||||
Event.add(elem, 'mousemove', mousemoveHandler);
|
||||
Event.add(elem, 'mouseup', mouseupHandler);
|
||||
Event.add(elem, 'touchstart', touchdownHandler);
|
||||
Event.add(elem, 'touchmove', touchmoveHandler);
|
||||
Event.add(elem, 'touchend', touchupHandler);
|
||||
// Fix Chrome "bug".
|
||||
this.onselectstart = function(){ return false };
|
||||
}
|
||||
if (options.cssCursors) {
|
||||
// Visually indicate whether this element is interactive or not.
|
||||
elem.style.cursor = options.interactive ? "pointer" : "not-allowed";
|
||||
elem.style.cursor = options.interactive ? 'pointer' : 'not-allowed';
|
||||
}
|
||||
}
|
||||
var sketch = new jSketch(elem, options.graphics);
|
||||
|
|
@ -196,12 +196,12 @@
|
|||
destroy: function() {
|
||||
var elem = this.elem, data = dataBind(elem)[_ns], options = data.options;
|
||||
if (options.interactive) {
|
||||
Event.remove(elem, "mouseup", mouseupHandler);
|
||||
Event.remove(elem, "mousemove", mousemoveHandler);
|
||||
Event.remove(elem, "mousedown", mousedownHandler);
|
||||
Event.remove(elem, "touchstart", touchdownHandler);
|
||||
Event.remove(elem, "touchmove", touchmoveHandler);
|
||||
Event.remove(elem, "touchend", touchupHandler);
|
||||
Event.remove(elem, 'mouseup', mouseupHandler);
|
||||
Event.remove(elem, 'mousemove', mousemoveHandler);
|
||||
Event.remove(elem, 'mousedown', mousedownHandler);
|
||||
Event.remove(elem, 'touchstart', touchdownHandler);
|
||||
Event.remove(elem, 'touchmove', touchmoveHandler);
|
||||
Event.remove(elem, 'touchend', touchupHandler);
|
||||
}
|
||||
dataBind(elem)[_ns] = null;
|
||||
|
||||
|
|
@ -239,8 +239,8 @@
|
|||
* lineWidth: 3,
|
||||
* strokeStyle: '#F0F',
|
||||
* fillStyle: '#F0F',
|
||||
* lineCap: "round",
|
||||
* lineJoin: "round",
|
||||
* lineCap: 'round',
|
||||
* lineJoin: 'round',
|
||||
* miterLimit: 10
|
||||
* }
|
||||
* });
|
||||
|
|
@ -271,8 +271,8 @@
|
|||
lineWidth: 3,
|
||||
strokeStyle: '#F0F',
|
||||
fillStyle: '#F0F',
|
||||
lineCap: "round",
|
||||
lineJoin: "round",
|
||||
lineCap: 'round',
|
||||
lineJoin: 'round',
|
||||
miterLimit: 10
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -131,8 +131,8 @@
|
|||
* @memberOf MementoCanvas
|
||||
*/
|
||||
this.init = function() {
|
||||
Event.remove(document, "keypress", keyManager);
|
||||
Event.add(document, "keypress", keyManager);
|
||||
Event.remove(document, 'keypress', keyManager);
|
||||
Event.add(document, 'keypress', keyManager);
|
||||
};
|
||||
/**
|
||||
* Destroy instance.
|
||||
|
|
@ -140,14 +140,14 @@
|
|||
* @memberOf MementoCanvas
|
||||
*/
|
||||
this.destroy = function() {
|
||||
Event.remove(document, "keypress", keyManager);
|
||||
Event.remove(document, 'keypress', keyManager);
|
||||
this.reset();
|
||||
};
|
||||
|
||||
};
|
||||
|
||||
// Bind plugin extension ////////////////////////////////////////////////////
|
||||
var namespace = "sketchable";
|
||||
var namespace = 'sketchable';
|
||||
var availMethods = Sketchable.fn;
|
||||
var defaults = Sketchable.fn.defaults;
|
||||
|
||||
|
|
@ -191,7 +191,7 @@
|
|||
|
||||
// Event order matters.
|
||||
// Init must go first, since it's called when instantiating the plugin.
|
||||
var events = 'init mouseup clear destroy'.split(" ");
|
||||
var events = 'init mouseup clear destroy'.split(' ');
|
||||
for (var i = 0; i < events.length; i++) {
|
||||
override(events[i]);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue