alchemy-widget 0.2.8 → 0.3.0-alpha.2

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.3.0-alpha.2 (2025-07-10)
+
+* Make `main_class_names` widget config add classes to the first child of the wrapper
+* Add `li_class_names` config to List widgets
+* Don't return client-version of ToolbarManager on the server
+
+## 0.3.0-alpha.1 (2024-02-15)
+
+* Upgrade to Alchemy v1.4.0
+
 ## 0.2.8 (2023-06-17)
 
 * Make the widget toolbar render area contents correctly + load scripts & styles

package/bootstrap.js

@@ -3,107 +3,3 @@ alchemy.requirePlugin('form', false);
 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/config/routes.js

@@ -0,0 +1,15 @@
+Plugin.addRoute({
+	name       : 'AlchemyWidgets#save',
+	methods    : 'post',
+	paths      : '/api/alchemywidgets/save',
+	policy     : 'logged_in',
+	permission : 'alchemy.widgets.save',
+});
+
+Plugin.addRoute({
+	name       : 'AlchemyWidgets#uploadImage',
+	methods    : 'post',
+	paths      : '/api/alchemywidgets/upload',
+	policy     : 'logged_in',
+	permission : 'alchemy.widgets.image.upload',
+});

package/config/settings.js

@@ -0,0 +1,26 @@
+const WIDGET_PLUGIN_GROUP = Plugin.getSettingsGroup();
+
+const CKEDITOR = WIDGET_PLUGIN_GROUP.createGroup('ckeditor');
+
+CKEDITOR.addSetting('path', {
+	type        : 'string',
+	default     : alchemy.plugins.styleboost ? '/public/ckeditor/5/ckeditor.js' : 'https://cdn.ckeditor.com/ckeditor5/35.3.2/inline/ckeditor.js',
+	description : 'The location of the ckeditor script',
+	action      : (value, value_instance) => {
+		alchemy.exposeStatic('ckeditor_path', value);
+	},
+});
+
+CKEDITOR.addSetting('toolbar', {
+	type        : 'string',
+	default     : 'heading | bold italic link bulletedList numberedList | indent outdent horizontalLine | blockQuote code codeBlock | imageUpload insertTable | undo redo',
+	description : 'The location of the ckeditor script',
+	action      : (value, value_instance) => {
+
+		if (value) {
+			value = value.split(' ');
+		}
+
+		alchemy.exposeStatic('ckeditor_toolbar', value);
+	},
+});

package/element/table_of_contents_element.js

@@ -46,6 +46,28 @@ TableOfContents.setAssignedProperty('content');
  */
 TableOfContents.setRole('navigation');
 
+/**
+ * The element to use for the containers
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+TableOfContents.setAttribute('container-element', function getValue(value) {
+	return value || 'ol';
+});
+
+/**
+ * The element to use for the entries
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+TableOfContents.setAttribute('entry-element', function getValue(value) {
+	return value || 'li';
+});
+
 /**
  * The parent query
  *
@@ -105,7 +127,7 @@ TableOfContents.setAttribute('truncate-length', {type: 'number'});
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.2.4
+ * @version  0.3.0
  */
 TableOfContents.setProperty(function entries() {
 
@@ -159,7 +181,9 @@ TableOfContents.setProperty(function entries() {
 				title_element = heading;
 			}
 
-			if (title_element.nodeName[0] == 'H' && isFinite(title_element.nodeName[1])) {
+			if (title_element.dataset.toc_level > 0) {
+				heading_level = +title_element.dataset.toc_level;
+			} else if (title_element.nodeName[0] == 'H' && isFinite(title_element.nodeName[1])) {
 				heading_level = +title_element.nodeName[1];
 			} else if (!heading_level) {
 				heading_level = 1;

package/helper/editor_toolbar_manager.js

@@ -146,7 +146,7 @@ EditorToolbarManager.setMethod(function queueModelFallback(model_name) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.7
- * @version  0.2.7
+ * @version  0.3.0
  *
  * @param    {String}   model_name
  */
@@ -164,7 +164,7 @@ EditorToolbarManager.setTypedMethod([Types.String.optional().nullable()], functi
 
 	if (Blast.isNode && model_name) {
 		this.addTemplateToRender('buttons', 'chimera/toolbar/create_button', {
-			model_name: model_name.underscore(),
+			model_name: Blast.parseClassPath(model_name).map(entry => entry.underscore()).join('.'),
 		});
 	}
 });

package/helper/widgets/00-widget.js

@@ -740,7 +740,7 @@ Widget.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.1
+ * @version  0.3.0
  */
 Widget.setMethod(function finalizePopulatedWidget() {
 
@@ -758,6 +758,22 @@ Widget.setMethod(function finalizePopulatedWidget() {
 		}
 	}
 
+	if (config.main_class_names) {
+		let main = this.widget?.children?.[0];
+
+		if (main) {
+			let name,
+				i;
+
+			let class_names = Array.cast(config.main_class_names);
+
+			for (i = 0; i < class_names.length; i++) {
+				name = class_names[i];
+				main.classList.add(name);
+			}
+		}
+	}
+
 	if (config.language) {
 		this.widget.setAttribute('lang', config.language);
 	} else {

package/helper/widgets/05-list.js

@@ -11,6 +11,23 @@
  */
 const List = Function.inherits('Alchemy.Widget.Container', 'List');
 
+/**
+ * Prepare the schema
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+List.constitute(function prepareSchema() {
+
+	// Classnames for the li elements
+	this.schema.addField('li_class_names', 'String', {
+		title       : 'Li-element CSS classes',
+		description : 'Configure extra CSS classes for the list items', 
+		array: true,
+	});
+});
+
 /**
  * Get a list of elements that could be child widgets
  *
@@ -39,4 +56,38 @@ List.setMethod(function initContainer() {
 	this.widget.list_element = ul;
 
 	initContainer.super.call(this);
+});
+
+/**
+ * Populate the contents of the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+List.setMethod(function finalizePopulatedWidget() {
+
+	const config = this.config;
+
+	if (config?.li_class_names) {
+		let li_elements = this.widget.list_element.querySelectorAll(':scope > li');
+
+		if (li_elements.length) {
+			let name,
+				i;
+
+			let class_names = Array.cast(config.li_class_names);
+
+			for (i = 0; i < class_names.length; i++) {
+				name = class_names[i];
+				
+				for (let li_element of li_elements) {
+					li_element.classList.add(name);
+				}
+			}
+		}
+	}
+
+
+	return finalizePopulatedWidget.super.call(this);
 });

package/lib/conduit_extras.js

@@ -1,3 +1,5 @@
+const MANAGER = Symbol('toolbar_manager');
+
 /**
  * Add a method to the conduit class to set the toolbar manager
  *
@@ -13,6 +15,8 @@ Classes.Alchemy.Conduit.Conduit.setMethod(function setToolbarInfo(document_or_mo
 	} catch (err) {
 		console.error('Error setting toolbar info', err);
 	}
+
+	return this[MANAGER];
 });
 
 /**
@@ -30,11 +34,18 @@ function _setToolbarInfo(document_or_model, scenario = 'frontend') {
 		return;
 	}
 
-	let manager = Classes.Alchemy.Widget.EditorToolbarManager.create(this);
-	manager.scenario = scenario;
+	let manager = this[MANAGER] || this.set('toolbar_manager');
+	
+	if (!manager) {
+		manager = Classes.Alchemy.Widget.EditorToolbarManager.create(this);
+		this[MANAGER] = manager;
+		this.set('toolbar_manager', manager);
+		this.expose('toolbar_manager', manager);
+	}
 
-	this.set('toolbar_manager', manager);
-	this.expose('toolbar_manager', manager);
+	if (scenario !== undefined) {
+		manager.scenario = scenario;
+	}
 
 	let document_watcher,
 	    document,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-widget",
 	"description": "The widget plugin for the AlchemyMVC",
-	"version": "0.2.8",
+	"version": "0.3.0-alpha.2",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -10,8 +10,8 @@
 		"widget"
 	],
 	"peerDependencies": {
-		"alchemymvc" : ">=1.3.0",
-		"alchemy-form": "~0.2.6"
+		"alchemymvc" : ">=1.4.0||>=1.4.0-alpha",
+		"alchemy-form": "~0.3.0||~0.3.0-alpha"
 	},
 	"repository": "11ways/alchemy-widget",
 	"license": "MIT",

package/view/elements/table_of_contents.hwk

@@ -1,25 +1,24 @@
 <% all_entries = self.tree %>
 
 {% macro printEntries %}
-	<ol>
+	<% this.printElement(self.container_element) %>
+		<% if (is_child) $0.classList.add('toc-is-child') %>
 		{% each entries as entry %}
 			{% run printEntry entry=entry %}
-			
-			{% if entry.children %}
-				<li>
-					{% run printEntries entries=entry.children %}
-				</li>
-			{% /if %}
 		{% /each %}
-	</ol>
+	<% this.closeElement(self.container_element) %>
 {% /macro %}
 
 {% macro printEntry %}
-	<li>
+	<% this.printElement(self.entry_element) %>
 		<a href="#{% entry.id %}">
 			{{ entry.title }}
 		</a>
-	</li>
+
+		{% if entry.children %}
+			{% run printEntries entries=entry.children is_child=true %}
+		{% /if %}
+	<% this.closeElement(self.entry_element) %>
 {% /macro %}
 
 {% run printEntries entries=all_entries %}