X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=8495ec6d4a61288aaaf0a0c53a00438281cb180a;hb=aed320dbd326776ca3260820e7fc5096b5ad695e;hp=1d33a0d8ac170909eedf8245537d9206bd48251d;hpb=d736cecf8309bdb4193ba84b0a9900afa337db41;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 1d33a0d8ac..8495ec6d4a 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -2060,13 +2060,13 @@ Roo.bootstrap.Menu = function(config){ 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, @@ -2268,7 +2268,7 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { isVisible : function(){ return !this.hidden; }, - onMouseOut : function(e){ + onMouseOut : function(e){ var t = this.findTargetItem(e); //if(t ){ @@ -2288,12 +2288,17 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { * 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); }, /** @@ -2356,10 +2361,13 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { */ 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; @@ -2426,16 +2434,11 @@ Roo.extend(Roo.bootstrap.Menu, Roo.bootstrap.Component, { 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) { @@ -3875,46 +3878,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, { 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", @@ -3936,7 +3900,7 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, { getChildContainer : function() { - if (this.el.select('.collapse').getCount()) { + if (this.el && this.el.select('.collapse').getCount()) { return this.el.select('.collapse',true).first(); } @@ -3951,8 +3915,80 @@ Roo.extend(Roo.bootstrap.Navbar, Roo.bootstrap.Component, { 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); + } @@ -5125,7 +5161,7 @@ Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem, { e.preventDefault(); } - this.fireEvent('click', this); + this.fireEvent('click', this, e); }, disable : function() @@ -7903,7 +7939,8 @@ Roo.extend(Roo.form.Action.Submit, Roo.form.Action, { 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(); @@ -12378,7 +12415,7 @@ Roo.extend(Roo.data.MemoryProxy, Roo.data.DataProxy, { 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); @@ -12985,24 +13022,31 @@ var myReader = new Roo.data.ArrayReader({ *
[ [1, 'Bill', 'Gardener'], [2, 'Ben', 'Horticulturalist'] ]
- * @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){
@@ -41518,30 +41562,38 @@ Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, {
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, {
- _data: [],
+ curve_data: [],
- _isEmpty: true,
+ is_empty: true,
- _mouseButtonDown: true,
+ mouse_btn_down: true,
+
+ /**
+ * @cfg(int) canvas height
+ */
+ canvas_height: '200px',
/**
* @cfg(float or function) Radius of a single dot.
*/
- dotSize: false,
+ dot_size: false,
/**
* @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.
*/
- 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.
@@ -41551,22 +41603,22 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
/**
* @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.
*/
- 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".
*/
- 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,
+ velocity_filter_weight: 0.7,
/**
* @cfg(function) Callback when stroke begin.
@@ -41580,12 +41632,25 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
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,
@@ -41596,9 +41661,16 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
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'
}
]
};
@@ -41616,44 +41688,78 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
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 = 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;
+
+ 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];
@@ -41667,7 +41773,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
e.preventDefault();
// var touch = event.targetTouches[0];
// _this._strokeMoveUpdate(touch);
- this._strokeMoveUpdate(e);
+ this.strokeMoveUpdate(e);
},
_handleTouchEnd: function (e) {
@@ -41683,8 +41789,8 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
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)
@@ -41702,7 +41808,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
strokeBegin: function(e)
{
var newPointGroup = {
- color: this.penColor,
+ color: this.dot_color,
points: []
};
@@ -41710,7 +41816,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
this.onBegin(e);
}
- this._data.push(newPointGroup);
+ this.curve_data.push(newPointGroup);
this.reset();
this.strokeUpdate(e);
},
@@ -41719,11 +41825,11 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
{
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)) {
@@ -41766,10 +41872,10 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
},
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
@@ -41783,7 +41889,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
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();
@@ -41824,19 +41930,24 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
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()
@@ -41851,21 +41962,46 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, {
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