@osimatic/helpers-js 1.5.4 → 1.5.6

package/media.js

@@ -1,3 +1,6 @@
+const { FormHelper } = require('./form_helper');
+const { HTTPClient } = require('./http_client');
+
 class AudioMedia {
 
 	static getPlayer(playUrl) {
@@ -6,37 +9,42 @@ class AudioMedia {
 
 	static initPlayLinks(div) {
 		// Affiche un lecteur audio
-		div.find('.play_link').off('click').click(function () {
-			let audio = $(AudioMedia.getPlayer($(this).data('play_url')));
-			audio[0].play();
-			$(this).after(audio);
-			$(this).remove();
-			return false;
+		div.querySelectorAll('.play_link').forEach(link => {
+			link.addEventListener('click', function(e) {
+				e.preventDefault();
+				const template = document.createElement('template');
+				template.innerHTML = AudioMedia.getPlayer(this.dataset.play_url);
+				const audio = template.content.firstChild;
+				audio.play();
+				this.insertAdjacentElement('afterend', audio);
+				this.remove();
+			});
 		});
 
-		div.find('.play_asynchronously_link').off('click').click(function () {
-			//if (FormHelper.buttonLoader($(this), 'loading') != null) {
-			let button = FormHelper.buttonLoader($(this), 'loading');
-			AudioMedia.playAudioUrl($(this).data('url'), () => FormHelper.buttonLoader(button, 'reset'));
-			//} else {
-			//	let button = $(this).attr('disabled', true).button('loading');
-			//	AudioMedia.playAudioUrl($(this).data('url'), () => button.attr('disabled', false).button('reset'));
-			//}
-			return false;
+		div.querySelectorAll('.play_asynchronously_link').forEach(link => {
+			link.addEventListener('click', function(e) {
+				e.preventDefault();
+				let button = FormHelper.buttonLoader(this, 'loading');
+				AudioMedia.playAudioUrl(this.dataset.url, () => FormHelper.buttonLoader(button, 'reset'));
+			});
 		});
 
-		div.find('.modal_play_link').off('click').click(function () {
-			$('#modal_voice_message_play').on('show.bs.modal', function (event) {
-				let button = $(event.relatedTarget);
-				let modal = $(this);
-
-				let player = modal.find('audio');
-				player.prop('src', button.data('play_url'));
-				player.play();
+		div.querySelectorAll('.modal_play_link').forEach(link => {
+			link.addEventListener('click', function(e) {
+				e.preventDefault();
+				const modalEl = document.getElementById('modal_voice_message_play');
+				if (!modalEl) return;
+				const currentLink = this;
+				modalEl.addEventListener('show.bs.modal', function handler(event) {
+					modalEl.removeEventListener('show.bs.modal', handler);
+					const player = modalEl.querySelector('audio');
+					if (player) {
+						player.src = (event.relatedTarget || currentLink).dataset.play_url;
+						player.play();
+					}
+				});
+				bootstrap.Modal.getOrCreateInstance(modalEl).show(this);
 			});
-
-			$('#modal_voice_message_play').modal('show', $(this));
-			return false;
 		});
 	}
 
@@ -117,12 +125,12 @@ class AudioMedia {
 
 class VideoMedia {
 	static initPlayPauseClick(videoElement) {
-		$(videoElement).click(function(e) {
+		videoElement.addEventListener('click', function(e) {
 			// handle click if not Firefox (Firefox supports this feature natively)
 			if (typeof InstallTrigger === 'undefined') {
 				// get click position
-				let clickY = (e.pageY - $(this).offset().top);
-				let height = parseFloat( $(this).height() );
+				let clickY = e.pageY - (this.getBoundingClientRect().top + window.scrollY);
+				let height = this.offsetHeight;
 
 				// avoids interference with controls
 				if (clickY > 0.82*height) return;

package/multi_files_input.js

@@ -1,8 +1,10 @@
 require('./string');
 const { FlashMessage } = require('./flash_message');
+const { toEl } = require('./util');
 
 class MultiFilesInput {
 	static init(fileInput, setFilesList, nbMaxFiles, maxFileSize) {
+		fileInput = toEl(fileInput);
 		let filesList = [];
 		const formGroup = fileInput.closest('.form-group');
 

package/multiple_action_in_table.js

@@ -1,3 +1,4 @@
+const { toEl } = require('./util');
 
 class MultipleActionInTable {
 
@@ -5,6 +6,7 @@ class MultipleActionInTable {
 	// Idempotent : sans effet si les colonnes existent déjà.
 	// Doit être appelé AVANT l'initialisation DataTable.
 	static initCols(table, cellSelector = 'select') {
+		table = toEl(table);
 		if (!table.classList.contains('table-action_multiple')) {
 			return;
 		}
@@ -12,8 +14,9 @@ class MultipleActionInTable {
 			return;
 		}
 
-		if (!table.querySelector('thead tr th[data-key="select"]')) {
-			table.querySelector('thead tr').insertAdjacentHTML('afterbegin', '<th class="' + cellSelector + '" data-key="select"></th>');
+		const theadTr = table.querySelector('thead tr');
+		if (theadTr && !theadTr.querySelector('th[data-key="select"]')) {
+			theadTr.insertAdjacentHTML('afterbegin', '<th class="' + cellSelector + '" data-key="select"></th>');
 		}
 		table.querySelectorAll('tbody tr:not(.no_items)').forEach(tr => {
 			if (!tr.querySelector('td.select')) {
@@ -25,6 +28,7 @@ class MultipleActionInTable {
 	// Initialise les colonnes (via initCols) puis branche les event handlers.
 	// Peut être appelé après l'initialisation DataTable.
 	static init(table, options = {}) {
+		table = toEl(table);
 		const { cellSelector = 'select', imgArrow = '' } = options;
 
 		if (!table.classList.contains('table-action_multiple')) {
@@ -140,6 +144,7 @@ class MultipleActionInTable {
 class MultipleActionInDivList {
 // init checkbox
 	static init(contentDiv, options = {}) {
+		contentDiv = toEl(contentDiv);
 		const { imgArrow = '' } = options;
 
 		let buttonsDiv = MultipleActionInDivList.getButtonsDiv(contentDiv);
@@ -253,115 +258,4 @@ class MultipleActionInDivList {
 	}
 }
 
-module.exports = { MultipleActionInTable, MultipleActionInDivList };
-
-/*
-// init checkbox
-function initTableActionMultiple(table) {
-	if (!table.hasClass('table-action_multiple')) {
-		return;
-	}
-
-	var divBtn = tableActionMultipleGetDivBtn(table);
-	if (divBtn == null) {
-		return;
-	}
-
-	if (table.find('thead tr th[data-key="select"]').length === 0) {
-		table.find('thead tr').prepend($('<th class="select no-sort" data-key="select"></th>'));
-	}
-	table.find('tbody tr:not(.no_items)').each(function(idx, tr) {
-		if ($(tr).find('td.select').length === 0) {
-			$(tr).prepend($('<td class="select"><input type="checkbox" class="action_multiple_checkbox" name="'+$(tr).data('action_multiple_input_name')+'" value="'+$(tr).data('action_multiple_item_id')+'"></td>'));
-		}
-	});
-
-	table.find('input.action_multiple_checkbox').each(function(idx, el) {
-		var th = $(el).closest('table').find('thead tr th').first();
-		if (th.find('input').length === 0) {
-			// console.log(th);
-			th.html('<input type="checkbox" class="action_multiple_check_all" />');
-			// th.html('Coucou');
-		}
-	});
-
-	table.find('input.action_multiple_checkbox').change(function() {
-		majCheckbox(table);
-	});
-
-	table.find('input.action_multiple_check_all').off('click').click(function() {
-		var table = $(this).closest('table');
-		var checkbox = table.find('input.action_multiple_checkbox');
-		var checkboxChecked = table.find('input.action_multiple_checkbox:checked');
-		if (checkbox.length === checkboxChecked.length) {
-			checkbox.prop('checked', false);
-		}
-		else {
-			checkbox.prop('checked', true);
-		}
-		majCheckbox(table);
-	});
-}
-
-function majCheckbox(table) {
-	showButtonsAction(table);
-
-	var allCheckbox = table.find('input.action_multiple_checkbox');
-	var allCheckboxChecked = table.find('input.action_multiple_checkbox:checked');
-	var checkboxSelectAll = table.find('thead tr th input.action_multiple_check_all');
-	if (allCheckbox.length === allCheckboxChecked.length) {
-		checkboxSelectAll.prop('checked', true);
-	}
-	else {
-		checkboxSelectAll.prop('checked', false);
-	}
-}
-
-function tableActionMultipleGetDivBtn(table) {
-	var divTableResponsive = table.parent();
-	var divBtn = divTableResponsive.next();
-	if (divBtn.hasClass('action_multiple_buttons')) {
-		return divBtn;
-	}
-	divBtn = divTableResponsive.parent().parent().parent().next();
-	if (divBtn.hasClass('action_multiple_buttons')) {
-		return divBtn;
-	}
-	return null;
-}
-
-function showButtonsAction(table) {
-	var divBtn = tableActionMultipleGetDivBtn(table);
-	if (divBtn == null) {
-		return;
-	}
-
-	// console.log(divBtn);
-	//var nbItems = $('input[name="' + checkbox.attr('name') + '"]:checked').length;
-	var nbItems = table.find('input.action_multiple_checkbox:checked').length;
-
-	if (nbItems > 0 && divBtn.is(':hidden')) {
-		divBtn.removeClass('hide');
-	}
-	else if (nbItems === 0 && divBtn.is(':visible')) {
-		divBtn.addClass('hide');
-	}
-
-	// affichage aucune action possible si aucun bouton n'est visible
-	if (divBtn.is(':visible')) {
-		divBtn.find('span.no_button').remove();
-		if (divBtn.find('button:visible, a:visible').length === 0) {
-			divBtn.find('img').after('<span class="no_button"><em>aucune action possible</em></span>');
-		}
-	}
-}
-
-$(function() {
-	$('.action_multiple_buttons').prepend($('<img src="'+ROOT_PATH+DOSSIER_IMAGES+'arrow_ltr.png" alt="" /> &nbsp;'));
-	$('.action_multiple_buttons').append($('<br/><br/>'));
-
-	$('table.table-action_multiple').each(function(idx, table) {
-		initTableActionMultiple($(table));
-	});
-});
-*/
+module.exports = { MultipleActionInTable, MultipleActionInDivList };

package/open_street_map.js

@@ -1,4 +1,5 @@
 const L = require('leaflet');
+const { toEl } = require('./util');
 
 /**
  * https://leafletjs.com/
@@ -8,6 +9,7 @@ const L = require('leaflet');
 class OpenStreetMap {
 
 	constructor(mapContainer, options={}) {
+		mapContainer = toEl(mapContainer);
 		/*let [lat, lng] = button.data('coordinates').split(',');
 		let map = L.map('modal_map_canvas2').setView([lat, lng], 17);
 
@@ -27,6 +29,7 @@ class OpenStreetMap {
 	}
 
 	static createMap(mapContainer, options={}) {
+		mapContainer = toEl(mapContainer);
 		if (!mapContainer.length) {
 			return null;
 		}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@osimatic/helpers-js",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "main": "main.js",
   "scripts": {
     "test": "jest",

package/paging.js

@@ -2,17 +2,21 @@
 //Bootstrap class pagination https://getbootstrap.com/docs/3.3/components/#pagination
 
 const { UrlAndQueryString } = require('./network');
+const { toEl } = require('./util');
 
 class Pagination {
 	static paginateCards(div, nbItemsPerPage) {
+		div = toEl(div);
 		Pagination.paginate(div, div.querySelectorAll('.pagination_item'), nbItemsPerPage, null);
 	}
 
 	static paginateTable(table, select=null) {
+		table = toEl(table); select = toEl(select);
 		Pagination.paginate(table, table.querySelectorAll('tbody tr:not(.hide)'), parseInt(table.dataset.max_rows), select);
 	}
 
 	static paginate(div, items, nbItemsPerPage, select=null, labelDisplayAll=null) {
+		div = toEl(div); select = toEl(select);
 		let maxItems = nbItemsPerPage;
 
 		if (!div) {

package/select_all.js

@@ -1,8 +1,11 @@
+const { toEl } = require('./util');
+
 class SelectAll {
 
 	// Dans un form-group
 
 	static initLinkInFormGroup(link) {
+		link = toEl(link);
 		const linkClone = link.cloneNode(true);
 		link.parentElement.replaceChild(linkClone, link);
 		linkClone.addEventListener('click', function(e) {
@@ -43,6 +46,7 @@ class SelectAll {
 	// Dans tableau
 
 	static initInTable(table) {
+		table = toEl(table);
 		const inputCheckAll = table.querySelector('tr input.check_all');
 		if (!inputCheckAll) {
 			return;
@@ -78,6 +82,7 @@ class SelectAll {
 	// Dans un div
 
 	static initDiv(contentDiv) {
+		contentDiv = toEl(contentDiv);
 		contentDiv.querySelectorAll('input.check_all').forEach(inputCheckAll => {
 			const div = inputCheckAll.closest('div.checkbox_with_check_all');
 

package/sortable_list.js

@@ -1,5 +1,8 @@
+const { toEl } = require('./util');
+
 class SortableList {
 	static init(sortableList, clientYOffset=0) {
+		sortableList = toEl(sortableList);
 		sortableList.querySelectorAll('[draggable="true"]').forEach(item => {
 			item.addEventListener('dragstart', () => {
 				// Adding dragging class to an item after a delay