X-Git-Url: http://git.roojs.org/?p=roojs1;a=blobdiff_plain;f=roojs-bootstrap-debug.js;fp=roojs-bootstrap-debug.js;h=43aa293fb711c7f9a9e7788a8a68b08fa9a2873d;hp=7433d5cefc4b7584dfbd6921861ca074640b90a3;hb=7c5c5e78c540179da19c9417b1c04eac05a253be;hpb=5c4bd9e5eeb24b7cbf8a5c1bbdbb662847ad8009 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.