X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=2bcdb19dde0eb834e6dfd7d39b58a0901318512f;hb=09d3b20ba7ed4d92dbb8b83010d73c54968138d0;hp=0fae497ca4962016b4145cb2aa0336f870ab26b9;hpb=46068cd58eef522565ed1729d1171d5ff2aab292;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 0fae497ca4..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, { @@ -41499,4 +41507,598 @@ Roo.extend(Roo.bootstrap.MoneyField, Roo.bootstrap.ComboBox, { return this.el.select('input.hidden-number-input',true).first(); } -}); \ No newline at end of file +});/** +* 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 + * + * @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, { + + curve_data: [], + + is_empty: true, + + mouse_btn_down: true, + + /** + * @cfg(int) canvas height + */ + canvas_height: '200px', + + /** + * @cfg(float or function) Radius of a single dot. + */ + dot_size: false, + + /** + * @cfg(float) Minimum width of a line. Defaults to 0.5. + */ + min_width: 0.5, + + /** + * @cfg(float) Maximum width of a line. Defaults to 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. + */ + throttle: 16, + + /** + * @cfg(integer) Add the next point only if the previous one is farther than x pixels. Defaults to 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. + */ + 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". + */ + dot_color: 'black', + + /** + * @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. + */ + onBegin: false, + + /** + * @cfg(function) Callback when stroke end. + */ + onEnd: false, + + getAutoCreate : function() + { + 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: 'div', + cls: 'roo-signature-body', + cn: [ + { + tag: 'canvas', + cls: 'roo-signature-body-canvas', + height: this.canvas_height, + width: this.canvas_width + } + ] + }, + { + tag: 'input', + type: 'file', + style: 'display: none' + } + ] + }; + + return cfg; + }, + + initEvents: function() + { + Roo.bootstrap.BezierSignature.superclass.initEvents.call(this); + + var canvas = this.canvasEl(); + + // mouse && touch event swapping... + canvas.dom.style.touchAction = 'none'; + canvas.dom.style.msTouchAction = 'none'; + + 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.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.mouse_btn_down = true; + this.strokeBegin(e); + } + }, + + _handleMouseMove: function (e) + { + if (this.mouse_btn_down) { + this.strokeMoveUpdate(e); + } + }, + + _handleMouseUp: function (e) + { + 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]; + // this.strokeBegin(touch); + + this.strokeBegin(e); // assume e catching the correct xy... + } + }, + + _handleTouchMove: function (e) { + e.preventDefault(); + // var touch = event.targetTouches[0]; + // _this._strokeMoveUpdate(touch); + this.strokeMoveUpdate(e); + }, + + _handleTouchEnd: function (e) { + var wasCanvasTouched = e.target === this.canvasEl().dom; + if (wasCanvasTouched) { + e.preventDefault(); + // var touch = event.changedTouches[0]; + // _this._strokeEnd(touch); + this.strokeEnd(e); + } + }, + + reset: function () { + this._lastPoints = []; + this._lastVelocity = 0; + 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); + } + else { + this.strokeUpdate(e); + } + }, + + strokeBegin: function(e) + { + var newPointGroup = { + color: this.dot_color, + points: [] + }; + + if (typeof this.onBegin === 'function') { + this.onBegin(e); + } + + this.curve_data.push(newPointGroup); + this.reset(); + this.strokeUpdate(e); + }, + + strokeUpdate: function(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.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.min_distance + : false; + var color = lastPointGroup.color; + if (!lastPoint || !(lastPoint && isLastPointTooClose)) { + var curve = this.addPoint(point); + if (!lastPoint) { + this.drawDot({color: color, point: point}); + } + else if (curve) { + this.drawCurve({color: color, curve: curve}); + } + lastPoints.push({ + time: point.time, + x: point.x, + y: point.y + }); + } + }, + + strokeEnd: function(e) + { + this.strokeUpdate(e); + if (typeof this.onEnd === 'function') { + this.onEnd(e); + } + }, + + addPoint: function (point) { + var _lastPoints = this._lastPoints; + _lastPoints.push(point); + if (_lastPoints.length > 2) { + if (_lastPoints.length === 3) { + _lastPoints.unshift(_lastPoints[0]); + } + var widths = this.calculateCurveWidths(_lastPoints[1], _lastPoints[2]); + var curve = this.Bezier.fromPoints(_lastPoints, widths, this); + _lastPoints.shift(); + return curve; + } + return null; + }, + + calculateCurveWidths: function (startPoint, endPoint) { + var velocity = this.velocity_filter_weight * endPoint.velocityFrom(startPoint) + + (1 - this.velocity_filter_weight) * this._lastVelocity; + + var newWidth = Math.max(this.max_width / (velocity + 1), this.min_width); + var widths = { + end: newWidth, + start: this._lastWidth + }; + + this._lastVelocity = velocity; + this._lastWidth = newWidth; + return widths; + }, + + drawDot: function (_a) { + var color = _a.color, point = _a.point; + var ctx = this.canvasElCtx(); + var width = typeof this.dot_size === 'function' ? this.dot_size() : this.dot_size; + ctx.beginPath(); + this.drawCurveSegment(point.x, point.y, width); + ctx.closePath(); + ctx.fillStyle = color; + ctx.fill(); + }, + + drawCurve: function (_a) { + var color = _a.color, curve = _a.curve; + var ctx = this.canvasElCtx(); + var widthDelta = curve.endWidth - curve.startWidth; + var drawSteps = Math.floor(curve.length()) * 2; + ctx.beginPath(); + ctx.fillStyle = color; + for (var i = 0; i < drawSteps; i += 1) { + var t = i / drawSteps; + var tt = t * t; + var ttt = tt * t; + var u = 1 - t; + var uu = u * u; + var uuu = uu * u; + var x = uuu * curve.startPoint.x; + x += 3 * uu * t * curve.control1.x; + x += 3 * u * tt * curve.control2.x; + x += ttt * curve.endPoint.x; + var y = uuu * curve.startPoint.y; + y += 3 * uu * t * curve.control1.y; + y += 3 * u * tt * curve.control2.y; + y += ttt * curve.endPoint.y; + var width = curve.startWidth + ttt * widthDelta; + this.drawCurveSegment(x, y, width); + } + ctx.closePath(); + ctx.fill(); + }, + + drawCurveSegment: function (x, y, width) { + var ctx = this.canvasElCtx(); + ctx.moveTo(x, y); + ctx.arc(x, y, width, 0, 2 * Math.PI, false); + this.is_empty = false; + }, + + clear: function() + { + var ctx = this.canvasElCtx(); + var canvas = this.canvasEl().dom; + ctx.fillStyle = this.bg_color; + ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.fillRect(0, 0, canvas.width, canvas.height); + this.curve_data = []; + this.reset(); + this.is_empty = true; + }, + + fileEl: function() + { + return this.el.select('input',true).first(); + }, + + canvasEl: function() + { + return this.el.select('canvas',true).first(); + }, + + canvasElCtx: function() + { + return this.el.select('canvas',true).first().dom.getContext('2d'); + }, + + getImage: function(type) + { + if(this.is_empty) { + return false; + } + + // encryption ? + 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.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 + Point: (function () { + function Point(x, y, time) { + this.x = x; + this.y = y; + this.time = time || Date.now(); + } + Point.prototype.distanceTo = function (start) { + return Math.sqrt(Math.pow(this.x - start.x, 2) + Math.pow(this.y - start.y, 2)); + }; + Point.prototype.equals = function (other) { + return this.x === other.x && this.y === other.y && this.time === other.time; + }; + Point.prototype.velocityFrom = function (start) { + return this.time !== start.time + ? this.distanceTo(start) / (this.time - start.time) + : 0; + }; + return Point; + }()), + + + // Bezier Constructor + Bezier: (function () { + function Bezier(startPoint, control2, control1, endPoint, startWidth, endWidth) { + this.startPoint = startPoint; + this.control2 = control2; + this.control1 = control1; + this.endPoint = endPoint; + this.startWidth = startWidth; + this.endWidth = endWidth; + } + Bezier.fromPoints = function (points, widths, scope) { + var c2 = this.calculateControlPoints(points[0], points[1], points[2], scope).c2; + var c3 = this.calculateControlPoints(points[1], points[2], points[3], scope).c1; + return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end); + }; + Bezier.calculateControlPoints = function (s1, s2, s3, scope) { + var dx1 = s1.x - s2.x; + var dy1 = s1.y - s2.y; + var dx2 = s2.x - s3.x; + var dy2 = s2.y - s3.y; + var m1 = { x: (s1.x + s2.x) / 2.0, y: (s1.y + s2.y) / 2.0 }; + var m2 = { x: (s2.x + s3.x) / 2.0, y: (s2.y + s3.y) / 2.0 }; + var l1 = Math.sqrt(dx1 * dx1 + dy1 * dy1); + var l2 = Math.sqrt(dx2 * dx2 + dy2 * dy2); + var dxm = m1.x - m2.x; + var dym = m1.y - m2.y; + var k = l2 / (l1 + l2); + var cm = { x: m2.x + dxm * k, y: m2.y + dym * k }; + var tx = s2.x - cm.x; + var ty = s2.y - cm.y; + return { + c1: new scope.Point(m1.x + tx, m1.y + ty), + c2: new scope.Point(m2.x + tx, m2.y + ty) + }; + }; + Bezier.prototype.length = function () { + var steps = 10; + var length = 0; + var px; + var py; + for (var i = 0; i <= steps; i += 1) { + var t = i / steps; + var cx = this.point(t, this.startPoint.x, this.control1.x, this.control2.x, this.endPoint.x); + var cy = this.point(t, this.startPoint.y, this.control1.y, this.control2.y, this.endPoint.y); + if (i > 0) { + var xdiff = cx - px; + var ydiff = cy - py; + length += Math.sqrt(xdiff * xdiff + ydiff * ydiff); + } + px = cx; + py = cy; + } + return length; + }; + Bezier.prototype.point = function (t, start, c1, c2, end) { + return (start * (1.0 - t) * (1.0 - t) * (1.0 - t)) + + (3.0 * c1 * (1.0 - t) * (1.0 - t) * t) + + (3.0 * c2 * (1.0 - t) * t * t) + + (end * t * t * t); + }; + return Bezier; + }()), + + throttle: function(fn, wait) { + if (wait === void 0) { wait = 250; } + var previous = 0; + var timeout = null; + var result; + var storedContext; + var storedArgs; + var later = function () { + previous = Date.now(); + timeout = null; + result = fn.apply(storedContext, storedArgs); + if (!timeout) { + storedContext = null; + storedArgs = []; + } + }; + return function wrapper() { + var args = []; + for (var _i = 0; _i < arguments.length; _i++) { + args[_i] = arguments[_i]; + } + var now = Date.now(); + var remaining = wait - (now - previous); + storedContext = this; + storedArgs = args; + if (remaining <= 0 || remaining > wait) { + if (timeout) { + clearTimeout(timeout); + timeout = null; + } + previous = now; + result = fn.apply(storedContext, storedArgs); + if (!timeout) { + storedContext = null; + storedArgs = []; + } + } + else if (!timeout) { + timeout = window.setTimeout(later, remaining); + } + return result; + }; + } + +}); + + + + \ No newline at end of file