alchemy-media 0.6.1 → 0.6.2

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/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/helper/media_helper.js

@@ -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');

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "alchemy-media",
 	"description": "The media plugin for Alchemy",
-	"version": "0.6.1",
+	"version": "0.6.2",
 	"repository": {
 		"type" : "git",
 		"url"  : "https://github.com/skerit/alchemy-media.git"
@@ -12,10 +12,10 @@
 		"veronica"      : "~0.2.2"
 	},
 	"peerDependencies": {
-		"alchemymvc" : ">=1.1.0"
+		"alchemymvc" : ">=1.2.0"
 	},
 	"license": "MIT",
 	"engines": {
-		"node" : ">=10.21.0"
+		"node" : ">=14.0.0"
 	}
 }

package/view/element/al_file.hwk

@@ -1,7 +1,18 @@
-<div class="al-file-preview"></div>
-<div class="al-file-right">
-	<div class="al-file-toolbar">
-		<button class="al-file-select-file">Select file</button>
-	</div>
+<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>
 	<input type="file" tabindex="-1" class="al-file-input" hidden>
+</label>
+
+<div class="al-file-right">
+	<button class="al-file-choose-existing">
+		<al-ico class="fa-solid fa-file-image"></al-ico>
+		{%t "select-uploaded-file" %}
+	</button>
+
+	<button class="al-file-remove">
+		<al-ico class="fa-solid fa-trash-can"></al-ico>
+		{%t "remove-current-file" %}
+	</button>
 </div>