From: Alan Knowles Date: Wed, 10 Mar 2021 09:34:38 +0000 (+0800) Subject: Fix #6641 - add events for handling view and download X-Git-Url: http://git.roojs.org/?p=roojs1;a=commitdiff_plain;h=b34d62126ce450a86d8af5e79059ea0f4a3529b8 Fix #6641 - add events for handling view and download --- diff --git a/Roo/bootstrap/CardUploader.js b/Roo/bootstrap/CardUploader.js index aaf4df7a8c..7f0d5f1f10 100644 --- a/Roo/bootstrap/CardUploader.js +++ b/Roo/bootstrap/CardUploader.js @@ -28,9 +28,27 @@ Roo.bootstrap.CardUploader = function(config){ return r.data.id }); - + this.addEvents({ + // raw events + /** + * @event preview + * When a image is clicked on - and needs to display a slideshow or similar.. + * @param {Roo.bootstrap.Card} this + * @param {Object} The image information data + * + */ + 'preview' : true, + /** + * @event download + * When a the download link is clicked + * @param {Roo.bootstrap.Card} this + * @param {Object} The image information data contains + */ + 'download' : true + + }); }; - + Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { @@ -199,6 +217,25 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { }, + /** + * addCard - add an Attachment to the uploader + * @param data - the data about the image to upload + * + * { + id : 123 + title : "Title of file", + is_uploaded : false, + src : "http://.....", + srcfile : { the File upload object }, + mimetype : file.type, + preview : false, + is_deleted : 0 + .. any other data... + } + * + * + */ + addCard : function (data) { // hidden input element? @@ -227,7 +264,8 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { fa : 'download', listeners : { click : function() { - this.downloadCard(data.id) + + t.fireEvent( "download", t, data ); } } }, @@ -269,9 +307,10 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { items : footer, initEvents : function() { Roo.bootstrap.Card.prototype.initEvents.call(this); + var card = 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.on('click', function() { t.fireEvent( "preview", t, data ); }, this); this.imgEl.set({ 'pointer' : 'cursor' }); } diff --git a/roojs-bootstrap-debug.js b/roojs-bootstrap-debug.js index 419d952e01..163ac1f20f 100644 --- a/roojs-bootstrap-debug.js +++ b/roojs-bootstrap-debug.js @@ -12501,9 +12501,27 @@ Roo.bootstrap.CardUploader = function(config){ return r.data.id }); - + this.addEvents({ + // raw events + /** + * @event preview + * When a image is clicked on - and needs to display a slideshow or similar.. + * @param {Roo.bootstrap.Card} this + * @param {Object} The image information data + * + */ + 'preview' : true, + /** + * @event download + * When a the download link is clicked + * @param {Roo.bootstrap.Card} this + * @param {Object} The image information data contains + */ + 'download' : true + + }); }; - + Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { @@ -12672,6 +12690,25 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { }, + /** + * addCard - add an Attachment to the uploader + * @param data - the data about the image to upload + * + * { + id : 123 + title : "Title of file", + is_uploaded : false, + src : "http://.....", + srcfile : { the File upload object }, + mimetype : file.type, + preview : false, + is_deleted : 0 + .. any other data... + } + * + * + */ + addCard : function (data) { // hidden input element? @@ -12700,7 +12737,8 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { fa : 'download', listeners : { click : function() { - this.downloadCard(data.id) + + t.fireEvent( "download", t, data ); } } }, @@ -12742,9 +12780,10 @@ Roo.extend(Roo.bootstrap.CardUploader, Roo.bootstrap.Input, { items : footer, initEvents : function() { Roo.bootstrap.Card.prototype.initEvents.call(this); + var card = 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.on('click', function() { t.fireEvent( "preview", t, data ); }, this); this.imgEl.set({ 'pointer' : 'cursor' }); } diff --git a/roojs-bootstrap.js b/roojs-bootstrap.js index 5d31843531..b2bb8a311d 100644 --- a/roojs-bootstrap.js +++ b/roojs-bootstrap.js @@ -519,16 +519,16 @@ this.fireEvent("afterremove",this)}},createList:function(){this.list=Roo.get(doc },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} +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});this.addEvents({'preview':true,'download':true});};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',name:this.name,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,srcfile:A,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-10 text-left',size:'sm',weight:'link',fa:'download',listeners:{click:function(){this.downloadCard(A.id)} -}},{xns:Roo.bootstrap,xtype:'Button',style:'max-height: 28px; ',size:'sm',weight:'danger',cls:'col-2',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.getCardFooter().addClass('p-1');}});this.fileCollection.add(cn);if(!A.srcfile){this.updateInput(); +);},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-10 text-left',size:'sm',weight:'link',fa:'download',listeners:{click:function(){t.fireEvent("download",t,A); +}}},{xns:Roo.bootstrap,xtype:'Button',style:'max-height: 28px; ',size:'sm',weight:'danger',cls:'col-2',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); +var D=this;this.imgEl=this.el.select('.card-img-top').first();if(this.imgEl){this.imgEl.on('click',function(){t.fireEvent("preview",t,A);},this);this.imgEl.set({'pointer':'cursor'});}this.getCardFooter().addClass('p-1');}});this.fileCollection.add(cn);if(!A.srcfile){this.updateInput(); return;}var _t=this;var C=new FileReader();C.addEventListener("load",function(){A.srcdata=C.result;_t.updateInput();});C.readAsDataURL(A.srcfile);},removeCard:function(id){var A=this.fileCollection.get(id);A.data.is_deleted=1;A.data.src='';A.el.dom.parentNode.removeChild(A.el.dom); this.updateInput();},reset:function(){this.fileCollection.each(function(A){if(A.el.dom&&A.el.dom.parentNode){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; diff --git a/ux/Lightbox.js b/ux/Lightbox.js index 456aeb5138..46273de325 100644 --- a/ux/Lightbox.js +++ b/ux/Lightbox.js @@ -312,7 +312,7 @@ Roo.apply(Roo.ux.Lightbox.prototype, position: 'absolute', top: '0px', width: '100%', - 'z-index': '999' + 'z-index': '40999' } }); }, @@ -370,7 +370,7 @@ Roo.apply(Roo.ux.Lightbox.prototype, }); //this.imageArray = []; - var imageNum = 0; + var imageNum = -1; if (imageLink) { imageLink = Roo.get(imageLink); @@ -381,6 +381,11 @@ Roo.apply(Roo.ux.Lightbox.prototype, imageNum = i; } }); + if (imageNum < 0) { + + this.imageArray.push(imageLink); + imageNum = this.imageArray.length-1; + } } // let's assume the constructor sorts out the list of images.. @@ -408,7 +413,7 @@ Roo.apply(Roo.ux.Lightbox.prototype, this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' , - zIndex : 1000 + zIndex : 41000 }); //console.log("show lightbox"); this.lightbox.show(); @@ -433,7 +438,7 @@ Roo.apply(Roo.ux.Lightbox.prototype, // hide elements during transition if (this.animate) { this.loading.setStyle({ - zIndex :1200 + zIndex : 41200 }); this.loading.show(); this.loadinglink.setX( (Roo.lib.Dom.getViewWidth() / 2) - 16);