mirror of
https://github.com/codeguy/php-the-right-way.git
synced 2025-08-10 07:53:56 +02:00
Testing new mobile TOC menu
This commit is contained in:
Josh Lockhart
@@ -90,7 +90,9 @@
|
||||
</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>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -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
|
||||
*****************************************************************************/
|
||||
|
||||
4
scripts/fastclick.js
Normal file
4
scripts/fastclick.js
Normal file
File diff suppressed because one or more lines are too long
@@ -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);
|
||||
// Attach FastClick
|
||||
var attachFastClick = Origami.fastclick;
|
||||
attachFastClick(document.body);
|
||||
|
||||
(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");
|
||||
|
||||
//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);
|
||||
|
||||
|
||||
Reference in New Issue
Block a user