src_js/iconolab-bundle/src/components/editor/mixins/tooltip.js
changeset 320 81945eedc63f
child 323 55c024fc7c60
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/src_js/iconolab-bundle/src/components/editor/mixins/tooltip.js	Wed Feb 15 16:42:06 2017 +0100
@@ -0,0 +1,80 @@
+import Snap from 'snapsvg'
+import Tooltip from '../Tooltip.vue'
+
+var popoverOptions = {
+    placement: 'auto',
+    container: 'body',
+    trigger: 'manual',
+    html: true,
+    title: '',
+    content: '',
+}
+
+export default {
+    methods: {
+        addTooltip: function() {
+
+            var vm = new Vue(Tooltip);
+
+            if (this.originalAnnotation) {
+                vm.originalTitle = this.originalAnnotation.title;
+                vm.originalDescription = this.originalAnnotation.description;
+                vm.originalTags = this.originalAnnotation.tags;
+            }
+
+            vm.$mount(jQuery('<div>').get(0));
+
+            vm.$on('close', () => {
+                this.clear();
+            });
+            vm.$on('save', (data) => {
+                this.save(data);
+            });
+
+            popoverOptions.content = vm.$el;
+
+            var target = new Snap(this.getTooltipTarget());
+
+            var $el = $(target.node);
+            $el
+                .popover(popoverOptions)
+                .popover('show');
+
+            this.$on('drag:start', function() {
+                $el.popover('hide');
+            });
+            this.$on('drag:end', function() {
+                $el.popover('show');
+            });
+
+            $el.on('shown.bs.popover', (e) => {
+                var $tip = $el.data('bs.popover').$tip;
+                $tip.find('input[name="title"]').focus();
+            });
+        },
+        destroyTooltip: function() {
+            var target = new Snap(this.getTooltipTarget());
+
+            var $el = $(target.node);
+            if ($el.data('bs.popover')) {
+                $el.popover('destroy');
+            }
+        },
+        hideTooltip: function() {
+            var target = new Snap(this.getTooltipTarget());
+
+            var $el = $(target.node);
+            if ($el.data('bs.popover')) {
+                $el.popover('hide');
+            }
+        },
+        showTooltip: function() {
+            var target = new Snap(this.getTooltipTarget());
+
+            var $el = $(target.node);
+            if ($el.data('bs.popover')) {
+                $el.popover('show');
+            }
+        },
+    }
+}