alchemy-media 0.7.2 → 0.7.4

package/CHANGELOG.md

@@ -1,3 +1,15 @@
+## 0.7.4 (2023-03-13)
+
+* By default, conceal SVGs that have the `graphics-symbol` role from assistive technologies
+
+## 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

package/assets/stylesheets/media_elements/_icon.scss

@@ -23,4 +23,26 @@ al-icon {
 			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/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/element/al_svg.js

@@ -21,7 +21,7 @@ Svg.setAttribute('src');
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.5.1
- * @version  0.7.1
+ * @version  0.7.4
  */
 Svg.setMethod(async function injectSvg() {
 
@@ -59,6 +59,9 @@ Svg.setMethod(async function injectSvg() {
 
 			if (!this.hasAttribute('aria-label')) {
 				this.setAttribute('aria-label', '');
+
+				// graphics-symbol images are not important, so they can be hidden
+				this.setAttribute('aria-hidden', 'true');
 			}
 		}
 

package/helper/media_helper.js

@@ -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.2",
+	"version": "0.7.4",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/11ways/alchemy-media.git"