https://jeremyjoron.re/_osdln/js/modules/Popin/Popin.js?v=

1import {premier_chargement_module} from '/_osdln/js/lib/utilitaires.js'
2export class Popin
3{	
4	//----------------------------------------------------------------------------
5	//														     									ouvrir
6	 static async ouvrir(contenu, classe, callback_apres_fermeture, callback_apres_creation)
7	{
8		if(!contenu)
9		{
10			throw new Error(`Vous devez compléter le premier paramètre (CONTENU) pour ajouter du texte à la popin`, { cause: 'contenu_vide' });
11			
12			
13			return false
14		}
15		
16		//si une popin existe déjà, on l'a supprime
17		this.supprimer_ancienne_popin()
18		
19		//blackhole
20		this.creer_blackhole(classe)
21		
22		if(classe != 'chargement')
23			this.blackhole_init(callback_apres_fermeture);
24		
25		//popin
26		this.creer(contenu, classe)
27		this.init()
28		
29		//callback_apres_creation
30		if(callback_apres_creation) callback_apres_creation();
31		
32		
33	}//ouvrir
34	
35	//----------------------------------------------------------------------------
36	//														     								par_etape
37	static par_etape(campagne, contenu, classe, callback_apres_fermeture, callback_apres_creation)
38	{
39		const that = this
40		
41		if(!contenu)
42		{
43			throw new Error(`Vous devez compléter le premier paramètre pour ajouter du CONTENU à la popin`, { cause: 'contenu_vide' });
44			
45			return false
46		}
47		
48		try 
49		{
50			if (window.localStorage) 
51			{ 
52				const cookie							= localStorage.getItem(campagne);
53				if(cookie)
54				return {retour:true, msg:"deja_proposer"};
55			}
56		}
57		catch(erreur)
58		{
59			console.error(erreur)
60			return false
61		}
62		
63		//s'il n'y a pas un callback apres la fermeture de la popin
64		//alors on utilise celui par défaut
65		if(!callback_apres_fermeture) callback_apres_fermeture = function(){that.par_etape_callback(campagne)}
66		
67		//si une popin existe déjà, on l'a supprime
68		this.supprimer_ancienne_popin()
69		
70		//blackhole
71		this.creer_blackhole(classe)
72		this.blackhole_init(callback_apres_fermeture);
73		
74		//popin
75		this.creer(contenu, classe)
76		this.init()
77		
78		//callback_apres_creation
79		if(callback_apres_creation) callback_apres_creation();
80		
81		//configurer ce qu'il se passe quand on clique sur le bouton suivant
82		this.config_btn_etape_suivante()
83	
84		return {retour:true, msg:"ok"};
85	}//par_etape
86	
87	
88	//----------------------------------------------------------------------------
89	//														     	  	  config_btn_etape_suivante
90	static config_btn_etape_suivante()
91	{
92		const btn_suivants 							= document.querySelectorAll('#popin .suivant')
93		
94		btn_suivants.forEach(btn_suivant => 
95		{
96			const suivant 								= btn_suivant.getAttribute('data-suivant')				
97			if(!suivant) return false
98			
99			btn_suivant.addEventListener('click', function()
100			{
101				const ancien 							= document.querySelector('#popin .afficher')
102				ancien.classList.remove('afficher');
103				
104				const prochain 						= document.querySelector('#popin #'+suivant)
105				if(prochain) prochain.classList.add('afficher')
106			})	
107		})	
108	}//config_btn_etape_suivante
109	
110	//----------------------------------------------------------------------------
111	//														     					par_etape_callback
112	static async par_etape_callback(cle)
113	{		
114		try 
115		{			
116			const {enregistrer} 						= await import('/_osdln/js/lib/Donnees_locales.js?v='+v_donnees_locales);
117			var date = new Date()
118			date = date.setDate(date.getDate() + 1).toString()
119			enregistrer(cle, 1, date)
120				 
121		} catch (e) {
122			 // traitement lors de l'exception
123			 console.error(e)
124		}
125		
126	}//par_etape_callback
127	
128	//----------------------------------------------------------------------------
129	//														     			supprimer_ancienne_popin
130	static supprimer_ancienne_popin()
131	{
132		//si une popin existe déjà, on l'a supprime
133		const ancien = document.querySelector('#blackhole')
134		if(ancien) ancien.remove();
135		
136		const popin = document.querySelector('#popin')
137		if(popin) popin.remove()
138		
139	}//supprimer_ancienne_popin
140	
141	//----------------------------------------------------------------------------
142	//														     						creer_blackhole
143	static creer_blackhole(classe)
144	{
145		const blackhole = document.createElement('div');
146		blackhole.setAttribute('id', 'blackhole' )
147		if(classe) blackhole.className = 'bk_'+classe
148		

149		if(classe == 'chargement')
150		{
151			this.ajouter_animation_chargement(blackhole)
152		}
153		document.querySelector('body').appendChild(blackhole);
154		
155		return blackhole
156	}//creer_blackhole
157	
158	static ajouter_animation_chargement(blackhole)
159	{
160		const tpl = document.querySelector("#tpl_chargement_nouvelle_page");
161		var contenu = document.importNode(tpl.content, true);
162		blackhole.appendChild(contenu);	
163
164	}
165	//----------------------------------------------------------------------------
166	//														     						 blackhole_init
167	static blackhole_init(callback_apres_fermeture)
168	{
169		
170		const blackhole = document.querySelector('#blackhole')
171		const that = this;
172		
173		blackhole.addEventListener('click', function(event) 
174		{			
175			that.fermer(callback_apres_fermeture)
176		});
177		
178	}
179	
180	//----------------------------------------------------------------------------
181	//														     									fermer
182	static fermer(callback_apres_fermeture)
183	{
184		const blackhole = document.querySelector('#blackhole')
185		if(blackhole) blackhole.remove();
186		
187		const popin = document.querySelector('#popin')
188		if(popin) popin.remove();
189		
190		if(callback_apres_fermeture) callback_apres_fermeture()
191	}//fermer
192	
193	//----------------------------------------------------------------------------
194	//														     									 creer
195	static creer(contenu, classe)
196	{
197		var popin = document.createElement('div');
198		popin.setAttribute('id', 'popin' )
199		if(classe) popin.className = classe
200			
201		popin.innerHTML = contenu;
202		popin.innerHTML += '<p class="fermer"><i class="fas fa-times"></i></p>';
203		
204		document.querySelector('body').appendChild(popin);
205		window.dispatchEvent(new CustomEvent('nouveau_conteneur_charger'));
206		
207		
208	}//creer
209	
210	//----------------------------------------------------------------------------
211	//														     									  init
212	 static init()
213	 {
214		 const blackhole = document.querySelector('#blackhole')
215		 const popin = document.querySelector('#popin')
216		 const fermer = popin.querySelector('.fermer')
217		 
218		 fermer.addEventListener('click', function(event) 
219		 {
220			  blackhole.click();
221		 });
222		 
223	 }//init
224	
225}//popin
226
227//une fois que le module est chargé
228//on charge également son css
229//toute fois on ajoute un id à la balise link pour indiquer
230//que le fichier a été chargé une fois
231//pour ne pas réimporter le css plusieurs fois
232premier_chargement_module('Popin')