Tema: Multiscroll
Ver Mensaje Individual
  #7 (permalink)  
Antiguo 30/05/2014, 10:01
Avatar de satjaen
satjaen
 
Fecha de Ingreso: septiembre-2012
Ubicación: Jaén (Andalucía)
Mensajes: 893
Antigüedad: 12 años, 3 meses
Puntos: 10
Respuesta: Multiscroll

Continuación...

Código Javascript:
Ver original
  1. /**
  2.         * Returns the transform styles for all browsers
  3.         */
  4.         function getTransforms(translate3d){
  5.             return {
  6.                 '-webkit-transform': translate3d,
  7.                 '-moz-transform': translate3d,
  8.                 '-ms-transform':translate3d,
  9.                 'transform': translate3d
  10.             };
  11.         }
  12.  
  13.         /**
  14.          * Activating the website navigation dots according to the given slide name.
  15.          */
  16.         function activateNavDots(name, sectionIndex){
  17.             if(options.navigation){
  18.                 $('#multiscroll-nav').find('.active').removeClass('active');
  19.                 if(name){
  20.                     $('#multiscroll-nav').find('a[href="#' + name + '"]').addClass('active');
  21.                 }else{
  22.                     $('#multiscroll-nav').find('li').eq(sectionIndex).find('a').addClass('active');
  23.                 }
  24.             }
  25.         }
  26.  
  27.         /**
  28.          * Activating the website main menu elements according to the given slide name.
  29.          */
  30.         function activateMenuElement(name){
  31.             if(options.menu){
  32.                 $(options.menu).find('.active').removeClass('active');
  33.                 $(options.menu).find('[data-menuanchor="'+name+'"]').addClass('active');
  34.             }
  35.         }
  36.  
  37.         /**
  38.         * Retuns `up` or `down` depending on the scrolling movement to reach its destination
  39.         * from the current section.
  40.         */
  41.         function getYmovement(destiny){
  42.             var fromIndex = $('.ms-left .ms-section.active').index();
  43.             var toIndex = destiny.index();
  44.  
  45.             if(fromIndex > toIndex){
  46.                 return 'up';
  47.             }
  48.             return 'down';
  49.         }  
  50.  
  51.  
  52.         /**
  53.         * Sets the URL hash for a section with slides
  54.         */
  55.         function setURLHash(anchorLink){
  56.             if(options.anchors.length){
  57.                 location.hash = anchorLink;
  58.             }
  59.         }
  60.  
  61.  
  62.         /**
  63.         * Checks for translate3d support
  64.         * @return boolean
  65.         * http://stackoverflow.com/questions/5661671/detecting-transform-translate3d-support
  66.         */
  67.         function support3d() {
  68.             var el = document.createElement('p'),
  69.                 has3d,
  70.                 transforms = {
  71.                     'webkitTransform':'-webkit-transform',
  72.                     'OTransform':'-o-transform',
  73.                     'msTransform':'-ms-transform',
  74.                     'MozTransform':'-moz-transform',
  75.                     'transform':'transform'
  76.                 };
  77.  
  78.             // Add it to the body to get the computed style.
  79.             document.body.insertBefore(el, null);
  80.  
  81.             for (var t in transforms) {
  82.                 if (el.style[t] !== undefined) {
  83.                     el.style[t] = "translate3d(1px,1px,1px)";
  84.                     has3d = window.getComputedStyle(el).getPropertyValue(transforms[t]);
  85.                 }
  86.             }
  87.            
  88.             document.body.removeChild(el);
  89.  
  90.             return (has3d !== undefined && has3d.length > 0 && has3d !== "none");
  91.         }
  92.  
  93.         /**
  94.         * Wraps an element in order to center it vertically by using a class style.
  95.         */
  96.         function addTableClass(element){
  97.             element.addClass('ms-table').wrapInner('<div class="ms-tableCell" style="height: ' + getTableHeight(element) + 'px" />');
  98.         }
  99.  
  100.         /**
  101.         * Gets the height of the section after removing the paddings.
  102.         */
  103.         function getTableHeight(section){
  104.             var sectionHeight = windowHeight;
  105.  
  106.             if(options.paddingTop || options.paddingBottom){           
  107.                 var paddings = parseInt(section.css('padding-top')) + parseInt(section.css('padding-bottom'));
  108.                 sectionHeight = (windowHeight - paddings);
  109.             }
  110.  
  111.             return sectionHeight;
  112.         }
  113.  
  114.  
  115.         /**
  116.         * Scrolls the page to the existent anchor in the URL
  117.         */
  118.         function scrollToAnchor(){
  119.             //getting the anchor link in the URL and deleting the `#`
  120.             var sectionAnchor =  window.location.hash.replace('#', '');
  121.             var section = $('.ms-left .ms-section[data-anchor="'+sectionAnchor+'"]');
  122.  
  123.             if(sectionAnchor.length){  //if theres any #   
  124.                 scrollPage(section);
  125.             }
  126.         }
  127.  
  128.         /**
  129.         * Adds or remove the possiblity of scrolling through sections by using the keyboard arrow keys
  130.         */
  131.         $.fn.multiscroll.setKeyboardScrolling = function (value){
  132.             options.keyboardScrolling = value;
  133.         };
  134.  
  135.         /**
  136.         * Adds or remove the possiblity of scrolling through sections by using the mouse wheel or the trackpad.
  137.         */
  138.         $.fn.multiscroll.setMouseWheelScrolling = function (value){
  139.             if(value){
  140.                 addMouseWheelHandler();
  141.             }else{
  142.                 removeMouseWheelHandler();
  143.             }
  144.         };
  145.  
  146.         /**
  147.         * Defines the scrolling speed
  148.         */
  149.         $.fn.multiscroll.setScrollingSpeed = function(value){
  150.            options.scrollingSpeed = value;
  151.         };
  152.  
  153.  
  154.  
  155.         var touchStartY = 0;
  156.         var touchStartX = 0;
  157.         var touchEndY = 0;
  158.         var touchEndX = 0;
  159.    
  160.         /* Detecting touch events
  161.        
  162.         * As we are changing the top property of the page on scrolling, we can not use the traditional way to detect it.
  163.         * This way, the touchstart and the touch moves shows an small difference between them which is the
  164.         * used one to determine the direction.
  165.         */     
  166.         function touchMoveHandler(event){
  167.             var e = event.originalEvent;
  168.  
  169.             //preventing the easing on iOS devices
  170.             event.preventDefault();
  171.  
  172.             var activeSection = $('.ms-left .ms-section.active');
  173.  
  174.             if (!isMoving) { //if theres any #
  175.                 var touchEvents = getEventsPage(e);
  176.                 touchEndY = touchEvents['y'];
  177.                 touchEndX = touchEvents['x'];
  178.                                    
  179.  
  180.                 //is the movement greater than the minimum resistance to scroll?
  181.                 if (Math.abs(touchStartY - touchEndY) > ($(window).height() / 100 * options.touchSensitivity)) {
  182.  
  183.                     if (touchStartY > touchEndY) {
  184.                         $.fn.multiscroll.moveSectionDown();
  185.  
  186.                     } else if (touchEndY > touchStartY) {
  187.                         $.fn.multiscroll.moveSectionUp();
  188.                     }
  189.                 }
  190.             }
  191.         }
  192.  
  193.  
  194.         /**
  195.         * Handler to get he coordinates of the starting touch
  196.         */
  197.         function touchStartHandler(event){
  198.             var e = event.originalEvent;
  199.             var touchEvents = getEventsPage(e);
  200.             touchStartY = touchEvents['y'];
  201.             touchStartX = touchEvents['x'];
  202.         }
  203.  
  204.  
  205.         /**
  206.         * Adds the possibility to auto scroll through sections on touch devices.
  207.         */
  208.         function addTouchHandler(){
  209.             $(document).off('touchstart MSPointerDown').on('touchstart MSPointerDown', touchStartHandler);
  210.             $(document).off('touchmove MSPointerMove').on('touchmove MSPointerMove', touchMoveHandler);
  211.         }
  212.        
  213.         /**
  214.         * Removes the auto scrolling for touch devices.
  215.         */
  216.         function removeTouchHandler(){
  217.             $(document).off('touchstart MSPointerDown');
  218.             $(document).off('touchmove MSPointerMove');
  219.         }
  220.  
  221.         /**
  222.         * Gets the pageX and pageY properties depending on the browser.
  223.         * https://github.com/alvarotrigo/fullPage.js/issues/194#issuecomment-34069854
  224.         */
  225.         function getEventsPage(e){
  226.             var events = new Array();
  227.             if (window.navigator.msPointerEnabled){
  228.                 events['y'] = e.pageY;
  229.                 events['x'] = e.pageX;
  230.             }else{
  231.                 events['y'] = e.touches[0].pageY;
  232.                 events['x'] =  e.touches[0].pageX;
  233.             }
  234.  
  235.             return events;
  236.         }
  237.  
  238.     }; 
  239. })(jQuery);