1 | %= javascript '/mojo/jquery/jquery.js'
|
---|
2 | <div id="mojobar">
|
---|
3 | <style scoped="scoped">
|
---|
4 | #mojobar {
|
---|
5 | background-color: #1a1a1a;
|
---|
6 | background: -webkit-linear-gradient(top, #2a2a2a 0%, #000 100%);
|
---|
7 | background: -moz-linear-gradient(top, #2a2a2a 0%, #000 100%);
|
---|
8 | background: linear-gradient(top, #2a2a2a 0%, #000 100%);
|
---|
9 | box-shadow: 0px 1px 0px rgba(0, 0, 0, 0.5);
|
---|
10 | height: 46px;
|
---|
11 | overflow: hidden;
|
---|
12 | position: absolute;
|
---|
13 | width: 100%;
|
---|
14 | z-index: 1000;
|
---|
15 | }
|
---|
16 | #mojobar-brand {
|
---|
17 | display: inline-block;
|
---|
18 | padding-left: 50px;
|
---|
19 | padding-top: 4px;
|
---|
20 | }
|
---|
21 | #mojobar-links {
|
---|
22 | display: inline;
|
---|
23 | float: right;
|
---|
24 | height: 60px;
|
---|
25 | margin-top: 0.8em;
|
---|
26 | padding-right: 50px;
|
---|
27 | }
|
---|
28 | #mojobar-links a {
|
---|
29 | color: #bbb;
|
---|
30 | font: 0.9em 'Helvetica Neue', Helvetica, sans-serif;
|
---|
31 | margin-left: 0.5em;
|
---|
32 | text-decoration: none;
|
---|
33 | transition: all 200ms ease-in-out;
|
---|
34 | }
|
---|
35 | #mojobar-links a:hover { color: #fff }
|
---|
36 | #mojobar-links input {
|
---|
37 | background-color: #3a3a3a;
|
---|
38 | border: 1px solid rgba(0, 0, 0, 0.1);
|
---|
39 | border-radius: 3px;
|
---|
40 | color: #eee;
|
---|
41 | display: inline;
|
---|
42 | margin-left: 1em;
|
---|
43 | padding: 4px;
|
---|
44 | transition: all 0.15s;
|
---|
45 | }
|
---|
46 | #mojobar-links input:focus {
|
---|
47 | background-color: #fff;
|
---|
48 | color: #111;
|
---|
49 | outline: 0;
|
---|
50 | }
|
---|
51 | #mojobar-links form { display: inline }
|
---|
52 | .animated { transition: all 0.25s ease }
|
---|
53 | </style>
|
---|
54 | %= link_to 'https://mojolicious.org' => (id => 'mojobar-brand') => begin
|
---|
55 | <picture>
|
---|
56 | <img src="<%= url_for '/mojo/logo-white.png' %>"
|
---|
57 | srcset="<%= url_for '/mojo/logo-white-2x.png' %> 2x">
|
---|
58 | </picture>
|
---|
59 | % end
|
---|
60 | <div id="mojobar-links">
|
---|
61 | %= link_to Documentation => 'https://mojolicious.org/perldoc'
|
---|
62 | %= link_to Chat => 'https://chat.mibbit.com/?channel=%23mojo&server=irc.perl.org'
|
---|
63 | %= link_to Wiki => 'https://github.com/kraih/mojo/wiki'
|
---|
64 | %= link_to GitHub => 'https://github.com/kraih/mojo'
|
---|
65 | %= link_to CPAN => 'https://metacpan.org/release/Mojolicious/'
|
---|
66 | %= link_to MailingList => 'https://groups.google.com/group/mojolicious'
|
---|
67 | %= link_to Twitter => 'https://twitter.com/kraih'
|
---|
68 | %= form_for 'https://www.google.com/cse' => (target => '_blank') => begin
|
---|
69 | %= hidden_field cx => '014527573091551588235:pwfplkjpgbi'
|
---|
70 | %= hidden_field ie => 'UTF-8'
|
---|
71 | %= search_field 'q', placeholder => 'Search'
|
---|
72 | %= end
|
---|
73 | </div>
|
---|
74 | </div>
|
---|
75 | <script>
|
---|
76 | var mojobar = $('#mojobar');
|
---|
77 | var mojobarHeight = mojobar.outerHeight();
|
---|
78 | function getElementByHash(hash) {
|
---|
79 | return $(hash.replace(/(:|\.|\[|\]|,)/g, '\\$1'));
|
---|
80 | }
|
---|
81 | function fixOffset() {
|
---|
82 | var offset = getElementByHash(window.location.hash).offset();
|
---|
83 | if (offset) {
|
---|
84 | $('html, body').animate({scrollTop: offset.top - mojobarHeight}, 1);
|
---|
85 | }
|
---|
86 | }
|
---|
87 | $(window).on('load', function () {
|
---|
88 | if (window.location.hash) {
|
---|
89 | fixOffset();
|
---|
90 | }
|
---|
91 | var start = mojobar.offset().top;
|
---|
92 | var fixed;
|
---|
93 | var lastScrollTop = $(window).scrollTop();
|
---|
94 | var hidden = mojobarHeight + 1;
|
---|
95 | $(window).on('scroll', function () {
|
---|
96 | var st = $(window).scrollTop();
|
---|
97 | if (fixed) {
|
---|
98 | if (st <= start) {
|
---|
99 | fixed = false;
|
---|
100 | mojobar.removeClass('animated');
|
---|
101 | mojobar.css({'position': 'absolute', 'top': start + 'px'});
|
---|
102 | }
|
---|
103 | else if (Math.abs(lastScrollTop - st) > 100) {
|
---|
104 | if (!mojobar.hasClass('animated')) {
|
---|
105 | mojobar.addClass('animated');
|
---|
106 | }
|
---|
107 | if (st > lastScrollTop && st > (mojobarHeight + start + 250)) {
|
---|
108 | mojobar.css('transform', 'translateY(-' + hidden + 'px)');
|
---|
109 | }
|
---|
110 | else if (st < lastScrollTop) {
|
---|
111 | mojobar.css('transform', 'translateY(0px)');
|
---|
112 | }
|
---|
113 | lastScrollTop = st;
|
---|
114 | }
|
---|
115 | }
|
---|
116 | else if (st > start) {
|
---|
117 | fixed = true;
|
---|
118 | mojobar.css({'position': 'fixed', 'top': 0});
|
---|
119 | lastScrollTop = $(window).scrollTop();
|
---|
120 | }
|
---|
121 | });
|
---|
122 | });
|
---|
123 | $(function () {
|
---|
124 | $('a[href^="#"]').addClass('mojoscroll').on('click', function (e) {
|
---|
125 | e.preventDefault();
|
---|
126 | e.stopPropagation();
|
---|
127 | var hash = '#' + this.href.split('#')[1];
|
---|
128 | var target = getElementByHash(hash);
|
---|
129 | var old = target.attr('id');
|
---|
130 | target.attr('id', '');
|
---|
131 | location.hash = hash;
|
---|
132 | target.attr('id', old);
|
---|
133 | fixOffset();
|
---|
134 | });
|
---|
135 | });
|
---|
136 | </script>
|
---|