Skip to content

Commit

Permalink
Testing new mobile TOC menu
Browse files Browse the repository at this point in the history
  • Loading branch information
codeguy committed Sep 28, 2015
1 parent 89a300c commit e74aec2
Show file tree
Hide file tree
Showing 5 changed files with 77 additions and 78 deletions.
4 changes: 3 additions & 1 deletion _layouts/default.html
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,9 @@ <h2>Created and maintained by</h2>
</div>
</footer>

<!-- Twitter -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="/scripts/fastclick.js"></script>
<script src="/scripts/setup.js"></script>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</body>
</html>
4 changes: 2 additions & 2 deletions css/all.css

Large diffs are not rendered by default.

55 changes: 55 additions & 0 deletions less/all.less
Original file line number Diff line number Diff line change
Expand Up @@ -288,6 +288,61 @@ pre{
}
}

@media (max-width: 375px) {
.site-navigation{
background: fade(white, 95%);
columns: 1;
max-height: 100vh;
position: fixed;
bottom: 0;
left: 0;
z-index: 100;

&:before{
background: @phpPurpleDark;
box-sizing: border-box;
content: "\27A4 Table of Contents";
display: block;
height: 40px;
padding: 0 10px;
width: 100vh;
position: absolute;
bottom: 0;
left: 0;
color: white;
font-family: @sans;
font-size: 13px;
line-height: 40px;
text-transform: uppercase;
z-index: 2;
}

> ul{
background: fade(white, 96%);
border-top: 3px solid @phpPurple;
box-shadow: fade(black, 25%) 0 -5px 10px;
box-sizing: border-box;
padding: 20px;
overflow: auto;
-webkit-overflow-scrolling: touch;
position: absolute;
left: 0;
bottom: 40px;
height: 50vh;
width: 100vh;
transform: translate(0,100vh);
transition: all 0.2s ease;
z-index: 1;
}

&.open{
> ul{
transform: translate(0,0);
}
}
}
}

/******************************************************************************
* Content
*****************************************************************************/
Expand Down
4 changes: 4 additions & 0 deletions scripts/fastclick.js

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

88 changes: 13 additions & 75 deletions scripts/setup.js
Original file line number Diff line number Diff line change
@@ -1,80 +1,18 @@
(function ($) {
// Load contributors
var $contributors = $('#contributors');
if ( $contributors.length ) {
var fail = function () {
$contributors.html('<p>This project would not be possible without the help of <a href="https://github.com/codeguy/php-the-right-way/graphs/contributors">our amazing contributors</a> on GitHub.</p>');
};
$.ajax({
cache: false,
dataType: 'jsonp',
timeout: 3000,
type: 'GET',
url: 'https://api.github.com/repos/codeguy/php-the-right-way/contributors?per_page=100'
}).done(function (data) {
if ( data.data && data.data.length ) {
var $ul = $('<ul></ul>'), dataLength = data.data.length;
for ( var i = 0; i < dataLength; i++ ) {
$ul.append(['<li><a href="https://github.com/', data.data[i].login, '" target="_blank">', data.data[i].login, '</a></li>'].join(''));
}
$contributors.html($ul);
} else {
fail();
}
}).fail(fail);
}
})(jQuery);

(function ($) {
//Add current view's highlighting to the navigation

/** helper for highlighting */
function highlightNav(navLinks,id)
{
navLinks.filter('[href="/#'+id+'"]').addClass("active");
}

$(window).scroll(function() {
//console.log("They see me scrollin, they hatin");

//clear highlighting
var navLinks = $('.site-navigation a');
navLinks.removeClass("active");
// Attach FastClick
var attachFastClick = Origami.fastclick;
attachFastClick(document.body);

//calc current viewport
var viewTop = $(window).scrollTop();
var viewBottom = viewTop + $(window).height();

//for all h1 and h2 elements, check if they are visible
//performance tweak: stop each() after the first element is found to be behind view
var previous = "";
var foundOne = false;
var fallback = "";
$('h1, h2').each(function(i,e) {
//get element position;
var eTop = $(e).offset().top;
var eBottom = eTop + $(e).height();
var id=e.id;
id = id.replace("_title", "");

if (eTop >= viewTop) {
//if we are passed the view and no heading was highlighted yet, store previous one as fallback
if (! foundOne) {
fallback=previous;
}
if (eBottom <= viewBottom) {
highlightNav(navLinks, id);
foundOne = true;
} else {
return false; //break the each(), the rest is below
}
}
previous=id;
});
//no h1/h2 is in the viewport, so highlight the last one above
if (! foundOne) {
highlightNav(navLinks, fallback);
// Mobile TOC menu
var $window = $(window),
$nav = $('.site-navigation');
$nav.click(function (e) {
var $target = $(e.target);
if ($target.is($nav) && $window.width() <= 375) {
$nav.toggleClass('open');
}
if ($target.is('a')) {
$nav.removeClass('open');
}
});
})(jQuery);

0 comments on commit e74aec2

Please sign in to comment.