@osimatic/helpers-js 1.5.5 → 1.5.7

package/chartjs.js

@@ -1,3 +1,6 @@
+const { toEl } = require('./util');
+const deepmerge = require('deepmerge');
+
 class Chartjs {
 	static init() {
 		if (typeof Chartjs.initialized == 'undefined' || Chartjs.initialized) {
@@ -37,8 +40,9 @@ class Chartjs {
 	}
 
 	static createStackedChart(chartDiv, chartData, title=null, options={}) {
-		chartDiv.empty();
-		new Chart(chartDiv.get(0).getContext("2d"), $.extend(true, {}, {
+		chartDiv = toEl(chartDiv);
+		chartDiv.innerHTML = '';
+		new Chart(chartDiv.getContext("2d"), deepmerge({
 			type: "bar",
 			data: {
 				labels: chartData.labels,
@@ -86,8 +90,9 @@ class Chartjs {
 	}
 
 	static createBarChart(chartDiv, chartData, title=null, options={}) {
-		chartDiv.empty();
-		new Chart(chartDiv.get(0).getContext("2d"), $.extend(true, {}, {
+		chartDiv = toEl(chartDiv);
+		chartDiv.innerHTML = '';
+		new Chart(chartDiv.getContext("2d"), deepmerge({
 			type: "bar",
 			data: {
 				labels: chartData.labels,
@@ -102,15 +107,11 @@ class Chartjs {
 						grid: {
 							display: false
 						},
-						/*ticks: {
-							font: { size: 12 }
-						}*/
 					},
 					y: {
 						beginAtZero: true,
 						ticks: {
 							precision: 0
-							//stepSize: 10, font: { size: 12 }
 						},
 						grid: {
 							color: "#eee"
@@ -132,7 +133,6 @@ class Chartjs {
 					tooltip: {
 						callbacks: {
 							label: context => context.dataset.label + ' : ' + context.parsed.y
-							//label: (context) => `${context.formattedValue} pointages`
 						}
 					}
 				},
@@ -147,8 +147,9 @@ class Chartjs {
 	static createLineChart(chartDiv, chartData, title=null, options={}) {
 		Chartjs.init();
 
-		chartDiv.empty();
-		new Chart(chartDiv.get(0).getContext("2d"), $.extend(true, {}, {
+		chartDiv = toEl(chartDiv);
+		chartDiv.innerHTML = '';
+		new Chart(chartDiv.getContext("2d"), deepmerge({
 			type: "line",
 			data: {
 				labels: chartData.labels,
@@ -199,8 +200,9 @@ class Chartjs {
 	static createDoughnutChart(chartDiv, chartData, title=null, options={}) {
 		Chartjs.init();
 
-		chartDiv.empty();
-		new Chart(chartDiv.get(0).getContext("2d"), $.extend(true, {}, {
+		chartDiv = toEl(chartDiv);
+		chartDiv.innerHTML = '';
+		new Chart(chartDiv.getContext("2d"), deepmerge({
 			type: "doughnut",
 			data: {
 				labels: chartData.labels,
@@ -256,10 +258,7 @@ class Chartjs {
 	static groupByPeriod(data, period, metrics) {
 		const grouped = {};
 
-		//data = Object.entries(dataObj).map(([date, values]) => ({ date, ...values }));
-
 		Object.entries(data).forEach(([date, values]) => {
-			//data.forEach(entry => {
 			const d = new Date(date);
 			let key;
 

package/count_down.js

@@ -1,23 +1,23 @@
+const { toEl } = require('./util');
+
 class CountDown {
 
 	static init(div, options = {}) {
+		div = toEl(div);
 		const {
 			onRefreshData,
 			labelNextUpdate = 'Prochaine mise à jour',
 			labelDoUpdate = 'Mettre à jour',
 		} = options;
 
-		if (!div.length) {
+		if (!div) {
 			return;
 		}
 
-		div
-			.append('<div class="count_down_title">'+labelNextUpdate+'</div>')
-			.append('<div class="count_down_progress"><div class="count_down_current"></div></div>')
-			.append('<div class="count_down_text"></div>')
-			//.append('<div class="cl"></div>')
-			.append('<div class="count_down_link"><a href="#" data-loading-text="<i class=\'fa fa-circle-notch fa-spin\'></i>">'+labelDoUpdate+'</a></div>')
-		;
+		div.insertAdjacentHTML('beforeend', '<div class="count_down_title">'+labelNextUpdate+'</div>');
+		div.insertAdjacentHTML('beforeend', '<div class="count_down_progress"><div class="count_down_current"></div></div>');
+		div.insertAdjacentHTML('beforeend', '<div class="count_down_text"></div>');
+		div.insertAdjacentHTML('beforeend', '<div class="count_down_link"><a href="#">'+labelDoUpdate+'</a></div>');
 
 		let alreadyMakingRequest = false;
 		let secondsBefRefresh = 10;
@@ -25,6 +25,10 @@ class CountDown {
 		let currentMillis = 0;
 		let currentSecond = 0;
 
+		function getLinkA() {
+			return div.querySelector('.count_down_link a');
+		}
+
 		function refreshData() {
 			currentMillis = 0;
 
@@ -36,27 +40,31 @@ class CountDown {
 
 			if (typeof onRefreshData == 'function') {
 				alreadyMakingRequest = true;
-				div.find('.count_down_link a').attr('disabled', true).button('loading');
+				const linkA = getLinkA();
+				if (linkA) linkA.disabled = true;
 
 				onRefreshData(
 					// completeCallback
 					() => {
 						alreadyMakingRequest = false;
-						div.find('.count_down_link a').attr('disabled', false).button('reset');
+						const linkA = getLinkA();
+						if (linkA) linkA.disabled = false;
 					}
 				);
 			}
 		}
 
-		if (div.find('.count_down_link a').length) {
-			div.find('.count_down_link a').click(() => {
+		const linkA = getLinkA();
+		if (linkA) {
+			linkA.addEventListener('click', (e) => {
+				e.preventDefault();
 				refreshData();
-				return false;
 			});
 		}
 
 		setInterval(() => {
-			if (!div.find('.count_down_link a').length || !div.find('.count_down_link a').prop('disabled')) {
+			const linkA = getLinkA();
+			if (!linkA || !linkA.disabled) {
 				currentMillis += refreshIntervalMillis;
 			}
 			else {
@@ -65,9 +73,8 @@ class CountDown {
 
 			currentSecond = parseInt(currentMillis / 1000);
 
-			//countDownRefresh();
-			var divCountDownText;
-			var divCountDownCurrentSizePx;
+			let divCountDownText;
+			let divCountDownCurrentSizePx;
 
 			if (currentSecond >= secondsBefRefresh) {
 				divCountDownCurrentSizePx = 120;
@@ -78,11 +85,13 @@ class CountDown {
 				divCountDownText = (secondsBefRefresh-currentSecond) + 's';
 			}
 
-			if (div.find('.count_down_current').length) {
-				div.find('.count_down_current').width(divCountDownCurrentSizePx);
+			const countDownCurrent = div.querySelector('.count_down_current');
+			if (countDownCurrent) {
+				countDownCurrent.style.width = divCountDownCurrentSizePx + 'px';
 			}
-			if (div.find('.count_down_text').length) {
-				div.find('.count_down_text').html(divCountDownText);
+			const countDownText = div.querySelector('.count_down_text');
+			if (countDownText) {
+				countDownText.innerHTML = divCountDownText;
 			}
 
 			if (currentSecond >= secondsBefRefresh) {

package/details_sub_array.js

@@ -1,8 +1,10 @@
 const { HTTPClient } = require('./http_client');
+const { toEl } = require('./util');
 
 class DetailsSubArray {
 
 	static initDetailsLink(table, options = {}) {
+		table = toEl(table);
 		const {
 			onSuccess,
 			onError,

package/file.js

@@ -1,3 +1,4 @@
+const { HTTPClient } = require('./http_client');
 
 class File {
 	static download(data, contentType, contentDisposition) {
@@ -102,30 +103,33 @@ class Img {
 	}
 
 	static initImg(div) {
-		div.find('.asynchronously_img').each(function(idx, img) {
-			Img.loadImgUrl($(img).data('url'), $(img));
+		div.querySelectorAll('.asynchronously_img').forEach(img => {
+			Img.loadImgUrl(img.dataset.url, img);
 		});
 	}
 
 	static loadImgUrl(url, img) {
-		$.ajax({
-			type: 'GET',
-			url: url,
-			headers: HTTPClient.getHeaders(true),
-			cache: false,
-			xhrFields: {responseType: 'blob'},
-			success: (data) => {
-				// var urlCreator = window.URL || window.webkitURL;
-				// $(img).attr('src', urlCreator.createObjectURL(data));
-				Img.setBlobToImg($(img), data);
-			},
-			error: (jqxhr, status, errorThrown) => HTTPClient.logJqueryRequestFailure(jqxhr, status, errorThrown),
-		});
+		fetch(url, {
+			method: 'GET',
+			headers: HTTPClient.getHeaders(false),
+			cache: 'no-cache',
+		})
+		.then(response => {
+			if (!response.ok) {
+				HTTPClient.logRequestFailure(response, null);
+				return null;
+			}
+			return response.blob();
+		})
+		.then(blob => {
+			if (blob) Img.setBlobToImg(img, blob);
+		})
+		.catch(error => console.error('Error loading image:', error));
 	}
 
 	static setBlobToImg(img, blob) {
 		// Validation de l'élément img
-		if (!img || !img.length) {
+		if (!img) {
 			console.error('Invalid img element provided to setBlobToImg');
 			return;
 		}
@@ -138,8 +142,7 @@ class Img {
 
 		try {
 			let urlCreator = window.URL || window.webkitURL;
-			let objectURL = urlCreator.createObjectURL(blob);
-			img.attr('src', objectURL);
+			img.src = urlCreator.createObjectURL(blob);
 		} catch (error) {
 			console.error('Error creating object URL from blob:', error);
 		}

package/form_date.js

@@ -494,108 +494,6 @@ class FormDate {
 		if (monthSelect) monthSelect.value = month;
 		if (yearSelect) yearSelect.value = year;
 	}
-
-
-
-	/*
-	// deprecated
-
-	static majSelectPeriode(select) {
-		if (select.find(':selected').attr('value') === 'perso') {
-			select.parent().parent().next().removeClass('hide');
-		}
-		else {
-			select.parent().parent().next().addClass('hide');
-		}
-	}
-
-	static majSelectCompare() {
-		if ($('form select#periodeCompare').length === 0) {
-			return;
-		}
-
-		let listValues = [];
-		let periodeSelected = $('form select.periode :selected').attr('value');
-		let selectCompare = $('form select#periodeCompare');
-		let periodeCompareSelected = selectCompare.find(':selected').attr('value');
-		let valueDefault = null;
-
-		selectCompare.find('option').removeAttr('disabled');
-
-		$.each(listePeriodeCompare, function (idx, tabListPeriode) {
-			if (idx != 0) {
-				let listKeyPeriode = array_keys(tabListPeriode.list);
-				if (in_array(periodeSelected, listKeyPeriode)) {
-					listValues = listKeyPeriode;
-					valueDefault = listKeyPeriode[1];
-				}
-				else {
-					selectCompare.find('option[value="' + listKeyPeriode[0] + '"]').parent().children().attr('disabled', 'disabled');
-				}
-			}
-		});
-
-		if (periodeSelected === 'perso') {
-			valueDefault = 'perso';
-		}
-		else if (periodeCompareSelected !== 'perso' && in_array(periodeCompareSelected, listValues)) {
-			valueDefault = periodeCompareSelected;
-		}
-		selectCompare.find('option[value="' + valueDefault + '"]').attr('selected', 'selected');
-
-		FormDate.majSelectPeriode(selectCompare);
-	}
-
-	static selectFormDateToday(lien) {
-		let date = new Date();
-		FormDate.selectFormDate(lien, date.getDate(), (date.getMonth() + 1), date.getFullYear());
-	}
-	static selectFormDateDayMoinsNb(lien, nbJoursMoins) {
-		let date = new Date();
-		date.setDate(date.getDate() - nbJoursMoins);
-		FormDate.selectFormDate(lien, date.getDate(), (date.getMonth() + 1), date.getFullYear());
-	}
-	static selectFormDateCurrentMonth(lien) {
-		let date = new Date();
-		FormDate.selectFormDate(lien, -1, (date.getMonth() + 1), date.getFullYear());
-	}
-	static selectFormDateMonthMoinsNb(lien, nbMoisMoins) {
-		let date = new Date();
-		date.setDate(1);
-		date.setMonth(date.getMonth() - nbMoisMoins);
-		FormDate.selectFormDate(lien, -1, (date.getMonth() + 1), date.getFullYear());
-	}
-	static selectFormDateCurrentYear(lien) {
-		let today = new Date();
-		FormDate.selectFormDate(lien, -1, -1, today.getFullYear());
-	}
-	static selectFormDateYearMoinsNb(lien, nbAnneesMoins) {
-		let today = new Date();
-		FormDate.selectFormDate(lien, -1, -1, today.getFullYear() - nbAnneesMoins);
-	}
-	static selectFormDateAddDayFromSelectedDay(lien, nbDaysAdded) {
-		let date = FormDate.getDateObjectSelected(lien);
-		date.setDate(date.getDate() + nbDaysAdded);
-		FormDate.selectFormDate(lien, date.getDate(), (date.getMonth() + 1), date.getFullYear());
-	}
-	static getDateObjectSelected(lien) {
-		let selectorDay = '#' + (lien.parent().prev().prev().prev().prev().attr('id')) + ' option:selected';
-		let selectorMonth = '#' + (lien.parent().prev().prev().prev().attr('id')) + ' option:selected';
-		let selectorYear = '#' + (lien.parent().prev().prev().attr('id')) + ' option:selected';
-		if ($(selectorDay).length > 0 && $(selectorMonth).length > 0 && $(selectorYear).length > 0) {
-			return new Date($(selectorYear).attr('value'), $(selectorMonth).attr('value') - 1, $(selectorDay).attr('value'));
-		}
-		return new Date();
-	}
-	static selectFormDate(lien, day, month, year) {
-		let selectorDay = '#' + (lien.parent().prev().prev().prev().prev().attr('id')) + ' option[value=' + day + ']';
-		let selectorMonth = '#' + (lien.parent().prev().prev().prev().attr('id')) + ' option[value=' + month + ']';
-		let selectorYear = '#' + (lien.parent().prev().prev().attr('id')) + ' option[value=' + year + ']';
-		if ($(selectorDay).length > 0) $(selectorDay).prop('selected', 'selected');
-		if ($(selectorMonth).length > 0) $(selectorMonth).prop('selected', 'selected');
-		if ($(selectorYear).length > 0) $(selectorYear).prop('selected', 'selected');
-	}
-	*/
 }
 
 module.exports = { FormDate, InputPeriod };

package/form_helper.js

@@ -1,5 +1,8 @@
+const { toEl } = require('./util');
+
 class FormHelper {
 	static init(form, onSubmitCallback, submitButton=null) {
+		form = toEl(form); submitButton = toEl(submitButton);
 		FormHelper.reset(form, submitButton);
 		submitButton = null != submitButton ? submitButton : form.querySelector('button[name="validate"]');
 		submitButton.onclick = function(e) {
@@ -14,6 +17,7 @@ class FormHelper {
 	}
 
 	static reset(form, submitButton=null) {
+		form = toEl(form); submitButton = toEl(submitButton);
 		submitButton = null != submitButton ? submitButton : form.querySelector('button[name="validate"]');
 		form.querySelectorAll('input[name]:not([type="checkbox"]):not([type="radio"]), select:not(.selectpicker), textarea').forEach(el => {
 			el.value = '';
@@ -26,6 +30,7 @@ class FormHelper {
 	}
 
 	static populateForm(form, data) {
+		form = toEl(form);
 		const employeesDisplayType = form.querySelector('[name="employees_display_type"][value="NONE"]');
 		if (employeesDisplayType) employeesDisplayType.checked = true; //todo à retirer
 
@@ -64,6 +69,7 @@ class FormHelper {
 
 
 	static getFormData(form) {
+		form = toEl(form);
 		return new FormData(form);
 	}
 
@@ -77,6 +83,7 @@ class FormHelper {
 	}
 
 	static getFormDataQueryString(form) {
+		form = toEl(form);
 		return new URLSearchParams(new FormData(form)).toString();
 	}
 
@@ -87,6 +94,7 @@ class FormHelper {
 	// ------------------------------------------------------------
 
 	static getInputValue(input) {
+		input = toEl(input);
 		if (typeof input == 'undefined' || input == null) {
 			return null;
 		}
@@ -98,10 +106,12 @@ class FormHelper {
 	}
 
 	static getLinesOfTextarea(textarea) {
+		textarea = toEl(textarea);
 		return textarea.value.replace(/(\r\n|\n|\r)/g, "\n").split("\n").filter(word => word.length > 0);
 	}
 
 	static setOnInputChange(input, callback, doneTypingInterval=700) {
+		input = toEl(input);
 		// setup before functions
 		let typingTimer;  // timer identifier
 
@@ -128,26 +138,32 @@ class FormHelper {
 	// ------------------------------------------------------------
 
 	static resetSelectOption(form, selectName) {
+		form = toEl(form);
 		form.querySelectorAll('select[name="'+selectName+'"] option').forEach(o => {
 			o.disabled = false;
 			o.selected = false;
 		});
 	}
 	static setSelectedSelectOption(form, selectName, optionValue) {
+		form = toEl(form);
 		const opt = form.querySelector('select[name="'+selectName+'"] option[value="'+optionValue+'"]');
 		if (opt) opt.selected = true;
 	}
 	static setSelectedSelectOptions(form, selectName, optionValues) {
+		form = toEl(form);
 		optionValues.forEach(id => FormHelper.setSelectedSelectOption(form, selectName, id));
 	}
 	static disableSelectOption(form, selectName, optionValue) {
+		form = toEl(form);
 		const opt = form.querySelector('select[name="'+selectName+'"] option[value="'+optionValue+'"]');
 		if (opt) opt.disabled = true;
 	}
 	static disableSelectOptions(form, selectName, optionValues) {
+		form = toEl(form);
 		optionValues.forEach(id => FormHelper.disableSelectOption(form, selectName, id));
 	}
 	static countSelectOptions(form, selectName) {
+		form = toEl(form);
 		return form.querySelectorAll('select[name="'+selectName+'"] option:not([disabled])').length;
 	}
 
@@ -180,6 +196,7 @@ class FormHelper {
 	// ------------------------------------------------------------
 
 	static initTypeFields(form) {
+		form = toEl(form);
 		if (typeof Modernizr != 'undefined') {
 			if (!Modernizr.inputtypes.date) {
 				form.querySelectorAll('input[type="date"]').forEach(el => el.style.maxWidth = '120px');
@@ -215,6 +232,7 @@ class FormHelper {
 	}
 
 	static hideField(inputOrSelect) {
+		inputOrSelect = toEl(inputOrSelect);
 		inputOrSelect.closest('.form-group')?.classList.add('hide');
 	}
 
@@ -271,6 +289,7 @@ class FormHelper {
 	}
 
 	static hideFormErrors(form) {
+		form = toEl(form);
 		form.querySelectorAll('div.form_errors').forEach(el => el.remove());
 		return form;
 	}
@@ -296,6 +315,7 @@ class FormHelper {
 	}
 
 	static displayFormErrors(form, btnSubmit, errors, errorWrapperDiv=null) {
+		form = toEl(form); btnSubmit = toEl(btnSubmit); errorWrapperDiv = toEl(errorWrapperDiv);
 		this.displayFormErrorsFromText(form, this.getFormErrorText(errors), errorWrapperDiv);
 		if (btnSubmit != null) {
 			FormHelper.buttonLoader(btnSubmit, 'reset');
@@ -303,6 +323,7 @@ class FormHelper {
 	}
 
 	static displayFormErrorsFromText(form, errorLabels, errorWrapperDiv=null) {
+		form = toEl(form); errorWrapperDiv = toEl(errorWrapperDiv);
 		let errorDiv = '<div class="alert alert-danger form_errors">'+errorLabels+'</div>';
 
 		if (null != errorWrapperDiv) {
@@ -342,6 +363,7 @@ class FormHelper {
 	// ------------------------------------------------------------
 
 	static buttonLoader(button, action) {
+		button = toEl(button);
 		if (action === 'start' || action === 'loading') {
 			if (button.disabled) {
 				return button;
@@ -387,6 +409,7 @@ class ArrayField {
 		get_errors_callback: null,
 
 	}) {
+		formGroupDiv = toEl(formGroupDiv);
 		function isOptionDefined(optionName) {
 			return typeof options[optionName] != 'undefined' && null !== options[optionName];
 		}
@@ -694,6 +717,7 @@ class ArrayField {
 
 class EditValue {
 	static init(valueDiv, onSubmitCallback, getInputCallback) {
+		valueDiv = toEl(valueDiv);
 		const link = document.createElement('a');
 		link.href = '#';
 		link.className = 'text-warning';

package/google_charts.js

@@ -1,3 +1,5 @@
+const { toEl } = require('./util');
+
 class GoogleCharts {
 	static init(onLoadCallback) {
 		// google.load("visualization", "1", {packages:["corechart"]});
@@ -42,6 +44,7 @@ class GoogleCharts {
 	}
 
 	static draw(div, options) {
+		div = toEl(div);
 		const {
 			chart_type: chartType,
 			title: title,

package/import_from_csv.js

@@ -1,4 +1,5 @@
 require('./string');
+const { toEl } = require('./util');
 
 class ImportFromCsv {
 
@@ -16,6 +17,7 @@ class ImportFromCsv {
 	}
 
 	static initForm(div, options = {}) {
+		div = toEl(div);
 		const {
 			importColumns,
 			requestImportData,
@@ -169,6 +171,7 @@ class ImportFromCsv {
 	}
 
 	static displayData(divResult, data, header, formMatching) {
+		divResult = toEl(divResult);
 		let table = divResult.querySelector('table');
 		if (!table) {
 			divResult.insertAdjacentHTML('beforeend', '<table class="table table-sm table-bordered"></table>');

package/location.js

@@ -1,6 +1,7 @@
 
 const Address = require('ilib/lib/Address');
 const AddressFmt = require('ilib/lib/AddressFmt');
+const { toEl } = require('./util');
 
 class Country {
 	static setFlagsPath(flagsPath) {
@@ -15,17 +16,15 @@ class Country {
 	}
 
 	static fillCountrySelect(select, defaultValue=null, countriesList=null, addNoneValue=false, noneLabel='- Aucun -') {
-		if (select.children().length === 0) {
+		select = toEl(select);
+		if (select.children.length === 0) {
 			if (addNoneValue) {
-				select.append('<option value="">'+noneLabel+'</option>');
+				select.insertAdjacentHTML('beforeend', '<option value="">'+noneLabel+'</option>');
 			}
-			Object.entries(null != countriesList ? countriesList : Country.getCountries()).forEach(([countryCode, countryName]) => select.append('<option value="' + countryCode + '">' + countryName + '</option>'));
+			Object.entries(null != countriesList ? countriesList : Country.getCountries()).forEach(([countryCode, countryName]) => select.insertAdjacentHTML('beforeend', '<option value="' + countryCode + '">' + countryName + '</option>'));
 		}
 		if (null != defaultValue) {
-			select.val(defaultValue);
-		}
-		if (typeof select.selectpicker != 'undefined') {
-			select.selectpicker('refresh');
+			select.value = defaultValue;
 		}
 	}
 	static getCountryName(countryCode) {
@@ -303,8 +302,9 @@ class Country {
 
 class PostalAddress {
 	static setAutocomplete(input, onPlaceChanged) {
+		input = toEl(input);
 		const autocomplete = new google.maps.places.Autocomplete(
-			input[0],
+			input,
 			{types: ['geocode']}
 		);
 
@@ -316,7 +316,7 @@ class PostalAddress {
 
 		autocomplete.addListener('place_changed', function() {
 			let place = autocomplete.getPlace();
-			input.val('');
+			input.value = '';
 			onPlaceChanged(place);
 		});
 
@@ -415,13 +415,10 @@ class PostalAddress {
 				addressData.countryCode = resultAddressComponent.short_name;
 			}
 		});
-		var htmlAddress = $(googleApiResult.adr_address);
-		// console.log(googleApiResult.adr_address);
-		// console.log(htmlAddress);
-		// console.log(htmlAddress.find('span.street-address'));
-		//console.log($(htmlAddress[0]).text());
-		if (htmlAddress.length && $(htmlAddress[0]).length) {
-			addressData.streetAddress = $(htmlAddress[0]).text();
+		const tmp = document.createElement('div');
+		tmp.innerHTML = googleApiResult.adr_address || '';
+		if (tmp.children.length > 0) {
+			addressData.streetAddress = tmp.children[0].textContent;
 		}
 		else {
 			addressData.streetAddress = streetNumber+' '+route;