alchemy-media 0.5.2 → 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/fontawesome6/fontawesome.scss

@@ -0,0 +1,21 @@
+/*!
+ * 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 'sizing';
+@import 'fixed-width';
+@import 'list';
+@import 'bordered-pulled';
+@import 'animated';
+@import 'rotated-flipped';
+@import 'stacked';
+@import 'icons';
+@import 'screen-reader';

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

@@ -40,6 +40,7 @@ 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');
 Router.get('MediaFile#info', '/media/info', 'MediaFile#info');
 
 // Allow dummy extensions

package/controller/media_files_controller.js

@@ -312,6 +312,26 @@ MediaFiles.setAction(function uploadsingle(conduit) {
 	});
 });
 
+/**
+ * Get the file data
+ *
+ * @author   Jelle De Loecker   <jelle@develry.be>
+ * @since    0.5.1
+ * @version  0.5.1
+ *
+ * @param    {Conduit}               conduit
+ * @param    {Document.MediaFile}    media_file
+ */
+MediaFiles.setAction(function data(conduit, media_file) {
+	conduit.setHeader('cache-control', 'public, max-age=3600, must-revalidate');
+
+	conduit.end({
+		name   : media_file.name,
+		alt    : media_file.alt,
+		title  : media_file.title
+	});
+});
+
 /**
  * Get info on a file
  *

package/controller/media_gallery_chimera_controller.js

@@ -2,6 +2,7 @@
 if (!alchemy.plugins.chimera) {
 	return;
 }
+return;
 
 /**
  * The Media Gallery Gallery Controller class

package/element/al_file.js

@@ -0,0 +1,275 @@
+/**
+ * The al-image custom element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.0
+ * @version  0.6.0
+ */
+const AlFile = Function.inherits('Alchemy.Element.App', 'AlFile');
+
+/**
+ * The template code
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.0
+ * @version  0.6.0
+ */
+AlFile.setTemplateFile('element/al_file');
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.6.0
+ * @version  0.6.0
+ */
+AlFile.setStylesheetFile('element/alchemy_file');
+
+/**
+ * Getter for the drop target
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.2
+ * @version  0.6.2
+ */
+AlFile.addElementGetter('drop_target', '.al-file-drop-target');
+
+/**
+ * Getter for the file input
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+AlFile.addElementGetter('file_input', '.al-file-input');
+
+/**
+ * Getter for the preview
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.2.0
+ * @version  0.2.0
+ */
+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.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;
+});
+
+/**
+ * Update the preview image
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.0
+ * @version  0.6.0
+ */
+AlFile.setMethod(function updatePreview(value) {
+
+	if (arguments.length == 0) {
+		value = this.value;
+	}
+
+	if (this.preview_element) {
+		Hawkejs.removeChildren(this.preview_element);
+
+		if (value) {
+			let img = this.createElement('img');
+			img.setAttribute('src', '/media/thumbnail/' + value);
+			img.setAttribute('srcset', '/media/thumbnail/' + value + '?dpr=2 2x');
+
+			this.preview_element.append(img);
+		}
+	}
+});
+
+/**
+ * Upload the file
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.0
+ * @version  0.6.2
+ */
+AlFile.setMethod(async function uploadFile(config) {
+
+	let file     = config.file,
+	    filename = config.filename,
+	    format   = config.format;
+	
+	this.classList.add('uploading');
+
+	let form_data = new FormData(),
+	    url = this.dataset.uploadUrl;
+
+	if (!url) {
+		url = '/media/upload';
+	}
+
+	form_data.append('uploaded_file', file);
+	form_data.append('filename', filename);
+
+	if (format) {
+		form_data.append('format', format);
+	}
+
+	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;
+	}
+
+	let uploaded_file = response.files[0];
+
+	this.value = uploaded_file.id;
+
+	// uploaded_file.name
+	// uploaded_file.media_raw_id
+});
+
+/**
+ * Added to the DOM for the first time
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.0
+ * @version  0.6.2
+ */
+AlFile.setMethod(function introduced() {
+
+	const that = this;
+
+	this.addEventListener('dragenter', e => {
+		e.preventDefault();
+	});
+
+	this.addEventListener('dragover', e => {
+		this.classList.add('dropping');
+		e.preventDefault();
+	});
+
+	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');
+
+		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;
+	});
+
+});
+
+/**
+ * Get the content for hawkejs
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.6.0
+ * @version  0.6.0
+ */
+AlFile.setMethod(function _getContent(callback) {
+
+	var that = this,
+	    src = this.getAttribute('src');
+
+	this.viewRender.helpers.Alchemy.getResource({name: 'MediaFile#info', params: {path: src}}, function gotResult(err, info) {
+
+		if (err) {
+			return callback(err);
+		}
+
+		console.log('Size:', info);
+
+		that.innerHTML = '<img class="final" src="/media/static/' + src + '?width=50%25" width=' + info.width + ' height=' + info.height +' style="width:400px">'
+		               + '<img class="placeholder" src="/media/static/' + src + '?width=20px">';
+
+		callback(null);
+	});
+});

package/element/al_ico_element.js

@@ -0,0 +1,17 @@
+/**
+ * The al-ico element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.6.0
+ * @version  0.6.0
+ */
+const Icon = Function.inherits('Alchemy.Element', 'AlIco');
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.6.0
+ * @version  0.6.0
+ */
+Icon.setStylesheetFile('alchemy_icons');

package/element/al_svg.js

@@ -0,0 +1,81 @@
+/**
+ * The al-svg element
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.5.1
+ * @version  0.5.1
+ */
+const Svg = Function.inherits('Alchemy.Element', 'AlSvg');
+
+/**
+ * The stylesheet to load for this element
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.5.1
+ * @version  0.5.1
+ */
+Svg.setStylesheetFile('alchemy_svg');
+
+/**
+ * The location of the svg
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.5.1
+ * @version  0.5.1
+ */
+Svg.setAttribute('src');
+
+/**
+ * Get the contents of this SVG
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.5.1
+ * @version  0.5.1
+ */
+Svg.setMethod(async function injectSvg() {
+
+	let contents,
+	    src = this.src;
+
+	if (!src.endsWith('.svg')) {
+		src += '.svg';
+	}
+
+	// Remove all the content
+	Hawkejs.removeChildren(this);
+
+	if (Blast.isNode) {
+		let path = await alchemy.findImagePath(src);
+
+		if (path) {
+			let file = new Classes.Alchemy.Inode.File(path);
+			contents = await file.readString();
+		} else {
+			contents = '';
+		}
+	} else {
+		contents = await Blast.fetch('/media/static/' + src, {cache: 60 * 60 * 1000});
+	}
+
+	this.innerHTML = contents;
+
+	if (this._resolve_me_too) {
+		this._resolve_me_too.resolve();
+	}
+});
+
+/**
+ * Cached render method for Hawkejs
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.5.1
+ * @version  0.5.1
+ */
+Hawkejs.setCachedMethod(Svg, Hawkejs.RENDER_CONTENT, function doRender() {
+
+	if (!this.src) {
+		return;
+	}
+
+	return this.injectSvg();
+});

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.0
+ * @version  0.6.2
  *
  * @param    {Element}   element    The element to apply to
  * @param    {String}    image      The image identifier
@@ -103,13 +103,12 @@ Media.setStatic(function loadImagesBasedOnSize() {
  */
 Media.setMethod(function applyDirective(element, image, options) {
 
-	var srcset,
+	let record,
 	    height = element.getAttribute('height'),
-	    clone,
-	    width = element.getAttribute('width'),
-	    url;
+	    width = element.getAttribute('width');
 
 	if (image && typeof image == 'object' && image._id) {
+		record = image;
 		image = image._id;
 	}
 
@@ -117,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');
@@ -133,16 +138,57 @@ Media.setMethod(function applyDirective(element, image, options) {
 		options.height = height;
 	}
 
-	url = this.imageUrl(image, options);
-	clone = url.clone();
+	let url = this.imageUrl(image, options),
+	    clone = url.clone();
+
 	clone.addQuery('dpr', 2);
 
-	srcset = clone + ' 2x';
+	let srcset = clone + ' 2x';
 
 	// Set the source attribute
 	element.setAttribute('src', url);
 
 	element.setAttribute('srcset', srcset);
+
+	if (element.hasAttribute('alt')) {
+		return;
+	}
+
+	if (record && record.alt) {
+		element.setAttribute('alt', record.alt);
+		return;
+	}
+
+	if (!String(image).isHex()) {
+		return;
+	}
+
+	let pledge = new Pledge();
+
+	this.view.helpers.Alchemy.getResource({
+		name: 'MediaFile#data',
+		params: {
+			id: image
+		}
+	}, function gotResult(err, data) {
+
+		if (!err && data) {
+			if (data.alt) {
+				element.setAttribute('alt', data.alt);
+			} else {
+				element.setAttribute('alt', '');
+			}
+
+			if (data.title && !element.hasAttribute('title')) {
+				element.setAttribute('title', data.title);
+			}
+
+		}
+
+		pledge.resolve();
+	});
+
+	return pledge;
 });
 
 /**
@@ -168,7 +214,7 @@ Media.setMethod(function fileAnchor(file_id, options) {
  *
  * @author   Jelle De Loecker   <jelle@develry.be>
  * @since    0.2.0
- * @version  0.2.0
+ * @version  0.5.1
  *
  * @param    {String}   image_id
  *
@@ -184,7 +230,7 @@ Media.setMethod(function imageUrl(image_id, options) {
 		options = {};
 	}
 
-	if (String(image_id).isObjectId()) {
+	if (String(image_id).isHex()) {
 
 		if (options.route) {
 			routeName = options.route;

package/helper/widgets/image_widget.js

@@ -0,0 +1,46 @@
+/**
+ * The Widget Image class
+ *
+ * @constructor
+ *
+ * @author   Jelle De Loecker <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ *
+ * @param    {Object}   data
+ */
+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
+ */
+Image.constitute(function prepareSchema() {
+
+	this.schema.addField('image', 'File', {
+		widget_config_editable: true,
+	});
+});
+
+/**
+ * Populate the widget
+ *
+ * @author   Jelle De Loecker   <jelle@elevenways.be>
+ * @since    0.1.0
+ * @version  0.1.0
+ *
+ * @param    {HTMLElement}   widget
+ */
+Image.setMethod(function populateWidget() {
+
+	let img = this.createElement('img');
+
+	this.hawkejs_renderer.helpers.Media.applyDirective(img, this.config.image);
+
+	populateWidget.super.call(this);
+
+	this.widget.append(img);
+});