From 7c5c5e78c540179da19c9417b1c04eac05a253be Mon Sep 17 00:00:00 2001 From: Alan Knowles Date: Wed, 25 Nov 2020 17:44:08 +0800 Subject: [PATCH] fix typos --- buildSDK/dependancy_bootstrap.txt | 3 +- docs/src/Roo_bootstrap_Card.js.html | 8 +- docs/src/Roo_bootstrap_Modal.js.html | 4 +- roojs-bootstrap-debug.js | 1012 +++++++++++++------------- roojs-bootstrap.js | 26 +- 5 files changed, 527 insertions(+), 526 deletions(-) diff --git a/buildSDK/dependancy_bootstrap.txt b/buildSDK/dependancy_bootstrap.txt index 581c3fb1e1..819e220411 100644 --- a/buildSDK/dependancy_bootstrap.txt +++ b/buildSDK/dependancy_bootstrap.txt @@ -18,7 +18,6 @@ Roo.bootstrap.Card Roo.bootstrap.CardHeader Roo.bootstrap.CardFooter Roo.bootstrap.CardImageTop -Roo.bootstrap.CardUploader Roo.bootstrap.Img Roo.bootstrap.Link @@ -61,6 +60,8 @@ Roo.form.VTypes Roo.bootstrap.Input Roo.bootstrap.TextArea Roo.bootstrap.TriggerField +Roo.bootstrap.CardUploader + Roo.data.SortTypes Roo.data.Record diff --git a/docs/src/Roo_bootstrap_Card.js.html b/docs/src/Roo_bootstrap_Card.js.html index beff5458df..613bf45fc9 100644 --- a/docs/src/Roo_bootstrap_Card.js.html +++ b/docs/src/Roo_bootstrap_Card.js.html @@ -243,7 +243,7 @@ tag: 'span', cls: 'roo-card-header-ctr' + ( this.header.length ? '' : ' d-none'), html : this.header - }) + }); if (this.header_image.length) { @@ -437,8 +437,8 @@ cards : [], card_n : -1, items_n : -1, - card : false, - }; + card : false + }; //Roo.log([ 'target' , target ? target.id : '--nothing--']); // see if target is one of the 'cards'... @@ -581,7 +581,7 @@ if (this.items.length) { var nitems = []; - Roo.log([info.items_n, info.position, this.items.length]) + //Roo.log([info.items_n, info.position, this.items.length]); for (var i =0; i < this.items.length; i++) { if (i == info.items_n && info.position == 'above') { nitems.push(data.source); diff --git a/docs/src/Roo_bootstrap_Modal.js.html b/docs/src/Roo_bootstrap_Modal.js.html index 655fd04e89..7bacd7ed99 100644 --- a/docs/src/Roo_bootstrap_Modal.js.html +++ b/docs/src/Roo_bootstrap_Modal.js.html @@ -52,9 +52,9 @@ * @param {Roo.bootstrap.Modal} this * @param {Roo.EventObject} value */ - "titlechanged" : true, + "titlechanged" : true - }); + }); this.buttons = this.buttons || []; if (this.tmpl) { diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 7433d5cefc..43aa293fb7 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -2679,329 +2679,199 @@ Roo.extend(Roo.bootstrap.CardImageTop, Roo.bootstrap.Element, { - -/* -* Licence: LGPL -*/ + /* + * - LGPL + * + * image + * + */ -/** - * @class Roo.bootstrap.CardUploader - * @extends Roo.bootstrap.Button - * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name... - * @cfg {Number} errorTimeout default 3000 - * @cfg {Array} images an array of ?? Img objects ??? when loading existing files.. - * @cfg {Array} html The button text. - * +/** + * @class Roo.bootstrap.Img + * @extends Roo.bootstrap.Component + * Bootstrap Img class + * @cfg {Boolean} imgResponsive false | true + * @cfg {String} border rounded | circle | thumbnail + * @cfg {String} src image source + * @cfg {String} alt image alternative text + * @cfg {String} href a tag href + * @cfg {String} target (_self|_blank|_parent|_top)target for a href. + * @cfg {String} xsUrl xs image source + * @cfg {String} smUrl sm image source + * @cfg {String} mdUrl md image source + * @cfg {String} lgUrl lg image source + * * @constructor - * Create a new CardUploader + * Create a new Input * @param {Object} config The config object */ -Roo.bootstrap.CardUploader = function(config){ - - - - Roo.bootstrap.CardUploader.superclass.constructor.call(this, config); - - - this.fileCollection = new Roo.util.MixedCollection(false,function(r) { - return r.data.id - }); - +Roo.bootstrap.Img = function(config){ + Roo.bootstrap.Img.superclass.constructor.call(this, config); + this.addEvents({ + // img events + /** + * @event click + * The img click event for the img. + * @param {Roo.EventObject} e + */ + "click" : true + }); }; -Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { - - - errorTimeout : 3000, - - images : false, - - fileCollection : false, - allowBlank : true, +Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, { + imgResponsive: true, + border: '', + src: 'about:blank', + href: false, + target: false, + xsUrl: '', + smUrl: '', + mdUrl: '', + lgUrl: '', + getAutoCreate : function() - { + { + if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){ + return this.createSingleImg(); + } - var cfg = { - cls :'form-group' , - cn : [ - - { - tag: 'label', - //cls : 'input-group-addon', - html : this.fieldLabel - - }, + var cfg = { + tag: 'div', + cls: 'roo-image-responsive-group', + cn: [] + }; + var _this = this; + + Roo.each(['xs', 'sm', 'md', 'lg'], function(size){ + + if(!_this[size + 'Url']){ + return; + } + + var img = { + tag: 'img', + cls: (_this.imgResponsive) ? 'img-responsive' : '', + html: _this.html || cfg.html, + src: _this[size + 'Url'] + }; + + img.cls += ' roo-image-responsive-' + size; + + var s = ['xs', 'sm', 'md', 'lg']; + + s.splice(s.indexOf(size), 1); + + Roo.each(s, function(ss){ + img.cls += ' hidden-' + ss; + }); + + if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) { + cfg.cls += ' img-' + _this.border; + } + + if(_this.alt){ + cfg.alt = _this.alt; + } + + if(_this.href){ + var a = { + tag: 'a', + href: _this.href, + cn: [ + img + ] + }; - { - tag: 'input', - type : 'hidden', - value : this.value, - cls : 'd-none form-control' - }, - - { - tag: 'input', - multiple : 'multiple', - type : 'file', - cls : 'd-none roo-card-upload-selector' - }, - - { - cls : 'roo-card-uploader-button-container w-100 mb-2' - }, - { - cls : 'card-columns roo-card-uploader-container' + if(this.target){ + a.target = _this.target; } - - ] - }; - - + } + + cfg.cn.push((_this.href) ? a : img); + + }); + return cfg; }, - getChildContainer : function() /// what children are added to. - { - return this.containerEl; - }, - - getButtonContainer : function() /// what children are added to. - { - return this.el.select(".roo-card-uploader-button-container").first(); - }, - - initEvents : function() + createSingleImg : function() { + var cfg = { + tag: 'img', + cls: (this.imgResponsive) ? 'img-responsive' : '', + html : null, + src : 'about:blank' // just incase src get's set to undefined?!? + }; - Roo.bootstrap.Input.prototype.initEvents.call(this); - - var t = this; - this.addxtype({ - xns: Roo.bootstrap, - - xtype : 'Button', - container_method : 'getButtonContainer' , - html : this.html, // fix changable? - cls : 'w-100 ', - listeners : { - 'click' : function(btn, e) { - t.onClick(e); - } - } - }); + cfg.html = this.html || cfg.html; + cfg.src = this.src || cfg.src; + if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) { + cfg.cls += ' img-' + this.border; + } + if(this.alt){ + cfg.alt = this.alt; + } - this.urlAPI = (window.createObjectURL && window) || - (window.URL && URL.revokeObjectURL && URL) || - (window.webkitURL && webkitURL); - - - - - this.selectorEl = this.el.select('.roo-card-upload-selector', true).first(); + if(this.href){ + var a = { + tag: 'a', + href: this.href, + cn: [ + cfg + ] + }; + + if(this.target){ + a.target = this.target; + } + + } - this.selectorEl.on('change', this.onFileSelected, this); - if (this.images) { - var t = this; - this.images.forEach(function(img) { - t.addCard(img) - }); - this.images = false; + return (this.href) ? a : cfg; + }, + + initEvents: function() + { + if(!this.href){ + this.el.on('click', this.onClick, this); } - this.containerEl = this.el.select('.roo-card-uploader-container', true).first(); - - + }, - onClick : function(e) { - e.preventDefault(); - - this.selectorEl.dom.click(); - - }, - - onFileSelected : function(e) - { - e.preventDefault(); - - if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){ - return; - } - - Roo.each(this.selectorEl.dom.files, function(file){ - this.addFile(file); - }, this); - + Roo.log('img onclick'); + this.fireEvent('click', this, e); }, + /** + * Sets the url of the image - used to update it + * @param {String} url the url of the image + */ - - - - - addFile : function(file) + setSrc : function(url) { - - if(typeof(file) === 'string'){ - throw "Add file by name?"; // should not happen - return; - } + this.src = url; - if(!file || !this.urlAPI){ + if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){ + this.el.dom.src = url; return; } - // file; - // file.type; - - var _this = this; - - - var url = _this.urlAPI.createObjectURL( file); - - this.addCard({ - id : Roo.bootstrap.CardUploader.ID--, - is_uploaded : false, - src : url, - title : file.name, - mimetype : file.type, - preview : false, - is_deleted : 0 - }) - - }, - - addCard : function (data) - { - // hidden input element? - // if the file is not an image... - //then we need to use something other that and header_image - var t = this; - // remove..... - var footer = [ - { - xns : Roo.bootstrap, - xtype : 'CardFooter', - items: [ - { - xns : Roo.bootstrap, - xtype : 'Element', - cls : 'd-flex', - items : [ - - { - xns : Roo.bootstrap, - xtype : 'Button', - html : String.format("{0}", data.title), - cls : 'col-11 text-left', - size: 'sm', - weight: 'link', - fa : 'download', - listeners : { - click : function() { - this.downloadCard(data.id) - } - } - }, - - { - xns : Roo.bootstrap, - xtype : 'Button', - - size : 'sm', - weight: 'danger', - cls : 'col-1', - fa : 'times', - listeners : { - click : function() { - t.removeCard(data.id) - } - } - } - ] - } - - ] - } - - ]; - - var cn = this.addxtype( - { - - xns : Roo.bootstrap, - xtype : 'Card', - closeable : true, - header : !data.mimetype.match(/image/) && !data.preview ? "Document": false, - header_image : data.mimetype.match(/image/) ? data.src : data.preview, - header_image_fit_square: true, // fixme - we probably need to use the 'Img' element to do stuff like this. - data : data, - html : false, - - items : footer, - initEvents : function() { - Roo.bootstrap.Card.prototype.initEvents.call(this); - this.imgEl = this.el.select('.card-img-top').first(); - if (this.imgEl) { - this.imgEl.on('click', function() { t.previewCard( data.id); }, this); - this.imgEl.set({ 'pointer' : 'cursor' }); - - } - - - } - - } - ); - // dont' really need ot update items. - // this.items.push(cn); - this.fileCollection.add(cn); - this.updateInput(); - - }, - removeCard : function(id) - { - - var card = this.fileCollection.get(id); - card.data.is_deleted = 1; - card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc. - this.fileCollection.remove(card); - //this.items = this.items.filter(function(e) { return e != card }); - // dont' really need ot update items. - card.el.dom.parentNode.removeChild(card.el.dom); - - }, - reset: function() - { - this.fileCollection.each(function(card) { - card.el.dom.parentNode.removeChild(card.el.dom); - }); - this.fileCollection.clear(); - this.updateInput(); - }, - - updateInput : function() - { - var data = []; - this.fileCollection.each(function(e) { - data.push(e.data); - }); - - this.inputEl().dom.value = JSON.stringify(data); + this.el.select('img', true).first().dom.src = url; } + }); - -Roo.bootstrap.CardUploader.ID = -1;/* + /* * - LGPL * * image @@ -3010,27 +2880,26 @@ Roo.bootstrap.CardUploader.ID = -1;/* /** - * @class Roo.bootstrap.Img + * @class Roo.bootstrap.Link * @extends Roo.bootstrap.Component - * Bootstrap Img class - * @cfg {Boolean} imgResponsive false | true - * @cfg {String} border rounded | circle | thumbnail - * @cfg {String} src image source + * Bootstrap Link Class * @cfg {String} alt image alternative text * @cfg {String} href a tag href - * @cfg {String} target (_self|_blank|_parent|_top)target for a href. - * @cfg {String} xsUrl xs image source - * @cfg {String} smUrl sm image source - * @cfg {String} mdUrl md image source - * @cfg {String} lgUrl lg image source + * @cfg {String} target (_self|_blank|_parent|_top) target for a href. + * @cfg {String} html the content of the link. + * @cfg {String} anchor name for the anchor link + * @cfg {String} fa - favicon + + * @cfg {Boolean} preventDefault (true | false) default false + * * @constructor * Create a new Input * @param {Object} config The config object */ -Roo.bootstrap.Img = function(config){ - Roo.bootstrap.Img.superclass.constructor.call(this, config); +Roo.bootstrap.Link = function(config){ + Roo.bootstrap.Link.superclass.constructor.call(this, config); this.addEvents({ // img events @@ -3043,225 +2912,34 @@ Roo.bootstrap.Img = function(config){ }); }; -Roo.extend(Roo.bootstrap.Img, Roo.bootstrap.Component, { +Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component, { - imgResponsive: true, - border: '', - src: 'about:blank', href: false, target: false, - xsUrl: '', - smUrl: '', - mdUrl: '', - lgUrl: '', + preventDefault: false, + anchor : false, + alt : false, + fa: false, + getAutoCreate : function() - { - if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){ - return this.createSingleImg(); - } + { + var html = this.html || ''; + if (this.fa !== false) { + html = ''; + } var cfg = { - tag: 'div', - cls: 'roo-image-responsive-group', - cn: [] + tag: 'a' }; - var _this = this; - - Roo.each(['xs', 'sm', 'md', 'lg'], function(size){ - - if(!_this[size + 'Url']){ - return; - } - - var img = { - tag: 'img', - cls: (_this.imgResponsive) ? 'img-responsive' : '', - html: _this.html || cfg.html, - src: _this[size + 'Url'] - }; - - img.cls += ' roo-image-responsive-' + size; - - var s = ['xs', 'sm', 'md', 'lg']; - - s.splice(s.indexOf(size), 1); - - Roo.each(s, function(ss){ - img.cls += ' hidden-' + ss; - }); - - if (['rounded','circle','thumbnail'].indexOf(_this.border)>-1) { - cfg.cls += ' img-' + _this.border; - } - - if(_this.alt){ - cfg.alt = _this.alt; - } - - if(_this.href){ - var a = { - tag: 'a', - href: _this.href, - cn: [ - img - ] - }; - - if(this.target){ - a.target = _this.target; - } - } - - cfg.cn.push((_this.href) ? a : img); - - }); - - return cfg; - }, - - createSingleImg : function() - { - var cfg = { - tag: 'img', - cls: (this.imgResponsive) ? 'img-responsive' : '', - html : null, - src : 'about:blank' // just incase src get's set to undefined?!? - }; - - cfg.html = this.html || cfg.html; - - cfg.src = this.src || cfg.src; - - if (['rounded','circle','thumbnail'].indexOf(this.border)>-1) { - cfg.cls += ' img-' + this.border; - } - - if(this.alt){ - cfg.alt = this.alt; - } - - if(this.href){ - var a = { - tag: 'a', - href: this.href, - cn: [ - cfg - ] - }; - - if(this.target){ - a.target = this.target; - } - - } - - return (this.href) ? a : cfg; - }, - - initEvents: function() - { - if(!this.href){ - this.el.on('click', this.onClick, this); - } - - }, - - onClick : function(e) - { - Roo.log('img onclick'); - this.fireEvent('click', this, e); - }, - /** - * Sets the url of the image - used to update it - * @param {String} url the url of the image - */ - - setSrc : function(url) - { - this.src = url; - - if(this.src || (!this.xsUrl && !this.smUrl && !this.mdUrl && !this.lgUrl)){ - this.el.dom.src = url; - return; - } - - this.el.select('img', true).first().dom.src = url; - } - - - -}); - - /* - * - LGPL - * - * image - * - */ - - -/** - * @class Roo.bootstrap.Link - * @extends Roo.bootstrap.Component - * Bootstrap Link Class - * @cfg {String} alt image alternative text - * @cfg {String} href a tag href - * @cfg {String} target (_self|_blank|_parent|_top) target for a href. - * @cfg {String} html the content of the link. - * @cfg {String} anchor name for the anchor link - * @cfg {String} fa - favicon - - * @cfg {Boolean} preventDefault (true | false) default false - - * - * @constructor - * Create a new Input - * @param {Object} config The config object - */ - -Roo.bootstrap.Link = function(config){ - Roo.bootstrap.Link.superclass.constructor.call(this, config); - - this.addEvents({ - // img events - /** - * @event click - * The img click event for the img. - * @param {Roo.EventObject} e - */ - "click" : true - }); -}; - -Roo.extend(Roo.bootstrap.Link, Roo.bootstrap.Component, { - - href: false, - target: false, - preventDefault: false, - anchor : false, - alt : false, - fa: false, - - - getAutoCreate : function() - { - var html = this.html || ''; - - if (this.fa !== false) { - html = ''; - } - var cfg = { - tag: 'a' - }; - // anchor's do not require html/href... - if (this.anchor === false) { - cfg.html = html; - cfg.href = this.href || '#'; - } else { - cfg.name = this.anchor; - if (this.html !== false || this.fa !== false) { - cfg.html = html; + // anchor's do not require html/href... + if (this.anchor === false) { + cfg.html = html; + cfg.href = this.href || '#'; + } else { + cfg.name = this.anchor; + if (this.html !== false || this.fa !== false) { + cfg.html = html; } if (this.href !== false) { cfg.href = this.href; @@ -12534,7 +12212,329 @@ Roo.extend(Roo.bootstrap.TriggerField, Roo.bootstrap.Input, { */ onTriggerClick : Roo.emptyFn }); - /* + +/* +* Licence: LGPL +*/ + +/** + * @class Roo.bootstrap.CardUploader + * @extends Roo.bootstrap.Button + * Bootstrap Card Uploader class - it's a button which when you add files to it, adds cards below with preview and the name... + * @cfg {Number} errorTimeout default 3000 + * @cfg {Array} images an array of ?? Img objects ??? when loading existing files.. + * @cfg {Array} html The button text. + + * + * @constructor + * Create a new CardUploader + * @param {Object} config The config object + */ + +Roo.bootstrap.CardUploader = function(config){ + + + + Roo.bootstrap.CardUploader.superclass.constructor.call(this, config); + + + this.fileCollection = new Roo.util.MixedCollection(false,function(r) { + return r.data.id + }); + + +}; + +Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { + + + errorTimeout : 3000, + + images : false, + + fileCollection : false, + allowBlank : true, + + getAutoCreate : function() + { + + var cfg = { + cls :'form-group' , + cn : [ + + { + tag: 'label', + //cls : 'input-group-addon', + html : this.fieldLabel + + }, + + { + tag: 'input', + type : 'hidden', + value : this.value, + cls : 'd-none form-control' + }, + + { + tag: 'input', + multiple : 'multiple', + type : 'file', + cls : 'd-none roo-card-upload-selector' + }, + + { + cls : 'roo-card-uploader-button-container w-100 mb-2' + }, + { + cls : 'card-columns roo-card-uploader-container' + } + + ] + }; + + + return cfg; + }, + + getChildContainer : function() /// what children are added to. + { + return this.containerEl; + }, + + getButtonContainer : function() /// what children are added to. + { + return this.el.select(".roo-card-uploader-button-container").first(); + }, + + initEvents : function() + { + + Roo.bootstrap.Input.prototype.initEvents.call(this); + + var t = this; + this.addxtype({ + xns: Roo.bootstrap, + + xtype : 'Button', + container_method : 'getButtonContainer' , + html : this.html, // fix changable? + cls : 'w-100 ', + listeners : { + 'click' : function(btn, e) { + t.onClick(e); + } + } + }); + + + + + this.urlAPI = (window.createObjectURL && window) || + (window.URL && URL.revokeObjectURL && URL) || + (window.webkitURL && webkitURL); + + + + + this.selectorEl = this.el.select('.roo-card-upload-selector', true).first(); + + this.selectorEl.on('change', this.onFileSelected, this); + if (this.images) { + var t = this; + this.images.forEach(function(img) { + t.addCard(img) + }); + this.images = false; + } + this.containerEl = this.el.select('.roo-card-uploader-container', true).first(); + + + }, + + + onClick : function(e) + { + e.preventDefault(); + + this.selectorEl.dom.click(); + + }, + + onFileSelected : function(e) + { + e.preventDefault(); + + if(typeof(this.selectorEl.dom.files) == 'undefined' || !this.selectorEl.dom.files.length){ + return; + } + + Roo.each(this.selectorEl.dom.files, function(file){ + this.addFile(file); + }, this); + + }, + + + + + + addFile : function(file) + { + + if(typeof(file) === 'string'){ + throw "Add file by name?"; // should not happen + return; + } + + if(!file || !this.urlAPI){ + return; + } + + // file; + // file.type; + + var _this = this; + + + var url = _this.urlAPI.createObjectURL( file); + + this.addCard({ + id : Roo.bootstrap.CardUploader.ID--, + is_uploaded : false, + src : url, + title : file.name, + mimetype : file.type, + preview : false, + is_deleted : 0 + }) + + }, + + addCard : function (data) + { + // hidden input element? + // if the file is not an image... + //then we need to use something other that and header_image + var t = this; + // remove..... + var footer = [ + { + xns : Roo.bootstrap, + xtype : 'CardFooter', + items: [ + { + xns : Roo.bootstrap, + xtype : 'Element', + cls : 'd-flex', + items : [ + + { + xns : Roo.bootstrap, + xtype : 'Button', + html : String.format("{0}", data.title), + cls : 'col-11 text-left', + size: 'sm', + weight: 'link', + fa : 'download', + listeners : { + click : function() { + this.downloadCard(data.id) + } + } + }, + + { + xns : Roo.bootstrap, + xtype : 'Button', + + size : 'sm', + weight: 'danger', + cls : 'col-1', + fa : 'times', + listeners : { + click : function() { + t.removeCard(data.id) + } + } + } + ] + } + + ] + } + + ]; + + var cn = this.addxtype( + { + + xns : Roo.bootstrap, + xtype : 'Card', + closeable : true, + header : !data.mimetype.match(/image/) && !data.preview ? "Document": false, + header_image : data.mimetype.match(/image/) ? data.src : data.preview, + header_image_fit_square: true, // fixme - we probably need to use the 'Img' element to do stuff like this. + data : data, + html : false, + + items : footer, + initEvents : function() { + Roo.bootstrap.Card.prototype.initEvents.call(this); + this.imgEl = this.el.select('.card-img-top').first(); + if (this.imgEl) { + this.imgEl.on('click', function() { t.previewCard( data.id); }, this); + this.imgEl.set({ 'pointer' : 'cursor' }); + + } + + + } + + } + ); + // dont' really need ot update items. + // this.items.push(cn); + this.fileCollection.add(cn); + this.updateInput(); + + }, + removeCard : function(id) + { + + var card = this.fileCollection.get(id); + card.data.is_deleted = 1; + card.data.src = ''; /// delete the source - so it reduces size of not uploaded images etc. + this.fileCollection.remove(card); + //this.items = this.items.filter(function(e) { return e != card }); + // dont' really need ot update items. + card.el.dom.parentNode.removeChild(card.el.dom); + + }, + reset: function() + { + this.fileCollection.each(function(card) { + card.el.dom.parentNode.removeChild(card.el.dom); + }); + this.fileCollection.clear(); + this.updateInput(); + }, + + updateInput : function() + { + var data = []; + this.fileCollection.each(function(e) { + data.push(e.data); + }); + + this.inputEl().dom.value = JSON.stringify(data); + } + + +}); + + +Roo.bootstrap.CardUploader.ID = -1;/* * Based on: * Ext JS Library 1.1.1 * Copyright(c) 2006-2007, Ext JS, LLC. diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index 696ffc869f..6b61075a1d 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -114,19 +114,6 @@ Roo.bootstrap.CardHeader=function(A){Roo.bootstrap.CardHeader.superclass.constru Roo.bootstrap.CardFooter=function(A){Roo.bootstrap.CardFooter.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.CardFooter,Roo.bootstrap.Element,{container_method:'getCardFooter'}); // Roo/bootstrap/CardImageTop.js Roo.bootstrap.CardImageTop=function(A){Roo.bootstrap.CardImageTop.superclass.constructor.call(this,A);};Roo.extend(Roo.bootstrap.CardImageTop,Roo.bootstrap.Element,{container_method:'getCardImageTop'}); -// Roo/bootstrap/CardUploader.js -Roo.bootstrap.CardUploader=function(A){Roo.bootstrap.CardUploader.superclass.constructor.call(this,A);this.fileCollection=new Roo.util.MixedCollection(false,function(r){return r.data.id});};Roo.extend(Roo.bootstrap.CardUploader,Roo.bootstrap.Input,{errorTimeout:3000,images:false,fileCollection:false,allowBlank:true,getAutoCreate:function(){var A={cls:'form-group',cn:[{tag:'label',html:this.fieldLabel} -,{tag:'input',type:'hidden',value:this.value,cls:'d-none form-control'},{tag:'input',multiple:'multiple',type:'file',cls:'d-none roo-card-upload-selector'},{cls:'roo-card-uploader-button-container w-100 mb-2'},{cls:'card-columns roo-card-uploader-container'} -]};return A;},getChildContainer:function(){return this.containerEl;},getButtonContainer:function(){return this.el.select(".roo-card-uploader-button-container").first();},initEvents:function(){Roo.bootstrap.Input.prototype.initEvents.call(this);var t=this; -this.addxtype({xns:Roo.bootstrap,xtype:'Button',container_method:'getButtonContainer',html:this.html,cls:'w-100 ',listeners:{'click':function(A,e){t.onClick(e);}}});this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL); -this.selectorEl=this.el.select('.roo-card-upload-selector',true).first();this.selectorEl.on('change',this.onFileSelected,this);if(this.images){var t=this;this.images.forEach(function(A){t.addCard(A)});this.images=false;}this.containerEl=this.el.select('.roo-card-uploader-container',true).first(); -},onClick:function(e){e.preventDefault();this.selectorEl.dom.click();},onFileSelected:function(e){e.preventDefault();if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;}Roo.each(this.selectorEl.dom.files,function(A){this.addFile(A); -},this);},addFile:function(A){if(typeof(A)==='string'){throw "Add file by name?";return;}if(!A||!this.urlAPI){return;}var B=this;var C=B.urlAPI.createObjectURL(A);this.addCard({id:Roo.bootstrap.CardUploader.ID--,is_uploaded:false,src:C,title:A.name,mimetype:A.type,preview:false,is_deleted:0} -)},addCard:function(A){var t=this;var B=[{xns:Roo.bootstrap,xtype:'CardFooter',items:[{xns:Roo.bootstrap,xtype:'Element',cls:'d-flex',items:[{xns:Roo.bootstrap,xtype:'Button',html:String.format("{0}",A.title),cls:'col-11 text-left',size:'sm',weight:'link',fa:'download',listeners:{click:function(){this.downloadCard(A.id)} -}},{xns:Roo.bootstrap,xtype:'Button',size:'sm',weight:'danger',cls:'col-1',fa:'times',listeners:{click:function(){t.removeCard(A.id)}}}]}]}];var cn=this.addxtype({xns:Roo.bootstrap,xtype:'Card',closeable:true,header:!A.mimetype.match(/image/)&&!A.preview?"Document":false,header_image:A.mimetype.match(/image/)?A.src:A.preview,header_image_fit_square:true,data:A,html:false,items:B,initEvents:function(){Roo.bootstrap.Card.prototype.initEvents.call(this); -this.imgEl=this.el.select('.card-img-top').first();if(this.imgEl){this.imgEl.on('click',function(){t.previewCard(A.id);},this);this.imgEl.set({'pointer':'cursor'});}}});this.fileCollection.add(cn);this.updateInput();},removeCard:function(id){var A=this.fileCollection.get(id); -A.data.is_deleted=1;A.data.src='';this.fileCollection.remove(A);A.el.dom.parentNode.removeChild(A.el.dom);},reset:function(){this.fileCollection.each(function(A){A.el.dom.parentNode.removeChild(A.el.dom);});this.fileCollection.clear();this.updateInput();} -,updateInput:function(){var A=[];this.fileCollection.each(function(e){A.push(e.data);});this.inputEl().dom.value=JSON.stringify(A);}});Roo.bootstrap.CardUploader.ID=-1; // Roo/bootstrap/Img.js Roo.bootstrap.Img=function(A){Roo.bootstrap.Img.superclass.constructor.call(this,A);this.addEvents({"click":true});};Roo.extend(Roo.bootstrap.Img,Roo.bootstrap.Component,{imgResponsive:true,border:'',src:'about:blank',href:false,target:false,xsUrl:'',smUrl:'',mdUrl:'',lgUrl:'',getAutoCreate:function(){if(this.src||(!this.xsUrl&&!this.smUrl&&!this.mdUrl&&!this.lgUrl)){return this.createSingleImg(); }var A={tag:'div',cls:'roo-image-responsive-group',cn:[]};var B=this;Roo.each(['xs','sm','md','lg'],function(C){if(!B[C+'Url']){return;}var D={tag:'img',cls:(B.imgResponsive)?'img-responsive':'',html:B.html||A.html,src:B[C+'Url']};D.cls+=' roo-image-responsive-'+C; @@ -520,6 +507,19 @@ this.fireEvent("afterremove",this)}},createList:function(){this.list=Roo.get(doc }},onBlur:function(){},mimicBlur:function(e,t){},triggerBlur:function(){this.mimicing=false;Roo.get(Roo.isIE?document.body:document).un("mousedown",this.mimicBlur);if(this.monitorTab){this.el.un("keydown",this.checkTab,this);}Roo.bootstrap.TriggerField.superclass.onBlur.call(this); },validateBlur:function(e,t){return true;},onDisable:function(){this.inputEl().dom.disabled=true;},onEnable:function(){this.inputEl().dom.disabled=false;},onShow:function(){var ae=this.getActionEl();if(ae){ae.dom.style.display='';ae.dom.style.visibility='visible'; }},onHide:function(){var ae=this.getActionEl();ae.dom.style.display='none';},onTriggerClick:Roo.emptyFn}); +// Roo/bootstrap/CardUploader.js +Roo.bootstrap.CardUploader=function(A){Roo.bootstrap.CardUploader.superclass.constructor.call(this,A);this.fileCollection=new Roo.util.MixedCollection(false,function(r){return r.data.id});};Roo.extend(Roo.bootstrap.CardUploader,Roo.bootstrap.Input,{errorTimeout:3000,images:false,fileCollection:false,allowBlank:true,getAutoCreate:function(){var A={cls:'form-group',cn:[{tag:'label',html:this.fieldLabel} +,{tag:'input',type:'hidden',value:this.value,cls:'d-none form-control'},{tag:'input',multiple:'multiple',type:'file',cls:'d-none roo-card-upload-selector'},{cls:'roo-card-uploader-button-container w-100 mb-2'},{cls:'card-columns roo-card-uploader-container'} +]};return A;},getChildContainer:function(){return this.containerEl;},getButtonContainer:function(){return this.el.select(".roo-card-uploader-button-container").first();},initEvents:function(){Roo.bootstrap.Input.prototype.initEvents.call(this);var t=this; +this.addxtype({xns:Roo.bootstrap,xtype:'Button',container_method:'getButtonContainer',html:this.html,cls:'w-100 ',listeners:{'click':function(A,e){t.onClick(e);}}});this.urlAPI=(window.createObjectURL&&window)||(window.URL&&URL.revokeObjectURL&&URL)||(window.webkitURL&&webkitURL); +this.selectorEl=this.el.select('.roo-card-upload-selector',true).first();this.selectorEl.on('change',this.onFileSelected,this);if(this.images){var t=this;this.images.forEach(function(A){t.addCard(A)});this.images=false;}this.containerEl=this.el.select('.roo-card-uploader-container',true).first(); +},onClick:function(e){e.preventDefault();this.selectorEl.dom.click();},onFileSelected:function(e){e.preventDefault();if(typeof(this.selectorEl.dom.files)=='undefined'||!this.selectorEl.dom.files.length){return;}Roo.each(this.selectorEl.dom.files,function(A){this.addFile(A); +},this);},addFile:function(A){if(typeof(A)==='string'){throw "Add file by name?";return;}if(!A||!this.urlAPI){return;}var B=this;var C=B.urlAPI.createObjectURL(A);this.addCard({id:Roo.bootstrap.CardUploader.ID--,is_uploaded:false,src:C,title:A.name,mimetype:A.type,preview:false,is_deleted:0} +)},addCard:function(A){var t=this;var B=[{xns:Roo.bootstrap,xtype:'CardFooter',items:[{xns:Roo.bootstrap,xtype:'Element',cls:'d-flex',items:[{xns:Roo.bootstrap,xtype:'Button',html:String.format("{0}",A.title),cls:'col-11 text-left',size:'sm',weight:'link',fa:'download',listeners:{click:function(){this.downloadCard(A.id)} +}},{xns:Roo.bootstrap,xtype:'Button',size:'sm',weight:'danger',cls:'col-1',fa:'times',listeners:{click:function(){t.removeCard(A.id)}}}]}]}];var cn=this.addxtype({xns:Roo.bootstrap,xtype:'Card',closeable:true,header:!A.mimetype.match(/image/)&&!A.preview?"Document":false,header_image:A.mimetype.match(/image/)?A.src:A.preview,header_image_fit_square:true,data:A,html:false,items:B,initEvents:function(){Roo.bootstrap.Card.prototype.initEvents.call(this); +this.imgEl=this.el.select('.card-img-top').first();if(this.imgEl){this.imgEl.on('click',function(){t.previewCard(A.id);},this);this.imgEl.set({'pointer':'cursor'});}}});this.fileCollection.add(cn);this.updateInput();},removeCard:function(id){var A=this.fileCollection.get(id); +A.data.is_deleted=1;A.data.src='';this.fileCollection.remove(A);A.el.dom.parentNode.removeChild(A.el.dom);},reset:function(){this.fileCollection.each(function(A){A.el.dom.parentNode.removeChild(A.el.dom);});this.fileCollection.clear();this.updateInput();} +,updateInput:function(){var A=[];this.fileCollection.each(function(e){A.push(e.data);});this.inputEl().dom.value=JSON.stringify(A);}});Roo.bootstrap.CardUploader.ID=-1; // Roo/data/SortTypes.js Roo.data.SortTypes={none:function(s){return s;},stripTagsRE:/<\/?[^>]+>/gi,asText:function(s){return String(s).replace(this.stripTagsRE,"");},asUCText:function(s){return String(s).toUpperCase().replace(this.stripTagsRE,"");},asUCString:function(s){return String(s).toUpperCase(); },asDate:function(s){if(!s){return 0;}if(s instanceof Date){return s.getTime();}return Date.parse(String(s));},asFloat:function(s){var A=parseFloat(String(s).replace(/,/g,""));if(isNaN(A)){A=0;}return A;},asInt:function(s){var A=parseInt(String(s).replace(/,/g,"")); -- 2.39.2