src_js/iconolab-bundle/src/components/editor/mixins/tooltip.js
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--
Fix tooltip position when page is scrolled.
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
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
}