feat(): adds new config to render dialog as a sidebar

Adds new attribute 'enter' that will accept either 'fromLeft' or 'center'. fromLeft - renders dialog as sidebar on desktop center - render dialog in center screen defaults to center if no value for 'enter' is given
dgavigan · Jan 26, 2016 · 9eea307 · 9eea307
1 parent 6b470d2
commit 9eea307
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/dist/dg-modal.js b/dist/dg-modal.js
@@ -3,12 +3,43 @@ angular.module('dgModal', []);
 angular.module('dgModal').service('dgModal', ['$document','$timeout','$q','$window',
     function($document, $timeout, $q, $window){
 
-      this.display = function(){
+      var self = this;
+      self.style = null;
+
+      self.setStyle = function(style){
+        self.style = style;
+      }
+
+      self.display = function(){
         var deferred = $q.defer();
 
         //reset position to center for desktop
         if($window.innerWidth >= 1224){
-          angular.element(document.querySelector('.dg-modal')).css({ "top": "11%","left":"20%" });
+
+          switch(self.style){
+            case 'fromLeft':
+              self.css = {
+                "top": "0",
+                "left":"0",
+                "height":"100%",
+                "width":"600px"
+              }
+              break;
+            case 'center':
+              self.css = {
+                "top": "11%",
+                "left":"20%",
+              }
+              break;
+            default:
+              self.css = {
+                "top": "11%",
+                "left":"20%",
+              }
+          }
+
+          angular.element(document.querySelector('.dg-modal')).css(self.css);          
+
         }
 
 
@@ -23,7 +54,7 @@ angular.module('dgModal').service('dgModal', ['$document','$timeout','$q','$wind
         return deferred.promise
       };
 
-      this.close = function(){
+      self.close = function(){
         var deferred = $q.defer();
 
         angular.element(document.querySelector('.dg-modal')).removeClass('display');
@@ -45,12 +76,17 @@ angular.module('dgModal').directive('dgModal', ['$log','$http','$compile','$docu
     return{
       restrict: 'EA',
       scope:{
-        content: '@'
+        content: '@',
+        enter: '=enter'
       },
       template: '<div class=\'dg-modal \'><div class=\'dg-modal-content\'></div></div>',
       replace: true,
       link:function(scope, elm, attrs){
 
+        if(scope.enter){
+          dgModal.setStyle(scope.enter);
+        }
+
         //display action sheet
         scope.closeActionSheet = function () {
             dgModal.close()

diff --git a/sample/index.html b/sample/index.html
@@ -137,7 +137,7 @@
 
   </div>
 
-  <dg-modal content="views/asContnet.html"  ></dg-modal>
+  <dg-modal enter="'fromLeft'" content="views/asContnet.html"></dg-modal>
 
 
 

diff --git a/sample/views/asContnet.html b/sample/views/asContnet.html
@@ -1,5 +1,5 @@
 <div>
-	<div draggable style="width:100%; height: 60px; background-color:grey; color:white;" ></div>
+	<div style="width:100%; height: 60px; background-color:grey; color:white;" ></div>
 
 
 	<h1>Action Sheet Content!</h1>