• 1.
    (function($) {
  • 2.
     
  • 3.
      // @codekit-prepend "jquery.fitvids.js"
  • 4.
      // @codekit-prepend "placeholder.js"
  • 5.
      // @codekit-prepend "highlighting-fixes.js"
  • 6.
      // @codekit-append "prism.js"
  • 7.
     
  • 8.
      //--------------------
  • 9.
      //  Internal Scripts
  • 10.
      //--------------------
  • 11.
     
  • 12.
      // HeaderUI (private object)
  • 13.
      var HeaderUI = {
  • 14.
     
  • 15.
        config: {
  • 16.
          illustratorLink: $(".illustrator-link"),
  • 17.
          headerAreas: $(".deals-header, .almanac-title, .videos-title, .snippets-title, .demos-title, .gallery-header, .forums-title"),
  • 18.
          timer: 0
  • 19.
        },
  • 20.
     
  • 21.
        init: function() {
  • 22.
     
  • 23.
          var headerAreas     = this.config.headerAreas,
  • 24.
              timer           = this.config.timer,
  • 25.
              illustratorLink = this.config.illustratorLink;
  • 26.
     
  • 27.
          illustratorLink.hide();
  • 28.
     
  • 29.
          this.openIllustratorLinkArea(headerAreas, timer, illustratorLink);
  • 30.
          this.closeIllustratorLinkArea(headerAreas, timer);
  • 31.
     
  • 32.
        },
  • 33.
     
  • 34.
        openIllustratorLinkArea: function(headerAreas, timer, illustratorLink) {
  • 35.
     
  • 36.
          headerAreas.mouseenter(function(){
  • 37.
            
  • 38.
            timer = setTimeout(function() {
  • 39.
              illustratorLink.slideDown(200);
  • 40.
            }, 3000);
  • 41.
     
  • 42.
          });
  • 43.
     
  • 44.
        },
  • 45.
     
  • 46.
        closeIllustratorLinkArea: function(headerAreas, timer) {
  • 47.
     
  • 48.
          headerAreas.mouseleave(function(){
  • 49.
            clearTimeout(timer);
  • 50.
          });
  • 51.
     
  • 52.
        }
  • 53.
     
  • 54.
      };
  • 55.
     
  • 56.
      // SearchUI (private object)
  • 57.
      var SearchUI = {
  • 58.
     
  • 59.
        config: {
  • 60.
          body: $("body"),
  • 61.
          search: $(".search"),
  • 62.
          searchForm: $("#search-form"),
  • 63.
          searchOpeners: $(".open-search, #x-search, #refine-search"),
  • 64.
          searchSections: $(".search-parts > a:not(.x-search)"),
  • 65.
          searchField: $(".search-field"),
  • 66.
          openSearch: $(".open-search"),
  • 67.
          closeSearch: $(".close-search")
  • 68.
        },
  • 69.
     
  • 70.
        init: function() {
  • 71.
     
  • 72.
          var searchOpeners = this.config.search.searchOpeners,
  • 73.
            searchSections  = this.config.searchSections,
  • 74.
              searchForm    = this.config.searchForm;
  • 75.
     
  • 76.
          this.handleSearchClick(searchOpeners);
  • 77.
          this.handleSearchPartsClick(searchSections, searchForm);
  • 78.
     
  • 79.
        },
  • 80.
     
  • 81.
        handleSearchClick: function(searchOpeners) {
  • 82.
        
  • 83.
          // Reference to SearchUI
  • 84.
          var self = this;
  • 85.
     
  • 86.
          searchOpeners.click(function(event) {
  • 87.
          
  • 88.
            event.preventDefault();
  • 89.
            self._toggleSearch();
  • 90.
     
  • 91.
            setTimeout(function(){
  • 92.
              self._focusSearchField();
  • 93.
            }, 100);
  • 94.
     
  • 95.
          });
  • 96.
     
  • 97.
        },
  • 98.
     
  • 99.
        // Private method for handleSearchClick
  • 100.
        _toggleSearch: function() {
  • 101.
     
  • 102.
          var body        = this.config.body,
  • 103.
              search      = this.config.search,
  • 104.
              openSearch  = this.config.openSearch,
  • 105.
              closeSearch = this.config.closeSearch;
  • 106.
     
  • 107.
          if (body.hasClass("show-nav")) {
  • 108.
            body.toggleClass("show-nav");
  • 109.
          }
  • 110.
     
  • 111.
          else {
  • 112.
            search.toggleClass("open");
  • 113.
            openSearch.toggle();
  • 114.
            closeSearch.toggle();
  • 115.
          }
  • 116.
     
  • 117.
        },
  • 118.
     
  • 119.
        // Private method for handleSearchClick
  • 120.
        _focusSearchField: function() {
  • 121.
          var searchField = this.config.searchField;
  • 122.
          searchField.focus();
  • 123.
        },
  • 124.
     
  • 125.
        handleSearchPartsClick: function(searchSections, searchForm) {
  • 126.
     
  • 127.
          searchSections.click(function(event) {
  • 128.
     
  • 129.
            var element      = $(event.target),
  • 130.
                newActionURL = element.data("url");
  • 131.
     
  • 132.
            searchForm.attr("action", newActionURL);
  • 133.
            element.addClass("active");
  • 134.
     
  • 135.
          });
  • 136.
     
  • 137.
        }
  • 138.
     
  • 139.
      };
  • 140.
     
  • 141.
      // NavUI (private object)
  • 142.
      var NavUI = {
  • 143.
     
  • 144.
        config: {
  • 145.
          body: $("body"),
  • 146.
          navToggle: $("#show-hide-navigation"),
  • 147.
        },
  • 148.
     
  • 149.
        init: function() {
  • 150.
     
  • 151.
          var navToggle = this.config.navToggle,
  • 152.
              body      = this.config.body;
  • 153.
     
  • 154.
          this.navToggle(navToggle, body);
  • 155.
     
  • 156.
        },
  • 157.
     
  • 158.
        navToggle: function(navToggle, body) {
  • 159.
     
  • 160.
          navToggle.click(function(event) {
  • 161.
     
  • 162.
            event.preventDefault();
  • 163.
            body.toggleClass("showNav");
  • 164.
     
  • 165.
          });
  • 166.
     
  • 167.
        }
  • 168.
     
  • 169.
      };
  • 170.
     
  • 171.
      // CommentUI (private object)
  • 172.
      var CommentsUI = {
  • 173.
     
  • 174.
        config: {
  • 175.
          buriedComments: $(".comment.buried"),
  • 176.
          commentsArea: $("#comments"),
  • 177.
          viewCommentsButton: $("#view-comments-button")
  • 178.
        },
  • 179.
     
  • 180.
        init: function() {
  • 181.
     
  • 182.
          var buriedComments     = this.config.buriedComments,
  • 183.
              commentsArea       = this.config.comments.commentsArea,
  • 184.
              viewCommentsButton = this.config.comment.viewCommentsButton;
  • 185.
     
  • 186.
          this.revealComment(buriedComments);
  • 187.
          this.revealCommentsArea(commentsArea, viewCommentsButton);
  • 188.
     
  • 189.
        },
  • 190.
     
  • 191.
        revealComment: function(buriedComments) {
  • 192.
     
  • 193.
          buriedComments.click(function(event) {
  • 194.
            $(event.target).removeClass("buried");
  • 195.
          });
  • 196.
          
  • 197.
        },
  • 198.
     
  • 199.
        revealCommentsArea: function(commentsArea, viewCommentsButton) {
  • 200.
     
  • 201.
          viewCommentsButton.click(function(event) {
  • 202.
     
  • 203.
            event.preventDefault();
  • 204.
            commentsArea.show();
  • 205.
            viewCommentsButton.hide();
  • 206.
     
  • 207.
          });
  • 208.
     
  • 209.
        }
  • 210.
     
  • 211.
      };
  • 212.
     
  • 213.
      // BindUIActions (public object)
  • 214.
      var BindUIActions = {
  • 215.
     
  • 216.
        init: function() {
  • 217.
     
  • 218.
          HeaderUI.init();
  • 219.
          SearchUI.init();
  • 220.
          NavUI.init();
  • 221.
          CommentsUI.init();
  • 222.
     
  • 223.
        }
  • 224.
     
  • 225.
      };
  • 226.
     
  • 227.
      //--------------------
  • 228.
      //  External Scripts
  • 229.
      //--------------------
  • 230.
     
  • 231.
      // MakeVideosFluid (stand-alone object)
  • 232.
      var MakeVideosFluidWidth = {
  • 233.
      
  • 234.
        config: {
  • 235.
          videoWrappers: $("article, .photo-grid, .single-video-wrapper, .gallery-grid .grid-5-6")        
  • 236.
        },
  • 237.
     
  • 238.
        init: function() {
  • 239.
          var videoWrappers = this.config.videoWrappers;
  • 240.
     
  • 241.
          videoWrappers.fitVids({
  • 242.
            customSelector: "video"
  • 243.
          });
  • 244.
     
  • 245.
        }
  • 246.
     
  • 247.
      };
  • 248.
     
  • 249.
      // PolyFillPlaceHolders (stand-alone object)
  • 250.
      var PolyfillPlaceholders = {
  • 251.
     
  • 252.
        config: {
  • 253.
          allInputs: $("input, textarea")
  • 254.
        },
  • 255.
     
  • 256.
        init: function() {
  • 257.
          var allInputs = this.config.allInputs;
  • 258.
          allInputs.placeholder();
  • 259.
        }
  • 260.
     
  • 261.
      };
  • 262.
      
  • 263.
      //------------------
  • 264.
      //  Initialization
  • 265.
      //------------------
  • 266.
     
  • 267.
      $(document).ready(function() {
  • 268.
       
  • 269.
        BindUIActions.init();
  • 270.
        MakeVideosFluidWidth.init();
  • 271.
        PolyfillPlaceholders.init();
  • 272.
     
  • 273.
      });
  • 274.
     
  • 275.
    })(jQuery);
(function($) { // @codekit-prepend "jquery.fitvids.js" // @codekit-prepend "placeholder.js" // @codekit-prepend "highlighting-fixes.js" // @codekit-append "prism.js" //-------------------- // Internal Scripts //-------------------- // HeaderUI (private object) var HeaderUI = { config: { illustratorLink: $(".illustrator-link"), headerAreas: $(".deals-header, .almanac-title, .videos-title, .snippets-title, .demos-title, .gallery-header, .forums-title"), timer: 0 }, init: function() { var headerAreas = this.config.headerAreas, timer = this.config.timer, illustratorLink = this.config.illustratorLink; illustratorLink.hide(); this.openIllustratorLinkArea(headerAreas, timer, illustratorLink); this.closeIllustratorLinkArea(headerAreas, timer); }, openIllustratorLinkArea: function(headerAreas, timer, illustratorLink) { headerAreas.mouseenter(function(){ timer = setTimeout(function() { illustratorLink.slideDown(200); }, 3000); }); }, closeIllustratorLinkArea: function(headerAreas, timer) { headerAreas.mouseleave(function(){ clearTimeout(timer); }); } }; // SearchUI (private object) var SearchUI = { config: { body: $("body"), search: $(".search"), searchForm: $("#search-form"), searchOpeners: $(".open-search, #x-search, #refine-search"), searchSections: $(".search-parts > a:not(.x-search)"), searchField: $(".search-field"), openSearch: $(".open-search"), closeSearch: $(".close-search") }, init: function() { var searchOpeners = this.config.search.searchOpeners, searchSections = this.config.searchSections, searchForm = this.config.searchForm; this.handleSearchClick(searchOpeners); this.handleSearchPartsClick(searchSections, searchForm); }, handleSearchClick: function(searchOpeners) { // Reference to SearchUI var self = this; searchOpeners.click(function(event) { event.preventDefault(); self._toggleSearch(); setTimeout(function(){ self._focusSearchField(); }, 100); }); }, // Private method for handleSearchClick _toggleSearch: function() { var body = this.config.body, search = this.config.search, openSearch = this.config.openSearch, closeSearch = this.config.closeSearch; if (body.hasClass("show-nav")) { body.toggleClass("show-nav"); } else { search.toggleClass("open"); openSearch.toggle(); closeSearch.toggle(); } }, // Private method for handleSearchClick _focusSearchField: function() { var searchField = this.config.searchField; searchField.focus(); }, handleSearchPartsClick: function(searchSections, searchForm) { searchSections.click(function(event) { var element = $(event.target), newActionURL = element.data("url"); searchForm.attr("action", newActionURL); element.addClass("active"); }); } }; // NavUI (private object) var NavUI = { config: { body: $("body"), navToggle: $("#show-hide-navigation"), }, init: function() { var navToggle = this.config.navToggle, body = this.config.body; this.navToggle(navToggle, body); }, navToggle: function(navToggle, body) { navToggle.click(function(event) { event.preventDefault(); body.toggleClass("showNav"); }); } }; // CommentUI (private object) var CommentsUI = { config: { buriedComments: $(".comment.buried"), commentsArea: $("#comments"), viewCommentsButton: $("#view-comments-button") }, init: function() { var buriedComments = this.config.buriedComments, commentsArea = this.config.comments.commentsArea, viewCommentsButton = this.config.comment.viewCommentsButton; this.revealComment(buriedComments); this.revealCommentsArea(commentsArea, viewCommentsButton); }, revealComment: function(buriedComments) { buriedComments.click(function(event) { $(event.target).removeClass("buried"); }); }, revealCommentsArea: function(commentsArea, viewCommentsButton) { viewCommentsButton.click(function(event) { event.preventDefault(); commentsArea.show(); viewCommentsButton.hide(); }); } }; // BindUIActions (public object) var BindUIActions = { init: function() { HeaderUI.init(); SearchUI.init(); NavUI.init(); CommentsUI.init(); } }; //-------------------- // External Scripts //-------------------- // MakeVideosFluid (stand-alone object) var MakeVideosFluidWidth = { config: { videoWrappers: $("article, .photo-grid, .single-video-wrapper, .gallery-grid .grid-5-6") }, init: function() { var videoWrappers = this.config.videoWrappers; videoWrappers.fitVids({ customSelector: "video" }); } }; // PolyFillPlaceHolders (stand-alone object) var PolyfillPlaceholders = { config: { allInputs: $("input, textarea") }, init: function() { var allInputs = this.config.allInputs; allInputs.placeholder(); } }; //------------------ // Initialization //------------------ $(document).ready(function() { BindUIActions.init(); MakeVideosFluidWidth.init(); PolyfillPlaceholders.init(); }); })(jQuery);

Copy Code to Clipboard Raw

Sign-in or Create a Free Account.

Snippi uses Twitter or Facebook to register and create accounts. Registration will enable you to keep track of your snippets. We never spam your timeline or wall. Ever.

Sign-in with Facebook Sign-in with Twitter