Hi All,
I'm trying use "html5smartimage" image in the custom widgets. When I'm trying to select image from DAM using "PathField" and click on "Ok" button.
I'm getting error message "Uncaught TypeError: Cannot read property 'removeClass' of null".
I'm getting below java script error when below line in the "renderBlogImage" function get invoked.
image.handleDrop(fakeDragData);
Here is code snippet. Also I'm not able see "drag and drop in an image" place holder and text in the preview panel.
var blogsSectionContentImageWidget = CQ.Ext .extend( CQ.form.CompositeField, { imageEnhancementImageOptions : null, imageEnhancementImagePath : null, imageEnhancementImageUpload : null, imageEnhancementImagePreview : null, sectionIndex : null, resType : null, constructor : function(config) { config = config || {}; this.sectionIndex = config.sectionIndex; config = CQ.Util.applyDefaults(config); blogsSectionContentImageWidget.superclass.constructor .call(this, config); }, initComponent : function() { this.resType = new CQ.Ext.form.Hidden({ name: "./jcr:content/newsletterImage/sling:resourceType", value : "foundation/components/image", ignoreData : true, xtype : "hidden" }); this.imageEnhancementImageOptions = new CQ.Ext.form.RadioGroup( { id : 'imageEnhancementImageOptions', fieldLabel : 'Image Options', defaultValue : 'useImageFromDAM', items : [ { boxLabel : 'Use Image from DAM', name : 'imageEnhancementImageOptions' + this.sectionIndex, inputValue : 'useImageFromDAM', checked : true }, { boxLabel : 'Upload new Image', name : 'imageEnhancementImageOptions' + this.sectionIndex, inputValue : 'uploadNewImage' } ], listeners : { change : { scope : this, fn : this.toggleImageOptions } } }); this.add(this.imageEnhancementImageOptions); this.imageEnhancementImagePath = new CQ.form.PathField( { id : 'imageEnhancementImagePath', fieldLabel : 'Image Path or Link', rootPath : '/content/dam', width : "155", listeners : { dialogselect : { scope : this, fn : this.renderBlogImage } } }); this.add(this.imageEnhancementImagePath); this.imageEnhancementImageUpload = new CQ.form.FileUploadDialogButton( { id : 'imageEnhancementImageUpload', fieldLabel : ' ', fileDescription : 'Select a image to upload .', text : 'Upload Image', listeners : { click : { scope : this, fn : this.uploadBlogImage } } }); this.add(this.imageEnhancementImageUpload); this.imageEnhancementImageUpload.hide(); this.imageEnhancementImagePreview = new CQ.html5.form.SmartImage( { id : "imageEnhancementImagePreview", name : "./jcr:content/newsletterImage/file", ddGroups : "[media]", border : true, height : 550, width : 850, hideLabel : false, disableZoom : true, allowUpload : true, fileNameParameter : "./jcr:content/newsletterImage/fileName", fileReferenceParameter : "./jcr:content/newsletterImage/fileReference", cropParameter : "./jcr:content/newsletterImage/imageCrop", mapParameter : "./jcr:content/newsletterImage/imageMap", requestSuffix : "/jcr:content/newsletterImage.img.png", rotateParameter : "./jcr:content/newsletterImage/imageRotate", xtype : "html5smartimage", listeners : { loadcontent : { scope : this, fn : this.initBlogImage } } }); this.add(this.imageEnhancementImagePreview); toggleImageOptions : function() { if ('useImageFromDAM' === this.imageEnhancementImageOptions .getValue().getRawValue()) { this.imageEnhancementImageUpload.hide(); this.imageEnhancementImagePath.show(); } else { this.imageEnhancementImagePath.hide(); this.imageEnhancementImageUpload.show(); } }, uploadBlogImage : function(button) { button.dialogConfig.formUrl = '/bin/ceb/authenticatedservlet/imageUpload'; button.handleClick(); }, initBlogImage : function(field) { }, renderBlogImage : function(pathfield, path, anchor) { var panel = pathfield.findParentByType("panel"); if (panel) { var image = panel .findByType('html5smartimage')[0]; var pathArray = path.split('/'); var imageName = pathArray[(pathArray.length - 1)]; var fakeDragData = {}; var fakeRecord = {}; fakeRecord.path = path; fakeRecord.name = imageName; fakeRecord.get = function(name) { return this[name]; }; fakeDragData.records = new Array(fakeRecord); fakeDragData.single = true; image.handleDrop(fakeDragData); } }, processBlogImage : function(dialogButton, data) { var tabPanel = dialogButton.findParentByType('panel'); if (tabPanel) { var image = tabPanel .getComponent('imageEnhancementImagePreview'); var uploadedImage = data.getFieldValues().file; if (uploadedImage) { var pathArray = uploadedImage.split('\\'); var imageName = pathArray[(pathArray.length - 1)]; var date = new Date(); var currentDate = date.getFullYear().toString() .substr(2, 2) + "/" + ("0" + (date.getMonth() + 1) .toString()).substr(-2); var destinationImagePath = "/content/dam/blog/us/en/IMG/" + imageName; var fakeDragData = {}; var fakeRecord = {}; fakeRecord.path = destinationImagePath; fakeRecord.name = imageName; fakeRecord.get = function(name) { return this[name]; }; fakeDragData.records = new Array(fakeRecord); fakeDragData.single = true; image.handleDrop(fakeDragData); } } } }); CQ.Ext.reg("blogsSectionContentImageWidget", blogsSectionContentImageWidget);
Here I'm trying to creating instance of blogsSectionContentImageWidget and adding into Panel.
this.enhancementPanel = new CQ.Ext.Panel({ border : true, layout: "form", padding : 10, width : 700, items: [this.enhancementType, this.blogsSectionContentImageWidget] }); this.add(this.enhancementPanel);
