Roo.bootstrap.version = (
function() {
var ret=3;
- Roo.each(document.styleSheets[0], function(s) {
- if (s.href.match(/css-bootstrap4/)) {
+ Roo.each(document.styleSheets, function(s) {
+ if ( s.href && s.href.match(/css-bootstrap4/)) {
ret=4;
}
});
return ret;
-})();/*
+})(); /*
* - LGPL
*
* base class for bootstrap elements.
}
if (!settings[size]) { // 0 = hidden
- cfg.cls += ' hidden-' + size;
+ cfg.cls += ' hidden-' + size + ' hidden' + size + '-down';;
return;
}
- cfg.cls += ' col-' + size + '-' + settings[size];
+ cfg.cls += ' col-' + size + '-' + settings[size] + (
+ size == 'xs' ? (' col-' + settings[size] ) : '' // bs4 col-{num} replaces col-xs
+ );
});
this.addEvents({
/**
* @event beforeshow
- * Fires before this menu is displayed
+ * Fires before this menu is displayed (return false to block)
* @param {Roo.menu.Menu} this
*/
beforeshow : true,
/**
* @event beforehide
- * Fires before this menu is hidden
+ * Fires before this menu is hidden (return false to block)
* @param {Roo.menu.Menu} this
*/
beforehide : true,
isVisible : function(){
return !this.hidden;
},
- onMouseOut : function(e){
+ onMouseOut : function(e){
var t = this.findTargetItem(e);
//if(t ){
* the element (defaults to this.defaultAlign)
* @param {Roo.menu.Menu} parentMenu (optional) This menu's parent menu, if applicable (defaults to undefined)
*/
- show : function(el, pos, parentMenu){
- this.parentMenu = parentMenu;
+ show : function(el, pos, parentMenu)
+ {
+ if (false === this.fireEvent("beforeshow", this)) {
+ Roo.log("show canceled");
+ return;
+ }
+ this.parentMenu = parentMenu;
if(!this.el){
this.render();
}
- this.fireEvent("beforeshow", this);
+
this.showAt(this.el.getAlignToXY(el, pos || this.defaultAlign), parentMenu, false);
},
/**
*/
hide : function(deep)
{
-
+ if (false === this.fireEvent("beforehide", this)) {
+ Roo.log("hide canceled");
+ return;
+ }
this.hideMenuItems();
if(this.el && this.isVisible()){
- this.fireEvent("beforehide", this);
+
if(this.activeItem){
this.activeItem.deactivate();
this.activeItem = null;
if (!this.el) {
return;
}
- //$(backdrop).remove()
+
this.el.select('.open',true).each(function(aa) {
aa.removeClass('open');
- //var parent = getParent($(this))
- //var relatedTarget = { relatedTarget: this }
-
- //$parent.trigger(e = $.Event('hide.bs.dropdown', relatedTarget))
- //if (e.isDefaultPrevented()) return
- //$parent.removeClass('open').trigger('hidden.bs.dropdown', relatedTarget)
+
});
},
addxtypeChild : function (tree, cntr) {
* @cfg {Boolean} animate default true
* @cfg {Boolean} allow_close default true
* @cfg {Boolean} fitwindow default false
+ * @cfg {Number} width fixed width - usefull for chrome extension only really.
+ * @cfg {Number} height fixed height - usefull for chrome extension only really.
* @cfg {String} size (sm|lg) default empty
* @cfg {Number} max_width set the max width of modal
*
initEvents :function ()
{
//Roo.log(this.el.select('.navbar-toggle',true));
- this.el.select('.navbar-toggle',true).on('click', function() {
- if(this.fireEvent('beforetoggle', this) !== false){
- var ce = this.el.select('.navbar-collapse',true).first();
- ce.toggleClass('in'); // old...
- if (ce.hasClass('collapse')) {
- // show it...
- ce.removeClass('collapse');
- ce.addClass('show');
- var h = ce.getHeight();
- Roo.log(h);
- ce.removeClass('show');
- // at this point we should be able to see it..
- ce.addClass('collapsing');
-
- ce.setHeight(0); // resize it ...
- ce.on('transitionend', function() {
- Roo.log('done transition');
- ce.removeClass('collapsing');
- ce.addClass('show');
- ce.removeClass('collapse');
-
- ce.dom.style.height = '';
- }, this, { single: true} );
- ce.setHeight(h);
-
- } else {
- ce.setHeight(ce.getHeight());
- ce.removeClass('show');
- ce.addClass('collapsing');
-
- ce.on('transitionend', function() {
- ce.dom.style.height = '';
- ce.removeClass('collapsing');
- ce.addClass('collapse');
- }, this, { single: true} );
- ce.setHeight(0);
- }
- }
-
- }, this);
+ this.el.select('.navbar-toggle',true).on('click', this.onToggle , this);
var mark = {
tag: "div",
getChildContainer : function()
{
- if (this.el.select('.collapse').getCount()) {
+ if (this.el && this.el.select('.collapse').getCount()) {
return this.el.select('.collapse',true).first();
}
unmask : function()
{
this.maskEl.hide();
- }
+ },
+ onToggle : function()
+ {
+
+ if(this.fireEvent('beforetoggle', this) === false){
+ return;
+ }
+ var ce = this.el.select('.navbar-collapse',true).first();
+
+ if (!ce.hasClass('show')) {
+ this.expand();
+ } else {
+ this.collapse();
+ }
+
+
+ },
+ /**
+ * Expand the navbar pulldown
+ */
+ expand : function ()
+ {
+
+ var ce = this.el.select('.navbar-collapse',true).first();
+ if (ce.hasClass('collapsing')) {
+ return;
+ }
+ ce.dom.style.height = '';
+ // show it...
+ ce.addClass('in'); // old...
+ ce.removeClass('collapse');
+ ce.addClass('show');
+ var h = ce.getHeight();
+ Roo.log(h);
+ ce.removeClass('show');
+ // at this point we should be able to see it..
+ ce.addClass('collapsing');
+
+ ce.setHeight(0); // resize it ...
+ ce.on('transitionend', function() {
+ //Roo.log('done transition');
+ ce.removeClass('collapsing');
+ ce.addClass('show');
+ ce.removeClass('collapse');
+
+ ce.dom.style.height = '';
+ }, this, { single: true} );
+ ce.setHeight(h);
+ ce.dom.scrollTop = 0;
+ },
+ /**
+ * Collapse the navbar pulldown
+ */
+ collapse : function()
+ {
+ var ce = this.el.select('.navbar-collapse',true).first();
+
+ if (ce.hasClass('collapsing') || ce.hasClass('collapse') ) {
+ // it's collapsed or collapsing..
+ return;
+ }
+ ce.removeClass('in'); // old...
+ ce.setHeight(ce.getHeight());
+ ce.removeClass('show');
+ ce.addClass('collapsing');
+
+ ce.on('transitionend', function() {
+ ce.dom.style.height = '';
+ ce.removeClass('collapsing');
+ ce.addClass('collapse');
+ }, this, { single: true} );
+ ce.setHeight(0);
+ }
var cfg = {
tag : this.tag || 'div',
- cls : 'navbar navbar-expand-lg roo-navbar-simple'
+ cls : 'navbar roo-navbar-simple' //navbar-expand-lg ??
};
if (['light','white'].indexOf(this.weight) > -1) {
cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark';
// i'm not actually sure these are really used - normally we add a navGroup to a navbar
- //if (Roo.bootstrap.version == 4) {
- // return cfg;
- //}
+ if (Roo.bootstrap.version == 4 && this.xtype == 'NavSimplebar') {
+ return cfg;
+ }
+
+
+
cfg.cn = [
{
- cls: 'nav',
+ cls: 'nav nav-' + this.xtype,
tag : 'ul'
}
];
cn.push({
tag: 'div',
- cls: 'collapse navbar-collapse',
+ cls: Roo.bootstrap.version == 4 ? 'nav flex-row roo-navbar-collapse' : 'collapse navbar-collapse roo-navbar-collapse',
cn : []
});
if (['tabs','pills'].indexOf(this.type) != -1) {
cfg.cls += ' nav-' + this.type;
} else {
- cfg.cls += ' navbar-nav';
+ // trying to remove so header bar can right align top?
+ if (this.parent() && this.parent().xtype != 'NavHeaderbar') {
+ // do not use on header bar...
+ cfg.cls += ' navbar-nav';
+ }
}
+
} else {
if (['tabs','pills'].indexOf(this.type) != -1) {
cfg.cls += ' nav-' + this.type
tag: 'form',
cls: 'navbar-form form-inline'
};
-
+ //nav navbar-right ml-md-auto
if (this.align === 'right') {
cfg.cls += ' navbar-right ml-md-auto';
} else {
// if parent is a navbarheader....- and link is probably a '#' page ref.. then remove the expanded menu.
if (p.parentType == 'NavHeaderbar' && !this.menu) {
// remove the collapsed menu expand...
- p.parent().el.select('.navbar-collapse',true).removeClass('in');
+ p.parent().el.select('.roo-navbar-collapse',true).removeClass('in');
}
},
e.preventDefault();
}
- this.fireEvent('click', this);
+ this.fireEvent('click', this, e);
},
disable : function()
c.html = '<i class="glyphicon"></i>' + c.html;
}
+ // could use BS4 hidden-..-down
+
if(typeof(config.lgHeader) != 'undefined'){
- hh += '<span class="hidden-xs hidden-sm hidden-md">' + config.lgHeader + '</span>';
+ hh += '<span class="hidden-xs hidden-sm hidden-md ">' + config.lgHeader + '</span>';
}
if(typeof(config.mdHeader) != 'undefined'){
if(typeof(config[size]) == 'undefined'){
return;
}
-
+
if (!config[size]) { // 0 = hidden
- c.cls += ' hidden-' + size;
+ // BS 4 '0' is treated as hide that column and below.
+ c.cls += ' hidden-' + size + ' hidden' + size + '-down';
return;
}
- c.cls += ' col-' + size + '-' + config[size];
-
+ c.cls += ' col-' + size + '-' + config[size] + (
+ size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
+ );
+
+
});
header.cn.push(c)
return;
}
+
+
if (!config[size]) { // 0 = hidden
- td.cls += ' hidden-' + size;
+ // BS 4 '0' is treated as hide that column and below.
+ td.cls += ' hidden-' + size + ' hidden' + size + '-down';
return;
}
- td.cls += ' col-' + size + '-' + config[size];
+ td.cls += ' col-' + size + '-' + config[size] + (
+ size == 'xs' ? (' col-' + config[size] ) : '' // bs4 col-{num} replaces col-xs
+ );
+
});
url:this.getUrl(!isPost),
method: method,
params:isPost ? this.getParams() : null,
- isUpload: this.form.fileUpload
+ isUpload: this.form.fileUpload,
+ formData : this.form.formData
}));
this.uploadProgress();
* {@link Roo.bootstrap.DateField} and {@link Roo.bootstrap.ComboBox} are perfect examples of this.
* @cfg {String} triggerClass An additional CSS class used to style the trigger button. The trigger will always get the
* class 'x-form-trigger' by default and triggerClass will be <b>appended</b> if specified.
- * @cfg {String} caret (search|calendar) a fontawesome for the trigger icon see http://fortawesome.github.io/Font-Awesome/icons/
+ * @cfg {String} caret (search|calendar) BS3 only - carat fa name
* @constructor
* Create a new TriggerField.
tag :'span',
cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
cn : [
- caret,
+ Roo.bootstrap.version == 3 ? caret : '',
{
tag: 'span',
cls: 'combobox-clear',
params = params || {};
var result;
try {
- result = reader.readRecords(this.data);
+ result = reader.readRecords(params.data ? params.data :this.data);
}catch(e){
this.fireEvent("loadexception", this, arg, null, e);
callback.call(scope, null, arg, false);
* <pre><code>
[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
</code></pre>
- * @cfg {String} id (optional) The subscript within row Array that provides an ID for the Record
+
* @constructor
* Create a new JsonReader
* @param {Object} meta Metadata configuration options.
- * @param {Object} recordType Either an Array of field definition objects
+ * @param {Object|Array} recordType Either an Array of field definition objects
+ *
+ * @cfg {Array} fields Array of field definition objects
+ * @cfg {String} id Name of the property within a row object that contains a record identifier value.
* as specified to {@link Roo.data.Record#create},
* or an {@link Roo.data.Record} object
+ *
+ *
* created using {@link Roo.data.Record#create}.
*/
Roo.data.ArrayReader = function(meta, recordType){
- Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType);
+
+
+ Roo.data.ArrayReader.superclass.constructor.call(this, meta, recordType||meta.fields);
};
Roo.extend(Roo.data.ArrayReader, Roo.data.JsonReader, {
/**
* Create a data block containing Roo.data.Records from an XML document.
* @param {Object} o An Array of row objects which represents the dataset.
- * @return {Object} data A data block which is used by an Roo.data.Store object as
+ * @return {Object} A data block which is used by an {@link Roo.data.Store} object as
* a cache of Roo.data.Records.
*/
readRecords : function(o){
if(!this.multiple && this.showToggleBtn){
var caret = {
- tag: 'span',
- cls: 'caret'
+ cls: 'caret'
};
if (this.caret != false) {
tag :'span',
cls : 'input-group-addon input-group-append input-group-text btn dropdown-toggle',
cn : [
- caret,
+ Roo.bootstrap.version == 3 ? caret : '',
{
tag: 'span',
cls: 'combobox-clear',
html = this.cleanHtml(html);
// fix up the special chars.. normaly like back quotes in word...
// however we do not want to do this with chinese..
- html = html.replace(/([\x80-\uffff])/g, function (a, b) {
- var cc = b.charCodeAt();
- if (
+ html = html.replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]|[\u0080-\uFFFF]/g, function(match) {
+
+ var cc = match.charCodeAt();
+
+ // Get the character value, handling surrogate pairs
+ if (match.length == 2) {
+ // It's a surrogate pair, calculate the Unicode code point
+ var high = match.charCodeAt(0) - 0xD800;
+ var low = match.charCodeAt(1) - 0xDC00;
+ cc = (high * 0x400) + low + 0x10000;
+ } else if (
(cc >= 0x4E00 && cc < 0xA000 ) ||
(cc >= 0x3400 && cc < 0x4E00 ) ||
(cc >= 0xf900 && cc < 0xfb00 )
) {
- return b;
- }
- return "&#"+cc+";"
+ return match;
+ }
+
+ // No, use a numeric entity. Here we brazenly (and possibly mistakenly)
+ return "&#" + cc + ";";
+
+
});
+
+
+
if(this.owner.fireEvent('beforesync', this, html) !== false){
this.el.dom.value = html;
this.owner.fireEvent('sync', this, html);
var remove_keep_children= Roo.HtmlEditorCore.remove.indexOf(node.tagName.toLowerCase()) > -1;
+ // spans with no attributes - just remove them..
+ if ((!node.attributes || !node.attributes.length) && lcname == 'span') {
+ remove_keep_children = true;
+ }
+
// remove <a name=....> as rendering on yahoo mailer is borked with this.
// this will have to be flaged elsewhere - perhaps ablack=name... on the mailer..
}
if (!node.attributes || !node.attributes.length) {
+
+
+
+
this.cleanUpChildren(node);
return;
}
if (a.name == 'class') {
if (a.value.match(/^Mso/)) {
- node.className = '';
+ node.removeAttribute('class');
}
if (a.value.match(/^body$/)) {
- node.className = '';
+ node.removeAttribute('class');
}
continue;
}
*/
cleanWord : function(node)
{
-
-
if (!node) {
this.cleanWord(this.doc.body);
return;
}
+
+ if(
+ node.nodeName == 'SPAN' &&
+ !node.hasAttributes() &&
+ node.childNodes.length == 1 &&
+ node.firstChild.nodeName == "#text"
+ ) {
+ var textNode = node.firstChild;
+ node.removeChild(textNode);
+ if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
+ node.parentNode.insertBefore(node.ownerDocument.createTextNode(" "), node);
+ }
+ node.parentNode.insertBefore(textNode, node);
+ if (node.getAttribute('lang') != 'zh-CN') { // do not space pad on chinese characters..
+ node.parentNode.insertBefore(node.ownerDocument.createTextNode(" ") , node);
+ }
+ node.parentNode.removeChild(node);
+ }
+
if (node.nodeName == "#text") {
// clean up silly Windows -- stuff?
return;
}
// remove - but keep children..
- if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|font)/)) {
+ if (node.tagName.toLowerCase().match(/^(meta|link|\\?xml:|st1:|o:|v:|font)/)) {
while (node.childNodes.length) {
var cn = node.childNodes[0];
node.removeChild(cn);
node.parentNode.insertBefore(cn, node);
}
node.parentNode.removeChild(node);
- this.iterateChildren(node, this.cleanWord);
+ /// no need to iterate chidlren = it's got none..
+ //this.iterateChildren(node, this.cleanWord);
return;
}
// clean styles
* @class Roo.bootstrap.HtmlEditorToolbar1
* Basic Toolbar
*
+ * @example
* Usage:
*
new Roo.bootstrap.HtmlEditor({
}
-});/*
- * - LGPL
- *
- * Alert
- *
- */
-
-/**
+});/**
* @class Roo.bootstrap.Alert
* @extends Roo.bootstrap.Component
- * Bootstrap Alert class
+ * Bootstrap Alert class - shows an alert area box
+ * eg
+ * <div class="alert alert-danger" role="alert"><span class="fa fa-exclamation-triangle"></span><span class="sr-only">Error:</span>
+ Enter a valid email address
+</div>
+ * @licence LGPL
* @cfg {String} title The title of alert
* @cfg {String} html The content of alert
* @cfg {String} weight ( success | info | warning | danger )
}
});/**
-* This script refer to:
-* Title: Signature Pad
-* Author: szimek
-* Availability: https://github.com/szimek/signature_pad
-**/
-
-/**
* @class Roo.bootstrap.BezierSignature
* @extends Roo.bootstrap.Component
* Bootstrap BezierSignature class
- *
+ * This script refer to:
+ * Title: Signature Pad
+ * Author: szimek
+ * Availability: https://github.com/szimek/signature_pad
+ *
* @constructor
* Create a new BezierSignature
* @param {Object} config The config object
Roo.bootstrap.BezierSignature = function(config){
Roo.bootstrap.BezierSignature.superclass.constructor.call(this, config);
+ this.addEvents({
+ "resize" : true
+ });
};
-Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
+Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component,
+{
+
+ curve_data: [],
- _data: [],
+ is_empty: true,
- _isEmpty: true,
+ mouse_btn_down: true,
- _mouseButtonDown: true,
+ /**
+ * @cfg {int} canvas height
+ */
+ canvas_height: '200px',
/**
- * @cfg(float or function) Radius of a single dot.
+ * @cfg {float|function} Radius of a single dot.
*/
- dotSize: false,
+ dot_size: false,
/**
- * @cfg(float) Minimum width of a line. Defaults to 0.5.
+ * @cfg {float} Minimum width of a line. Defaults to 0.5.
*/
- minWidth: 0.5,
+ min_width: 0.5,
/**
- * @cfg(float) Maximum width of a line. Defaults to 2.5.
+ * @cfg {float} Maximum width of a line. Defaults to 2.5.
*/
- maxWidth: 2.5,
+ max_width: 2.5,
/**
- * @cfg(integer) Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
+ * @cfg {integer} Draw the next point at most once per every x milliseconds. Set it to 0 to turn off throttling. Defaults to 16.
*/
throttle: 16,
/**
- * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 5.
+ * @cfg {integer} Add the next point only if the previous one is farther than x pixels. Defaults to 5.
*/
- minDistance: 5,
+ min_distance: 5,
/**
- * @cfg(string) Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
+ * @cfg {string} Color used to clear the background. Can be any color format accepted by context.fillStyle. Defaults to "rgba(0,0,0,0)" (transparent black). Use a non-transparent color e.g. "rgb(255,255,255)" (opaque white) if you'd like to save signatures as JPEG images.
*/
- backgroundColor: 'rgba(0, 0, 0, 0)',
+ bg_color: 'rgba(0, 0, 0, 0)',
/**
- * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
+ * @cfg {string} Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black".
*/
- penColor: 'black',
+ dot_color: 'black',
/**
- * @cfg(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
- */
- velocityFilterWeight: 0.7,
+ * @cfg {float} Weight used to modify new velocity based on the previous velocity. Defaults to 0.7.
+ */
+ velocity_filter_weight: 0.7,
/**
- * @cfg(function) Callback when stroke begin.
+ * @cfg {function} Callback when stroke begin.
*/
onBegin: false,
/**
- * @cfg(function) Callback when stroke end.
+ * @cfg {function} Callback when stroke end.
*/
onEnd: false,
getAutoCreate : function()
{
- var cls = 'roo-signature';
+ var cls = 'roo-signature column';
if(this.cls){
cls += ' ' + this.cls;
}
+ var col_sizes = [
+ 'lg',
+ 'md',
+ 'sm',
+ 'xs'
+ ];
+
+ for(var i = 0; i < col_sizes.length; i++) {
+ if(this[col_sizes[i]]) {
+ cls += " col-"+col_sizes[i]+"-"+this[col_sizes[i]];
+ }
+ }
+
var cfg = {
tag: 'div',
cls: cls,
cn: [
{
tag: 'canvas',
- cls: 'roo-signature-body-canvas'
+ cls: 'roo-signature-body-canvas',
+ height: this.canvas_height,
+ width: this.canvas_width
}
]
+ },
+ {
+ tag: 'input',
+ type: 'file',
+ style: 'display: none'
}
]
};
canvas.dom.style.touchAction = 'none';
canvas.dom.style.msTouchAction = 'none';
- this._mouseButtonDown = false;
+ this.mouse_btn_down = false;
canvas.on('mousedown', this._handleMouseDown, this);
canvas.on('mousemove', this._handleMouseMove, this);
Roo.select('html').first().on('mouseup', this._handleMouseUp, this);
- if (window.ontouchstart) {
+ if (window.PointerEvent) {
+ canvas.on('pointerdown', this._handleMouseDown, this);
+ canvas.on('pointermove', this._handleMouseMove, this);
+ Roo.select('html').first().on('pointerup', this._handleMouseUp, this);
+ }
+
+ if ('ontouchstart' in window) {
canvas.on('touchstart', this._handleTouchStart, this);
canvas.on('touchmove', this._handleTouchMove, this);
canvas.on('touchend', this._handleTouchEnd, this);
}
+ Roo.EventManager.onWindowResize(this.resize, this, true);
+
+ // file input event
+ this.fileEl().on('change', this.uploadImage, this);
+
this.clear();
+
+ this.resize();
+ },
+
+ resize: function(){
+
+ var canvas = this.canvasEl().dom;
+ var ctx = this.canvasElCtx();
+ var img_data = false;
+
+ if(canvas.width > 0) {
+ var img_data = ctx.getImageData(0, 0, canvas.width, canvas.height);
+ }
+ // setting canvas width will clean img data
+ canvas.width = 0;
+
+ var style = window.getComputedStyle ?
+ getComputedStyle(this.el.dom, null) : this.el.dom.currentStyle;
+
+ var padding_left = parseInt(style.paddingLeft) || 0;
+ var padding_right = parseInt(style.paddingRight) || 0;
+
+ canvas.width = this.el.dom.clientWidth - padding_left - padding_right;
+
+ if(img_data) {
+ ctx.putImageData(img_data, 0, 0);
+ }
},
_handleMouseDown: function(e)
{
if (e.browserEvent.which === 1) {
- this._mouseButtonDown = true;
+ this.mouse_btn_down = true;
this.strokeBegin(e);
}
},
_handleMouseMove: function (e)
{
- if (this._mouseButtonDown) {
+ if (this.mouse_btn_down) {
this.strokeMoveUpdate(e);
}
},
_handleMouseUp: function (e)
{
- if (e.browserEvent.which === 1 && this._mouseButtonDown) {
- this._mouseButtonDown = false;
+ if (e.browserEvent.which === 1 && this.mouse_btn_down) {
+ this.mouse_btn_down = false;
this.strokeEnd(e);
}
},
_handleTouchStart: function (e) {
+
e.preventDefault();
if (e.browserEvent.targetTouches.length === 1) {
// var touch = e.browserEvent.changedTouches[0];
e.preventDefault();
// var touch = event.targetTouches[0];
// _this._strokeMoveUpdate(touch);
- this._strokeMoveUpdate(e);
+ this.strokeMoveUpdate(e);
},
_handleTouchEnd: function (e) {
reset: function () {
this._lastPoints = [];
this._lastVelocity = 0;
- this._lastWidth = (this.minWidth + this.maxWidth) / 2;
- this.canvasElCtx().fillStyle = this.penColor;
+ this._lastWidth = (this.min_width + this.max_width) / 2;
+ this.canvasElCtx().fillStyle = this.dot_color;
},
strokeMoveUpdate: function(e)
this.strokeUpdate(e);
if (this.throttle) {
- this.throttle(this.strokeUpdate, this.throttle);
+ this.throttleStroke(this.strokeUpdate, this.throttle);
}
else {
this.strokeUpdate(e);
strokeBegin: function(e)
{
var newPointGroup = {
- color: this.penColor,
+ color: this.dot_color,
points: []
};
this.onBegin(e);
}
- this._data.push(newPointGroup);
+ this.curve_data.push(newPointGroup);
this.reset();
this.strokeUpdate(e);
},
{
var rect = this.canvasEl().dom.getBoundingClientRect();
var point = new this.Point(e.xy[0] - rect.left, e.xy[1] - rect.top, new Date().getTime());
- var lastPointGroup = this._data[this._data.length - 1];
+ var lastPointGroup = this.curve_data[this.curve_data.length - 1];
var lastPoints = lastPointGroup.points;
var lastPoint = lastPoints.length > 0 && lastPoints[lastPoints.length - 1];
var isLastPointTooClose = lastPoint
- ? point.distanceTo(lastPoint) <= this.minDistance
+ ? point.distanceTo(lastPoint) <= this.min_distance
: false;
var color = lastPointGroup.color;
if (!lastPoint || !(lastPoint && isLastPointTooClose)) {
},
calculateCurveWidths: function (startPoint, endPoint) {
- var velocity = this.velocityFilterWeight * endPoint.velocityFrom(startPoint) +
- (1 - this.velocityFilterWeight) * this._lastVelocity;
+ var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) +
+ (1 - this.velocity_filter_weight) * this._lastVelocity;
- var newWidth = Math.max(this.maxWidth / (velocity + 1), this.minWidth);
+ var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width);
var widths = {
end: newWidth,
start: this._lastWidth
drawDot: function (_a) {
var color = _a.color, point = _a.point;
var ctx = this.canvasElCtx();
- var width = typeof this.dotSize === 'function' ? this.dotSize() : this.dotSize;
+ var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size;
ctx.beginPath();
this.drawCurveSegment(point.x, point.y, width);
ctx.closePath();
var ctx = this.canvasElCtx();
ctx.moveTo(x, y);
ctx.arc(x, y, width, 0, 2 * Math.PI, false);
- this._isEmpty = false;
+ this.is_empty = false;
},
clear: function()
{
var ctx = this.canvasElCtx();
var canvas = this.canvasEl().dom;
- ctx.fillStyle = this.backgroundColor;
+ ctx.fillStyle = this.bg_color;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillRect(0, 0, canvas.width, canvas.height);
- this._data = [];
+ this.curve_data = [];
this.reset();
- this._isEmpty = true;
+ this.is_empty = true;
+ },
+
+ fileEl: function()
+ {
+ return this.el.select('input',true).first();
},
canvasEl: function()
getImage: function(type)
{
- if(this._isEmpty) {
+ if(this.is_empty) {
return false;
}
// encryption ?
- return this.canvasEl().dom.toDataURL('image/'+type, false);
+ return this.canvasEl().dom.toDataURL('image/'+type, 1);
},
drawFromImage: function(img_src)
{
var img = new Image();
+ img.onload = function(){
+ this.canvasElCtx().drawImage(img, 0, 0);
+ }.bind(this);
+
img.src = img_src;
- this.canvasElCtx().drawImage(img, 0, 0);
+ this.is_empty = false;
+ },
+
+ selectImage: function()
+ {
+ this.fileEl().dom.click();
+ },
+
+ uploadImage: function(e)
+ {
+ var reader = new FileReader();
+
+ reader.onload = function(e){
+ var img = new Image();
+ img.onload = function(){
+ this.reset();
+ this.canvasElCtx().drawImage(img, 0, 0);
+ }.bind(this);
+ img.src = e.target.result;
+ }.bind(this);
+
+ reader.readAsDataURL(e.target.files[0]);
},
// Bezier Point Constructor
return Bezier;
}()),
- throttle: function(fn, wait) {
+ throttleStroke: function(fn, wait) {
if (wait === void 0) { wait = 250; }
var previous = 0;
var timeout = null;