alchemy-widget 0.1.5 → 0.2.0

package/helper/widgets/partial.js

@@ -0,0 +1,215 @@
+/**
+ * The Partial Widget class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {Object}   data
+ */
+const Partial = Function.inherits('Alchemy.Widget', 'Partial');
+
+/**
+ * Make this an abstract class
+ */
+Partial.makeAbstractClass();
+
+/**
+ * Get the type name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setStatic(function createClassTypeName() {
+	return 'partial_' + this.name.underscore();
+});
+
+/**
+ * Set the template to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setStatic(function setTemplateFile(name) {
+	this.constitute(function _setTemplateFile() {
+		this.template_file = name;
+	});
+});
+
+/**
+ * Prepare the schema
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.constitute(function prepareSchema() {
+
+	this.schema.addField('view', 'String', {
+		title       : 'Partial View',
+		description : 'The actual HWK template to use for rendering this widget',
+	});
+
+	let contents = this.createSchema();
+
+	contents.addField('name', 'String');
+	contents.addField('content', 'Widgets');
+
+	this.schema.addField('contents', contents, {array: true});
+});
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @param    {HTMLElement}   widget
+ */
+Partial.setMethod(async function populateWidget() {
+
+	let view = this.constructor.template_file || this.config.view;
+
+	if (view) {
+
+		let options = {
+			print : false,
+		};
+
+		let variables = {};
+
+		await this.addVariablesForRender(variables);
+
+		if (this.config?.contents?.length) {
+			for (let entry of this.config.contents) {
+				variables[entry.name] = entry.contents;
+			}
+		}
+
+		variables.config = this.config;
+
+		let placeholder = this.hawkejs_renderer.addSubtemplate(view, options, variables);
+
+		// If the widget is already part of the DOM,
+		// it's being edited and we need to manually kickstart the renderer
+		if (Blast.isBrowser && document.body.contains(this.widget)) {
+			await placeholder.getContent();
+		}
+
+		Hawkejs.removeChildren(this.widget);
+
+		this.widget.append(placeholder);
+	}
+
+	populateWidget.super.call(this);
+});
+
+/**
+ * Allow adding variables for rendering the partial
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.
+ * @version  0.1.
+ */
+Partial.setMethod(function addVariablesForRender(variables) {
+	// To be optionally implemented by child widgets
+});
+
+/**
+ * Get all the sub widgets by their name
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @return   {Object}
+ */
+Partial.setMethod(function getSubWidgets() {
+
+	let elements = this.widget.queryAllNotNested('[data-section-name]'),
+	    result = {};
+	
+	for (let element of elements) {
+		result[element.dataset.sectionName] = element;
+	}
+
+	return result;
+});
+
+/**
+ * Start the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setMethod(function _startEditor() {
+
+	let sub_widgets = this.getSubWidgets();
+
+	for (let name in sub_widgets) {
+		let sub_widget = sub_widgets[name];
+		sub_widget.startEditor();
+	}
+});
+
+/**
+ * Stop the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ */
+Partial.setMethod(function _stopEditor() {
+
+	let sub_widgets = this.getSubWidgets();
+
+	for (let name in sub_widgets) {
+		let sub_widget = sub_widgets[name];
+		sub_widget.stopEditor();
+	}
+
+	this.populateWidget();
+});
+
+/**
+ * Update the config values
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.6
+ * @version  0.1.6
+ *
+ * @return   {Object}
+ */
+Partial.setMethod(function syncConfig() {
+
+	let sub_widgets = this.getSubWidgets(),
+	    contents = this.config.contents;
+
+	if (!contents) {
+		contents = [];
+		this.config.contents = contents;
+	}
+
+	for (let name in sub_widgets) {
+		let sub_widget = sub_widgets[name];
+		let widget_config = contents.findByPath('name', name);
+
+		if (!widget_config) {
+			widget_config = {
+				name,
+			};
+
+			contents.push(widget_config);
+		}
+
+		widget_config.contents = sub_widget.value;
+	}
+
+	return this.config;
+});

package/helper/widgets/sourcecode.js

@@ -65,13 +65,13 @@ Sourcecode.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  */
 Sourcecode.setMethod(function _startEditor() {
 
 	Hawkejs.removeChildren(this.widget);
 
-	let input = this.createElement('alchemy-code-input');
+	let input = this.createElement('al-code-input');
 	input.textContent = this.config[this.sourcecode_field] || '';
 
 	this.widget.append(input);
@@ -96,13 +96,13 @@ Sourcecode.setMethod(function _stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.0
  *
  * @return   {Object}
  */
 Sourcecode.setMethod(function syncConfig() {
 
-	let input = this.widget.querySelector('alchemy-code-input, textarea');
+	let input = this.widget.querySelector('al-code-input, textarea');
 
 	if (input) {
 		this.config[this.sourcecode_field] = input.value;

package/helper/widgets/table_of_contents.js

@@ -16,13 +16,13 @@ const Toc = Function.inherits('Alchemy.Widget', 'TableOfContents');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.2
- * @version  0.1.2
+ * @version  0.2.0
  */
 Toc.setMethod(function populateWidget() {
 
 	populateWidget.super.call(this);
 
-	let toc = this.createElement('table-of-contents');
+	let toc = this.createElement('al-toc');
 
 	if (this.config.parent_selector) {
 		toc.parent_selector = this.config.parent_selector;

package/helper/widgets/text.js

@@ -28,18 +28,28 @@ Text.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.1.6
  *
  * @param    {HTMLElement}   widget
  */
 Text.setMethod(function populateWidget() {
 
+	let tag_name;
+
 	populateWidget.super.call(this);
 
-	let paragraph = this.createElement('p');
-	paragraph.textContent = this.config.content || '';
+	if (this.widget.dataset.textElementTag) {
+		tag_name = this.widget.dataset.textElementTag;
+	}
+
+	if (!tag_name) {
+		tag_name = 'p';
+	}
+
+	let text_element = this.createElement(tag_name);
+	text_element.textContent = this.config.content || '';
 
-	this.widget.append(paragraph);
+	this.widget.append(text_element);
 });
 
 /**

package/helper/widgets_helper.js

@@ -0,0 +1,26 @@
+/**
+ * The Widgets helper
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {ViewRender}    view
+ */
+const Widgets = Function.inherits('Alchemy.Helper', 'Widgets');
+
+/**
+ * Function to execute on the client side, when the scene is made
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ *
+ * @param    {Scene}   scene
+ * @param    {Object}  options
+ */
+Widgets.setStatic(function onScene(scene, options) {
+	Blast.setImmediate(() => {
+		Classes.Alchemy.Element.Widget.WidgetToolbar.show();
+	});
+});

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-widget",
 	"description": "The widget plugin for the AlchemyMVC",
-	"version": "0.1.5",
+	"version": "0.2.0",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -10,11 +10,12 @@
 		"widget"
 	],
 	"peerDependencies": {
-		"alchemymvc" : ">=1.1.0"
+		"alchemymvc" : ">=1.2.0",
+		"alchemy-form": "~0.2.0"
 	},
 	"repository": "11ways/alchemy-widget",
 	"license": "MIT",
 	"engines": {
-		"node" : ">=12.0.0"
+		"node" : ">=14.0.0"
 	}
 }

package/view/elements/table_of_contents.hwk

@@ -1,9 +1,23 @@
-<ol>
-	{% each self.entries as entry %}
-		<li>
-			<a href="#{% entry.id %}">
-				{{ entry.title }}
-			</a>
-		</li>
-	{% /each %}
-</ol>
+{% macro printEntries %}
+	<ol>
+		{% each entries as entry %}
+			{% run printEntry entry=entry %}
+			
+			{% if entry.children %}
+				<li>
+					{% run printEntries entries=entry.children %}
+				</li>
+			{% /if %}
+		{% /each %}
+	</ol>
+{% /macro %}
+
+{% macro printEntry %}
+	<li>
+		<a href="#{% entry.id %}">
+			{{ entry.title }}
+		</a>
+	</li>
+{% /macro %}
+
+{% run printEntries entries=self.entries}

package/view/form/inputs/edit/widget.hwk

@@ -1,6 +1,6 @@
-<alchemy-widget
+<al-widget
 	type={% alchemy_field.config.options.type %}
 	#value={% value %}
 	class="alchemy-field-value"
 	editing
-></alchemy-widget>
+></al-widget>

package/view/form/inputs/edit/widgets.hwk

@@ -1,5 +1,5 @@
-<alchemy-widgets
+<al-widgets
 	#value={% value %}
 	class="alchemy-field-value"
 	editing
-></alchemy-widgets>
+></al-widgets>

package/view/widget/elements/al_widget_toolbar.hwk

@@ -0,0 +1,49 @@
+<al-button class="start-edit" state="ready">
+	<al-icon icon-style="duotone" 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-style="duotone" icon-name="spinner" icon-flags="spin"></al-icon>
+		{%t "saving" %}
+	</al-state>
+
+	<al-state state-name="saved">
+		<al-icon icon-style="duotone" icon-name="badge-check" icon-flags="beat"></al-icon>
+		{%t "saved" %}
+	</al-state>
+
+	<al-state state-name="ready">
+		<al-icon icon-style="duotone" 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-style="duotone" 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-style="duotone" icon-name="spinner" icon-flags="spin"></al-icon>
+		{%t "saving" %}
+	</al-state>
+
+	<al-state state-name="saved">
+		<al-icon icon-style="duotone" icon-name="badge-check" icon-flags="beat"></al-icon>
+		{%t "saved" %}
+	</al-state>
+
+	<al-state state-name="ready">
+		<al-icon icon-style="duotone" icon-name="floppy-disk"></al-icon>
+		{%t "save-all" %}
+	</al-state>
+</al-button>
+
+{% if Router.routeConfig('Chimera.Editor#index') %}
+	<a href="/chimera/" data-he-link="false">
+		<al-icon icon-style="duotone" icon-name="display-code"></al-icon>
+		{%t "go-to-backend" %}
+	</a>
+{% /if %}

package/view/widget/widget_config.hwk

@@ -2,17 +2,20 @@
 <% addClass('widget-config-dialog') %>
 
 <div class="widget-config-wrapper js-he-ready-wcd">
-	<alchemy-form
+
+	<h2 class="widget-config-title">Editing "{{ title }}" widget</h2>
+
+	<al-form
 		#document={% widget_settings %}
 		#schema={% schema %}
 		class="main-form"
 	>
 		{% each fields as field %}
-			<alchemy-field
+			<al-field
 				field-name={% field.name %}
-			></alchemy-field>
+			></al-field>
 		{% /each %}
-	</alchemy-form>
+	</al-form>
 
 	<button class="btn btn-apply">
 		Apply

package/assets/stylesheets/alchemy-widget-symbols.scss

@@ -1,191 +0,0 @@
-.gg-math-plus,
-.gg-math-plus::after {
-	display: block;
-	box-sizing: border-box;
-	background: currentColor;
-	border-radius: 10px
-}
-
-.gg-math-plus {
-	margin-top: -2px;
-	position: relative;
-	transform: scale(var(--ggs,1));
-	width: 16px;
-	height: 2px
-}
-
-.gg-math-plus::after {
-	content: "";
-	position: absolute;
-	width: 2px;
-	height: 16px;
-	top: -7px;
-	left: 7px
-}
-
-.gg-menu-grid-o {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--ggs,1));
-	width: 16px;
-	height: 16px;
-}
-
-.gg-menu-grid-o::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 4px;
-	height: 4px;
-	background: currentColor;
-	box-shadow:
-		0 6px 0,
-		6px 6px 0,
-		12px 6px 0,
-		6px 12px 0,
-		12px 12px 0,
-		6px 0 0,
-		12px 0 0,
-		0 12px 0
-	;
-	border-radius: 22px;
-}
-
-.gg-remove {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--ggs,1));
-	width: 22px;
-	height: 22px;
-	border: 2px solid;
-	border-radius: 22px
-}
-
-.gg-remove::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	width: 10px;
-	height: 2px;
-	background: currentColor;
-	border-radius: 5px;
-	top: 8px;
-	left: 4px
-}
-
-.gg-trash {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--ggs,1));
-	width: 10px;
-	height: 12px;
-	border: 2px solid transparent;
-	box-shadow:
-	0 0 0 2px,
-	inset -2px 0 0,
-	inset 2px 0 0;
-	border-bottom-left-radius: 1px;
-	border-bottom-right-radius: 1px;
-	margin-top: 4px
-}
-
-.gg-trash::after,
-.gg-trash::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute
-}
-
-.gg-trash::after {
-	background: currentColor;
-	border-radius: 3px;
-	width: 16px;
-	height: 2px;
-	top: -4px;
-	left: -5px
-}
-
-.gg-trash::before {
-	width: 10px;
-	height: 4px;
-	border: 2px solid;
-	border-bottom: transparent;
-	border-top-left-radius: 2px;
-	border-top-right-radius: 2px;
-	top: -7px;
-	left: -2px
-}
-
-.gg-arrow-left {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--ggs,1));
-	width: 22px;
-	height: 22px
-}
-
-.gg-arrow-left::after,
-.gg-arrow-left::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	left: 3px
-}
-
-.gg-arrow-left::after {
-	width: 8px;
-	height: 8px;
-	border-bottom: 2px solid;
-	border-left: 2px solid;
-	transform: rotate(45deg);
-	bottom: 7px
-}
-
-.gg-arrow-left::before {
-	width: 16px;
-	height: 2px;
-	bottom: 10px;
-	background: currentColor
-}
-
-.gg-arrow-right {
-	box-sizing: border-box;
-	position: relative;
-	display: block;
-	transform: scale(var(--ggs,1));
-	width: 22px;
-	height: 22px
-}
-
-.gg-arrow-right::after,
-.gg-arrow-right::before {
-	content: "";
-	display: block;
-	box-sizing: border-box;
-	position: absolute;
-	right: 3px
-}
-
-.gg-arrow-right::after {
-	width: 8px;
-	height: 8px;
-	border-top: 2px solid;
-	border-right: 2px solid;
-	transform: rotate(45deg);
-	bottom: 7px
-}
-
-.gg-arrow-right::before {
-	width: 16px;
-	height: 2px;
-	bottom: 10px;
-	background: currentColor
-}