alchemy-widget 0.2.0 → 0.2.2

package/CHANGELOG.md

@@ -1,3 +1,27 @@
+## 0.2.2 (2022-12-23)
+
+* Fix widgets not being populated properly
+
+## 0.2.1 (2022-12-23)
+
+* Add a `-first` modifier class to the first visible entry of a table-of-contents element
+* Make HTML widget editable
+* Also store and retrieve copied widget config from localStorage
+* Move `Container` widget init logic from the custom-element to the main widget instance
+* Disable most `backdrop-filter` properties, they caused too many FPS issues
+* Add the ability to hide widgets from the public
+* Allow overriding the language (`lang` attribute) of a widget
+* Fix config of container widgets not being saved
+* Only add minium dimensions when editing
+* Add `child-role` attribute & use it to set the default role of child widgets
+* Add the `toc-has-content` or `toc-is-empty` class to `al-toc` elements
+* Fix issue where `Text` widget would break when edited with LanguageTool extension
+* Do not truncate titles in table-of-contents automatically
+* Fix nesting levels in `al-toc`
+* Only allow text inside header widgets
+* Move default `Widget#populateWidget()` code to `Widget#finalizePopulatedWidget()`
+* Add `HawkejsTemplate` widget
+
 ## 0.2.0 (2022-11-02)
 
 * Use `al-` prefix for all custom elements

package/assets/stylesheets/alchemy_widgets.scss

@@ -2,6 +2,10 @@
 	al-widget-toolbar {
 		display: none;
 	}
+
+	[hidden] {
+		display: none !important;
+	}
 }
 
 html.logged-in {
@@ -110,6 +114,7 @@ al-widgets-column {
 	&.aw-editing {
 		position: relative;
 		min-height: 3rem;
+		min-width: 10rem;
 	}
 
 	> * {
@@ -127,7 +132,7 @@ al-widget {
 			background: white;
 			border: 2px dashed rgba(0, 0, 0, 0.4);
 			pointer-events: none;
-			backdrop-filter: invert(80%);
+			//backdrop-filter: invert(80%);
 			clip-path: polygon(0% 0%, 0% 100%, 2px 100%, 2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 2px), 0 calc(100% - 2px), 0 100%, 100% 100%, 100% 0)
 		}
 	}
@@ -159,11 +164,6 @@ al-widgets-column {
 	}
 }
 
-al-widgets {
-	min-width: 10rem;
-	min-height: 10rem;
-}
-
 al-widgets-row {
 	flex-flow: row;
 	flex: 10 10 auto;
@@ -287,12 +287,13 @@ al-widget {
 
 	&.aw-editing {
 		min-height: 2rem;
+		min-width: 2rem;
 
 		&:hover {
 			background: rgba(60, 60, 120, 0.2);
 
-			// This actually causes some glitches on Firefox :/
-			backdrop-filter: blur(4px);
+			// This actually causes some glitches on Firefox and chrome too :/
+			//backdrop-filter: blur(4px);
 		}
 	}
 
@@ -423,4 +424,8 @@ al-toc {
 			display: block;
 		}
 	}
+}
+
+.aw-hidden {
+	opacity: 0.8;
 }

package/bootstrap.js

@@ -4,9 +4,106 @@ if (!alchemy.plugins.form) {
 	throw new Error('The alchemy-form plugin has to be loaded BEFORE alchemy-widget');
 }
 
+/* Ckeditor 5 available toolbar buttons (from styleboost build)
+[
+	"blockQuote",
+	"bold",
+	"code",
+	"codeBlock",
+	"selectAll",
+	"undo",
+	"redo",
+	"heading",
+	"horizontalLine",
+	"imageTextAlternative",
+	"toggleImageCaption",
+	"imageStyle:inline",
+	"imageStyle:alignLeft",
+	"imageStyle:alignRight",
+	"imageStyle:alignCenter",
+	"imageStyle:alignBlockLeft",
+	"imageStyle:alignBlockRight",
+	"imageStyle:block",
+	"imageStyle:side",
+	"imageStyle:wrapText",
+	"imageStyle:breakText",
+	"uploadImage",
+	"imageUpload",
+	"indent",
+	"outdent",
+	"italic",
+	"link",
+	"linkImage",
+	"numberedList",
+	"bulletedList",
+	"mediaEmbed",
+	"removeFormat",
+	"sourceEditing",
+	"strikethrough",
+	"insertTable",
+	"tableColumn",
+	"tableRow",
+	"mergeTableCells",
+	"toggleTableCaption",
+	"tableCellProperties",
+	"tableProperties",
+	"todoList"
+]
+*/
+
+let options = {
+	ckeditor_path: null,
+	ckeditor_toolbar: [
+		'heading',
+		'|',
+		'bold', 'italic', 'link', 'bulletedList', 'numberedList',
+		'|',
+		'indent',
+		'outdent',
+		'horizontalLine',
+		'|',
+		'blockQuote',
+		'code',
+		'codeBlock',
+		'|',
+		'imageUpload',
+		'insertTable',
+		'|',
+		'undo', 'redo',
+	],
+};
+
+// Inject the user-overridden options
+alchemy.plugins.widget = Object.assign(options, alchemy.plugins.widget);
+
+if (!options.ckeditor_path) {
+	if (alchemy.plugins.styleboost) {
+		options.ckeditor_path = '/public/ckeditor/5/ckeditor.js';
+	} else {
+		options.ckeditor_path = 'https://cdn.ckeditor.com/ckeditor5/35.3.2/inline/ckeditor.js';
+	}
+}
+
+if (options.ckeditor_path) {
+	alchemy.exposeStatic('ckeditor_path', options.ckeditor_path);
+}
+
+if (options.ckeditor_toolbar) {
+	alchemy.exposeStatic('ckeditor_toolbar', options.ckeditor_toolbar);
+}
+
 Router.add({
 	name       : 'AlchemyWidgets#save',
 	methods    : 'post',
 	paths      : '/api/alchemywidgets/save',
 	policy     : 'logged_in',
+	permission : 'alchemy.widgets.save',
 });
+
+Router.add({
+	name       : 'AlchemyWidgets#uploadImage',
+	methods    : 'post',
+	paths      : '/api/alchemywidgets/upload',
+	policy     : 'logged_in',
+	permission : 'alchemy.widgets.image.upload',
+});

package/controller/alchemy_widgets_controller.js

@@ -184,4 +184,68 @@ AlchemyWidgets.setAction(async function save(conduit) {
 	};
 
 	conduit.end(result);
+});
+
+/**
+ * Handle an image upload from within CKeditor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+AlchemyWidgets.setAction(async function uploadImage(conduit) {
+
+	let file = conduit.files.upload;
+
+	const MediaFile = this.getModel('MediaFile');
+
+	let name = file.name.split('.');
+
+	// Remove the last piece if there are more than 1
+	if (name.length > 1) {
+		name.pop();
+	}
+
+	// Join them again
+	name = name.join('.');
+
+	const options = {
+		move     : true,
+		filename : file.name,
+		name     : name,
+	};
+
+	MediaFile.addFile(file.path, options, (err, result) => {
+
+		if (err) {
+			return conduit.error(err);
+		}
+
+		const params = {
+			id : result._id,
+		};
+
+		let default_path = alchemy.routeUrl('Media::image', params);
+		let url = RURL.parse(default_path);
+
+		let path_800 = url.clone();
+		path_800.param('width', '800');
+
+		let path_1024 = url.clone();
+		path_1024.param('height', '1024');
+
+		let path_1920 = url.clone();
+		path_1920.param('width', '1920');
+
+		let response = {
+			urls: {
+				default : default_path,
+				'800'   : path_800+'',
+				'1024'  : path_1024+'',
+				'1920'  : path_1920+''
+			}
+		};
+
+		conduit.end(response);
+	});
 });

package/element/00-widget_base_element.js

@@ -364,7 +364,7 @@ Base.setMethod(async function save() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.2.1
  */
 Base.setMethod(async function copyConfigToClipboard() {
 
@@ -377,11 +377,15 @@ Base.setMethod(async function copyConfigToClipboard() {
 	value._altype = 'widget';
 	value.type = this.type;
 
+	let dried = JSON.dry(value, null, '\t');
+
 	try {
-		await navigator.clipboard.writeText(JSON.dry(value, null, '\t'));
+		await navigator.clipboard.writeText(dried);
 	} catch (err) {
 		console.error('Failed to copy:', err);
 	}
+
+	localStorage._copied_widget_config = dried;
 });
 
 /**
@@ -389,7 +393,7 @@ Base.setMethod(async function copyConfigToClipboard() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.2.1
  */
 Base.setMethod(async function getConfigFromClipboard() {
 
@@ -398,7 +402,12 @@ Base.setMethod(async function getConfigFromClipboard() {
 	try {
 		result = await navigator.clipboard.readText();
 	} catch (err) {
-		return false;
+
+		if (!localStorage._copied_widget_config) {
+			return false;
+		} else {
+			result = localStorage._copied_widget_config;
+		}
 	}
 
 	if (result) {

package/element/05-widget_element.js

@@ -79,6 +79,15 @@ Widget.setAssignedProperty('filter_value');
  */
 Widget.setAttribute('child-class');
 
+/**
+ * A role to give to each child widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setAttribute('child-role');
+
 /**
  * Is this widget being edited?
  *
@@ -206,7 +215,7 @@ Widget.setMethod(function getValueFromRecord(record) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.6
+ * @version  0.2.1
  */
 Widget.setMethod(function applyValue(value) {
 
@@ -246,7 +255,7 @@ Widget.setMethod(function applyValue(value) {
 	}
 
 	this.instance.config = config;
-	let promise = this.instance.populateWidget();
+	let promise = this.instance.loadWidget();
 
 	if (promise) {
 		this.delayAssemble(promise);
@@ -269,13 +278,11 @@ Widget.setMethod(function syncConfig() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 Widget.setMethod(function startEditor() {
 
-	if (!this.instance) {
-		throw new Error('Unable to start the editor: this widget element has no accompanying instance');
-	}
+	this.assertWidgetInstance();
 
 	this.instance.startEditor();
 	this.addEditEventListeners();
@@ -286,19 +293,33 @@ Widget.setMethod(function startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.5
+ * @version  0.2.1
  */
 Widget.setMethod(function stopEditor() {
 
-	if (!this.instance) {
-		throw new Error('Unable to stop the editor: this widget element has no accompanying instance');
-	}
+	this.assertWidgetInstance();
 
 	this.unselectWidget();
 	this.instance.stopEditor();
 	this.removeEditEventListeners();
 });
 
+/**
+ * Make sure there is an instance
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+Widget.setMethod(function assertWidgetInstance() {
+
+	if (!this.instance) {
+		console.error('Problem with widget element:', this);
+		throw new Error('Unable to stop the editor: this ' + this.tagName + ' element has no accompanying instance');
+	}
+
+});
+
 /**
  * Mouse click
  *

package/element/10-container_elements.js

@@ -62,21 +62,22 @@ AlchemyWidgets.setAssignedProperty('context_variables', function getContextData(
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 AlchemyWidgets.setProperty(function value() {
 
-	let widgets = this.getWidgetsConfig(),
+	let config = this.instance.config,
+	    widgets = this.getWidgetsConfig(),
 	    result;
+	
+	config = Object.assign({}, config, {widgets});
 
 	if (this.nodeName == 'AL-WIDGETS') {
-		result = {widgets};
+		result = config;
 	} else {
 		result = {
 			type   : this.instance.constructor.type_name,
-			config : {
-				widgets : widgets
-			}
+			config : config,
 		};
 	}
 
@@ -91,7 +92,7 @@ AlchemyWidgets.setProperty(function value() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.2.1
  */
 AlchemyWidgets.setMethod(function applyValue(value) {
 
@@ -119,24 +120,18 @@ AlchemyWidgets.setMethod(function applyValue(value) {
 		if (config.class_names) {
 			Hawkejs.addClasses(this, config.class_names);
 		}
+	} else {
+		config = this.instance?.config || {};
 	}
 
 	if (!this.instance) {
 		return;
 	}
 
+	config.widgets = widgets;
+
 	this.instance.config = config;
 	this.instance.initContainer();
-
-	if (!widgets || !widgets.length) {
-		return;
-	}
-
-	let widget;
-
-	for (widget of widgets) {
-		this.addWidget(widget.type, widget.config);
-	}
 });
 
 /**

package/element/table_of_contents_element.js

@@ -88,12 +88,21 @@ TableOfContents.setAttribute('title-selector');
  */
 TableOfContents.setAttribute('intersection-class');
 
+/**
+ * Should titles be truncated?
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+TableOfContents.setAttribute('truncate-length', {type: 'number'});
+
 /**
  * Get the entries
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.2.0
+ * @version  0.2.1
  */
 TableOfContents.setProperty(function entries() {
 
@@ -138,7 +147,7 @@ TableOfContents.setProperty(function entries() {
 
 			let title_element,
 			    starts_level,
-				ends_level;
+			    ends_level;
 
 			if (this.title_selector) {
 				title_element = element.querySelector(this.title_selector);
@@ -155,7 +164,10 @@ TableOfContents.setProperty(function entries() {
 					current_level = heading_level;
 				} else if (heading_level > current_level) {
 					current_level++;
-					starts_level = true;
+
+					if (last_entry) {
+						last_entry.starts_level = true;
+					}
 				} else if (heading_level == current_level && last_entry) {
 					last_entry.starts_level = false;
 				} else if (heading_level < current_level) {
@@ -169,7 +181,9 @@ TableOfContents.setProperty(function entries() {
 
 			title = (title_element.toc_title || title_element.textContent || '').trim();
 
-			title = title.truncate(30);
+			if (this.truncate_length) {
+				title = title.truncate(this.truncate_length);
+			}
 
 			// Don't add empty titles
 			if (!title) {
@@ -191,7 +205,7 @@ TableOfContents.setProperty(function entries() {
 		let ended_level = false,
 		    entries = result,
 		    current_branch,
-			current_nodes = [];
+		    current_nodes = [];
 
 		result = current_nodes;
 		last_entry = null;
@@ -255,7 +269,7 @@ TableOfContents.setProperty(function entries() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.1.2
+ * @version  0.2.1
  */
 TableOfContents.setMethod(async function introduced() {
 
@@ -263,7 +277,8 @@ TableOfContents.setMethod(async function introduced() {
 
 	const observer = new IntersectionObserver(entries => {
 
-		let class_name = this.intersection_class || 'visible';
+		let class_name = this.intersection_class || 'visible',
+		    first_name = class_name + '-first';
 
 		for (let entry of entries) {
 			const id = entry.target.getAttribute('id');
@@ -281,6 +296,28 @@ TableOfContents.setMethod(async function introduced() {
 				element.classList.remove(class_name);
 			}
 		};
+
+		let is_visible,
+		    all_marked = this.querySelectorAll('.' + class_name + ', .' + first_name),
+		    element,
+			seen = 0,
+		    i;
+		
+		for (i = 0; i < all_marked.length; i++) {
+			element = all_marked[i];
+			is_visible = element.classList.contains(class_name);
+
+			if (is_visible && seen == 0) {
+				element.classList.add(first_name);
+			} else {
+				element.classList.remove(first_name);
+			}
+
+			if (is_visible) {
+				seen++;
+			}
+		}
+		
 	});
 
 	for (let entry of this.entries) {