From 3d2c251b038528c44fe01afc46f8f391e89a4142 Mon Sep 17 00:00:00 2001 From: Ezequiel Bergamaschi Date: Sun, 20 Apr 2014 23:57:39 -0300 Subject: [PATCH] FloatingTip as bootstrap popover --- mindplot/src/main/javascript/NoteIcon.js | 39 ++- .../src/main/javascript/widget/FloatingTip.js | 264 ++---------------- .../widget/KeyboardShortcutTooltip.js | 17 +- 3 files changed, 39 insertions(+), 281 deletions(-) diff --git a/mindplot/src/main/javascript/NoteIcon.js b/mindplot/src/main/javascript/NoteIcon.js index b443ce3b..160f0934 100644 --- a/mindplot/src/main/javascript/NoteIcon.js +++ b/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($(this.getImage()._peer._native), { + this._tip = new mindplot.widget.FloatingTip($(me.getImage()._peer._native), { // Content can also be a function of the target element! content:function () { - var result = new Element('div'); - result.setStyles({padding:'5px'}); + var result = $('
').css({padding:'5px'}); - var title = new Element('div', {text:$msg('NOTE')}); - title.setStyles({ - 'font-weight':'bold', - color:'black', - 'padding-bottom':'5px', - width:'100px' - }); - title.inject(result); + var title = $('
').text($msg('NOTE')) + .css({ + 'font-weight':'bold', + color:'black', + 'padding-bottom':'5px', + width:'100px' + }); + result.append(title); - var text = new Element('div', {text:this._linksModel.getText()}); - text.setStyles({ + var text = $('
').text(me._linksModel.getText()) + .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 () { diff --git a/mindplot/src/main/javascript/widget/FloatingTip.js b/mindplot/src/main/javascript/widget/FloatingTip.js index e05f1283..c00e4320 100644 --- a/mindplot/src/main/javascript/widget/FloatingTip.js +++ b/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', - center: true, - content: 'title', + animation: true, html: false, - balloon: true, - arrowSize: 6, - arrowOffset: 6, - distance: 7, - motion: 40, - motionOnShow: true, - motionOnHide: true, - showOn: 'mouseenter', - hideOn: 'mouseleave', - showDelay: 500, - hideDelay: 250, - className: 'floating-tip', - offset: {x: 0, y: 0}, - preventHideOnOver: true, - fx: { 'duration': 'short' } + placement: 'right', + selector: false, + trigger: 'hover', + title: '', + content: '', + delay: 0, + container: false }, initialize: function (element, options) { this.setOptions(options); - this.boundShow = function () { - this.show(element); - }.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); + this.element = element; + element.popover(this.options); }, show: function (element) { - var old = document.id(element).retrieve('floatingtip'); - if (old) { - if (old.getStyle('opacity') == 1) { - clearTimeout(old.retrieve('timeout')); - return this; - } + if (element) { + console.error('element is not necessary'); } - var tip = this._create(element); - if (tip == null) - 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]); + this.element.popover('show'); + this.fireEvent('show', [this, this.element]); return this; }, hide: function (element) { - var tip = element.retrieve('floatingtip'); - if (!tip) { - 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]); + this.element.popover('hide'); + this.fireEvent('hide', [this, 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; - } - }); diff --git a/mindplot/src/main/javascript/widget/KeyboardShortcutTooltip.js b/mindplot/src/main/javascript/widget/KeyboardShortcutTooltip.js index 4852cb70..4aed4e65 100644 --- a/mindplot/src/main/javascript/widget/KeyboardShortcutTooltip.js +++ b/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 = $('
').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', - arrowOffset : 10, - 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' } + placement: 'bottom', + className: 'keyboardShortcutTip' }); tipDiv.on('click', function(e) {