| author | Alexandre Segura <mex.zktk@gmail.com> |
| Thu, 02 Mar 2017 16:59:01 +0100 | |
| changeset 415 | c4b700679964 |
| parent 323 | 55c024fc7c60 |
| child 539 | 08e2513dbc2f |
| permissions | -rw-r--r-- |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
1 |
import Snap from 'snapsvg' |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
2 |
import Tooltip from '../Tooltip.vue' |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
3 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
4 |
var popoverOptions = { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
5 |
placement: 'auto', |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
6 |
container: 'body', |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
7 |
trigger: 'manual', |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
8 |
html: true, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
9 |
title: '', |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
10 |
content: '', |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
11 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
12 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
13 |
export default { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
14 |
methods: { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
15 |
addTooltip: function() { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
16 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
17 |
var vm = new Vue(Tooltip); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
18 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
19 |
if (this.originalAnnotation) { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
20 |
vm.originalTitle = this.originalAnnotation.title; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
21 |
vm.originalDescription = this.originalAnnotation.description; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
22 |
vm.originalTags = this.originalAnnotation.tags; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
23 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
24 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
25 |
vm.$mount(jQuery('<div>').get(0)); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
26 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
27 |
vm.$on('close', () => { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
28 |
this.clear(); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
29 |
}); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
30 |
vm.$on('save', (data) => { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
31 |
this.save(data); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
32 |
}); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
33 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
34 |
popoverOptions.content = vm.$el; |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
35 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
36 |
var target = new Snap(this.getTooltipTarget()); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
37 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
38 |
var $el = $(target.node); |
|
415
c4b700679964
Fix tooltip position when page is scrolled.
Alexandre Segura <mex.zktk@gmail.com>
parents:
323
diff
changeset
|
39 |
|
|
c4b700679964
Fix tooltip position when page is scrolled.
Alexandre Segura <mex.zktk@gmail.com>
parents:
323
diff
changeset
|
40 |
$el.popover(popoverOptions); |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
41 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
42 |
this.$on('drag:start', function() { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
43 |
$el.popover('hide'); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
44 |
}); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
45 |
this.$on('drag:end', function() { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
46 |
$el.popover('show'); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
47 |
}); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
48 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
49 |
$el.on('shown.bs.popover', (e) => { |
|
415
c4b700679964
Fix tooltip position when page is scrolled.
Alexandre Segura <mex.zktk@gmail.com>
parents:
323
diff
changeset
|
50 |
var $tip = $el.data('bs.popover').tip(); |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
51 |
$tip.find('input[name="title"]').focus(); |
|
415
c4b700679964
Fix tooltip position when page is scrolled.
Alexandre Segura <mex.zktk@gmail.com>
parents:
323
diff
changeset
|
52 |
// Fixes tooltip positioning when page is scrolled |
|
c4b700679964
Fix tooltip position when page is scrolled.
Alexandre Segura <mex.zktk@gmail.com>
parents:
323
diff
changeset
|
53 |
// See https://github.com/twbs/bootstrap/issues/21855 |
|
c4b700679964
Fix tooltip position when page is scrolled.
Alexandre Segura <mex.zktk@gmail.com>
parents:
323
diff
changeset
|
54 |
if (document.body.scrollTop > 0) { |
|
c4b700679964
Fix tooltip position when page is scrolled.
Alexandre Segura <mex.zktk@gmail.com>
parents:
323
diff
changeset
|
55 |
$tip.css('top', parseInt($tip.css('top'), 10) + document.body.scrollTop); |
|
c4b700679964
Fix tooltip position when page is scrolled.
Alexandre Segura <mex.zktk@gmail.com>
parents:
323
diff
changeset
|
56 |
} |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
57 |
}); |
|
415
c4b700679964
Fix tooltip position when page is scrolled.
Alexandre Segura <mex.zktk@gmail.com>
parents:
323
diff
changeset
|
58 |
|
|
c4b700679964
Fix tooltip position when page is scrolled.
Alexandre Segura <mex.zktk@gmail.com>
parents:
323
diff
changeset
|
59 |
$el.popover('show'); |
|
320
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
60 |
}, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
61 |
destroyTooltip: function() { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
62 |
var target = new Snap(this.getTooltipTarget()); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
63 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
64 |
var $el = $(target.node); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
65 |
if ($el.data('bs.popover')) { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
66 |
$el.popover('destroy'); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
67 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
68 |
}, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
69 |
hideTooltip: function() { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
70 |
var target = new Snap(this.getTooltipTarget()); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
71 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
72 |
var $el = $(target.node); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
73 |
if ($el.data('bs.popover')) { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
74 |
$el.popover('hide'); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
75 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
76 |
}, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
77 |
showTooltip: function() { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
78 |
var target = new Snap(this.getTooltipTarget()); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
79 |
|
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
80 |
var $el = $(target.node); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
81 |
if ($el.data('bs.popover')) { |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
82 |
$el.popover('show'); |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
83 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
84 |
}, |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
85 |
} |
|
81945eedc63f
Introduce refactored components using Vue.js.
Alexandre Segura <mex.zktk@gmail.com>
parents:
diff
changeset
|
86 |
} |