Donate to e Foundation | Murena handsets with /e/OS | Own a part of Murena! Learn more

Commit 20cf2a91 authored by Scott Main's avatar Scott Main
Browse files

update sticky nav to sync with sidenav 

and build the breadcrumbs dynamically

Change-Id: Ib008d4606a8e82c468be75c051a8a9e623dc7c22
parent 46b443ac

tools/droiddoc/templates-sdk-dyn/assets/css/default.css

+162 −186
Original line number Diff line number Diff line
@@ -98,7 +98,8 @@ body { 
#devdoc-nav.fixed {

  position: fixed;

  margin:0;

  top: 20px; }

  top: 65px; /* sticky-header height + 20px gutter */

}



#devdoc-nav span.small {

  font-size:12px;
@@ -1365,8 +1366,7 @@ color-stop(50%, #acbc00), color-stop(50%, #bdde00), color-stop(100%, #bdde00)); 
  .training-nav-top, .training-nav-bottom,

  #doc-col .content-footer,

  .nav-x, .nav-y,

  .paging-links,

  a.totop {

  .paging-links {

      display: none !important;

  }
@@ -1632,168 +1632,6 @@ Header, Login, Nav-X, Search 
  color: #33b5e5

}



/************ STICKY NAV BAR ******************/



#header-wrapper {

  background: #f9f9f9;

  margin: 0 -10px 0 -10px;

  padding: 31px 10px 0px 10px;

  position: relative;

}

#header-wrapper #nav-x div.wrap {

  max-width: 940px;

  height: 38px;

}

#header-wrapper #nav-x ul.nav-x li {

  margin-right: 36px !important;

  margin-top: 5px;

  margin-bottom: 0px;

  height: 30px;

}

#header-wrapper #nav-x > div.wrap ul.nav-x li.active  {

  color: #669900;

  border-bottom: 3px solid #669900;

}

#header-wrapper #nav-x > div.wrap ul.nav-x li.active a {

  color: #669900;

}

#header-wrapper #nav-x > div.wrap ul.nav-x a {

  font-size: 14.5px;

}

#header-wrapper .developer-console-btn {

  float: right;

  background: #fefefe;

  border-radius: 4px;

  padding: 8px 14px;

  box-shadow: 1px 1px 0px #7a7a7a;

  font-size: 14px;

  margin-top: -6px;

  cursor: pointer;

  color: #464646;

  margin-right: 20px;

}

/* not currently used */

#header-wrapper .shadow {

  width: 1034px;

  height: 4px;

  position: absolute;

  left: 50%;

  margin-left: -517px;

  bottom: -4px;

  background-image: url(../images/header-shadow.png);

}



#context {

  clear: both;

  padding-top: 14px;

}

#context .breadcrumb {

  float: left;

  margin-bottom: 10px;

}

#context .util {

  float: right;

  margin-right: 20px;

}



.breadcrumb {

  list-style: none;

  margin: 0;

  padding: 0;

  position: relative;

}

.breadcrumb li {

  float: left;

  padding: 0 20px 0 0;

  color: #000;

}

.breadcrumb li a {

  color: #000;

}

.breadcrumb li:after {

  content: url(../images/breadcrumb.png);

  position: relative;

  top: 1px;

  left: 10px;

  width: 5px;

  height: 10px;

}

.breadcrumb li.current {

  font-weight: 700;

}

.breadcrumb li.current:after {

  display: none;

}



/* Sticky Nav overrides */

.sticky-menu {

  position: fixed;

  width: 940px;

  height: 0px;

  z-index: 51;

  top: 12px;

}

#sticky-header {

  display: none;

  padding: 0 10px;

  position: fixed;

  background: #f9f9f9;

  top: 0px;

  left: 0px;

  right: 0px;

  height: 45px;

  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);

  border-bottom: 1px solid #a5c43a;

  z-index: 50;

  opacity: 0;

  -webkit-transition: opacity 0.25s;

  -moz-transition: opacity 0.25s;

  -o-transition: opacity 0.25s;

  transition: opacity 0.25s;

}

#sticky-header.design {

  border-bottom: 1px solid #33b5e5;

}

#sticky-header.develop {

  border-bottom: 1px solid #F80;

}

#sticky-header.distribute {

  border-bottom: 1px solid #9C0;

}

#sticky-header > div {

  overflow: hidden;

  *zoom: 1;

  width: 940px;

  margin: 0 auto;

  clear: both;

  padding-top: 9px;

}

#sticky-header > div .logo {

  float: left;

  width: 26px;

  height: 25px;

  background: url(../images/dac_logo.png);

  z-index: 52;

  position: relative;

}

#sticky-header > div .top {

  float: left;

  width: 38px;

  height: 38px;

  position: relative;

  background: url(../images/styles/gototop.png);

  z-index: 52;

}

#sticky-header > div .breadcrumb {

  float: left;

  padding: 0 0 0 10px;

  border-left: 1px solid #d2d2d2;

  line-height: 24px;

  font-size: 14px;

  position: relative;

  top: 0px;

  z-index: 52;

}



/* --------------------------------------------------------------------------

Buttons
@@ -3034,26 +2872,6 @@ div.design-announce p { 
  margin:0 0 10px;

}



#devdoc-nav a.totop {

  display:block;

  top:0;

  width:inherit;

  background: transparent url(../images/styles/gototop.png) no-repeat scroll 50% 50%;

  text-indent:-9999em;

}

#devdoc-nav a.totop {

  position:fixed;

  display:none;

}

#devdoc-nav a.totop:hover {

  background-color:#33B5E5;

}



.content-footer a.totop {

  text-transform:uppercase;

  line-height:30px;

}



.expandable {

  height:34px;

  padding-left:20px;
@@ -4118,13 +3936,171 @@ EndColorStr='#ececec'); 
  z-index:100;

}



}









/************ STICKY NAV BAR ******************/



#header-wrapper {

  background: #f9f9f9;

  margin: 0 -10px 0 -10px;

  padding: 31px 10px 0px 10px;

  position: relative;

}

#header-wrapper #nav-x div.wrap {

  max-width: 940px;

  height: 38px;

}

#header-wrapper #nav-x ul.nav-x li {

  margin-right: 36px !important;

  margin-top: 5px;

  margin-bottom: 0px;

  height: 30px;

}

#header-wrapper #nav-x > div.wrap ul.nav-x li.active  {

  color: #669900;

  border-bottom: 3px solid #669900;

}

#header-wrapper #nav-x > div.wrap ul.nav-x li.active a {

  color: #669900;

}

#header-wrapper #nav-x > div.wrap ul.nav-x a {

  font-size: 14.5px;

}

#header-wrapper .developer-console-btn {

  float: right;

  background: #fefefe;

  border-radius: 4px;

  padding: 8px 14px;

  box-shadow: 1px 1px 0px #7a7a7a;

  font-size: 14px;

  margin-top: -6px;

  cursor: pointer;

  color: #464646;

  margin-right: 20px;

}

/* not currently used */

#header-wrapper .shadow {

  width: 1034px;

  height: 4px;

  position: absolute;

  left: 50%;

  margin-left: -517px;

  bottom: -4px;

  background-image: url(../images/header-shadow.png);

}



#context {

  clear: both;

  padding-top: 14px;

}

#context .breadcrumb {

  float: left;

  margin-bottom: 10px;

}

#context .util {

  float: right;

  margin-right: 20px;

}



.breadcrumb {

  list-style: none;

  margin: 0;

  padding: 0;

  position: relative;

}

.breadcrumb li {

  float: left;

  padding: 0 20px 0 0;

  color: #000;

  white-space: nowrap;

}

.breadcrumb li a {

  color: #000;

}

.breadcrumb li:after {

  content: url(../images/breadcrumb.png);

  position: relative;

  top: 1px;

  left: 10px;

  width: 5px;

  height: 10px;

}

.breadcrumb li.current {

  font-weight: 700;

}

.breadcrumb li.current:after {

  display: none;

}



/* Sticky Nav overrides */

.sticky-menu {

  position: fixed;

  width: 940px;

  height: 0px;

  z-index: 51;

  top: 12px;

}

#sticky-header {

  display: none;

  padding: 0 10px;

  position: fixed;

  background: #f9f9f9;

  top: 0px;

  left: 0px;

  right: 0px;

  height: 45px;

  box-shadow: 0px 1px 5px rgba(0, 0, 0, 0.1);

  border-bottom: 1px solid #a5c43a;

  z-index: 50;

}

#sticky-header.design {

  border-bottom: 1px solid #33b5e5;

}

#sticky-header.develop {

  border-bottom: 1px solid #F80;

}

#sticky-header.distribute {

  border-bottom: 1px solid #9C0;

}

#sticky-header > div {

  overflow: hidden;

  *zoom: 1;

  width: 940px;

  margin: 0 auto;

  clear: both;

  padding-top: 9px;

}

#sticky-header > div .logo {

  float: left;

  width: 26px;

  height: 25px;

  background: url(../images/dac_logo.png);

  z-index: 52;

  position: relative;

}

#sticky-header > div .top {

  float: left;

  width: 38px;

  height: 38px;

  position: relative;

  background: url(../images/styles/gototop.png);

  z-index: 52;

}

#sticky-header > div .breadcrumb {

  float: left;

  padding: 0 0 0 10px;

  border-left: 1px solid #d2d2d2;

  line-height: 24px;

  font-size: 14px;

  position: relative;

  top: 0px;

  z-index: 52;

}





}

tools/droiddoc/templates-sdk-dyn/assets/css/fullscreen.css

+20 −9
Original line number Diff line number Diff line
@@ -170,7 +170,7 @@ body { 
  max-width: 100%;

}



#nav-x .wrap,

#header-wrapper #nav-x div.wrap,

#searchResults.wrap {

    max-width:100%;

}
@@ -184,7 +184,18 @@ body { 
  left:20px; /* !important ... for IE i think */

}



#sticky-header {

  padding: 0 20px;

}



#sticky-header > div {

  width: 100%;

}



.sticky-menu {

  width:100%;

  left:-20px;

}





}

tools/droiddoc/templates-sdk-dyn/assets/js/docs.js

+86 −100
Original line number Diff line number Diff line
@@ -221,6 +221,7 @@ $(document).ready(function() { 
  // and highlight the sidenav

  mPagePath = pagePath;

  highlightSidenav();

  buildBreadcrumbs();



  // set up prev/next links if they exist

  var $selNavLink = $('#nav').find('a[href="' + pagePath + '"]');
@@ -405,70 +406,6 @@ false; // navigate across topic boundaries only in design docs 
  });





  // Set up fixed navbar

  var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll

  $(window).scroll(function(event) {

    if ($('#side-nav').length == 0) return;

    if (event.target.nodeName == "DIV") {

      // Dump scroll event if the target is a DIV, because that means the event is coming

      // from a scrollable div and so there's no need to make adjustments to our layout

      return;

    }

    var scrollTop = $(window).scrollTop();

    var headerHeight = $('#header').outerHeight();

    var subheaderHeight = $('#nav-x').outerHeight();

    var searchResultHeight = $('#searchResults').is(":visible") ?

                             $('#searchResults').outerHeight() : 0;

    var totalHeaderHeight = headerHeight + subheaderHeight + searchResultHeight;

    // we set the navbar fixed when the scroll position is beyond the height of the site header...

    var navBarShouldBeFixed = scrollTop > totalHeaderHeight;

    // ... except if the document content is shorter than the sidenav height.

    // (this is necessary to avoid crazy behavior on OSX Lion due to overscroll bouncing)

    if ($("#doc-col").height() < $("#side-nav").height()) {

      navBarShouldBeFixed = false;

    }



    var scrollLeft = $(window).scrollLeft();

    // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match

    if (navBarIsFixed && (scrollLeft != prevScrollLeft)) {

      updateSideNavPosition();

      prevScrollLeft = scrollLeft;

    }



    // Don't continue if the header is sufficently far away

    // (to avoid intensive resizing that slows scrolling)

    if (navBarIsFixed && navBarShouldBeFixed) {

      return;

    }



    if (navBarIsFixed != navBarShouldBeFixed) {

      if (navBarShouldBeFixed) {

        // make it fixed

        var width = $('#devdoc-nav').width();

        $('#devdoc-nav')

            .addClass('fixed')

            .css({'width':width+'px'})

            .prependTo('#body-content');

        // add neato "back to top" button

        $('#devdoc-nav a.totop').css({'display':'block','width':$("#nav").innerWidth()+'px'});



        // update the sidenaav position for side scrolling

        updateSideNavPosition();

      } else {

        // make it static again

        $('#devdoc-nav')

            .removeClass('fixed')

            .css({'width':'auto','margin':''})

            .prependTo('#side-nav');

        $('#devdoc-nav a.totop').hide();

      }

      navBarIsFixed = navBarShouldBeFixed;

    }



    resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance

  });





  var navBarLeftPos;

  if ($('#devdoc-nav').length) {

    setNavBarLeftPos();
@@ -613,6 +550,22 @@ function initExpandableNavItems(rootTag) { 
  });

}





/** Create the list of breadcrumb links in the sticky header */

function buildBreadcrumbs() {

  var $breadcrumbUl =  $("#sticky-header ul.breadcrumb");

  // Add the secondary horizontal nav item, if provided

  var $selectedSecondNav = $("div#nav-x ul.nav-x a.selected").clone().removeClass("selected");

  if ($selectedSecondNav.length) {

    $breadcrumbUl.prepend($("<li>").append($selectedSecondNav))

  }

  // Add the primary horizontal nav

  var $selectedFirstNav = $("div#header-wrap ul.nav-x a.selected").clone().removeClass("selected");

  $breadcrumbUl.prepend($("<li>").append($selectedFirstNav));

}







/** Highlight the current page in sidenav, expanding children as appropriate */

function highlightSidenav() {

  // if something is already highlighted, undo it. This is for dynamic navigation (Samples index)
@@ -725,9 +678,8 @@ function resizeNav(delay) { 
  // Then figure out based on scroll position whether the header is visible

  var windowHeight = $window.height();

  var scrollTop = $window.scrollTop();

  var headerHeight = $('#header').outerHeight();

  var subheaderHeight = $('#nav-x').outerHeight();

  var headerVisible = (scrollTop < (headerHeight + subheaderHeight));

  var headerHeight = $('#header-wrapper').outerHeight();

  var headerVisible = scrollTop < stickyTop;



  // get the height of space between nav and top of window.

  // Could be either margin or top position, depending on whether the nav is fixed.
@@ -737,7 +689,7 @@ function resizeNav(delay) { 
  // Depending on whether the header is visible, set the side nav's height.

  if (headerVisible) {

    // The sidenav height grows as the header goes off screen

    navHeight = windowHeight - (headerHeight + subheaderHeight - scrollTop) - topMargin;

    navHeight = windowHeight - (headerHeight - scrollTop) - topMargin;

  } else {

    // Once header is off screen, the nav height is almost full window height

    navHeight = windowHeight - topMargin;
@@ -929,12 +881,12 @@ function writeCookie(cookie, val, section, expiration) { 
/* 

 * Displays sticky nav bar on pages when dac header scrolls out of view 

 */



var stickyTop;

(function() {

  $(document).ready(function() {



    // Sticky nav position

    var stickyTop = $('#header-wrapper').outerHeight();

    stickyTop = $('#header-wrapper').outerHeight() - $('#sticky-header').outerHeight();

    var sticky = false;

    var hiding = false;

    var $stickyEl = $('#sticky-header');
@@ -943,26 +895,62 @@ function writeCookie(cookie, val, section, expiration) { 
    var lastScroll = 0;

    var autoScrolling = false;



    var prevScrollLeft = 0; // used to compare current position to previous position of horiz scroll



    $(window).scroll(function() {

      // Exit if there's no sidenav

      if ($('#side-nav').length == 0) return;

      // Exit if the mouse target is a DIV, because that means the event is coming

      // from a scrollable div and so there's no need to make adjustments to our layout

      if (event.target.nodeName == "DIV") {

        return;

      }





      var top = $(window).scrollTop();

      // we set the navbar fixed when the scroll position is beyond the height of the site header...

      var shouldBeSticky = top >= stickyTop;

      // ... except if the document content is shorter than the sidenav height.

      // (this is necessary to avoid crazy behavior on OSX Lion due to overscroll bouncing)

      if ($("#doc-col").height() < $("#side-nav").height()) {

        shouldBeSticky = false;

      }



      if (sticky && top < stickyTop) {

      // Don't continue if the header is sufficently far away

      // (to avoid intensive resizing that slows scrolling)

      if (sticky && shouldBeSticky) {

        return;

      }



      // Account for horizontal scroll

      var scrollLeft = $(window).scrollLeft();

      // When the sidenav is fixed and user scrolls horizontally, reposition the sidenav to match

      if (navBarIsFixed && (scrollLeft != prevScrollLeft)) {

        updateSideNavPosition();

        prevScrollLeft = scrollLeft;

      }



      // If sticky header visible and position is now near top, hide sticky

      if (sticky && !shouldBeSticky) {

        sticky = false;

        hiding = true;

        $stickyEl.css({'opacity': 0});

        setTimeout(function() {

        // make the sidenav static again

        $('#devdoc-nav')

            .removeClass('fixed')

            .css({'width':'auto','margin':''})

            .prependTo('#side-nav');

        // delay hide the sticky

        $menuEl.removeClass('sticky-menu');

          $stickyEl.hide();

        $stickyEl.fadeOut(250);

        hiding = false;

        }, 250);

      } else if (!sticky && top >= stickyTop) {



        // update the sidenaav position for side scrolling

        updateSideNavPosition();

      } else if (!sticky && shouldBeSticky) {

        sticky = true;

        $stickyEl.show();

        $stickyEl.fadeIn(10);

        $menuEl.addClass('sticky-menu');



        setTimeout(function() {

          $stickyEl.css({'opacity': 1});

        }, 10);



        // If its a jump then make sure to modify the scroll because of the

        // sticky nav
@@ -970,6 +958,17 @@ function writeCookie(cookie, val, section, expiration) { 
          autoScrolling = true;

          $('body,html').animate({scrollTop:(top = top - 60)}, '250', 'swing', function() { autoScrolling = false; });

        }



        // make the sidenav fixed

        var width = $('#devdoc-nav').width();

        $('#devdoc-nav')

            .addClass('fixed')

            .css({'width':width+'px'})

            .prependTo('#body-content');



        // update the sidenaav position for side scrolling

        updateSideNavPosition();



      } else if (hiding && top < 15) {

        $menuEl.removeClass('sticky-menu');

        $stickyEl.hide();
@@ -977,6 +976,7 @@ function writeCookie(cookie, val, section, expiration) { 
      }



      lastScroll = top;

      resizeNav(250); // pass true in order to delay the scrollbar re-initialization for performance

    });



    // Stack hover states
@@ -988,21 +988,7 @@ function writeCookie(cookie, val, section, expiration) { 
      $cardInfo.css({position: 'absolute', bottom:'0px', left:'0px', right:'0px', overflow:'visible'});

    });



    // Auto scroll anchors and account for sticky nav

    $('a[href^=#]').click(function(e){

      e.preventDefault();

      var tmp = $.attr(this, 'href').substr(1);

      var el = document.getElementById(tmp) ||

        ((tmp = document.getElementsByName(tmp)).length ?

          tmp[0] : null);



      if (el) {

        var top = $(el).offset().top - 60;

        autoScrolling = true;

        $('body,html').animate({scrollTop:top}, '500', 'swing', function() { autoScrolling = false; });

      }

    });



    resizeNav();  // must resize once loading is finished

  });



})();
@@ -3615,7 +3601,7 @@ function showSamples() { 


      // add to list of already added indices

      for (var j = 0; j < resources.length; j++) {

        console.log(resources[j].title);

        // console.log(resources[j].title);

        addedResourceIndices[resources[j].index] = 1;

      }

tools/droiddoc/templates-sdk-dyn/components/masthead.cs

+6 −24
Original line number Diff line number Diff line
@@ -296,31 +296,13 @@ onkeyup="return search_changed(event, false, '<?cs var:toroot ?>')" /> 


<div id="sticky-header">

  <div>

    <a class="logo" href="/index.html"></a>

    <a class="logo" href="#top"></a>

    <a class="top" href="#top"></a>

    <ul class="breadcrumb">

      <?cs

if:design ?><li class="design"><a href="<?cs var:toroot ?>design/index.html">Design</a></li><?cs

elif:(develop || training || guide || reference || tools || sdk || google || samples) ?><li class="develop"><a href="<?cs var:toroot ?>develop/index.html">Develop</a></li><?cs

elif:distribute ?><li class="distribute"><a href="<?cs var:toroot ?>distribute/index.html">Distribute</a></li><?cs

elif:about ?><li class="about"><a href="<?cs var:toroot ?>about/index.html">About Android</a></li><?cs

/if ?><?cs

if:training ?><li><a href="<?cs var:toroot ?>training/index.html">Training</a></li><?cs

elif:guide ?><li><a href="<?cs var:toroot ?>guide/index.html">API Guides</a></li><?cs

elif:reference ?><li><a href="<?cs var:toroot ?>reference/index.html">Reference</a></li><?cs

elif:tools ?><li><a href="<?cs var:toroot ?>tools/index.html">Tools</a></li><?cs

elif:google ?><li><a href="<?cs var:toroot ?>google/index.html">Google Services</a></li><?cs

elif:samples ?><li><a href="<?cs var:toroot ?>samples/index.html">Samples</a></li><?cs

elif:googleplay ?><li><a href="<?cs var:toroot ?>distribute/googleplay/index.html">Google Play</a></li><?cs

elif:essentials ?><li><a href="<?cs var:toroot ?>distribute/essentials/index.html">Essentials</a></li><?cs

elif:users ?><li><a href="<?cs var:toroot ?>distribute/users/index.html">Get Users</a></li><?cs

elif:engage ?><li><a href="<?cs var:toroot ?>distribute/engage/index.html">Engage &amp; Retain</a></li><?cs

elif:monetize ?><li><a href="<?cs var:toroot ?>distribute/monetize/index.html">Monetize Your Apps</a></li><?cs

elif:disttools ?><li><a href="<?cs var:toroot ?>distribute/tools/index.html">Tools &amp Reference</a></li><?cs

elif:stories ?><li><a href="<?cs var:toroot ?>distribute/stories/index.html">Developer Stories</a></li><?cs

/if ?> <?cs

if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs

/if ?></ul>

      <?cs # More <li> elements added here with javascript ?>

      <?cs if:!section.landing ?><li class="current"><?cs var:page.title ?></li><?cs

      /if ?>

    </ul>

  </div>

</div>

tools/droiddoc/templates-sdk-dyn/customizations.cs

+0 −19

File changed.

Preview size limit exceeded, changes collapsed.