initialisation with SMETI code

frontend/src/scripts/UI/modal.js

@@ -0,0 +1,154 @@
+class Modal {
+    // TODO : industrialiser en créant une classe 
+}
+
+const modalDialog = document.getElementById('fiche');
+
+var modal_hooks = [];
+
+function disableScrolling(){
+    /*
+    document.body.style.position = 'fixed';
+    document.body.style.top = `-${window.scrollY}px`;
+    */
+
+    /*
+    var x=window.scrollX;
+    var y=window.scrollY;
+    window.onscroll=function(){window.scrollTo(x, y);};
+    */
+
+    // Ne marche pas : 
+    //    supprime la scrollbar (déplacement du body vers la droite)
+    // document.body.style.overflow='hidden';
+
+    // Ne marche pas : 
+    //    la modal ne propage pas le scroll
+    // modalDialog.scroll = function(e) {e.stopPropagation();}
+}
+
+function enableScrolling(){
+    /*
+    const scrollY = document.body.style.top;
+    document.body.style.position = '';
+    document.body.style.top = '';
+    window.scrollTo(0, parseInt(scrollY || '0') * -1);
+    */
+
+    // Ne marche pas  :
+    //    au retour, certains élements de la page ne sont plus clickables
+    //document.body.style.overflow='scroll';
+
+    // window.onscroll=function(){};
+}
+
+function showDialog(){
+    modalDialog.showModal();
+    disableScrolling()
+}
+
+function show_modal(data_modal) {
+    showDialog();
+    if (typeof open_modal_hook === 'function') open_modal_hook(data_modal);
+};
+
+function close_modal() 
+{
+    modalDialog.close();
+    enableScrolling();
+}
+
+function init_modal() 
+{
+    let testElements = document.getElementsByClassName('js-open-modal-trigger');
+    let testDivs = Array.prototype.filter.call(testElements, function(testElement){
+        return true;
+    });
+
+    testDivs.forEach(function(item){
+        item.onclick = function(ev) {
+            show_modal(this.getAttribute("data-modal-info"));
+        };
+    });
+    
+
+    testElements = document.getElementsByClassName('js-close-modal-trigger');
+    testDivs = Array.prototype.filter.call(testElements, function(testElement){
+        return true;
+    });
+
+    testDivs.forEach(function(item){
+        item.onclick = function(ev) {
+            close_modal(this.getAttribute("data-modal-info"));
+        };
+    });
+
+    return true;
+}
+
+function close_modal_hook()
+{
+    console.log("close_modal_hook");
+
+    modalSetInnerHtml('modal_header', '');
+    modalSetInnerHtml('modal_body', '');
+    modalSetInnerHtml('modal_footer',  '');    
+}
+
+function modalSetInnerHtml(className, valeur)
+{
+    var testElements = document.getElementsByClassName(className);
+    var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+        return true;
+    });
+    testDivs.forEach(function(element){
+        element.scrollTop = 0;
+        element.innerHTML = valeur;
+    });
+}
+
+function modalSetChildren(className, children)
+{
+    var testElements = document.getElementsByClassName(className);
+    var testDivs = Array.prototype.filter.call(testElements, function(testElement){
+        return true;
+    });
+    modalSetInnerHtml(className, '');
+    testDivs.forEach(function(element){
+        element.scrollTop = 0;
+        element.appendChild(children);
+    });
+}
+
+function modalSetHeader(valeur)
+{
+    modalSetInnerHtml('modal_header', valeur);
+}
+function modalSetBody(valeur)
+{
+    modalSetInnerHtml('modal_body', valeur);
+}
+function modalSetFooter(valeur)
+{
+    modalSetInnerHtml('modal_footer', valeur);
+}
+
+/*
+ * Format du paramètre : methode:p1=v1,p2=v2
+ */
+function open_modal_hook(parametre)
+{
+    console.log("open_modal_hook pour "+parametre);
+    let hook = null;
+    let paramSplit = parametre.split(':');
+    paramSplit.forEach(element => {
+        let elemSplit=element.split('=');
+        if (elemSplit[0] === 'type') {
+            hook = modal_hooks[elemSplit[1]];
+        }
+    });
+    if ((hook===null)||(hook===undefined)) hook = modal_hooks['ITEM'];
+    return hook(parametre);
+}
+
+init_modal();