alchemy-widget 0.1.6 → 0.2.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+## 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

package/assets/stylesheets/{alchemy-widgets.scss → alchemy_widgets.scss}

@@ -1,15 +1,110 @@
-@import "alchemy-widget-symbols.scss";
+: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);
+		}
+	}
+}
 
-alchemy-widgets,
-alchemy-widgets-row,
-alchemy-widgets-column,
-alchemy-widget {
+al-widgets,
+al-widgets-row,
+al-widgets-column,
+al-widget {
 	
 }
 
-alchemy-widgets,
-alchemy-widgets-row,
-alchemy-widgets-column {
+al-widgets,
+al-widgets-row,
+al-widgets-column {
 	display: flex;
 
 	&.aw-editing {
@@ -22,15 +117,24 @@ alchemy-widgets-column {
 	}
 }
 
-alchemy-widget {
+al-widgets,
+al-widget {
 	&.aw-editing {
-		outline: 2px dashed rgba(0, 0, 0, 0.3);
-		outline-offset: -2px;
+		&: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)
+		}
 	}
 }
 
-alchemy-widgets-row,
-alchemy-widgets-column {
+al-widgets-row,
+al-widgets-column {
 
 	&.aw-editing {
 		&:hover {
@@ -39,15 +143,15 @@ alchemy-widgets-column {
 	}
 }
 
-alchemy-widgets,
-alchemy-widgets-column {
+al-widgets,
+al-widgets-column {
 	flex-flow: column;
 
 	&.aw-editing {
 		padding-bottom: 5rem;
 	}
 
-	> alchemy-widget-add-area {
+	> al-widget-add-area {
 		position: absolute;
 		bottom: 0.2rem;
 		left: 50%;
@@ -55,17 +159,12 @@ alchemy-widgets-column {
 	}
 }
 
-alchemy-widgets {
+al-widgets {
 	min-width: 10rem;
 	min-height: 10rem;
-
-	&.aw-editing {
-		outline: 2px dashed rgba(0, 0, 0, 0.3);
-		outline-offset: -2px;
-	}
 }
 
-alchemy-widgets-row {
+al-widgets-row {
 	flex-flow: row;
 	flex: 10 10 auto;
 
@@ -73,7 +172,7 @@ alchemy-widgets-row {
 		padding-right: 5rem;
 	}
 
-	> alchemy-widget-add-area {
+	> al-widget-add-area {
 		position: absolute;
 		right: 0.5rem;
 		top: 50%;
@@ -81,7 +180,7 @@ alchemy-widgets-row {
 	}
 }
 
-alchemy-widget-add-area {
+al-widget-add-area {
 	background: rgba(255,255,255,0.5);
 	padding: 0.5rem 2rem;
 	border-radius: 2rem;
@@ -93,10 +192,10 @@ alchemy-widget-add-area {
 	}
 }
 
-alchemy-widgets-row,
-alchemy-widgets > alchemy-widgets-column,
-alchemy-widgets-column > alchemy-widgets-column,
-.alchemy-widgets-container > alchemy-widgets-column {
+al-widgets-row,
+al-widgets > al-widgets-column,
+al-widgets-column > al-widgets-column,
+.alchemy-widgets-container > al-widgets-column {
 	&.aw-editing {
 
 		&::after {
@@ -116,13 +215,13 @@ alchemy-widgets-column > alchemy-widgets-column,
 	}
 }
 
-alchemy-widgets-column {
+al-widgets-column {
 	flex: 10 10 auto;
 }
 
-alchemy-widgets-column,
-alchemy-widgets-row > alchemy-widgets-row,
-.alchemy-widgets-container > alchemy-widgets-row {
+al-widgets-column,
+al-widgets-row > al-widgets-row,
+.alchemy-widgets-container > al-widgets-row {
 	&.aw-editing {
 		&::after {
 			content: "";
@@ -141,7 +240,7 @@ alchemy-widgets-row > alchemy-widgets-row,
 	}
 }
 
-alchemy-widget-add-area {
+al-widget-add-area {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -165,7 +264,7 @@ alchemy-widget-add-area {
 	}
 }
 
-.aw-toolbar-button,
+.aw-actionbar-button,
 .widget-button {
 	color: #707684;
 	cursor: pointer;
@@ -183,7 +282,7 @@ alchemy-widget-add-area {
 	}
 }
 
-alchemy-widget {
+al-widget {
 	display: block;
 
 	&.aw-editing {
@@ -199,12 +298,17 @@ alchemy-widget {
 
 	&.aw-selected {
 		background-color: #7979f347;
-		outline: 1px dashed #7979f399;
+		position: relative;
+		outline: none;
+
+		&:before {
+			background-color: yellow;
+		}
 	}
 }
 
-alchemy-widget-context,
-alchemy-widget-toolbar {
+al-widget-context,
+al-widget-actionbar {
 	display: block;
 	padding: 0.4rem;
 	background-color: white;
@@ -217,11 +321,11 @@ alchemy-widget-toolbar {
 	}
 }
 
-alchemy-widget-context {
+al-widget-context {
 	position: fixed;
 	z-index: 99999;
 
-	alchemy-widget-toolbar {
+	al-widget-actionbar {
 		position: absolute;
 		top: calc(100% + 5px);
 		right: 0;
@@ -229,7 +333,7 @@ alchemy-widget-context {
 	}
 }
 
-alchemy-widget-toolbar {
+al-widget-actionbar {
 	min-height: 2.5rem;
 	min-width: 2.5rem;
 	display: flex;
@@ -238,7 +342,7 @@ alchemy-widget-toolbar {
 		margin-right: 5px;
 	}
 
-	.aw-toolbar-button {
+	.aw-actionbar-button {
 		font-size: 2.5rem;
 		border-radius: 4px;
 		padding: 0.6rem;
@@ -254,7 +358,7 @@ alchemy-widget-toolbar {
 	}
 }
 
-alchemy-widget[type="header"] {
+al-widget[type="header"] {
 
 	h1, h2, h3, h4, h5, h6 {
 		padding: 1em 0;
@@ -272,7 +376,7 @@ alchemy-widget[type="header"] {
 	}
 }
 
-alchemy-widget[type="text"] {
+al-widget[type="text"] {
 
 	&.aw-editing {
 		&,
@@ -288,7 +392,7 @@ alchemy-widget[type="text"] {
 	}
 }
 
-.aw-toolbar-button {
+.aw-actionbar-button {
 
 	.aw-header-h {
 		font-weight: bold;
@@ -301,12 +405,18 @@ alchemy-widget[type="text"] {
 	}
 }
 
-table-of-contents {
+al-toc {
 	display: block;
 }
 
 [data-he-template="widget/widget_config"] {
-	alchemy-label {
+
+	.widget-config-title {
+		margin-bottom: 1rem;
+		color: black;
+	}
+
+	al-label {
 		padding: 0.5rem;
 
 		[data-he-name="field-title"] {

package/bootstrap.js

@@ -1,5 +1,7 @@
-if (alchemy.plugins.form) {
-	throw new Error('The alchemy-form plugin has to be loaded AFTER alchemy-widget');
+alchemy.requirePlugin('form', false);
+
+if (!alchemy.plugins.form) {
+	throw new Error('The alchemy-form plugin has to be loaded BEFORE alchemy-widget');
 }
 
 Router.add({

package/element/00-widget_base_element.js

@@ -14,7 +14,16 @@ let Base = Function.inherits('Alchemy.Element', 'Alchemy.Element.Widget', 'Base'
  * @since    0.1.0
  * @version  0.1.0
  */
-Base.setStylesheetFile('alchemy-widgets');
+Base.setStylesheetFile('alchemy_widgets');
+
+/**
+ * Set the custom element prefix
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.2.0
+ */
+Base.setStatic('custom_element_prefix', 'al');
 
 /**
  * Don't register this as a custom element
@@ -22,9 +31,9 @@ Base.setStylesheetFile('alchemy-widgets');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-Base.setStatic('is_abstract_class', true, false);
+Base.makeAbstractClass();
 
 /**
  * The Widget class instance belonging to this element
@@ -183,7 +192,7 @@ Base.setMethod(function getSiblingContainer(type) {
 			return next;
 		}
 
-		if (next.tagName != 'ALCHEMY-WIDGET-ADD-AREA') {
+		if (next.tagName != 'AL-WIDGET-ADD-AREA') {
 			return false;
 		}
 	}
@@ -348,4 +357,87 @@ Base.setMethod(async function save() {
 	};
 
 	let result = await alchemy.fetch(config);
+});
+
+/**
+ * Copy this widget's configuration to the clipboard
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Base.setMethod(async function copyConfigToClipboard() {
+
+	let value = this.value;
+	
+	if (!value) {
+		return;
+	}
+
+	value._altype = 'widget';
+	value.type = this.type;
+
+	try {
+		await navigator.clipboard.writeText(JSON.dry(value, null, '\t'));
+	} catch (err) {
+		console.error('Failed to copy:', err);
+	}
+});
+
+/**
+ * Get configuration from the clipboard and return it if it's valid
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Base.setMethod(async function getConfigFromClipboard() {
+
+	let result;
+
+	try {
+		result = await navigator.clipboard.readText();
+	} catch (err) {
+		return false;
+	}
+
+	if (result) {
+		result = result.trim();
+	}
+
+	if (!result || result[0] != '{') {
+		return false;
+	}
+
+	try {
+		result = JSON.undry(result);
+	} catch (err) {
+		return false;
+	}
+
+	if (result._altype != 'widget') {
+		return false;
+	}
+
+	if (result.type != this.type && !this.can_be_removed) {
+		return false;
+	}
+
+	return result;
+});
+
+/**
+ * Read the configuration from the clipboard & apply
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+Base.setMethod(async function pasteConfigFromClipboard() {
+
+	let result = await this.getConfigFromClipboard();
+
+	if (result) {
+		this.value = result;
+	}
 });

package/element/05-widget_element.js

@@ -1,5 +1,5 @@
 /**
- * The alchemy-widget element
+ * The al-widget element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
@@ -7,15 +7,6 @@
  */
 let Widget = Function.inherits('Alchemy.Element.Widget.Base', 'Widget');
 
-/**
- * Set the custom element prefix
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
- */
-Widget.setStatic('custom_element_prefix', 'alchemy');
-
 /**
  * The type of widget
  *
@@ -363,14 +354,14 @@ Widget.setMethod(function removeEditEventListeners() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Widget.setMethod(function getContextButton() {
 
-	let button = document.querySelector('alchemy-widget-context');
+	let button = document.querySelector('al-widget-context');
 
 	if (!button) {
-		button = this.createElement('alchemy-widget-context');
+		button = this.createElement('al-widget-context');
 		document.body.append(button);
 	}
 

package/element/10-container_elements.js

@@ -1,13 +1,13 @@
 /**
- * The alchemy-widgets element is the base "container" for all other widgets.
+ * The al-widgets element is the base "container" for all other widgets.
  * It should never be nested, though
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-let AlchemyWidgets = Function.inherits('Alchemy.Element.Widget', function AlchemyWidgets() {
-	AlchemyWidgets.super.call(this);
+let AlchemyWidgets = Function.inherits('Alchemy.Element.Widget', function AlWidgets() {
+	AlWidgets.super.call(this);
 
 	// Always create this dummy instance just in case?
 	this.instance = new Classes.Alchemy.Widget.Container();
@@ -19,9 +19,9 @@ let AlchemyWidgets = Function.inherits('Alchemy.Element.Widget', function Alchem
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-AlchemyWidgets.setStatic('custom_element_prefix', 'alchemy-widgets');
+AlchemyWidgets.setStatic('custom_element_prefix', 'al-widgets');
 
 /**
  * Don't add the edit event listeners
@@ -69,7 +69,7 @@ AlchemyWidgets.setProperty(function value() {
 	let widgets = this.getWidgetsConfig(),
 	    result;
 
-	if (this.nodeName == 'ALCHEMY-WIDGETS') {
+	if (this.nodeName == 'AL-WIDGETS') {
 		result = {widgets};
 	} else {
 		result = {
@@ -186,7 +186,7 @@ AlchemyWidgets.setMethod(function clear() {
 	for (i = 0; i < children.length; i++) {
 		child = children[i];
 
-		if (child.nodeName == 'ALCHEMY-WIDGET-ADD-AREA') {
+		if (child.nodeName == 'AL-WIDGET-ADD-AREA') {
 			continue;
 		}
 
@@ -240,7 +240,7 @@ AlchemyWidgets.setMethod(function addWidget(type, config) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @param    {Element}   element
  */
@@ -249,7 +249,7 @@ AlchemyWidgets.setMethod(function _appendWidgetElement(element) {
 	let add_area;
 
 	if (this.editing) {
-		add_area = this.querySelector(':scope > alchemy-widget-add-area');
+		add_area = this.querySelector(':scope > al-widget-add-area');
 	}
 
 	if (add_area) {
@@ -270,19 +270,19 @@ AlchemyWidgets.setMethod(function _appendWidgetElement(element) {
 AlchemyWidgets.setMethod(function initEventListeners() {});
 
 /**
- * The alchemy-widgets-column element
+ * The al-widgets-column element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-Function.inherits('Alchemy.Element.Widget.AlchemyWidgets', 'Column');
+Function.inherits('Alchemy.Element.Widget.AlWidgets', 'Column');
 
 /**
- * The alchemy-widgets-row element
+ * The al-widgets-row element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
-Function.inherits('Alchemy.Element.Widget.AlchemyWidgets', 'Row');
+Function.inherits('Alchemy.Element.Widget.AlWidgets', 'Row');

package/element/11-alchemy_widgets_list_element.js

@@ -1,11 +1,11 @@
 /**
- * The alchemy-widgets-list element
+ * The al-widgets-list element
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
  * @version  0.1.0
  */
-const List = Function.inherits('Alchemy.Element.Widget.AlchemyWidgets', 'List');
+const List = Function.inherits('Alchemy.Element.Widget.AlWidgets', 'List');
 
 /**
  * Get the list element