Version 6.7.0

README.md

@@ -6,7 +6,7 @@ For more information, go to https://www.luigifab.fr/apijs (IPv6 is required, it'
 
 This repository is a releases mirror. To install it, please read the documentation.
 
-- Current version: 6.6.0 (03/03/2021) (archive regenerated on 02/07/2021)
+- Current version: 6.7.0 (07/07/2021)
 - Client compatibility: Firefox 36+, Chrome 32+, Opera 19+, Edge 16+, Safari 9+
 - Translations: English (en), French (fr-FR/fr-CA), German (de), Italian (it), Portuguese (pt-PT/pt-BR), Spanish (es)
 - Other translations: Czech (cs), Dutch (nl), Japanese (ja), Polish (pl), Slovak (sk)

src/javascripts/dialog.js

@@ -1,6 +1,6 @@
 /**
  * Created D/12/04/2009
- * Updated W/03/03/2021
+ * Updated L/24/05/2021
  *
  * Copyright 2008-2021 | Fabrice Creuzot (luigifab) <code~luigifab~fr>
  * https://www.luigifab.fr/apijs
@@ -92,7 +92,7 @@ apijs.core.dialog = function () {
 
 		if ((typeof title == 'string') && (typeof text == 'string') && (typeof action == 'string') && (typeof input == 'string')) {
 			return this.init('upload', icon)
-				.htmlParent(action, 'apijs.upload.actionConfirm();')
+				.htmlParent(action, 'apijs.upload.actionConfirm();', 'apijs.upload.actionDrag(event);')
 				.htmlContent(title, text)
 				.htmlUpload(input, (typeof multiple == 'boolean') ? multiple : false)
 				.htmlBtnConfirm('submit')
@@ -304,10 +304,12 @@ apijs.core.dialog = function () {
 
 	this.onResizeBrowser = function () {
 
-		var add = document.querySelector('body').clientWidth <= (apijs.dialog.has('photo', 'video') ? 900 : 460);
+		var add, body = document.querySelector('body');
+
+		add = body.clientWidth <= (apijs.dialog.has('photo', 'video') ? 900 : 460);
 		apijs.dialog[add ? 'add' : 'remove']('mobile');
 
-		add = document.querySelector('body').clientWidth <= 300;
+		add = body.clientWidth <= 300;
 		apijs.dialog[add ? 'add' : 'remove']('tiny');
 	};
 
@@ -497,7 +499,7 @@ apijs.core.dialog = function () {
 		if ([32, 33, 34, 35, 36, 38, 40].has(ev.keyCode)) {
 
 			// empèche le défilement
-			if (!ev.target || !['INPUT', 'TEXTAREA', 'OPTION', 'SELECT'].has(ev.target.nodeName)) {
+			if (!ev.target || (!['INPUT','TEXTAREA','OPTION','SELECT'].has(ev.target.nodeName) && !ev.target.classList.contains('scrollable'))) {
 				ev.preventDefault();
 				ev.stopPropagation();
 			}
@@ -737,10 +739,11 @@ apijs.core.dialog = function () {
 		// supprime le dialogue
 		if (isAll) {
 			this.toggle('ready', 'end');
-			document.querySelector('body').removeChild(this.t1);
+			this.t1.remove();
 		}
 		else {
-			this.t1.removeChild(this.t2);
+			while (this.t1.firstChild)
+				this.t1.firstChild.remove();
 		}
 
 		// réinitialise toutes les variables (sauf ft/ti/ns)
@@ -767,11 +770,24 @@ apijs.core.dialog = function () {
 
 	// GÉNÉRATION DES ÉLÉMENTS (private return this)
 
-	this.htmlParent = function (action, submit) {
+	this.htmlParent = function (action, submit, drag) {
 
 		this.t1 = document.createElement('div');
 		this.t1.setAttribute('id', 'apijsDialog');
 
+		if (typeof drag == 'string') {
+
+			this.t1.setAttribute('ondragenter', drag);
+			this.t1.setAttribute('ondragleave', drag);
+			this.t1.setAttribute('ondragover', drag);
+			this.t1.setAttribute('ondrop', drag);
+
+			this.a = document.createElement('p');
+			this.a.setAttribute('class', 'drag');
+			this.a.appendChild(apijs.i18n.translateNode(127));
+			this.t1.appendChild(this.a);
+		}
+
 		if (typeof action == 'string') {
 			this.t2 = document.createElement('form');
 			this.t2.setAttribute('action', action);
@@ -952,7 +968,7 @@ apijs.core.dialog = function () {
 		this.a.appendChild(this.b);
 
 			this.b = document.createElement('div');
-			this.b.setAttribute('class', 'filenames');
+			this.b.setAttribute('class', 'filenames scrollable');
 
 		this.a.appendChild(this.b);
 		this.t2.appendChild(this.a);
@@ -1088,7 +1104,7 @@ apijs.core.dialog = function () {
 			this.add('videoiframe');
 		}
 		else if (apijs.startPlayer(this.media, url)) {
-			this.add('videoplayer');
+			this.add('apijsvideoplayer');
 		}
 		else {
 			this.c = document.createElement('source');

src/javascripts/i18n.js

@@ -91,6 +91,7 @@ apijs.core.i18n = function () {
 			124: "Operation in progress...",
 			125: "Upload in progress...",
 			126: "Processing file in progress...",
+			127: "Drag and drop your files here",
 			131: "video",
 			132: "video track",
 			133: "audio track",
@@ -188,6 +189,7 @@ apijs.core.i18n = function () {
 			124: "Opération en cours...",
 			125: "Envoi en cours...",
 			126: "Traitement en cours...",
+			127: "Faites glisser et déposez vos fichiers ici",
 			131: "vidéo",
 			132: "piste vidéo",
 			133: "piste audio",

src/javascripts/main.js

@@ -1,6 +1,6 @@
 /**
  * Created J/03/12/2009
- * Updated V/08/01/2021
+ * Updated L/24/05/2021
  *
  * Copyright 2008-2021 | Fabrice Creuzot (luigifab) <code~luigifab~fr>
  * https://www.luigifab.fr/apijs
@@ -46,7 +46,7 @@ var apijs = new (function () {
 
 	"use strict";
 	this.core = {};
-	this.version = 660;
+	this.version = 670;
 
 	this.config = {
 		lang: 'auto',
@@ -123,7 +123,7 @@ var apijs = new (function () {
 		try {
 			str = new Intl.NumberFormat(this.config.lang, { minimumFractionDigits: dgt, maximumFractionDigits: dgt }).format(nb);
 		}
-		catch (e) {
+		catch (ignore) {
 			str = nb.toFixed(dgt);
 		}
 
@@ -135,6 +135,7 @@ var apijs = new (function () {
 
 		if (this.config.dialog.player === true) {
 			elem.videoPlayer = new this.core.player(elem, url);
+			elem.parentNode.classList.add('apijsvideoplayer');
 			return true;
 		}
 
@@ -191,15 +192,15 @@ var apijs = new (function () {
 		filter   = (typeof filter == 'string') ? filter : '';
 
 		// https://gomakethings.com/how-to-serialize-form-data-with-vanilla-js/
-		Array.prototype.forEach.call(form.elements, function (elem) {
+		Array.prototype.forEach.call(form.elements, function (elem, idx) {
 
 			if (!elem.name || elem.disabled || ['file', 'reset', 'submit', 'button'].has(elem.type) || (elem.name.indexOf(filter) !== 0))
 				return;
 
 			if (elem.type === 'select-multiple') {
-				for (var n = 0; n < elem.options.length; n++) {
-					if (elem.options[n].selected)
-						data.push(encodeURIComponent(elem.name) + '=' + encodeURIComponent(elem.options[n].value));
+				for (idx = 0; idx < elem.options.length; idx++) {
+					if (elem.options[idx].selected)
+						data.push(encodeURIComponent(elem.name) + '=' + encodeURIComponent(elem.options[idx].value));
 				}
 			}
 			else if (!['checkbox', 'radio'].has(elem.type) || elem.checked) {
@@ -213,4 +214,4 @@ var apijs = new (function () {
 })();
 
 if (typeof self.addEventListener == 'function')
-	self.addEventListener('load', apijs.start.bind(apijs));
+	self.addEventListener('load', apijs.start.bind(apijs));

src/javascripts/player.js

@@ -1,6 +1,6 @@
 /**
  * Created D/11/01/2015
- * Updated W/03/03/2021
+ * Updated L/24/05/2021
  *
  * Copyright 2008-2021 | Fabrice Creuzot (luigifab) <code~luigifab~fr>
  * https://www.luigifab.fr/apijs
@@ -19,7 +19,7 @@
 apijs.core.player = function (video, url) {
 
 	"use strict";
-	this.video = video;
+	this.video   = video;
 	this.stalled = false;
 	this.subload = false;
 
@@ -230,7 +230,7 @@ apijs.core.player = function (video, url) {
 
 		if ((idx > 0) && (video.duration !== Infinity) && !isNaN(video.duration)) {
 
-			elem.querySelectorAll('.buffer').forEach(function (node) { node.parentNode.removeChild(node); });
+			elem.querySelectorAll('.buffer').forEach(function (node) { node.remove(); });
 			while (idx-- > 0) {
 
 				buffer = document.createElement('rect');
@@ -254,11 +254,19 @@ apijs.core.player = function (video, url) {
 
 			if (this.video.paused) {
 				this.html('span.play').textContent = '\uE810';
-				apijs.dialog.remove('playing');
+				// via un dialogue ou en direct
+				if (apijs.dialog.t1)
+					apijs.dialog.remove('playing');
+				else
+					this.video.parentNode.classList.remove('playing');
 			}
 			else {
 				this.html('span.play').textContent = '\uE811';
-				apijs.dialog.add('playing');
+				// via un dialogue ou en direct
+				if (apijs.dialog.t1)
+					apijs.dialog.add('playing');
+				else
+					this.video.parentNode.classList.add('playing');
 			}
 		}
 	};
@@ -384,7 +392,7 @@ apijs.core.player = function (video, url) {
 	this.actionVideo = function (ev) {
 
 		this.html('svg.bar rect').style.width = '0';
-		this.html('svg.bar').querySelectorAll('.buffer').forEach(function (node) { node.parentNode.removeChild(node); });
+		this.html('svg.bar').querySelectorAll('.buffer').forEach(function (node) { node.remove(); });
 		this.html('span.play').textContent = '\uE810';
 
 		this.updateSelect('videotrack', 0);
@@ -395,6 +403,13 @@ apijs.core.player = function (video, url) {
 			ev.target.blur();
 	};
 
+	this.actionFullscreen = function () {
+
+		// en direct
+		var res = document.fullscreenElement || document.mozFullScreenElement || document.webkitFullscreenElement;
+		this.video.parentNode.classList[res ? 'add' : 'remove']('fullscreen');
+	},
+
 
 	// GÉNÉRATION DES ÉLÉMENTS (private return domelement)
 
@@ -527,7 +542,20 @@ apijs.core.player = function (video, url) {
 			b.setAttribute('class', 'btn full fnt nomobile');
 			b.appendChild(document.createTextNode('\uE80F'));
 			b.onclick = function () {
-				apijs.requestFullscreen(apijs.dialog.t1 ? apijs.dialog.t1 : this.video.parentNode);
+				// via un dialogue ou en direct
+				if (apijs.dialog.t1) {
+					apijs.requestFullscreen(apijs.dialog.t1);
+				}
+				else {
+					if (document.webkitFullscreenEnabled)
+						document.addEventListener('webkitfullscreenchange', this.actionFullscreen.bind(this));
+					else if (document.fullscreenEnabled)
+						document.addEventListener('fullscreenchange', this.actionFullscreen.bind(this));
+					else if (document.mozFullScreenEnabled)
+						document.addEventListener('mozfullscreenchange', this.actionFullscreen.bind(this));
+					apijs.requestFullscreen(this.video.parentNode);
+				}
+
 			}.bind(this);
 
 		a.appendChild(b);

src/javascripts/upload.js

@@ -1,6 +1,6 @@
 /**
  * Created L/13/04/2009
- * Updated D/03/01/2021
+ * Updated V/18/06/2021
  *
  * Copyright 2008-2021 | Fabrice Creuzot (luigifab) <code~luigifab~fr>
  * https://www.luigifab.fr/apijs
@@ -89,47 +89,76 @@ apijs.core.upload = function () {
 
 	// GESTION DES INTERACTIONS (private return void)
 
+	this.actionDrag = function (ev) {
+
+		if (ev.type == 'dragenter') {
+			apijs.dialog.add('drag');
+		}
+		else if (ev.type == 'dragleave') {
+			apijs.dialog.remove('drag');
+		}
+		else if (ev.dataTransfer && ev.dataTransfer.files && (ev.dataTransfer.files.length > 0)) {
+			this.actionChoose(ev.dataTransfer);
+			apijs.dialog.remove('drag');
+		}
+
+		ev.stopPropagation();
+		ev.preventDefault();
+	};
+
 	this.actionChoose = function (elem) {
 
-		var html = [], size = 0, text;
+		var html = [], size = 0, error = false, btn = apijs.html('button.confirm'), text;
 		this.files = [];
 
 		if (this.exts) {
 
 			// 1048576 octet = 1 Mo
-			Array.prototype.forEach.call(elem.files, function (file) {
+			Array.prototype.forEach.call((this.allmax > 0) ? elem.files : Array.prototype.slice.call(elem.files, 0, 1), function (file, idx) {
 
-				text = file.name + ' <span class="sz">' + apijs.i18n.translate(166, apijs.formatNumber(file.size / 1048576)) + '</span>';
+				text = file.size / 1048576;
+				text = apijs.formatNumber((text < 0.01) ? 0.01 : text);
+				text = ((this.allmax > 0) ? '<td class="nb">' + (idx + 1) + '</td>' : '') +
+					'<td class="name">' + file.name + '</td><td class="size">' + apijs.i18n.translate(166, text) + '</td>';
 
-				if ((this.exts.join() !== '*') && !this.exts.has(file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase()))
-					text += ' <span class="ee">' + apijs.i18n.translate(167) + '</span>';
-				else if (file.size > (this.onemax * 1048576))
-					text += ' <span class="ee">' + apijs.i18n.translate(168) + '</span>';
-				else if (file.size <= 0)
-					text += ' <span class="ee">' + apijs.i18n.translate(169) + '</span>';
-				else
+				if ((this.exts.join() !== '*') && !this.exts.has(file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase())) {
+					text += '<td class="err">' + apijs.i18n.translate(167) + '</td>';
+					error = true;
+				}
+				else if (file.size > (this.onemax * 1048576)) {
+					text += '<td class="err">' + apijs.i18n.translate(168) + '</td>';
+					error = true;
+				}
+				else if (file.size <= 0) {
+					text += '<td class="err">' + apijs.i18n.translate(169) + '</td>';
+					error = true;
+				}
+				else {
+					text += '<td></td>';
 					this.files.push(file);
+				}
 
-				html.push('<div>' + text + '</div>');
+				html.push('<tr>' + text + '</tr>');
 				size += file.size / 1048576;
 
 			}, this); // pour que ci-dessus this = this
 
 			// multiple
 			if ((this.allmax > 0) && (size >= this.allmax)) {
-				html.push('<div class="tt"> = <span class="sz">' + apijs.i18n.translate(166, apijs.formatNumber(size)) + '</span> <span class="ee">' + apijs.i18n.translate(168) + '</span></div>');
+				html.push('<tr class="tt"><td></td><td></td><td class="size">' + apijs.i18n.translate(166, apijs.formatNumber(size)) + '</td><td class="err">' + apijs.i18n.translate(168) + '</td></tr>');
+				error = true;
 			}
 
 			// ok ou ko
-			if (this.files.length === elem.files.length) {
-				apijs.html('button.confirm').removeAttribute('disabled');
-				apijs.html('button.confirm').focus();
+			if (error) {
+				btn.setAttribute('disabled', 'disabled');
 			}
 			else {
-				apijs.html('button.confirm').setAttribute('disabled', 'disabled');
+				btn.removeAttribute('disabled');
+				btn.focus();
 			}
 
-			apijs.html('div.filenames').innerHTML = html.join(' ');
+			apijs.html('div.filenames').innerHTML = '<table>' + html.join('') + '</table>';
 		}
 	};
 
@@ -300,7 +329,11 @@ apijs.core.upload = function () {
 			data = '100%';
 			rect.setAttribute('class', 'end');
 			rect.style.width = '';
-			apijs.html('p').textContent = apijs.i18n.translate(126);
+			var elem = apijs.html('p');
+			elem.setAttribute('data-old', elem.textContent);
+			elem.setAttribute('data-new', apijs.i18n.translate(126));
+			elem.setAttribute('class', 'anim');
+			elem.textContent = '';
 		}
 		else {
 			rect.style.width = data = percent + '%';