diff options
Diffstat (limited to 'www/lib/angular-circular-navigation')
| -rw-r--r-- | www/lib/angular-circular-navigation/.bower.json | 46 | ||||
| -rw-r--r-- | www/lib/angular-circular-navigation/Gruntfile.js | 68 | ||||
| -rw-r--r-- | www/lib/angular-circular-navigation/LICENSE | 21 | ||||
| -rw-r--r-- | www/lib/angular-circular-navigation/README.md | 177 | ||||
| -rw-r--r-- | www/lib/angular-circular-navigation/angular-circular-navigation.css | 388 | ||||
| -rw-r--r-- | www/lib/angular-circular-navigation/angular-circular-navigation.js | 53 | ||||
| -rw-r--r-- | www/lib/angular-circular-navigation/bower.json | 36 | ||||
| -rw-r--r-- | www/lib/angular-circular-navigation/index.html | 134 | ||||
| -rw-r--r-- | www/lib/angular-circular-navigation/package.json | 47 |
9 files changed, 970 insertions, 0 deletions
diff --git a/www/lib/angular-circular-navigation/.bower.json b/www/lib/angular-circular-navigation/.bower.json new file mode 100644 index 00000000..fecfaeaf --- /dev/null +++ b/www/lib/angular-circular-navigation/.bower.json @@ -0,0 +1,46 @@ +{ + "name": "angular-circular-navigation", + "version": "0.2.1", + "homepage": "https://github.com/maxklenk/angular-circular-navigation", + "authors": [ + "Max Klenk <max@klenk.biz>" + ], + "description": "AngularJS directive for circular navigation menus", + "main": [ + "angular-circular-navigation.js", + "angular-circular-navigation.css" + ], + "keywords": [ + "angular", + "angularJS", + "directive", + "circular", + "navigation", + "menu" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "scss", + "demo" + ], + "dependencies": { + "angular": "~1.3.x" + }, + "devDependencies": { + "angular-mocks": "~1.3.x" + }, + "_release": "0.2.1", + "_resolution": { + "type": "version", + "tag": "0.2.1", + "commit": "ee6f8d03e2b7c48dafb252c6bbcef4b9d228a40d" + }, + "_source": "git://github.com/maxklenk/angular-circular-navigation.git", + "_target": "~0.2.1", + "_originalSource": "angular-circular-navigation", + "_direct": true +} diff --git a/www/lib/angular-circular-navigation/Gruntfile.js b/www/lib/angular-circular-navigation/Gruntfile.js new file mode 100644 index 00000000..5eb11d52 --- /dev/null +++ b/www/lib/angular-circular-navigation/Gruntfile.js @@ -0,0 +1,68 @@ +'use strict'; + +module.exports = function (grunt) { + + // load all grunt tasks + require('load-grunt-tasks')(grunt); + + // default task + grunt.registerTask('default', ['jshint', 'karma:unit']); + grunt.registerTask('watch', ['karma:watch']); + grunt.registerTask('coverage', ['karma:coverage', 'coveralls']); + + + // perform test in Firefox on travis ci + var testConfig = function(configFile, customOptions) { + var options = { configFile: configFile, keepalive: true }; + var travisOptions = process.env.TRAVIS && { browsers: ['Firefox'] }; + return grunt.util._.extend(options, customOptions, travisOptions); + }; + + grunt.initConfig({ + + // Compiles Sass to CSS and generates necessary files if requested + compass: { + dist: { + options: { + sassDir: 'scss', + cssDir: '.', + // environment: 'production' + } + } + }, + + karma: { + unit: { + options: testConfig('test/karma.conf.js') + }, + watch: { + options: testConfig('test/karma.conf.js'), + singleRun: false, + autoWatch: true + }, + coverage: { + options: testConfig('test/karma.conf.js'), + reporters: ['coverage'] + } + }, + + coveralls: { + options: { + debug: true, + coverage_dir: 'coverage' + } + }, + + jshint: { + options: { + jshintrc: '.jshintrc' + }, + gruntfile: 'Gruntfile.js', + angularChart: 'angular-circular-navigation.js', + test: 'test/*.js', + // demo: 'demo/*.js' + } + + }); + +}; diff --git a/www/lib/angular-circular-navigation/LICENSE b/www/lib/angular-circular-navigation/LICENSE new file mode 100644 index 00000000..6190d32e --- /dev/null +++ b/www/lib/angular-circular-navigation/LICENSE @@ -0,0 +1,21 @@ +The MIT License (MIT) + +Copyright (c) 2014 Max Klenk + +Permission is hereby granted, free of charge, to any person obtaining a copy +of this software and associated documentation files (the "Software"), to deal +in the Software without restriction, including without limitation the rights +to use, copy, modify, merge, publish, distribute, sublicense, and/or sell +copies of the Software, and to permit persons to whom the Software is +furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all +copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR +IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, +FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE +AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER +LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, +OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE +SOFTWARE.
\ No newline at end of file diff --git a/www/lib/angular-circular-navigation/README.md b/www/lib/angular-circular-navigation/README.md new file mode 100644 index 00000000..eb312a36 --- /dev/null +++ b/www/lib/angular-circular-navigation/README.md @@ -0,0 +1,177 @@ +# angular-circular-navigation [](https://travis-ci.org/maxklenk/angular-circular-navigation) [](https://coveralls.io/r/maxklenk/angular-circular-navigation?branch=master) + +angular-circular-navigation is a [AngularJS](https://github.com/angular/angular.js) directive, which is build on top of the Tutorial [Building a circular navigation with css transform](http://tympanus.net/codrops/2013/08/09/building-a-circular-navigation-with-css-transforms/) by [Sara Soueidan](http://sarasoueidan.com/). + + +## Usage [](https://gemnasium.com/maxklenk/angular-circular-navigation) + +You can get it from [Bower](http://bower.io/): +```sh +bower install angular-circular-navigation +``` + +Add everything to your index.html: +```html +<link rel="stylesheet" href="bower_components/angular-circular-navigation/angular-circular-navigation.css"> + +<script src="bower_components/angular/angular.js"></script> +<script src="bower_components/angular-circular-navigation/angular-circular-navigation.js"></script> +``` + +And specify the directive in your module dependencies: +```javascript +angular.module('myApp', ['angularCircularNavigation']) +``` + +Add the corresponding options in your controller: +```javascript +$scope.options = { + content: 'Menu', + isOpen: false, + toggleOnClick: true, + items: [ + { + content: 'About', + onclick: function () {console.log('About');} + } + ] +}; +``` + +Then you are ready to use the directive in your view: +```html +<div ng-controller="Controller"> + <circular + options="options"> + </circular> +</div> +``` + +### Options + +The following attributes define the circular navigation menu itself and how to display each item. + +--- +#### isOpen : boolean (default: `false`) +Shows if the items are currently displayed or not. + +--- +#### toggleOnClick : boolean (default: `false`) +If `true` the menu will close when an item is clicked. + +--- +#### background : String +Sets the css attribute `background` for the whole menu. + +--- +#### color : String +Sets the css attribute `color` for the whole menu. + +--- +#### size : String (default: `normal`) +Possible values: `small, normal, big` + + +--- +#### button : Object +Configuration of the central button which toggles the menu. + +--- +##### button.content : String +The text that will be rendered in the button. + +--- +##### button.cssClass : String +Adds css classes to the button. + +--- +##### button.background : String +Sets the css attribute `background` for the button. + +--- +##### button.color : String +Sets the css attribute `color` for the button. + +--- +##### button.size : String (default: `normal`) +Possible values: `small, normal, big` + + +--- +#### items : Array of Objects + +--- +##### items.content : String +The text that will be rendered in this item. + +--- +##### items.isActive : boolean (default: `false`) +If `true` the item is rendered more prominent. + +--- +##### items.onclick : function +This function will called when the item is clicked and gets the option and the item itself as attribute. + +--- +##### items.cssClass : String +Adds css classes to this item. + +--- +##### items.background : String +Sets the css attribute `background` for this item. + +--- +##### items.color : String +Sets the css attribute `color` for this item. + +--- +##### button.empty : boolean (default: `false`) +If `true` the item is not rendered. + + + +## Development + +We use Karma and jshint to ensure the quality of the code. The easiest way to run these checks is to use grunt: +```sh +npm install -g bower grunt-cli +npm install +grunt +``` + + +## Contributing + +Please submit all pull requests the against develop branch. Make sure it passes the CI [](https://travis-ci.org/maxklenk/angular-circular-navigation) and add tests to cover your code [](https://coveralls.io/r/maxklenk/angular-circular-navigation?branch=develop). Thanks! + +## Authors + +**Max Klenk** + ++ http://github.com/maxklenk + + + +## Copyright and license + + The MIT License + + Copyright (c) 2014 Max Klenk + + Permission is hereby granted, free of charge, to any person obtaining a copy + of this software and associated documentation files (the "Software"), to deal + in the Software without restriction, including without limitation the rights + to use, copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the Software is + furnished to do so, subject to the following conditions: + + The above copyright notice and this permission notice shall be included in + all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR + IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, + FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE + AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER + LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, + OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN + THE SOFTWARE. diff --git a/www/lib/angular-circular-navigation/angular-circular-navigation.css b/www/lib/angular-circular-navigation/angular-circular-navigation.css new file mode 100644 index 00000000..c629e63e --- /dev/null +++ b/www/lib/angular-circular-navigation/angular-circular-navigation.css @@ -0,0 +1,388 @@ +/* line 34, scss/angular-circular-navigation.scss */ +.cn-button { + margin-top: -1.5em; + margin-left: -1.5em; + width: 3em; + height: 3em; +} + +/* line 40, scss/angular-circular-navigation.scss */ +.cn-button.small { + margin-top: -1em; + margin-left: -1em; + width: 2em; + height: 2em; +} + +/* line 46, scss/angular-circular-navigation.scss */ +.cn-button.big { + margin-top: -2em; + margin-left: -2em; + width: 4em; + height: 4em; +} + +/* line 54, scss/angular-circular-navigation.scss */ +.cn-wrapper { + margin-top: -8.75em; + margin-left: -8.75em; + width: 17.5em; + height: 17.5em; +} + +/* line 60, scss/angular-circular-navigation.scss */ +.cn-wrapper.small { + margin-top: -7em; + margin-left: -7em; + width: 14em; + height: 14em; +} + +/* line 66, scss/angular-circular-navigation.scss */ +.cn-wrapper.big { + margin-top: -12.25em; + margin-left: -12.25em; + width: 24.5em; + height: 24.5em; +} + +/* line 74, scss/angular-circular-navigation.scss */ +.cn-wrapper li { + margin-top: -3.3em; + margin-left: -10em; + width: 10em; + height: 10em; +} + +/* line 80, scss/angular-circular-navigation.scss */ +.cn-wrapper.small li { + margin-top: -2.6em; + margin-left: -8em; + width: 8em; + height: 8em; +} + +/* line 86, scss/angular-circular-navigation.scss */ +.cn-wrapper.big li { + margin-top: -4.5em; + margin-left: -14em; + width: 14em; + height: 14em; +} + +/* line 93, scss/angular-circular-navigation.scss */ +.cn-wrapper li a { + right: -5em; + bottom: -5em; + width: 10em; + height: 10em; +} + +/* line 99, scss/angular-circular-navigation.scss */ +.cn-wrapper.small li a { + right: -4em; + bottom: -4em; + width: 8em; + height: 8em; +} + +/* line 105, scss/angular-circular-navigation.scss */ +.cn-wrapper.big li a { + right: -7em; + bottom: -7em; + width: 14em; + height: 14em; +} + +/* line 117, scss/angular-circular-navigation.scss */ +circular *, .circular * { + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + list-style: none; + position: relative; +} + +/* line 126, scss/angular-circular-navigation.scss */ +circular, .circular { + position: absolute; + top: 100%; + left: 50%; +} + +/* line 137, scss/angular-circular-navigation.scss */ +.cn-button { + position: absolute; + top: 100%; + left: 50%; + z-index: 11; + padding-top: 0em; + border: none; + border-radius: 50%; + background: none; + background-color: #0A833D; + color: #ffffff; + text-align: center; + font-weight: 700; + font-size: 1.3em; + text-transform: uppercase; + cursor: pointer; + -webkit-backface-visibility: hidden; + outline: 0; +} + +/* line 160, scss/angular-circular-navigation.scss */ +.cn-wrapper { + position: absolute; + top: 100%; + left: 50%; + z-index: 10; + border-radius: 50%; + background: transparent; + opacity: 0; + -webkit-transition: all .3s ease 0.3s; + -moz-transition: all .3s ease 0.3s; + transition: all .3s ease 0.3s; + -webkit-transform: scale(0.1); + -ms-transform: scale(0.1); + transform: scale(0.1); + pointer-events: none; + overflow: hidden; +} + +/* line 178, scss/angular-circular-navigation.scss */ +.opened-nav { + border-radius: 50%; + opacity: 1; + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + transition: all .3s ease; + -webkit-transform: scale(1); + -ms-transform: scale(1); + transform: scale(1); + pointer-events: auto; +} + +/* line 195, scss/angular-circular-navigation.scss */ +.cn-wrapper li { + position: absolute; + top: 50%; + left: 50%; + overflow: hidden; + font-size: 1.3em; + -webkit-transition: all .3s ease; + -moz-transition: all .3s ease; + transition: all .3s ease; + -webkit-transform-origin: 100% 100%; + transform-origin: 100% 100%; + pointer-events: none; +} + +/* line 209, scss/angular-circular-navigation.scss */ +.cn-wrapper li a { + position: absolute; + display: block; + border-radius: 50%; + background: #0A833D; + opacity: 0.7; + color: #ffffff; + text-align: center; + text-decoration: none; + font-size: 1.2em; + line-height: 2.5; + -webkit-backface-visibility: hidden; + backface-visibility: hidden; + pointer-events: auto; + cursor: pointer; +} + +/* line 226, scss/angular-circular-navigation.scss */ +.cn-wrapper li a.is-active { + opacity: 1; +} + +/* line 230, scss/angular-circular-navigation.scss */ +.cn-wrapper li a:hover, +.cn-wrapper li a:active, +.cn-wrapper li a:focus { + opacity: 0.9; +} + +/* line 236, scss/angular-circular-navigation.scss */ +.cn-wrapper li a.is-active:hover, +.cn-wrapper li a.is-active:active, +.cn-wrapper li a.is-active:focus { + opacity: 0.9; +} + +/* line 241, scss/angular-circular-navigation.scss */ +.cn-wrapper li a span { + position: relative; + top: 1.8em; + display: block; + font-size: .5em; + font-weight: 700; + text-transform: uppercase; +} + +/* line 250, scss/angular-circular-navigation.scss */ +.opened-nav li { + -webkit-transition: all .3s ease .3s; + -moz-transition: all .3s ease .3s; + transition: all .3s ease .3s; +} + +/* line 269, scss/angular-circular-navigation.scss */ +.item-odd-left-5, .opened-nav.items-11 li:first-child { + -webkit-transform: rotate(-105deg) skew(60deg); + -ms-transform: rotate(-105eg) skew(60deg); + transform: rotate(-105deg) skew(60deg); +} + +/* line 272, scss/angular-circular-navigation.scss */ +.item-odd-left-4, .opened-nav.items-9 li:first-child, .opened-nav.items-11 li:nth-child(2) { + -webkit-transform: rotate(-63deg) skew(60deg); + -ms-transform: rotate(-63deg) skew(60deg); + transform: rotate(-63deg) skew(60deg); +} + +/* line 275, scss/angular-circular-navigation.scss */ +.item-odd-left-3, .opened-nav.items-7 li:first-child, .opened-nav.items-9 li:nth-child(2), .opened-nav.items-11 li:nth-child(3) { + -webkit-transform: rotate(-21deg) skew(60deg); + -ms-transform: rotate(-21deg) skew(60deg); + transform: rotate(-21deg) skew(60deg); +} + +/* line 278, scss/angular-circular-navigation.scss */ +.item-odd-left-2, .opened-nav.items-5 li:first-child, .opened-nav.items-7 li:nth-child(2), .opened-nav.items-9 li:nth-child(3), .opened-nav.items-11 li:nth-child(4) { + -webkit-transform: rotate(11deg) skew(60deg); + -ms-transform: rotate(11deg) skew(60deg); + transform: rotate(11deg) skew(60deg); +} + +/* line 281, scss/angular-circular-navigation.scss */ +.item-odd-left-1, .opened-nav.items-3 li:first-child, .opened-nav.items-5 li:nth-child(2), .opened-nav.items-7 li:nth-child(3), .opened-nav.items-9 li:nth-child(4), .opened-nav.items-11 li:nth-child(5) { + -webkit-transform: rotate(23deg) skew(60deg); + -ms-transform: rotate(23deg) skew(60deg); + transform: rotate(23deg) skew(60deg); +} + +/* line 284, scss/angular-circular-navigation.scss */ +.item-odd-center, .cn-wrapper li, .opened-nav.items-1 li:first-child, .opened-nav.items-3 li:nth-child(2), .opened-nav.items-5 li:nth-child(3), .opened-nav.items-7 li:nth-child(4), .opened-nav.items-9 li:nth-child(5), .opened-nav.items-11 li:nth-child(6) { + -webkit-transform: rotate(75deg) skew(60deg); + -ms-transform: rotate(75deg) skew(60deg); + transform: rotate(75deg) skew(60deg); +} + +/* line 287, scss/angular-circular-navigation.scss */ +.item-odd-right-1, .opened-nav.items-3 li:nth-child(3), .opened-nav.items-5 li:nth-child(4), .opened-nav.items-7 li:nth-child(5), .opened-nav.items-9 li:nth-child(6), .opened-nav.items-11 li:nth-child(7) { + -webkit-transform: rotate(127deg) skew(60deg); + -ms-transform: rotate(127deg) skew(60deg); + transform: rotate(127deg) skew(60deg); +} + +/* line 290, scss/angular-circular-navigation.scss */ +.item-odd-right-2, .opened-nav.items-5 li:nth-child(5), .opened-nav.items-7 li:nth-child(6), .opened-nav.items-9 li:nth-child(7), .opened-nav.items-11 li:nth-child(8) { + -webkit-transform: rotate(139deg) skew(60deg); + -ms-transform: rotate(139deg) skew(60deg); + transform: rotate(139deg) skew(60deg); +} + +/* line 293, scss/angular-circular-navigation.scss */ +.item-odd-right-3, .opened-nav.items-7 li:nth-child(7), .opened-nav.items-9 li:nth-child(8), .opened-nav.items-11 li:nth-child(9) { + -webkit-transform: rotate(171deg) skew(60deg); + -ms-transform: rotate(171deg) skew(60deg); + transform: rotate(171deg) skew(60deg); +} + +/* line 296, scss/angular-circular-navigation.scss */ +.item-odd-right-4, .opened-nav.items-9 li:nth-child(9), .opened-nav.items-11 li:nth-child(10) { + -webkit-transform: rotate(213deg) skew(60deg); + -ms-transform: rotate(213deg) skew(60deg); + transform: rotate(213deg) skew(60deg); +} + +/* line 299, scss/angular-circular-navigation.scss */ +.item-odd-right-5, .opened-nav.items-11 li:nth-child(11) { + -webkit-transform: rotate(235deg) skew(60deg); + -ms-transform: rotate(235deg) skew(60deg); + transform: rotate(235deg) skew(60deg); +} + +/* line 304, scss/angular-circular-navigation.scss */ +.item-even-left-5, .opened-nav.items-10 li:first-child { + -webkit-transform: rotate(-69deg) skew(60deg); + -ms-transform: rotate(-69deg) skew(60deg); + transform: rotate(-69deg) skew(60deg); +} + +/* line 307, scss/angular-circular-navigation.scss */ +.item-even-left-4, .opened-nav.items-8 li:first-child, .opened-nav.items-10 li:nth-child(2) { + -webkit-transform: rotate(-37deg) skew(60deg); + -ms-transform: rotate(-37deg) skew(60deg); + transform: rotate(-37deg) skew(60deg); +} + +/* line 310, scss/angular-circular-navigation.scss */ +.item-even-left-3, .opened-nav.items-6 li:first-child, .opened-nav.items-8 li:nth-child(2), .opened-nav.items-10 li:nth-child(3) { + -webkit-transform: rotate(-5deg) skew(60deg); + -ms-transform: rotate(-5deg) skew(60deg); + transform: rotate(-5deg) skew(60deg); +} + +/* line 313, scss/angular-circular-navigation.scss */ +.item-even-left-2, .opened-nav.items-4 li:first-child, .opened-nav.items-6 li:nth-child(2), .opened-nav.items-8 li:nth-child(3), .opened-nav.items-10 li:nth-child(4) { + -webkit-transform: rotate(27deg) skew(60deg); + -ms-transform: rotate(27deg) skew(60deg); + transform: rotate(27deg) skew(60deg); +} + +/* line 316, scss/angular-circular-navigation.scss */ +.item-even-left-1, .opened-nav.items-2 li:first-child, .opened-nav.items-4 li:nth-child(2), .opened-nav.items-6 li:nth-child(3), .opened-nav.items-8 li:nth-child(4), .opened-nav.items-10 li:nth-child(5) { + -webkit-transform: rotate(59deg) skew(60deg); + -ms-transform: rotate(59deg) skew(60deg); + transform: rotate(59deg) skew(60deg); +} + +/* line 319, scss/angular-circular-navigation.scss */ +.item-even-right-1, .opened-nav.items-2 li:nth-child(2), .opened-nav.items-4 li:nth-child(3), .opened-nav.items-6 li:nth-child(4), .opened-nav.items-8 li:nth-child(5), .opened-nav.items-10 li:nth-child(6) { + -webkit-transform: rotate(91deg) skew(60deg); + -ms-transform: rotate(91deg) skew(60deg); + transform: rotate(91deg) skew(60deg); +} + +/* line 322, scss/angular-circular-navigation.scss */ +.item-even-right-2, .opened-nav.items-4 li:nth-child(4), .opened-nav.items-6 li:nth-child(5), .opened-nav.items-8 li:nth-child(6), .opened-nav.items-10 li:nth-child(7) { + -webkit-transform: rotate(123deg) skew(60deg); + -ms-transform: rotate(123deg) skew(60deg); + transform: rotate(123deg) skew(60deg); +} + +/* line 325, scss/angular-circular-navigation.scss */ +.item-even-right-3, .opened-nav.items-6 li:nth-child(6), .opened-nav.items-8 li:nth-child(7), .opened-nav.items-10 li:nth-child(8) { + -webkit-transform: rotate(155deg) skew(60deg); + -ms-transform: rotate(155deg) skew(60deg); + transform: rotate(155deg) skew(60deg); +} + +/* line 328, scss/angular-circular-navigation.scss */ +.item-even-right-4, .opened-nav.items-8 li:nth-child(8), .opened-nav.items-10 li:nth-child(9) { + -webkit-transform: rotate(187deg) skew(60deg); + -ms-transform: rotate(187deg) skew(60deg); + transform: rotate(187deg) skew(60deg); +} + +/* line 331, scss/angular-circular-navigation.scss */ +.item-even-right-5, .opened-nav.items-10 li:nth-child(10) { + -webkit-transform: rotate(219deg) skew(60deg); + -ms-transform: rotate(219deg) skew(60deg); + transform: rotate(219deg) skew(60deg); +} + +/* line 340, scss/angular-circular-navigation.scss */ +.cn-wrapper li a { + -webkit-transform: skew(-60deg) rotate(-75deg) scale(1); + -ms-transform: skew(-60deg) rotate(-75deg) scale(1); + transform: skew(-60deg) rotate(-75deg) scale(1); +} diff --git a/www/lib/angular-circular-navigation/angular-circular-navigation.js b/www/lib/angular-circular-navigation/angular-circular-navigation.js new file mode 100644 index 00000000..2ec99b5c --- /dev/null +++ b/www/lib/angular-circular-navigation/angular-circular-navigation.js @@ -0,0 +1,53 @@ +(function () { + + 'use strict'; + + /*global define, module, exports, require */ + + /* istanbul ignore next */ + var angular = window.angular ? window.angular : 'undefined' !== typeof require ? require('angular') : undefined; + + var circular = angular.module('angularCircularNavigation', []) + .directive('circular', ['$compile', function ($compile) { + + return { + restrict: 'EA', + scope: { + options: '=' + }, + template: '<button ng-click="toggleMenu()" class="cn-button {{options.button.size}}" ng-class="options.button.cssClass" style="background: {{options.button.background ? options.button.background : options.background}}; color: {{options.button.color ? options.button.color :options.color}};">{{options.content}}</button>' + + '<div class="cn-wrapper {{options.size}} items-{{options.items.length}}" ng-class="{\'opened-nav\': options.isOpen}"><ul>' + + '<li ng-repeat="item in options.items">' + + '<a ng-hide="item.empty" ng-click="perform(options, item)" ng-class="{\'is-active\': item.isActive}" class="{{item.cssClass}}" style="background: {{item.background ? item.background : options.background}}; color: {{item.color ? item.color : options.color}};">' + + '<span>{{item.content}}</span>' + + '</a></li></ul></div>', + controller: ['$scope', '$element', '$attrs', + function ($scope, $element, $attrs) { + + $scope.toggleMenu = function () { + $scope.options.isOpen = !$scope.options.isOpen; + }; + + $scope.perform = function (options, item) { + if (typeof item.onclick === 'function') { + item.onclick(options, item); + } + + if ($scope.options.toggleOnClick) { + $scope.toggleMenu(); + } + }; + + } + ] + }; + }]); + + /* istanbul ignore next */ + if (typeof define === 'function' && define.amd) { + define('circular', ['angular'], circular); + } else if ('undefined' !== typeof exports && 'undefined' !== typeof module) { + module.exports = circular; + } + +})(); diff --git a/www/lib/angular-circular-navigation/bower.json b/www/lib/angular-circular-navigation/bower.json new file mode 100644 index 00000000..4481560a --- /dev/null +++ b/www/lib/angular-circular-navigation/bower.json @@ -0,0 +1,36 @@ +{ + "name": "angular-circular-navigation", + "version": "0.2.1", + "homepage": "https://github.com/maxklenk/angular-circular-navigation", + "authors": [ + "Max Klenk <max@klenk.biz>" + ], + "description": "AngularJS directive for circular navigation menus", + "main": [ + "angular-circular-navigation.js", + "angular-circular-navigation.css" + ], + "keywords": [ + "angular", + "angularJS", + "directive", + "circular", + "navigation", + "menu" + ], + "license": "MIT", + "ignore": [ + "**/.*", + "node_modules", + "bower_components", + "test", + "scss", + "demo" + ], + "dependencies": { + "angular": "~1.3.x" + }, + "devDependencies": { + "angular-mocks": "~1.3.x" + } +} diff --git a/www/lib/angular-circular-navigation/index.html b/www/lib/angular-circular-navigation/index.html new file mode 100644 index 00000000..62ed6642 --- /dev/null +++ b/www/lib/angular-circular-navigation/index.html @@ -0,0 +1,134 @@ +<!DOCTYPE html> +<html ng-app="demoApp"> + <head> + <meta charset="utf-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <title>angular-circular-navigation Demo App</title> + + <link rel="stylesheet" href="demo/bower_components/json-tree/json-tree.css"> + <link rel="stylesheet" href="angular-circular-navigation.css"> + <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"> + + <script src="demo/bower_components/angular/angular.js"></script> + <script src="demo/bower_components/json-tree/json-tree.js"></script> + <script src="angular-circular-navigation.js"></script> + + <style type="text/css"> + html, + body { + height: 100%; + background: #52be7f; + color: #fff; + } + + .component { + position: relative; + margin-bottom: 3em; + height: 15em; + background: rgba(0,0,0,0.05); + font-family: 'Lato', Arial, sans-serif; + } + + .component > h2 { + overflow: hidden; + width: 100%; + text-align: center; + text-transform: uppercase; + white-space: nowrap; + font-weight: 300; + font-style: italic; + font-size: 12em; + opacity: 0.1; + cursor: default; + } + </style> + <script type="text/javascript"> + var app = angular.module('demoApp', ['angularCircularNavigation', 'json-tree']); + + app.controller('Controller', function ($scope) { + $scope.switchAxis = function (options, clicked) { + $scope.options.items[0].isActive = false; + $scope.options.items[1].isActive = false; + clicked.isActive = true; + }; + $scope.switchColor = function (options, clicked) { + $scope.options.items[7].isActive = false; + $scope.options.items[8].isActive = false; + $scope.options.items[9].isActive = false; + clicked.isActive = true; + $scope.options.button.background = clicked.background; + }; + $scope.switchType = function (options, clicked) { + $scope.options.items[3].isActive = false; + $scope.options.items[4].isActive = false; + $scope.options.items[5].isActive = false; + clicked.isActive = true; + $scope.options.button.cssClass = clicked.cssClass; + }; + + $scope.options = { + isOpen: false, + toggleOnClick: true, + background: 'green', + color: 'white', + size: '', + button: { + content: '', + cssClass: 'fa fa-bar-chart-o', + background: 'red', + color: 'white', + size: 'small' + }, + items: [{ + content: 'Y1', + isActive: true, + onclick: $scope.switchAxis + }, { + content: 'Y2', + onclick: $scope.switchAxis + }, { + empty: true + }, { + cssClass: 'fa fa-bar-chart-o', + isActive: true, + onclick: $scope.switchType + }, { + cssClass: 'fa fa-camera-retro', + onclick: $scope.switchType + }, { + cssClass: 'fa fa-paper-plane-o', + onclick: $scope.switchType + }, { + empty: true + }, { + isActive: true, + background: 'red', + onclick: $scope.switchColor + }, { + background: 'blue', + onclick: $scope.switchColor + }, { + background: 'yellow', + onclick: $scope.switchColor + }] + }; + }); + </script> + </head> + <body> + <a href="https://github.com/maxklenk/angular-circular-navigation"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a> + <div ng-controller="Controller"> + + <div class="component"> + <h2>circular</h2> + + <circular options="options"> </circular> + + </div> + + <h2>options:</h2> + <json-tree json='options' collapsed-level='3'></json-tree> + + </div> + </body> +</html> diff --git a/www/lib/angular-circular-navigation/package.json b/www/lib/angular-circular-navigation/package.json new file mode 100644 index 00000000..aaece5d3 --- /dev/null +++ b/www/lib/angular-circular-navigation/package.json @@ -0,0 +1,47 @@ +{ + "name": "angular-circular-navigation", + "version": "0.2.1", + "description": "AngularJS directive for circular navigation menus", + "main": [ + "angular-circular-navigation.js", + "angular-circular-navigation.css" + ], + "scripts": { + "test": "grunt" + }, + "repository": { + "type": "git", + "url": "git://github.com/maxklenk/angular-circular-navigation.git" + }, + "keywords": [ + "angular", + "angularJS", + "directive", + "circular", + "navigation", + "menu" + ], + "author": "Max Klenk", + "license": "MIT", + "readmeFilename": "README.md", + "homepage": "https://maxklenk.github.io/angular-circular-navigation", + "bugs": { + "url": "https://github.com/maxklenk/angular-circular-navigation/issues" + }, + "dependencies": { + "angular": "~1.3.0" + }, + "devDependencies": { + "load-grunt-tasks": "~0.6", + "grunt": "~0.4", + "grunt-contrib-jshint": "~0.10", + "grunt-karma": "~0.9", + "grunt-karma-coveralls": "~2.5", + "grunt-contrib-compass": "~1.0.1", + "karma": "~0.12", + "karma-coverage": "~0.2", + "karma-jasmine": "~0.3", + "karma-chrome-launcher": "~0.1", + "karma-firefox-launcher": "~0.1" + } +} |