FloatingTip as bootstrap popover

mindplot/src/main/javascript/NoteIcon.js

@@ -31,42 +31,38 @@ mindplot.NoteIcon = new Class({
 
     _registerEvents:function () {
         this._image.setCursor('pointer');
+        var me = this;
 
         if (!this._readOnly) {
-
             // Add on click event to open the editor ...
             this.addEvent('click', function (event) {
-                this._topic.showNoteEditor();
+                me._topic.showNoteEditor();
                 event.stopPropagation();
-            }.bind(this));
+            });
         }
-
+        this._tip = new mindplot.widget.FloatingTip($(me.getImage()._peer._native), {
-        this._tip = new mindplot.widget.FloatingTip($(this.getImage()._peer._native), {
             // Content can also be a function of the target element!
             content:function () {
-                var result = new Element('div');
+                var result = $('<div></div>').css({padding:'5px'});
-                result.setStyles({padding:'5px'});
 
-                var title = new Element('div', {text:$msg('NOTE')});
+                var title = $('<div></div>').text($msg('NOTE'))
-                title.setStyles({
+                    .css({
-                    'font-weight':'bold',
+                        'font-weight':'bold',
-                    color:'black',
+                        color:'black',
-                    'padding-bottom':'5px',
+                        'padding-bottom':'5px',
-                    width:'100px'
+                        width:'100px'
-                });
+                    });
-                title.inject(result);
+                result.append(title);
 
-                var text = new Element('div', {text:this._linksModel.getText()});
+                var text = $('<div></div>').text(me._linksModel.getText())
-                text.setStyles({
+                    .css({
                         'white-space':'pre-wrap',
                         'word-wrap':'break-word'
                     }
                 );
-                text.inject(result);
+                result.append(text);
-
-
                 return result;
-            }.bind(this),
+            },
             html:true,
             position:'bottom',
             arrowOffset:10,
@@ -75,6 +71,7 @@ mindplot.NoteIcon = new Class({
             offset:{x:10, y:20},
             className:'notesTip'
         });
+
     },
 
     getModel:function () {

mindplot/src/main/javascript/widget/FloatingTip.js

@@ -15,270 +15,40 @@
  *   See the License for the specific language governing permissions and
  *   limitations under the License.
  */
-
+//FIXME: ver que onda tip en los eventos
 mindplot.widget.FloatingTip = new Class({
     Implements: [Options, mindplot.Events],
 
     options: {
-        position: 'top',
+        animation: true,
-        center: true,
-        content: 'title',
         html: false,
-        balloon: true,
+        placement: 'right',
-        arrowSize: 6,
+        selector: false,
-        arrowOffset: 6,
+        trigger: 'hover',
-        distance: 7,
+        title: '',
-        motion: 40,
+        content: '',
-        motionOnShow: true,
+        delay: 0,
-        motionOnHide: true,
+        container: false
-        showOn: 'mouseenter',
-        hideOn: 'mouseleave',
-        showDelay: 500,
-        hideDelay: 250,
-        className: 'floating-tip',
-        offset: {x: 0, y: 0},
-        preventHideOnOver: true,
-        fx: { 'duration': 'short' }
     },
 
     initialize: function (element, options) {
         this.setOptions(options);
-        this.boundShow = function () {
+        this.element = element;
-            this.show(element);
+        element.popover(this.options);
-        }.bind(this);
-
-        this.boundHide = function () {
-            this.hide(element);
-        }.bind(this);
-
-        if (!['top', 'right', 'bottom', 'left', 'inside'].contains(this.options.position))
-            this.options.position = 'top';
-        this.attach(element);
-    },
-
-    attach: function (element) {
-        if (element.data('hasEvents') !== null) {
-            return;
-        }
-        element.bind(this.options.showOn, this.boundShow);
-        element.bind(this.options.hideOn, this.boundHide);
-        element.data('hasEvents', true);
     },
 
     show: function (element) {
-        var old = document.id(element).retrieve('floatingtip');
+        if (element) {
-        if (old) {
+            console.error('element is not necessary');
-            if (old.getStyle('opacity') == 1) {
-                clearTimeout(old.retrieve('timeout'));
-                return this;
-            }
         }
-        var tip = this._create(element);
+        this.element.popover('show');
-        if (tip == null)
+        this.fireEvent('show', [this, this.element]);
-            return this;
-
-        element.store('floatingtip', tip);
-        this._animate(tip, 'in');
-
-        if (this.options.preventHideOnOver) {
-            tip.addEvent(this.options.showOn, this.boundShow);
-            tip.addEvent(this.options.hideOn, this.boundHide);
-        }
-
-        this.fireEvent('show', [tip, element]);
         return this;
     },
 
     hide: function (element) {
-        var tip = element.retrieve('floatingtip');
+        this.element.popover('hide');
-        if (!tip) {
+        this.fireEvent('hide', [this, element]);
-            if (this.options.position == 'inside') {
-                try {
-                    element = element.getParent().getParent();
-                    tip = element.retrieve('floatingtip');
-                } catch (x) {
-                }
-                if (!tip)
-                    return this;
-            } else {
-                return this;
-            }
-        }
-        this._animate(tip, 'out');
-        this.fireEvent('hide', [tip, element]);
         return this;
-    },
-
-    _create: function (elem) {
-
-        var o = this.options;
-        var oc = o.content;
-        var opos = o.position;
-
-        if (oc == 'title') {
-            oc = 'floatingtitle';
-            if (!elem.get('floatingtitle'))
-                elem.setProperty('floatingtitle', elem.get('title'));
-            elem.set('title', '');
-        }
-
-        var cnt = (typeof(oc) == 'string' ? elem.get(oc) : oc(elem));
-        var cwr = new Element('div').addClass(o.className).setStyle('margin', 0);
-        var tip = new Element('div').addClass(o.className + '-wrapper').setStyles({ 'margin': 0, 'padding': 0, 'z-index': cwr.getStyle('z-index') }).adopt(cwr);
-
-        if (cnt) {
-            if (o.html)
-                cnt.inject(cwr);
-            else
-                cwr.set('text', cnt);
-        } else {
-            return null;
-        }
-
-        var body = document.id(document.body);
-        tip.setStyles({ 'position': 'absolute', 'opacity': 0, 'top': 0, 'left': 0 }).inject(body);
-
-        if (o.balloon && !Browser.ie6) {
-
-            var trg = new Element('div').addClass(o.className + '-triangle').setStyles({ 'margin': 0, 'padding': 0 });
-            var trgSt = { 'border-color': cwr.getStyle('background-color'), 'border-width': o.arrowSize, 'border-style': 'solid', 'width': 0, 'height': 0 };
-
-            switch (opos) {
-                case 'inside':
-                case 'top':
-                    trgSt['border-bottom-width'] = 0;
-                    break;
-                case 'right':
-                    trgSt['border-left-width'] = 0;
-                    trgSt['float'] = 'left';
-                    cwr.setStyle('margin-left', o.arrowSize);
-                    break;
-                case 'bottom':
-                    trgSt['border-top-width'] = 0;
-                    break;
-                case 'left':
-                    trgSt['border-right-width'] = 0;
-                    if (Browser.ie7) {
-                        trgSt['position'] = 'absolute';
-                        trgSt['right'] = 0;
-                    } else {
-                        trgSt['float'] = 'right';
-                    }
-                    cwr.setStyle('margin-right', o.arrowSize);
-                    break;
-            }
-
-            switch (opos) {
-                case 'inside':
-                case 'top':
-                case 'bottom':
-                    trgSt['border-left-color'] = trgSt['border-right-color'] = 'transparent';
-                    trgSt['margin-left'] = o.center ? tip.getSize().x / 2 - o.arrowSize : o.arrowOffset;
-                    break;
-                case 'left':
-                case 'right':
-                    trgSt['border-top-color'] = trgSt['border-bottom-color'] = 'transparent';
-                    trgSt['margin-top'] = o.center ? tip.getSize().y / 2 - o.arrowSize : o.arrowOffset;
-                    break;
-            }
-
-            trg.setStyles(trgSt).inject(tip, (opos == 'top' || opos == 'inside') ? 'bottom' : 'top');
-
-        }
-
-        var tipSz = tip.getSize();
-        var trgC = elem.getCoordinates(body);
-
-        // Paulo: This is hack for Firefox 10.
-        trgC.right = trgC.right == null ? trgC.left : trgC.right;
-        trgC.bottom = trgC.bottom == null ? trgC.top : trgC.bottom;
-        trgC.height = !$defined(trgC.height) ? 0 : trgC.height;
-        trgC.width = !$defined(trgC.width) ? 0 : trgC.width;
-
-        var pos = { x: trgC.left + o.offset.x, y: trgC.top + o.offset.y };
-
-        if (opos == 'inside') {
-            tip.setStyles({ 'width': tip.getStyle('width'), 'height': tip.getStyle('height') });
-            elem.setStyle('position', 'relative').adopt(tip);
-            pos = { x: o.offset.x, y: o.offset.y };
-        } else {
-            switch (opos) {
-                case 'top':
-                    pos.y -= tipSz.y + o.distance;
-                    break;
-                case 'right':
-                    pos.x += trgC.width + o.distance;
-                    break;
-                case 'bottom':
-                    pos.y += trgC.height + o.distance;
-                    break;
-                case 'left':
-                    pos.x -= tipSz.x + o.distance;
-                    break;
-            }
-        }
-
-        if (o.center) {
-            switch (opos) {
-                case 'top':
-                case 'bottom':
-                    pos.x += (trgC.width / 2 - tipSz.x / 2);
-                    break;
-                case 'left':
-                case 'right':
-                    pos.y += (trgC.height / 2 - tipSz.y / 2);
-                    break;
-                case 'inside':
-                    pos.x += (trgC.width / 2 - tipSz.x / 2);
-                    pos.y += (trgC.height / 2 - tipSz.y / 2);
-                    break;
-            }
-        }
-
-        tip.set('morph', o.fx).store('position', pos);
-        tip.setStyles({ 'top': pos.y, 'left': pos.x });
-
-        return tip;
-
-    },
-
-    _animate: function (tip, d) {
-
-        clearTimeout(tip.retrieve('timeout'));
-        tip.store('timeout', (function (t) {
-
-            var o = this.options, din = (d == 'in');
-            var m = { 'opacity': din ? 1 : 0 };
-
-            if ((o.motionOnShow && din) || (o.motionOnHide && !din)) {
-                var pos = t.retrieve('position');
-                if (!pos) return;
-                switch (o.position) {
-                    case 'inside':
-                    case 'top':
-                        m['top'] = din ? [pos.y - o.motion, pos.y] : pos.y - o.motion;
-                        break;
-                    case 'right':
-                        m['left'] = din ? [pos.x + o.motion, pos.x] : pos.x + o.motion;
-                        break;
-                    case 'bottom':
-                        m['top'] = din ? [pos.y + o.motion, pos.y] : pos.y + o.motion;
-                        break;
-                    case 'left':
-                        m['left'] = din ? [pos.x - o.motion, pos.x] : pos.x - o.motion;
-                        break;
-                }
-            }
-
-            t.morph(m);
-            if (!din) t.get('morph').chain(function () {
-                this.dispose();
-            }.bind(t));
-
-        }).delay((d == 'in') ? this.options.showDelay : this.options.hideDelay, this, tip));
-
-        return this;
-
     }
-
 });

mindplot/src/main/javascript/widget/KeyboardShortcutTooltip.js

@@ -25,26 +25,17 @@ mindplot.widget.KeyboardShortcutTooltip = new Class({
         this._text = text;
 
         var children = buttonElem.children().first();
-        var tipElemId = buttonElem.id + "Tip";
+        var tipElemId = buttonElem.attr('id') + "Tip";
         var tipDiv = $('<div></div>').attr('id', tipElemId);
         tipDiv.append(children);
         buttonElem.append(tipDiv);
 
         this.parent(tipDiv, {
             //Content can also be a function of the target element!
-            content: this._buildContent.pass(buttonElem, this),
+            content: this._buildContent(),
             html: true,
-            position: 'bottom',
+            placement: 'bottom',
-            arrowOffset : 10,
+            className: 'keyboardShortcutTip'
-            center: true,
-            arrowSize: 3,
-            offset : {x:0,y:-2},
-            className: 'keyboardShortcutTip',
-            preventHideOnOver : false,
-            //FIXME: this options are not useful anymore
-            motionOnShow:false,
-            motionOnHide:false,
-            fx: { 'duration': '100' }
         });
 
         tipDiv.on('click', function(e) {