alchemy-media 0.6.4 → 0.7.0

package/CHANGELOG.md

@@ -1,3 +1,9 @@
+## 0.7.0 (2022-11-02)
+
+* Use the `al-` prefix for custom elements
+* Rename `al-ico` to `al-icon`
+* Allow selecting existing uploaded files in an `al-file` element
+
 ## 0.6.4 (2022-10-13)
 
 * Add the `Media#loadIconFont()` helper method

package/assets/stylesheets/alchemy_media.scss

@@ -0,0 +1 @@
+@import "media_elements/index.scss";

package/assets/stylesheets/{element/alchemy_file.scss → media_elements/_file.scss}

@@ -37,7 +37,7 @@ al-file {
 			visibility: hidden;
 		}
 
-		al-ico {
+		al-icon {
 			position: absolute;
 			top: 0;
 			left: 0;
@@ -94,7 +94,7 @@ al-file {
 	}
 }
 
-alchemy-field[field-view="file_preview"] {
+al-field[field-view="file_preview"] {
 	[data-he-name="field"] .field {
 		padding: 0;
 
@@ -105,9 +105,9 @@ alchemy-field[field-view="file_preview"] {
 	}
 }
 
-alchemy-field[field-view="file_preview"],
-alchemy-field[field-view="file"],
-alchemy-field[field-type="file"] {
+al-field[field-view="file_preview"],
+al-field[field-view="file"],
+al-field[field-type="file"] {
 
 	&[mode="inline"]  {
 		.field img {

package/assets/stylesheets/{alchemy_icons.scss → media_elements/_icon.scss}

@@ -1,4 +1,4 @@
-al-ico {
+al-icon {
 	// inline-flex breaks certain (duotone) icons
 	//--fa-display: inline-flex;
 	flex-flow: column;

package/assets/stylesheets/media_elements/_image.scss

@@ -0,0 +1,25 @@
+al-image {
+	position: relative;
+	display: inline-block;
+	overflow: hidden;
+
+	.placeholder {
+		position: absolute;
+		left: 0;
+		top: 0;
+		width: 100%;
+		height: 100%;
+		transform: scale(1.03);
+		filter: blur(8px);
+		z-index: -1;
+		transition: 0.1s transform;
+	}
+
+	.final {
+		height: auto;
+		width: auto;
+		opacity: 0;
+		transition: 0.1s opacity, 0.1s transform;
+		transform: scale(1.03)
+	}
+}

package/assets/stylesheets/media_elements/index.scss

@@ -0,0 +1,4 @@
+@import "_file.scss";
+@import "_icon.scss";
+@import "_svg.scss";
+@import "_image.scss";

package/bootstrap.js

@@ -48,6 +48,13 @@ Router.get('Media::image', options.url + '/{id}', 'MediaFile#image');
 Router.get('MediaFile#data', '/media/data/{prefix}/{id}', 'MediaFile#data');
 Router.get('MediaFile#info', '/media/info', 'MediaFile#info');
 
+Router.add({
+	name       : 'MediaFile#recordsource',
+	methods    : ['get'],
+	paths      : '/media/recordsource',
+	permission : 'media.recordsource',
+});
+
 // Allow dummy extensions
 Router.get('Media::fileextension', '/media/file/{id}.{extension}', 'MediaFile#file');
 

package/controller/media_files_controller.js

@@ -382,4 +382,74 @@ MediaFiles.setAction(function info(conduit) {
 			conduit.end(size);
 		});
 	});
+});
+
+/**
+ * Recordsource action
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.0
+ * @version  0.7.0
+ *
+ * @param    {Conduit}   conduit
+ */
+MediaFiles.setAction(async function recordsource(conduit) {
+
+	const model = this.model;
+
+	let crit = model.find();
+
+	model.disableTranslations();
+
+	let page_size = conduit.param('page_size'),
+	    filters = conduit.param('filters'),
+	    fields = conduit.param('fields'),
+	    page = conduit.param('page'),
+	    sort = conduit.param('sort');
+	
+	if (fields) {
+
+		// @TODO: fix FieldSet being sent with regular json?
+		if (fields.fields) {
+			fields = fields.fields;
+		}
+
+		crit.select(fields);
+	}
+
+	if (page_size && !page) {
+		page = 1;
+	}
+
+	if (page) {
+		crit.page(page, page_size);
+	}
+
+	if (sort?.field && sort?.dir) {
+		crit.sort([sort.field, sort.dir]);
+	}
+
+	if (filters) {
+		let key,
+		    val;
+
+		for (key in filters) {
+			val = filters[key];
+
+			// The value should always be a string,
+			// so anything that is falsy can be ignored
+			if (!val) {
+				continue;
+			}
+
+			val = RegExp.interpretWildcard('*' + val + '*', 'i');
+			crit.where(key).equals(val);
+		}
+	}
+
+	let records = await model.find('all', crit);
+	
+	conduit.end({
+		records : records
+	});
 });

package/element/00-media_base.js

@@ -0,0 +1,17 @@
+/**
+ * The base class for all other media elements
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.0
+ * @version  0.7.0
+ */
+const Base = Function.inherits('Alchemy.Element', 'Alchemy.Element.Media', 'Base');
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.0
+ * @version  0.7.0
+ */
+Base.setStylesheetFile('alchemy_media');

package/element/al_file.js

@@ -3,9 +3,9 @@
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.6.0
+ * @version  0.7.0
  */
-const AlFile = Function.inherits('Alchemy.Element.App', 'AlFile');
+const AlFile = Function.inherits('Alchemy.Element.Media.Base', 'AlFile');
 
 /**
  * The template code
@@ -16,15 +16,6 @@ const AlFile = Function.inherits('Alchemy.Element.App', 'AlFile');
  */
 AlFile.setTemplateFile('element/al_file');
 
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.6.0
- * @version  0.6.0
- */
-AlFile.setStylesheetFile('element/alchemy_file');
-
 /**
  * Getter for the drop target
  *
@@ -61,6 +52,15 @@ AlFile.addElementGetter('preview_element', '.al-file-preview');
  */
 AlFile.addElementGetter('remove_button', '.al-file-remove');
 
+/**
+ * Getter for the select button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.0
+ * @version  0.7.0
+ */
+AlFile.addElementGetter('select_button', '.al-file-select');
+
 /**
  * Getter for the uploading-icon
  *
@@ -245,6 +245,11 @@ AlFile.setMethod(function introduced() {
 		this.value = null;
 	});
 
+	if (this.select_button) {
+		this.select_button.addEventListener('click', e => {
+			this.showExistingFileSelection();
+		});
+	}
 });
 
 /**
@@ -265,11 +270,52 @@ AlFile.setMethod(function _getContent(callback) {
 			return callback(err);
 		}
 
-		console.log('Size:', info);
-
 		that.innerHTML = '<img class="final" src="/media/static/' + src + '?width=50%25" width=' + info.width + ' height=' + info.height +' style="width:400px">'
 		               + '<img class="placeholder" src="/media/static/' + src + '?width=20px">';
 
 		callback(null);
 	});
+});
+
+/**
+ * Select existing files
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.7.0
+ * @version  0.7.0
+ */
+AlFile.setMethod(async function showExistingFileSelection() {
+
+	let variables = {};
+
+	await hawkejs.scene.render('element/al_file_selection', variables);
+
+	let dialog_contents = document.querySelector('he-dialog [data-he-template="element/al_file_selection"]');
+
+	if (!dialog_contents) {
+		return;
+	}
+
+	let dialog = dialog_contents.queryParents('he-dialog'),
+	    button = dialog_contents.querySelector('.btn-apply');
+
+	dialog_contents.classList.add('default-form-editor');
+	hawkejs.scene.enableStyle('chimera/chimera');
+
+	button.addEventListener('click', e => {
+		e.preventDefault();
+
+		let table = dialog.querySelector('al-table');
+		
+		if (table) {
+			let row = table.active_row;
+
+			if (row && row.dataset.pk) {
+				this.value = row.dataset.pk;
+			}
+		}
+
+		dialog.remove();
+	});
+
 });

package/element/{al_ico_element.js → al_icon.js}

@@ -1,20 +1,13 @@
-/**
- * The al-ico element
- *
- * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.6.0
- * @version  0.6.0
- */
-const Icon = Function.inherits('Alchemy.Element', 'AlIco');
+const BUSY = Symbol('busy');
 
 /**
- * The stylesheet to load for this element
+ * The al-icon element
  *
- * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.6.0
+ * @version  0.7.0
  */
-Icon.setStylesheetFile('alchemy_icons');
+const Icon = Function.inherits('Alchemy.Element.Media.Base', 'AlIcon');
 
 /**
  * The source to use
@@ -45,15 +38,35 @@ Icon.setAttribute('icon-style');
  */
 Icon.setAttribute('icon-name');
 
+/**
+ * Extra options/flags
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.7.0
+ * @version  0.7.0
+ */
+Icon.setAttribute('icon-flags');
+
+/**
+ * Refresh the icon when these attributes change
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.7.0
+ * @version  0.7.0
+ */
+Icon.addObservedAttribute(['icon-style', 'icon-name', 'icon-flags'], function onChange() {
+	this.refresh();
+});
+
 /**
  * The element is being retained
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.3
- * @version  0.6.3
+ * @version  0.7.0
  */
 Icon.setMethod(function retained() {
-	this.setCssClasses();
+	this.refresh(true);
 });
 
 /**
@@ -61,10 +74,36 @@ Icon.setMethod(function retained() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.3
- * @version  0.6.3
+ * @version  0.7.0
  */
 Icon.setMethod(function introduced() {
+	this.refresh();
+});
+
+/**
+ * Refresh the icon
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.0
+ * @version  0.7.0
+ *
+ * @param    {Boolean}   force
+ */
+Icon.setMethod(function refresh(force) {
+
+	if (this[BUSY] && !force) {
+		return;
+	}
+
+	if (!force && Blast.isNode) {
+		return;
+	}
+
+	this[BUSY] = true;
+
 	this.setCssClasses();
+
+	this[BUSY] = false;
 });
 
 /**
@@ -80,6 +119,8 @@ Icon.setMethod(function setIcon(info) {
 		return;
 	}
 
+	this[BUSY] = true;
+
 	if (typeof info == 'string') {
 		info = info.split(' ');
 
@@ -105,6 +146,8 @@ Icon.setMethod(function setIcon(info) {
 	if (!this.icon_style) {
 		this.icon_style = 'duotone';
 	}
+
+	this.refresh(true);
 });
 
 /**
@@ -143,4 +186,10 @@ Icon.setMethod(function setCssClasses() {
 
 	this.classList.add('fa-' + (this.icon_style || 'solid'));
 	this.classList.add('fa-' + this.icon_name);
+
+	let flags = (this.icon_flags || '').split(/\s+/);
+
+	for (let flag of flags) {
+		this.classList.add('fa-' + flag);
+	}
 });

package/element/al_image.js

@@ -3,11 +3,9 @@
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.4.1
- * @version  0.4.1
+ * @version  0.7.0
  */
-var AlImage = Function.inherits('Alchemy.Element.App', function AlImage() {
-	return AlImage.super.call(this);
-});
+const AlImage = Function.inherits('Alchemy.Element.Media.Base', 'AlImage');
 
 /**
  * CSS
@@ -35,7 +33,7 @@ AlImage.setMethod(function introduced() {
 
 	var placeholder = this.querySelector('.placeholder'),
 	    final = this.querySelector('.final');
-console.log('Waiting for onload');
+
 	final.onload = function() {
 		console.log('Final is loaded!');
 		final.style.opacity = 1;

package/element/al_svg.js

@@ -3,18 +3,9 @@
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.5.1
- * @version  0.5.1
- */
-const Svg = Function.inherits('Alchemy.Element', 'AlSvg');
-
-/**
- * The stylesheet to load for this element
- *
- * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.5.1
- * @version  0.5.1
+ * @version  0.7.0
  */
-Svg.setStylesheetFile('alchemy_svg');
+const Svg = Function.inherits('Alchemy.Element.Media.Base', 'AlSvg');
 
 /**
  * The location of the svg

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "alchemy-media",
 	"description": "The media plugin for Alchemy",
-	"version": "0.6.4",
+	"version": "0.7.0",
 	"repository": {
 		"type" : "git",
-		"url"  : "https://github.com/skerit/alchemy-media.git"
+		"url"  : "https://github.com/11ways/alchemy-media.git"
 	},
 	"dependencies": {
 		"@11ways/exiv2" : "~0.6.4",

package/view/element/al_file.hwk

@@ -1,19 +1,46 @@
 <label class="al-file-drop-target">
 	<div class="al-file-preview"></div>
-	<al-ico class="uploading-icon fa-solid fa-spinner fa-spin-pulse"></al-ico>
-	<al-ico class="empty-icon fa-solid fa-file-arrow-up"><% if (self.value) $0.hidden = true %></al-ico>
+
+	<al-icon
+		icon-name="spinner"
+		icon-style="duotone"
+		class="uploading-icon fa-spin-pulse"
+	></al-icon>
+
+	<al-icon
+		icon-name="cloud-arrow-up"
+		icon-style="duotone"
+		class="empty-icon"
+	><% if (self.value) $0.hidden = true %></al-icon>
+
 	<input type="file" tabindex="-1" class="al-file-input" hidden>
 </label>
 
 <div class="al-file-right">
 	<button class="al-file-choose-existing">
-		<al-ico class="fa-solid fa-file-image"></al-ico>
+		<al-icon
+			icon-name="image"
+			icon-style="duotone"
+		></al-icon>
 		{%t "select-uploaded-file" %}
 	</button>
 
 	<button class="al-file-remove">
 		<% if (!self.value) $0.hidden = true %>
-		<al-ico class="fa-solid fa-trash-can"></al-ico>
+		<al-icon
+			icon-name="trash-can"
+			icon-style="duotone"
+		></al-icon>
 		{%t "remove-current-file" %}
 	</button>
+
+	{% if Acl.hasPermission('media.recordsource') %}
+		<button class="al-file-select">
+			<al-icon
+				icon-name="gallery-thumbnails"
+				icon-style="duotone"
+			></al-icon>
+			{%t "select-existing-file" %}
+		</button>
+	{% /if %}
 </div>

package/view/element/al_file_selection.hwk

@@ -0,0 +1,35 @@
+<% makeDialog() %>
+<% addClass('alchemy-file-selection-dialog') %>
+
+<%
+
+fieldset = new Blast.Classes.Alchemy.Criteria.FieldSet('list', 'MediaFile');
+
+fieldset.addField('_id', {
+	view     : 'file_preview',
+	wrapper  : 'file_preview',
+	title    : 'Thumbnail',
+	filter   : false,
+	sortable : false,
+});
+
+fieldset.addField('filename');
+fieldset.addField('type');
+%>
+
+<div class="alchemy-file-selection-wrapper">
+
+	<al-table
+		id="al-file-selection-table"
+		purpose="view"
+		mode="inline"
+		page-size=20
+		show-filters
+		#fieldset={% fieldset %}
+		#recordsource={% {route: 'MediaFile#recordsource'} %}
+	></al-table>
+
+	<button class="btn btn-apply">
+		Apply
+	</button>
+</div>

package/view/form/inputs/edit/file_preview.hwk

@@ -1,4 +1,4 @@
-<% style('element/alchemy_file') %>
+<% style('alchemy_media') %>
 
 <img
 	!Media={% value %}

package/view/form/inputs/view_inline/file.hwk

@@ -1,4 +1,4 @@
-<% style('element/alchemy_file') %>
+<% style('alchemy_media') %>
 
 {% if value %}
 	<img

package/view/form/inputs/view_inline/file_preview.hwk

@@ -1,4 +1,4 @@
-<% style('element/alchemy_file') %>
+<% style('alchemy_media') %>
 
 {% if value %}
 	<img

package/view/form/wrappers/edit/file_preview.hwk

@@ -1,5 +1,5 @@
 <div class="form-field-info">
-	<alchemy-label>
+	<al-label>
 		<span
 			data-he-name="field-title"
 			data-he-slot="field-title"
@@ -8,6 +8,6 @@
 			data-he-name="field-description"
 			data-he-slot="field-description"
 		><%= alchemy_field.field_description %></small>
-	</alchemy-label>
+	</al-label>
 </div>
 <div data-he-name="field"></div>

package/assets/stylesheets/alchemy_icons_fafree.scss

@@ -1,59 +0,0 @@
-@use "fontawesome6/fontawesome.scss";
-@use "fontawesome6/solid.scss";
-@use "fontawesome6/brands.scss";
-
-al-ico {
-	@extend %fa-icon;
-
-	&[type="arrow-left"] {
-		@extend .fas, .fa-angle-left;
-	}
-
-	&[type="arrow-left-double"] {
-		@extend .fas, .fa-angle-double-left;
-	}
-
-	&[type="arrow-right"] {
-		@extend .fas, .fa-angle-right;
-	}
-
-	&[type="arrow-right-double"] {
-		@extend .fas, .fa-angle-double-right;
-	}
-
-	&[type="sorting-arrow"] {
-		@extend .fas;
-
-		&.down {
-			@extend .fa-sort-alpha-up;
-		}
-
-		&.up {
-			@extend .fa-sort-alpha-down;
-		}
-	}
-
-	&[type="menu"] {
-		@extend .fas, .fa-bars;
-	}
-
-	&[type="edit"] {
-		@extend .fas, .fa-pencil-alt;
-	}
-
-	&[type="zoom-in"] {
-		@extend .fas, .fa-search-plus;
-	}
-
-	&[type="microphone"] {
-		@extend .fas, .fa-microphone-alt;
-	}
-
-	&[type="video"] {
-		@extend .fas, .fa-video;
-	}
-
-	&[type="plus"] {
-		@extend .fas, .fa-plus;
-	}
-}