Difference between revisions of "Template:Pasteur Paris/Vignettes"

(Created page with "<html> <style> .vignette { →‎element that contains ONE vignette: height:20em; width:20em; margin:0...")
 
Line 117: Line 117:
  
 
     </style>
 
     </style>
 +
 +
 +
      <script>
 +
 +
        /*panels and vignettes flexbox automatic order*/
 +
 +
        function redim() {
 +
            if("matchMedia" in window) {
 +
                var vign_lis = document.getElementsByClassName("vignette");
 +
                var pan_lis = document.getElementsByClassName("panel");
 +
                var i;
 +
                if(window.matchMedia("(min-width:850px)").matches) {
 +
                    /*big*/
 +
                    for (i = 0; i < vign_lis.length; i++) {
 +
                        var act_vign = vign_lis[i];
 +
                        var act_pan = pan_lis[i];
 +
                        var index = String(act_vign.id).substring(7,9);
 +
                        switch (index) {
 +
                            case '00':
 +
                                act_vign.style.order="3";
 +
                                act_pan.style.order="6" ;
 +
                                break;
 +
                            case '01':
 +
                                act_vign.style.order="4";
 +
                                act_pan.style.order="7";
 +
                                break;
 +
                            case '02':
 +
                                act_vign.style.order="5";
 +
                                act_pan.style.order="8";
 +
                                break;
 +
                            case '03':
 +
                                act_vign.style.order="9";
 +
                                act_pan.style.order="12"; 
 +
                                break;
 +
                            case '04':
 +
                                act_vign.style.order="10";
 +
                                act_pan.style.order="13";
 +
                                break;
 +
                            case '05':
 +
                                act_vign.style.order="11";
 +
                                act_pan.style.order="14";
 +
                                break;
 +
                            case '06':
 +
                                act_vign.style.order="15";
 +
                                act_pan.style.order="18";
 +
                                break; 
 +
                            case '07':
 +
                                act_vign.style.order="16";
 +
                                act_pan.style.order="19";
 +
                                break;                       
 +
                        }
 +
                    }
 +
                } else if (window.matchMedia("(max-width:760px)").matches) {
 +
                    /* very small*/
 +
                    for (i = 0; i < vign_lis.length; i++) {
 +
                        var act_vign = vign_lis[i];
 +
                        var act_pan = pan_lis[i];
 +
                        var index = String(act_vign.id).substring(7,9);
 +
                        switch (index) {
 +
                            case '00':
 +
                                act_vign.style.order="3";
 +
                                act_pan.style.order="4" ;
 +
                                break;
 +
                            case '01':
 +
                                act_vign.style.order="5";
 +
                                act_pan.style.order="6";
 +
                                break;
 +
                            case '02':
 +
                                act_vign.style.order="7";
 +
                                act_pan.style.order="8";
 +
                                break;
 +
                            case '03':
 +
                                act_vign.style.order="9";
 +
                                act_pan.style.order="10";
 +
                                break;
 +
                            case '04':
 +
                                act_vign.style.order="11";
 +
                                act_pan.style.order="12";
 +
                                break;
 +
                            case '05':
 +
                                act_vign.style.order="12";
 +
                                act_pan.style.order="13";
 +
                                break;
 +
                            case '06':
 +
                                act_vign.style.order="14";
 +
                                act_pan.style.order="15"; 
 +
                                break; 
 +
                            case '07':
 +
                                act_vign.style.order="16";
 +
                                act_pan.style.order="17";
 +
                                break;                             
 +
                        }
 +
                    }   
 +
                } else {
 +
                    /*small*/
 +
                    for (i = 0; i < vign_lis.length; i++) {
 +
                        var act_vign = vign_lis[i];
 +
                        var act_pan = pan_lis[i];
 +
                        var index = String(act_vign.id).substring(7,9);
 +
                        switch (index) {
 +
                            case '00':
 +
                                act_vign.style.order="3";
 +
                                act_pan.style.order="5" ;
 +
                                break;
 +
                            case '01':
 +
                                act_vign.style.order="4";
 +
                                act_pan.style.order="6";
 +
                                break;
 +
                            case '02':
 +
                                act_vign.style.order="7";
 +
                                act_pan.style.order="9";
 +
                                break;
 +
                            case '03':
 +
                                act_vign.style.order="8";
 +
                                act_pan.style.order="10";
 +
                                break;
 +
                            case '04':
 +
                                act_vign.style.order="11";
 +
                                act_pan.style.order="13";
 +
                                break;
 +
                            case '05':
 +
                                act_vign.style.order="12";
 +
                                act_pan.style.order="14";
 +
                                break;
 +
                            case '06':
 +
                                act_vign.style.order="15";
 +
                                act_pan.style.order="17";
 +
                                break; 
 +
                            case '07':
 +
                                act_vign.style.order="16";
 +
                                act_pan.style.order="18";
 +
                                break;                             
 +
                        }
 +
                    }
 +
                }
 +
            }
 +
        }
 +
 +
        window.addEventListener('resize', redim, false);
 +
 +
        redim();
 +
 +
        </script>
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
 +
        <script>
 +
 +
        /*close buttons*/
 +
 +
                var acc = document.getElementsByClassName("close_button");
 +
 +
                for (i = 0; i < acc.length; i++) {
 +
                    acc[i].addEventListener("click", function() {
 +
                        var panel = this.parentElement;
 +
                        var index = String(panel.id).substring(4,8);
 +
                        var vignBack = document.getElementById("back_"+index);
 +
                        var vignFor = vignBack.previousElementSibling;
 +
                        var vignText = vignBack.nextElementSibling;
 +
                        panel.style.maxHeight = null;
 +
                        vignFor.style.opacity = 1;
 +
                        vignText.style.opacity = 0.8;
 +
                        vignText.style.top = "4em";
 +
                    });
 +
                }
 +
 +
 +
        </script>
 +
 
</html>
 
</html>

Revision as of 12:48, 31 August 2018