alchemy-widget 0.3.0-alpha.1 → 0.3.0

package/helper/widgets/00-widget.js

@@ -35,6 +35,245 @@ Widget.makeAbstractClass();
  */
 Widget.startNewGroup('widgets');
 
+/**
+ * Standard widget categories.
+ * These are the universal categories available in all projects.
+ * Projects can register their own categories using Widget.registerCategory()
+ *
+ * Translation keys are derived automatically from the category name:
+ * - Title: category.name (e.g., "layout")
+ * - Description: "widget-category-{name}-description" (e.g., "widget-category-layout-description")
+ *
+ * Templates should pass filter parameters: widget=true category=true
+ */
+Widget.CATEGORIES = {
+	LAYOUT: {
+		name: 'layout',
+		icon: 'table-columns',
+		order: 10
+	},
+	TEXT: {
+		name: 'text',
+		icon: 'font',
+		order: 20
+	},
+	MEDIA: {
+		name: 'media',
+		icon: 'image',
+		order: 30
+	},
+	DATA: {
+		name: 'data',
+		icon: 'database',
+		order: 40
+	},
+	NAVIGATION: {
+		name: 'navigation',
+		icon: 'compass',
+		order: 50
+	},
+	INTERACTIVE: {
+		name: 'interactive',
+		icon: 'hand-pointer',
+		order: 60
+	},
+	ADVANCED: {
+		name: 'advanced',
+		icon: 'code',
+		order: 100
+	}
+};
+
+/**
+ * Storage for dynamically registered categories.
+ * Use Widget.registerCategory() to add new categories.
+ */
+Widget.REGISTERED_CATEGORIES = {};
+
+/**
+ * Register a new widget category.
+ * This allows projects to add their own categories without modifying the core.
+ *
+ * Translation keys are derived automatically from the category name:
+ * - Title: category.name (e.g., "monitoring")
+ * - Description: "widget-category-{name}-description" (e.g., "widget-category-monitoring-description")
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @param    {string}   key              The category key (e.g., 'MONITORING')
+ * @param    {Object}   config           Category configuration
+ * @param    {string}   config.name      Internal name (e.g., 'monitoring')
+ * @param    {string}   config.icon      FontAwesome icon name
+ * @param    {number}   [config.order]   Sort order (lower = earlier, default: 90)
+ */
+Widget.setStatic(function registerCategory(key, config) {
+
+	if (!key || typeof key !== 'string') {
+		throw new Error('Category key must be a non-empty string');
+	}
+
+	if (!config || typeof config !== 'object') {
+		throw new Error('Category config must be an object');
+	}
+
+	if (!config.name || typeof config.name !== 'string') {
+		throw new Error('Category config.name must be a non-empty string');
+	}
+
+	if (!config.icon || typeof config.icon !== 'string') {
+		throw new Error('Category config.icon must be a non-empty string');
+	}
+
+	// Normalize the key to uppercase
+	key = key.toUpperCase();
+
+	// Create the category config with defaults
+	let category = {
+		name  : config.name,
+		icon  : config.icon,
+		order : config.order ?? 90
+	};
+
+	// Store in registered categories
+	this.REGISTERED_CATEGORIES[key] = category;
+
+	// Also add to CATEGORIES for backwards compatibility and easy access
+	this.CATEGORIES[key] = category;
+});
+
+/**
+ * Set the widget category
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @param    {String}   category   The category name (use CATEGORIES.*.name or custom string)
+ */
+Widget.setStatic(function setCategory(category) {
+	this.category = category;
+});
+
+/**
+ * Set the widget description
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @param    {String}   description   A short description of what the widget does
+ */
+Widget.setStatic(function setDescription(description) {
+	this.description = description;
+});
+
+/**
+ * Set the widget icon (FontAwesome icon name)
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @param    {String}   icon   The icon name (e.g., 'table', 'font', 'image')
+ */
+Widget.setStatic(function setIcon(icon) {
+	this.icon = icon;
+});
+
+/**
+ * Override the auto-generated title
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @param    {String}   title   The display title for the widget
+ */
+Widget.setStatic(function setTitle(title) {
+	this.title = title;
+});
+
+/**
+ * Get category info for a given category name.
+ * Supports built-in categories, registered categories, and custom strings.
+ * Falls back to ADVANCED category if no category is specified.
+ *
+ * Translation keys are derived from the category name at render time:
+ * - Title: category.name (e.g., "layout")
+ * - Description: "widget-category-{name}-description"
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @param    {String}   category   The category name
+ *
+ * @return   {Object}   Category info with name, icon, order
+ */
+Widget.setStatic(function getCategoryInfo(category) {
+
+	// Default to 'advanced' if no category specified
+	if (!category) {
+		return this.CATEGORIES.ADVANCED;
+	}
+
+	// Check built-in categories (includes registered ones added via registerCategory)
+	for (let key in this.CATEGORIES) {
+		if (this.CATEGORIES[key].name === category) {
+			return this.CATEGORIES[key];
+		}
+	}
+
+	// Return a default structure for unknown/custom categories
+	// These are categories set via widget.category = 'custom' without registerCategory()
+	return {
+		name  : category,
+		icon  : 'puzzle-piece',
+		order : 90
+	};
+});
+
+/**
+ * Get all available categories.
+ * Returns built-in categories, registered categories, and any custom categories
+ * discovered from widgets that set their category to a custom string.
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @return   {Array}   Array of category info objects, sorted by order
+ */
+Widget.setStatic(function getAllCategories() {
+
+	let categories = new Map();
+
+	// Add built-in categories (includes registered ones added via registerCategory)
+	for (let key in this.CATEGORIES) {
+		let cat = this.CATEGORIES[key];
+		categories.set(cat.name, cat);
+	}
+
+	// Check all registered widgets for custom categories
+	// (widgets that set category to a custom string without using registerCategory)
+	let widgets = alchemy.getClassGroup('widgets');
+
+	if (widgets) {
+		for (let widget of Object.values(widgets)) {
+			let category = widget.category;
+
+			if (category && !categories.has(category)) {
+				categories.set(category, this.getCategoryInfo(category));
+			}
+		}
+	}
+
+	// Convert to array and sort by order
+	return Array.from(categories.values()).sortByPath(1, 'order');
+});
+
 /**
  * Return the class-wide schema
  *
@@ -740,7 +979,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 +997,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-column.js

@@ -10,3 +10,7 @@
  * @param    {Object}   data
  */
 const Column = Function.inherits('Alchemy.Widget.Container', 'Column');
+
+// Widget metadata
+Column.setCategory('layout');
+Column.setIcon('grip-lines-vertical');

package/helper/widgets/05-list.js

@@ -11,6 +11,27 @@
  */
 const List = Function.inherits('Alchemy.Widget.Container', 'List');
 
+// Widget metadata
+List.setCategory('layout');
+List.setIcon('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 +60,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/helper/widgets/05-row.js

@@ -10,3 +10,7 @@
  * @param    {Object}   data
  */
 const Row = Function.inherits('Alchemy.Widget.Container', 'Row');
+
+// Widget metadata
+Row.setCategory('layout');
+Row.setIcon('grip-lines');

package/helper/widgets/alchemy_field_widget.js

@@ -11,6 +11,11 @@
  */
 const AlchemyField = Function.inherits('Alchemy.Widget', 'AlchemyField');
 
+// Widget metadata
+AlchemyField.setTitle('Form Field');
+AlchemyField.setCategory('data');
+AlchemyField.setIcon('i-cursor');
+
 /**
  * Prepare the schema
  *

package/helper/widgets/alchemy_form_widget.js

@@ -11,6 +11,11 @@
  */
 const AlchemyForm = Function.inherits('Alchemy.Widget', 'AlchemyForm');
 
+// Widget metadata
+AlchemyForm.setTitle('Form');
+AlchemyForm.setCategory('data');
+AlchemyForm.setIcon('rectangle-list');
+
 /**
  * Prepare the schema
  *

package/helper/widgets/alchemy_table_widget.js

@@ -11,6 +11,10 @@
  */
 const AlchemyTable = Function.inherits('Alchemy.Widget', 'AlchemyTable');
 
+// Widget metadata
+AlchemyTable.setCategory('data');
+AlchemyTable.setIcon('table');
+
 /**
  * Prepare the schema
  *

package/helper/widgets/alchemy_tabs_widget.js

@@ -11,6 +11,11 @@
  */
 const Tabs = Function.inherits('Alchemy.Widget', 'AlchemyTabs');
 
+// Widget metadata
+Tabs.setTitle('Tabs');
+Tabs.setCategory('layout');
+Tabs.setIcon('folder');
+
 /**
  * Prepare the schema
  *

package/helper/widgets/hawkejs_template.js

@@ -11,6 +11,10 @@
  */
 const Template = Function.inherits('Alchemy.Widget.Sourcecode', 'HawkejsTemplate');
 
+// Widget metadata
+Template.setCategory('advanced');
+Template.setIcon('file-lines');
+
 /**
  * Populate the widget
  *

package/helper/widgets/header.js

@@ -11,6 +11,10 @@
  */
 const Header = Function.inherits('Alchemy.Widget', 'Header');
 
+// Widget metadata
+Header.setCategory('text');
+Header.setIcon('heading');
+
 /**
  * Prepare the schema
  *

package/helper/widgets/html.js

@@ -12,6 +12,10 @@
  */
 const Html = Function.inherits('Alchemy.Widget', 'Html');
 
+// Widget metadata
+Html.setCategory('advanced');
+Html.setIcon('code');
+
 /**
  * Prepare the schema
  *

package/helper/widgets/markdown.js

@@ -11,6 +11,10 @@
  */
 const Markdown = Function.inherits('Alchemy.Widget', 'Markdown');
 
+// Widget metadata
+Markdown.setCategory('text');
+Markdown.setIcon('file-code');
+
 /**
  * Prepare the schema
  *

package/helper/widgets/sourcecode.js

@@ -11,6 +11,10 @@
  */
 const Sourcecode = Function.inherits('Alchemy.Widget', 'Sourcecode');
 
+// Widget metadata
+Sourcecode.setCategory('advanced');
+Sourcecode.setIcon('file-code');
+
 /**
  * Prepare the schema
  *

package/helper/widgets/table_of_contents.js

@@ -11,6 +11,10 @@
  */
 const Toc = Function.inherits('Alchemy.Widget', 'TableOfContents');
 
+// Widget metadata
+Toc.setCategory('navigation');
+Toc.setIcon('list-ol');
+
 /**
  * Populate the widget
  *

package/helper/widgets/text.js

@@ -11,6 +11,10 @@
  */
 const Text = Function.inherits('Alchemy.Widget', 'Text');
 
+// Widget metadata
+Text.setCategory('text');
+Text.setIcon('align-left');
+
 /**
  * Prepare the schema
  *

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.3.0-alpha.1",
+	"version": "0.3.0",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -11,7 +11,7 @@
 	],
 	"peerDependencies": {
 		"alchemymvc" : ">=1.4.0||>=1.4.0-alpha",
-		"alchemy-form": "~0.3.0||~0.3.0-alpha"
+		"alchemy-form": ">=0.3.0||>=0.3.0-alpha"
 	},
 	"repository": "11ways/alchemy-widget",
 	"license": "MIT",

package/view/widget/elements/al_editor_toolbar.hwk

@@ -1,3 +1,51 @@
 <div data-he-slot="left"></div>
+
 <div data-he-slot="center"></div>
-<div data-he-slot="right"></div>
+
+<div data-he-slot="right">
+	<al-button class="start-edit" state="ready">
+		<al-icon icon-name="pencil"></al-icon>
+		{%t "start-editing" %}
+	</al-button>
+
+	<al-button class="stop-and-save" state="ready">
+		<al-state state-name="saving">
+			<al-icon icon-name="spinner" icon-flags="spin"></al-icon>
+			{%t "saving" %}
+		</al-state>
+		<al-state state-name="saving-before-stop">
+			<al-icon icon-name="spinner" icon-flags="spin"></al-icon>
+			{%t "saving" %}
+		</al-state>
+		<al-state state-name="saved">
+			<al-icon icon-name="badge-check" icon-flags="beat"></al-icon>
+			{%t "saved" %}
+		</al-state>
+		<al-state state-name="ready">
+			<al-icon icon-name="floppy-disk-circle-arrow-right"></al-icon>
+			{%t "save-and-stop-editing" %}
+		</al-state>
+	</al-button>
+
+	<al-button class="stop-edit" state="ready">
+		<al-icon icon-name="pencil-slash"></al-icon>
+		{%t "stop-editing" %}
+	</al-button>
+
+	<al-button class="save-all" state="ready">
+		<al-state state-name="saving">
+			<al-icon icon-name="spinner" icon-flags="spin"></al-icon>
+			{%t "saving" %}
+		</al-state>
+		<al-state state-name="saved">
+			<al-icon icon-name="badge-check" icon-flags="beat"></al-icon>
+			{%t "saved" %}
+		</al-state>
+		<al-state state-name="ready">
+			<al-icon icon-name="floppy-disk"></al-icon>
+			{%t "save-all" %}
+		</al-state>
+	</al-button>
+
+	<div data-area="buttons"></div>
+</div>

package/view/widget/elements/al_widget_toolbar.hwk

@@ -41,7 +41,7 @@
 	</al-state>
 </al-button>
 
-{% if Router.routeConfig('Chimera.Editor#index') %}
+{% if Router.routeConfig('Chimera.Editor#index') && (not toolbar_manager or toolbar_manager.scenario neq 'chimera') %}
 	<a href="/chimera/" data-he-link="false">
 		<al-icon icon-style="duotone" icon-name="display-code"></al-icon>
 		{%t "go-to-backend" %}

package/view/widget/elements/widget_picker.hwk

@@ -0,0 +1,55 @@
+{# Widget picker dialog - using flat widgets list to avoid nested loop issues #}
+<div class="widget-picker">
+	<div class="widget-picker-header">
+		<input
+			type="search" 
+			class="widget-picker-search" 
+			placeholder={% __d('widget-picker-search-placeholder') %}
+			autocomplete="off"
+		>
+	</div>
+	
+	<div class="widget-picker-body">
+		<aside class="widget-picker-categories">
+			<button class="category-btn active" data-category="">
+				<al-icon icon-name="grid-2"></al-icon>
+				<span>{%t 'widget-picker-all-categories' %}</span>
+			</button>
+			{% each categories as category %}
+			<button
+				class="category-btn"
+				data-category={% category.name %}
+			>
+				<al-icon icon-name={% category.icon %}></al-icon>
+				<span>{%t category.name widget=true category=true %}</span>
+			</button>
+			{% /each %}
+		</aside>
+		
+		<main class="widget-picker-list">
+			{% each widgets as widget %}
+			<button class="widget-item" 
+					data-type={% widget.type_name %}
+					data-category={% widget.category %}
+					tabindex="0">
+				<div class="widget-item-icon">
+					<al-icon icon-name={% widget.icon %}></al-icon>
+				</div>
+				<div class="widget-item-content">
+					<span class="widget-item-title">{{ widget.title }}</span>
+					{% if widget.description %}
+						<span class="widget-item-description">{{ widget.description }}</span>
+					{% else %}
+						<span class="widget-item-description">{%t widget.description_key widget=true %}</span>
+					{% /if %}
+				</div>
+			</button>
+			{% /each %}
+			
+			<div class="widget-picker-empty" hidden>
+				<al-icon icon-name="search"></al-icon>
+				<p>{%t 'widget-picker-no-results' %}</p>
+			</div>
+		</main>
+	</div>
+</div>