alchemy-widget 0.1.6 → 0.2.1

package/CHANGELOG.md

@@ -1,3 +1,32 @@
+## 0.2.1 (2022-12-23)
+
+* Add a `-first` modifier class to the first visible entry of a table-of-contents element
+* Make HTML widget editable
+* Also store and retrieve copied widget config from localStorage
+* Move `Container` widget init logic from the custom-element to the main widget instance
+* Disable most `backdrop-filter` properties, they caused too many FPS issues
+* Add the ability to hide widgets from the public
+* Allow overriding the language (`lang` attribute) of a widget
+* Fix config of container widgets not being saved
+* Only add minium dimensions when editing
+* Add `child-role` attribute & use it to set the default role of child widgets
+* Add the `toc-has-content` or `toc-is-empty` class to `al-toc` elements
+* Fix issue where `Text` widget would break when edited with LanguageTool extension
+* Do not truncate titles in table-of-contents automatically
+* Fix nesting levels in `al-toc`
+* Only allow text inside header widgets
+* Move default `Widget#populateWidget()` code to `Widget#finalizePopulatedWidget()`
+* Add `HawkejsTemplate` widget
+
+## 0.2.0 (2022-11-02)
+
+* Use `al-` prefix for all custom elements
+* Update to `alchemy-form` v0.2.0
+* Add copy & paste actions
+* Add nesting levels to `al-toc`
+* Add `al-widget-toolbar` element
+* Use `easymde` markdown editor for markdown widgets
+
 ## 0.1.6 (2022-10-12)
 
 * Allow hiding widgets from the add-menu

package/assets/stylesheets/{alchemy-widgets.scss → alchemy_widgets.scss}

@@ -1,20 +1,120 @@
-@import "alchemy-widget-symbols.scss";
+:root {
+	al-widget-toolbar {
+		display: none;
+	}
+
+	[hidden] {
+		display: none !important;
+	}
+}
+
+html.logged-in {
+	al-widget-toolbar {
+		font-size: 15px;
+
+		display: flex;
+		z-index: 9999;
+		background: rgba(200, 200, 200, 0.5);
+		box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.15);
+		bottom: 3em; left: 3em;
+		border-radius: 24px;
+		height: 5.25em;
+		padding: 1em;
+		border: 1px solid #aaa;
+		display: flex;
+		gap: 1em;
+		backdrop-filter: blur(10px);
+
+		position: fixed;
+		bottom: 16px;
+		left: 16px;
+		right: 16px;
+	}
+}
+
+al-widget-toolbar {
+
+	&[state="editing"] {
+		.start-edit {
+			display: none;
+		}
+	}
+
+	&[state="default"],
+	&[state="ready"] {
+		.stop-and-save,
+		.stop-edit,
+		.save-all {
+			display: none;
+		}
+	}
+
+	&[state="saving"],
+	&[state="saving-before-stop"] {
+		.start-edit,
+		.stop-edit {
+			display: none;
+		}
+	}
+
+	&[state="saving"] {
+		.stop-and-save {
+			display: none;
+		}
+	}
+
+	&[state="saving-before-stop"] {
+		.save-all {
+			display: none;
+		}
+	}
+
+	.stop-and-save,
+	.save-all {
+		--al-button-bg-color: green;
+		--al-button-bg-color-hover: rgb(55, 155, 55);
+	}
+
+	a,
+	al-button {
+		--al-button-font-size: 1.3em;
+		border-radius: 1em;
+	}
+
+	a {
+		background-color: black;
+		color: white;
+		padding: 0.5em 1em;
+		display: inline-flex;
+		align-items: center;
+		gap: 0.5em;
+
+		al-icon {
+			font-size: 2em;
+		}
+
+		&:hover {
+			background-color: rgb(53, 53, 53);
+		}
+	}
+}
 
-alchemy-widgets,
-alchemy-widgets-row,
-alchemy-widgets-column,
-alchemy-widget {
+al-widgets,
+al-widgets-row,
+al-widgets-column,
+al-widget {
 	
 }
 
-alchemy-widgets,
-alchemy-widgets-row,
-alchemy-widgets-column {
+al-widgets,
+al-widgets-row,
+al-widgets-column {
 	display: flex;
 
 	&.aw-editing {
 		position: relative;
 		min-height: 3rem;
+		min-width: 10rem;
 	}
 
 	> * {
@@ -22,15 +122,24 @@ alchemy-widgets-column {
 	}
 }
 
-alchemy-widget {
+al-widgets,
+al-widget {
 	&.aw-editing {
-		outline: 2px dashed rgba(0, 0, 0, 0.3);
-		outline-offset: -2px;
+		&:before {
+			content: "";
+			position: absolute;
+			inset: -2px;
+			background: white;
+			border: 2px dashed rgba(0, 0, 0, 0.4);
+			pointer-events: none;
+			//backdrop-filter: invert(80%);
+			clip-path: polygon(0% 0%, 0% 100%, 2px 100%, 2px 2px, calc(100% - 2px) 2px, calc(100% - 2px) calc(100% - 2px), 0 calc(100% - 2px), 0 100%, 100% 100%, 100% 0)
+		}
 	}
 }
 
-alchemy-widgets-row,
-alchemy-widgets-column {
+al-widgets-row,
+al-widgets-column {
 
 	&.aw-editing {
 		&:hover {
@@ -39,15 +148,15 @@ alchemy-widgets-column {
 	}
 }
 
-alchemy-widgets,
-alchemy-widgets-column {
+al-widgets,
+al-widgets-column {
 	flex-flow: column;
 
 	&.aw-editing {
 		padding-bottom: 5rem;
 	}
 
-	> alchemy-widget-add-area {
+	> al-widget-add-area {
 		position: absolute;
 		bottom: 0.2rem;
 		left: 50%;
@@ -55,17 +164,7 @@ alchemy-widgets-column {
 	}
 }
 
-alchemy-widgets {
-	min-width: 10rem;
-	min-height: 10rem;
-
-	&.aw-editing {
-		outline: 2px dashed rgba(0, 0, 0, 0.3);
-		outline-offset: -2px;
-	}
-}
-
-alchemy-widgets-row {
+al-widgets-row {
 	flex-flow: row;
 	flex: 10 10 auto;
 
@@ -73,7 +172,7 @@ alchemy-widgets-row {
 		padding-right: 5rem;
 	}
 
-	> alchemy-widget-add-area {
+	> al-widget-add-area {
 		position: absolute;
 		right: 0.5rem;
 		top: 50%;
@@ -81,7 +180,7 @@ alchemy-widgets-row {
 	}
 }
 
-alchemy-widget-add-area {
+al-widget-add-area {
 	background: rgba(255,255,255,0.5);
 	padding: 0.5rem 2rem;
 	border-radius: 2rem;
@@ -93,10 +192,10 @@ alchemy-widget-add-area {
 	}
 }
 
-alchemy-widgets-row,
-alchemy-widgets > alchemy-widgets-column,
-alchemy-widgets-column > alchemy-widgets-column,
-.alchemy-widgets-container > alchemy-widgets-column {
+al-widgets-row,
+al-widgets > al-widgets-column,
+al-widgets-column > al-widgets-column,
+.alchemy-widgets-container > al-widgets-column {
 	&.aw-editing {
 
 		&::after {
@@ -116,13 +215,13 @@ alchemy-widgets-column > alchemy-widgets-column,
 	}
 }
 
-alchemy-widgets-column {
+al-widgets-column {
 	flex: 10 10 auto;
 }
 
-alchemy-widgets-column,
-alchemy-widgets-row > alchemy-widgets-row,
-.alchemy-widgets-container > alchemy-widgets-row {
+al-widgets-column,
+al-widgets-row > al-widgets-row,
+.alchemy-widgets-container > al-widgets-row {
 	&.aw-editing {
 		&::after {
 			content: "";
@@ -141,7 +240,7 @@ alchemy-widgets-row > alchemy-widgets-row,
 	}
 }
 
-alchemy-widget-add-area {
+al-widget-add-area {
 	display: flex;
 	justify-content: center;
 	align-items: center;
@@ -165,7 +264,7 @@ alchemy-widget-add-area {
 	}
 }
 
-.aw-toolbar-button,
+.aw-actionbar-button,
 .widget-button {
 	color: #707684;
 	cursor: pointer;
@@ -183,28 +282,34 @@ alchemy-widget-add-area {
 	}
 }
 
-alchemy-widget {
+al-widget {
 	display: block;
 
 	&.aw-editing {
 		min-height: 2rem;
+		min-width: 2rem;
 
 		&:hover {
 			background: rgba(60, 60, 120, 0.2);
 
-			// This actually causes some glitches on Firefox :/
-			backdrop-filter: blur(4px);
+			// This actually causes some glitches on Firefox and chrome too :/
+			//backdrop-filter: blur(4px);
 		}
 	}
 
 	&.aw-selected {
 		background-color: #7979f347;
-		outline: 1px dashed #7979f399;
+		position: relative;
+		outline: none;
+
+		&:before {
+			background-color: yellow;
+		}
 	}
 }
 
-alchemy-widget-context,
-alchemy-widget-toolbar {
+al-widget-context,
+al-widget-actionbar {
 	display: block;
 	padding: 0.4rem;
 	background-color: white;
@@ -217,11 +322,11 @@ alchemy-widget-toolbar {
 	}
 }
 
-alchemy-widget-context {
+al-widget-context {
 	position: fixed;
 	z-index: 99999;
 
-	alchemy-widget-toolbar {
+	al-widget-actionbar {
 		position: absolute;
 		top: calc(100% + 5px);
 		right: 0;
@@ -229,7 +334,7 @@ alchemy-widget-context {
 	}
 }
 
-alchemy-widget-toolbar {
+al-widget-actionbar {
 	min-height: 2.5rem;
 	min-width: 2.5rem;
 	display: flex;
@@ -238,7 +343,7 @@ alchemy-widget-toolbar {
 		margin-right: 5px;
 	}
 
-	.aw-toolbar-button {
+	.aw-actionbar-button {
 		font-size: 2.5rem;
 		border-radius: 4px;
 		padding: 0.6rem;
@@ -254,7 +359,7 @@ alchemy-widget-toolbar {
 	}
 }
 
-alchemy-widget[type="header"] {
+al-widget[type="header"] {
 
 	h1, h2, h3, h4, h5, h6 {
 		padding: 1em 0;
@@ -272,7 +377,7 @@ alchemy-widget[type="header"] {
 	}
 }
 
-alchemy-widget[type="text"] {
+al-widget[type="text"] {
 
 	&.aw-editing {
 		&,
@@ -288,7 +393,7 @@ alchemy-widget[type="text"] {
 	}
 }
 
-.aw-toolbar-button {
+.aw-actionbar-button {
 
 	.aw-header-h {
 		font-weight: bold;
@@ -301,16 +406,26 @@ alchemy-widget[type="text"] {
 	}
 }
 
-table-of-contents {
+al-toc {
 	display: block;
 }
 
 [data-he-template="widget/widget_config"] {
-	alchemy-label {
+
+	.widget-config-title {
+		margin-bottom: 1rem;
+		color: black;
+	}
+
+	al-label {
 		padding: 0.5rem;
 
 		[data-he-name="field-title"] {
 			display: block;
 		}
 	}
+}
+
+.aw-hidden {
+	opacity: 0.8;
 }

package/bootstrap.js

@@ -1,5 +1,95 @@
-if (alchemy.plugins.form) {
-	throw new Error('The alchemy-form plugin has to be loaded AFTER alchemy-widget');
+alchemy.requirePlugin('form', false);
+
+if (!alchemy.plugins.form) {
+	throw new Error('The alchemy-form plugin has to be loaded BEFORE alchemy-widget');
+}
+
+/* Ckeditor 5 available toolbar buttons (from styleboost build)
+[
+	"blockQuote",
+	"bold",
+	"code",
+	"codeBlock",
+	"selectAll",
+	"undo",
+	"redo",
+	"heading",
+	"horizontalLine",
+	"imageTextAlternative",
+	"toggleImageCaption",
+	"imageStyle:inline",
+	"imageStyle:alignLeft",
+	"imageStyle:alignRight",
+	"imageStyle:alignCenter",
+	"imageStyle:alignBlockLeft",
+	"imageStyle:alignBlockRight",
+	"imageStyle:block",
+	"imageStyle:side",
+	"imageStyle:wrapText",
+	"imageStyle:breakText",
+	"uploadImage",
+	"imageUpload",
+	"indent",
+	"outdent",
+	"italic",
+	"link",
+	"linkImage",
+	"numberedList",
+	"bulletedList",
+	"mediaEmbed",
+	"removeFormat",
+	"sourceEditing",
+	"strikethrough",
+	"insertTable",
+	"tableColumn",
+	"tableRow",
+	"mergeTableCells",
+	"toggleTableCaption",
+	"tableCellProperties",
+	"tableProperties",
+	"todoList"
+]
+*/
+
+let options = {
+	ckeditor_path: null,
+	ckeditor_toolbar: [
+		'heading',
+		'|',
+		'bold', 'italic', 'link', 'bulletedList', 'numberedList',
+		'|',
+		'indent',
+		'outdent',
+		'horizontalLine',
+		'|',
+		'blockQuote',
+		'code',
+		'codeBlock',
+		'|',
+		'imageUpload',
+		'insertTable',
+		'|',
+		'undo', 'redo',
+	],
+};
+
+// Inject the user-overridden options
+alchemy.plugins.widget = Object.assign(options, alchemy.plugins.widget);
+
+if (!options.ckeditor_path) {
+	if (alchemy.plugins.styleboost) {
+		options.ckeditor_path = '/public/ckeditor/5/ckeditor.js';
+	} else {
+		options.ckeditor_path = 'https://cdn.ckeditor.com/ckeditor5/35.3.2/inline/ckeditor.js';
+	}
+}
+
+if (options.ckeditor_path) {
+	alchemy.exposeStatic('ckeditor_path', options.ckeditor_path);
+}
+
+if (options.ckeditor_toolbar) {
+	alchemy.exposeStatic('ckeditor_toolbar', options.ckeditor_toolbar);
 }
 
 Router.add({
@@ -7,4 +97,13 @@ Router.add({
 	methods    : 'post',
 	paths      : '/api/alchemywidgets/save',
 	policy     : 'logged_in',
+	permission : 'alchemy.widgets.save',
 });
+
+Router.add({
+	name       : 'AlchemyWidgets#uploadImage',
+	methods    : 'post',
+	paths      : '/api/alchemywidgets/upload',
+	policy     : 'logged_in',
+	permission : 'alchemy.widgets.image.upload',
+});

package/controller/alchemy_widgets_controller.js

@@ -184,4 +184,68 @@ AlchemyWidgets.setAction(async function save(conduit) {
 	};
 
 	conduit.end(result);
+});
+
+/**
+ * Handle an image upload from within CKeditor
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.1
+ * @version  0.2.1
+ */
+AlchemyWidgets.setAction(async function uploadImage(conduit) {
+
+	let file = conduit.files.upload;
+
+	const MediaFile = this.getModel('MediaFile');
+
+	let name = file.name.split('.');
+
+	// Remove the last piece if there are more than 1
+	if (name.length > 1) {
+		name.pop();
+	}
+
+	// Join them again
+	name = name.join('.');
+
+	const options = {
+		move     : true,
+		filename : file.name,
+		name     : name,
+	};
+
+	MediaFile.addFile(file.path, options, (err, result) => {
+
+		if (err) {
+			return conduit.error(err);
+		}
+
+		const params = {
+			id : result._id,
+		};
+
+		let default_path = alchemy.routeUrl('Media::image', params);
+		let url = RURL.parse(default_path);
+
+		let path_800 = url.clone();
+		path_800.param('width', '800');
+
+		let path_1024 = url.clone();
+		path_1024.param('height', '1024');
+
+		let path_1920 = url.clone();
+		path_1920.param('width', '1920');
+
+		let response = {
+			urls: {
+				default : default_path,
+				'800'   : path_800+'',
+				'1024'  : path_1024+'',
+				'1920'  : path_1920+''
+			}
+		};
+
+		conduit.end(response);
+	});
 });