git.roojs.org Git - ratchet/blob - docs/js/docs.js

   1 $(function() {
   2
   3   var doc;
   4   var iphone;
   5   var windowWidth;
   6   var windowHeight;
   7   var pageHeight;
   8   var contentPadding;
   9   var footerHeight;
  10   var noticeBanner;
  11   var componentsList;
  12   var navComponentLinks;
  13   var contentSection;
  14   var currentActive;
  15   var topCache;
  16   var eventListeners;
  17
  18   prettyPrint();
  19
  20   var initialize = function  () {
  21     currentActive        = 0;
  22     topCache             = [];
  23     win                  = $(window);
  24     doc                  = $(document);
  25     bod                  = $(document.body)
  26     iphone               = iphone || $('.iphone');
  27     noticeBanner         = $('.notice-banner');
  28     navComponentLinks    = $('.nav-components-link');
  29     componentsList       = $('.components-list');
  30     componentLinks       = $('.component-example a');
  31     contentSection       = $('.component');
  32     topCache             = contentSection.map(function () { return $(this).offset().top })
  33     windowHeight         = $(window).height() / 3
  34     pageHeight           = $(document).height();
  35     contentPadding       = parseInt($('.docs-content').css('padding-bottom'));
  36     footerHeight         = $('.docs-footer').outerHeight(false);
  37
  38     iphone.initialLeft   = iphone.offset().left;
  39     iphone.initialTop    = iphone.initialTop || iphone.offset().top;
  40     iphone.dockingOffset = ($(window).height() + 20 + $('.docs-masthead').height() - iphone.height())/2;
  41     checkDesktopContent();
  42     calculateScroll();
  43
  44     if (!eventListeners) addEventListeners();
  45   }
  46
  47   var addEventListeners = function () {
  48     eventListeners = true;
  49
  50     noticeBanner.on('click', function () {
  51       $(this).hide();
  52     });
  53
  54     iphone.on('click', function (e) {
  55       e.preventDefault();
  56     });
  57
  58     navComponentLinks.click(function(e) {
  59       e.stopPropagation();
  60       e.preventDefault();
  61       componentsList.toggleClass('active');
  62     })
  63
  64     doc.on('click', function () {
  65       componentsList.removeClass('active');
  66     })
  67
  68     win.on('scroll', calculateScroll);
  69   }
  70
  71   var checkDesktopContent = function () {
  72     windowWidth = $(window).width();
  73     if (windowWidth <= 768) {
  74       var content = $('.content')
  75       if (content.length > 1) {
  76         $(content[0]).remove()
  77       }
  78     }
  79   }
  80
  81   var calculateScroll = function() {
  82     // if small screen don't worry about this
  83     if (windowWidth <= 768) return
  84
  85     // Save scrollTop value
  86     var contentSectionItem;
  87     var currentTop = win.scrollTop();
  88
  89     // If page is scrolled to bottom near footers
  90     if(pageHeight - currentTop < footerHeight + contentPadding + 1400) {
  91       iphone[0].className = "iphone iphone-bottom";
  92       iphone[0].setAttribute('style','')
  93     } else if((iphone.initialTop - currentTop) <= iphone.dockingOffset) {
  94       iphone[0].className = "iphone iphone-fixed";
  95       iphone.css({top: iphone.dockingOffset})
  96     } else {
  97       iphone[0].className = "iphone"
  98       iphone[0].setAttribute('style','')
  99     }
 100
 101     // Injection of components into phone
 102     for (var l = contentSection.length; l--;) {
 103       if ((topCache[l] - currentTop) < windowHeight) {
 104         if (currentActive == l) return;
 105         currentActive = l;
 106         bod.find('.component.active').removeClass('active');
 107         contentSectionItem = $(contentSection[l])
 108         contentSectionItem.addClass('active')
 109         if(contentSectionItem.attr('id')) {
 110           iphone.attr("id", contentSectionItem.attr('id') + "InPhone");
 111         } else {
 112           iphone.attr("id", "")
 113         }
 114         if (!contentSectionItem.hasClass('informational')) {
 115           updateContent(contentSectionItem.find('.prettyprint').not('.js').text())
 116         }
 117         break
 118       }
 119     }
 120
 121     function updateContent(content) {
 122       $('#iwindow').html(content);
 123     }
 124   }
 125
 126   $(window).on('load resize', initialize);
 127   $(window).on('load', function () { new FingerBlast('.iphone-content'); });
 128 });