Skip to content

Commit 6edf1b3

Browse files
maxklenkmaxklenk
committed
add hard coded navigation with config, demo and tests
1 parent d24a348 commit 6edf1b3

13 files changed

+594
-3
lines changed

‎.gitignore

+5-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
1+
# npm
12
node_modules/
3+
4+
# bower
25
bower_components/
3-
*.log
46

5-
build/
6-
dist/
7+
# testing
8+
coverage/

‎.jshintrc

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
{
2+
"node": true,
3+
"eqeqeq": true,
4+
"curly": true,
5+
"strict": true,
6+
"trailing": true,
7+
"white": true,
8+
"undef": true,
9+
"unused": false,
10+
"indent": 2,
11+
"quotmark": "single",
12+
13+
"eqnull": true,
14+
"expr": true,
15+
"newcap": false,
16+
"loopfunc": true,
17+
"bitwise": false,
18+
19+
"browser": true,
20+
"devel": true,
21+
"predef": [
22+
"angular"
23+
]
24+
}

‎.travis.yml

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
language: node_js
2+
node_js:
3+
- '0.10'
4+
5+
before_install:
6+
- 'export DISPLAY=:99.0'
7+
- 'sh -e /etc/init.d/xvfb start'
8+
9+
before_script:
10+
- 'npm install -g bower grunt-cli'
11+
- 'bower install'
12+
13+
script:
14+
- 'grunt --verbose'
15+
16+
after_success:
17+
- 'grunt coverage'

‎Gruntfile.js

+57
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
'use strict';
2+
3+
module.exports = function (grunt) {
4+
5+
// load all grunt tasks
6+
require('load-grunt-tasks')(grunt);
7+
8+
// default task
9+
grunt.registerTask('default', ['jshint', 'karma:unit']);
10+
grunt.registerTask('watch', ['karma:watch']);
11+
grunt.registerTask('coverage', ['karma:coverage', 'coveralls']);
12+
13+
14+
// perform test in Firefox on travis ci
15+
var testConfig = function(configFile, customOptions) {
16+
var options = { configFile: configFile, keepalive: true };
17+
var travisOptions = process.env.TRAVIS && { browsers: ['Firefox'] };
18+
return grunt.util._.extend(options, customOptions, travisOptions);
19+
};
20+
21+
grunt.initConfig({
22+
23+
karma: {
24+
unit: {
25+
options: testConfig('test/karma.conf.js')
26+
},
27+
watch: {
28+
options: testConfig('test/karma.conf.js'),
29+
singleRun: false,
30+
autoWatch: true
31+
},
32+
coverage: {
33+
options: testConfig('test/karma.conf.js'),
34+
reporters: ['coverage']
35+
}
36+
},
37+
38+
coveralls: {
39+
options: {
40+
debug: true,
41+
coverage_dir: 'coverage'
42+
}
43+
},
44+
45+
jshint: {
46+
options: {
47+
jshintrc: '.jshintrc'
48+
},
49+
gruntfile: 'Gruntfile.js',
50+
angularChart: 'angular-circular-navigation.js',
51+
test: 'test/*.js',
52+
// demo: 'demo/*.js'
53+
}
54+
55+
});
56+
57+
};

‎angular-circular-navigation.css

+214
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,214 @@
1+
@import url(http://netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css);
2+
3+
circular *, .circular * {
4+
-moz-box-sizing: border-box;
5+
box-sizing: border-box;
6+
margin: 0;
7+
padding: 0;
8+
list-style: none;
9+
position: relative
10+
}
11+
12+
circular, .circular {
13+
position: absolute;
14+
top: 100%;
15+
left: 50%;
16+
}
17+
18+
.cn-button {
19+
position: absolute;
20+
top: 100%;
21+
left: 50%;
22+
z-index: 11;
23+
margin-top: -2.25em;
24+
margin-left: -2.25em;
25+
padding-top: 0em;
26+
width: 4.5em;
27+
height: 4.5em;
28+
border: none;
29+
border-radius: 50%;
30+
background: none;
31+
background-color: #fff;
32+
color: #52be7f;
33+
text-align: center;
34+
font-weight: 700;
35+
font-size: 1.5em;
36+
text-transform: uppercase;
37+
cursor: pointer;
38+
-webkit-backface-visibility: hidden;
39+
}
40+
41+
.cn-wrapper {
42+
position: absolute;
43+
top: 100%;
44+
left: 50%;
45+
z-index: 10;
46+
margin-top: -13em;
47+
margin-left: -13.5em;
48+
width: 27em;
49+
height: 27em;
50+
border-radius: 50%;
51+
background: transparent;
52+
opacity: 0;
53+
-webkit-transition: all .3s ease 0.3s;
54+
-moz-transition: all .3s ease 0.3s;
55+
transition: all .3s ease 0.3s;
56+
-webkit-transform: scale(0.1);
57+
-ms-transform: scale(0.1);
58+
-moz-transform: scale(0.1);
59+
transform: scale(0.1);
60+
pointer-events: none;
61+
overflow: hidden;
62+
}
63+
64+
/*cover to prevent extra space of anchors from being clickable*/
65+
.cn-wrapper:after{
66+
content:".";
67+
display:block;
68+
font-size:2em;
69+
width:6.2em;
70+
height:6.2em;
71+
position: absolute;
72+
left: 50%;
73+
margin-left: -3.1em;
74+
top:50%;
75+
margin-top: -3.1em;
76+
border-radius: 50%;
77+
z-index:10;
78+
color: transparent;
79+
}
80+
81+
.opened-nav {
82+
border-radius: 50%;
83+
opacity: 1;
84+
-webkit-transition: all .3s ease;
85+
-moz-transition: all .3s ease;
86+
transition: all .3s ease;
87+
-webkit-transform: scale(1);
88+
-moz-transform: scale(1);
89+
-ms-transform: scale(1);
90+
transform: scale(1);
91+
pointer-events: auto;
92+
}
93+
94+
.cn-wrapper li {
95+
position: absolute;
96+
top: 50%;
97+
left: 50%;
98+
overflow: hidden;
99+
margin-top: -1.3em;
100+
margin-left: -10em;
101+
width: 10em;
102+
height: 10em;
103+
font-size: 1.5em;
104+
-webkit-transition: all .3s ease;
105+
-moz-transition: all .3s ease;
106+
transition: all .3s ease;
107+
-webkit-transform: rotate(76deg) skew(60deg);
108+
-moz-transform: rotate(76deg) skew(60deg);
109+
-ms-transform: rotate(76deg) skew(60deg);
110+
transform: rotate(76deg) skew(60deg);
111+
-webkit-transform-origin: 100% 100%;
112+
-moz-transform-origin: 100% 100%;
113+
transform-origin: 100% 100%;
114+
pointer-events: none;
115+
}
116+
117+
.cn-wrapper li a {
118+
position: absolute;
119+
position: fixed; /* fix the displacement bug in webkit browsers when using tab key */
120+
right: -7.25em;
121+
bottom: -7.25em;
122+
display: block;
123+
width: 14.5em;
124+
height: 14.5em;
125+
border-radius: 50%;
126+
background: #429a67;
127+
background: -webkit-radial-gradient(transparent 35%, #429a67 35%);
128+
background: -moz-radial-gradient(transparent 35%, #429a67 35%);
129+
background: radial-gradient(transparent 35%, #429a67 35%);
130+
color: #fff;
131+
text-align: center;
132+
text-decoration: none;
133+
font-size: 1.2em;
134+
line-height: 2;
135+
-webkit-transform: skew(-60deg) rotate(-75deg) scale(1);
136+
-moz-transform: skew(-60deg) rotate(-75deg) scale(1);
137+
-ms-transform: skew(-60deg) rotate(-75deg) scale(1);
138+
transform: skew(-60deg) rotate(-75deg) scale(1);
139+
-webkit-backface-visibility: hidden;
140+
backface-visibility: hidden;
141+
pointer-events: auto;
142+
}
143+
144+
.cn-wrapper li a span {
145+
position: relative;
146+
top: 1.8em;
147+
display: block;
148+
font-size: .5em;
149+
font-weight: 700;
150+
text-transform: uppercase;
151+
}
152+
153+
.cn-wrapper li a:hover,
154+
.cn-wrapper li a:active,
155+
.cn-wrapper li a:focus {
156+
background: -webkit-radial-gradient(transparent 35%, #449e6a 35%);
157+
background: -moz-radial-gradient(transparent 35%, #449e6a 35%);
158+
background: radial-gradient(transparent 35%, #449e6a 35%);
159+
}
160+
161+
.opened-nav li {
162+
-webkit-transition: all .3s ease .3s;
163+
-moz-transition: all .3s ease .3s;
164+
transition: all .3s ease .3s;
165+
}
166+
167+
.opened-nav li:first-child {
168+
-webkit-transform: rotate(-20deg) skew(60deg);
169+
-moz-transform: rotate(-20deg) skew(60deg);
170+
-ms-transform: rotate(-20deg) skew(60deg);
171+
transform: rotate(-20deg) skew(60deg);
172+
}
173+
174+
.opened-nav li:nth-child(2) {
175+
-webkit-transform: rotate(12deg) skew(60deg);
176+
-moz-transform: rotate(12deg) skew(60deg);
177+
-ms-transform: rotate(12deg) skew(60deg);
178+
transform: rotate(12deg) skew(60deg);
179+
}
180+
181+
.opened-nav li:nth-child(3) {
182+
-webkit-transform: rotate(44deg) skew(60deg);
183+
-moz-transform: rotate(44deg) skew(60deg);
184+
-ms-transform: rotate(44deg) skew(60deg);
185+
transform: rotate(44deg) skew(60deg);
186+
}
187+
188+
.opened-nav li:nth-child(4) {
189+
-webkit-transform: rotate(76deg) skew(60deg);
190+
-moz-transform: rotate(76deg) skew(60deg);
191+
-ms-transform: rotate(76deg) skew(60deg);
192+
transform: rotate(76deg) skew(60deg);
193+
}
194+
195+
.opened-nav li:nth-child(5) {
196+
-webkit-transform: rotate(108deg) skew(60deg);
197+
-moz-transform: rotate(108deg) skew(60deg);
198+
-ms-transform: rotate(108deg) skew(60deg);
199+
transform: rotate(108deg) skew(60deg);
200+
}
201+
202+
.opened-nav li:nth-child(6) {
203+
-webkit-transform: rotate(140deg) skew(60deg);
204+
-moz-transform: rotate(140deg) skew(60deg);
205+
-ms-transform: rotate(140deg) skew(60deg);
206+
transform: rotate(140deg) skew(60deg);
207+
}
208+
209+
.opened-nav li:nth-child(7) {
210+
-webkit-transform: rotate(172deg) skew(60deg);
211+
-moz-transform: rotate(172deg) skew(60deg);
212+
-ms-transform: rotate(172deg) skew(60deg);
213+
transform: rotate(172deg) skew(60deg);
214+
}

‎angular-circular-navigation.html

Whitespace-only changes.

‎angular-circular-navigation.js

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
'use strict';
2+
3+
angular.module('angularCircularNavigation', [])
4+
.directive('circular',
5+
6+
function ($compile) {
7+
8+
return {
9+
restrict: 'EA',
10+
scope: {
11+
options: '='
12+
},
13+
// templateUrl: 'angular-circular-navigation.html',
14+
template: '<button ng-click="toggleMenu()" class="cn-button" id="cn-button">Menu</button><div class="cn-wrapper" ng-class="{\'opened-nav\': options.isOpen}" id="cn-wrapper"><ul><li><a href="#"><span>About</span></a></li><li><a href="#"><span>Tutorials</span></a></li><li><a href="#"><span>Articles</span></a></li><li><a href="#"><span>Snippets</span></a></li><li><a href="#"><span>Plugins</span></a></li><li><a href="#"><span>Contact</span></a></li><li><a href="#"><span>Follow</span></a></li></ul></div>',
15+
controller: ['$scope', '$element', '$attrs',
16+
function ($scope, $element, $attrs) {
17+
18+
$scope.toggleMenu = function () {
19+
$scope.options.isOpen = !$scope.options.isOpen;
20+
};
21+
22+
}
23+
]
24+
};
25+
});

‎bower.json

+33
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
{
2+
"name": "angular-circular-navigation",
3+
"version": "0.0.0",
4+
"homepage": "https://github.com/maxklenk/angular-circular-navigation",
5+
"authors": [
6+
"Max Klenk <[email protected]>"
7+
],
8+
"description": "AngularJS directive for circular navigation menus",
9+
"main": "angular-circular-navigation.js",
10+
"keywords": [
11+
"angular",
12+
"angularJS",
13+
"directive",
14+
"circular",
15+
"navigation",
16+
"menu"
17+
],
18+
"license": "MIT",
19+
"private": true,
20+
"ignore": [
21+
"**/.*",
22+
"node_modules",
23+
"bower_components",
24+
"test",
25+
"demo"
26+
],
27+
"dependencies": {
28+
"angular": "~1.2.x"
29+
},
30+
"devDependencies": {
31+
"angular-mocks": "~1.2.x"
32+
}
33+
}

0 commit comments

Comments
 (0)