alchemy-widget 0.1.5 → 0.2.0

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 0.2.0 (2022-11-02)
+
+* Use `al-` prefix for all custom elements
+* Update to `alchemy-form` v0.2.0
+* Add copy & paste actions
+* Add nesting levels to `al-toc`
+* Add `al-widget-toolbar` element
+* Use `easymde` markdown editor for markdown widgets
+
+## 0.1.6 (2022-10-12)
+
+* Allow hiding widgets from the add-menu
+* Let actions return their button contents as elements instead of only html
+* Cancel clicks on widgets when editing them
+* Fix getting the `hawkejs_renderer` instance in a widget
+* Use `alchemy-chimera` style for the widget configuration dialog
+* Make renders wait for widgets that have to render their content asynchronously
+* Allow setting the element to use in a Text widget
+* Fix Header-widget level actions
+* Load the icon fonts as soon as the editor starts
+* Make the `rerender` method async
+* Use `child_class` property in the populate method
+* Add filter logic to widgets for getting specific values
+* Add abstract `Partial` widget class, to easily create a new widget with a pre-defined layout
+* Wait for widgets to render their contents before starting editor
+* Add `can_be_removed` property to widget elements
+* Add `can_be_moved` property to widget elements
+* Throw an error if `alchemy-form` is loaded before this plugin
+
 ## 0.1.5 (2022-07-14)
 
 * Unselect widgets when stopping the editor

package/assets/stylesheets/alchemy_widgets.scss

@@ -0,0 +1,426 @@
+:root {
+	al-widget-toolbar {
+		display: none;
+	}
+}
+
+html.logged-in {
+	al-widget-toolbar {
+		font-size: 15px;
+
+		display: flex;
+		z-index: 9999;
+		background: rgba(200, 200, 200, 0.5);
+		box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
+		bottom: 3em; left: 3em;
+		border-radius: 24px;
+		height: 5.25em;
+		padding: 1em;
+		border: 1px solid #aaa;
+		display: flex;
+		gap: 1em;
+		backdrop-filter: blur(10px);
+
+		position: fixed;
+		bottom: 16px;
+		left: 16px;
+		right: 16px;
+	}
+}
+
+al-widget-toolbar {
+
+	&[state="editing"] {
+		.start-edit {
+			display: none;
+		}
+	}
+
+	&[state="default"],
+	&[state="ready"] {
+		.stop-and-save,
+		.stop-edit,
+		.save-all {
+			display: none;
+		}
+	}
+
+	&[state="saving"],
+	&[state="saving-before-stop"] {
+		.start-edit,
+		.stop-edit {
+			display: none;
+		}
+	}
+
+	&[state="saving"] {
+		.stop-and-save {
+			display: none;
+		}
+	}
+
+	&[state="saving-before-stop"] {
+		.save-all {
+			display: none;
+		}
+	}
+
+	.stop-and-save,
+	.save-all {
+		--al-button-bg-color: green;
+		--al-button-bg-color-hover: rgb(55, 155, 55);
+	}
+
+	a,
+	al-button {
+		--al-button-font-size: 1.3em;
+		border-radius: 1em;
+	}
+
+	a {
+		background-color: black;
+		color: white;
+		padding: 0.5em 1em;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5em;
+
+		al-icon {
+			font-size: 2em;
+		}
+
+		&:hover {
+			background-color: rgb(53, 53, 53);
+		}
+	}
+}
+
+al-widgets,
+al-widgets-row,
+al-widgets-column,
+al-widget {
+	
+}
+
+al-widgets,
+al-widgets-row,
+al-widgets-column {
+	display: flex;
+
+	&.aw-editing {
+		position: relative;
+		min-height: 3rem;
+	}
+
+	> * {
+		flex: 10 10 auto;
+	}
+}
+
+al-widgets,
+al-widget {
+	&.aw-editing {
+		&:before {
+			content: "";
+			position: absolute;
+			inset: -2px;
+			background: white;
+			border: 2px dashed rgba(0, 0, 0, 0.4);
+			pointer-events: none;
+			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)
+		}
+	}
+}
+
+al-widgets-row,
+al-widgets-column {
+
+	&.aw-editing {
+		&:hover {
+			background: rgba(60, 60, 60, 0.1);
+		}
+	}
+}
+
+al-widgets,
+al-widgets-column {
+	flex-flow: column;
+
+	&.aw-editing {
+		padding-bottom: 5rem;
+	}
+
+	> al-widget-add-area {
+		position: absolute;
+		bottom: 0.2rem;
+		left: 50%;
+		transform: translateX(-50%);
+	}
+}
+
+al-widgets {
+	min-width: 10rem;
+	min-height: 10rem;
+}
+
+al-widgets-row {
+	flex-flow: row;
+	flex: 10 10 auto;
+
+	&.aw-editing {
+		padding-right: 5rem;
+	}
+
+	> al-widget-add-area {
+		position: absolute;
+		right: 0.5rem;
+		top: 50%;
+		transform: translateY(-50%);
+	}
+}
+
+al-widget-add-area {
+	background: rgba(255,255,255,0.5);
+	padding: 0.5rem 2rem;
+	border-radius: 2rem;
+	z-index: 99999999;
+
+	.widget-button {
+		min-height: 2.5rem;
+		padding: 1rem;
+	}
+}
+
+al-widgets-row,
+al-widgets > al-widgets-column,
+al-widgets-column > al-widgets-column,
+.alchemy-widgets-container > al-widgets-column {
+	&.aw-editing {
+
+		&::after {
+			content: "";
+			position: absolute;
+			height: 1px;
+			left: 15px;
+			right: 15px;
+			bottom: 0;
+			border-bottom: 2px dashed rgba(0, 0, 0, 0.3);
+
+			// Reset some things (in case of a nested column)
+			width: initial;
+			border-right: initial;
+			top: initial;
+		}
+	}
+}
+
+al-widgets-column {
+	flex: 10 10 auto;
+}
+
+al-widgets-column,
+al-widgets-row > al-widgets-row,
+.alchemy-widgets-container > al-widgets-row {
+	&.aw-editing {
+		&::after {
+			content: "";
+			position: absolute;
+			width: 1px;
+			top: 10px;
+			bottom: 10px;
+			right: 0;
+			border-right: 2px dashed rgba(0, 0, 0, 0.3);
+
+			// Reset some things (in case of a nested row)
+			left: initial;
+			border-bottom: initial;
+			height: initial;
+		}
+	}
+}
+
+al-widget-add-area {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+
+	.widget-types {
+		display: none;
+	}
+
+	&.show-types {
+		.main-button {
+			display: none;
+		}
+
+		.widget-types {
+			display: initial;
+		}
+	}
+
+	.main-button {
+		display: flex;
+	}
+}
+
+.aw-actionbar-button,
+.widget-button {
+	color: #707684;
+	cursor: pointer;
+	border: none;
+	background: none;
+
+	display: flex;
+	align-content: center;
+	min-height: 26px;
+	align-items: center;
+	text-transform: uppercase;
+
+	&:hover {
+		color: #388ae5;
+	}
+}
+
+al-widget {
+	display: block;
+
+	&.aw-editing {
+		min-height: 2rem;
+
+		&:hover {
+			background: rgba(60, 60, 120, 0.2);
+
+			// This actually causes some glitches on Firefox :/
+			backdrop-filter: blur(4px);
+		}
+	}
+
+	&.aw-selected {
+		background-color: #7979f347;
+		position: relative;
+		outline: none;
+
+		&:before {
+			background-color: yellow;
+		}
+	}
+}
+
+al-widget-context,
+al-widget-actionbar {
+	display: block;
+	padding: 0.4rem;
+	background-color: white;
+	border-radius: 4px;
+	border: 1px solid #dadada;
+	font-size: 2rem;
+
+	&[hidden] {
+		display: none;
+	}
+}
+
+al-widget-context {
+	position: fixed;
+	z-index: 99999;
+
+	al-widget-actionbar {
+		position: absolute;
+		top: calc(100% + 5px);
+		right: 0;
+		z-index: 999999;
+	}
+}
+
+al-widget-actionbar {
+	min-height: 2.5rem;
+	min-width: 2.5rem;
+	display: flex;
+
+	> * {
+		margin-right: 5px;
+	}
+
+	.aw-actionbar-button {
+		font-size: 2.5rem;
+		border-radius: 4px;
+		padding: 0.6rem;
+
+		&:hover {
+			color: rgb(112, 118, 132);
+			background-color: #f0f0f0;
+		}
+
+		&.aw-button-selected {
+			color: #388ae5;
+		}
+	}
+}
+
+al-widget[type="header"] {
+
+	h1, h2, h3, h4, h5, h6 {
+		padding: 1em 0;
+		margin: 0;
+		line-height: 1.5em;
+		outline: none;
+	}
+
+	h1 {
+		font-size: 2em;
+	}
+
+	h2 {
+		font-size: 1.5em;
+	}
+}
+
+al-widget[type="text"] {
+
+	&.aw-editing {
+		&,
+		& > * {
+			min-width: 5rem;
+			min-height: 3rem;
+		}
+
+		& > * {
+			display: inline-block;
+			width: 100%;
+		}
+	}
+}
+
+.aw-actionbar-button {
+
+	.aw-header-h {
+		font-weight: bold;
+		font-size: 1.2em;
+	}
+
+	.aw-header-level {
+		font-weight: bold;
+		height: 1.3em;
+	}
+}
+
+al-toc {
+	display: block;
+}
+
+[data-he-template="widget/widget_config"] {
+
+	.widget-config-title {
+		margin-bottom: 1rem;
+		color: black;
+	}
+
+	al-label {
+		padding: 0.5rem;
+
+		[data-he-name="field-title"] {
+			display: block;
+		}
+	}
+}

package/bootstrap.js

@@ -1,3 +1,9 @@
+alchemy.requirePlugin('form', false);
+
+if (!alchemy.plugins.form) {
+	throw new Error('The alchemy-form plugin has to be loaded BEFORE alchemy-widget');
+}
+
 Router.add({
 	name       : 'AlchemyWidgets#save',
 	methods    : 'post',

package/controller/alchemy_widgets_controller.js

@@ -12,7 +12,7 @@ const AlchemyWidgets = Function.inherits('Alchemy.Controller', 'AlchemyWidgets')
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.5
- * @version  0.1.5
+ * @version  0.1.6
  *
  * @param    {Object[]}   fields
  *
@@ -59,18 +59,94 @@ AlchemyWidgets.setMethod(async function aggregate(widgets) {
 				result[model.name] = record;
 			}
 		}
-	
+
+		let field_definition;
+
+		if (widget.value_path) {
+			field_definition = model.getField(widget.field + '.' + widget.value_path);
+		} else {
+			field_definition = model.getField(widget.field);
+		}
+
+		if (!field_definition) {
+			continue;
+		}
+
+		// The optional translation key
 		let field_language = widget.field_languages?.[widget.field];
-	
-		if (field_language) {
-			if (!record[widget.field]) {
-				record[widget.field] = {};
+		let target_field_value = record[widget.field];
+		let target_container;
+		let target_key;
+		let path_for_language;
+
+		// Do incredibly complicated filter stuff
+		if (widget.filter_value) {
+
+			if (!widget.filter_target || !widget.value_path) {
+				continue;
+			}
+
+			// Create the root field if needed
+			if (!target_field_value) {
+				target_field_value = [];
+				record[widget.field] = target_field_value;
+			}
+
+			if (target_field_value && Array.isArray(target_field_value)) {
+				target_key = widget.value_path;
+
+				for (let index = 0; index < target_field_value.length; index++) {
+					let entry = target_field_value[index];
+
+					if (entry[widget.filter_target] == widget.filter_value) {
+						target_container = entry;
+						path_for_language = widget.field + '.' + index + '.' + target_key;
+						break;
+					}
+				}
+
+				if (!target_container) {
+					target_container = {
+						[widget.filter_target] : widget.filter_value,
+						[target_key]           : {},
+					};
+
+					let new_index = target_field_value.push(target_container) - 1;
+					path_for_language = widget.field + '.' + new_index + '.' + target_key;
+				}
 			}
-	
-			record[widget.field][field_language] = widget.value;
 		} else {
-			record[widget.field] = widget.value;
+			target_container = record;
+			target_key = widget.field;
+		}
+
+		if (!field_language && path_for_language) {
+			field_language = widget.field_languages?.[path_for_language];
+		}
+
+		if (!field_language && field_definition.is_translatable) {
+			field_language = this.conduit.active_prefix;
+
+			if (!field_language) {
+				continue;
+			}
 		}
+
+		if (field_language) {
+			if (!target_container) {
+				target_container = record[widget.field] = {};
+			}
+
+
+			if (!target_container[target_key]) {
+				target_container[target_key] = {};
+			}
+
+			target_container = target_container[target_key];
+			target_key = field_language;
+		}
+
+		target_container[target_key] = widget.value;
 	}
 
 	return Object.values(result);