@osimatic/helpers-js 1.3.3 → 1.3.5

package/index.js

@@ -31,6 +31,7 @@ const { Pagination, Navigation } = require('./paging');
 const { DetailsSubArray } = require('./details_sub_array');
 const { SelectAll } = require('./select_all');
 const { MultipleActionInTable, MultipleActionInDivList } = require('./multiple_action_in_table');
+const { MultiFilesInput } = require('./multi_files_input');
 const { FormDate, InputPeriod } = require('./form_date');
 const { ShoppingCart } = require('./shopping_cart');
 const { FlashMessage } = require('./flash_message');
@@ -52,7 +53,7 @@ const { WebSocket } = require('./web_socket');
 module.exports = {
 	Array, Object, Number, String,
 	HTTPClient, Cookie, UrlAndQueryString, IBAN, BankCard, AudioMedia, VideoMedia, UserMedia, PersonName, Email, TelephoneNumber, DateTime, DatePeriod, TimestampUnix, SqlDate, SqlTime, SqlDateTime, Duration, File, CSV, Img, FormHelper, Country, PostalAddress, GeographicCoordinates, HexColor, RgbColor, SocialNetwork, NumberFormatter, Password,
-	Browser, DataTable, Pagination, Navigation, DetailsSubArray, SelectAll, MultipleActionInTable, MultipleActionInDivList, EditValue, FormDate, InputPeriod, ShoppingCart, FlashMessage, CountDown, ImportFromCsv, JwtToken, JwtSession, ApiTokenSession, ListBox, WebRTC, WebSocket, EventBus,
+	Browser, DataTable, Pagination, Navigation, DetailsSubArray, SelectAll, MultipleActionInTable, MultipleActionInDivList, MultiFilesInput, EditValue, FormDate, InputPeriod, ShoppingCart, FlashMessage, CountDown, ImportFromCsv, JwtToken, JwtSession, ApiTokenSession, ListBox, WebRTC, WebSocket, EventBus,
 	sleep, refresh, chr, ord, trim, empty,
 	Chartjs, GoogleCharts, GoogleRecaptcha, GoogleMap, OpenStreetMap
 };

package/multi_files_input.js

@@ -0,0 +1,109 @@
+class MultiFilesInput {
+	static init(fileInput, setFilesList, nbMaxFiles, maxFileSize) {
+		let filesList = [];
+		const formGroup = fileInput.closest('.form-group');
+
+		if (formGroup.find('.multi_files_input_dropzone').length === 0) {
+			fileInput.after(`
+					<div class="multi_files_input_dropzone border rounded p-3 text-center" style="background:#fafafa; cursor: pointer;">
+						<i class="fas fa-cloud-upload-alt fa-2x text-muted mb-1"></i>
+						<div class="small text-muted">Glissez-déposez vos fichiers ici ou cliquez pour sélectionner</div>
+					</div>
+				`);
+		}
+
+		if (formGroup.find('.multi_files_input_files_preview').length === 0) {
+			formGroup.append(`
+					<div class="multi_files_input_files_preview mt-2 d-flex flex-wrap gap-2 hide"></div>
+				`);
+		}
+
+		const dropzone = fileInput.parent().find('.multi_files_input_dropzone');
+		const filesPreview = fileInput.parent().find('.multi_files_input_files_preview');
+
+		fileInput.addClass('hide');
+
+		// Dropzone interactions
+		dropzone.on('click', function (e) {
+			e.preventDefault();
+			e.stopPropagation();
+			fileInput.trigger('click');
+		});
+		dropzone.on('dragover', function (e) {
+			e.preventDefault();
+			e.stopPropagation();
+			$(this).addClass('border-primary');
+		});
+		dropzone.on('dragleave', function (e) {
+			e.preventDefault();
+			e.stopPropagation();
+			$(this).removeClass('border-primary');
+		});
+		dropzone.on('drop', function (e) {
+			e.preventDefault();
+			e.stopPropagation();
+			$(this).removeClass('border-primary');
+			const dtFiles = (e.originalEvent.dataTransfer || {}).files || [];
+			handleFiles(Array.from(dtFiles));
+		});
+		fileInput.on('change', (e) => {
+			handleFiles(Array.from(e.target.files));
+			fileInput.val('');
+		});
+
+		function handleFiles(selected) {
+			for (const f of selected) {
+				if (filesList.length >= nbMaxFiles) {
+					FlashMessage.displayError('Maximum '+nbMaxFiles+' fichiers autorisés.');
+					break;
+				}
+				if (f.size > maxFileSize) {
+					FlashMessage.displayError('Le fichier '+f.name+' dépasse la taille maximale.');
+					continue;
+				}
+				filesList.push(f);
+				setFilesList(filesList);
+				renderPreview(f);
+			}
+		}
+
+		function renderPreview(file) {
+			const id = 'f_' + Math.random().toString(36).slice(2, 9);
+			const wrap = $(`
+					<div class="border rounded p-2 d-inline-flex align-items-center" data-file-id="${id}" style="background:white;">
+						<div class="me-2 preview-thumb" style="width:64px; height:48px; display:flex; align-items:center; justify-content:center; overflow:hidden;"></div>
+						<div class="small text-truncate" style="max-width:160px;">${file.name}</div>
+						<button type="button" class="btn-close btn-close-small ms-2" aria-label="Supprimer" style="margin-left:8px;"></button>
+					</div>
+				`);
+			filesPreview.append(wrap);
+			filesPreview.removeClass('hide');
+
+			// thumbnail for images
+			if (file.type.startsWith('image/')) {
+				const reader = new FileReader();
+				reader.onload = function (e) {
+					wrap.find('.preview-thumb').html(`<img src="${e.target.result}" alt="" style="max-width:100%; max-height:100%;" />`);
+				};
+				reader.readAsDataURL(file);
+			} else {
+				wrap.find('.preview-thumb').html(`<i class="fas fa-file fa-2x text-muted"></i>`);
+			}
+
+			wrap.find('.btn-close').on('click', function () {
+				const idx = $(this).closest('[data-file-id]').index();
+				// remove by reference: find corresponding file by name+size (best-effort)
+				const name = file.name, size = file.size;
+				filesList = filesList.filter(f => !(f.name === name && f.size === size));
+				setFilesList(filesList);
+				$(this).closest('[data-file-id]').remove();
+
+				if (filesList.length === 0) {
+					filesPreview.addClass('hide');
+				}
+			});
+		}
+	}
+}
+
+module.exports = { MultiFilesInput };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimatic/helpers-js",
-  "version": "1.3.3",
+  "version": "1.3.5",
   "main": "main.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"

package/visitor.js

@@ -21,43 +21,112 @@ class Browser {
 }
 
 class UserAgent {
-	static getOsDisplay(osName) {
-		let str = '';
-		if (osName === 'Windows') {
-			str += '<i class="fab fa-windows"></i>';
+	static getInfosDisplay(userAgentData, separator=' — ') {
+		let components = [];
+		if (null !== userAgentData['os']) {
+			components.push(userAgentData['os']);
 		}
-		if (osName === 'Linux') {
-			str += '<i class="fab fa-linux"></i>';
+		if (null !== userAgentData['browser']) {
+			components.push(userAgentData['browser']);
 		}
-		if (osName === 'macOS' || osName === 'iOS') {
-			str += '<i class="fab fa-apple"></i>';
+		if (null !== userAgentData['device']) {
+			components.push(userAgentData['device']);
 		}
-		if (osName === 'Android') {
-			str += '<i class="fab fa-android"></i>';
+		return components.join(separator);
+	}
+
+	static getData(userAgent) {
+		if (typeof UAParser == 'undefined') {
+			return;
 		}
-		str += ' '+osName;
-		return str.trim();
+
+		const parsedData = UAParser(userAgent);
+
+		let os = null;
+		if (typeof parsedData['os']['name'] != 'undefined') {
+			os = parsedData['os']['name'];
+			if (typeof parsedData['os']['version'] != 'undefined') {
+				os += ' '+parsedData['os']['version'];
+			}
+
+			os = os.trim();
+		}
+
+		let browser = null;
+		if (typeof parsedData['browser']['name'] != 'undefined') {
+			browser = parsedData['browser']['name'];
+			if (typeof parsedData['browser']['major'] != 'undefined') {
+				browser += ' '+parsedData['browser']['major'];
+			}
+			else if (typeof parsedData['browser']['version'] != 'undefined') {
+				browser += ' '+parsedData['browser']['version'];
+			}
+
+			browser = browser.trim();
+		}
+
+		let device = null;
+		if (typeof parsedData['device']['type'] != 'undefined') {
+			device = parsedData['device']['type'];
+			if (typeof parsedData['device']['vendor'] != 'undefined') {
+				device += ' '+parsedData['device']['vendor'];
+			}
+			if (typeof parsedData['device']['model'] != 'undefined') {
+				device += ' '+parsedData['device']['model'];
+			}
+
+			device = device.trim();
+		}
+
+		return {
+			os: os !== null && os !== '' ? os : null,
+			browser: browser !== null && browser !== '' ? browser : null,
+			device: device !== null && device !== '' ? device : null,
+		};
+	}
+
+	static getOsIcon(osName) {
+		osName = osName.toUpperCase();
+		if (osName === 'WINDOWS') {
+			return '<i class="fab fa-windows"></i>';
+		}
+		if (osName === 'LINUX') {
+			return '<i class="fab fa-linux"></i>';
+		}
+		if (osName === 'MACOS' || osName === 'IOS') {
+			return '<i class="fab fa-apple"></i>';
+		}
+		if (osName === 'ANDROID') {
+			return '<i class="fab fa-android"></i>';
+		}
+		return '';
+	}
+
+	static getOsDisplay(osName) {
+		return (UserAgent.getOsIcon()+' '+osName).trim();
 	}
 	
-	static getBrowserDisplay(browserName) {
-		let str = '';
-		if (browserName === 'Chrome') {
-			str += '<i class="fab fa-chrome"></i>';
+	static getBrowserIcon(browserName) {
+		browserName = browserName.toUpperCase();
+		if (browserName === 'CHROME') {
+			return '<i class="fab fa-chrome"></i>';
 		}
-		if (browserName === 'Firefox') {
-			str += '<i class="fab fa-firefox"></i>';
+		if (browserName === 'FIREFOX') {
+			return '<i class="fab fa-firefox"></i>';
 		}
-		if (browserName === 'Edge') {
-			str += '<i class="fab fa-edge"></i>';
+		if (browserName === 'EDGE') {
+			return '<i class="fab fa-edge"></i>';
 		}
-		if (browserName === 'Safari') {
-			str += '<i class="fab fa-safari"></i>';
+		if (browserName === 'SAFARI') {
+			return '<i class="fab fa-safari"></i>';
 		}
-		if (browserName === 'Opera') {
-			str += '<i class="fab fa-opera"></i>';
+		if (browserName === 'OPERA') {
+			return '<i class="fab fa-opera"></i>';
 		}
-		str += ' '+browserName;
-		return str.trim();
+		return '';
+	}
+	static getBrowserDisplay(browserName) {
+		return (UserAgent.getBrowserIcon(browserName)+' '+browserName).trim();
 	}
 
 	static getDeviceDisplay(device) {