alchemy-widget 0.2.6 → 0.2.8

package/helper/widgets/markdown.js

@@ -52,12 +52,68 @@ Markdown.setMethod(function populateWidget() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.6
+ * @version  0.2.7
  */
 Markdown.setMethod(async function _startEditor() {
 
 	Hawkejs.removeChildren(this.widget);
 
+	if (this.use_toast) {
+		this._startToastEditor();
+	} else {
+		this._startCodeEditor();
+	}
+});
+
+/**
+ * Stop the editor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.2.7
+ */
+Markdown.setMethod(function _stopEditor() {
+
+	Hawkejs.removeChildren(this.widget);
+
+	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');
 
@@ -69,7 +125,7 @@ Markdown.setMethod(async function _startEditor() {
 
 	const editor = new Editor({
 		el                 : element,
-		height             : '900px',
+		height             : '600px',
 		initialEditType    : 'markdown',
 		previewStyle       : 'vertical',
 		usageStatistics    : false,
@@ -84,15 +140,13 @@ Markdown.setMethod(async function _startEditor() {
 });
 
 /**
- * Stop the editor
+ * Stop the toast editor
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.2.6
+ * @since    0.2.7
+ * @version  0.2.7
  */
-Markdown.setMethod(function _stopEditor() {
-
-	Hawkejs.removeChildren(this.widget);
+Markdown.setMethod(function _stopToastEditor() {
 
 	if (this.toast_editor) {
 		try {
@@ -101,8 +155,6 @@ Markdown.setMethod(function _stopEditor() {
 	}
 
 	this.toast_editor = null;
-
-	return this.loadWidget();
 });
 
 /**
@@ -110,7 +162,7 @@ Markdown.setMethod(function _stopEditor() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.2.6
+ * @version  0.2.7
  *
  * @return   {Object}
  */
@@ -120,6 +172,8 @@ Markdown.setMethod(function syncConfig() {
 
 	if (this.toast_editor) {
 		value = this.toast_editor.getMarkdown();
+	} else if (this.code_input) {
+		value = this.code_input.value;
 	}
 
 	this.config.markdown = value;

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.6",
+	"version": "0.2.8",
 	"author": "Jelle De Loecker <jelle@elevenways.be>",
 	"keywords": [
 		"alchemy",
@@ -10,8 +10,8 @@
 		"widget"
 	],
 	"peerDependencies": {
-		"alchemymvc" : ">=1.2.0",
-		"alchemy-form": "~0.2.4"
+		"alchemymvc" : ">=1.3.0",
+		"alchemy-form": "~0.2.6"
 	},
 	"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>