alchemy-media 0.6.0 → 0.6.3

package/assets/stylesheets/fontawesome6/brands.scss

@@ -0,0 +1,30 @@
+/*!
+ * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-font-brands: normal 400 1em/1 "Font Awesome 6 Brands";
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Brands';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-brands-400.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-brands-400.ttf') format('truetype');
+}
+
+.fab,
+.#{$fa-css-prefix}-brands {
+  font-family: 'Font Awesome 6 Brands';
+  font-weight: 400;
+}
+
+@each $name, $icon in $fa-brand-icons {
+  .#{$fa-css-prefix}-#{$name}:before { content: unquote("\"#{ $icon }\""); }
+}

package/assets/stylesheets/{fontawesome5.15 → fontawesome6}/fontawesome.scss

@@ -1,11 +1,16 @@
 /*!
- * Font Awesome Free 5.15.1 by @fontawesome - https://fontawesome.com
+ * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
  * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
  */
+// Font Awesome core compile (Web Fonts-based)
+// -------------------------
+
+@import 'functions';
 @import 'variables';
 @import 'mixins';
 @import 'core';
-@import 'larger';
+@import 'sizing';
 @import 'fixed-width';
 @import 'list';
 @import 'bordered-pulled';

package/assets/stylesheets/fontawesome6/regular.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-font-regular: normal 400 1em/1 "#{ $fa-style-family }";
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 400;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype');
+}
+
+.far,
+.#{$fa-css-prefix}-regular {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 400;
+}

package/assets/stylesheets/fontawesome6/solid.scss

@@ -0,0 +1,26 @@
+/*!
+ * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+@import 'functions';
+@import 'variables';
+
+:root, :host {
+  --#{$fa-css-prefix}-font-solid: normal 900 1em/1 "#{ $fa-style-family }";
+}
+
+@font-face {
+  font-family: 'Font Awesome 6 Free';
+  font-style: normal;
+  font-weight: 900;
+  font-display: $fa-font-display;
+  src: url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
+    url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype');
+}
+
+.fas,
+.#{$fa-css-prefix}-solid {
+  font-family: 'Font Awesome 6 Free';
+  font-weight: 900;
+}

package/assets/stylesheets/fontawesome6/v4-shims.scss

@@ -0,0 +1,11 @@
+/*!
+ * Font Awesome Free 6.1.1 by @fontawesome - https://fontawesome.com
+ * License - https://fontawesome.com/license/free (Icons: CC BY 4.0, Fonts: SIL OFL 1.1, Code: MIT License)
+ * Copyright 2022 Fonticons, Inc.
+ */
+// V4 shims compile (Web Fonts-based)
+// -------------------------
+
+@import 'functions';
+@import 'variables';
+@import 'shims';

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
@@ -66,6 +69,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/element/al_file.js

@@ -5,9 +5,7 @@
  * @since    0.6.0
  * @version  0.6.0
  */
-const AlFile = Function.inherits('Alchemy.Element.App', function AlFile() {
-	return AlFile.super.call(this);
-});
+const AlFile = Function.inherits('Alchemy.Element.App', 'AlFile');
 
 /**
  * The template code
@@ -28,13 +26,13 @@ AlFile.setTemplateFile('element/al_file');
 AlFile.setStylesheetFile('element/alchemy_file');
 
 /**
- * Getter for the select button
+ * Getter for the drop target
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
- * @since    0.2.0
- * @version  0.2.0
+ * @since    0.6.2
+ * @version  0.6.2
  */
-AlFile.addElementGetter('select_button', '.al-file-select-file');
+AlFile.addElementGetter('drop_target', '.al-file-drop-target');
 
 /**
  * Getter for the file input
@@ -54,14 +52,54 @@ AlFile.addElementGetter('file_input', '.al-file-input');
  */
 AlFile.addElementGetter('preview_element', '.al-file-preview');
 
+/**
+ * Getter for the remove button
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.2
+ * @version  0.6.2
+ */
+AlFile.addElementGetter('remove_button', '.al-file-remove');
+
+/**
+ * Getter for the uploading-icon
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.2
+ * @version  0.6.2
+ */
+AlFile.addElementGetter('icon_uploading', '.uploading-icon');
+
+/**
+ * Getter for the empty-icon
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.2
+ * @version  0.6.2
+ */
+AlFile.addElementGetter('icon_empty', '.empty-icon');
+
 /**
  * Set the value
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.6.0
+ * @version  0.6.2
  */
 AlFile.setAttribute('value', null, function setValue(value) {
+
+	if (value == null) {
+		value = '';
+	}
+
+	if (this.remove_button) {
+		this.remove_button.hidden = !value;
+	}
+
+	if (this.icon_empty) {
+		this.icon_empty.hidden = !!value;
+	}
+
 	this.updatePreview(value);
 	return value;
 });
@@ -97,15 +135,15 @@ AlFile.setMethod(function updatePreview(value) {
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.6.0
+ * @version  0.6.2
  */
 AlFile.setMethod(async function uploadFile(config) {
 
-	const that = this;
-
 	let file     = config.file,
 	    filename = config.filename,
 	    format   = config.format;
+	
+	this.classList.add('uploading');
 
 	let form_data = new FormData(),
 	    url = this.dataset.uploadUrl;
@@ -121,10 +159,18 @@ AlFile.setMethod(async function uploadFile(config) {
 		form_data.append('format', format);
 	}
 
-	let response = await Blast.fetch({
-		url  : url,
-		post : form_data,
-	});
+	let response;
+
+	try {
+		response = await Blast.fetch({
+			url  : url,
+			post : form_data,
+		});
+	} catch (err) {
+		console.error('Failed to upload file:', err);
+	}
+
+	this.classList.remove('uploading');
 
 	if (!response || !response.files || !response.files[0]) {
 		return;
@@ -139,32 +185,66 @@ AlFile.setMethod(async function uploadFile(config) {
 });
 
 /**
- * Test image
+ * Added to the DOM for the first time
  *
  * @author   Jelle De Loecker   <jelle@elevenways.be>
  * @since    0.6.0
- * @version  0.6.0
+ * @version  0.6.2
  */
 AlFile.setMethod(function introduced() {
 
 	const that = this;
 
-	this.updatePreview();
+	this.addEventListener('dragenter', e => {
+		e.preventDefault();
+	});
 
-	this.select_button.addEventListener('click', e => {
+	this.addEventListener('dragover', e => {
+		this.classList.add('dropping');
 		e.preventDefault();
-		this.file_input.click();
 	});
 
-	this.file_input.addEventListener('change', function onChange(e) {
+	this.addEventListener('dragend', e => {
+		this.classList.remove('dropping');
+	});
+
+	this.addEventListener('dragleave', e => {
+		this.classList.remove('dropping');
+	});
+
+	this.addEventListener('drop', e => {
+		this.classList.remove('dropping');
+		this.classList.add('dropped');
 
-		that.uploadFile({
-			file     : this.files[0],
-			filename : this.files[0].name,
+		e.preventDefault();
+
+		let file = e.dataTransfer.files[0];
+
+		this.uploadFile({
+			file     : file,
+			filename : file.name,
 			format   : null,
 		});
 	});
 
+	this.updatePreview();
+
+	this.file_input.addEventListener('change', e => {
+
+		this.classList.remove('dropping');
+		this.classList.add('dropped');
+
+		this.uploadFile({
+			file     : this.file_input.files[0],
+			filename : this.file_input.files[0].name,
+			format   : null,
+		});
+	});
+
+	this.remove_button.addEventListener('click', e => {
+		this.value = null;
+	});
+
 });
 
 /**

package/element/al_ico_element.js

@@ -14,4 +14,134 @@ 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.3
+ */
+Icon.setMethod(function setCssClasses() {
+
+	if (this.source && this.source != 'fontawesome') {
+		return;
+	}
+
+	let fa_pro = this.hawkejs_renderer.expose('fontawesome_pro'),
+	    style = this.icon_style || 'regular';
+
+	if (fa_pro) {
+		this.hawkejs_renderer.style(fa_pro);
+	} else {
+		this.hawkejs_renderer.style('alchemy_icons_fafree');
+
+		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
@@ -93,7 +93,7 @@ Media.setStatic(function loadImagesBasedOnSize() {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.5.0
- * @version  0.5.1
+ * @version  0.6.2
  *
  * @param    {Element}   element    The element to apply to
  * @param    {String}    image      The image identifier
@@ -116,6 +116,12 @@ Media.setMethod(function applyDirective(element, image, options) {
 		options = {};
 	}
 
+	let variables = element[Hawkejs.VARIABLES];
+
+	if (!options.route) {
+		options.route = variables?.['media-route'];
+	}
+
 	if (width) {
 		if (width.indexOf('%') > -1) {
 			element.removeAttribute('width');
@@ -153,6 +159,11 @@ Media.setMethod(function applyDirective(element, image, options) {
 		return;
 	}
 
+	if (options[PLACEHOLDER]) {
+		element.setAttribute('alt', '');
+		element.setAttribute('role', 'presentation');
+	}
+
 	if (!String(image).isHex()) {
 		return;
 	}
@@ -269,9 +280,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
  *
@@ -300,6 +311,8 @@ Media.setMethod(function placeholderUrl(options) {
 		if (options.text) {
 			url.addQuery('text', options.text);
 		}
+
+		options[PLACEHOLDER] = true;
 	}
 
 	return url;

package/lib/media_types/image_media_type.js

@@ -84,7 +84,7 @@ ImageMedia.setMethod(function thumbnail(conduit, record) {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.0.1
- * @version  0.6.0
+ * @version  0.6.1
  *
  * @param    {Conduit}   conduit
  * @param    {Object}    record
@@ -227,8 +227,7 @@ ImageMedia.setMethod(function serve(conduit, record, options) {
 
 	if (resizeOptions) {
 
-		// @todo: make it possible to disable webp
-		if (this.supportsWebp(conduit)) {
+		if (this.supportsWebp(conduit) && alchemy.plugins.media.cwebp) {
 			resizeOptions.type = 'webp';
 		}
 
@@ -391,6 +390,10 @@ ImageMedia.setMethod(function getSize(conduit, filePath, options, callback) {
 
 	tempPath = PATH_TEMP + '/' + alchemy.ObjectId() + '.webp';
 
+	if (!alchemy.plugins.media.cwebp) {
+		return callback(new Error('Unable to get size: cwebp not found'));
+	}
+
 	child.exec(alchemy.plugins.media.cwebp + ' ' + [resizeOptions, '-q 80', filePath, '-o', tempPath].join(' '), function(err, out) {
 
 		if (err) {