alchemy-widget 0.1.6 → 0.2.1

package/helper/widgets/partial.js

@@ -67,7 +67,7 @@ Partial.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.6
- * @version  0.1.6
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
@@ -105,8 +105,6 @@ Partial.setMethod(async function populateWidget() {
 
 		this.widget.append(placeholder);
 	}
-
-	populateWidget.super.call(this);
 });
 
 /**

package/helper/widgets/sourcecode.js

@@ -37,14 +37,12 @@ Sourcecode.setProperty('sourcecode_field', 'sourcecode');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
 Sourcecode.setMethod(function populateWidget() {
 
-	populateWidget.super.call(this);
-
 	let source = this.config[this.sourcecode_field] || '';
 
 	if (!source) {
@@ -65,13 +63,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 +94,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,11 @@ 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.1
  */
 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,7 +28,7 @@ Text.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.6
+ * @version  0.2.1
  *
  * @param    {HTMLElement}   widget
  */
@@ -36,8 +36,6 @@ Text.setMethod(function populateWidget() {
 
 	let tag_name;
 
-	populateWidget.super.call(this);
-
 	if (this.widget.dataset.textElementTag) {
 		tag_name = this.widget.dataset.textElementTag;
 	}
@@ -57,13 +55,16 @@ Text.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 Text.setMethod(function _startEditor() {
 
-	let child = this.widget.children[0];
+	let child,
+	    i;
+
+	for (i = 0; i < this.widget.children.length; i++) {
+		child = this.widget.children[i];
 
-	if (child) {
 		child.setAttribute('contenteditable', true);
 	}
 });
@@ -73,13 +74,16 @@ Text.setMethod(function _startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  */
 Text.setMethod(function _stopEditor() {
 
-	let child = this.widget.children[0];
+	let child,
+	    i;
+
+	for (i = 0; i < this.widget.children.length; i++) {
+		child = this.widget.children[i];
 
-	if (child) {
 		child.removeAttribute('contenteditable');
 	}
 });
@@ -89,17 +93,13 @@ Text.setMethod(function _stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.1
  *
  * @return   {Object}
  */
 Text.setMethod(function syncConfig() {
 
-	let child = this.widget.children[0];
-
-	if (child) {
-		this.config.content = child.textContent;
-	}
+	this.config.content = this.widget?.textContent;
 
 	return this.config;
 });

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.6",
+	"version": "0.2.1",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -10,7 +10,8 @@
 		"widget"
 	],
 	"peerDependencies": {
-		"alchemymvc" : ">=1.1.0"
+		"alchemymvc" : ">=1.2.0",
+		"alchemy-form": "~0.2.1"
 	},
 	"repository": "11ways/alchemy-widget",
 	"license": "MIT",

package/view/elements/table_of_contents.hwk

@@ -1,9 +1,33 @@
-<ol>
-	{% each self.entries as entry %}
-		<li>
-			<a href="#{% entry.id %}">
-				{{ entry.title }}
-			</a>
-		</li>
-	{% /each %}
-</ol>
+<% all_entries = self.entries %>
+
+{% 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=all_entries %}
+
+{% if all_entries %}
+	<% self.classList.add('toc-has-content') %>
+{% else %}
+	<% self.classList.add('toc-is-empty') %>
+{% /if %}
+
+<% all_entries = null %>

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
-}