# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1489446746 -3600
# Node ID c3fe3c5d5cab24b095df860cd94e0a2070f0c6c3
# Parent  a04c55054afe21a0775146dbad86864e753ec425
Fix loading of CommentForm component.

diff -r a04c55054afe -r c3fe3c5d5cab src/iconolab/templates/iconolab/detail_image.html
--- a/src/iconolab/templates/iconolab/detail_image.html	Mon Mar 13 18:48:35 2017 +0100
+++ b/src/iconolab/templates/iconolab/detail_image.html	Tue Mar 14 00:12:26 2017 +0100
@@ -108,47 +108,61 @@
     {% endfor %}
   {% endif %}
 
-  var vm = new Vue({
-    el: '.annotation-navigator',
-    data: function() {
-      return {
-        annotations: annotations,
-        annotation: getAnnotationFromHash(),
-        isAuthenticated: isAuthenticated,
-      };
-    },
-    methods: {
-      onAnnotationClick: function(annotation) {
-        var self = this;
-        getCommentForm(annotation).then(function(template) {
-          updateCommentFormComponent(template);
-          self.annotation = annotation;
-          location.hash = '#' + annotation.annotation_guid;
-        });
+  var annotation = getAnnotationFromHash();
+  if (annotation) {
+    getCommentForm(annotation).then(function(template) {
+      updateCommentFormComponent(template);
+      createViewModel();
+    });
+  } else {
+    createViewModel();
+  }
+
+  function createViewModel() {
+
+    var vm = new Vue({
+      el: '.annotation-navigator',
+      data: function() {
+        return {
+          annotations: annotations,
+          annotation: annotation,
+          isAuthenticated: isAuthenticated,
+        };
       },
-      onAnnotationClose: function() {
-        this.annotation = null;
-        location.hash = '';
+      methods: {
+        onAnnotationClick: function(annotation) {
+          var self = this;
+          getCommentForm(annotation).then(function(template) {
+            updateCommentFormComponent(template);
+            self.annotation = annotation;
+            location.hash = '#' + annotation.annotation_guid;
+          });
+        },
+        onAnnotationClose: function() {
+          this.annotation = null;
+          location.hash = '';
+        }
       }
-    }
-  });
-
-  vm.$refs.annotator.$on('save', function(data) {
-    $('#form-annotation').find('input[name="title"]').val(data.title);
-    $('#form-annotation').find('input[name="description"]').val(data.description);
-    $('#form-annotation').find('input[name="fragment"]').val(data.fragment);
+    });
 
-    var tags = data.tags.map(function(tag) {
-      return {
-        tag_input: (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link : tag.tag_label,
-        tag_label: tag.tag_label,
-        accuracy: tag.accuracy,
-        relevancy: tag.relevancy
-      }
+    vm.$refs.annotator.$on('save', function(data) {
+      $('#form-annotation').find('input[name="title"]').val(data.title);
+      $('#form-annotation').find('input[name="description"]').val(data.description);
+      $('#form-annotation').find('input[name="fragment"]').val(data.fragment);
+
+      var tags = data.tags.map(function(tag) {
+        return {
+          tag_input: (typeof tag.tag_link === "string" && tag.tag_link.length) ? tag.tag_link : tag.tag_label,
+          tag_label: tag.tag_label,
+          accuracy: tag.accuracy,
+          relevancy: tag.relevancy
+        }
+      })
+      $('#form-annotation').find('input[name="tags"]').val(JSON.stringify(tags));
+      $('#form-annotation').submit();
     })
-    $('#form-annotation').find('input[name="tags"]').val(JSON.stringify(tags));
-    $('#form-annotation').submit();
-  })
+
+  }
 
   function updateCommentFormComponent(template) {
     Vue.component('comment-form', function (resolve, reject) {