alchemy-widget 0.3.0-alpha.2 → 0.3.0

package/element/30-base_toolbar_element.js

@@ -65,6 +65,10 @@ Toolbar.addElementGetter('watchers_element', '.watchers');
 Toolbar.setMethod(function onToolbarManagerAssignment(manager, old_manager) {
 	if (manager != old_manager) {
 		this.prepareToolbarManager(manager, old_manager);
+	} else if (manager) {
+		// Same instance re-assigned - state may have changed
+		// Re-attach the document watcher to pick up any new viewers
+		this.attachDocumentWatcher(manager.state?.document_watcher);
 	}
 });
 
@@ -97,6 +101,15 @@ Toolbar.setMethod(function prepareToolbarManager(manager, old_manager) {
 		return;
 	}
 
+	// Listen for the manager being replaced (e.g., after server restart and reconnection)
+	manager.on('replaced', (new_manager) => {
+		if (new_manager && new_manager !== manager) {
+			// Clear the PREPARED flag so the new manager can be prepared
+			new_manager[PREPARED] = false;
+			this.prepareToolbarManager(new_manager, manager);
+		}
+	});
+
 	let clear_counts = {};
 
 	manager.watchProperty('document_watcher', watcher => {
@@ -195,10 +208,18 @@ Toolbar.setMethod(function attachDocumentWatcher(watcher) {
 
 						if (!viewer.info) {
 							// The info isn't always set due to race conditions
-							viewer.info = await watcher.getUserInfo(viewer.user_id);
+							try {
+								viewer.info = await watcher.getUserInfo(viewer.user_id);
+							} catch (err) {
+								// getUserInfo might fail if WebSocket is disconnected
+								continue;
+							}
 						}
 
-						users.push(viewer.info);
+						// Only push if we have valid info
+						if (viewer.info) {
+							users.push(viewer.info);
+						}
 					}
 				}
 
@@ -229,3 +250,169 @@ Toolbar.setMethod(function getAreaElement(area) {
 
 	return this.querySelector('[data-area="' + area + '"]');
 });
+
+/**
+ * Get the widget containers to edit.
+ * Child classes should override this.
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @returns  {Array}   Array of widget elements
+ */
+Toolbar.setMethod(function getTargetWidgets() {
+	return [];
+});
+
+/**
+ * Start editing the target widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Toolbar.setMethod(function startEditing() {
+
+	let elements = this.getTargetWidgets();
+
+	if (!elements.length) {
+		return;
+	}
+
+	document.body.classList.add('editing-blocks');
+
+	for (let element of elements) {
+		element.startEditor();
+	}
+
+	this.setState('editing');
+});
+
+/**
+ * Stop editing the target widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Toolbar.setMethod(function stopEditing() {
+
+	let elements = this.getTargetWidgets();
+
+	document.body.classList.remove('editing-blocks');
+
+	for (let element of elements) {
+		element.stopEditor();
+	}
+
+	this.setState('ready');
+});
+
+/**
+ * Save all the target widgets
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Toolbar.setMethod(async function saveAll() {
+
+	if (this._saving) {
+		try {
+			await this._saving;
+		} catch (err) {
+			// Ignore
+		}
+	}
+
+	this._saving = null;
+
+	let elements = this.getTargetWidgets();
+	let widget_data = [];
+	let pledge;
+
+	for (let element of elements) {
+		let entry = element.gatherSaveData();
+		if (entry) {
+			widget_data.push(entry);
+		}
+	}
+
+	if (widget_data.length) {
+		let config = {
+			href: alchemy.routeUrl('AlchemyWidgets#save'),
+			post: {
+				widgets: widget_data
+			}
+		};
+
+		pledge = alchemy.fetch(config);
+		this._saving = pledge;
+	}
+
+	return pledge;
+});
+
+/**
+ * Save all and update button states
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ *
+ * @param    {Boolean}   before_stop   Whether this is before stopping editing
+ */
+Toolbar.setMethod(async function saveAllAndUpdateButtonStates(before_stop) {
+
+	let state = 'saving',
+	    button;
+
+	if (before_stop) {
+		button = this.button_stop_and_save;
+		state += '-before-stop';
+	} else {
+		button = this.button_save_all;
+	}
+
+	if (!button) {
+		// No button available, just save
+		return this.saveAll();
+	}
+
+	this.setState(state);
+	button.setState(state);
+
+	let save_error = null;
+
+	let restore_toolbar_state = this.wrapForCurrentState(() => {
+		if (save_error) {
+			this.setState('error');
+		} else {
+			this.setState('editing');
+		}
+	});
+
+	let restore_button_state = button.wrapForCurrentState(() => {
+		if (save_error) {
+			button.setState('error');
+		} else {
+			button.setState('saved', 2500, 'ready');
+		}
+	});
+
+	try {
+		await this.saveAll();
+	} catch (err) {
+		save_error = err;
+	}
+
+	restore_toolbar_state();
+	restore_button_state();
+
+	if (save_error) {
+		return false;
+	}
+
+	return true;
+});

package/element/editor_toolbar_element.js

@@ -16,15 +16,135 @@ let Toolbar = Function.inherits('Alchemy.Element.Widget.BaseToolbar', 'EditorToo
  */
 Toolbar.setTemplateFile('widget/elements/al_editor_toolbar');
 
+/**
+ * The start-edit button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Toolbar.addElementGetter('button_start', 'al-button.start-edit');
+
+/**
+ * The stop-edit button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Toolbar.addElementGetter('button_stop', 'al-button.stop-edit');
+
+/**
+ * The stop-and-save button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Toolbar.addElementGetter('button_stop_and_save', 'al-button.stop-and-save');
+
+/**
+ * The save-all button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Toolbar.addElementGetter('button_save_all', 'al-button.save-all');
+
+/**
+ * Get the target widgets - only those matching the toolbar manager's document
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+Toolbar.setMethod(function getTargetWidgets() {
+
+	let manager = this.toolbar_manager;
+
+	if (!manager) {
+		return [];
+	}
+
+	// Get the document from the manager
+	let doc = manager.state?.document_watcher;
+
+	if (!doc) {
+		// No document set, return empty
+		return [];
+	}
+
+	let doc_pk = doc.state?.pk;
+
+	if (!doc_pk) {
+		return [];
+	}
+
+	// Find all al-widgets elements and filter to those with matching record
+	let all_widgets = document.querySelectorAll('al-widgets');
+	let result = [];
+
+	for (let widget of all_widgets) {
+		if (widget.record && widget.record.$pk == doc_pk) {
+			result.push(widget);
+		}
+	}
+
+	return result;
+});
+
 /**
  * Added to the dom for the first time
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.7
- * @version  0.2.7
+ * @version  0.3.0
  */
 Toolbar.setMethod(async function introduced() {
 
 	this.prepareToolbarManager(this.toolbar_manager);
 
+	// Set up button event listeners
+	if (this.button_start) {
+		this.button_start.addEventListener('activate', async e => {
+			this.startEditing();
+		});
+	}
+
+	if (this.button_stop) {
+		this.button_stop.addEventListener('activate', async e => {
+			this.stopEditing();
+		});
+	}
+
+	if (this.button_save_all) {
+		this.button_save_all.addEventListener('activate', e => {
+			this.saveAllAndUpdateButtonStates(false);
+		});
+	}
+
+	if (this.button_stop_and_save) {
+		this.button_stop_and_save.addEventListener('activate', async e => {
+			let saved = await this.saveAllAndUpdateButtonStates(true);
+			if (saved) {
+				this.stopEditing();
+			}
+		});
+	}
+
+	// Handle new toolbar manager from server during client-side navigation
+	hawkejs.scene.on('rendered', (variables, renderer) => {
+		if (variables.toolbar_manager) {
+			this.prepareToolbarManager(variables.toolbar_manager, this.toolbar_manager);
+		}
+	});
+
+	// Handle navigation - stop editing when leaving the page
+	hawkejs.scene.on('opening_url', (href, options) => {
+		if (options?.history === false) {
+			return;
+		}
+		this.stopEditing();
+	});
 });

package/element/user_avatar_group_element.js

@@ -70,6 +70,11 @@ UserAvatarGroup.setMethod(function setUsers(users) {
 	for (let i = 0; i < users.length; i++) {
 		user = users[i];
 
+		// Skip null/undefined users
+		if (!user) {
+			continue;
+		}
+
 		updated = false;
 
 		for (let j = 0; j < existing_avatars.length; j++) {

package/element/widget_picker_element.js

@@ -0,0 +1,333 @@
+/**
+ * The widget picker element
+ * A Notion-style dialog for selecting widgets to add
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.3.0
+ * @version  0.3.0
+ */
+const WidgetPicker = Function.inherits('Alchemy.Element.Widget.Base', 'WidgetPicker');
+
+/**
+ * The template to use
+ */
+WidgetPicker.setTemplateFile('widget/elements/widget_picker');
+
+/**
+ * The stylesheet to use
+ */
+WidgetPicker.setStylesheetFile('widget_picker');
+
+/**
+ * The container element that will receive the selected widget
+ */
+WidgetPicker.setAssignedProperty('target_container');
+
+/**
+ * Search query attribute
+ */
+WidgetPicker.setAttribute('search');
+
+/**
+ * Currently selected category filter
+ */
+WidgetPicker.setAttribute('category');
+
+/**
+ * Get available widgets that can be added to the target container
+ *
+ * @return   {Array}   Array of widget info objects
+ */
+WidgetPicker.setMethod(async function getAvailableWidgets() {
+
+	const Widget = Classes.Alchemy.Widget.Widget;
+	const widgets = Object.values(alchemy.getClassGroup('widgets'));
+	const container = this.target_container;
+	const results = [];
+
+	for (let widget of widgets) {
+		// Check if widget can be added to this container
+		let canAdd = widget.canBeAdded(container);
+
+		if (Pledge.isThenable(canAdd)) {
+			canAdd = await canAdd;
+		}
+
+		if (!canAdd) {
+			continue;
+		}
+
+		results.push({
+			type_name: widget.type_name,
+			title: widget.title || widget.type_name.titleize(),
+			description: widget.description || null,  // Hardcoded description takes precedence
+			description_key: 'widget-' + widget.type_name + '-description',
+			icon: widget.icon || 'puzzle-piece',
+			category: widget.category || 'advanced',
+			categoryInfo: Widget.getCategoryInfo(widget.category)
+		});
+	}
+
+	// Sort by title
+	return results.sortByPath(1, 'title');
+});
+
+/**
+ * Get all categories that have widgets
+ *
+ * @param    {Array}   widgets   Optional array of widgets (to avoid re-fetching)
+ *
+ * @return   {Array}   Array of category info objects
+ */
+WidgetPicker.setMethod(function getUsedCategories(widgets) {
+
+	if (!widgets) {
+		widgets = this.available_widgets || [];
+	}
+
+	const Widget = Classes.Alchemy.Widget.Widget;
+	const categoryMap = new Map();
+
+	for (let widget of widgets) {
+		if (!categoryMap.has(widget.category)) {
+			categoryMap.set(widget.category, Widget.getCategoryInfo(widget.category));
+		}
+	}
+
+	// Convert to array and sort by order
+	return Array.from(categoryMap.values()).sortByPath(1, 'order');
+});
+
+/**
+ * Prepare render variables
+ */
+WidgetPicker.setMethod(async function prepareRenderVariables() {
+
+	const widgets = await this.getAvailableWidgets();
+	const categories = this.getUsedCategories(widgets);
+
+	// Group widgets by category
+	const widgetsByCategory = {};
+	for (let widget of widgets) {
+		const cat = widget.category || 'advanced';
+		if (!widgetsByCategory[cat]) {
+			widgetsByCategory[cat] = [];
+		}
+		widgetsByCategory[cat].push(widget);
+	}
+
+	// Attach widgets directly to each category object
+	// This avoids bracket notation issues in templates
+	for (let category of categories) {
+		category.widgets = widgetsByCategory[category.name] || [];
+	}
+
+	return {
+		widgets,
+		categories
+	};
+});
+
+/**
+ * Filter widgets based on search and category
+ */
+WidgetPicker.setMethod(function filterWidgets() {
+
+	const search = (this.search || '').toLowerCase().trim();
+	const category = this.category;
+	const items = this.querySelectorAll('.widget-item');
+	const categoryGroups = this.querySelectorAll('.widget-category-group');
+
+	// Track which categories have visible items
+	const visibleCategories = new Set();
+
+	items.forEach(item => {
+		const title = (item.dataset.title || '').toLowerCase();
+		const desc = (item.dataset.description || '').toLowerCase();
+		const itemCategory = item.dataset.category;
+
+		const matchesSearch = !search || 
+			title.includes(search) || 
+			desc.includes(search);
+		const matchesCategory = !category || itemCategory === category;
+
+		const visible = matchesSearch && matchesCategory;
+		item.hidden = !visible;
+
+		if (visible) {
+			visibleCategories.add(itemCategory);
+		}
+	});
+
+	// Show/hide category groups based on whether they have visible items
+	categoryGroups.forEach(group => {
+		const groupCategory = group.dataset.category;
+		group.hidden = !visibleCategories.has(groupCategory);
+	});
+
+	this.updateEmptyState();
+});
+
+/**
+ * Update the empty state message
+ */
+WidgetPicker.setMethod(function updateEmptyState() {
+
+	const emptyEl = this.querySelector('.widget-picker-empty');
+	const visibleItems = this.querySelectorAll('.widget-item:not([hidden])');
+
+	if (emptyEl) {
+		emptyEl.hidden = visibleItems.length > 0;
+	}
+});
+
+/**
+ * Select a widget
+ */
+WidgetPicker.setMethod(function selectWidget(type_name) {
+
+	// Emit the select event with the widget type name
+	this.dispatchEvent(new CustomEvent('select', {
+		bubbles: true,
+		detail: {type_name}
+	}));
+
+	// Close the dialog
+	const dialog = this.queryParents('he-dialog');
+	if (dialog) {
+		dialog.close();
+	}
+});
+
+/**
+ * Set up the search input
+ */
+WidgetPicker.setMethod(function setupSearch() {
+
+	const input = this.querySelector('.widget-picker-search');
+
+	if (!input) return;
+
+	input.addEventListener('input', (e) => {
+		this.search = e.target.value;
+		this.filterWidgets();
+	});
+
+	// Focus search on open
+	requestAnimationFrame(() => input.focus());
+});
+
+/**
+ * Set up category filter buttons
+ */
+WidgetPicker.setMethod(function setupCategoryFilters() {
+
+	const buttons = this.querySelectorAll('.category-btn');
+
+	buttons.forEach(btn => {
+		btn.addEventListener('click', (e) => {
+			e.preventDefault();
+
+			// Update active state
+			buttons.forEach(b => b.classList.remove('active'));
+			btn.classList.add('active');
+
+			// Set category filter
+			this.category = btn.dataset.category || '';
+			this.filterWidgets();
+		});
+	});
+});
+
+/**
+ * Set up widget item click handlers
+ */
+WidgetPicker.setMethod(function setupWidgetItems() {
+
+	const items = this.querySelectorAll('.widget-item');
+
+	items.forEach(item => {
+		item.addEventListener('click', (e) => {
+			e.preventDefault();
+			this.selectWidget(item.dataset.type);
+		});
+	});
+});
+
+/**
+ * Set up keyboard navigation
+ */
+WidgetPicker.setMethod(function setupKeyboard() {
+
+	this.addEventListener('keydown', (e) => {
+		if (e.key === 'Escape') {
+			const dialog = this.queryParents('he-dialog');
+			if (dialog) {
+				dialog.close();
+			}
+			return;
+		}
+
+		if (e.key === 'Enter') {
+			const focused = this.querySelector('.widget-item:focus');
+			if (focused) {
+				e.preventDefault();
+				this.selectWidget(focused.dataset.type);
+			}
+			return;
+		}
+
+		if (e.key === 'ArrowDown' || e.key === 'ArrowUp') {
+			e.preventDefault();
+			this.navigateItems(e.key === 'ArrowDown' ? 1 : -1);
+		}
+	});
+});
+
+/**
+ * Navigate through widget items with arrow keys
+ */
+WidgetPicker.setMethod(function navigateItems(direction) {
+
+	const items = Array.from(this.querySelectorAll('.widget-item:not([hidden])'));
+	if (!items.length) return;
+
+	const focused = this.querySelector('.widget-item:focus');
+	let index = focused ? items.indexOf(focused) : -1;
+
+	index += direction;
+
+	if (index < 0) index = items.length - 1;
+	if (index >= items.length) index = 0;
+
+	items[index].focus();
+});
+
+/**
+ * Show loading state when element is first connected to the DOM
+ */
+WidgetPicker.setMethod(function connected() {
+
+	// Guard against re-entry if element is moved in DOM
+	if (this._initialized) {
+		return;
+	}
+
+	this._initialized = true;
+
+	// Show loading state immediately while prepareRenderVariables() runs
+	this.innerHTML = '<div class="widget-picker-loading"><div class="spinner"></div><p>Loading widgets...</p></div>';
+});
+
+/**
+ * Added to the DOM for the first time
+ */
+WidgetPicker.setMethod(function introduced() {
+
+	introduced.super.call(this);
+
+	this.setupSearch();
+	this.setupCategoryFilters();
+	this.setupWidgetItems();
+	this.setupKeyboard();
+});