Animate modal. Fix #23

jspdown · jspdown · commit 3b8ea85db80e · 2015-04-09T14:46:03.000+02:00
diff --git a/src/modal/docs/controllers.js b/src/modal/docs/controllers.js
@@ -1,9 +1,15 @@
-var modalApp = angular.module('modalApp', ['angularify.semantic.modal']);
+angular
+  .module('modalApp', ['angularify.semantic.modal'])
+  .controller('RootCtrl', RootCtrl);
 
-function RootCtrl ($scope) {
-    $scope.show_modal = true;
+function RootCtrl($scope) {
+    $scope.show_modal = false;
 
-    $scope.close_modal = function(){
-        $scope.show_modal = false;
-    }
+    $scope.open_modal = function () {
+      $scope.show_modal = true; 
+    };
+  
+    $scope.close_modal = function (){
+      $scope.show_modal = false;
+    };
 }
diff --git a/src/modal/docs/demo.html b/src/modal/docs/demo.html
@@ -3,37 +3,38 @@
 <head>
   <meta charset="utf-8" />
   <title>Semantic UI + Angular.JS</title>
-  <link href="../../../bower_components/semantic/build/packaged/css/semantic.min.css" rel="stylesheet" type="text/css" /> 
+  <link href="../../../bower_components/semantic/dist/semantic.min.css" rel="stylesheet" type="text/css" /> 
 </head>
 <body ng-controller="RootCtrl">
+    <button class="ui primary button" ng-click="open_modal()">Open</button>
     <modal ng-model="show_modal">
-      <i class="close icon" ng-click="close_modal()"></i>
+      <i class="close icon"></i>
       <div class="header">
-        Change Your Homepage
+        Profile Picture
       </div>
       <div class="content">
-        <div class="left">
-          <i class="home icon"></i>
+        <div class="ui medium image">
+          <img src="http://fakeimg.pl/250x250">
         </div>
-        <div class="right">
-          <p>Are you sure you want to change your homepage to <b>Poodle.com</b>?</p>
+        <div class="description">
+          <div class="ui header">We've auto-chosen a profile image for you.</div>
+          <p>We've grabbed the following image from the <a href="https://www.gravatar.com" target="_blank">gravatar</a> image associated with your registered e-mail address.</p>
+          <p>Is it okay to use this photo?</p>
         </div>
       </div>
       <div class="actions">
-        <div class="two fluid ui buttons">
-          <div class="ui negative labeled icon button">
-            <i class="remove icon"></i>
-            No
-          </div>
-          <div class="ui positive right labeled icon button">
-            Yes
-            <i class="checkmark icon"></i>
-          </div>
+        <div class="ui black button">
+          Nope
+        </div>
+        <div class="ui positive right labeled icon button">
+          Yep, that's me
+          <i class="checkmark icon"></i>
         </div>
       </div>
     </modal>
+    <script src="../../../bower_components/jquery/dist/jquery.min.js"></script>
     <script src="../../../bower_components/angular/angular.min.js" type="text/javascript"></script>
-    <script src="../../angularify.semantic.js" type="text/javascript"></script>
+    <script src="../../../bower_components/semantic/dist/semantic.min.js" type="text/javascript"></script>
     <script src="../modal.js" type="text/javascript"></script>
     <script src="controllers.js" type="text/javascript"></script>
 </body>
diff --git a/src/modal/modal.js b/src/modal/modal.js
@@ -4,18 +4,22 @@ angular.module('angularify.semantic.modal', [])
 
 .directive('modal', function () {
     return {
-        restrict: "E",
+        restrict: 'E',
         replace: true,
         transclude: true,
-        scope: {
-            model: '=ngModel'
-        },
-        template: "<div class=\"ui dimmer page\" ng-class=\"{ active: model }\">" + 
-                    "<div class=\"ui test modal transition visible\" style=\"margin-top: -189px;\"  ng-transclude>" +
-                    "</div>" +
-                  "</div>",
-        link: function (scope, element, attrs) {
-            
+        require: 'ngModel',
+        template: '<div class="ui modal" ng-transclude></div>',
+        link: function (scope, element, attrs, ngModel) {          
+          element.modal({
+            onHide: function () {
+              ngModel.$setViewValue(false);
+            }
+          });
+          scope.$watch(function () {
+            return ngModel.$modelValue;
+          }, function (modelValue){
+            element.modal(modelValue ? 'show' : 'hide');
+          });
         }
     }
 });
