alchemy-media 0.6.2 → 0.6.4

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+## 0.6.4 (2022-10-13)
+
+* Add the `Media#loadIconFont()` helper method
+* Make the `image` route serve up filetype thumbnails for non-images
+* Add file preview image to the chimera edit view of MediaFile
+* Add thumbnail column to MediaFile chimera index view
+* Add `prefix` parameter to the `MediaFile#data` route
+
+## 0.6.3 (2022-07-23)
+
+* Fix `al-file` element showing wrong buttons on load
+* Always add `role="presentation"` to images that get a simple placeholder
+* Add support for Fontawesome Pro with the `media.fontawesome_pro` setting
+
 ## 0.6.2 (2022-07-06)
 
 * Upgrade to Fontawesome 6

package/assets/stylesheets/alchemy_icons.scss

@@ -1,66 +1,10 @@
-@import "fontawesome6/fontawesome.scss";
-@import "fontawesome6/solid.scss";
-@import "fontawesome6/brands.scss";
-
 al-ico {
-	--fa-display: inline-flex;
-	@extend %fa-icon;
+	// inline-flex breaks certain (duotone) icons
+	//--fa-display: inline-flex;
 	flex-flow: column;
-    justify-content: center;
-    align-content: center;
-    text-align: center;
-
-	&[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;
-	}
+	justify-content: center;
+	align-content: center;
+	text-align: center;
 
 	&[hidden] {
 		display: none !important;

package/assets/stylesheets/alchemy_icons_fafree.scss

@@ -0,0 +1,59 @@
+@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;
+	}
+}

package/assets/stylesheets/element/alchemy_file.scss

@@ -92,4 +92,30 @@ al-file {
 	button {
 		min-height: 2rem;
 	}
+}
+
+alchemy-field[field-view="file_preview"] {
+	[data-he-name="field"] .field {
+		padding: 0;
+
+		img {
+			max-height: 25rem;
+			object-fit: contain;
+		}
+	}
+}
+
+alchemy-field[field-view="file_preview"],
+alchemy-field[field-view="file"],
+alchemy-field[field-type="file"] {
+
+	&[mode="inline"]  {
+		.field img {
+			object-fit: contain;
+			width: 100px;
+			height: 100px;
+			display: block;
+			margin: auto;
+		}
+	}
 }

package/bootstrap.js

@@ -21,7 +21,10 @@ var options = {
 	scratch: path.resolve(PATH_TEMP, 'scratch'),
 
 	// The cache map for resized images & thumbnails
-	cache: path.resolve(PATH_TEMP, 'imagecache')
+	cache: path.resolve(PATH_TEMP, 'imagecache'),
+
+	// Path to fontawesome pro
+	fontawesome_pro: null,
 };
 
 // Inject the user-overridden options
@@ -40,7 +43,9 @@ alchemy.createDir(options.cache);
 Router.get('Media::static', /\/media\/static\/(.*)*/, 'MediaFile#serveStatic');
 Router.get('Media::image', options.url + '/{id}', 'MediaFile#image');
 
-Router.get('MediaFile#data', '/media/data/{[MediaFile._id]id}', 'MediaFile#data');
+// 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');
 
 // Allow dummy extensions
@@ -66,6 +71,10 @@ options.veronica = new Veronica({
 
 alchemy.hawkejs.addRawHtml(`<script>document.cookie = 'mediaResolution=' + encodeURIComponent(JSON.stringify({width:Math.max(screen.availWidth||0, window.outerWidth||0) || 1024,height:Math.max(screen.availHeight||0, window.outerHeight||0) || 768,dpr:window.devicePixelRatio}))</script>`);
 
+if (options.fontawesome_pro) {
+	alchemy.exposeStatic('fontawesome_pro', options.fontawesome_pro);
+}
+
 /**
  * Register a profile under the given name
  *

package/controller/media_files_controller.js

@@ -13,16 +13,14 @@ var fs = require('fs'),
  * @since         0.0.1
  * @version       0.3.0
  */
-var MediaFiles = Function.inherits('Alchemy.Controller', function MediaFile(conduit, options) {
-	MediaFile.super.call(this, conduit, options);
-});
+const MediaFiles = Function.inherits('Alchemy.Controller', 'MediaFile');
 
 /**
  * Serve a thumbnail
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.0.1
- * @version  0.4.1
+ * @version  0.6.4
  *
  * @param    {Conduit}   conduit
  */
@@ -35,21 +33,15 @@ MediaFiles.setAction(function thumbnail(conduit, id) {
 	// Get the requested file
 	this.getModel('MediaFile').getFile(id, function gotFile(err, record) {
 
-		var Type;
-
 		if (err) {
 			return conduit.notFound(err);
 		}
 
-		Type = MediaTypes[record.type];
-
-		if (!Type) {
-			Type = Classes.Alchemy.MediaType;
-		}
+		const Type = MediaTypes[record.type] || Classes.Alchemy.MediaType;
 
 		if (Type) {
-			Type = new Type();
-			Type.thumbnail(conduit, record);
+			let instance = new Type();
+			instance.thumbnail(conduit, record);
 		} else {
 			conduit.error('Error generating thumbnail of ' + record.type);
 		}
@@ -100,7 +92,7 @@ MediaFiles.setAction(function serveStatic(conduit, path) {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.0.1
- * @version  0.4.1
+ * @version  0.6.4
  *
  * @param    {Conduit}   conduit
  */
@@ -112,12 +104,22 @@ MediaFiles.setAction(function image(conduit, id) {
 
 	this.getModel('MediaFile').getFile(id, function gotFile(err, record) {
 
-		var Image = new MediaTypes.image;
+		if (err) {
+			return conduit.error(err);
+		}
+
+		const Image = new MediaTypes.image;
 
 		if (!record) {
 			return Image.placeholder(conduit, {text: 404, status: 404});
 		}
 
+		if (record.type != 'image') {
+			const Type = MediaTypes[record.type] || Classes.Alchemy.MediaType;
+			let instance = new Type();
+			return instance.thumbnail(conduit, record);
+		}
+
 		Image.serve(conduit, record);
 	});
 });
@@ -315,14 +317,23 @@ MediaFiles.setAction(function uploadsingle(conduit) {
 /**
  * Get the file data
  *
- * @author   Jelle De Loecker   <jelle@develry.be>
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.5.1
- * @version  0.5.1
+ * @version  0.6.4
  *
- * @param    {Conduit}               conduit
- * @param    {Document.MediaFile}    media_file
+ * @param    {Conduit}     conduit
+ * @param    {ObjectId}    media_file_id
  */
-MediaFiles.setAction(function data(conduit, media_file) {
+MediaFiles.setAction(async function data(conduit, prefix, media_file_id) {
+
+	conduit.prefix = prefix;
+
+	let media_file = await this.model.findById(media_file_id);
+
+	if (!media_file) {
+		return conduit.notFound();
+	}
+
 	conduit.setHeader('cache-control', 'public, max-age=3600, must-revalidate');
 
 	conduit.end({

package/element/al_ico_element.js

@@ -14,4 +14,133 @@ const Icon = Function.inherits('Alchemy.Element', 'AlIco');
  * @since    0.6.0
  * @version  0.6.0
  */
-Icon.setStylesheetFile('alchemy_icons');
+Icon.setStylesheetFile('alchemy_icons');
+
+/**
+ * The source to use
+ * (Will default to Fontawesome)
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.6.3
+ * @version  0.6.3
+ */
+Icon.setAttribute('source');
+
+/**
+ * The icon-style to use
+ * (Will default to regular for fontawesome)
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.6.3
+ * @version  0.6.3
+ */
+Icon.setAttribute('icon-style');
+
+/**
+ * The actual icon name to use
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.6.3
+ * @version  0.6.3
+ */
+Icon.setAttribute('icon-name');
+
+/**
+ * The element is being retained
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.3
+ * @version  0.6.3
+ */
+Icon.setMethod(function retained() {
+	this.setCssClasses();
+});
+
+/**
+ * The element has been introduced to the DOM for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.3
+ * @version  0.6.3
+ */
+Icon.setMethod(function introduced() {
+	this.setCssClasses();
+});
+
+/**
+ * Try to set the correct icon
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.3
+ * @version  0.6.3
+ */
+Icon.setMethod(function setIcon(info) {
+
+	if (!info) {
+		return;
+	}
+
+	if (typeof info == 'string') {
+		info = info.split(' ');
+
+		if (info.length == 2) {
+			this.icon_style = info[0];
+			this.icon_name = info[1];
+		} else {
+			this.icon_name = info[0];
+		}
+	} else if (typeof info == 'object') {
+		let style = info.style || info.icon_style,
+		    name = info.name || info.icon_name;
+		
+		if (style) {
+			this.icon_style = style;
+		}
+
+		if (name) {
+			this.icon_name = name;
+		}
+	}
+
+	if (!this.icon_style) {
+		this.icon_style = 'duotone';
+	}
+});
+
+/**
+ * Set the CSS classes
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.3
+ * @version  0.6.4
+ */
+Icon.setMethod(function setCssClasses() {
+
+	if (this.source && this.source != 'fontawesome') {
+		return;
+	}
+
+	// Load the appropriate font style
+	this.hawkejs_renderer.helpers.Media.loadIconFont();
+
+	let fa_pro = this.hawkejs_renderer.expose('fontawesome_pro'),
+	    style = this.icon_style || 'regular';
+
+	if (!fa_pro) {
+		if (style == 'duotone' || style == 'light' || style == 'thin' || style == 'regular') {
+			style = 'solid';
+		}
+	}
+
+	let existing_classes = Array.cast(this.classList);
+
+	// Remove existing fontawesome classes
+	for (let entry of existing_classes) {
+		if (entry.startsWith('fa')) {
+			this.classList.remove(entry);
+		}
+	}
+
+	this.classList.add('fa-' + (this.icon_style || 'solid'));
+	this.classList.add('fa-' + this.icon_name);
+});

package/helper/media_helper.js

@@ -1,3 +1,5 @@
+const PLACEHOLDER = Symbol('placeholder');
+
 /**
  * The Media helper
  *
@@ -7,9 +9,7 @@
  *
  * @param    {ViewRender}    view
  */
-var Media = Function.inherits('Alchemy.Helper', function Media(view) {
-	Media.super.call(this, view);
-});
+const Media = Function.inherits('Alchemy.Helper', 'Media');
 
 /**
  * Function to execute on the client side, when the scene is made
@@ -88,6 +88,28 @@ Media.setStatic(function loadImagesBasedOnSize() {
 	}
 });
 
+/**
+ * Load the icon font
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.4
+ * @version  0.6.4
+ *
+ * @return   {string}
+ */
+Media.setMethod(function loadIconFont() {
+
+	let font_style = this.hawkejs_renderer.expose('fontawesome_pro');
+
+	if (!font_style) {
+		font_style = 'alchemy_icons_fafree';
+	}
+
+	this.hawkejs_renderer.style(font_style);
+
+	return font_style;
+});
+
 /**
  * Apply directive to an element
  *
@@ -159,6 +181,11 @@ Media.setMethod(function applyDirective(element, image, options) {
 		return;
 	}
 
+	if (options[PLACEHOLDER]) {
+		element.setAttribute('alt', '');
+		element.setAttribute('role', 'presentation');
+	}
+
 	if (!String(image).isHex()) {
 		return;
 	}
@@ -168,7 +195,8 @@ Media.setMethod(function applyDirective(element, image, options) {
 	this.view.helpers.Alchemy.getResource({
 		name: 'MediaFile#data',
 		params: {
-			id: image
+			id     : image,
+			prefix : this.view.expose('active_prefix') || '__',
 		}
 	}, function gotResult(err, data) {
 
@@ -275,9 +303,9 @@ Media.setMethod(function imageUrl(image_id, options) {
 /**
  * Create a base placeholder image url
  *
- * @author   Jelle De Loecker   <jelle@develry.be>
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.6.2
  *
  * @param    {Object}   options
  *
@@ -306,6 +334,8 @@ Media.setMethod(function placeholderUrl(options) {
 		if (options.text) {
 			url.addQuery('text', options.text);
 		}
+
+		options[PLACEHOLDER] = true;
 	}
 
 	return url;

package/helper/widgets/image_widget.js

@@ -4,8 +4,8 @@
  * @constructor
  *
  * @author   Jelle De Loecker <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.6.0
+ * @version  0.6.0
  *
  * @param    {Object}   data
  */
@@ -15,8 +15,8 @@ const Image = Function.inherits('Alchemy.Widget', 'Image');
  * Prepare the schema
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.6.0
+ * @version  0.6.0
  */
 Image.constitute(function prepareSchema() {
 
@@ -29,8 +29,8 @@ Image.constitute(function prepareSchema() {
  * Populate the widget
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.1.0
- * @version  0.1.0
+ * @since    0.6.0
+ * @version  0.6.4
  *
  * @param    {HTMLElement}   widget
  */
@@ -40,7 +40,7 @@ Image.setMethod(function populateWidget() {
 
 	this.hawkejs_renderer.helpers.Media.applyDirective(img, this.config.image);
 
-	populateWidget.super.call(this);
-
 	this.widget.append(img);
+
+	return populateWidget.super.call(this);
 });

package/lib/media_types/image_media_type.js

@@ -14,10 +14,10 @@ var exiv2    = alchemy.use('@11ways/exiv2'),
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.0.1
  * @version  0.2.0
+ *
+ * @param    {Object}   options
  */
-var ImageMedia = Function.inherits('Alchemy.MediaType', function ImageMediaType(options) {
-	ImageMediaType.super.call(this, options);
-});
+const ImageMedia = Function.inherits('Alchemy.MediaType', 'ImageMediaType');
 
 ImageMedia.setProperty('exivPath', alchemy.plugins.media.exiv2);
 ImageMedia.setProperty('hashType', alchemy.plugins.media.hash);

package/model/media_file_model.js

@@ -19,32 +19,48 @@ var MediaFile = Function.inherits('Alchemy.Model', function MediaFile(options) {
 
 MediaFile.setProperty('types', alchemy.shared('Media.types'));
 
+/**
+ * The default sort options
+ *
+ * @type {Object}
+ */
+MediaFile.prepareProperty('sort', function sort() {
+	return {created: -1};
+});
+
 /**
  * Constitute the class wide schema
  *
- * @author   Jelle De Loecker <jelle@develry.be>
+ * @author   Jelle De Loecker <jelle@elevenways.be>
  * @since    0.2.0
- * @version  0.5.1
+ * @version  0.6.4
  */
 MediaFile.constitute(function addFields() {
 
-	this.addField('name', 'String');
-	this.addField('filename', 'String');
+	this.addField('name', 'String', {
+		description: 'The name of the file',
+	});
+
+	this.addField('filename', 'String', {
+		description : 'The actual filename',
+	});
 
 	this.addField('type', 'Enum', {
-		values: alchemy.getClassGroup('media_type')
+		values: alchemy.getClassGroup('media_type'),
+		description: 'The type of file',
 	});
 
 	this.addField('extra', 'Object');
 
-	let options = {};
-
-	if (alchemy.plugins.media.translatable) {
-		options.translatable = true;
-	}
+	this.addField('title', 'String', {
+		translatable : alchemy.plugins.media.translatable,
+		description  : 'The title of the file (will be used in the title attribute)',
+	});
 
-	this.addField('title', 'String', options);
-	this.addField('alt', 'String', options);
+	this.addField('alt', 'String', {
+		translatable : alchemy.plugins.media.translatable,
+		description  : 'The alternative information of the file (will be used in the alt attribute)',
+	});
 
 	this.belongsTo('MediaRaw');
 });
@@ -54,7 +70,7 @@ MediaFile.constitute(function addFields() {
  *
  * @author   Jelle De Loecker <jelle@develry.be>
  * @since    0.2.0
- * @version  0.5.1
+ * @version  0.6.4
  */
 MediaFile.constitute(function chimeraConfig() {
 
@@ -69,6 +85,15 @@ MediaFile.constitute(function chimeraConfig() {
 	// Get the list group
 	list = this.chimera.getActionFields('list');
 
+	list.addField('_id', {
+		view     : 'file_preview',
+		wrapper  : 'file_preview',
+		title    : 'Thumbnail',
+		filter   : false,
+		sortable : false,
+	});
+
+	list.addField('created');
 	list.addField('name');
 	list.addField('filename');
 	list.addField('type');
@@ -78,6 +103,12 @@ MediaFile.constitute(function chimeraConfig() {
 	// Get the edit group
 	edit = this.chimera.getActionFields('edit');
 
+	edit.addField('_id', {
+		view    : 'file_preview',
+		wrapper : 'file_preview',
+		title   : 'Preview',
+	});
+
 	edit.addField('name');
 	edit.addField('filename');
 	edit.addField('type');

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-media",
 	"description": "The media plugin for Alchemy",
-	"version": "0.6.2",
+	"version": "0.6.4",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/skerit/alchemy-media.git"

package/view/element/al_file.hwk

@@ -1,7 +1,7 @@
 <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" hidden></al-ico>
+	<al-ico class="empty-icon fa-solid fa-file-arrow-up"><% if (self.value) $0.hidden = true %></al-ico>
 	<input type="file" tabindex="-1" class="al-file-input" hidden>
 </label>
 
@@ -12,6 +12,7 @@
 	</button>
 
 	<button class="al-file-remove">
+		<% if (!self.value) $0.hidden = true %>
 		<al-ico class="fa-solid fa-trash-can"></al-ico>
 		{%t "remove-current-file" %}
 	</button>

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

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

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

@@ -0,0 +1,8 @@
+<% style('element/alchemy_file') %>
+
+{% if value %}
+	<img
+		!Media={% value %}
+		+media-route="Media::thumb"
+	>
+{% /if %}

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

@@ -0,0 +1,8 @@
+<% style('element/alchemy_file') %>
+
+{% if value %}
+	<img
+		!Media={% value %}
+		+media-route="Media::thumb"
+	>
+{% /if %}

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

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