templates/charte/LateralOnScrollSliding/js/lateral.js line 1

Open in your IDE?
  1. <script>
  2.     $(function(){
  3.         initAffichageLateral();
  4.         function initAffichageLateral(){
  5.             console.log("initAffichageLateral"); //550
  6.             $.ajax({
  7.                 type: "POST",
  8.                 url: "{{ path('lateral_chargeBloc') }}",
  9.             })
  10.             .done(function(msg){
  11.                 // init titre
  12.                 anneeEC = 0;
  13.                 moisEC = 0;
  14.                 // boucle pour tous les résultats
  15.                 msg.tab.forEach((item, index) => {
  16.                     // recup date du resultat
  17.                     dateRES = new Date(item[1]);
  18.                     console.log(dateRES); // 566
  19.                     // se demande si il faut un titre
  20.                     if (anneeEC == 0 && moisEC == 0){
  21.                         console.log("init premier titre "+dateRES.getMonth()+" : "+dateRES.getFullYear()); // 570
  22.                         anneeEC = dateRES.getFullYear();
  23.                         moisEC = dateRES.getMonth();
  24.                         titre = PlacementTitreDate(moisEC, anneeEC);
  25.                         $("#ss-container").append(titre);
  26.                     }
  27.                     else if (anneeEC != dateRES.getFullYear() || moisEC != dateRES.getMonth()){
  28.                         console.log("init titre SUIVANT "+dateRES.getMonth()+" : "+dateRES.getFullYear());
  29.                         anneeEC = dateRES.getFullYear();
  30.                         moisEC = dateRES.getMonth();
  31.                         titre = PlacementTitreDate(moisEC, anneeEC);
  32.                         $("#ss-container").append(titre);
  33.                     }
  34.                     $("#ss-container").append(item[0].content);
  35.                 });
  36.                 var $sidescroll    = (function() {
  37.                             
  38.                     // the row elements
  39.                     var $rows = $('#ss-container > div.ss-row'),
  40.                     // we will cache the inviewport rows and the outside viewport rows
  41.                     $rowsViewport, $rowsOutViewport,
  42.                     // navigation menu links
  43.                     $links = $('#ss-links > a'),
  44.                     // the window element
  45.                     $win            = $(window),
  46.                     // we will store the window sizes here
  47.                     winSize            = {},
  48.                     // used in the scroll setTimeout function
  49.                     anim            = false,
  50.                     // page scroll speed
  51.                     scollPageSpeed    = 2000 ,
  52.                     // page scroll easing
  53.                     scollPageEasing = 'easeInOutExpo',
  54.                     // perspective?
  55.                     hasPerspective    = true,
  56.                     
  57.                     perspective        = hasPerspective && Modernizr.csstransforms3d,
  58.                     // initialize function
  59.                     init            = function() {
  60.                         
  61.                         // get window sizes
  62.                         getWinSize();
  63.                         // initialize events
  64.                         initEvents();
  65.                         // define the inviewport selector
  66.                         defineViewport();
  67.                         // gets the elements that match the previous selector
  68.                         setViewportRows();
  69.                         // if perspective add css
  70.                         if( perspective ) {
  71.                             $rows.css({
  72.                                 '-webkit-perspective'            : 600,
  73.                                 '-webkit-perspective-origin'    : '50% 0%'
  74.                             });
  75.                         }
  76.                         // show the pointers for the inviewport rows
  77.                         $rowsViewport.find('a.ss-circle').addClass('ss-circle-deco');
  78.                         // set positions for each row
  79.                         placeRows();
  80.                         
  81.                     },
  82.                     // defines a selector that gathers the row elems that are initially visible.
  83.                     // the element is visible if its top is less than the window's height.
  84.                     // these elements will not be affected when scrolling the page.
  85.                     defineViewport    = function() {
  86.                     
  87.                         $.extend( $.expr[':'], {
  88.                         
  89.                             inviewport    : function ( el ) {
  90.                                 if ( $(el).offset().top < winSize.height ) {
  91.                                     return true;
  92.                                 }
  93.                                 return false;
  94.                             }
  95.                         
  96.                         });
  97.                     
  98.                     },
  99.                     // checks which rows are initially visible 
  100.                     setViewportRows    = function() {
  101.                         
  102.                         $rowsViewport         = $rows.filter(':inviewport');
  103.                         $rowsOutViewport    = $rows.not( $rowsViewport )
  104.                         
  105.                     },
  106.                     // get window sizes
  107.                     getWinSize        = function() {
  108.                     
  109.                         winSize.width    = $win.width();
  110.                         winSize.height    = $win.height();
  111.                     
  112.                     },
  113.                     // initialize some events
  114.                     initEvents        = function() {
  115.                         
  116.                         // navigation menu links.
  117.                         // scroll to the respective section.
  118.                         $links.on( 'click.Scrolling', function( event ) {
  119.                             
  120.                             // scroll to the element that has id = menu's href
  121.                             $('html, body').stop().animate({
  122.                                 scrollTop: $( $(this).attr('href') ).offset().top
  123.                             }, scollPageSpeed, scollPageEasing );
  124.                             
  125.                             return false;
  126.                         
  127.                         });
  128.                         
  129.                         $(window).on({
  130.                             // on window resize we need to redefine which rows are initially visible (this ones we will not animate).
  131.                             'resize.Scrolling' : function( event ) {
  132.                                 
  133.                                 // get the window sizes again
  134.                                 getWinSize();
  135.                                 // redefine which rows are initially visible (:inviewport)
  136.                                 setViewportRows();
  137.                                 // remove pointers for every row
  138.                                 $rows.find('a.ss-circle').removeClass('ss-circle-deco');
  139.                                 // show inviewport rows and respective pointers
  140.                                 $rowsViewport.each( function() {
  141.                                 
  142.                                     $(this).find('div.ss-left')
  143.                                         .css({ left   : '0%' })
  144.                                         .end()
  145.                                         .find('div.ss-right')
  146.                                         .css({ right  : '0%' })
  147.                                         .end()
  148.                                         .find('a.ss-circle')
  149.                                         .addClass('ss-circle-deco');
  150.                                 
  151.                                 });
  152.                             
  153.                             },
  154.                             // when scrolling the page change the position of each row    
  155.                             'scroll.Scrolling' : function( event ) {
  156.                                 
  157.                                 // set a timeout to avoid that the 
  158.                                 // placeRows function gets called on every scroll trigger
  159.                                 if( anim ) return false;
  160.                                 anim = true;
  161.                                 setTimeout( function() {
  162.                                     
  163.                                     placeRows();
  164.                                     anim = false;
  165.                                     
  166.                                 }, 10 );
  167.                             
  168.                             }
  169.                         });
  170.                     
  171.                     },
  172.                     // sets the position of the rows (left and right row elements).
  173.                     // Both of these elements will start with -50% for the left/right (not visible)
  174.                     // and this value should be 0% (final position) when the element is on the
  175.                     // center of the window.
  176.                     placeRows        = function() {
  177.                         
  178.                             // how much we scrolled so far
  179.                         var winscroll    = $win.scrollTop(),
  180.                             // the y value for the center of the screen
  181.                             winCenter    = winSize.height / 2 + winscroll;
  182.                         
  183.                         // for every row that is not inviewport
  184.                         $rowsOutViewport.each( function(i) {
  185.                             
  186.                             var $row    = $(this),
  187.                                 // the left side element
  188.                                 $rowL    = $row.find('div.ss-left'),
  189.                                 // the right side element
  190.                                 $rowR    = $row.find('div.ss-right'),
  191.                                 // top value
  192.                                 rowT    = $row.offset().top;
  193.                             
  194.                             // hide the row if it is under the viewport
  195.                             if( rowT > winSize.height + winscroll ) {
  196.                                 
  197.                                 if( perspective ) {
  198.                                 
  199.                                     $rowL.css({
  200.                                         '-webkit-transform'    : 'translate3d(-75%, 0, 0) rotateY(-90deg) translate3d(-75%, 0, 0)',
  201.                                         'opacity'            : 0
  202.                                     });
  203.                                     $rowR.css({
  204.                                         '-webkit-transform'    : 'translate3d(75%, 0, 0) rotateY(90deg) translate3d(75%, 0, 0)',
  205.                                         'opacity'            : 0
  206.                                     });
  207.                                 
  208.                                 }
  209.                                 else {
  210.                                 
  211.                                     $rowL.css({ left         : '-50%' });
  212.                                     $rowR.css({ right         : '-50%' });
  213.                                 
  214.                                 }
  215.                                 
  216.                             }
  217.                             // if not, the row should become visible (0% of left/right) as it gets closer to the center of the screen.
  218.                             else {
  219.                                     
  220.                                     // row's height
  221.                                 var rowH    = $row.height(),
  222.                                     // the value on each scrolling step will be proporcional to the distance from the center of the screen to its height
  223.                                     factor     = ( ( ( rowT + rowH / 2 ) - winCenter ) / ( winSize.height / 2 + rowH / 2 ) ),
  224.                                     // value for the left / right of each side of the row.
  225.                                     // 0% is the limit
  226.                                     val        = Math.max( factor * 50, 0 );
  227.                                     
  228.                                 if( val <= 0 ) {
  229.                                 
  230.                                     // when 0% is reached show the pointer for that row
  231.                                     if( !$row.data('pointer') ) {
  232.                                     
  233.                                         $row.data( 'pointer', true );
  234.                                         $row.find('.ss-circle').addClass('ss-circle-deco');
  235.                                     
  236.                                     }
  237.                                 
  238.                                 }
  239.                                 else {
  240.                                     
  241.                                     // the pointer should not be shown
  242.                                     if( $row.data('pointer') ) {
  243.                                         
  244.                                         $row.data( 'pointer', false );
  245.                                         $row.find('.ss-circle').removeClass('ss-circle-deco');
  246.                                     
  247.                                     }
  248.                                     
  249.                                 }
  250.                                 
  251.                                 // set calculated values
  252.                                 if( perspective ) {
  253.                                     
  254.                                     var    t        = Math.max( factor * 75, 0 ),
  255.                                         r        = Math.max( factor * 90, 0 ),
  256.                                         o        = Math.min( Math.abs( factor - 1 ), 1 );
  257.                                     
  258.                                     $rowL.css({
  259.                                         '-webkit-transform'    : 'translate3d(-' + t + '%, 0, 0) rotateY(-' + r + 'deg) translate3d(-' + t + '%, 0, 0)',
  260.                                         'opacity'            : o
  261.                                     });
  262.                                     $rowR.css({
  263.                                         '-webkit-transform'    : 'translate3d(' + t + '%, 0, 0) rotateY(' + r + 'deg) translate3d(' + t + '%, 0, 0)',
  264.                                         'opacity'            : o
  265.                                     });
  266.                                 
  267.                                 }
  268.                                 else {
  269.                                     
  270.                                     $rowL.css({ left     : - val + '%' });
  271.                                     $rowR.css({ right     : - val + '%' });
  272.                                     
  273.                                 }
  274.                                 
  275.                             }    
  276.                         
  277.                         });
  278.                     
  279.                     };
  280.         
  281.                     return { init : init };
  282.         
  283.                 })();
  284.         
  285.                 $sidescroll.init();
  286.             });
  287.         }
  288.         function PlacementTitreDate(mois, annee){
  289.             if (mois == 0){
  290.                 lemois = "JANVIER";
  291.             }
  292.             else if (mois == 1){
  293.                 lemois = "FÉVRIER";
  294.             }
  295.             else if (mois == 2){
  296.                 lemois = "MARS";
  297.             }
  298.             else if (mois == 3){
  299.                 lemois = "AVRIL";
  300.             }
  301.             else if (mois == 4){
  302.                 lemois = "MAI";
  303.             }
  304.             else if (mois == 5){
  305.                 lemois = "JUIN";
  306.             }
  307.             else if (mois == 6){
  308.                 lemois = "JUILLET";
  309.             }
  310.             else if (mois == 7){
  311.                 lemois = "AOÛT";
  312.             }
  313.             else if (mois == 8){
  314.                 lemois = "SEPTEMBRE";
  315.             }
  316.             else if (mois == 9){
  317.                 lemois = "OCTOBRE";
  318.             }
  319.             else if (mois == 10){
  320.                 lemois = "NOVEMBRE";
  321.             }
  322.             else {
  323.                 lemois = "DÉCEMBRE";
  324.             }
  325.             html = '    <!-- UN BLOC Titre -->';
  326.             html += '   <div class="ss-row">';
  327.             html += '       <div class="ss-left">';
  328.             html += '           <h2 id="november">'+lemois+'</h2>';
  329.             html += '       </div>';
  330.             html += '       <div class="ss-right">';
  331.             html += '           <h2>'+annee+'</h2>';
  332.             html += '       </div>';
  333.             html += '   </div>';
  334.             return html;
  335.         }
  336.     
  337.     });
  338. </script>