mirror of
https://bitbucket.org/wisemapping/wisemapping-open-source.git
synced 2024-11-05 07:03:24 +01:00
FloatingTip as bootstrap popover
This commit is contained in:
parent
200d5c517a
commit
eef8865774
@ -31,42 +31,38 @@ mindplot.NoteIcon = new Class({
|
|||||||
|
|
||||||
_registerEvents:function () {
|
_registerEvents:function () {
|
||||||
this._image.setCursor('pointer');
|
this._image.setCursor('pointer');
|
||||||
|
var me = this;
|
||||||
|
|
||||||
if (!this._readOnly) {
|
if (!this._readOnly) {
|
||||||
|
|
||||||
// Add on click event to open the editor ...
|
// Add on click event to open the editor ...
|
||||||
this.addEvent('click', function (event) {
|
this.addEvent('click', function (event) {
|
||||||
this._topic.showNoteEditor();
|
me._topic.showNoteEditor();
|
||||||
event.stopPropagation();
|
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 can also be a function of the target element!
|
||||||
content:function () {
|
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',
|
'white-space':'pre-wrap',
|
||||||
'word-wrap':'break-word'
|
'word-wrap':'break-word'
|
||||||
}
|
}
|
||||||
);
|
);
|
||||||
text.inject(result);
|
result.append(text);
|
||||||
|
|
||||||
|
|
||||||
return result;
|
return result;
|
||||||
}.bind(this),
|
},
|
||||||
html:true,
|
html:true,
|
||||||
position:'bottom',
|
position:'bottom',
|
||||||
arrowOffset:10,
|
arrowOffset:10,
|
||||||
@ -75,6 +71,7 @@ mindplot.NoteIcon = new Class({
|
|||||||
offset:{x:10, y:20},
|
offset:{x:10, y:20},
|
||||||
className:'notesTip'
|
className:'notesTip'
|
||||||
});
|
});
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
getModel:function () {
|
getModel:function () {
|
||||||
|
@ -15,270 +15,40 @@
|
|||||||
* See the License for the specific language governing permissions and
|
* See the License for the specific language governing permissions and
|
||||||
* limitations under the License.
|
* limitations under the License.
|
||||||
*/
|
*/
|
||||||
|
//FIXME: ver que onda tip en los eventos
|
||||||
mindplot.widget.FloatingTip = new Class({
|
mindplot.widget.FloatingTip = new Class({
|
||||||
Implements: [Options, mindplot.Events],
|
Implements: [Options, mindplot.Events],
|
||||||
|
|
||||||
options: {
|
options: {
|
||||||
position: 'top',
|
animation: true,
|
||||||
center: true,
|
|
||||||
content: 'title',
|
|
||||||
html: false,
|
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) {
|
initialize: function (element, options) {
|
||||||
this.setOptions(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) {
|
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;
|
return this;
|
||||||
},
|
},
|
||||||
|
|
||||||
hide: function (element) {
|
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;
|
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;
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
});
|
});
|
||||||
|
@ -25,26 +25,17 @@ mindplot.widget.KeyboardShortcutTooltip = new Class({
|
|||||||
this._text = text;
|
this._text = text;
|
||||||
|
|
||||||
var children = buttonElem.children().first();
|
var children = buttonElem.children().first();
|
||||||
var tipElemId = buttonElem.id + "Tip";
|
var tipElemId = buttonElem.attr('id') + "Tip";
|
||||||
var tipDiv = $('<div></div>').attr('id', tipElemId);
|
var tipDiv = $('<div></div>').attr('id', tipElemId);
|
||||||
tipDiv.append(children);
|
tipDiv.append(children);
|
||||||
buttonElem.append(tipDiv);
|
buttonElem.append(tipDiv);
|
||||||
|
|
||||||
this.parent(tipDiv, {
|
this.parent(tipDiv, {
|
||||||
//Content can also be a function of the target element!
|
//Content can also be a function of the target element!
|
||||||
content: this._buildContent.pass(buttonElem, this),
|
content: this._buildContent(),
|
||||||
html: true,
|
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) {
|
tipDiv.on('click', function(e) {
|
||||||
|
Loading…
Reference in New Issue
Block a user