Issue #2772Opened May 13, 2020by Mohsen-Khakbiz0 reactions

[Question]: loading scripts/css to the canvas depending on traits

Question

hey there. first of all thanks for this sweet lovely tool.

what I need is to load js or css files to the canvas depending on traits. let's say I have a button with an option for making it triggering a lightbox. 1

now what I need is to only load the lightbox plugin's files only when this checkbox is checked. I couldn't manage doing this from Component's "script" property. in a clean way at least 2@2x

this one may work btw. but I just prefer to have something like a global list of scripts or styles, and at the end put them in my html something like canvas: { scripts: [] } but I want to be able to dynamically add to this list

Answers (1)

artfJune 5, 20200 reactions

When you use canvas: { scripts: [], styles: [] } it appends only those files to the canvas of the editor, so you won't see them in your final code (editor.getHtml()). There is no kind of global list but you still can tell the component to avoid including your script

const myScript = function() {
	const el = this;
	// ...
}

editor.Components.addType('...', {
	model: {
		init() {
			this.on('change:my-trait-prop', this.onTraitPropChange);
			this.onTraitPropChange(); // do the check on init
		},

		onTraitPropChange() {
			const prop = this.get('my-trait-prop');
			
			prop ? this.set({ script: myScript }) : this.set({ script: '' });
		}
	}
})

Related Questions and Answers

Continue research with similar issue discussions.

Paid Plugins That Match This Issue

Curated by issue keywords and label relevance to help you ship faster.

View all plugins

Loading paid plugin recommendations...

Browse Plugin Categories

Jump directly to plugin category pages on the marketplace.