Add popup to confirm adding an annotation

Author: simonv3

client/directives/anAnnotatable.directive.js

@@ -10,6 +10,12 @@ angular.module('annotate').directive('anAnnotatable',
         showAnnotations: '='
       },
       controller: function ($scope, $attrs, $element) {
+
+        $scope.addAnnotationPopup = {
+          show: false,
+          x: null,
+          y: null,
+        }
         var canvas = $element.children('.canvas')
         var image = $element.children('img')
 
@@ -51,7 +57,13 @@ angular.module('annotate').directive('anAnnotatable',
         image.draggable = false
 
         canvas.on('click', function (event) {
+
+          $scope.annotations.forEach(function (annotation) {
+            annotation.open = false;
+          })
+
           if (event.target.className.indexOf('canvas') > -1) {
+
             var xPos = event.offsetX
             var yPos = event.offsetY
 
@@ -62,32 +74,52 @@ angular.module('annotate').directive('anAnnotatable',
             var yPosPercent = yPos / height * 100
 
             $scope.$apply(function () {
-              Meteor.call('incrementAnnotations', function (err, next) {
-                if (err) console.log(err)
-                Annotations.insert({
-                  image: $scope.image._id,
-                  xPos: xPosPercent,
-                  yPos: yPosPercent,
-                  date: new Date(),
-                  owner: Meteor.userId(),
-                  number: next,
-                  comments: []
-                }, function (err, annotationId) {
-                  if (err) console.log(err)
-
-                  $scope.annotations.forEach(function (annotation) {
-                    if (annotation._id === annotationId) {
-                      annotation.open = true
-                    }
-                  })
-                })
-                console.log('post-increment', next)
-              })
+              $scope.addAnnotationPopup.show = true;
+              $scope.addAnnotationPopup.x = xPosPercent;
+              $scope.addAnnotationPopup.y = yPosPercent;
             })
+            //
           }
           // and then now add more things to the annotation
         })
 
+        $scope.confirmed = function (obj) {
+          newAnnotation(obj.x, obj.y)
+          $scope.closePopup (obj)
+        }
+
+        $scope.closePopup = function (obj) {
+          obj.x = null
+          obj.y = null
+          obj.show = false
+        }
+
+        var newAnnotation = function (xPosPercent, yPosPercent) {
+          // $scope.$apply(function () {
+            Meteor.call('incrementAnnotations', function (err, next) {
+              if (err) console.log(err)
+              Annotations.insert({
+                image: $scope.image._id,
+                xPos: xPosPercent,
+                yPos: yPosPercent,
+                date: new Date(),
+                owner: Meteor.userId(),
+                number: next,
+                comments: []
+              }, function (err, annotationId) {
+                if (err) console.log(err)
+
+                $scope.annotations.forEach(function (annotation) {
+                  if (annotation._id === annotationId) {
+                    annotation.open = true
+                  }
+                })
+              })
+              console.log('post-increment', next)
+            })
+          // })
+        }
+
         $scope.annotationOpened = function (annotationId) {
           $scope.annotations.forEach(function (annotation) {
             if (annotation._id === annotationId) {

client/index.html

@@ -53,10 +53,10 @@
 </div>
 
 <div class="toggle-view row">
-  <a class="tab"
+  <a class="pill"
     ng-class="{'selected': view === 'single'}"
     ng-click="view = 'single'">1 column</a>
-  <a class="tab"
+  <a class="pill"
     ng-class="{'selected': view === 'double'}"
     ng-click="view = 'double'">2 columns</a>
 </div>

client/styles/components/image-container.import.less

@@ -44,3 +44,18 @@
     }
   }
 }
+
+.add-annotation {
+  display: inline-block;
+  background: white;
+  padding: 1rem;
+  position: absolute;
+  margin-left: -10%;
+  margin-top: -2%;
+  box-shadow: 0px 0px 4px @grey;
+
+  button {
+    font-size: .8rem;
+    margin-left: .5rem;
+  }
+}

client/styles/main.less

@@ -74,13 +74,14 @@ a {
   font-size: 1.2em;
 }
 
-.tab {
+.pill {
   background-color: @link-color;
   color: @link-text;
   padding: .25rem .5rem;
-  border-radius: 6px;
+  border-radius: 4px;
   display: inline-block;
   cursor: pointer;
+  border: 1px solid darken(@link-color, 5%);
 
   &:hover {
     background-color: darken(@link-color, 10%);

client/templates/anAnnotatable.html

@@ -9,4 +9,17 @@
     annotation-opened="annotationOpened(annotationId)"
     an-index="$index">
   </div>
+  <div class="add-annotation"
+    ng-show="addAnnotationPopup.show"
+    style="top: {{ addAnnotationPopup.y }}%; left: {{ addAnnotationPopup.x }}%">
+    Add an annotation?
+    <button class="pill"
+      ng-click="confirmed(addAnnotationPopup)">
+      Yes
+    </button>
+    <button class="pill"
+      ng-click="closePopup(addAnnotationPopup)">
+      No
+    </button>
+  </div>
 </div>