Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Aug 21st, 2012  |  syntax: JavaScript  |  size: 15.27 KB  |  hits: 31  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. var UNIQLONAV = function () {
  2.     this.init();
  3.   }
  4. UNIQLONAV.CONSTANTS = {
  5.   SEC_NAV_ID_SELECTOR: '#secondary',
  6.   SEARCH_SELECTOR: '#search',
  7.   PRIMARY_NAV_SELECTOR: '#primary',
  8.   HOVER_CLS: 'hover',
  9.   CURRENT_CLS: 'current',
  10.   EASEMETHOD: 'easeOutQuint',
  11.   SEARCHSELECTED: 'searchselected',
  12.   SEARCHHOVER: 'searchhover',
  13.   CURRENT_SUBNAV_CLS: 'currentNav',
  14.   CUSTOMER_MENU: 'customerMenu',
  15.   SHOPPING_MENU: 'shoppingMenu'
  16. }
  17. UNIQLONAV.prototype = {
  18.   secondaryNav: null,
  19.   primaryNav: null,
  20.   primaryHeader: null,
  21.   subNavArry: new Array(),
  22.   currentNav: null,
  23.   cInx: null,
  24.   navOpenTimer: null,
  25.   navCloseTimer: null,
  26.   pageDoneLoaded: false,
  27.   navBar: null,
  28.   search: null,
  29.   _c: UNIQLONAV.CONSTANTS,
  30.   mainSection: null,
  31.   init: function () {
  32.     this.secondaryNav = $(this._c.SEC_NAV_ID_SELECTOR); //secondary and tertiary nav container
  33.     this.primaryNav = $(this._c.PRIMARY_NAV_SELECTOR + ' nav'); //primary nav
  34.     this.navBar = $('#navBar'); //3px subnav top border
  35.     this.primaryHeader = $('#primaryHeader'); //global nav container
  36.     this.mainSection = $("header").next();
  37.     this.attachEvtPrimary(); //attach hover event to primary nav
  38.     this.attachEvtSearch(); //attach mouse event to search container, mouseenter, mouseleave, focus, blur and clear
  39.     this.searchFilterActions(); // search filter functions
  40.     this.attachEvtSecondaryNav(); //attach mouse event to secondary and tertiary nav
  41.     this.attachEvtShoppingBag(); //attach mouse event to user name and shopping bag area
  42.     //this.attachEvtWindow(); //attach scroll event
  43.     this.attachEvtBody(); //attach click event to document body
  44.     this.getSubNav(); //create an array of sub nav
  45.     this.secondaryNav.height(0);
  46.     this.ie9Check(); /// adds ie-9 class if browser is IE verison 9
  47.     this.pageDoneLoaded = true;
  48.   },
  49.   getSubNav: function () {
  50.     var _self = this;
  51.     $(this._c.SEC_NAV_ID_SELECTOR + ' .secondaryNav').each(function (inx) {
  52.       if ($(this).hasClass(UNIQLONAV.CONSTANTS.CURRENT_SUBNAV_CLS)) {
  53.         _self.cInx = inx; //index of initial open nav if there's one
  54.         _self.initalShowNavBorder(); //show sub nav border if it is open on page load
  55.       }
  56.       _self.subNavArry.push($(this));
  57.       _self.subNavArry[inx].tertiary = _self.subNavArry[inx].find('ul');
  58.       _self.subNavArry[inx].secondary = _self.subNavArry[inx].find('th a');
  59.     });
  60.   },
  61.   initalShowNavBorder: function () {
  62.     if (this.secondaryNav.height()) {
  63.       //window.scrollTo(0, 0);
  64.       this.showNavBorder();
  65.     }
  66.   },
  67.   attachEvtPrimary: function () {
  68.     var _self = this;
  69.     this.primaryNav.on('mouseover', 'a', function (e) {
  70.       var el = $(this);
  71.       _self.unSelectPrimaryNav(el);
  72.       el.addClass(_self._c.HOVER_CLS);
  73.       _self.setOpenTimer(el.parent());
  74.     }).on('mouseleave', 'a', function (e) {
  75.       _self.setCloseTimer();
  76.     });
  77.   },
  78.   setCloseTimer: function () {
  79.     var _self = this;
  80.     clearTimeout(this.navOpenTimer);
  81.     this.navCloseTimer = setTimeout(function () {
  82.       _self.hideNav();
  83.     }, 150);
  84.   },
  85.   setOpenTimer: function (el) {
  86.     var _self = this;
  87.     clearTimeout(this.navCloseTimer);
  88.     this.navOpenTimer = setTimeout(function () {
  89.       _self.showNav(el);
  90.     }, 150);
  91.   },
  92.   attachEvtSearch: function () {
  93.     this.search = $(this._c.SEARCH_SELECTOR);
  94.     var input = this.search.find('input'),
  95.       _self = this;
  96.     this.search.on('mouseenter', function () {
  97.       if (!_self.search.hasClass(_self._c.SEARCHSELECTED)) {
  98.         _self.search.addClass(_self._c.SEARCHHOVER);
  99.       }
  100.     }).on('mouseleave', function () {
  101.       if (!input.is(':focus')) {
  102.         _self.search.removeClass(_self._c.SEARCHHOVER).removeClass(_self._c.SEARCHSELECTED);
  103.       }
  104.     })
  105.     input.on('focus', function (e) {
  106.       _self.search.removeClass(_self._c.SEARCHHOVER).addClass(_self._c.SEARCHSELECTED);
  107.     });
  108.     this.search.find('a.reset').on('click', function (e) {
  109.       e.preventDefault();
  110.       input.val('');
  111.     });
  112.   },
  113.   attachEvtSecondaryNav: function () {
  114.     var _self = this;
  115.     this.secondaryNav.on('mouseenter', function (e) {
  116.       clearTimeout(_self.navCloseTimer);
  117.     }).on('mouseleave', function () {
  118.       _self.setCloseTimer();
  119.     }).on('mouseover', 'a', function (e) {
  120.       $(this).addClass('hover').removeClass('out');
  121.     }).on('mouseout', 'a', function (e) {
  122.       $(this).switchClass(UNIQLONAV.CONSTANTS.HOVER_CLS, 'out', 150);
  123.     });
  124.   },
  125.   attachEvtShoppingBag: function () {
  126.     var obj = $(".shoppingbag");
  127.     $('.customername').on('click', function () {
  128.       hideDiv('customerItems');
  129.       obj.addClass('shoppingbaghover');
  130.       showDiv('customerMenu');
  131.     });
  132.     $('.bagcount').on('click', function () {
  133.       $(this).addClass('open');
  134.       hideDiv('customerMenu');
  135.       obj.addClass('shoppingbaghover');
  136.       showDiv('customerItems');
  137.     });
  138.     $('#customerItems').on('mouseleave', function () {
  139.       hideDiv('customerItems');
  140.     });
  141.     $('#customerMenu').on('mouseleave', function () {
  142.       hideDiv('customerMenu');
  143.     })
  144.     $('#primary nav a').on('mouseenter', function (e) {
  145.       $('#customerItems, #customerMenu').slideUp('normal', function () {
  146.         $('.bagcount').removeClass('open');
  147.         $(".shoppingbag").removeClass('shoppingbaghover');
  148.       });
  149.     });
  150.   },
  151.   attachEvtWindow: function () {
  152.     var _self = this;
  153.     $(window).on('scroll', function () {
  154.       clearTimeout(_self.navCloseTimer);
  155.       var subnavHeight = _self.secondaryNav.height();
  156.       var hideGutter = false;
  157.       if (subnavHeight) {
  158.         var currentNav = _self.subNavArry[_self.cInx],
  159.           links = currentNav.tertiary,
  160.           scrollTop = $(this).scrollTop(),
  161.           maxScroll = subnavHeight;
  162.         if (scrollTop <= maxScroll) {
  163.           //                                    links.css({'margin-top': (scrollTop * -1 + 20) + 'px'});
  164.           //                                    currentNav.find('th').css({'top': scrollTop + 'px'});
  165.           //_self.secondaryNav.css({'height' : 'auto'});
  166.           _self.showNavBorder();
  167.           hideGutter = true;
  168.           if (scrollTop == 0) {
  169.             $('.scrollNav').addClass(UNIQLONAV.CONSTANTS.HOVER_CLS);
  170.           }
  171.         } else if (scrollTop > maxScroll) {
  172.           _self.navBar.css({
  173.             'display': 'none'
  174.           });
  175.           $('#primary nav a.hover').addClass('scrollNav').removeClass(UNIQLONAV.CONSTANTS.HOVER_CLS);
  176.           hideGutter = false;
  177.         }
  178.       }
  179.       _self.toggleGutter(hideGutter);
  180.     });
  181.   },
  182.   toggleGutter: function (hide) { //hide gutter below the primary header
  183.     if (hide) {
  184.       this.primaryHeader.removeClass('gutter');
  185.     } else {
  186.       this.primaryHeader.addClass('gutter');
  187.     }
  188.   },
  189.   attachEvtBody: function () {
  190.     $('body').on('click', 'div', function (e) {
  191.       var clickedElm = $(e.target);
  192.       if (clickedElm.attr('href')) {
  193.         clickedElm.attr('href') != "#";
  194.         return;
  195.       }
  196.       if (!$(UNIQLONAV.CONSTANTS.SEARCH_SELECTOR).find('input').is(':focus')) {
  197.         $(UNIQLONAV.CONSTANTS.SEARCH_SELECTOR).removeClass(UNIQLONAV.CONSTANTS.SEARCHSELECTED);
  198.         return false;
  199.       }
  200.     });
  201.   },
  202.   unSelectPrimaryNav: function (el) {
  203.     var hoverNav = this.primaryNav.find('.' + this._c.HOVER_CLS);
  204.     if (el != null && hoverNav.html() == el.html()) {
  205.       return 1;
  206.     }
  207.     if (hoverNav.hasClass(this._c.CURRENT_CLS)) {
  208.       hoverNav.removeClass(this._c.HOVER_CLS);
  209.     } else {
  210.       hoverNav.animate({
  211.         opacity: 0.1
  212.       }, {
  213.         duration: 150,
  214.         easing: 'linear',
  215.         complete: function () {
  216.           $(this).removeClass(UNIQLONAV.CONSTANTS.HOVER_CLS).css({
  217.             'opacity': 1
  218.           });
  219.         }
  220.       });
  221.     }
  222.   },
  223.   hideNav: function () {
  224.     var _self = this,
  225.       sn = this.secondaryNav;
  226.     if (sn.height()) {
  227.       this.subNavArry[this.cInx].tertiary.animate({
  228.         top: '-500px'
  229.       }, 200);
  230.       sn.animate({
  231.         height: '33px'
  232.       }, 200, function () {
  233.         _self.subNavArry[_self.cInx].secondary.animate({
  234.           top: '-40px'
  235.         }, 150);
  236.         _self.subNavArry[_self.cInx].animate({
  237.           marginTop: '-33px'
  238.         }, 150);
  239.         sn.animate({
  240.           height: 0
  241.         }, 150, function () {
  242.           _self.subNavArry[_self.cInx].removeClass(_self._c.CURRENT_SUBNAV_CLS);
  243.           _self.unSelectPrimaryNav();
  244.         });
  245.         _self.animateShrinkNavBar(_self.search.outerWidth());
  246.       });
  247.       //this.animateContent(0, 100);
  248.       this.mainSection.animate({
  249.         marginTop: 0
  250.       }, {
  251.         duration: 100
  252.       });
  253.     }
  254.   },
  255.   animateShrinkNavBar: function (searchWidth) {
  256.     var _self = this;
  257.     this.navBar.animate({
  258.       backgroundColor: '#000000',
  259.       width: (searchWidth + 20),
  260.       marginLeft: '60px'
  261.     }, {
  262.       duration: 250,
  263.       easing: 'linear',
  264.       complete: function () {
  265.         _self.navBar.animate({
  266.           width: searchWidth
  267.         }, 200, function () {
  268.           _self.navBar.css({
  269.             'display': 'none'
  270.           });
  271.         });
  272.       }
  273.     });
  274.   },
  275.   showNav: function (el) {
  276.     var prevNav = this.subNavArry[this.cInx],
  277.       new_cInx = el.index();
  278.     this.stopAnimate();
  279.     if (prevNav != null && this.cInx == new_cInx) {
  280.       clearTimeout(this.navCloseTimer);
  281.       if (this.secondaryNav.height() == prevNav.height()) {
  282.         return 1;
  283.       }
  284.     } else {
  285.       this.cInx = new_cInx;
  286.       $("#primary li a").removeClass('scrollNav');
  287.     }
  288.     if ($(window).scrollTop() > 0) {
  289.       //window.scrollTo(0, 0);
  290.     }
  291.     var _self = this,
  292.       currentNavHeight = this.secondaryNav.height(),
  293.       newNavHeight = this.subNavArry[this.cInx].height(),
  294.       links = this.subNavArry[this.cInx].find('a'),
  295.       duration = 300;
  296.     if (currentNavHeight) {
  297.       duration = (Math.abs(currentNavHeight - newNavHeight) * 2);
  298.       prevNav.removeClass(this._c.CURRENT_SUBNAV_CLS);
  299.     }
  300.     this.resetSubNav();
  301.     links.css({
  302.       'opacity': 0
  303.     });
  304.     this.subNavArry[this.cInx].addClass(this._c.CURRENT_SUBNAV_CLS);
  305.     this.animateSubNav(links, newNavHeight, duration);
  306.     this.animateContent(newNavHeight, duration)
  307.   },
  308.   animateSubNav: function (links, newNavHeight, duration) {
  309.     var _self = this;
  310.     this.secondaryNav.animate({
  311.       height: newNavHeight + 'px'
  312.     }, {
  313.       duration: duration,
  314.       easing: UNIQLONAV.CONSTANTS.EASEMETHOD,
  315.       complete: function () {
  316.         links.each(function (inx) {
  317.           $(this).delay(5 * inx).animate({
  318.             opacity: 1
  319.           }, {
  320.             duration: 150,
  321.             easing: 'linear'
  322.           });
  323.         });
  324.         _self.showNavBorder();
  325.       }
  326.     });
  327.   },
  328.   animateContent: function (offSet, duration) {
  329.     this.mainSection.animate({
  330.       marginTop: offSet
  331.     }, {
  332.       duration: duration,
  333.       easing: UNIQLONAV.CONSTANTS.EASEMETHOD
  334.     });
  335.     //this.mainSection
  336.   },
  337.   resetSubNav: function () {
  338.     this.showNavBorder();
  339.     this.toggleGutter(true);
  340.     this.subNavArry[this.cInx].css({
  341.       'margin-top': 0
  342.     });
  343.     this.subNavArry[this.cInx].secondary.css({
  344.       'top': 0
  345.     });
  346.     this.subNavArry[this.cInx].tertiary.css({
  347.       'top': 0,
  348.       'margin-top': '20px'
  349.     });
  350.     this.secondaryNav.css({
  351.       'opacity': 1,
  352.       'margin-top': 0
  353.     });
  354.   },
  355.   showNavBorder: function () {
  356.     this.navBar.css({
  357.       'display': 'block',
  358.       'background-color': '#ff0000',
  359.       'width': '100%',
  360.       'opacity': 1,
  361.       'margin-left': 0
  362.     });
  363.   },
  364.   stopAnimate: function () {
  365.     if (this.subNavArry[this.cInxx]) {
  366.       this.subNavArry[this.cInx].tertiary.stop(true, true);
  367.       this.subNavArry[this.cInx].secondary.stop(true, true);
  368.       this.secondaryNav.stop();
  369.       //this.navBar.stop();
  370.     }
  371.   },
  372.   animateCustomerMenus: function () {},
  373.   searchFilterActions: function () {
  374.     $('.searchColors ul li span').click(function (e) {
  375.       $('.searchColors ul li span').removeClass('current');
  376.       $(this).addClass('current');
  377.     });
  378.     $('.sortBy').click(function (e) {
  379.       if (!$(this).hasClass('open')) {
  380.         e.preventDefault();
  381.         $(this).toggleClass('open');
  382.       }
  383.     }).on('mouseleave', function (e) {
  384.       $(this).removeClass('open');
  385.     });
  386.     $('#searchWrapper .searchGender label, #searchWrapper .searchCategories label, #searchWrapper .searchSizes label, #searchWrapper .searchPrice label').click(function (e) {
  387.       var name = $(this).attr('for');
  388.       var isChecked = $(this).hasClass('checked');
  389.       if (!isChecked) {
  390.         $(this).addClass('checked');
  391.         $(this).parent().find('input').attr('checked', true);
  392.       } else {
  393.         $(this).removeClass('checked');
  394.         $(this).parent().find('input').attr('checked', false);
  395.       }
  396.     });
  397.     $('#searchWrapper .searchColors label').click(function (e) {
  398.       var name = $(this).attr('for');
  399.       var isChecked = $(this).hasClass('checked');
  400.       if (!isChecked) {
  401.         $(this).addClass('checked');
  402.         $(this).parent().find('input').attr('checked', true);
  403.       } else {
  404.         $(this).removeClass('checked');
  405.         $(this).parent().find('input').attr('checked', false);
  406.       }
  407.     });
  408.     $('.clearAllBtn').click(function (e) {
  409.       $('#searchWrapper label').parent().find('label').removeClass('checked');
  410.       $('#searchWrapper input').attr('checked', false);
  411.     });
  412.     $('#searchWrapper').click(function (e) {
  413. /* var nodeType = e.target.nodeName;
  414.          if($(this).hasClass('open') && nodeType == 'DIV'){ }
  415.          else if(!$(this).hasClass('open') && nodeType == 'DIV'){ $(this).addClass('open');  $(this).transition({ height: '310px' }, 250, function() { $('#searchWrapper #searchColumnWrapper').show(); }); }
  416.          */
  417.     });
  418. /*$('#searchWrapper').on('mouseleave', function(e){
  419.                  var nodeType = e.target.nodeName;
  420.                  $('#searchWrapper #searchColumnWrapper').hide();
  421.                  $(this).removeClass('open');
  422.                 $(this).transition({ height: '70px' }, 250, function() { });
  423.         });     */
  424.   },
  425.   ie9Check: function () {
  426.     if ($.browser.msie && $.browser.version == "9.0") {
  427.       $('html').addClass('ie-9');
  428.     };
  429.   }
  430. };
  431. $(function () {
  432.   var uNav = new UNIQLONAV(); /** footer should be refactored **/
  433.   var footer = $('#gFooter'),
  434.     footerBar = $('#footerBar');
  435.   footerBar.on('click', function (e) {
  436.     footer.toggleClass('expand');
  437.     $('#gFooter .content').slideToggle('fast');
  438.     if (footer.hasClass('expand')) {
  439.       footerBar.removeClass('hover');
  440.     }
  441.   });
  442.   footer.on('mouseleave', function (e) {
  443.     if (footer.hasClass('expand')) {
  444.       footer.removeClass('expand');
  445.       $('#gFooter .content').hide('fast');
  446.     } else if (footerBar.hasClass('hover')) {
  447.       footerBar.switchClass('hover', '', 400);
  448.     }
  449.   }).on('mouseenter', function (e) {
  450.     if (!footer.hasClass('expand')) {
  451.       footerBar.addClass('hover');
  452.     } else {
  453.       footerBar.removeClass('hover');
  454.     }
  455.   });
  456.   $('.region').on('click', 'a', function (e) {
  457.     if (!$(e.delegateTarget).hasClass('open')) {
  458.       e.preventDefault();
  459.       $(e.delegateTarget).toggleClass('open');
  460.     } else {
  461.       document.location = $(this).attr('href');
  462.     }
  463.   }).on('mouseleave', function (e) {
  464.     $(this).removeClass('open');
  465.   });
  466.   $(document).on('keyup', function (e) {
  467.     // show footer hotkey F7
  468.     if ((e.keyCode || e.which) == 118) {
  469.       footerBar.trigger('click');
  470.     }
  471.     if ((e.keyCode || e.which) == 119) {
  472.       $('#primary li.play').trigger('hover');
  473.     }
  474.   });
  475. });
  476.  
  477. function showDiv(div) {
  478.   $('#' + div).slideDown('normal', function () {
  479.     $(".shoppingbag").addClass('shoppingbaghover');
  480.   });
  481. }
  482.  
  483. function hideDiv(div) {
  484.   $('#' + div).slideUp('normal', function () {
  485.     if (div == 'customerItems') {
  486.       $('.bagcount').removeClass('open');
  487.     }
  488.     $(".shoppingbag").removeClass('shoppingbaghover');
  489.   });
  490. }
create a new version of this paste RAW Paste Data