X-Git-Url: http://git.roojs.org/?a=blobdiff_plain;f=roojs-bootstrap-debug.js;h=a2606902e0689b667ff377c2cf12560858416348;hb=dbe9e326ba1541010b127a8ea347750c0602141e;hp=4ddc97deaa097a03788502424d1cc900205a3b54;hpb=e7810d2d65eef79fc4ac202b002bcd97dcb8aa53;p=roojs1 diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 4ddc97deaa..a2606902e0 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -2810,7 +2810,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { if(this.specificTitle){ title = this.title; - }; + } var header = []; if (this.allow_close && Roo.bootstrap.version == 3) { @@ -2908,6 +2908,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { }, + resize : function() { @@ -2917,9 +2918,11 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { ); if (this.fitwindow) { + + this.setSize( this.width || Roo.lib.Dom.getViewportWidth(true) - 30, - this.height || Roo.lib.Dom.getViewportHeight(true) - 60 + this.height || Roo.lib.Dom.getViewportHeight(true) // catering margin-top 30 margin-bottom 30 ); return; } @@ -2980,7 +2983,7 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { Roo.get(document.body).addClass('modal-open'); if(this.animate){ // element has 'fade' - so stuff happens after .3s ?- not sure why the delay? - var _this = this; + (function(){ this.el.addClass('show'); this.el.addClass('in'); @@ -3082,22 +3085,18 @@ Roo.extend(Roo.bootstrap.Modal, Roo.bootstrap.Component, { { //this.el.select('.modal-footer').() }, - diff : false, resizeTo: function(w,h) { - // skip.. ?? why?? - this.dialogEl.setWidth(w); - if (this.diff === false) { - this.diff = this.dialogEl.getHeight() - this.bodyEl.getHeight(); - } - - this.bodyEl.setHeight(h - this.diff); + + var diff = this.headerEl.getHeight() + this.footerEl.getHeight() + 60; // dialog margin-bottom: 30 + this.bodyEl.setHeight(h - diff); + this.fireEvent('resize', this); - }, + setContentSize : function(w, h) { @@ -4020,7 +4019,7 @@ Roo.extend(Roo.bootstrap.NavSimplebar, Roo.bootstrap.Navbar, { var cfg = { tag : this.tag || 'div', - cls : 'navbar navbar-expand-lg' + cls : 'navbar navbar-expand-lg roo-navbar-simple' }; if (['light','white'].indexOf(this.weight) > -1) { cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark'; @@ -4188,6 +4187,12 @@ Roo.extend(Roo.bootstrap.NavHeaderbar, Roo.bootstrap.NavSimplebar, { cfg.cls += this.inverse ? ' navbar-inverse navbar-dark bg-dark' : ' navbar-default'; + if (['light','white'].indexOf(this.weight) > -1) { + cfg.cls += ['light','white'].indexOf(this.weight) > -1 ? ' navbar-light' : ' navbar-dark'; + } + cfg.cls += ' bg-' + this.weight; + + if (['fixed-top','fixed-bottom','static-top'].indexOf(this.position)>-1) { cfg.cls += ' navbar-' + this.position + ' ' + this.position ; @@ -4365,11 +4370,13 @@ Roo.extend(Roo.bootstrap.NavGroup, Roo.bootstrap.Component, { cls: 'nav' }; if (Roo.bootstrap.version == 4) { - if (this.type == 'pills') { - cfg.cls = ' nav-pills'; + if (['tabs','pills'].indexOf(this.type) != -1) { + cfg.cls += ' nav-' + this.type; + } else { + cfg.cls += ' navbar-nav'; } } else { - if (['tabs','pills'].indexOf(this.type)!==-1) { + if (['tabs','pills'].indexOf(this.type) != -1) { cfg.cls += ' nav-' + this.type } else { if (this.type !== 'nav') { @@ -4607,6 +4614,8 @@ Roo.apply(Roo.bootstrap.NavGroup, { * @extends Roo.bootstrap.Component * Bootstrap Navbar.NavItem class * @cfg {String} href link to + * @cfg {String} button_weight (default | primary | secondary | success | info | warning | danger | link ) default none + * @cfg {String} html content of button * @cfg {String} badge text inside badge * @cfg {String} badgecls (bg-green|bg-red|bg-yellow)the extra classes for the badge @@ -4672,13 +4681,16 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { disabled : false, animateRef : false, was_active : false, + button_weight : '', + button_outline : false, + + navLink: false, getAutoCreate : function(){ var cfg = { tag: this.tag, cls: 'nav-item' - }; if (this.active) { @@ -4687,6 +4699,27 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { if (this.disabled) { cfg.cls += ' disabled'; } + + // BS4 only? + if (this.button_weight.length) { + cfg.tag = this.href ? 'a' : 'button'; + cfg.html = this.html || ''; + cfg.cls += ' btn btn' + (this.button_outline ? '-outline' : '') + '-' + this.button_weight; + if (this.href) { + cfg.href = this.href; + } + if (this.fa) { + cfg.html = ' ' + this.html + ''; + } + + // menu .. should add dropdown-menu class - so no need for carat.. + + if (this.badge !== '') { + + cfg.html += ' ' + this.badge + ''; + } + return cfg; + } if (this.href || this.html || this.glyphicon || this.icon || this.fa) { cfg.cn = [ @@ -4700,10 +4733,10 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { cfg.cn[0].cls = 'nav-link'; } if (this.icon) { - cfg.cn[0].html = ' ' + cfg.cn[0].html + '' + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; } if (this.fa) { - cfg.cn[0].html = ' ' + cfg.cn[0].html + '' + cfg.cn[0].html = ' ' + cfg.cn[0].html + ''; } if(this.glyphicon) { cfg.cn[0].html = ' ' + cfg.cn[0].html; @@ -4732,7 +4765,9 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { this.tag = 'div'; } - return Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position); + var ret = Roo.bootstrap.NavItem.superclass.onRender.call(this, ct, position); + this.navLink = this.el.select('.nav-link',true).first(); + return ret; }, @@ -4837,8 +4872,14 @@ Roo.extend(Roo.bootstrap.NavItem, Roo.bootstrap.Component, { if (!state ) { this.el.removeClass('active'); + this.navLink ? this.navLink.removeClass('active') : false; } else if (!this.el.hasClass('active')) { + this.el.addClass('active'); + if (Roo.bootstrap.version == 4 && this.navLink ) { + this.navLink.addClass('active'); + } + } if (fire) { this.fireEvent('changed', this, state); @@ -18317,7 +18358,7 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, { { if(this.transition || typeof(pan) == 'undefined'){ Roo.log("waiting for the transitionend"); - return; + return false; } if (typeof(pan) == 'number') { @@ -18349,22 +18390,28 @@ Roo.extend(Roo.bootstrap.TabGroup, Roo.bootstrap.Column, { if (this.carousel && typeof(Roo.get(document.body).dom.style.transition) != 'undefined') { + //class="carousel-item carousel-item-next carousel-item-left" + this.transition = true; var dir = this.indexOfPanel(pan) > this.indexOfPanel(cur) ? 'next' : 'prev'; var lr = dir == 'next' ? 'left' : 'right'; pan.el.addClass(dir); // or prev + pan.el.addClass('carousel-item-' + dir); // or prev pan.el.dom.offsetWidth; // find the offset with - causing a reflow? cur.el.addClass(lr); // or right pan.el.addClass(lr); + cur.el.addClass('carousel-item-' +lr); // or right + pan.el.addClass('carousel-item-' +lr); + var _this = this; cur.el.on('transitionend', function() { Roo.log("trans end?"); - pan.el.removeClass([lr,dir]); + pan.el.removeClass([lr,dir, 'carousel-item-' + lr, 'carousel-item-' + dir]); pan.setActive(true); - cur.el.removeClass([lr]); + cur.el.removeClass([lr, 'carousel-item-' + lr]); cur.setActive(false); _this.transition = false; @@ -18556,10 +18603,12 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { href : '', getAutoCreate : function(){ - var cfg = { + + + var cfg = { tag: 'div', // item is needed for carousel - not sure if it has any effect otherwise - cls: 'tab-pane item' + ((this.href.length) ? ' clickable ' : ''), + cls: 'carousel-item tab-pane item' + ((this.href.length) ? ' clickable ' : ''), html: this.html || '' }; @@ -18571,6 +18620,7 @@ Roo.extend(Roo.bootstrap.TabPanel, Roo.bootstrap.Component, { cfg.tabId = this.tabId; } + return cfg; }, @@ -35071,6 +35121,9 @@ Roo.bootstrap.layout.Border = function(config){ Roo.bootstrap.layout.Border.regions = ["north","south","east","west","center"]; Roo.extend(Roo.bootstrap.layout.Border, Roo.bootstrap.layout.Manager, { + + parent : false, // this might point to a 'nest' or a ??? + /** * Creates and adds a new region if it doesn't already exist. * @param {String} target The target region key (north, south, east, west or center). @@ -35325,13 +35378,18 @@ layout.addxtype({ delete cfg.items; } var nb = false; + + if ( region == 'center') { + Roo.log("Center: " + cfg.title); + } + switch(cfg.xtype) { case 'Content': // ContentPanel (el, cfg) case 'Scroll': // ContentPanel (el, cfg) case 'View': - cfg.autoCreate = true; + cfg.autoCreate = cfg.autoCreate || true; ret = new cfg.xns[cfg.xtype](cfg); // new panel!!!!! //} else { // var el = this.el.createChild(); @@ -35902,6 +35960,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { position: '', // set by wrapper (eg. north/south etc..) unrendered_panels : null, // unrendered panels. + + tabPosition : false, + + mgr: false, // points to 'Border' + + createBody : function(){ /** This region's body element * @type Roo.Element */ @@ -35923,15 +35987,15 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { /** This region's title element * @type Roo.Element */ - this.titleEl = dh.append(this.el.dom, - { - tag: "div", - unselectable: "on", - cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position, - children:[ - {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "}, - {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"} - ]}, true); + this.titleEl = dh.append(this.el.dom, { + tag: "div", + unselectable: "on", + cls: "roo-unselectable roo-layout-panel-hd breadcrumb roo-layout-title-" + this.position, + children:[ + {tag: "span", cls: "roo-unselectable roo-layout-panel-hd-text", unselectable: "on", html: " "}, + {tag: "div", cls: "roo-unselectable roo-layout-panel-hd-tools", unselectable: "on"} + ] + }, true); this.titleEl.enableDisplayMode(); /** This region's title text element @@ -36036,7 +36100,7 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { this.margins = c.margins || this.margins || {top: 0, left: 0, right:0, bottom: 0}; - this.bottomTabs = c.tabPosition != "top"; + this.tabPosition = [ 'top','bottom', 'west'].indexOf(c.tabPosition) > -1 ? c.tabPosition : "top"; this.autoScroll = c.autoScroll || false; @@ -36275,11 +36339,12 @@ Roo.extend(Roo.bootstrap.layout.Region, Roo.bootstrap.layout.Basic, { //this.bodyEl.setStyle("overflow", "hidden"); -- this is set in render? var ts = new Roo.bootstrap.panel.Tabs({ - el: this.bodyEl.dom, - tabPosition: this.bottomTabs ? 'bottom' : 'top', - disableTooltips: this.config.disableTabTips, - toolbar : this.config.toolbar - }); + el: this.bodyEl.dom, + region : this, + tabPosition: this.tabPosition ? this.tabPosition : 'top', + disableTooltips: this.config.disableTabTips, + toolbar : this.config.toolbar + }); if(this.config.hideTabs){ ts.stripWrap.setDisplayed(false); @@ -36970,6 +37035,7 @@ Roo.extend(Roo.bootstrap.layout.Center, Roo.bootstrap.layout.Region, { + Roo.bootstrap.layout.North = function(config) { config.region = 'north'; @@ -37162,8 +37228,7 @@ Roo.extend(Roo.bootstrap.layout.West, Roo.bootstrap.layout.Split, { } Roo.bootstrap.layout.Region.prototype.updateBox.call(this, box); } -}); -Roo.namespace("Roo.bootstrap.panel");/* +});Roo.namespace("Roo.bootstrap.panel");/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. @@ -37864,6 +37929,7 @@ Roo.bootstrap.panel.Nest = function(config) config.layout.monitorWindowResize = false; // turn off autosizing this.layout = config.layout; this.layout.getEl().addClass("roo-layout-nested-layout"); + this.layout.parent = this; @@ -37962,7 +38028,7 @@ panel.addxtype({ return this.layout.addxtype(cfg); } -}); /* +});/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. @@ -38026,16 +38092,48 @@ Roo.bootstrap.panel.Tabs = function(config){ } if(this.tabPosition == "bottom"){ + // if tabs are at the bottom = create the body first. this.bodyEl = Roo.get(this.createBody(this.el.dom)); this.el.addClass("roo-tabs-bottom"); } - this.stripWrap = Roo.get(this.createStrip(this.el.dom), true); - this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); - this.stripEl.setVisibilityMode(Roo.Element.DISPLAY); - this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + // next create the tabs holders + + if (this.tabPosition == "west"){ + + var reg = this.region; // fake it.. + while (reg) { + if (!reg.mgr.parent) { + break; + } + reg = reg.mgr.parent.region; + } + Roo.log("got nest?"); + Roo.log(reg); + if (reg.mgr.getRegion('west')) { + var ctrdom = reg.mgr.getRegion('west').bodyEl.dom; + this.stripWrap = Roo.get(this.createStrip(ctrdom ), true); + this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); + this.stripEl.setVisibilityMode(Roo.Element.DISPLAY); + this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + + + } + + + } else { + + this.stripWrap = Roo.get(this.createStrip(this.el.dom), true); + this.stripEl = Roo.get(this.createStripList(this.stripWrap.dom), true); + this.stripEl.setVisibilityMode(Roo.Element.DISPLAY); + this.stripBody = Roo.get(this.stripWrap.dom.firstChild.firstChild, true); + } + + if(Roo.isIE){ Roo.fly(this.stripWrap.dom.firstChild).setStyle("overflow-x", "hidden"); } + + // finally - if tabs are at the top, then create the body last.. if(this.tabPosition != "bottom"){ /** The body element that contains {@link Roo.TabPanelItem} bodies. + * @type Roo.Element @@ -38126,7 +38224,11 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { /* *@cfg {Object} toolbar xtype description of toolbar to show at the right of the tab bar. */ - toolbar : false, + toolbar : false, // set by caller.. + + region : false, /// set by caller + + disableTooltips : true, // not used yet... /** * Creates a new {@link Roo.TabPanelItem} by looking for an existing element with the provided id -- if it's not found it creates one. @@ -38279,6 +38381,8 @@ Roo.extend(Roo.bootstrap.panel.Tabs, Roo.util.Observable, { */ activate : function(id) { + //Roo.log('activite:' + id); + var tab = this.items[id]; if(!tab){ return null; @@ -41395,4 +41499,220 @@ 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({ + // // raw events + // /** + // * @event click + // * When a Brick is click + // * @param {Roo.bootstrap.Brick} this + // * @param {Roo.EventObject} e + // */ + // "click" : true + // }); +}; + +Roo.extend(Roo.bootstrap.BezierSignature, Roo.bootstrap.Component, { + + /** + * @cfg(float or function) Radius of a single dot. + */ + dotSize: false, + + /** + * @cfg(float) Minimum width of a line. Defaults to 0.5. + */ + minWidth: 0.5, + + /** + * @cfg(float) Maximum width of a line. Defaults to 2.5. + */ + maxWidth: 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. + */ + minDistance: 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)', + + /** + * @cfg(string) Color used to draw the lines. Can be any color format accepted by context.fillStyle. Defaults to "black". + */ + penColor: 'black', + + /** + * @cfg(float) Weight used to modify new velocity based on the previous velocity. Defaults to 0.7. + */ + velocityFilterWeight: 0.7, + + /** + * @cfg(function) Callback when stroke begin. + */ + onBegin: false, + + /** + * @cfg(function) Callback when stroke end. + */ + onEnd: false, + + 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: (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) { + var c2 = this.calculateControlPoints(points[0], points[1], points[2]).c2; + var c3 = this.calculateControlPoints(points[1], points[2], points[3]).c1; + return new Bezier(points[1], c2, c3, points[2], widths.start, widths.end); + }; + Bezier.calculateControlPoints = function (s1, s2, s3) { + 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 Point(m1.x + tx, m1.y + ty), + c2: new 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; + }()), + + getAutoCreate : function() + { + Roo.log('runing???'); + + var cls = 'roo-signature'; + + if(this.cls){ + cls += ' ' + this.cls; + } + + var cfg = { + tag: 'div', + cls: cls, + cn: [ + { + tag: 'div', + cls: 'roo-signature-body', + cn: [ + { + tag: 'canvas', + cls: 'roo-signature-body-canvas' + } + ] + } + ] + }; + + return cfg; + }, + + initEvents: function() + { + Roo.bootstrap.BezierSignature.superclass.initEvents.call(this); + // assign all object in here... + }, + + isValid: function() + { + // form cannot detect... + }, + + canvasEl: function() + { + // catching canvas + } + +}); + + + + \ No newline at end of file