Slick.js reload the slider on image asset change

Hello everyone, I am integrating slick slider, the issue is with reloading the slider after image is uploaded.

After onclick of open assets the Slick slider must be reinitialized so that regular html of the slider would become slick slider, that happens on adding the component to the canvas only: $(‘#slickslider’).slick({ dots: true,

infinite: true,
speed: 300,
arrows:true,
adaptiveHeight: true

});

That works in two cases: When i add new slider to canvas When i upload new image and then drag and move the component it reinitializes

The code:

	editor.DomComponents.addType('slickslider', {

model: { init() {

    //TESTING 
           this.listenTo(this, 'change:attributes', model =>{
                                    $('#slickslider').slick({
   dots: true,

infinite: true,
speed: 300,
arrows:true,
adaptiveHeight: true

}); }) //No results

        },

defaults: {
     components: [	
			{
				highlightable: true,
				editable: true,
				selectable: true,
				resizable:true
			}],
			
 
     traits: [
  
				    
		{
					    	type: 'buttonCarousel',
					    	label: 'Upload',
						name: 'upload1',
					    
					value:'Upload 1',
	
					},
						
							{
						type: 'select',
						label: 'reload',
						name: 'reload',
					
					options:[{
					    value:'yes',
					    name:'yes'
					},{
					    value:'no',
					    name:'no'
					}],
					
						changeProp: 0
					}
				
				
  ]}},

 view:{
        
		tagName: 'div',
		init({ model }) {


    $('#slickslider').slick({
   dots: true,

infinite: true,
speed: 300,
arrows:true,
adaptiveHeight: true

});

// RESULT: ignores this code

this.model.listenTo(this.model, 'change:attributes', model => {
				this.render();
			}); // RESULT: does not works

editor.render(); // Breaks the editor } }

} )

editor.BlockManager.add('slickslider', {
	label: 'Slick Slider',
	category: 'Media',
	attributes: { icon: 'fa fa-video' },
	content: {
	    
	    	type: 'slickslider',
		activeOnRender: 1,
							 style: {
  'background-color': '#000000',
},
	    script: function(){
	        
	        
	         var initMySLider = function() {

    $('#slickslider').slick({
   dots: true,

infinite: true,
speed: 300,
arrows:true,
adaptiveHeight: true

});

}

var script = document.createElement('script');
script.onload = initMySLider;
script.src = '//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js';
document.body.appendChild(script);


var link  = document.createElement('link');
link.rel  = 'stylesheet';
link.type = 'text/css';
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.css';

var link2  = document.createElement('link');
link2.rel  = 'stylesheet';
link2.type = 'text/css';
link2.href = 'https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.css';

document.body.appendChild(link); document.body.appendChild(link2);

	    },
	    

  content: `<div  id="slickslider" data-gjs-type="slickslider"> <div class="slide" id="slide1"> <img src="oldimage1.png" > </div><div class="slide" id="slide2"> <img src="oldimage.png"   > </div></div>`

} });

})

Result: After uploading new image, both images are shown as a regular html:

After I move the component to up it becomes a slick js slider showing: new image uploaded and old image as a slider showing slick js arrows

Any suggestion would be helpful.

TLDR:

how to reinitialize ‘script’ function inside editor.blockmanager.add to reload the jquery code of slider?

[abzal0]

@pouyamiralayi this is incredibly valuable code, thanks a lot for sharing it 😃 it works better than I needed. Will be sending you an email, hopefully you will reply.

[pouyamiralayi]

Hi @abzal0 the correct function is actually updateScript my bad! here is how i did it:

first defining the component type:

    domc.addType('slick-type', {
        model: {
            defaults: {
                ccid: '',
                tagName: 'div',
                resizable: true,
                components: [
                    {
                        type: 'image',
                    },
                    {
                        type: 'image',
                    }
                ],
                script: function () {
                    const id = '{[ ccid ]}'
                    try {
                        $('#' + id).slick('unslick');
                    } catch (e) {
                    }
                    $('#' + id).slick({
                        dots: true,
                        infinite: true,
                        speed: 300,
                        arrows: true,
                        adaptiveHeight: true
                    })
                }
            },
        },
        view: {
            init() {
                const ccid = this.model.ccid
                this.model.set('ccid', ccid)
                const viewObj = this
                const am = editor.AssetManager;
                const tImageView = am.getType('image').view;
                am.addType('image', {
                    view: {
                        onClick() {
                            tImageView.prototype.onClick.apply(this);
                            viewObj.updateScript()
                            this.em.get('Modal').close();
                        },
                    }
                })
            }
        }
    })

Every time the script runs, i reset the slickjs for the sake of re initialization which you can see in the script. I have also used image type directly as my component’s children so i don’t have to manually call the open-assets command on a custom trait! For the last thing, I have overwritten the asset manager onClick event to call our script. Cheers!