alchemy-widget 0.2.6 → 0.2.7

package/helper/document_watcher.js

@@ -0,0 +1,284 @@
+const DOC_MAP = new Classes.WeakValueMap();
+
+// A list of vibrant colours to choose from
+const COLOURS = [
+	'#0095e8', // Blue
+	'#47be7d', // Green
+	'#5014d0', // Purple
+	'#f1bc00', // Yellow
+	'#d9214e', // Red
+	'#00a6a6', // Cyan
+	'#ff7f00', // Orange
+	'#20c997', // Teal
+	'#6610f2', // Indigo
+	'#e83e8c', // Pink
+	'#6f42c1', // Violet
+	'#9c27b0', // Periwinkle
+];
+
+/**
+ * The syncable DocumentWatcher class:
+ * keeps track of how many people are viewing a document
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+const DocumentWatcher = Function.inherits('Alchemy.Syncable', 'Alchemy.Widget', function DocumentWatcher() {
+	DocumentWatcher.super.call(this, 'document_watcher');
+});
+
+/**
+ * Create a watcher for the given document
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {String}   model
+ * @param    {*}        pk
+ */
+DocumentWatcher.setStatic(function create(model, pk) {
+
+	if (typeof model != 'string') {
+		model = model.model_name;
+	}
+
+	let id = model + ':' + pk,
+	    watcher = DOC_MAP.get(id);
+
+	if (!watcher) {
+		watcher = new DocumentWatcher();
+		watcher.setDocument(model, pk);
+		DOC_MAP.set(id, watcher);
+	}
+
+	return watcher;
+});
+
+if (Blast.isNode) {
+
+	/**
+	 * Add a viewer based on the conduit
+	 *
+	 * @author   Jelle De Loecker   <jelle@elevenways.be>
+	 * @since    0.2.7
+	 * @version  0.2.7
+	 *
+	 * @param    {Alchemy.Conduit}   conduit
+	 */
+	DocumentWatcher.setTypedMethod([Types.Alchemy.Conduit], function addWatcher(conduit) {
+
+		let user_id = '' + conduit.getUserId(),
+		    scene_id = conduit.scene_id;
+
+		this.addWatcher(user_id, scene_id);
+
+		// Watchers should also be registered as a client
+		this.registerClient(conduit);
+
+		let scene = conduit.scene;
+
+		if (scene) {
+			scene.on('destroyed', () => {
+				this.removeWatcher(user_id, scene_id);
+			});
+		}
+	});
+
+	/**
+	 * Remove a viewer based on the conduit
+	 *
+	 * @author   Jelle De Loecker   <jelle@elevenways.be>
+	 * @since    0.2.7
+	 * @version  0.2.7
+	 *
+	 * @param    {Alchemy.Conduit}   conduit
+	 */
+	DocumentWatcher.setTypedMethod([Types.Alchemy.Conduit], function removeWatcher(conduit) {
+		let user_id = '' + conduit.getUserId(),
+		    scene_id = conduit.scene_id;
+
+		this.removeWatcher(user_id, scene_id);
+	});
+}
+
+/**
+ * Add the model property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+DocumentWatcher.setStateProperty('model', {allow_client_set: false});
+
+/**
+ * Add the pk property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+DocumentWatcher.setStateProperty('pk', {allow_client_set: false});
+
+/**
+ * Add the title property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+DocumentWatcher.setStateProperty('title', {allow_client_set: false});
+
+/**
+ * Add the viewers property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+DocumentWatcher.setStateProperty('viewers', {
+	allow_client_set: false,
+	default: () => [],
+});
+
+/**
+ * Set the model and primary key
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {String}   model
+ * @param    {*}        pk
+ */
+DocumentWatcher.setMethod(function setDocument(model, pk) {
+	this.state.model = model;
+	this.state.pk = pk;
+
+	if (model && pk) {
+		this.id = model + ':' + pk;
+	}
+});
+
+/**
+ * Add a viewer
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {user_id}   user_id
+ */
+DocumentWatcher.setSyncMethod([Types.String, Types.String], async function addWatcher(user_id, scene_id) {
+
+	let viewers = this.viewers,
+	    entry;
+
+	for (entry of viewers) {
+		if (entry.user_id == user_id) {
+			entry.scenes.push(scene_id);
+			this.emitViewers();
+			return;
+		}
+	}
+
+	entry = {
+		user_id : user_id,
+		scenes  : [scene_id],
+		info    : null,
+	};
+
+	viewers.push(entry);
+
+	let info = await this.getUserInfo(user_id);
+	entry.info = info || false;
+
+	this.emitViewers();
+});
+
+/**
+ * Emit the viewers property change, if they're all ready
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+DocumentWatcher.setMethod(function emitViewers() {
+	this.emitPropertyChange('viewers');
+});
+
+/**
+ * Remove a viewer
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {user_id}   user_id
+ */
+DocumentWatcher.setSyncMethod([Types.String, Types.String], async function removeWatcher(user_id, scene_id) {
+
+	let viewers = this.viewers,
+	    entry;
+
+	let user_to_remove;
+
+	for (entry of viewers) {
+		if (entry.user_id == user_id) {
+
+			let index = entry.scenes.indexOf(scene_id);
+
+			if (index > -1) {
+				entry.scenes.splice(index, 1);
+			}
+
+			if (entry.scenes.length == 0) {
+				user_to_remove = entry;
+			}
+		}
+	}
+
+	if (user_to_remove) {
+		let index = viewers.indexOf(user_to_remove);
+		viewers.splice(index, 1);
+		this.emitViewers();
+	}
+});
+
+/**
+ * Get information about an author
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {String}   user_id
+ */
+DocumentWatcher.setUpstreamMethod(async function getUserInfo(user_id) {
+
+	if (!user_id) {
+		return;
+	}
+
+	let document = await Model.get('User').findByPk(user_id);
+
+	if (!document) {
+		return;
+	}
+
+	// Get a colour from the COLOURS array based on the user's id
+	let color = COLOURS[parseInt(user_id.slice(-4), 16) % COLOURS.length];
+
+	let result = {
+		pk         : document.$pk,
+		first_name : document.first_name || document.firstname,
+		last_name  : document.last_name || document.lastname,
+		username   : document.username,
+		color      : color,
+	};
+
+	return result;
+});

package/helper/editor_toolbar_manager.js

@@ -0,0 +1,296 @@
+const SCENE_MAP = new Map(),
+      CLEAR_DOC_ID = Symbol('clear_doc_id');
+
+/**
+ * The syncable EditorToolbarManager class:
+ * handles a user's toolbar
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+const EditorToolbarManager = Function.inherits('Alchemy.Syncable', 'Alchemy.Widget', function EditorToolbarManager() {
+	EditorToolbarManager.super.call(this, 'editor_toolbar_manager');
+});
+
+if (Blast.isNode) {
+	/**
+	 * Create a manager for the given conduit
+	 * (It should be linked to a user's tab/scene)
+	 *
+	 * @author   Jelle De Loecker   <jelle@elevenways.be>
+	 * @since    0.2.7
+	 * @version  0.2.7
+	 *
+	 * @param    {Conduit}        conduit
+	 *
+	 * @return   {EditorToolbarManager}
+	 */
+	EditorToolbarManager.setStatic(function create(conduit) {
+
+		if (!conduit?.scene_id) {
+			return;
+		}
+
+		let id = conduit.scene_id,
+			ref = SCENE_MAP.get(id),
+			manager;
+		
+		if (ref) {
+			manager = ref.deref();
+		}
+
+		if (!manager) {
+			manager = new EditorToolbarManager();
+			manager.id = id;
+			manager.registerClient(conduit);
+			manager.conduit = conduit;
+
+			ref = new WeakRef(manager);
+			SCENE_MAP.set(id, ref);
+		}
+
+		if (manager.conduit != conduit) {
+			// Don't create a shim like this,
+			// all the other important properties will be "frozen"
+			//manager = Object.create(manager);
+			manager.conduit = conduit;
+		}
+
+		return manager;
+	});
+}
+
+/**
+ * Add the document_watcher property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+EditorToolbarManager.setStateProperty('document_watcher', {allow_client_set: false});
+
+/**
+ * Add the model_name property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+EditorToolbarManager.setStateProperty('model_name', {allow_client_set: false});
+
+/**
+ * Add the title property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+EditorToolbarManager.setStateProperty('title', {allow_client_set: false});
+
+/**
+ * Add the scenario property
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+EditorToolbarManager.setStateProperty('scenario');
+
+/**
+ * Clear the model fallback
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {String}   model_name
+ */
+EditorToolbarManager.setMethod(function clearModelFallback() {
+
+	if (!this.fallback_id) {
+		this.fallback_id = 0;
+	}
+
+	this.fallback_id++;
+
+	return this.fallback_id;
+});
+
+/**
+ * If a response is sent through the conduit, and no model & document is set,
+ * make it clear those values.
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {String}   model_name
+ */
+EditorToolbarManager.setMethod(function queueModelFallback(model_name) {
+
+	let current_id = this.clearModelFallback();
+
+	this.conduit.on('ending', () => {
+		if (this.fallback_id == current_id) {
+			this.setDocument(null);
+			this.setModel(model_name);
+		}
+	});
+});
+
+/**
+ * Set the current model
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {String}   model_name
+ */
+EditorToolbarManager.setTypedMethod([Types.String.optional().nullable()], function setModel(model_name) {
+
+	this.clearModelFallback();
+
+	let old_model = this.state.model_name;
+
+	this.state.model_name = model_name;
+
+	if (old_model != model_name) {
+		this.emitPropertyChange('model_name');
+	}
+
+	if (Blast.isNode && model_name) {
+		this.addTemplateToRender('buttons', 'chimera/toolbar/create_button', {
+			model_name: model_name.underscore(),
+		});
+	}
+});
+
+/**
+ * Set the document
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {Alchemy.Document}   doc
+ *
+ * @return   {DocumentWatcher}
+ */
+EditorToolbarManager.setMethod(function setDocument(doc) {
+
+	this.clearModelFallback();
+
+	this.clearArea('buttons');
+
+	if (!doc) {
+		this.setDocumentWatcher(null);
+		return;
+	}
+
+	let model = doc.$model,
+	    model_name = doc.$model_name,
+	    pk_val = doc.$pk;
+
+	let document_watcher = Classes.Alchemy.Widget.DocumentWatcher.create(model_name, pk_val);
+	document_watcher.setProperty('title', ''+pk_val);
+
+	this.setDocumentWatcher(document_watcher);
+
+	if (this.scenario != 'chimera') {
+		this.addTemplateToRender('buttons', 'chimera/toolbar/edit_in_chimera_button', {
+			model_name: model_name.underscore(),
+			record_pk: pk_val,
+		});
+	}
+
+	if (model.chimera.record_preview) {
+		if (this.scenario == 'chimera') {
+			this.addTemplateToRender('buttons', 'chimera/toolbar/preview_button', {
+				model_name: model_name.underscore(),
+				record_pk: pk_val,
+			});
+		}
+	}
+
+	return document_watcher;
+});
+
+/**
+ * Clear an area
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+EditorToolbarManager.setMethod(function clearArea(area) {
+	this.clearQueue('render_template');
+	this.pushQueue('clear_area', area);
+});
+
+/**
+ * Add a template to the toolbar
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+EditorToolbarManager.setMethod(function addTemplateToRender(area, template, variables) {
+	this.pushQueue('render_template', area, template, variables);
+});
+
+/**
+ * Set the document watcher to use
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ *
+ * @param    {Alchemy.Widget.DocumentWatcher}   watcher
+ */
+EditorToolbarManager.setSyncMethod(function setDocumentWatcher(watcher) {
+
+	if (this[CLEAR_DOC_ID]) {
+		clearTimeout(this[CLEAR_DOC_ID]);
+	}
+
+	let old_watcher = this.state.document_watcher;
+
+	this.state.document_watcher = watcher;
+
+	if (Blast.isNode) {
+
+		if (old_watcher) {
+			old_watcher.removeWatcher(this.conduit);
+		}
+
+		if (watcher) {
+			watcher.registerClient(this.conduit);
+		}
+	}
+
+	this.emitPropertyChange('document_watcher');
+});
+
+/**
+ * Queue clearing the document watcher
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.7
+ * @version  0.2.7
+ */
+EditorToolbarManager.setMethod(function queueClearDocumentWatcher(timeout = 500) {
+
+	if (this[CLEAR_DOC_ID]) {
+		clearTimeout(this[CLEAR_DOC_ID]);
+	}
+
+	this[CLEAR_DOC_ID] = setTimeout(() => {
+		if (this.state.document_watcher) {
+			this.setDocumentWatcher(null);
+		}
+	}, timeout);
+});

package/helper/widgets/00-widget.js

@@ -818,16 +818,16 @@ Widget.setMethod(function queueVisibilityUpdate() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.1
- * @version  0.2.1
+ * @version  0.2.7
  */
 Widget.setMethod(function checkVisibility() {
 
 	let should_be_hidden = this.is_hidden;
 
 	if (this.editing) {
-		this.widget.hidden = false;
+		this.widget.hideForEveryone(false);
 	} else {
-		this.widget.hidden = should_be_hidden;
+		this.widget.hideForEveryone(should_be_hidden);
 	}
 
 	if (should_be_hidden) {

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;