├── .gitignore
├── .jshintrc
├── .npmignore
├── Gruntfile.js
├── LICENSE
├── README.md
├── bower.json
├── demo.html
├── dist
    ├── css
    │   ├── angular-aside.css
    │   └── angular-aside.min.css
    └── js
    │   ├── angular-aside.js
    │   └── angular-aside.min.js
├── index.js
├── karma.conf.js
├── package.json
├── src
    ├── scripts
    │   ├── app.js
    │   └── services
    │   │   └── aside.js
    └── styles
    │   ├── animate.css
    │   └── aside.css
└── test
    └── spec
        └── services
            └── aside.js


/.gitignore:
--------------------------------------------------------------------------------
1 | bower_components
2 | coverage
3 | node_modules
4 | **.DS_Store
5 | .tmp
6 | docs
7 | .idea


--------------------------------------------------------------------------------
/.jshintrc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "node": true,
 3 |   "browser": true,
 4 |   "esnext": true,
 5 |   "bitwise": true,
 6 |   "camelcase": true,
 7 |   "curly": true,
 8 |   "eqeqeq": true,
 9 |   "immed": true,
10 |   "indent": 2,
11 |   "latedef": true,
12 |   "newcap": true,
13 |   "noarg": true,
14 |   "quotmark": "single",
15 |   "regexp": true,
16 |   "undef": true,
17 |   "unused": true,
18 |   "strict": true,
19 |   "trailing": true,
20 |   "smarttabs": true,
21 |   "globals": {
22 |     "angular": false
23 |   }
24 | }


--------------------------------------------------------------------------------
/.npmignore:
--------------------------------------------------------------------------------
1 | src
2 | test
3 | Gruntfile.js
4 | bower.json
5 | karma.conf.js
6 | .jshintrc


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
  1 | 'use strict';
  2 | 
  3 | module.exports = function (grunt) {
  4 |   require('load-grunt-tasks')(grunt);
  5 |   require('time-grunt')(grunt);
  6 | 
  7 |   grunt.initConfig({
  8 |     pkg: grunt.file.readJSON('bower.json'),
  9 |     appConfig: {
 10 |       app: 'src',
 11 |       name: 'Angular Aside',
 12 |       dist: 'dist'
 13 |     },
 14 |     banner: '/*!\n' +
 15 |             ' * <%= pkg.name %> - v<%= pkg.version %>\n' +
 16 |             ' * <%= pkg.homepage %>\n' +
 17 |             ' * <%= grunt.template.today("yyyy-mm-dd") %>\n' +
 18 |             ' * Copyright (c) <%= grunt.template.today("yyyy") %> <%= pkg.author.name %>\n' +
 19 |             ' * License: <%= pkg.license %>\n' +
 20 |             ' */\n',
 21 |     concat: {
 22 |       js: {
 23 |         options: {
 24 |           banner: "\n<%= banner %>\n",
 25 |           stripBanners: true
 26 |         },
 27 |         files: {
 28 |           '.tmp/concat/js/angular-aside.js': ['<%= appConfig.app %>/scripts/{,*/}*.js']
 29 |         }
 30 |       },
 31 |       css: {
 32 |         options: {
 33 |           banner: '<%= banner %>\n'
 34 |         },
 35 |         files: {
 36 |           '<%= appConfig.dist %>/css/angular-aside.css': ['<%= appConfig.app %>/styles/{,*/}*.css']
 37 |         }
 38 |       }
 39 |     },
 40 |     connect: {
 41 |       test: {
 42 |         options: {
 43 |          port: 9001,
 44 |           base: [
 45 |             '.tmp',
 46 |             'test',
 47 |             '<%= appConfig.app %>'
 48 |           ]
 49 |         }
 50 |       }
 51 |     },
 52 |     clean: {
 53 |       dist: {
 54 |         files: [{
 55 |           dot: true,
 56 |           src: [
 57 |             '.tmp',
 58 |             '<%= appConfig.dist %>/*',
 59 |             '!<%= appConfig.dist %>/.git*'
 60 |           ]
 61 |         }]
 62 |       },
 63 |       server: '.tmp'
 64 |     },
 65 |     jshint: {
 66 |       options: {
 67 |         jshintrc: '.jshintrc'
 68 |       },
 69 |       all: [
 70 |         'Gruntfile.js',
 71 |         '<%= appConfig.app %>/scripts/{,*/}*.js'
 72 |       ]
 73 |     },
 74 |     cssmin: {
 75 |       dist: {
 76 |         options: {
 77 |           banner: '<%= banner %>'
 78 |         },
 79 |         files: {
 80 |           '<%= appConfig.dist %>/css/angular-aside.min.css': [
 81 |             '.tmp/styles/{,*/}*.css',
 82 |             '<%= appConfig.app %>/styles/{,*/}*.css'
 83 |           ]
 84 |         }
 85 |       }
 86 |     },
 87 |     karma: {
 88 |       unit: {
 89 |         configFile: 'karma.conf.js',
 90 |         singleRun: true
 91 |       }
 92 |     },
 93 |     ngAnnotate: {
 94 |       options: {
 95 |         singleQuotes: true
 96 |       },
 97 |       dist: {
 98 |         files: [{
 99 |           expand: true,
100 |           cwd: '.tmp/concat/js',
101 |           src: '*.js',
102 |           dest: '<%= appConfig.dist %>/js'
103 |         }]
104 |       }
105 |     },
106 |     uglify: {
107 |       dist: {
108 |         options: {
109 |           preserveComments: 'some'
110 |         },
111 |         files: {
112 |           '<%= appConfig.dist %>/js/angular-aside.min.js': ['<%= appConfig.dist %>/js/angular-aside.js']
113 |         }
114 |       }
115 |     },
116 |     ngdocs: {
117 |       options: {
118 |         dest: 'docs',
119 |         html5Mode: false,
120 |         title: '<%= appConfig.name %> Documentation'
121 |       },
122 |       all: ['<%= appConfig.app %>/scripts/{,*/}*.js']
123 |     }
124 |   });
125 | 
126 |   grunt.registerTask('test', [
127 |     'clean:server',
128 |     'connect:test',
129 |     'karma'
130 |   ]);
131 | 
132 |   grunt.registerTask('build', [
133 |     'ngdocs',
134 |     'clean:dist',
135 |     'concat',
136 |     'ngAnnotate',
137 |     'cssmin',
138 |     'uglify'
139 |   ]);
140 | 
141 |   grunt.registerTask('default', [
142 |     'test',
143 |     'build'
144 |   ]);
145 | 
146 | };
147 | 


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


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | angular-aside [![npm version](https://badge.fury.io/js/angular-aside.svg)](https://www.npmjs.com/package/angular-aside)
 2 | =============
 3 | 
 4 | Off canvas side menu for use with ui-bootstrap 0.14+. Extends ui-bootstrap's `$uibModal` provider.
 5 | 
 6 | :information_desk_person: Please use v1.2.x for ui-bootstrap versions 0.13 and below.
 7 | 
 8 | ### [Live Demo](http://plnkr.co/edit/G7vMSv?p=preview)
 9 | 
10 | ## Install
11 | 
12 | #### Bower:
13 | ```bash
14 |  $ bower install angular-aside
15 | ```
16 | Then, include css/js in html.
17 | 
18 | #### NPM
19 | ```bash
20 |  $ npm install angular-aside
21 | ```
22 | 
23 | ## Usage
24 | 
25 | ```js
26 |  angular.module('myApp', ['ui.bootstrap', 'ngAside']);
27 | ```
28 | 
29 | ```js
30 | angular.module('myApp')
31 |   .controller('MyController', function($scope, $aside) {
32 |     var asideInstance = $aside.open({
33 |       templateUrl: 'aside.html',
34 |       controller: 'AsideCtrl',
35 |       placement: 'left',
36 |       size: 'lg'
37 |     });
38 |   });
39 | ```
40 | 
41 | Supports all configuration that `$uibModal` has. Can be used with both `template` and `templateUrl`. For more info hit **Modal** section on [angular-ui bootstrap](http://angular-ui.github.io/bootstrap) documentation.
42 | 
43 | 
44 | ## Additional Config
45 | - `placement` - Aside placement can be `'left'`, `'right'`, `'top'`, or `'bottom'`.
46 | 
47 | 
48 | ## Credits
49 | - [Angular UI Bootstrap](angular-ui.github.io/bootstrap/)
50 | - [Animate.css](http://daneden.github.io/animate.css/)
51 | 
52 | 
53 | ## Author
54 | 
55 | İsmail Demirbilek ([@dbtek](https://twitter.com/dbtek))
56 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-aside",
 3 |   "version": "1.4.0",
 4 |   "homepage": "https://github.com/dbtek/angular-aside",
 5 |   "author": {
 6 |     "name": "İsmail Demirbilek",
 7 |     "email": "ce.demirbilek@gmail.com"
 8 |   },
 9 |   "description": "Off canvas side menu to use with ui-bootstrap.",
10 |   "main": [
11 |     "dist/js/angular-aside.js",
12 |     "dist/css/angular-aside.css"
13 |   ],
14 |   "keywords": [
15 |     "aside",
16 |     "off",
17 |     "canvas",
18 |     "menu",
19 |     "ui",
20 |     "bootstrap"
21 |   ],
22 |   "license": "MIT",
23 |   "ignore": [
24 |     "**/.*",
25 |     "node_modules",
26 |     "bower_components",
27 |     "test",
28 |     "tests",
29 |     "Gruntfile.js",
30 |     "karma.conf.js",
31 |     "package.json"
32 |   ],
33 |   "dependencies": {
34 |     "angular-bootstrap": ">=2.5.0"
35 |   },
36 |   "devDependencies": {
37 |     "angular-mocks": ">=1.6.0"
38 |   }
39 | }
40 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html ng-app="asideApp">
  3 |   <head>
  4 |     <link data-require="bootstrap-css@3.2.0" data-semver="3.2.0" rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
  5 |     <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css"/>
  6 |     <link rel="stylesheet" href="src/styles/animate.css"/>
  7 |     <link rel="stylesheet" href="src/styles/aside.css"/>
  8 |     <style type="text/css">
  9 |       /* Styles go here */
 10 |       body {
 11 |         padding: 30px 15px 0;
 12 |       }
 13 | 
 14 |       #downloadbtn {
 15 |         margin-bottom: 10px;
 16 |       }
 17 | 
 18 |       .about-links {
 19 |         color: #95a5a6;
 20 |       }
 21 |       .about-links a {
 22 |         border-bottom: 1px dotted;
 23 |         text-decoration: none;
 24 |         margin-right: 15px;
 25 |       }
 26 | 
 27 |       .about-links li {line-height: 30px;}
 28 |       .about-links li:hover, .about-links li:hover a { color: #666; }
 29 |       .about-links .love:hover i { color: #e74c3c; }
 30 |       .about-links .prospectus:hover i { color: #f39c12; }
 31 |       .about-links .cypher:hover i { color: #16a085; }
 32 |       .about-links .lab:hover i { color: #8e44ad; }
 33 |     </style>
 34 |     <script src="https://code.angularjs.org/1.6.3/angular.js"></script>
 35 |     <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.min.js"></script>
 36 |     <script src="dist/js/angular-aside.min.js"></script>
 37 |     <script>
 38 |       angular.module('asideApp', ['ui.bootstrap', 'ngAside'])
 39 |         .controller('MainCtrl', function($scope, $aside) {
 40 |           $scope.openAside = function(position) {
 41 |             $aside.open({
 42 |               templateUrl: 'aside.html',
 43 |               placement: position,
 44 |               backdrop: true,
 45 |               controller: function($scope, $uibModalInstance) {
 46 |                 $scope.ok = function(e) {
 47 |                   $uibModalInstance.close();
 48 |                   e.stopPropagation();
 49 |                 };
 50 |                 $scope.cancel = function(e) {
 51 |                   $uibModalInstance.dismiss();
 52 |                   e.stopPropagation();
 53 |                 };
 54 |               }
 55 |             })
 56 |           }
 57 |         });
 58 |     </script>
 59 |     <script type="text/ng-template" id="aside.html">
 60 |       <div class="modal-header">
 61 |           <h3 class="modal-title">ngAside</h3>
 62 |       </div>
 63 |       <div class="modal-body">
 64 |         Look im in aside.
 65 |       </div>
 66 |       <div class="modal-footer">
 67 |           <button class="btn btn-primary" ng-click="ok($event)">OK</button>
 68 |           <button class="btn btn-warning" ng-click="cancel($event)">Cancel</button>
 69 |       </div>
 70 |     </script>
 71 |   </head>
 72 | 
 73 |   <body ng-controller="MainCtrl">
 74 |     <div class="container">
 75 |       <div class="jumbotron panel panel-default">
 76 |         <h1>Angular Aside</h1>
 77 |         <p>
 78 |           Off canvas side menu to use with ui-bootstrap. Extends ui-bootstrap's $modal provider.
 79 |         </p>
 80 |         <p>
 81 |           <a href="https://github.com/dbtek/angular-aside" class="btn btn-primary btn-lg" id="downloadbtn">
 82 |             <span class="glyphicon glyphicon-download"></span> Download
 83 |           </a>
 84 |           <br />
 85 |           <a href="https://twitter.com/share" class="twitter-share-button" data-url="http://github.com/dbtek/angular-aside" data-via="dbtek">Tweet</a>
 86 |           <iframe src="http://ghbtns.com/github-btn.html?user=dbtek&repo=angular-aside&type=watch&count=true" allowtransparency="true" frameborder="0" scrolling="0" width="107" height="20"></iframe>
 87 |         </p>
 88 |         <div>
 89 |           <ul class="text-center about-links list-inline">
 90 |             <li class="love">
 91 |               made with <i class="fa fa-heart"></i> by <a href="http://twitter.com/dbtek" onclick="_gaq.push(['_trackEvent', 'Outbound Link', 'View twitter account']);">@dbtek</a>
 92 |             </li>
 93 |             <li class="lab">
 94 |               <i class="fa fa-flask"></i>
 95 |               <a href="https://github.com/dbtek/angular-aside">github project</a>
 96 |             </li>
 97 |             <li class="cypher">
 98 |               <i class="fa fa-code"></i>
 99 |               <a href="http://opensource.org/licenses/MIT">license: MIT</a>
100 |             </li>
101 |           </ul>
102 |         </div>
103 |       </div>
104 |       <div class="jumbotron panel panel-default">
105 |         <h2>Demo</h2>
106 |         <p>
107 |           <span class="pull-left">
108 |             <button type="button" class="btn btn-default btn-lg" ng-click="openAside('left')">
109 |               <span class="glyphicon glyphicon-align-justify"></span> Left
110 |             </button>
111 |             <button type="button" class="btn btn-default btn-lg" ng-click="openAside('top')">
112 |               Up <span class="glyphicon glyphicon-arrow-down"></span>
113 |             </button>
114 |           </span>
115 |           <span class="pull-right">
116 |             <button type="button" class="btn btn-default btn-lg" ng-click="openAside('bottom')">
117 |               Down <span class="glyphicon glyphicon-arrow-up"></span>
118 |             </button>
119 |             <button type="button" class="btn btn-default btn-lg" ng-click="openAside('right')">
120 |               Right <span class="glyphicon glyphicon-align-justify"></span>
121 |             </button>
122 |           </span>
123 |         </p>
124 |         <div class="clearfix"></div>
125 |         <br />
126 |         <!-- plunk-hr -->
127 |         <div class="text-center">
128 |           <ins class="adsbygoogle text-center"
129 |                style="display:inline-block;width:320px;height:100px"
130 |                data-ad-client="ca-pub-7616772085785107"
131 |                data-ad-slot="4180012826"></ins>
132 |         </div>
133 |       </div>
134 |     </div>
135 |     <script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
136 |     <script>
137 |     (adsbygoogle = window.adsbygoogle || []).push({});
138 |     </script>
139 |     <script>
140 |       (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
141 |       (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
142 |       m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
143 |       })(window,document,'script','http://www.google-analytics.com/analytics.js','ga');
144 | 
145 |       ga('create', 'UA-46512232-6', 'auto');
146 |       ga('send', 'pageview');
147 | 
148 |     </script>
149 |     <script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
150 |   </body>
151 | </html>
152 | 


--------------------------------------------------------------------------------
/dist/css/angular-aside.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 |  * angular-aside - v1.4.0
  3 |  * https://github.com/dbtek/angular-aside
  4 |  * 2017-03-27
  5 |  * Copyright (c) 2017 İsmail Demirbilek
  6 |  * License: MIT
  7 |  */
  8 | 
  9 | /*!
 10 | Animate.css - http://daneden.me/animate
 11 | Licensed under the MIT license - http://opensource.org/licenses/MIT
 12 | 
 13 | Copyright (c) 2014 Daniel Eden
 14 | */
 15 | 
 16 | @-webkit-keyframes fadeInLeft {
 17 |   0% {
 18 |     opacity: 0;
 19 |     -webkit-transform: translate3d(-100%, 0, 0);
 20 |     transform: translate3d(-100%, 0, 0);
 21 |   }
 22 | 
 23 |   100% {
 24 |     opacity: 1;
 25 |     -webkit-transform: none;
 26 |     transform: none;
 27 |   }
 28 | }
 29 | 
 30 | @keyframes fadeInLeft {
 31 |   0% {
 32 |     opacity: 0;
 33 |     -webkit-transform: translate3d(-100%, 0, 0);
 34 |     -ms-transform: translate3d(-100%, 0, 0);
 35 |     transform: translate3d(-100%, 0, 0);
 36 |   }
 37 | 
 38 |   100% {
 39 |     opacity: 1;
 40 |     -webkit-transform: none;
 41 |     -ms-transform: none;
 42 |     transform: none;
 43 |   }
 44 | }
 45 | 
 46 | .fadeInLeft {
 47 |   -webkit-animation-name: fadeInLeft;
 48 |   animation-name: fadeInLeft;
 49 | }
 50 | 
 51 | @-webkit-keyframes fadeInRight {
 52 |   0% {
 53 |     opacity: 0;
 54 |     -webkit-transform: translate3d(100%, 0, 0);
 55 |     transform: translate3d(100%, 0, 0);
 56 |   }
 57 | 
 58 |   100% {
 59 |     opacity: 1;
 60 |     -webkit-transform: none;
 61 |     transform: none;
 62 |   }
 63 | }
 64 | 
 65 | @keyframes fadeInRight {
 66 |   0% {
 67 |     opacity: 0;
 68 |     -webkit-transform: translate3d(100%, 0, 0);
 69 |     -ms-transform: translate3d(100%, 0, 0);
 70 |     transform: translate3d(100%, 0, 0);
 71 |   }
 72 | 
 73 |   100% {
 74 |     opacity: 1;
 75 |     -webkit-transform: none;
 76 |     -ms-transform: none;
 77 |     transform: none;
 78 |   }
 79 | }
 80 | 
 81 | .fadeInRight {
 82 |   -webkit-animation-name: fadeInRight;
 83 |   animation-name: fadeInRight;
 84 | }
 85 | 
 86 | @-webkit-keyframes fadeInTop {
 87 |   0% {
 88 |     opacity: 0;
 89 |     -webkit-transform: translate3d(0, -100%, 0);
 90 |     transform: translate3d(0, -100%, 0);
 91 |   }
 92 | 
 93 |   100% {
 94 |     opacity: 1;
 95 |     -webkit-transform: none;
 96 |     transform: none;
 97 |   }
 98 | }
 99 | 
100 | @keyframes fadeInTop {
101 |   0% {
102 |     opacity: 0;
103 |     -webkit-transform: translate3d(0, -100%, 0);
104 |     -ms-transform: translate3d(0, -100%, 0);
105 |     transform: translate3d(0, -100%, 0);
106 |   }
107 | 
108 |   100% {
109 |     opacity: 1;
110 |     -webkit-transform: none;
111 |     -ms-transform: none;
112 |     transform: none;
113 |   }
114 | }
115 | 
116 | .fadeInTop {
117 |   -webkit-animation-name: fadeInTop;
118 |   animation-name: fadeInTop;
119 | }
120 | 
121 | @-webkit-keyframes fadeInBottom {
122 |   0% {
123 |     opacity: 0;
124 |     -webkit-transform: translate3d(0, 100%, 0);
125 |     transform: translate3d(0, 100%, 0);
126 |   }
127 | 
128 |   100% {
129 |     opacity: 1;
130 |     -webkit-transform: none;
131 |     transform: none;
132 |   }
133 | }
134 | 
135 | @keyframes fadeInBottom {
136 |   0% {
137 |     opacity: 0;
138 |     -webkit-transform: translate3d(0, 100%, 0);
139 |     -ms-transform: translate3d(0, 100%, 0);
140 |     transform: translate3d(0, 100%, 0);
141 |   }
142 | 
143 |   100% {
144 |     opacity: 1;
145 |     -webkit-transform: none;
146 |     -ms-transform: none;
147 |     transform: none;
148 |   }
149 | }
150 | 
151 | .fadeInBottom {
152 |   -webkit-animation-name: fadeInBottom;
153 |   animation-name: fadeInBottom;
154 | }
155 | 
156 | @-webkit-keyframes fadeOutLeft {
157 |   0% {
158 |     opacity: 1;
159 |   }
160 | 
161 |   100% {
162 |     opacity: 0;
163 |     -webkit-transform: translate3d(-100%, 0, 0);
164 |             transform: translate3d(-100%, 0, 0);
165 |   }
166 | }
167 | 
168 | @keyframes fadeOutLeft {
169 |   0% {
170 |     opacity: 1;
171 |   }
172 | 
173 |   100% {
174 |     opacity: 0;
175 |     -webkit-transform: translate3d(-100%, 0, 0);
176 |             transform: translate3d(-100%, 0, 0);
177 |   }
178 | }
179 | 
180 | .fadeOutLeft {
181 |   -webkit-animation-name: fadeOutLeft;
182 |           animation-name: fadeOutLeft;
183 | }
184 | 
185 | @-webkit-keyframes fadeOutRight {
186 |   0% {
187 |     opacity: 1;
188 |   }
189 | 
190 |   100% {
191 |     opacity: 0;
192 |     -webkit-transform: translate3d(100%, 0, 0);
193 |             transform: translate3d(100%, 0, 0);
194 |   }
195 | }
196 | 
197 | @keyframes fadeOutRight {
198 |   0% {
199 |     opacity: 1;
200 |   }
201 | 
202 |   100% {
203 |     opacity: 0;
204 |     -webkit-transform: translate3d(100%, 0, 0);
205 |             transform: translate3d(100%, 0, 0);
206 |   }
207 | }
208 | 
209 | .fadeOutRight {
210 |   -webkit-animation-name: fadeOutRight;
211 |           animation-name: fadeOutRight;
212 | }
213 | 
214 | @-webkit-keyframes fadeOutUp {
215 |   0% {
216 |     opacity: 1;
217 |   }
218 | 
219 |   100% {
220 |     opacity: 0;
221 |     -webkit-transform: translate3d(0, -100%, 0);
222 |             transform: translate3d(0, -100%, 0);
223 |   }
224 | }
225 | 
226 | @keyframes fadeOutUp {
227 |   0% {
228 |     opacity: 1;
229 |   }
230 | 
231 |   100% {
232 |     opacity: 0;
233 |     -webkit-transform: translate3d(0, -100%, 0);
234 |             transform: translate3d(0, -100%, 0);
235 |   }
236 | }
237 | 
238 | .fadeOutUp {
239 |   -webkit-animation-name: fadeOutUp;
240 |           animation-name: fadeOutUp;
241 | }
242 | 
243 | 
244 | @-webkit-keyframes fadeOutDown {
245 |   0% {
246 |     opacity: 1;
247 |   }
248 | 
249 |   100% {
250 |     opacity: 0;
251 |     -webkit-transform: translate3d(0, 100%, 0);
252 |             transform: translate3d(0, 100%, 0);
253 |   }
254 | }
255 | 
256 | @keyframes fadeOutDown {
257 |   0% {
258 |     opacity: 1;
259 |   }
260 | 
261 |   100% {
262 |     opacity: 0;
263 |     -webkit-transform: translate3d(0, 100%, 0);
264 |             transform: translate3d(0, 100%, 0);
265 |   }
266 | }
267 | 
268 | .fadeOutDown {
269 |   -webkit-animation-name: fadeOutDown;
270 |           animation-name: fadeOutDown;
271 | }
272 | /* Common */
273 | 
274 | .ng-aside {
275 |   overflow-y: auto;
276 |   overflow-x: hidden;
277 | }
278 | 
279 | .ng-aside .modal-dialog {
280 |   position: absolute;
281 |   margin: 0;
282 |   padding: 0;
283 | }
284 | 
285 | .ng-aside.fade .modal-dialog {
286 |   -o-transition: none;
287 |   -moz-transition: none;
288 |   -ms-transition: none;
289 |   -webkit-transition: none;
290 |   transition: none;
291 |   /*CSS transforms*/
292 |   -o-transform: none;
293 |   -moz-transform: none;
294 |   -ms-transform: none;
295 |   -webkit-transform: none;
296 |   transform: none;
297 | }
298 | 
299 | .ng-aside .modal-dialog .modal-content {
300 |   overflow-y: auto;
301 |   overflow-x: hidden;
302 |   border: none;
303 |   border-radius: 0;
304 | }
305 | 
306 | /* Horizontal */
307 | 
308 | .ng-aside.horizontal {
309 |   height: 100%;
310 | }
311 | 
312 | .ng-aside.horizontal .modal-dialog .modal-content {
313 |   height: 100%;
314 | }
315 | 
316 | .ng-aside.horizontal .modal-dialog {
317 |   position: absolute;
318 |   top: 0;
319 |   height: 100%;
320 | }
321 | 
322 | .modal-open .ng-aside.horizontal.left .modal-dialog {
323 |   animation: fadeOutLeft 250ms;
324 |   -webkit-animation: fadeOutLeft 250ms;
325 |   -moz-animation: fadeOutLeft 250ms;
326 |   -o-animation: fadeOutLeft 250ms;
327 |   -ms-animation: fadeOutLeft 250ms;
328 | }
329 | 
330 | .ng-aside.horizontal.left.in .modal-dialog {
331 |   animation: fadeInLeft 400ms;
332 |   -webkit-animation: fadeInLeft 400ms;
333 |   -moz-animation: fadeInLeft 400ms;
334 |   -o-animation: fadeInLeft 400ms;
335 |   -ms-animation: fadeInLeft 400ms;
336 | }
337 | 
338 | .ng-aside.horizontal.left .modal-dialog {
339 |   left: 0;
340 | }
341 | 
342 | .ng-aside.horizontal.right .modal-dialog {
343 |   animation: fadeOutRight 400ms;
344 |   -webkit-animation: fadeOutRight 400ms;
345 |   -moz-animation: fadeOutRight 400ms;
346 |   -o-animation: fadeOutRight 400ms;
347 |   -ms-animation: fadeOutRight 400ms;
348 | }
349 | 
350 | .ng-aside.horizontal.right.in .modal-dialog {
351 |   animation: fadeInRight 250ms;
352 |   -webkit-animation: fadeInRight 250ms;
353 | }
354 | 
355 | .ng-aside.horizontal.right .modal-dialog {
356 |   right: 0;
357 | }
358 | 
359 | /* Vertical */
360 | 
361 | .ng-aside.vertical {
362 |   width: 100% !important;
363 |   overflow: hidden;
364 | }
365 | 
366 | .ng-aside.vertical .modal-dialog {
367 |   left: 0;
368 |   right: 0;
369 |   width: 100% !important;
370 | }
371 | 
372 | .ng-aside.vertical .modal-dialog .modal-content {
373 |   max-height: 400px;
374 | }
375 | 
376 | .ng-aside.vertical.top .modal-dialog {
377 |   animation: fadeOutUp 250ms;
378 |   -webkit-animation: fadeOutUp 250ms;
379 |   -webkit-animation: fadeOutUp 250ms;
380 |   -moz-animation: fadeOutUp 250ms;
381 |   -o-animation: fadeOutUp 250ms;
382 |   -ms-animation: fadeOutUp 250ms;
383 | }
384 | 
385 | .ng-aside.vertical.top.in .modal-dialog {
386 |   animation: fadeInTop 250ms;
387 |   -webkit-animation: fadeInTop 250ms;
388 |   -webkit-animation: fadeInTop 250ms;
389 |   -moz-animation: fadeInTop 250ms;
390 |   -o-animation: fadeInTop 250ms;
391 |   -ms-animation: fadeInTop 250ms;
392 | }
393 | 
394 | .ng-aside.vertical.bottom .modal-dialog {
395 |   animation: fadeOutDown 250ms;
396 |   -webkit-animation: fadeOutDown 250ms;
397 |   -webkit-animation: fadeOutDown 250ms;
398 |   -moz-animation: fadeOutDown 250ms;
399 |   -o-animation: fadeOutDown 250ms;
400 |   -ms-animation: fadeOutDown 250ms;
401 | }
402 | .ng-aside.vertical.bottom.in .modal-dialog {
403 |   animation: fadeInBottom 250ms;
404 |   -webkit-animation: fadeInBottom 250ms;
405 |   -webkit-animation: fadeInBottom 250ms;
406 |   -moz-animation: fadeInBottom 250ms;
407 |   -o-animation: fadeInBottom 250ms;
408 |   -ms-animation: fadeInBottom 250ms;
409 | }
410 | 
411 | .ng-aside.vertical.bottom .modal-dialog {
412 |   bottom: 0;
413 | }
414 | 
415 | .ng-aside.vertical.top .modal-dialog {
416 |   top: 0;
417 | }
418 | 
419 | .ng-aside.vertical .modal-dialog .modal-content {
420 |   width: 100%;
421 | }


--------------------------------------------------------------------------------
/dist/css/angular-aside.min.css:
--------------------------------------------------------------------------------
 1 | /*!
 2 |  * angular-aside - v1.4.0
 3 |  * https://github.com/dbtek/angular-aside
 4 |  * 2017-03-27
 5 |  * Copyright (c) 2017 İsmail Demirbilek
 6 |  * License: MIT
 7 |  */
 8 | 
 9 | /*!
10 | Animate.css - http://daneden.me/animate
11 | Licensed under the MIT license - http://opensource.org/licenses/MIT
12 | 
13 | Copyright (c) 2014 Daniel Eden
14 | */@-webkit-keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInLeft{0%{opacity:0;-webkit-transform:translate3d(-100%,0,0);-ms-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}@-webkit-keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInRight{0%{opacity:0;-webkit-transform:translate3d(100%,0,0);-ms-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInRight{-webkit-animation-name:fadeInRight;animation-name:fadeInRight}@-webkit-keyframes fadeInTop{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInTop{0%{opacity:0;-webkit-transform:translate3d(0,-100%,0);-ms-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInTop{-webkit-animation-name:fadeInTop;animation-name:fadeInTop}@-webkit-keyframes fadeInBottom{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;transform:none}}@keyframes fadeInBottom{0%{opacity:0;-webkit-transform:translate3d(0,100%,0);-ms-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}100%{opacity:1;-webkit-transform:none;-ms-transform:none;transform:none}}.fadeInBottom{-webkit-animation-name:fadeInBottom;animation-name:fadeInBottom}@-webkit-keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}@keyframes fadeOutLeft{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(-100%,0,0);transform:translate3d(-100%,0,0)}}.fadeOutLeft{-webkit-animation-name:fadeOutLeft;animation-name:fadeOutLeft}@-webkit-keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes fadeOutRight{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.fadeOutRight{-webkit-animation-name:fadeOutRight;animation-name:fadeOutRight}@-webkit-keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}@keyframes fadeOutUp{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,-100%,0);transform:translate3d(0,-100%,0)}}.fadeOutUp{-webkit-animation-name:fadeOutUp;animation-name:fadeOutUp}@-webkit-keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes fadeOutDown{0%{opacity:1}100%{opacity:0;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.fadeOutDown{-webkit-animation-name:fadeOutDown;animation-name:fadeOutDown}.ng-aside{overflow-y:auto;overflow-x:hidden}.ng-aside .modal-dialog{position:absolute;margin:0;padding:0}.ng-aside.fade .modal-dialog{-o-transition:none;-moz-transition:none;-ms-transition:none;-webkit-transition:none;transition:none;-o-transform:none;-moz-transform:none;-ms-transform:none;-webkit-transform:none;transform:none}.ng-aside .modal-dialog .modal-content{overflow-y:auto;overflow-x:hidden;border:none;border-radius:0}.ng-aside.horizontal,.ng-aside.horizontal .modal-dialog .modal-content{height:100%}.ng-aside.horizontal .modal-dialog{position:absolute;top:0;height:100%}.modal-open .ng-aside.horizontal.left .modal-dialog{animation:fadeOutLeft 250ms;-webkit-animation:fadeOutLeft 250ms;-moz-animation:fadeOutLeft 250ms;-o-animation:fadeOutLeft 250ms;-ms-animation:fadeOutLeft 250ms}.ng-aside.horizontal.left.in .modal-dialog{animation:fadeInLeft 400ms;-webkit-animation:fadeInLeft 400ms;-moz-animation:fadeInLeft 400ms;-o-animation:fadeInLeft 400ms;-ms-animation:fadeInLeft 400ms}.ng-aside.horizontal.left .modal-dialog{left:0}.ng-aside.horizontal.right .modal-dialog{animation:fadeOutRight 400ms;-webkit-animation:fadeOutRight 400ms;-moz-animation:fadeOutRight 400ms;-o-animation:fadeOutRight 400ms;-ms-animation:fadeOutRight 400ms}.ng-aside.horizontal.right.in .modal-dialog{animation:fadeInRight 250ms;-webkit-animation:fadeInRight 250ms}.ng-aside.horizontal.right .modal-dialog{right:0}.ng-aside.vertical{width:100%!important;overflow:hidden}.ng-aside.vertical .modal-dialog{left:0;right:0;width:100%!important}.ng-aside.vertical .modal-dialog .modal-content{max-height:400px}.ng-aside.vertical.top .modal-dialog{animation:fadeOutUp 250ms;-webkit-animation:fadeOutUp 250ms;-webkit-animation:fadeOutUp 250ms;-moz-animation:fadeOutUp 250ms;-o-animation:fadeOutUp 250ms;-ms-animation:fadeOutUp 250ms}.ng-aside.vertical.top.in .modal-dialog{animation:fadeInTop 250ms;-webkit-animation:fadeInTop 250ms;-webkit-animation:fadeInTop 250ms;-moz-animation:fadeInTop 250ms;-o-animation:fadeInTop 250ms;-ms-animation:fadeInTop 250ms}.ng-aside.vertical.bottom .modal-dialog{animation:fadeOutDown 250ms;-webkit-animation:fadeOutDown 250ms;-webkit-animation:fadeOutDown 250ms;-moz-animation:fadeOutDown 250ms;-o-animation:fadeOutDown 250ms;-ms-animation:fadeOutDown 250ms}.ng-aside.vertical.bottom.in .modal-dialog{animation:fadeInBottom 250ms;-webkit-animation:fadeInBottom 250ms;-webkit-animation:fadeInBottom 250ms;-moz-animation:fadeInBottom 250ms;-o-animation:fadeInBottom 250ms;-ms-animation:fadeInBottom 250ms}.ng-aside.vertical.bottom .modal-dialog{bottom:0}.ng-aside.vertical.top .modal-dialog{top:0}.ng-aside.vertical .modal-dialog .modal-content{width:100%}


--------------------------------------------------------------------------------
/dist/js/angular-aside.js:
--------------------------------------------------------------------------------
 1 | 
 2 | /*!
 3 |  * angular-aside - v1.4.0
 4 |  * https://github.com/dbtek/angular-aside
 5 |  * 2017-03-27
 6 |  * Copyright (c) 2017 İsmail Demirbilek
 7 |  * License: MIT
 8 |  */
 9 | 
10 | (function() {
11 |   'use strict';
12 | 
13 |   /**
14 |    * @ngdoc overview
15 |    * @name ngAside
16 |    * @description
17 |    * Main module for aside component.
18 |    * @function
19 |    * @author İsmail Demirbilek
20 |    */
21 |   angular.module('ngAside', ['ui.bootstrap.modal']);
22 | })();
23 | 
24 | (function() {
25 |   'use strict';
26 | 
27 |   angular.module('ngAside')
28 |     /**
29 |      * @ngdoc service
30 |      * @name ngAside.services:$aside
31 |      * @description
32 |      * Factory to create a uibModal instance to use it as aside. It simply wraps $uibModal by overriding open() method and sets a class on modal window.
33 |      * @function
34 |      */
35 |     .factory('$aside', ['$uibModal', function($uibModal) {
36 |       var defaults = this.defaults = {
37 |         placement: 'left'
38 |       };
39 | 
40 |       var asideFactory = {
41 |         // override open method
42 |         open: function(config) {
43 |           var options = angular.extend({}, defaults, config);
44 |           // check placement is set correct
45 |           if(['left', 'right', 'bottom', 'top'].indexOf(options.placement) === -1) {
46 |             options.placement = defaults.placement;
47 |           }
48 |           var vertHoriz = ['left', 'right'].indexOf(options.placement) === -1 ? 'vertical' : 'horizontal';
49 |           // set aside classes
50 |           options.windowClass  = 'ng-aside ' + vertHoriz + ' ' + options.placement + (options.windowClass ? ' ' + options.windowClass : '');
51 |           delete options.placement
52 |           return $uibModal.open(options);
53 |         }
54 |       };
55 | 
56 |       // create $aside as extended $uibModal
57 |       var $aside = angular.extend({}, $uibModal, asideFactory);
58 |       return $aside;
59 |     }]);
60 | })();
61 | 


--------------------------------------------------------------------------------
/dist/js/angular-aside.min.js:
--------------------------------------------------------------------------------
1 | /*!
2 |  * angular-aside - v1.4.0
3 |  * https://github.com/dbtek/angular-aside
4 |  * 2017-03-27
5 |  * Copyright (c) 2017 İsmail Demirbilek
6 |  * License: MIT
7 |  */
8 | !function(){"use strict";angular.module("ngAside",["ui.bootstrap.modal"])}(),function(){"use strict";angular.module("ngAside").factory("$aside",["$uibModal",function(a){var b=this.defaults={placement:"left"},c={open:function(c){var d=angular.extend({},b,c);["left","right","bottom","top"].indexOf(d.placement)===-1&&(d.placement=b.placement);var e=["left","right"].indexOf(d.placement)===-1?"vertical":"horizontal";return d.windowClass="ng-aside "+e+" "+d.placement+(d.windowClass?" "+d.windowClass:""),delete d.placement,a.open(d)}};return angular.extend({},a,c)}])}();


--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | require('./dist/js/angular-aside');
2 | module.exports = 'ngAside';


--------------------------------------------------------------------------------
/karma.conf.js:
--------------------------------------------------------------------------------
 1 | // Karma configuration
 2 | // http://karma-runner.github.io/0.10/config/configuration-file.html
 3 | 
 4 | module.exports = function (config) {
 5 |   config.set({
 6 |         // base path, that will be used to resolve files and exclude
 7 |         basePath: '',
 8 | 
 9 |         // testing framework to use (jasmine/mocha/qunit/...)
10 |         frameworks: ['jasmine'],
11 | 
12 |         // list of files / patterns to load in the browser
13 |         files: [
14 |           'bower_components/angular/angular.js',
15 |           'bower_components/angular-mocks/angular-mocks.js',
16 |           'bower_components/angular-bootstrap/ui-bootstrap.js',
17 |           'src/scripts/*.js',
18 |           'src/scripts/*/**.js',
19 |           'test/spec/**/*.js'
20 |         ],
21 | 
22 |         // code coverage
23 |         preprocessors: {
24 |           'src/scripts/**/*.js': ['coverage']
25 |         },
26 | 
27 |         reporters: ['spec', 'coverage'],
28 | 
29 |         coverageReporter: {
30 |           reporters: [
31 |             {
32 |               type: 'html',
33 |               dir: 'coverage'
34 |             }
35 |           ]
36 |         },
37 | 
38 |         // list of files / patterns to exclude
39 |         exclude: [],
40 | 
41 |         // web server port
42 |         port: 9876,
43 | 
44 |         // level of logging
45 |         // possible values: LOG_DISABLE || LOG_ERROR || LOG_WARN || LOG_INFO || LOG_DEBUG
46 |         logLevel: config.LOG_INFO,
47 | 
48 |         // enable / disable watching file and executing tests whenever any file changes
49 |         autoWatch: false,
50 | 
51 |         // Start these browsers, currently available:
52 |         // - Chrome
53 |         // - ChromeCanary
54 |         // - Firefox
55 |         // - Opera
56 |         // - Safari (only Mac)
57 |         // - PhantomJS
58 |         // - IE (only Windows)
59 |         browsers: ['PhantomJS'],
60 | 
61 |         // Continuous Integration mode
62 |         // if true, it capture browsers, run tests and exit
63 |         singleRun: false
64 |       });
65 | };


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "angular-aside",
 3 |   "version": "1.4.0",
 4 |   "repository": "https://github.com/dbtek/angular-aside",
 5 |   "license": "MIT",
 6 |   "browser": "index.js",
 7 |   "style": "dist/css/angular-aside.css",
 8 |   "peerDependencies": {
 9 |     "angular-ui-bootstrap": ">=0.14.0"
10 |   },
11 |   "keywords": [
12 |     "angular",
13 |     "bootstrap",
14 |     "aside",
15 |     "ng-aside",
16 |     "angular-ui",
17 |     "modal",
18 |     "off",
19 |     "canvas",
20 |     "side",
21 |     "menu"
22 |   ],
23 |   "devDependencies": {
24 |     "grunt": "~0.4.4",
25 |     "grunt-contrib-clean": "~0.5.0",
26 |     "grunt-contrib-concat": "^0.5.0",
27 |     "grunt-contrib-connect": "~0.5.0",
28 |     "grunt-contrib-cssmin": "~0.9.0",
29 |     "grunt-contrib-jshint": "~0.9.2",
30 |     "grunt-contrib-uglify": "~0.4.0",
31 |     "grunt-karma": "~0.8.2",
32 |     "grunt-ng-annotate": "^1.0.1",
33 |     "grunt-ngdocs": "~0.2.2",
34 |     "grunt-usemin": "~2.1.0",
35 |     "karma": "~0.12.1",
36 |     "karma-coverage": "~0.2.4",
37 |     "karma-html2js-preprocessor": "~0.1.0",
38 |     "karma-jasmine": "~0.2.2",
39 |     "karma-phantomjs-launcher": "~1.0.4",
40 |     "karma-requirejs": "~0.2.1",
41 |     "karma-script-launcher": "~0.1.0",
42 |     "karma-spec-reporter": "~0.0.13",
43 |     "load-grunt-tasks": "~0.4.0",
44 |     "requirejs": "^2.3.3",
45 |     "time-grunt": "~0.2.7"
46 |   },
47 |   "scripts": {
48 |     "test": "grunt test"
49 |   },
50 |   "engines": {
51 |     "node": ">=0.10.0"
52 |   }
53 | }
54 | 


--------------------------------------------------------------------------------
/src/scripts/app.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   'use strict';
 3 | 
 4 |   /**
 5 |    * @ngdoc overview
 6 |    * @name ngAside
 7 |    * @description
 8 |    * Main module for aside component.
 9 |    * @function
10 |    * @author İsmail Demirbilek
11 |    */
12 |   angular.module('ngAside', ['ui.bootstrap.modal']);
13 | })();
14 | 


--------------------------------------------------------------------------------
/src/scripts/services/aside.js:
--------------------------------------------------------------------------------
 1 | (function() {
 2 |   'use strict';
 3 | 
 4 |   angular.module('ngAside')
 5 |     /**
 6 |      * @ngdoc service
 7 |      * @name ngAside.services:$aside
 8 |      * @description
 9 |      * Factory to create a uibModal instance to use it as aside. It simply wraps $uibModal by overriding open() method and sets a class on modal window.
10 |      * @function
11 |      */
12 |     .factory('$aside', function($uibModal) {
13 |       var defaults = this.defaults = {
14 |         placement: 'left'
15 |       };
16 | 
17 |       var asideFactory = {
18 |         // override open method
19 |         open: function(config) {
20 |           var options = angular.extend({}, defaults, config);
21 |           // check placement is set correct
22 |           if(['left', 'right', 'bottom', 'top'].indexOf(options.placement) === -1) {
23 |             options.placement = defaults.placement;
24 |           }
25 |           var vertHoriz = ['left', 'right'].indexOf(options.placement) === -1 ? 'vertical' : 'horizontal';
26 |           // set aside classes
27 |           options.windowClass  = 'ng-aside ' + vertHoriz + ' ' + options.placement + (options.windowClass ? ' ' + options.windowClass : '');
28 |           delete options.placement
29 |           return $uibModal.open(options);
30 |         }
31 |       };
32 | 
33 |       // create $aside as extended $uibModal
34 |       var $aside = angular.extend({}, $uibModal, asideFactory);
35 |       return $aside;
36 |     });
37 | })();
38 | 


--------------------------------------------------------------------------------
/src/styles/animate.css:
--------------------------------------------------------------------------------
  1 | /*!
  2 | Animate.css - http://daneden.me/animate
  3 | Licensed under the MIT license - http://opensource.org/licenses/MIT
  4 | 
  5 | Copyright (c) 2014 Daniel Eden
  6 | */
  7 | 
  8 | @-webkit-keyframes fadeInLeft {
  9 |   0% {
 10 |     opacity: 0;
 11 |     -webkit-transform: translate3d(-100%, 0, 0);
 12 |     transform: translate3d(-100%, 0, 0);
 13 |   }
 14 | 
 15 |   100% {
 16 |     opacity: 1;
 17 |     -webkit-transform: none;
 18 |     transform: none;
 19 |   }
 20 | }
 21 | 
 22 | @keyframes fadeInLeft {
 23 |   0% {
 24 |     opacity: 0;
 25 |     -webkit-transform: translate3d(-100%, 0, 0);
 26 |     -ms-transform: translate3d(-100%, 0, 0);
 27 |     transform: translate3d(-100%, 0, 0);
 28 |   }
 29 | 
 30 |   100% {
 31 |     opacity: 1;
 32 |     -webkit-transform: none;
 33 |     -ms-transform: none;
 34 |     transform: none;
 35 |   }
 36 | }
 37 | 
 38 | .fadeInLeft {
 39 |   -webkit-animation-name: fadeInLeft;
 40 |   animation-name: fadeInLeft;
 41 | }
 42 | 
 43 | @-webkit-keyframes fadeInRight {
 44 |   0% {
 45 |     opacity: 0;
 46 |     -webkit-transform: translate3d(100%, 0, 0);
 47 |     transform: translate3d(100%, 0, 0);
 48 |   }
 49 | 
 50 |   100% {
 51 |     opacity: 1;
 52 |     -webkit-transform: none;
 53 |     transform: none;
 54 |   }
 55 | }
 56 | 
 57 | @keyframes fadeInRight {
 58 |   0% {
 59 |     opacity: 0;
 60 |     -webkit-transform: translate3d(100%, 0, 0);
 61 |     -ms-transform: translate3d(100%, 0, 0);
 62 |     transform: translate3d(100%, 0, 0);
 63 |   }
 64 | 
 65 |   100% {
 66 |     opacity: 1;
 67 |     -webkit-transform: none;
 68 |     -ms-transform: none;
 69 |     transform: none;
 70 |   }
 71 | }
 72 | 
 73 | .fadeInRight {
 74 |   -webkit-animation-name: fadeInRight;
 75 |   animation-name: fadeInRight;
 76 | }
 77 | 
 78 | @-webkit-keyframes fadeInTop {
 79 |   0% {
 80 |     opacity: 0;
 81 |     -webkit-transform: translate3d(0, -100%, 0);
 82 |     transform: translate3d(0, -100%, 0);
 83 |   }
 84 | 
 85 |   100% {
 86 |     opacity: 1;
 87 |     -webkit-transform: none;
 88 |     transform: none;
 89 |   }
 90 | }
 91 | 
 92 | @keyframes fadeInTop {
 93 |   0% {
 94 |     opacity: 0;
 95 |     -webkit-transform: translate3d(0, -100%, 0);
 96 |     -ms-transform: translate3d(0, -100%, 0);
 97 |     transform: translate3d(0, -100%, 0);
 98 |   }
 99 | 
100 |   100% {
101 |     opacity: 1;
102 |     -webkit-transform: none;
103 |     -ms-transform: none;
104 |     transform: none;
105 |   }
106 | }
107 | 
108 | .fadeInTop {
109 |   -webkit-animation-name: fadeInTop;
110 |   animation-name: fadeInTop;
111 | }
112 | 
113 | @-webkit-keyframes fadeInBottom {
114 |   0% {
115 |     opacity: 0;
116 |     -webkit-transform: translate3d(0, 100%, 0);
117 |     transform: translate3d(0, 100%, 0);
118 |   }
119 | 
120 |   100% {
121 |     opacity: 1;
122 |     -webkit-transform: none;
123 |     transform: none;
124 |   }
125 | }
126 | 
127 | @keyframes fadeInBottom {
128 |   0% {
129 |     opacity: 0;
130 |     -webkit-transform: translate3d(0, 100%, 0);
131 |     -ms-transform: translate3d(0, 100%, 0);
132 |     transform: translate3d(0, 100%, 0);
133 |   }
134 | 
135 |   100% {
136 |     opacity: 1;
137 |     -webkit-transform: none;
138 |     -ms-transform: none;
139 |     transform: none;
140 |   }
141 | }
142 | 
143 | .fadeInBottom {
144 |   -webkit-animation-name: fadeInBottom;
145 |   animation-name: fadeInBottom;
146 | }
147 | 
148 | @-webkit-keyframes fadeOutLeft {
149 |   0% {
150 |     opacity: 1;
151 |   }
152 | 
153 |   100% {
154 |     opacity: 0;
155 |     -webkit-transform: translate3d(-100%, 0, 0);
156 |             transform: translate3d(-100%, 0, 0);
157 |   }
158 | }
159 | 
160 | @keyframes fadeOutLeft {
161 |   0% {
162 |     opacity: 1;
163 |   }
164 | 
165 |   100% {
166 |     opacity: 0;
167 |     -webkit-transform: translate3d(-100%, 0, 0);
168 |             transform: translate3d(-100%, 0, 0);
169 |   }
170 | }
171 | 
172 | .fadeOutLeft {
173 |   -webkit-animation-name: fadeOutLeft;
174 |           animation-name: fadeOutLeft;
175 | }
176 | 
177 | @-webkit-keyframes fadeOutRight {
178 |   0% {
179 |     opacity: 1;
180 |   }
181 | 
182 |   100% {
183 |     opacity: 0;
184 |     -webkit-transform: translate3d(100%, 0, 0);
185 |             transform: translate3d(100%, 0, 0);
186 |   }
187 | }
188 | 
189 | @keyframes fadeOutRight {
190 |   0% {
191 |     opacity: 1;
192 |   }
193 | 
194 |   100% {
195 |     opacity: 0;
196 |     -webkit-transform: translate3d(100%, 0, 0);
197 |             transform: translate3d(100%, 0, 0);
198 |   }
199 | }
200 | 
201 | .fadeOutRight {
202 |   -webkit-animation-name: fadeOutRight;
203 |           animation-name: fadeOutRight;
204 | }
205 | 
206 | @-webkit-keyframes fadeOutUp {
207 |   0% {
208 |     opacity: 1;
209 |   }
210 | 
211 |   100% {
212 |     opacity: 0;
213 |     -webkit-transform: translate3d(0, -100%, 0);
214 |             transform: translate3d(0, -100%, 0);
215 |   }
216 | }
217 | 
218 | @keyframes fadeOutUp {
219 |   0% {
220 |     opacity: 1;
221 |   }
222 | 
223 |   100% {
224 |     opacity: 0;
225 |     -webkit-transform: translate3d(0, -100%, 0);
226 |             transform: translate3d(0, -100%, 0);
227 |   }
228 | }
229 | 
230 | .fadeOutUp {
231 |   -webkit-animation-name: fadeOutUp;
232 |           animation-name: fadeOutUp;
233 | }
234 | 
235 | 
236 | @-webkit-keyframes fadeOutDown {
237 |   0% {
238 |     opacity: 1;
239 |   }
240 | 
241 |   100% {
242 |     opacity: 0;
243 |     -webkit-transform: translate3d(0, 100%, 0);
244 |             transform: translate3d(0, 100%, 0);
245 |   }
246 | }
247 | 
248 | @keyframes fadeOutDown {
249 |   0% {
250 |     opacity: 1;
251 |   }
252 | 
253 |   100% {
254 |     opacity: 0;
255 |     -webkit-transform: translate3d(0, 100%, 0);
256 |             transform: translate3d(0, 100%, 0);
257 |   }
258 | }
259 | 
260 | .fadeOutDown {
261 |   -webkit-animation-name: fadeOutDown;
262 |           animation-name: fadeOutDown;
263 | }


--------------------------------------------------------------------------------
/src/styles/aside.css:
--------------------------------------------------------------------------------
  1 | /* Common */
  2 | 
  3 | .ng-aside {
  4 |   overflow-y: auto;
  5 |   overflow-x: hidden;
  6 | }
  7 | 
  8 | .ng-aside .modal-dialog {
  9 |   position: absolute;
 10 |   margin: 0;
 11 |   padding: 0;
 12 | }
 13 | 
 14 | .ng-aside.fade .modal-dialog {
 15 |   -o-transition: none;
 16 |   -moz-transition: none;
 17 |   -ms-transition: none;
 18 |   -webkit-transition: none;
 19 |   transition: none;
 20 |   /*CSS transforms*/
 21 |   -o-transform: none;
 22 |   -moz-transform: none;
 23 |   -ms-transform: none;
 24 |   -webkit-transform: none;
 25 |   transform: none;
 26 | }
 27 | 
 28 | .ng-aside .modal-dialog .modal-content {
 29 |   overflow-y: auto;
 30 |   overflow-x: hidden;
 31 |   border: none;
 32 |   border-radius: 0;
 33 | }
 34 | 
 35 | /* Horizontal */
 36 | 
 37 | .ng-aside.horizontal {
 38 |   height: 100%;
 39 | }
 40 | 
 41 | .ng-aside.horizontal .modal-dialog .modal-content {
 42 |   height: 100%;
 43 | }
 44 | 
 45 | .ng-aside.horizontal .modal-dialog {
 46 |   position: absolute;
 47 |   top: 0;
 48 |   height: 100%;
 49 | }
 50 | 
 51 | .modal-open .ng-aside.horizontal.left .modal-dialog {
 52 |   animation: fadeOutLeft 250ms;
 53 |   -webkit-animation: fadeOutLeft 250ms;
 54 |   -moz-animation: fadeOutLeft 250ms;
 55 |   -o-animation: fadeOutLeft 250ms;
 56 |   -ms-animation: fadeOutLeft 250ms;
 57 | }
 58 | 
 59 | .ng-aside.horizontal.left.in .modal-dialog {
 60 |   animation: fadeInLeft 400ms;
 61 |   -webkit-animation: fadeInLeft 400ms;
 62 |   -moz-animation: fadeInLeft 400ms;
 63 |   -o-animation: fadeInLeft 400ms;
 64 |   -ms-animation: fadeInLeft 400ms;
 65 | }
 66 | 
 67 | .ng-aside.horizontal.left .modal-dialog {
 68 |   left: 0;
 69 | }
 70 | 
 71 | .ng-aside.horizontal.right .modal-dialog {
 72 |   animation: fadeOutRight 400ms;
 73 |   -webkit-animation: fadeOutRight 400ms;
 74 |   -moz-animation: fadeOutRight 400ms;
 75 |   -o-animation: fadeOutRight 400ms;
 76 |   -ms-animation: fadeOutRight 400ms;
 77 | }
 78 | 
 79 | .ng-aside.horizontal.right.in .modal-dialog {
 80 |   animation: fadeInRight 250ms;
 81 |   -webkit-animation: fadeInRight 250ms;
 82 | }
 83 | 
 84 | .ng-aside.horizontal.right .modal-dialog {
 85 |   right: 0;
 86 | }
 87 | 
 88 | /* Vertical */
 89 | 
 90 | .ng-aside.vertical {
 91 |   width: 100% !important;
 92 |   overflow: hidden;
 93 | }
 94 | 
 95 | .ng-aside.vertical .modal-dialog {
 96 |   left: 0;
 97 |   right: 0;
 98 |   width: 100% !important;
 99 | }
100 | 
101 | .ng-aside.vertical .modal-dialog .modal-content {
102 |   max-height: 400px;
103 | }
104 | 
105 | .ng-aside.vertical.top .modal-dialog {
106 |   animation: fadeOutUp 250ms;
107 |   -webkit-animation: fadeOutUp 250ms;
108 |   -webkit-animation: fadeOutUp 250ms;
109 |   -moz-animation: fadeOutUp 250ms;
110 |   -o-animation: fadeOutUp 250ms;
111 |   -ms-animation: fadeOutUp 250ms;
112 | }
113 | 
114 | .ng-aside.vertical.top.in .modal-dialog {
115 |   animation: fadeInTop 250ms;
116 |   -webkit-animation: fadeInTop 250ms;
117 |   -webkit-animation: fadeInTop 250ms;
118 |   -moz-animation: fadeInTop 250ms;
119 |   -o-animation: fadeInTop 250ms;
120 |   -ms-animation: fadeInTop 250ms;
121 | }
122 | 
123 | .ng-aside.vertical.bottom .modal-dialog {
124 |   animation: fadeOutDown 250ms;
125 |   -webkit-animation: fadeOutDown 250ms;
126 |   -webkit-animation: fadeOutDown 250ms;
127 |   -moz-animation: fadeOutDown 250ms;
128 |   -o-animation: fadeOutDown 250ms;
129 |   -ms-animation: fadeOutDown 250ms;
130 | }
131 | .ng-aside.vertical.bottom.in .modal-dialog {
132 |   animation: fadeInBottom 250ms;
133 |   -webkit-animation: fadeInBottom 250ms;
134 |   -webkit-animation: fadeInBottom 250ms;
135 |   -moz-animation: fadeInBottom 250ms;
136 |   -o-animation: fadeInBottom 250ms;
137 |   -ms-animation: fadeInBottom 250ms;
138 | }
139 | 
140 | .ng-aside.vertical.bottom .modal-dialog {
141 |   bottom: 0;
142 | }
143 | 
144 | .ng-aside.vertical.top .modal-dialog {
145 |   top: 0;
146 | }
147 | 
148 | .ng-aside.vertical .modal-dialog .modal-content {
149 |   width: 100%;
150 | }


--------------------------------------------------------------------------------
/test/spec/services/aside.js:
--------------------------------------------------------------------------------
 1 | 'use strict';
 2 | 
 3 | describe('Service: $aside', function () {
 4 | 
 5 |   // load the service's module
 6 |   beforeEach(module('ngAside'));
 7 | 
 8 |   // instantiate service
 9 |   var $aside, $modal;
10 | 
11 |   beforeEach(inject(function ($injector) {
12 |     $aside = $injector.get('$aside');
13 |     $modal =  $injector.get('$uibModal');
14 |   }));
15 | 
16 |   it('should do something', function () {
17 |     expect(!!$aside).toBe(true);
18 |   });
19 | 
20 |   it('should have a valid open function', function() {
21 |     expect(!!$aside.open).toBe(true);
22 |   });
23 | 
24 |   it('should open a modal with correct options', function() {
25 |     spyOn($modal, 'open')
26 |       .and.callThrough();
27 | 
28 |     // call open function
29 |     var config = $aside.open({
30 |       template: 'test'
31 |     });
32 | 
33 |     expect($modal.open).toHaveBeenCalledWith({
34 |       template: 'test',
35 |       windowClass: 'ng-aside horizontal left'
36 |     });
37 | 
38 |     // call open function, vertical placement
39 |     var config = $aside.open({
40 |       template: 'test2',
41 |       placement: 'bottom'
42 |     });
43 | 
44 |     expect($modal.open).toHaveBeenCalledWith({
45 |       template: 'test2',
46 |       windowClass: 'ng-aside vertical bottom'
47 |     });
48 |   });
49 | });
50 | 


--------------------------------------------------------------------------------