Home | History | Annotate | Download | only in design
      1 $(document).ready(function() {
      2   // prep nav expandos
      3   var pagePath = document.location.pathname;
      4   if (pagePath.indexOf(SITE_ROOT) == 0) {
      5     pagePath = pagePath.substr(SITE_ROOT.length);
      6     if (pagePath == '' || pagePath.charAt(pagePath.length - 1) == '/') {
      7       pagePath += 'index.html';
      8     }
      9   }
     10 
     11   if (SITE_ROOT.match(/\.\.\//) || SITE_ROOT == '') {
     12     // If running locally, SITE_ROOT will be a relative path, so account for that by
     13     // finding the relative URL to this page. This will allow us to find links on the page
     14     // leading back to this page.
     15     var pathParts = pagePath.split('/');
     16     var relativePagePathParts = [];
     17     var upDirs = (SITE_ROOT.match(/(\.\.\/)+/) || [''])[0].length / 3;
     18     for (var i = 0; i < upDirs; i++) {
     19       relativePagePathParts.push('..');
     20     }
     21     for (var i = 0; i < upDirs; i++) {
     22       relativePagePathParts.push(pathParts[pathParts.length - (upDirs - i) - 1]);
     23     }
     24     relativePagePathParts.push(pathParts[pathParts.length - 1]);
     25     pagePath = relativePagePathParts.join('/');
     26   } else {
     27     // Otherwise the page path should be an absolute URL.
     28     pagePath = SITE_ROOT + pagePath;
     29   }
     30 
     31   // select current page in sidenav and set up prev/next links if they exist
     32   var $selNavLink = $('#nav').find('a[href="' + pagePath + '"]');
     33   if ($selNavLink.length) {
     34     $selListItem = $selNavLink.closest('li');
     35 
     36     $selListItem.addClass('selected');
     37     $selListItem.closest('li.nav-section').addClass('expanded');
     38 
     39     // set up prev links
     40     var $prevLink = [];
     41     var $prevListItem = $selListItem.prev('li');
     42     if ($prevListItem.length) {
     43       if ($prevListItem.hasClass('nav-section')) {
     44         // jump to last topic of previous section
     45         $prevLink = $prevListItem.find('a:last');
     46       } else {
     47         // jump to previous topic in this section
     48         $prevLink = $prevListItem.find('a:eq(0)');
     49       }
     50     } else {
     51       // jump to this section's index page (if it exists)
     52       $prevLink = $selListItem.parents('li').find('a');
     53     }
     54 
     55     if ($prevLink.length) {
     56       var prevHref = $prevLink.attr('href');
     57       if (prevHref == SITE_ROOT + 'index.html') {
     58         // Don't show Previous when it leads to the homepage
     59         $('.prev-page-link').hide();
     60       } else {
     61         $('.prev-page-link').attr('href', prevHref).show();
     62       }
     63     } else {
     64       $('.prev-page-link').hide();
     65     }
     66 
     67     // set up next links
     68     var $nextLink = [];
     69     if ($selListItem.hasClass('nav-section')) {
     70       // we're on an index page, jump to the first topic
     71       $nextLink = $selListItem.find('ul').find('a:eq(0)')
     72     } else {
     73       // jump to the next topic in this section (if it exists)
     74       $nextLink = $selListItem.next('li').find('a:eq(0)');
     75       if (!$nextLink.length) {
     76         // no more topics in this section, jump to the first topic in the next section
     77         $nextLink = $selListItem.parents('li').next('li.nav-section').find('a:eq(0)');
     78       }
     79     }
     80     if ($nextLink.length) {
     81       $('.next-page-link').attr('href', $nextLink.attr('href')).show();
     82     } else {
     83       $('.next-page-link').hide();
     84     }
     85   }
     86 
     87   // Set up expand/collapse behavior
     88   $('#nav li.nav-section').click(function() {
     89     if ($(this).hasClass('expanded')) {
     90       return;
     91     }
     92 
     93     // hide other
     94     var $old = $('#nav li.nav-section.expanded');
     95     if ($old.length) {
     96       var $oldUl = $old.children('ul');
     97       $oldUl.css('height', $oldUl.height() + 'px');
     98       window.setTimeout(function() {
     99         $oldUl
    100             .addClass('animate-height')
    101             .css('height', '');
    102       }, 0);
    103       $old.removeClass('expanded');
    104     }
    105 
    106     // show me
    107     $(this).addClass('expanded');
    108     var $ul = $(this).children('ul');
    109     var expandedHeight = $ul.height();
    110     $ul
    111         .removeClass('animate-height')
    112         .css('height', 0);
    113     window.setTimeout(function() {
    114       $ul
    115           .addClass('animate-height')
    116           .css('height', expandedHeight + 'px');
    117     }, 0);
    118   });
    119 
    120   // Stop expand/collapse behavior when clicking on nav section links (since we're navigating away
    121   // from the page)
    122   $('.nav-section-header').find('a:eq(0)').click(function(evt) {
    123     window.location.href = $(this).attr('href');
    124     return false;
    125   });
    126 
    127   // Set up play-on-hover <video> tags.
    128   $('video.play-on-hover').bind('click', function(){
    129     $(this).get(0).load(); // in case the video isn't seekable
    130     $(this).get(0).play();
    131   });
    132 
    133   // Set up tooltips
    134   var TOOLTIP_MARGIN = 10;
    135   $('acronym').each(function() {
    136     var $target = $(this);
    137     var $tooltip = $('<div>')
    138         .addClass('tooltip-box')
    139         .text($target.attr('title'))
    140         .hide()
    141         .appendTo('body');
    142     $target.removeAttr('title');
    143 
    144     $target.hover(function() {
    145       // in
    146       var targetRect = $target.offset();
    147       targetRect.width = $target.width();
    148       targetRect.height = $target.height();
    149 
    150       $tooltip.css({
    151         left: targetRect.left,
    152         top: targetRect.top + targetRect.height + TOOLTIP_MARGIN
    153       });
    154       $tooltip.addClass('below');
    155       $tooltip.show();
    156     }, function() {
    157       // out
    158       $tooltip.hide();
    159     });
    160   });
    161 
    162   // Set up <h2> deeplinks
    163   $('h2').click(function() {
    164     var id = $(this).attr('id');
    165     if (id) {
    166       document.location.hash = id;
    167     }
    168   });
    169 
    170   // Set up fixed navbar
    171   var navBarIsFixed = false;
    172   $(window).scroll(function() {
    173     var scrollTop = $(window).scrollTop();
    174     var navBarShouldBeFixed = (scrollTop > (100 - 40));
    175     if (navBarIsFixed != navBarShouldBeFixed) {
    176       if (navBarShouldBeFixed) {
    177         $('#nav')
    178             .addClass('fixed')
    179             .prependTo('#page-container');
    180       } else {
    181         $('#nav')
    182             .removeClass('fixed')
    183             .prependTo('#nav-container');
    184       }
    185       navBarIsFixed = navBarShouldBeFixed;
    186     }
    187   });
    188 });