X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=2bcdb19dde0eb834e6dfd7d39b58a0901318512f;hb=09d3b20ba7ed4d92dbb8b83010d73c54968138d0;hp=dd82b3bbb36048c25a992c62328d3e524ca9da2d;hpb=063258dd7fa45342eb15f4ae19998597affc2e81;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index dd82b3bbb3..2bcdb19dde 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, @@ -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) { @@ -3936,7 +3939,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(); } @@ -5125,7 +5128,7 @@ Roo.extend(Roo.bootstrap.NavSidebarItem, Roo.bootstrap.NavItem, { e.preventDefault(); } - this.fireEvent('click', this); + this.fireEvent('click', this, e); }, disable : function() @@ -7903,7 +7906,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 +12382,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); @@ -12990,12 +12994,16 @@ var myReader = new Roo.data.ArrayReader({ * Create a new JsonReader * @param {Object} meta Metadata configuration options. * @param {Object} 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, { @@ -41518,30 +41526,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 +41567,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 +41596,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 +41625,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 +41652,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 +41737,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 +41753,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 +41772,7 @@ Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, { strokeBegin: function(e) { var newPointGroup = { - color: this.penColor, + color: this.dot_color, points: [] }; @@ -41710,7 +41780,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 +41789,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 +41836,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 +41853,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 +41894,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,23 +41926,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; - Roo.log(img); + 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); - this.canvasElCtx().drawImage(img, 0, 0); + reader.readAsDataURL(e.target.files[0]); }, // Bezier Point Constructor