Slick.js reload the slider on image asset change
Hi @abzal0 the correct function is actually `updateScript my bad! here is how i did it: first defining the component type: 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 t...
Read full answer below ↓Question
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/[email protected]/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?Answers (3)
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!
@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.
@abzal0
how to reinitialize 'script' function inside editor.blockmanager.add to reload the jquery code of slider?
for your script code, i suggest you move it to the component definition and in there, you can issue:
this.view.updateScript()
for script reloads. Cheers!
Related Questions and Answers
Continue research with similar issue discussions.
Issue #2099
Changing asset via command
Hello All, I would like to emulate the assets manager image replace behavior. for example I created a view on the side with all the images...
Issue #1762
image not change while we fetch html using editor.getHtml()
Hello @artf I am using grapes.js for my website-builder tool into my website. While i double click on any image the asset-manager will open...
Issue #541
updatesrc on image change
I must be missing something, but when I change an image, the localstorage html isn't updating, however, changing the text does. So when I r...
Issue #3205
with buttons
https://grapesjs.com/demo.html when i edit the button text to 'test' after reload the result:
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.