alchemy-widget 0.2.5 → 0.2.7

package/helper/widgets/markdown.js

@@ -52,21 +52,17 @@ Markdown.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.0
+ * @version  0.2.7
  */
 Markdown.setMethod(async function _startEditor() {
 
 	Hawkejs.removeChildren(this.widget);
 
-	hawkejs.scene.enableStyle('https://unpkg.com/easymde/dist/easymde.min.css');
-	await hawkejs.require('https://unpkg.com/easymde/dist/easymde.min.js');
-
-	let element = this.createElement('textarea');
-	this.widget.append(element);
-	element.value = this.config.markdown || '';
-
-	const easyMDE = new EasyMDE({element});
-	this.easy_mde = easyMDE;
+	if (this.use_toast) {
+		this._startToastEditor();
+	} else {
+		this._startCodeEditor();
+	}
 });
 
 /**
@@ -74,22 +70,99 @@ Markdown.setMethod(async function _startEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.2
+ * @version  0.2.7
  */
 Markdown.setMethod(function _stopEditor() {
 
 	Hawkejs.removeChildren(this.widget);
-	this.easy_mde = null;
+
+	if (this.use_toast) {
+		this._startToastEditor();
+	}
 
 	return this.loadWidget();
 });
 
+/**
+ * Start the code editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Markdown.setMethod(async function _startCodeEditor() {
+
+	let element = this.createElement('div');
+	element.classList.add('markdown-editor-container');
+	this.widget.append(element);
+
+	let code_input = this.createElement('al-code-input');
+	code_input.show_line_numbers = false;
+	element.append(code_input);
+
+	code_input.value = this.config.markdown || '';
+
+	this.code_input = code_input;
+});
+
+/**
+ * Start the toast editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Markdown.setMethod(async function _startToastEditor() {
+
+	hawkejs.scene.enableStyle('https://uicdn.toast.com/editor/latest/toastui-editor.min.css');
+	await hawkejs.require('https://uicdn.toast.com/editor/latest/toastui-editor-all.min.js');
+
+	const Editor = toastui.Editor
+
+	let element = this.createElement('div');
+	element.classList.add('markdown-editor-container');
+	this.widget.append(element);
+
+	const editor = new Editor({
+		el                 : element,
+		height             : '600px',
+		initialEditType    : 'markdown',
+		previewStyle       : 'vertical',
+		usageStatistics    : false,
+		autofocus          : false,
+		previewStyle       : 'global',
+		hideModeSwitch     : true,
+		initialEditType    : 'markdown',
+	});
+
+	this.toast_editor = editor;
+	editor.setMarkdown(this.config.markdown || '');
+});
+
+/**
+ * Stop the toast editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+Markdown.setMethod(function _stopToastEditor() {
+
+	if (this.toast_editor) {
+		try {
+			this.toast_editor.destroy();
+		} catch (err) {}
+	}
+
+	this.toast_editor = null;
+});
+
 /**
  * Get the config of this widget
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.0
+ * @version  0.2.7
  *
  * @return   {Object}
  */
@@ -97,8 +170,10 @@ Markdown.setMethod(function syncConfig() {
 
 	let value = '';
 
-	if (this.easy_mde) {
-		value = this.easy_mde.value();
+	if (this.toast_editor) {
+		value = this.toast_editor.getMarkdown();
+	} else if (this.code_input) {
+		value = this.code_input.value;
 	}
 
 	this.config.markdown = value;

package/helper_field/widget.js

@@ -5,7 +5,7 @@
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.1.0
+ * @version  0.2.6
  */
 const WidgetField = Function.inherits('Alchemy.Field.Schema', function Widget(schema, name, options) {
 
@@ -17,12 +17,15 @@ const WidgetField = Function.inherits('Alchemy.Field.Schema', function Widget(sc
 		options.type = 'text';
 	}
 
+	// Already set the options (they'll be changed by the super call too though)
+	this.options = options;
+
 	// A custom schema should NOT be passed to this class, this class uses
 	// a fixed schema that should not be altered.
 	// But because that's exactly what happens when cloning (like preparing
 	// the data to be sent to Hawkejs) we have to allow it anyway
 	if (!options.schema) {
-		let WidgetClass = Classes.Alchemy.Widget.Widget.getMember(options.type),
+		let WidgetClass = this.widget_class,
 		    sub_schema = WidgetClass.schema.clone();
 
 		options.schema = sub_schema;
@@ -31,6 +34,24 @@ const WidgetField = Function.inherits('Alchemy.Field.Schema', function Widget(sc
 	Widget.super.call(this, schema, name, options);
 });
 
+/**
+ * Get the constructor of the widget class
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ *
+ * @type   {Function}
+ */
+WidgetField.setProperty(function widget_class() {
+
+	if (!this.options?.type) {
+		return;
+	}
+
+	return Classes.Alchemy.Widget.Widget.getMember(this.options.type)
+});
+
 /**
  * Cast the given value to this field's type
  *
@@ -75,3 +96,33 @@ WidgetField.setMethod(function toDry() {
 
 	return {value};
 });
+
+/**
+ * See if the given value is considered not-empty for this field
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ *
+ * @param    {Mixed}   value
+ *
+ * @return   {Boolean}
+ */
+WidgetField.setMethod(function valueHasContent(value) {
+
+	if (!value) {
+		return false;
+	}
+
+	let constructor = this.widget_class;
+
+	if (!constructor) {
+		return true;
+	}
+
+	value = this.cast(value);
+
+	let instance = new constructor();
+
+	return instance.valueHasContent(value);
+});

package/helper_field/widgets.js

@@ -36,4 +36,28 @@ const WidgetsField = Function.inherits('Alchemy.Field.Schema', function Widgets(
 WidgetsField.setMethod(function getOptionsForDrying() {
 	let {schema, ...options} = this.options;
 	return options;
+});
+
+/**
+ * See if the given value is considered not-empty for this field
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.6
+ * @version  0.2.6
+ *
+ * @param    {Mixed}   value
+ *
+ * @return   {Boolean}
+ */
+WidgetsField.setMethod(function valueHasContent(value) {
+
+	if (!value) {
+		return false;
+	}
+
+	if (!value.widgets?.length) {
+		return false;
+	}
+
+	return true;
 });

package/lib/conduit_extras.js

@@ -0,0 +1,65 @@
+/**
+ * Add a method to the conduit class to set the toolbar manager
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {Alchemy.Document}   document_or_model
+ */
+Classes.Alchemy.Conduit.Conduit.setMethod(function setToolbarInfo(document_or_model, scenario = 'frontend') {
+	try {
+		_setToolbarInfo.call(this, document_or_model, scenario);
+	} catch (err) {
+		console.error('Error setting toolbar info', err);
+	}
+});
+
+/**
+ * Add a method to the conduit class to set the toolbar manager
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {Alchemy.Document}   document_or_model
+ */
+function _setToolbarInfo(document_or_model, scenario = 'frontend') {
+
+	if (!this.hasPermission('alchemy.widgets.toolbar')) {
+		return;
+	}
+
+	let manager = Classes.Alchemy.Widget.EditorToolbarManager.create(this);
+	manager.scenario = scenario;
+
+	this.set('toolbar_manager', manager);
+	this.expose('toolbar_manager', manager);
+
+	let document_watcher,
+	    document,
+	    model;
+
+	if (document_or_model) {
+		if (document_or_model instanceof Classes.Alchemy.Document.Document) {
+			document = document_or_model;
+		} else {
+			model = document_or_model;
+		}
+	}
+
+	document_watcher = manager.setDocument(document);
+
+	if (document) {
+		manager.setModel(document.$model_name);
+		document_watcher.addWatcher(this);
+
+		this.set('edit_model_name', document.$model_name);
+		this.set('edit_model_pk', document.$pk);
+	} else if (model) {
+		manager.setModel(model.model_name);
+		this.set('edit_model_name', model.model_name);
+	} else {
+		manager.setModel(null);
+	}
+};

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-widget",
 	"description": "The widget plugin for the AlchemyMVC",
-	"version": "0.2.5",
+	"version": "0.2.7",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -11,7 +11,7 @@
 	],
 	"peerDependencies": {
 		"alchemymvc" : ">=1.2.0",
-		"alchemy-form": "~0.2.1"
+		"alchemy-form": "~0.2.4"
 	},
 	"repository": "11ways/alchemy-widget",
 	"license": "MIT",

package/view/widget/elements/al_editor_toolbar.hwk

@@ -0,0 +1,3 @@
+<div data-he-slot="left"></div>
+<div data-he-slot="center"></div>
+<div data-he-slot="right"></div>

package/view/widget/elements/al_user_avatar.hwk

@@ -0,0 +1,5 @@
+<div class="bubble-representation">
+	<span class="first-letter">
+		{{ self.first_letter }}
+	</span>
+</div>

package/view/widget/elements/al_widget_toolbar.hwk

@@ -46,4 +46,10 @@
 		<al-icon icon-style="duotone" icon-name="display-code"></al-icon>
 		{%t "go-to-backend" %}
 	</a>
-{% /if %}
+{% /if %}
+
+<al-user-avatar-group
+	class="watchers"
+></al-user-avatar-group>
+
+<div data-area="buttons"></div>