alchemy-media 0.7.0 → 0.7.2

package/CHANGELOG.md

@@ -1,3 +1,20 @@
+## 0.7.2 (2023-01-23)
+
+* Make `al-icon` center its contents
+* Make the file upload action use the extra given filename
+* Rename most route names & make them not-postponable
+
+## 0.7.1 (2022-12-23)
+
+* Cascade `al-svg` role attribute to child `svg` elements
+* Add `img` role fallback when using `graphics-symbol`
+* Also add default role to `al-icon` element
+* Make `al-file` catch errors and report them to a possible `al-field` parent
+* Add the `accept` attribute to `al-file`
+* Add the `accept` option to `File` fields
+* Add `width_hint` field to `image` widget. This field allows users to specify the approximate maximum width of an image in pixels or as a percentage of the total page width.
+* Add `lazy_load` field to `image` widget
+
 ## 0.7.0 (2022-11-02)
 
 * Use the `al-` prefix for custom elements

package/README.md

@@ -75,7 +75,7 @@ you can do so like this on Debian/Ubuntu
 
 Install the requirements of the `veronica` module:
 
-    apt-get install graphicsmagick webp libgif-dev
+    apt-get install graphicsmagick webp libgif-dev libcairo2-dev libpango1.0-dev libjpeg-dev librsvg2-dev
 
 This plugin requires exiv2
 

package/assets/stylesheets/media_elements/_icon.scss

@@ -1,12 +1,26 @@
 al-icon {
 	// inline-flex breaks certain (duotone) icons
-	//--fa-display: inline-flex;
+	--fa-display: inline-flex;
+	display: inline-flex;
 	flex-flow: column;
 	justify-content: center;
 	align-content: center;
 	text-align: center;
+	position: relative;
 
 	&[hidden] {
 		display: none !important;
 	}
+
+	// Fix Fontawesome duotone icons
+	&[icon-style="duotone"] {
+		position: relative;
+
+		&::before {
+			position: absolute;
+			top: 50%;
+			left: 50%;
+			transform: translate(-50%, -50%);
+		}
+	}
 }

package/bootstrap.js

@@ -40,32 +40,95 @@ alchemy.createDir(options.scratch);
 alchemy.createDir(options.cache);
 
 // Create routes
-Router.get('Media::static', /\/media\/static\/(.*)*/, 'MediaFile#serveStatic');
-Router.get('Media::image', options.url + '/{id}', 'MediaFile#image');
+Router.add({
+	name             : 'MediaFile#serveStatic',
+	methods          : ['get'],
+	can_be_postponed : false,
+	paths            : /\/media\/static\/(.*)*/,
+});
+
+Router.add({
+	name             : 'MediaFile#image',
+	methods          : ['get'],
+	can_be_postponed : false,
+	paths            : options.url + '/{id}',
+});
 
 // The prefix is added at the end of the route so it does not
 // change the user's active_prefix
-Router.get('MediaFile#data', '/media/data/{prefix}/{id}', 'MediaFile#data');
-Router.get('MediaFile#info', '/media/info', 'MediaFile#info');
+Router.add({
+	name             : 'MediaFile#data',
+	methods          : ['get'],
+	can_be_postponed : false,
+	paths            : '/media/data/{prefix}/{id}',
+});
 
 Router.add({
-	name       : 'MediaFile#recordsource',
-	methods    : ['get'],
-	paths      : '/media/recordsource',
-	permission : 'media.recordsource',
+	name             : 'MediaFile#info',
+	methods          : ['get'],
+	can_be_postponed : false,
+	paths            : '/media/info',
+});
+
+Router.add({
+	name             : 'MediaFile#recordsource',
+	methods          : ['get'],
+	can_be_postponed : false,
+	paths            : '/media/recordsource',
+	permission       : 'media.recordsource',
 });
 
 // Allow dummy extensions
-Router.get('Media::fileextension', '/media/file/{id}.{extension}', 'MediaFile#file');
+Router.add({
+	name             : 'Media#fileextension',
+	methods          : ['get'],
+	can_be_postponed : false,
+	paths            : '/media/file/{id}.{extension}',
+	handler          : 'MediaFile#file'
+});
 
 // Allow direct file downloads
-Router.get('Media::file', '/media/file/{id}', 'MediaFile#file');
-Router.get('Media#download', '/media/download/{id}', 'MediaFile#downloadFile');
+Router.add({
+	name             : 'MediaFile#file',
+	methods          : ['get'],
+	can_be_postponed : false,
+	paths            : '/media/file/{id}',
+});
 
-Router.get('Media::thumb', '/media/thumbnail/{id}', 'MediaFile#thumbnail');
-Router.get('Media::placeholder', '/media/placeholder', 'MediaFile#placeholder');
-Router.post('Media::upload', '/media/upload', 'MediaFile#upload');
-Router.post('Media::uploadsingle', '/media/uploadsingle', 'MediaFile#uploadsingle');
+Router.add({
+	name             : 'MediaFile#downloadFile',
+	methods          : ['get'],
+	can_be_postponed : false,
+	paths            : '/media/download/{id}',
+});
+
+Router.add({
+	name             : 'MediaFile#thumbnail',
+	methods          : ['get'],
+	can_be_postponed : false,
+	paths            : '/media/thumbnail/{id}',
+});
+
+Router.add({
+	name             : 'MediaFile#placeholder',
+	methods          : ['get'],
+	can_be_postponed : false,
+	paths            : '/media/placeholder',
+});
+
+Router.add({
+	name             : 'MediaFile#upload',
+	methods          : ['post'],
+	can_be_postponed : false,
+	paths            : '/media/upload',
+});
+
+Router.add({
+	name             : 'MediaFile#uploadsingle',
+	methods          : ['post'],
+	can_be_postponed : false,
+	paths            : '/media/uploadsingle',
+});
 
 var profiles = alchemy.shared('Media.profiles');
 

package/controller/media_files_controller.js

@@ -206,7 +206,7 @@ MediaFiles.setAction(function downloadFile(conduit, id, extension) {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.0.1
- * @version  0.4.2
+ * @version  0.7.2
  *
  * @param    {Conduit}   conduit
  */
@@ -215,22 +215,29 @@ MediaFiles.setAction(function upload(conduit) {
 	var MediaFile = this.getModel('MediaFile'),
 	    files = conduit.files,
 	    tasks = [],
-	    file;
+	    accept = conduit.body?.accept;
 
 	if (files && files.files && typeof files.files == 'object') {
 		files = files.files;
 	}
 
-	// Iterate over every file
-	Object.each(files, function eachFile(file, key) {
+	for (let key in files) {
+		let file = files[key];
+
+		tasks.push(async next => {
+
+			let filename = file.name;
+
+			if (key == 'uploaded_file' && conduit.body.filename) {
+				filename = conduit.body.filename;
+			}
 
-		tasks[tasks.length] = function storeFile(next) {
 			let options = {
 				move: true,
-				filename: file.name
+				filename: filename,
 			};
 
-			let name = file.name.split('.');
+			let name = filename.split('.');
 
 			// Remove the last piece if there are more than 1
 			if (name.length > 1) {
@@ -242,9 +249,20 @@ MediaFiles.setAction(function upload(conduit) {
 
 			options.name = name;
 
+			// @TODO: don't trust the browser to dictate the type
+			if (accept) {
+				let file_type = await file.getMimetype();
+
+				if (file_type === accept || accept.includes(file_type)) {
+					// OK!
+				} else {
+					return next(new Error('File upload failed: Expected filetype "' + accept + '", but got "' + file_type + '"'));
+				}
+			}
+
 			MediaFile.addFile(file.path, options, next);
-		};
-	});
+		});
+	}
 
 	// Store every file
 	Function.parallel(tasks, function storedFiles(err, result) {

package/element/al_file.js

@@ -79,6 +79,15 @@ AlFile.addElementGetter('icon_uploading', '.uploading-icon');
  */
 AlFile.addElementGetter('icon_empty', '.empty-icon');
 
+/**
+ * Set the accepted types
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.1
+ * @version  0.7.1
+ */
+AlFile.setAttribute('accept');
+
 /**
  * Set the value
  *
@@ -135,7 +144,7 @@ AlFile.setMethod(function updatePreview(value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.6.2
+ * @version  0.7.1
  */
 AlFile.setMethod(async function uploadFile(config) {
 
@@ -159,6 +168,10 @@ AlFile.setMethod(async function uploadFile(config) {
 		form_data.append('format', format);
 	}
 
+	if (this.accept) {
+		form_data.append('accept', this.accept);
+	}
+
 	let response;
 
 	try {
@@ -167,7 +180,15 @@ AlFile.setMethod(async function uploadFile(config) {
 			post : form_data,
 		});
 	} catch (err) {
-		console.error('Failed to upload file:', err);
+
+		let alchemy_field = this.queryUp('al-field');
+
+		if (alchemy_field) {
+			alchemy_field.showError(err);
+		} else {
+			console.error('Failed to upload file:', err);
+			alert('Failed to upload file: ' + err);
+		}
 	}
 
 	this.classList.remove('uploading');
@@ -282,12 +303,20 @@ AlFile.setMethod(function _getContent(callback) {
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.7.0
- * @version  0.7.0
+ * @version  0.7.1
  */
 AlFile.setMethod(async function showExistingFileSelection() {
 
 	let variables = {};
 
+	if (this.accept) {
+		let filters = {
+			type : this.accept,
+		};
+		
+		variables.filters = filters;
+	}
+
 	await hawkejs.scene.render('element/al_file_selection', variables);
 
 	let dialog_contents = document.querySelector('he-dialog [data-he-template="element/al_file_selection"]');

package/element/al_icon.js

@@ -47,6 +47,15 @@ Icon.setAttribute('icon-name');
  */
 Icon.setAttribute('icon-flags');
 
+/**
+ * Set the default role
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.7.1
+ * @version  0.7.1
+ */
+Icon.setRole('graphics-symbol');
+
 /**
  * Refresh the icon when these attributes change
  *
@@ -85,7 +94,7 @@ Icon.setMethod(function introduced() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.7.0
- * @version  0.7.0
+ * @version  0.7.1
  *
  * @param    {Boolean}   force
  */
@@ -95,6 +104,14 @@ Icon.setMethod(function refresh(force) {
 		return;
 	}
 
+	if (this.role == 'graphics-symbol') {
+		this.role = 'graphics-symbol img';
+
+		if (!this.hasAttribute('aria-label')) {
+			this.setAttribute('aria-label', '');
+		}
+	}
+
 	if (!force && Blast.isNode) {
 		return;
 	}

package/element/al_svg.js

@@ -21,7 +21,7 @@ Svg.setAttribute('src');
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.5.1
- * @version  0.5.1
+ * @version  0.7.1
  */
 Svg.setMethod(async function injectSvg() {
 
@@ -50,6 +50,29 @@ Svg.setMethod(async function injectSvg() {
 
 	this.innerHTML = contents;
 
+	if (this.role) {
+
+		// Do not allow `graphics-symbol` role, because it is not widely supported
+		// and google doesn't know it either
+		if (this.role == 'graphics-symbol') {
+			this.role = 'img';
+
+			if (!this.hasAttribute('aria-label')) {
+				this.setAttribute('aria-label', '');
+			}
+		}
+
+		let svg = this.querySelector('svg');
+
+		if (svg) {
+			svg.setAttribute('role', this.role);
+
+			if (this.hasAttribute('aria-label')) {
+				svg.setAttribute('aria-label', this.getAttribute('aria-label'));
+			}
+		}
+	}
+
 	if (this._resolve_me_too) {
 		this._resolve_me_too.resolve();
 	}

package/helper/media_helper.js

@@ -115,7 +115,7 @@ Media.setMethod(function loadIconFont() {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.5.0
- * @version  0.6.2
+ * @version  0.7.1
  *
  * @param    {Element}   element    The element to apply to
  * @param    {String}    image      The image identifier
@@ -160,6 +160,12 @@ Media.setMethod(function applyDirective(element, image, options) {
 		options.height = height;
 	}
 
+	if (options.lazy_load) {
+		if (!element.hasAttribute('loading')) {
+			element.setAttribute('loading', 'lazy');
+		}
+	}
+
 	let url = this.imageUrl(image, options),
 	    clone = url.clone();
 
@@ -224,7 +230,7 @@ Media.setMethod(function applyDirective(element, image, options) {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.4.0
- * @version  0.4.0
+ * @version  0.7.2
  *
  * @param    {String}   image_id
  *
@@ -234,7 +240,7 @@ Media.setMethod(function fileAnchor(file_id, options) {
 
 	var url;
 
-	return this.view.helpers.Router.printRoute('Media::file', {id: file_id}, options);
+	return this.view.helpers.Router.printRoute('MediaFile#file', {id: file_id}, options);
 });
 
 /**
@@ -242,7 +248,7 @@ Media.setMethod(function fileAnchor(file_id, options) {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.2.0
- * @version  0.5.1
+ * @version  0.7.2
  *
  * @param    {String}   image_id
  *
@@ -263,7 +269,7 @@ Media.setMethod(function imageUrl(image_id, options) {
 		if (options.route) {
 			routeName = options.route;
 		} else {
-			routeName = 'Media::image';
+			routeName = 'MediaFile#image';
 		}
 
 		url = this.parseURL(this.view.helpers.Router.routeUrl(routeName, {id: image_id}));
@@ -305,7 +311,7 @@ Media.setMethod(function imageUrl(image_id, options) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.6.2
+ * @version  0.7.2
  *
  * @param    {Object}   options
  *
@@ -315,7 +321,7 @@ Media.setMethod(function placeholderUrl(options) {
 
 	var url;
 
-	url = this.parseURL(this.view.helpers.Router.routeUrl('Media::placeholder'));
+	url = this.parseURL(this.view.helpers.Router.routeUrl('MediaFile#placeholder'));
 
 	if (options != null) {
 

package/helper/widgets/image_widget.js

@@ -16,12 +16,25 @@ const Image = Function.inherits('Alchemy.Widget', 'Image');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.6.0
+ * @version  0.7.1
  */
 Image.constitute(function prepareSchema() {
 
 	this.schema.addField('image', 'File', {
+		description : 'Upload/select the image to display',
+		widget_config_editable: true,
+	});
+
+	this.schema.addField('width_hint', 'Number', {
+		description : 'Approximate maximum width of the image in pixels or as a percentage of the total page width.',
+		widget_config_editable: true,
+		default: '25%',
+	});
+
+	this.schema.addField('lazy_load', 'Boolean', {
+		description : 'Determines whether the image should be loaded lazily or not',
 		widget_config_editable: true,
+		default: true,
 	});
 });
 
@@ -30,7 +43,7 @@ Image.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.6.4
+ * @version  0.7.1
  *
  * @param    {HTMLElement}   widget
  */
@@ -38,7 +51,18 @@ Image.setMethod(function populateWidget() {
 
 	let img = this.createElement('img');
 
-	this.hawkejs_renderer.helpers.Media.applyDirective(img, this.config.image);
+	let width_hint = this.config.width_hint,
+	    lazy_load = this.config.lazy_load;
+
+	if (width_hint === null || width_hint === '' || typeof width_hint == 'undefined') {
+		width_hint = '25%';
+	}
+
+	if (lazy_load == null) {
+		lazy_load = true;
+	}
+
+	this.hawkejs_renderer.helpers.Media.applyDirective(img, this.config.image, {width: width_hint, lazy_load});
 
 	this.widget.append(img);
 

package/helper_field/file_field_type.js

@@ -16,6 +16,48 @@ var FileField = Function.inherits('Alchemy.Field.ObjectId', 'File');
  */
 FileField.setProperty('deferCast', true);
 
+/**
+ * Get the accepted types
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.1
+ * @version  0.7.1
+ *
+ * @return   {Array|null}
+ */
+FileField.setMethod(function getAcceptedTypes() {
+
+	let accept = this.options?.accept;
+
+	if (!accept) {
+		return null;
+	}
+
+	accept = Array.cast(accept);
+
+	return accept;
+});
+
+/**
+ * Get the accepted types string, for the input element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.1
+ * @version  0.7.1
+ *
+ * @return   {String|null}
+ */
+FileField.setMethod(function getAcceptedTypesString() {
+
+	let types = this.getAcceptedTypes();
+
+	if (!types?.length) {
+		return null;
+	}
+
+	return types.join(', ');
+});
+
 if (Blast.isBrowser) {
 	return;
 }

package/model/media_file_model.js

@@ -225,20 +225,33 @@ MediaFile.setMethod(function getFile(id, callback) {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.0.1
- * @version  0.2.0
+ * @version  0.7.1
  *
  * @param    {String}   file      The path to the file, can be a URL
  * @param    {Object}   options
  * @param    {Function} callback
+ *
+ * @return   {Pledge}
  */
 MediaFile.setMethod(function addFile(file, options, callback) {
 
-	var that = this;
+	const that = this,
+	      pledge = new Pledge();
+
+	pledge.done(callback);
 
 	this.queue.add(function(done) {
 		that.getModel('MediaRaw').addFile(file, options, function(err, response) {
-			callback(err, response);
+
 			done();
+
+			if (err) {
+				pledge.reject(err);
+			} else {
+				pledge.resolve(response);
+			}
 		});
 	});
+
+	return pledge;
 });

package/model/media_raw_model.js

@@ -168,7 +168,7 @@ MediaRaw.Document.setMethod(function extraImportFromStream(input) {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.0.1
- * @version  0.4.2
+ * @version  0.7.1
  *
  * @param    {String}   file      The path to the file, can be a URL
  * @param    {Object}   options
@@ -185,6 +185,14 @@ MediaRaw.setMethod(function addFile(file, options, callback) {
 		options = {};
 	}
 
+	if (!options) {
+		options = {};
+	}
+
+	if (file && typeof file == 'object' && file instanceof Classes.Alchemy.Inode.File) {
+		file = file.path;
+	}
+
 	// If the given file is actually a url, we'll need to download it first
 	if (file.startsWith('http://') || file.startsWith('https://')) {
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-media",
 	"description": "The media plugin for Alchemy",
-	"version": "0.7.0",
+	"version": "0.7.2",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-media.git"
@@ -12,7 +12,7 @@
 		"veronica"      : "~0.2.2"
 	},
 	"peerDependencies": {
-		"alchemymvc" : ">=1.2.0"
+		"alchemymvc" : ">=1.3.0"
 	},
 	"license": "MIT",
 	"engines": {

package/view/element/al_file.hwk

@@ -13,7 +13,13 @@
 		class="empty-icon"
 	><% if (self.value) $0.hidden = true %></al-icon>
 
-	<input type="file" tabindex="-1" class="al-file-input" hidden>
+	<input
+		class="al-file-input"
+		type="file"
+		tabindex="-1"
+		accept={% self.accept %}
+		hidden
+	>
 </label>
 
 <div class="al-file-right">

package/view/element/al_file_selection.hwk

@@ -25,6 +25,7 @@ fieldset.addField('type');
 		mode="inline"
 		page-size=20
 		show-filters
+		#filters={% filters %}
 		#fieldset={% fieldset %}
 		#recordsource={% {route: 'MediaFile#recordsource'} %}
 	></al-table>

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

@@ -3,6 +3,7 @@ script('chimera/mediafield');
 style('chimera/mediafield');
 %>
 <al-file
-	value=<% value %>
 	class="alchemy-field-value"
+	value=<% value %>
+	accept={% alchemy_field.config.getAcceptedTypesString() %}
 ></al-file>

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

@@ -3,6 +3,6 @@
 {% if value %}
 	<img
 		!Media={% value %}
-		+media-route="Media::thumb"
+		+media-route="MediaFile#thumbnail"
 	>
 {% /if %}

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

@@ -3,6 +3,6 @@
 {% if value %}
 	<img
 		!Media={% value %}
-		+media-route="Media::thumb"
+		+media-route="MediaFile#thumbnail"
 	>
 {% /if %}