alchemy-widget 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -1,3 +1,13 @@
+## 0.2.8 (2023-06-17)
+
+* Make the widget toolbar render area contents correctly + load scripts & styles
+
+## 0.2.7 (2023-04-20)
+
+* Use `Element#hideForEveryone()` when hiding widgets
+* Add the `al-editor-toolbar` and accompanying elements
+* Use the `al-code-input` element again for editing markdown widgets
+
 ## 0.2.6 (2023-02-26)
 
 * Replace *EasyMDE* markdown editor with *Toast editor*

package/assets/stylesheets/alchemy_widgets.scss

@@ -97,6 +97,36 @@ al-widget-toolbar {
 			background-color: rgb(53, 53, 53);
 		}
 	}
+
+	.watchers:empty {
+		display: none;
+	}
+
+	.watchers {
+		margin: 0 4rem;
+	}
+
+	al-user-avatar {
+		.bubble-representation {
+			width: 4.5rem;
+			height: 4.5rem;
+			font-size: 3.5rem;
+			line-height: 4.5rem;
+		}
+	}
+
+	[data-area="buttons"] {
+		display: flex;
+		gap: 1rem;
+
+		a {
+			text-decoration: none;
+
+			micro-copy {
+				text-decoration: underline;
+			}
+		}
+	}
 }
 
 al-widgets,
@@ -444,4 +474,46 @@ al-widget[type="markdown"] {
 	.toastui-editor-toolbar .toastui-editor-md-tab-container .toastui-editor-tabs {
 		display: none;
 	}
+}
+
+al-user-avatar-group {
+	display: flex;
+
+	// Let all the al-user-avatar elements overlap a little.
+	> * {
+		position: relative;
+		z-index: 10;
+		margin-left: -0.5rem;
+	}
+
+	// The first element should not be overlapped
+	> :first-child {
+		margin-left: 0;
+	}
+
+	> *:hover {
+		z-index: 101;
+	}
+}
+
+al-user-avatar {
+	display: block;
+	cursor: default;
+	user-select: none;
+
+	.bubble-representation {
+		display: block;
+		width: 2rem;
+		height: 2rem;
+		border-radius: 50%;
+		background-color: var(--avatar-bg-color, #388ae5);
+		color: white;
+		font-size: 1.2rem;
+		font-weight: bold;
+		text-align: center;
+		line-height: 2rem;
+
+		// Add a shadow
+		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.2);
+	}
 }

package/element/30-base_toolbar_element.js

@@ -0,0 +1,231 @@
+const PREPARED = Symbol('prepared');
+
+/**
+ * The base toolbar element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+let Toolbar = Function.inherits('Alchemy.Element.Form.Stateful', 'Alchemy.Element.Widget', 'BaseToolbar');
+
+/**
+ * Don't register this as a custom element
+ * The `false` argument makes sure child classes don't also set this property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Toolbar.makeAbstractClass();
+
+/**
+ * Set the custom element prefix
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Toolbar.setStatic('custom_element_prefix', 'al');
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Toolbar.setStylesheetFile('alchemy_widgets');
+
+/**
+ * The toolbar manager
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Toolbar.setAssignedProperty('toolbar_manager');
+
+/**
+ * The optional watchers element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Toolbar.addElementGetter('watchers_element', '.watchers');
+
+/**
+ * A new toolbar manager was assigned
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Toolbar.setMethod(function onToolbarManagerAssignment(manager, old_manager) {
+	if (manager != old_manager) {
+		this.prepareToolbarManager(manager, old_manager);
+	}
+});
+
+/**
+ * Prepare the toolbar manager
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.8
+ */
+Toolbar.setMethod(function prepareToolbarManager(manager, old_manager) {
+
+	if (this.toolbar_manager != manager) {
+		this.toolbar_manager = manager;
+	}
+
+	if (manager && manager[PREPARED]) {
+		return;
+	}
+
+	if (manager) {
+		manager[PREPARED] = true;
+	}
+
+	if (old_manager) {
+		old_manager.release();
+	}
+
+	if (!manager) {
+		return;
+	}
+
+	let clear_counts = {};
+
+	manager.watchProperty('document_watcher', watcher => {
+		this.attachDocumentWatcher(watcher);
+	});
+
+	let elements = this.querySelectorAll('[data-toolbar]');
+
+	for (let i = 0; i < elements.length; i++) {
+		let element = elements[i],
+		    name = element.dataset.toolbar;
+		
+		if (name) {
+			manager.watchProperty(name, value => {
+				element.textContent = value;
+			});
+		}
+	}
+
+	manager.watchQueue('render_template', (area, template, variables) => {
+
+		let current_clear_count = clear_counts[area];
+
+		let area_element = this.getAreaElement(area);
+
+		if (area_element) {
+			let renderer = hawkejs.renderToElements(template, variables, (err, elements) => {
+
+				if (current_clear_count != clear_counts[area]) {
+					// The area has been cleared in the meantime
+					return;
+				}
+
+				if (err) {
+					console.error('Error rendering template', err);
+					return;
+				}
+
+				for (let i = 0; i < elements.length; i++) {
+					area_element.appendChild(elements[i]);
+				}
+
+				hawkejs.scene.handleRendererScripts(renderer);
+				hawkejs.scene.handleRendererStyles(renderer);
+			});
+		}
+	});
+
+	manager.watchQueue('clear_area', area => {
+
+		if (!clear_counts[area]) {
+			clear_counts[area] = 0;
+		}
+		
+		let area_element = this.getAreaElement(area);
+
+		clear_counts[area]++;
+
+		if (area_element) {
+			area_element.innerHTML = '';
+		}
+	});
+
+});
+
+/**
+ * Attach to the given watcher
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Toolbar.setMethod(function attachDocumentWatcher(watcher) {
+
+	let old_watcher = this.current_watcher;
+	let watchers_element = this.watchers_element;
+	this.current_watcher = watcher;
+
+	if (old_watcher && old_watcher != watcher) {
+		old_watcher.release();
+	}
+
+	if (watchers_element) {
+		if (watcher) {
+
+			watcher.watchProperty('viewers', async (viewers) => {
+
+				let users = [];
+
+				if (viewers) {
+					let viewer,
+					    i;
+
+					for (i = 0; i < viewers.length; i++) {
+						viewer = viewers[i];
+
+						if (!viewer.info) {
+							// The info isn't always set due to race conditions
+							viewer.info = await watcher.getUserInfo(viewer.user_id);
+						}
+
+						users.push(viewer.info);
+					}
+				}
+
+				watchers_element.setUsers(users);
+			});
+		} else {
+			watchers_element.clear();
+		}
+	}
+
+	if (!watcher) {
+		return;
+	}
+});
+
+/**
+ * Get an area element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Toolbar.setMethod(function getAreaElement(area) {
+
+	if (!area) {
+		return;
+	}
+
+	return this.querySelector('[data-area="' + area + '"]');
+});

package/element/editor_toolbar_element.js

@@ -0,0 +1,30 @@
+/**
+ * The al-editor-toolbar element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+let Toolbar = Function.inherits('Alchemy.Element.Widget.BaseToolbar', 'EditorToolbar');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Toolbar.setTemplateFile('widget/elements/al_editor_toolbar');
+
+/**
+ * Added to the dom for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Toolbar.setMethod(async function introduced() {
+
+	this.prepareToolbarManager(this.toolbar_manager);
+
+});

package/element/user_avatar_element.js

@@ -0,0 +1,137 @@
+/**
+ * The al-symbol-group element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+let UserAvatar = Function.inherits('Alchemy.Element.App', 'Alchemy.Element.Widget', 'UserAvatar');
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatar.setStylesheetFile('alchemy_widgets');
+
+/**
+ * Set the custom element prefix
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatar.setStatic('custom_element_prefix', 'al');
+
+/**
+ * The template to use for the content of this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatar.setTemplateFile('widget/elements/al_user_avatar');
+
+/**
+ * The user data
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatar.setAssignedProperty('user');
+
+/**
+ * Get the pk of the user
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatar.setProperty(function pk() {
+	
+	let result = '';
+
+	if (this.user) {
+		result = this.user.$pk || this.user.pk || this.user.id || '';
+	}
+
+	return String(result);
+});
+
+/**
+ * Get the first name of the user
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatar.setProperty(function first_name() {
+
+	let result = '';
+
+	if (this.user) {
+		result = this.user.firstname || this.user.first_name || this.user.username || '';
+	}
+
+	return result;
+});
+
+/**
+ * Get the first letter for the user
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatar.setProperty(function first_letter() {
+
+	let result = this.first_name;
+
+	if (result) {
+		result = result[0].toUpperCase();
+	} else {
+		result = '?';
+	}
+
+	return result;
+});
+
+/**
+ * Set (new) user info
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatar.setMethod(function setUserInfo(user) {
+	this.user = user;
+});
+
+/**
+ * Received user info
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatar.setMethod(function onUserAssignment(user) {
+
+	let bg_color;
+
+	if (user) {
+		bg_color = user.color;
+	}
+
+	if (!bg_color) {
+		this.style.removeProperty('--avatar-bg-color');
+	} else {
+		this.style.setProperty('--avatar-bg-color', bg_color);
+	}
+
+	let first_name = this.first_name;
+
+	this.setAttribute('title', first_name);
+});

package/element/user_avatar_group_element.js

@@ -0,0 +1,131 @@
+/**
+ * The al-user-avatar-group element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+let UserAvatarGroup = Function.inherits('Alchemy.Element.App', 'Alchemy.Element.Widget', 'UserAvatarGroup');
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatarGroup.setStylesheetFile('alchemy_widgets');
+
+/**
+ * Set the custom element prefix
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatarGroup.setStatic('custom_element_prefix', 'al');
+
+/**
+ * Clear all the avatars
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+UserAvatarGroup.setMethod(function clear() {
+
+	let existing_avatars = this.querySelectorAll('al-user-avatar'),
+	    avatar;
+
+	for (let i = 0; i < existing_avatars.length; i++) {
+		avatar = existing_avatars[i];
+		avatar.remove();
+	}
+});
+
+/**
+ * Set all the users to show
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {Object[]}   users
+ */
+UserAvatarGroup.setMethod(function setUsers(users) {
+
+	if (!users || !users.length) {
+		this.clear();
+		return;
+	}
+
+	let existing_avatars = this.querySelectorAll('al-user-avatar'),
+	    keep_avatars = [],
+	    updated,
+	    avatar,
+	    user;
+
+	users = [...users];
+
+	for (let i = 0; i < users.length; i++) {
+		user = users[i];
+
+		updated = false;
+
+		for (let j = 0; j < existing_avatars.length; j++) {
+			avatar = existing_avatars[j];
+
+			if (avatar.pk == user.pk) {
+				keep_avatars.push(avatar);
+				avatar.setUserInfo(user);
+				updated = true;
+				break;
+			}
+		}
+
+		if (updated) {
+			continue;
+		}
+
+		avatar = this.createElement('al-user-avatar');
+		avatar.setUserInfo(user);
+		this.appendChild(avatar);
+		keep_avatars.push(avatar);
+	}
+
+	for (let i = 0; i < existing_avatars.length; i++) {
+		avatar = existing_avatars[i];
+
+		if (keep_avatars.indexOf(avatar) == -1) {
+			avatar.remove();
+		}
+	}
+});
+
+/**
+ * Add a user to the group
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {Object}   user
+ */
+UserAvatarGroup.setMethod(function addUser(user) {
+
+	let existing_avatars = this.querySelectorAll('al-user-avatar'),
+	    avatar;
+
+	for (let i = 0; i < existing_avatars.length; i++) {
+		avatar = existing_avatars[i];
+
+		if (avatar.pk == user.pk) {
+			avatar.setUserInfo(user);
+			return;
+		}
+	}
+
+	avatar = this.createElement('al-user-avatar');
+	avatar.setUserInfo(user);
+	this.appendChild(avatar);
+});