alchemy-media 0.7.1 → 0.7.3

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.7.3 (2023-02-26)
+
+* Add `Media#downloadImage()` method to the Media helper
+* Add `al-icon-stack` element, to stack items on top of each other
+* Fix `svg` files not being able to be uploaded or served
+* Round image resizes to the highest 100 pixels
+* Add `max_page_width` plugin option, which will be applied to the user's max screen size
+
+## 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

package/assets/stylesheets/media_elements/_icon.scss

@@ -1,12 +1,48 @@
 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%);
+		}
+	}
+
+	&[size="2"] {
+		font-size: 2em;
+	}
+
+	&[size="3"] {
+		font-size: 3em;
+	}
+
+	&[size="4"] {
+		font-size: 4em;
+	}
+}
+
+al-icon-stack {
+	display: inline-grid;
+	grid-template-columns: 1fr;
+	grid-template-rows: 1fr;
+
+	al-icon {
+		grid-area: 1 / 1;
+	}
 }

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.7.1
+ * @version  0.7.2
  *
  * @param    {Conduit}   conduit
  */
@@ -215,7 +215,7 @@ MediaFiles.setAction(function upload(conduit) {
 	var MediaFile = this.getModel('MediaFile'),
 	    files = conduit.files,
 	    tasks = [],
-		accept = conduit.body?.accept;
+	    accept = conduit.body?.accept;
 
 	if (files && files.files && typeof files.files == 'object') {
 		files = files.files;
@@ -225,12 +225,19 @@ MediaFiles.setAction(function upload(conduit) {
 		let file = files[key];
 
 		tasks.push(async next => {
+
+			let filename = file.name;
+
+			if (key == 'uploaded_file' && conduit.body.filename) {
+				filename = conduit.body.filename;
+			}
+
 			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) {

package/element/al_icon.js

@@ -47,6 +47,15 @@ Icon.setAttribute('icon-name');
  */
 Icon.setAttribute('icon-flags');
 
+/**
+ * Set the size attribute
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.7.3
+ * @version  0.7.3
+ */
+Icon.setAttribute('size', {type: 'number'});
+
 /**
  * Set the default role
  *

package/element/al_icon_stack.js

@@ -0,0 +1,26 @@
+/**
+ * The al-icon-stack element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.3
+ * @version  0.7.3
+ */
+const IconStack = Function.inherits('Alchemy.Element.Media.Base', 'AlIconStack');
+
+/**
+ * Set the default role
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.7.3
+ * @version  0.7.3
+ */
+IconStack.setRole('graphics-symbol');
+
+/**
+ * Set the size attribute
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.7.3
+ * @version  0.7.3
+ */
+IconStack.setAttribute('size', {type: 'number'});

package/helper/media_helper.js

@@ -230,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
  *
@@ -240,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);
 });
 
 /**
@@ -248,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
  *
@@ -269,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}));
@@ -311,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
  *
@@ -321,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) {
 
@@ -457,13 +457,14 @@ Media.setMethod(function imageCssSet(image_id, options) {
 /**
  * Output an img element
  *
- * @author   Jelle De Loecker   <jelle@develry.be>
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.7.3
  *
  * @param    {String}   image_id
+ * @param    {Object}   options
  *
- * @return   {URL}
+ * @return   {HTMLElement}
  */
 Media.setMethod(function image(image_id, options) {
 
@@ -497,6 +498,10 @@ Media.setMethod(function image(image_id, options) {
 	// Create the element
 	element = this.view.createElement('img');
 
+	if (options.onload) {
+		element.onload = options.onload;
+	}
+
 	// Set the source attribute
 	element.setAttribute('src', url);
 
@@ -525,6 +530,36 @@ Media.setMethod(function image(image_id, options) {
 	return element;
 });
 
+/**
+ * Get a downloaded image
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.3
+ * @version  0.7.3
+ *
+ * @param    {String}   image_id
+ * @param    {Object}   options
+ *
+ * @return   {HTMLElement}
+ */
+Media.setMethod(function downloadImage(image_id, options) {
+
+	let pledge = new Pledge(),
+	    element;
+
+	if (!options) {
+		options = {};
+	}
+
+	options.onload = () => {
+		pledge.resolve(element);
+	};
+
+	element = this.image(image_id, options);
+
+	return pledge;
+});
+
 /**
  * Output a figure element
  *

package/helper/widgets/image_widget.js

@@ -16,7 +16,7 @@ const Image = Function.inherits('Alchemy.Widget', 'Image');
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.7.1
+ * @version  0.7.3
  */
 Image.constitute(function prepareSchema() {
 
@@ -28,7 +28,7 @@ Image.constitute(function prepareSchema() {
 	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%',
+		default: '50%',
 	});
 
 	this.schema.addField('lazy_load', 'Boolean', {
@@ -43,7 +43,7 @@ Image.constitute(function prepareSchema() {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.7.1
+ * @version  0.7.3
  *
  * @param    {HTMLElement}   widget
  */
@@ -55,7 +55,7 @@ Image.setMethod(function populateWidget() {
 	    lazy_load = this.config.lazy_load;
 
 	if (width_hint === null || width_hint === '' || typeof width_hint == 'undefined') {
-		width_hint = '25%';
+		width_hint = '50%';
 	}
 
 	if (lazy_load == null) {

package/lib/media_types/image_media_type.js

@@ -33,31 +33,32 @@ ImageMedia.setProperty('typeMap', {
 /**
  * Generate a thumbnail of this type
  *
- * @author   Jelle De Loecker   <jelle@develry.be>
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.0.1
- * @version  0.6.0
+ * @version  0.7.3
  *
  * @param    {Conduit}   conduit
  * @param    {Object}    record
  */
 ImageMedia.setMethod(function thumbnail(conduit, record) {
 
-	var dimension,
-	    options;
+	const path = record?.path;
 
-	if (!record || !record.path) {
+	if (!path) {
 		return conduit.notFound('Image could not be found');
 	}
 
-	if (record.MediaRaw && record.MediaRaw.mimetype == 'image/svg') {
-		return conduit.serveFile(record.path, {
+	let mimetype = record?.MediaRaw?.mimetype;
+
+	if (typeof mimetype == 'string' && mimetype.startsWith('image/svg')) {
+		return conduit.serveFile(path, {
 			mimetype    : 'image/svg+xml',
 			disposition : false
 		});
 	}
 
-	dimension = 100 * this.getDpr(conduit);
-	options   = {};
+	let dimension = 100 * this.getDpr(conduit);
+	let options   = {};
 
 	// Set the square dimensions
 	options.width = dimension;
@@ -79,12 +80,124 @@ ImageMedia.setMethod(function thumbnail(conduit, record) {
 	});
 });
 
+/**
+ * Get the wanted image dimension
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.3
+ * @version  0.7.3
+ *
+ * @param    {Conduit}   conduit
+ *
+ * @return   {Object}
+ */
+ImageMedia.setMethod(function getResizeDimension(conduit) {
+
+	const query = conduit.url.query;
+
+	if (!query.width && !query.height) {
+		return;
+	}
+
+	let resolution = conduit.cookie('mediaResolution') || {},
+	    dpr = this.getDpr(conduit);
+
+	let width = getResizedDimension(query, 'width', resolution, dpr),
+	    height = getResizedDimension(query, 'height', resolution, dpr);
+	
+	return {
+		width,
+		height
+	};
+});
+
+/**
+ * Get the wanted image dimension
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.7.3
+ * @version  0.7.3
+ *
+ * @param    {Conduit}   conduit
+ * @param    {String}    type         'width' or 'height'
+ * @param    {Object}    resolution
+ * @param    {Number}    dpr
+ *
+ * @return   {Object}
+ */
+function getResizedDimension(query, type, resolution, dpr) {
+
+	if (type !== 'width' && type !== 'height') {
+		throw new Error('Invalid dimension type: ' + type);
+	}
+
+	let size_query = query[type];
+
+	if (!size_query) {
+		return;
+	}
+
+	let size_string = String(size_query);
+	let size = parseInt(size_string);
+
+	if (!size) {
+		if (type == 'width') {
+			size = 1920;
+		} else {
+			size = 1080;
+		}
+
+		size_string = ''+size;
+	}
+
+	if (size_string.includes('%') || size_string.includes('vw') || size_string.includes('vh')) {
+		let base_size = Number(resolution[type]) || query['max' + type.capitalize()],
+		    percentage = size;
+
+		if (!base_size) {
+			if (type == 'width') {
+				base_size = 1920;
+			} else {
+				base_size = 1080;
+			}
+		}
+
+		// It's called "max_page_width", but height can also be checked against this
+		if (base_size > alchemy.plugins.media.max_page_width) {
+			base_size = alchemy.plugins.media.max_page_width;
+		}
+
+		size = (base_size * percentage) / 100;
+	}
+
+	size *= dpr;
+
+	// Round to the nearest 100
+	size = Math.ceil(size / 100) * 100;
+
+	if (!size) {
+		size = 100;
+	}
+
+	if (type == 'width') {
+		if (size > 3840) {
+			size = 3840;
+		}
+	} else if (type == 'height') {
+		if (size > 2160) {
+			size = 2160;
+		}
+	}
+
+	return size;
+};
+
 /**
  * Serve this file
  *
- * @author   Jelle De Loecker   <jelle@develry.be>
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.0.1
- * @version  0.6.1
+ * @version  0.7.3
  *
  * @param    {Conduit}   conduit
  * @param    {Object}    record
@@ -97,7 +210,9 @@ ImageMedia.setMethod(function serve(conduit, record, options) {
 		return onError('Empty file record', 404);
 	}
 
-	if (record.MediaRaw && record.MediaRaw.mimetype == 'image/svg') {
+	let mimetype = record?.MediaRaw?.mimetype;
+
+	if (typeof mimetype == 'string' && mimetype.startsWith('image/svg')) {
 		return conduit.serveFile(record.path, {
 			mimetype    : 'image/svg+xml',
 			disposition : false
@@ -166,42 +281,7 @@ ImageMedia.setMethod(function serve(conduit, record, options) {
 
 	if (query.width || query.height) {
 
-		resolution = conduit.cookie('mediaResolution') || {};
-
-		if (query.width) {
-			width = parseInt(query.width) || 1920;
-
-			if (String(query.width).indexOf('%') > -1 || String(query.width).indexOf('vw') > -1) {
-				baseWidth = Number(resolution.width) || query.maxWidth || 1920;
-				width = (baseWidth * width)/100;
-				width *= dpr;
-
-				// Round to the nearest 10
-				width = Math.ceil(width / 10) * 10;
-			} else {
-				width *= dpr;
-			}
-		}
-
-		if (query.height) {
-			height = parseInt(query.height) || 1080;
-
-			if (String(query.height).indexOf('%') > -1 || String(query.height).indexOf('vh') > -1) {
-				baseHeight = Number(resolution.height) || query.maxHeight || 1080;
-				height = (baseHeight * height)/100;
-				height *= dpr;
-
-				// Round to the nearest 10
-				height = Math.ceil(height / 10) * 10;
-			} else {
-				height *= dpr;
-			}
-		}
-
-		resizeOptions = {
-			width: width,
-			height: height
-		};
+		resizeOptions = this.getResizeDimension(conduit);
 
 		if (query.quality) {
 			if (query.quality > 0 && query.quality < 100) {
@@ -277,30 +357,24 @@ ImageMedia.setMethod(function serve(conduit, record, options) {
 /**
  * Generate a placeholder
  *
- * @author   Jelle De Loecker   <jelle@develry.be>
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.1.0
- * @version  0.4.0
+ * @version  0.7.3
  *
  * @param    {Conduit}   conduit
  * @param    {Object}    options
  */
 ImageMedia.setMethod(function placeholder(conduit, options) {
 
-	var defaultOptions,
-	    resolution = conduit.cookie('mediaResolution') || {},
-	    baseHeight,
-	    baseWidth,
+	let default_options,
 	    profile,
-	    height,
-	    width,
-	    query = conduit.url.query,
-	    dpr = this.getDpr(conduit);
+	    query = conduit.url.query;
 
 	if (options == null) {
 		options = {};
 	}
 
-	defaultOptions = {
+	default_options = {
 		width: 300,
 		height: 300
 	};
@@ -314,47 +388,23 @@ ImageMedia.setMethod(function placeholder(conduit, options) {
 		options.height = profile.height || profile.width;
 	}
 
-	if (query.width) {
-		width = parseInt(query.width) || 1920;
-
-		// See if the given width is a percentage
-		if (String(query.width).indexOf('%') > -1 || String(query.width).indexOf('vw') > -1) {
-			baseWidth = Number(resolution.width) || query.maxWidth || 1920;
-			width = (baseWidth * width)/100;
-			width *= dpr;
+	if (query.width || query.height) {
+		let resize_options = this.getResizeDimension(conduit);
 
-			// Round to the nearest 10
-			width = Math.ceil(width / 10) * 10;
-		} else {
-			width *= dpr;
+		if (resize_options.width) {
+			options.width = resize_options.width;
 		}
 
-		options.width = width;
-	}
-
-	if (query.height) {
-		height = parseInt(query.height) || 1080;
-
-		// See if the given width is a percentage
-		if (String(query.height).indexOf('%') > -1 || String(query.height).indexOf('vh') > -1) {
-			baseHeight = Number(resolution.height) || query.maxHeight || 1080;
-			height = (baseHeight * height)/100;
-			height *= dpr;
-
-			// Round to the nearest 10
-			height = Math.ceil(height / 10) * 10;
-		} else {
-			height *= dpr;
+		if (resize_options.height) {
+			options.height = resize_options.height;
 		}
-
-		options.height = height;
 	}
 
 	if (!options.text) {
 		options.text = conduit.param('text');
 	}
 
-	options = Object.assign({}, defaultOptions, options);
+	options = Object.assign({}, default_options, options);
 
 	this.veronica.placeholder(options, function gotPlaceholderPath(err, filepath) {
 		conduit.serveFile(filepath, {disposition: false});
@@ -411,15 +461,17 @@ ImageMedia.setMethod(function getSize(conduit, filePath, options, callback) {
  * This method should strip out the meta data,
  * so it can be stored inside MediaFile instead of MediaRaw
  *
- * @author   Jelle De Loecker   <jelle@develry.be>
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.0.1
- * @version  0.6.0
+ * @version  0.7.3
  */
 ImageMedia.setMethod(function normalize(filePath, baseInfo, callback) {
 
-	var that = this;
+	const that = this;
+
+	let mimetype = baseInfo?.mimetype;
 
-	if (baseInfo && baseInfo.mimetype == 'image/svg') {
+	if (typeof mimetype == 'string' && mimetype.startsWith('image/svg')) {
 		return callback(null, filePath);
 	}
 

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-media",
 	"description": "The media plugin for Alchemy",
-	"version": "0.7.1",
+	"version": "0.7.3",
 	"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/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 %}