Skip to content

Commit e74aec2

Browse files
codeguycodeguy
committed
Testing new mobile TOC menu
1 parent 89a300c commit e74aec2

File tree

5 files changed

+77
-78
lines changed

5 files changed

+77
-78
lines changed

‎_layouts/default.html

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -90,7 +90,9 @@ <h2>Created and maintained by</h2>
9090
</div>
9191
</footer>
9292

93-
<!-- Twitter -->
93+
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
94+
<script src="/scripts/fastclick.js"></script>
95+
<script src="/scripts/setup.js"></script>
9496
<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>
9597
</body>
9698
</html>

‎css/all.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎less/all.less

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -288,6 +288,61 @@ pre{
288288
}
289289
}
290290

291+
@media (max-width: 375px) {
292+
.site-navigation{
293+
background: fade(white, 95%);
294+
columns: 1;
295+
max-height: 100vh;
296+
position: fixed;
297+
bottom: 0;
298+
left: 0;
299+
z-index: 100;
300+
301+
&:before{
302+
background: @phpPurpleDark;
303+
box-sizing: border-box;
304+
content: "\27A4 Table of Contents";
305+
display: block;
306+
height: 40px;
307+
padding: 0 10px;
308+
width: 100vh;
309+
position: absolute;
310+
bottom: 0;
311+
left: 0;
312+
color: white;
313+
font-family: @sans;
314+
font-size: 13px;
315+
line-height: 40px;
316+
text-transform: uppercase;
317+
z-index: 2;
318+
}
319+
320+
> ul{
321+
background: fade(white, 96%);
322+
border-top: 3px solid @phpPurple;
323+
box-shadow: fade(black, 25%) 0 -5px 10px;
324+
box-sizing: border-box;
325+
padding: 20px;
326+
overflow: auto;
327+
-webkit-overflow-scrolling: touch;
328+
position: absolute;
329+
left: 0;
330+
bottom: 40px;
331+
height: 50vh;
332+
width: 100vh;
333+
transform: translate(0,100vh);
334+
transition: all 0.2s ease;
335+
z-index: 1;
336+
}
337+
338+
&.open{
339+
> ul{
340+
transform: translate(0,0);
341+
}
342+
}
343+
}
344+
}
345+
291346
/******************************************************************************
292347
* Content
293348
*****************************************************************************/

‎scripts/fastclick.js

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎scripts/setup.js

Lines changed: 13 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,80 +1,18 @@
11
(function ($) {
2-
// Load contributors
3-
var $contributors = $('#contributors');
4-
if ( $contributors.length ) {
5-
var fail = function () {
6-
$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>');
7-
};
8-
$.ajax({
9-
cache: false,
10-
dataType: 'jsonp',
11-
timeout: 3000,
12-
type: 'GET',
13-
url: 'https://api.github.com/repos/codeguy/php-the-right-way/contributors?per_page=100'
14-
}).done(function (data) {
15-
if ( data.data && data.data.length ) {
16-
var $ul = $('<ul></ul>'), dataLength = data.data.length;
17-
for ( var i = 0; i < dataLength; i++ ) {
18-
$ul.append(['<li><a href="https://github.com/', data.data[i].login, '" target="_blank">', data.data[i].login, '</a></li>'].join(''));
19-
}
20-
$contributors.html($ul);
21-
} else {
22-
fail();
23-
}
24-
}).fail(fail);
25-
}
26-
})(jQuery);
27-
28-
(function ($) {
29-
//Add current view's highlighting to the navigation
30-
31-
/** helper for highlighting */
32-
function highlightNav(navLinks,id)
33-
{
34-
navLinks.filter('[href="/#'+id+'"]').addClass("active");
35-
}
36-
37-
$(window).scroll(function() {
38-
//console.log("They see me scrollin, they hatin");
39-
40-
//clear highlighting
41-
var navLinks = $('.site-navigation a');
42-
navLinks.removeClass("active");
2+
// Attach FastClick
3+
var attachFastClick = Origami.fastclick;
4+
attachFastClick(document.body);
435

44-
//calc current viewport
45-
var viewTop = $(window).scrollTop();
46-
var viewBottom = viewTop + $(window).height();
47-
48-
//for all h1 and h2 elements, check if they are visible
49-
//performance tweak: stop each() after the first element is found to be behind view
50-
var previous = "";
51-
var foundOne = false;
52-
var fallback = "";
53-
$('h1, h2').each(function(i,e) {
54-
//get element position;
55-
var eTop = $(e).offset().top;
56-
var eBottom = eTop + $(e).height();
57-
var id=e.id;
58-
id = id.replace("_title", "");
59-
60-
if (eTop >= viewTop) {
61-
//if we are passed the view and no heading was highlighted yet, store previous one as fallback
62-
if (! foundOne) {
63-
fallback=previous;
64-
}
65-
if (eBottom <= viewBottom) {
66-
highlightNav(navLinks, id);
67-
foundOne = true;
68-
} else {
69-
return false; //break the each(), the rest is below
70-
}
71-
}
72-
previous=id;
73-
});
74-
//no h1/h2 is in the viewport, so highlight the last one above
75-
if (! foundOne) {
76-
highlightNav(navLinks, fallback);
6+
// Mobile TOC menu
7+
var $window = $(window),
8+
$nav = $('.site-navigation');
9+
$nav.click(function (e) {
10+
var $target = $(e.target);
11+
if ($target.is($nav) && $window.width() <= 375) {
12+
$nav.toggleClass('open');
13+
}
14+
if ($target.is('a')) {
15+
$nav.removeClass('open');
7716
}
7817
});
7918
})(jQuery);
80-

0 commit comments

Comments
 (0)