Skip to content

Commit ecde73c

Browse files
jsorjsor
committed
Initial import
0 parents  commit ecde73c

File tree

12 files changed

+347
-0
lines changed

12 files changed

+347
-0
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
/node_modules

‎LICENSE‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
Copyright (c) 2015 Dots United GmbH
2+
3+
Permission is hereby granted, free of charge, to any person
4+
obtaining a copy of this software and associated documentation
5+
files (the "Software"), to deal in the Software without
6+
restriction, including without limitation the rights to use,
7+
copy, modify, merge, publish, distribute, sublicense, and/or sell
8+
copies of the Software, and to permit persons to whom the
9+
Software is furnished to do so, subject to the following
10+
conditions:
11+
12+
The above copyright notice and this permission notice shall be
13+
included in all copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
16+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
17+
OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
18+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
19+
HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
20+
WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
21+
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
22+
OTHER DEALINGS IN THE SOFTWARE.

‎README.md‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
Sliding Navigation
2+
==================
3+
4+
Sliding Navigation utilities.
5+
6+
Usage
7+
-----
8+
9+
With webpack:
10+
11+
```javascript
12+
var setup = require('dotsunited-sliding-navigation/lib/setup');
13+
setup('sliding-navigation');
14+
```
15+
16+
```css
17+
@import "~dotsunited-sliding-navigation/lib/mixins";
18+
19+
.sliding-navigation {
20+
.dotsunited-sliding-navigation();
21+
22+
/* Custom styles */
23+
position: absolute;
24+
left: 0;
25+
right: 0;
26+
top: 60px;
27+
bottom: 0;
28+
}
29+
30+
.sliding-navigation__open-button {
31+
.dotsunited-sliding-navigation-open-button();
32+
}
33+
34+
.sliding-navigation__back-button {
35+
.dotsunited-sliding-navigation-back-button();
36+
}
37+
```
38+
39+
HTML
40+
-----
41+
42+
```html
43+
<nav class="sliding-navigation">
44+
<ul>
45+
<li>
46+
<a href="">Link</a>
47+
<ul>
48+
<li><a href="">Sub-Link</a></li>
49+
</ul>
50+
</li>
51+
</ul>
52+
</nav>
53+
```
54+
55+
License
56+
-------
57+
58+
Copyright (c) 2015 Dots United GmbH.
59+
Released under the [MIT](LICENSE?raw=1) license.

‎index.js‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
module.exports = {
2+
setup: require('./lib/setup.js')
3+
};

‎lib/img/back.png‎

249 Bytes
Loading

‎lib/img/back.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎lib/img/open.png‎

346 Bytes
Loading

‎lib/img/open.svg‎

Lines changed: 1 addition & 0 deletions
Loading

‎lib/mixins.less‎

Lines changed: 130 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,130 @@
1+
@dotsunited-sliding-navigation-base-z-index: 2000;
2+
@dotsunited-sliding-navigation-transition-duration: 350ms;
3+
@dotsunited-sliding-navigation-transition-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
4+
5+
.dotsunited-sliding-navigation(
6+
@base-z-index: @dotsunited-sliding-navigation-base-z-index;
7+
@base-transition-duration: @dotsunited-sliding-navigation-transition-duration;
8+
@transition-timing-function: @dotsunited-sliding-navigation-transition-timing-function
9+
) {
10+
-webkit-backface-visibility: hidden;
11+
overflow: hidden;
12+
13+
* {
14+
-webkit-backface-visibility: hidden;
15+
}
16+
17+
ul {
18+
position: absolute;
19+
top: 0;
20+
left: 100%;
21+
22+
z-index: @base-z-index;
23+
display: none;
24+
25+
margin: 0;
26+
padding: 0;
27+
list-style: none;
28+
-webkit-overflow-scrolling: touch;
29+
-ms-overflow-style: -ms-autohiding-scrollbar;
30+
31+
width: 100%;
32+
height: 100%;
33+
34+
transition: transform @base-transition-duration @transition-timing-function;
35+
36+
.no-csstransforms3d & {
37+
transition: left @base-transition-duration @transition-timing-function;
38+
}
39+
}
40+
41+
> ul {
42+
left: 0;
43+
display: block;
44+
}
45+
46+
& &__parent {
47+
transform: translate3d(-100%, 0, 0);
48+
display: block;
49+
50+
.no-csstransforms3d & {
51+
left: 0;
52+
}
53+
54+
.no-csstransforms3d > ul& {
55+
left: 0;
56+
}
57+
}
58+
59+
& &__visible {
60+
z-index: @base-z-index + 1;
61+
display: block;
62+
}
63+
64+
& &__scroll {
65+
overflow-y: scroll;
66+
overflow-x: hidden;
67+
}
68+
};
69+
70+
.dotsunited-sliding-navigation-open-button(
71+
@base-z-index: @dotsunited-sliding-navigation-base-z-index
72+
) {
73+
.dotsunited-sliding-navigation-button();
74+
75+
z-index: @base-z-index + 999;
76+
77+
// https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately
78+
width: 48px;
79+
height: 48px;
80+
81+
background: url(img/open.svg) 50% 50% no-repeat;
82+
background-size: auto 16px;
83+
84+
.no-svg {
85+
background-image: url(img/open.png);
86+
}
87+
}
88+
89+
.dotsunited-sliding-navigation-back-button(
90+
@base-z-index: @dotsunited-sliding-navigation-base-z-index
91+
) {
92+
.dotsunited-sliding-navigation-button();
93+
94+
z-index: @base-z-index + 999;
95+
96+
text-indent: 24px;
97+
98+
// https://developers.google.com/speed/docs/insights/SizeTapTargetsAppropriately
99+
width: 100%;
100+
height: 48px;
101+
102+
background: url(img/back.svg) 0 50% no-repeat;
103+
background-size: auto 16px;
104+
105+
.no-svg {
106+
background-image: url(img/back.png);
107+
}
108+
}
109+
110+
.dotsunited-sliding-navigation-button() {
111+
cursor: pointer;
112+
padding: 0;
113+
114+
// <button> reset
115+
-webkit-appearance: none;
116+
border: 0;
117+
background: none;
118+
outline: none;
119+
text-shadow: none;
120+
box-shadow: none;
121+
text-align: left;
122+
text-decoration: none;
123+
color: inherit;
124+
font: inherit;
125+
126+
&::-moz-focus-inner {
127+
border: 0;
128+
padding: 0;
129+
}
130+
}

‎lib/setup.js‎

Lines changed: 103 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
var $ = require('jquery');
2+
3+
module.exports = function(namespace, options) {
4+
namespace = namespace || 'dotsunited-sliding-navigation';
5+
6+
options = $.extend({}, {
7+
openButtonElement: '<button class="' + namespace + '__open-button"></button>',
8+
backElement: '<li class="' + namespace + '__back"></li>',
9+
backButtonElement: '<button class="' + namespace + '__back-button">Back</button>'
10+
}, options);
11+
12+
var parentClass = namespace + '__parent';
13+
var visibleClass = namespace + '__visible';
14+
var scrollClass = namespace + '__scroll';
15+
var activeId = namespace + '-active';
16+
17+
$(function() {
18+
var container = $('.' + namespace);
19+
20+
container
21+
.find('ul')
22+
.attr('role', 'menu')
23+
.eq(0)
24+
.attr('aria-activedescendant', activeId)
25+
;
26+
27+
container.find('a')
28+
.attr('tabindex', '-1')
29+
.hover(
30+
function() {
31+
$(this).parent().attr('id', activeId);
32+
},
33+
function() {
34+
$(this).parent().removeAttr('id');
35+
}
36+
)
37+
;
38+
39+
container
40+
.find('li').each(function() {
41+
var el = $(this),
42+
sub = el.children('ul,ol')
43+
;
44+
45+
el.attr('role', 'menuitem');
46+
47+
if (0 === sub.length) {
48+
return;
49+
}
50+
51+
el.attr('aria-haspopup', 'true');
52+
sub.attr('aria-expanded', 'false');
53+
54+
if (options.openButtonElement) {
55+
$(options.openButtonElement)
56+
.prependTo(el)
57+
.on('click', function(e) {
58+
e.preventDefault();
59+
60+
var closest = el.closest('ul,ol')
61+
.addClass(parentClass)
62+
.removeClass(scrollClass)
63+
;
64+
65+
sub.addClass(visibleClass);
66+
sub.attr('aria-expanded', 'true');
67+
68+
setTimeout(function() {
69+
closest.removeClass(visibleClass);
70+
sub.addClass(scrollClass);
71+
}, 350);
72+
})
73+
;
74+
}
75+
76+
if (options.backButtonElement) {
77+
$(options.backButtonElement)
78+
.html(el.children('a').eq(0).html())
79+
.wrap(options.backElement)
80+
.parent()
81+
.prependTo(sub)
82+
.on('click', function(e) {
83+
e.preventDefault();
84+
85+
var closest = el.closest('ul,ol')
86+
.removeClass(parentClass)
87+
.addClass(visibleClass)
88+
;
89+
90+
sub.removeClass(scrollClass);
91+
sub.attr('aria-expanded', 'false');
92+
93+
setTimeout(function() {
94+
closest.addClass(scrollClass);
95+
sub.removeClass(visibleClass);
96+
}, 350);
97+
})
98+
;
99+
}
100+
})
101+
;
102+
});
103+
};

0 commit comments

Comments
 (0)