[dev]version 1.3.0

bower.json

+{
+  "name": "angular-aside",
+  "version": "1.3.0",
+  "homepage": "https://github.com/dbtek/angular-aside",
+  "author": {
+    "name": "İsmail Demirbilek",
+    "email": "ce.demirbilek@gmail.com"
+  },
+  "description": "Off canvas side menu to use with ui-bootstrap.",
+  "main": [
+    "dist/js/angular-aside.js",
+    "dist/css/angular-aside.css"
+  ],
+  "keywords": [
+    "aside",
+    "off",
+    "canvas",
+    "menu",
+    "ui",
+    "bootstrap"
+  ],
+  "license": "MIT",
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests",
+    "Gruntfile.js",
+    "karma.conf.js",
+    "package.json"
+  ],
+  "dependencies": {
+    "angular-bootstrap": ">=0.14.0"
+  },
+  "devDependencies": {
+    "angular-mocks": ">=1.4.0"
+  }
+}

dist/css/angular-aside.css

+/*!
+ * angular-aside - v1.3.0
+ * https://github.com/dbtek/angular-aside
+ * 2015-10-22
+ * Copyright (c) 2015 İsmail Demirbilek
+ * License: MIT
+ */
+
+/*!
+Animate.css - http://daneden.me/animate
+Licensed under the MIT license - http://opensource.org/licenses/MIT
+
+Copyright (c) 2014 Daniel Eden
+*/
+
+@-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;
+}
+/* Common */
+
+.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;
+  /*CSS transforms*/
+  -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;
+}
+
+/* Horizontal */
+
+.ng-aside.horizontal {
+  height: 100%;
+}
+
+.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;
+}
+
+/* Vertical */
+
+.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%;
+}
\ No newline at end of file

dist/js/angular-aside.js

+
+/*!
+ * angular-aside - v1.3.0
+ * https://github.com/dbtek/angular-aside
+ * 2015-10-22
+ * Copyright (c) 2015 İsmail Demirbilek
+ * License: MIT
+ */
+
+(function() {
+/**
+   * @ngdoc overview
+   * @name ngAside
+   * @description
+   * Main module for aside component.
+   * @function
+   * @author İsmail Demirbilek
+   */
+  angular.module('ngAside', ['ui.bootstrap.modal']);
+})();
+
+(function() {
+angular.module('ngAside')
+    /**
+     * @ngdoc service
+     * @name ngAside.services:$aside
+     * @description
+     * 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.
+     * @function
+     */
+    .factory('$aside', function($uibModal) {
+      var defaults = this.defaults = {
+        placement: 'left'
+      };
+
+      var asideFactory = {
+        // override open method
+        open: function(config) {
+          var options = angular.extend({}, defaults, config);
+          // check placement is set correct
+          if(['left', 'right', 'bottom', 'top'].indexOf(options.placement) === -1) {
+            options.placement = defaults.placement;
+          }
+          var vertHoriz = ['left', 'right'].indexOf(options.placement) === -1 ? 'vertical' : 'horizontal';
+          // set aside classes
+          options.windowClass  = 'ng-aside ' + vertHoriz + ' ' + options.placement + (options.windowClass ? ' ' + options.windowClass : '');
+          delete options.placement
+          return $uibModal.open(options);
+        }
+      };
+
+      // create $aside as extended $uibModal
+      var $aside = angular.extend({}, $uibModal, asideFactory);
+      return $aside;
+    });
+})();