diff --git a/addons/web/__openerp__.py b/addons/web/__openerp__.py index 9ea84a3501f..7cc78212bd8 100644 --- a/addons/web/__openerp__.py +++ b/addons/web/__openerp__.py @@ -43,6 +43,7 @@ This module provides the core of the OpenERP Web Client. "static/lib/cleditor/jquery.cleditor.js", "static/lib/py.js/lib/py.js", "static/src/js/openerpframework.js", + "static/lib/bootstrap/js/tooltip.js", "static/src/js/boot.js", "static/src/js/testing.js", "static/src/js/pyeval.js", diff --git a/addons/web/static/lib/bootstrap/js/tooltip.js b/addons/web/static/lib/bootstrap/js/tooltip.js new file mode 100644 index 00000000000..46b8c9bdd85 --- /dev/null +++ b/addons/web/static/lib/bootstrap/js/tooltip.js @@ -0,0 +1,385 @@ +/* ======================================================================== + * Bootstrap: tooltip.js v3.0.2 + * http://getbootstrap.com/javascript/#tooltip + * Inspired by the original jQuery.tipsy by Jason Frame + * ======================================================================== + * Copyright 2013 Twitter, Inc. + * + * Licensed under the Apache License, Version 2.0 (the "License"); + * you may not use this file except in compliance with the License. + * You may obtain a copy of the License at + * + * http://www.apache.org/licenses/LICENSE-2.0 + * + * Unless required by applicable law or agreed to in writing, software + * distributed under the License is distributed on an "AS IS" BASIS, + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + * See the License for the specific language governing permissions and + * limitations under the License. + * ======================================================================== */ + + ++function ($) { "use strict"; + + // TOOLTIP PUBLIC CLASS DEFINITION + // =============================== + + var Tooltip = function (element, options) { + this.type = + this.options = + this.enabled = + this.timeout = + this.hoverState = + this.$element = null + + this.init('tooltip', element, options) + } + + Tooltip.DEFAULTS = { + animation: true + , placement: 'top' + , selector: false + , template: '
' + , trigger: 'hover focus' + , title: '' + , delay: 0 + , html: false + , container: false + } + + Tooltip.prototype.init = function (type, element, options) { + this.enabled = true + this.type = type + this.$element = $(element) + this.options = this.getOptions(options) + + var triggers = this.options.trigger.split(' ') + + for (var i = triggers.length; i--;) { + var trigger = triggers[i] + + if (trigger == 'click') { + this.$element.on('click.' + this.type, this.options.selector, $.proxy(this.toggle, this)) + } else if (trigger != 'manual') { + var eventIn = trigger == 'hover' ? 'mouseenter' : 'focus' + var eventOut = trigger == 'hover' ? 'mouseleave' : 'blur' + + this.$element.on(eventIn + '.' + this.type, this.options.selector, $.proxy(this.enter, this)) + this.$element.on(eventOut + '.' + this.type, this.options.selector, $.proxy(this.leave, this)) + } + } + + this.options.selector ? + (this._options = $.extend({}, this.options, { trigger: 'manual', selector: '' })) : + this.fixTitle() + } + + Tooltip.prototype.getDefaults = function () { + return Tooltip.DEFAULTS + } + + Tooltip.prototype.getOptions = function (options) { + options = $.extend({}, this.getDefaults(), this.$element.data(), options) + + if (options.delay && typeof options.delay == 'number') { + options.delay = { + show: options.delay + , hide: options.delay + } + } + + return options + } + + Tooltip.prototype.getDelegateOptions = function () { + var options = {} + var defaults = this.getDefaults() + + this._options && $.each(this._options, function (key, value) { + if (defaults[key] != value) options[key] = value + }) + + return options + } + + Tooltip.prototype.enter = function (obj) { + var self = obj instanceof this.constructor ? + obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) + + clearTimeout(self.timeout) + + self.hoverState = 'in' + + if (!self.options.delay || !self.options.delay.show) return self.show() + + self.timeout = setTimeout(function () { + if (self.hoverState == 'in') self.show() + }, self.options.delay.show) + } + + Tooltip.prototype.leave = function (obj) { + var self = obj instanceof this.constructor ? + obj : $(obj.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) + + clearTimeout(self.timeout) + + self.hoverState = 'out' + + if (!self.options.delay || !self.options.delay.hide) return self.hide() + + self.timeout = setTimeout(function () { + if (self.hoverState == 'out') self.hide() + }, self.options.delay.hide) + } + + Tooltip.prototype.show = function () { + var e = $.Event('show.bs.'+ this.type) + + if (this.hasContent() && this.enabled) { + this.$element.trigger(e) + + if (e.isDefaultPrevented()) return + + var $tip = this.tip() + + this.setContent() + + if (this.options.animation) $tip.addClass('fade') + + var placement = typeof this.options.placement == 'function' ? + this.options.placement.call(this, $tip[0], this.$element[0]) : + this.options.placement + + var autoToken = /\s?auto?\s?/i + var autoPlace = autoToken.test(placement) + if (autoPlace) placement = placement.replace(autoToken, '') || 'top' + + $tip + .detach() + .css({ top: 0, left: 0, display: 'block' }) + .addClass(placement) + + this.options.container ? $tip.appendTo(this.options.container) : $tip.insertAfter(this.$element) + + var pos = this.getPosition() + var actualWidth = $tip[0].offsetWidth + var actualHeight = $tip[0].offsetHeight + if (autoPlace) { + var $parent = this.$element.parent() + + var orgPlacement = placement + var docScroll = document.documentElement.scrollTop || document.body.scrollTop + var parentWidth = this.options.container == 'body' ? window.innerWidth : $parent.outerWidth() + var parentHeight = this.options.container == 'body' ? window.innerHeight : $parent.outerHeight() + var parentLeft = this.options.container == 'body' ? 0 : $parent.offset().left + + placement = placement == 'bottom' && pos.top + pos.height + actualHeight - docScroll > parentHeight ? 'top' : + placement == 'top' && pos.top - docScroll - actualHeight < 0 ? 'bottom' : + placement == 'right' && pos.right + actualWidth > parentWidth ? 'left' : + placement == 'left' && pos.left - actualWidth < parentLeft ? 'right' : + placement + + $tip + .removeClass(orgPlacement) + .addClass(placement) + } + + var calculatedOffset = this.getCalculatedOffset(placement, pos, actualWidth, actualHeight) + + this.applyPlacement(calculatedOffset, placement) + this.$element.trigger('shown.bs.' + this.type) + } + } + + Tooltip.prototype.applyPlacement = function(offset, placement) { + var replace + var $tip = this.tip() + var width = $tip[0].offsetWidth + var height = $tip[0].offsetHeight + + // manually read margins because getBoundingClientRect includes difference + var marginTop = parseInt($tip.css('margin-top'), 10) + var marginLeft = parseInt($tip.css('margin-left'), 10) + + // we must check for NaN for ie 8/9 + if (isNaN(marginTop)) marginTop = 0 + if (isNaN(marginLeft)) marginLeft = 0 + + offset.top = offset.top + marginTop + offset.left = offset.left + marginLeft + + $tip + .offset(offset) + .addClass('in') + + // check to see if placing tip in new offset caused the tip to resize itself + var actualWidth = $tip[0].offsetWidth + var actualHeight = $tip[0].offsetHeight + + if (placement == 'top' && actualHeight != height) { + replace = true + offset.top = offset.top + height - actualHeight + } + + if (/bottom|top/.test(placement)) { + var delta = 0 + + if (offset.left < 0) { + delta = offset.left * -2 + offset.left = 0 + + $tip.offset(offset) + + actualWidth = $tip[0].offsetWidth + actualHeight = $tip[0].offsetHeight + } + + this.replaceArrow(delta - width + actualWidth, actualWidth, 'left') + } else { + this.replaceArrow(actualHeight - height, actualHeight, 'top') + } + + if (replace) $tip.offset(offset) + } + + Tooltip.prototype.replaceArrow = function(delta, dimension, position) { + this.arrow().css(position, delta ? (50 * (1 - delta / dimension) + "%") : '') + } + + Tooltip.prototype.setContent = function () { + var $tip = this.tip() + var title = this.getTitle() + + $tip.find('.tooltip-inner')[this.options.html ? 'html' : 'text'](title) + $tip.removeClass('fade in top bottom left right') + } + + Tooltip.prototype.hide = function () { + var that = this + var $tip = this.tip() + var e = $.Event('hide.bs.' + this.type) + + function complete() { + if (that.hoverState != 'in') $tip.detach() + } + + this.$element.trigger(e) + + if (e.isDefaultPrevented()) return + + $tip.removeClass('in') + + $.support.transition && this.$tip.hasClass('fade') ? + $tip + .one($.support.transition.end, complete) + .emulateTransitionEnd(150) : + complete() + + this.$element.trigger('hidden.bs.' + this.type) + + return this + } + + Tooltip.prototype.fixTitle = function () { + var $e = this.$element + if ($e.attr('title') || typeof($e.attr('data-original-title')) != 'string') { + $e.attr('data-original-title', $e.attr('title') || '').attr('title', '') + } + } + + Tooltip.prototype.hasContent = function () { + return this.getTitle() + } + + Tooltip.prototype.getPosition = function () { + var el = this.$element[0] + return $.extend({}, (typeof el.getBoundingClientRect == 'function') ? el.getBoundingClientRect() : { + width: el.offsetWidth + , height: el.offsetHeight + }, this.$element.offset()) + } + + Tooltip.prototype.getCalculatedOffset = function (placement, pos, actualWidth, actualHeight) { + return placement == 'bottom' ? { top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2 } : + placement == 'top' ? { top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2 } : + placement == 'left' ? { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth } : + /* placement == 'right' */ { top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width } + } + + Tooltip.prototype.getTitle = function () { + var title + var $e = this.$element + var o = this.options + + title = $e.attr('data-original-title') + || (typeof o.title == 'function' ? o.title.call($e[0]) : o.title) + + return title + } + + Tooltip.prototype.tip = function () { + return this.$tip = this.$tip || $(this.options.template) + } + + Tooltip.prototype.arrow = function () { + return this.$arrow = this.$arrow || this.tip().find('.tooltip-arrow') + } + + Tooltip.prototype.validate = function () { + if (!this.$element[0].parentNode) { + this.hide() + this.$element = null + this.options = null + } + } + + Tooltip.prototype.enable = function () { + this.enabled = true + } + + Tooltip.prototype.disable = function () { + this.enabled = false + } + + Tooltip.prototype.toggleEnabled = function () { + this.enabled = !this.enabled + } + + Tooltip.prototype.toggle = function (e) { + var self = e ? $(e.currentTarget)[this.type](this.getDelegateOptions()).data('bs.' + this.type) : this + self.tip().hasClass('in') ? self.leave(self) : self.enter(self) + } + + Tooltip.prototype.destroy = function () { + this.hide().$element.off('.' + this.type).removeData('bs.' + this.type) + } + + + // TOOLTIP PLUGIN DEFINITION + // ========================= + + var old = $.fn.tooltip + + $.fn.tooltip = function (option) { + return this.each(function () { + var $this = $(this) + var data = $this.data('bs.tooltip') + var options = typeof option == 'object' && option + + if (!data) $this.data('bs.tooltip', (data = new Tooltip(this, options))) + if (typeof option == 'string') data[option]() + }) + } + + $.fn.tooltip.Constructor = Tooltip + + + // TOOLTIP NO CONFLICT + // =================== + + $.fn.tooltip.noConflict = function () { + $.fn.tooltip = old + return this + } + +}(jQuery); diff --git a/addons/web/static/src/js/chrome.js b/addons/web/static/src/js/chrome.js index abbd4767361..c58089f4b5c 100644 --- a/addons/web/static/src/js/chrome.js +++ b/addons/web/static/src/js/chrome.js @@ -1261,8 +1261,8 @@ instance.web.Client = instance.web.Widget.extend({ }, bind_events: function() { var self = this; - this.$el.on('mouseenter', '.oe_systray > div:not([data-tipsy=true])', function() { - $(this).attr('data-tipsy', 'true').tipsy().trigger('mouseenter'); + this.$el.on('mouseenter', '.oe_systray > div:not([data-toggle=tooltip])', function() { + $(this).attr('data-toggle', 'tooltip').tooltip().trigger('mouseenter'); }); this.$el.on('click', '.oe_dropdown_toggle', function(ev) { ev.preventDefault(); @@ -1286,7 +1286,8 @@ instance.web.Client = instance.web.Widget.extend({ }, 0); }); instance.web.bus.on('click', this, function(ev) { - $.fn.tipsy.clear(); + $.fn.tooltip('destroy'); + this.$el.find('.oe_systray').find('div') if (!$(ev.target).is('input[type=file]')) { self.$el.find('.oe_dropdown_menu.oe_opened, .oe_dropdown_toggle.oe_opened').removeClass('oe_opened'); } diff --git a/addons/web/static/src/js/view_form.js b/addons/web/static/src/js/view_form.js index 683cdebbbf4..748f9bde4f8 100644 --- a/addons/web/static/src/js/view_form.js +++ b/addons/web/static/src/js/view_form.js @@ -1819,7 +1819,7 @@ instance.web.form.FormWidget = instance.web.Widget.extend(instance.web.form.Invi this.$el.addClass(this.node.attrs["class"] || ""); }, destroy: function() { - $.fn.tipsy.clear(); + $.fn.tooltip('destroy'); this._super.apply(this, arguments); }, /** @@ -1851,9 +1851,9 @@ instance.web.form.FormWidget = instance.web.Widget.extend(instance.web.form.Invi widget = widget || this; trigger = trigger || this.$el; options = _.extend({ - delayIn: 500, - delayOut: 0, - fade: true, + //delayIn: 500, + //delayOut: 0, + //fade: true, title: function() { var template = widget.template + '.tooltip'; if (!QWeb.has_template(template)) { @@ -1864,12 +1864,14 @@ instance.web.form.FormWidget = instance.web.Widget.extend(instance.web.form.Invi widget: widget }); }, - gravity: $.fn.tipsy.autoBounds(50, 'nw'), + //gravity: $.fn.tooltip.autoBounds(50, 'nw'), + placement: 'right', html: true, - opacity: 0.85, - trigger: 'hover' + //opacity: 0.85, + //trigger: 'hover' }, options || {}); - $(trigger).tipsy(options); + $(trigger).attr('data-toggle', 'tooltip'); + $(trigger).tooltip(options); }, /** * Builds a new context usable for operations related to fields by merging diff --git a/addons/web/static/src/js/views.js b/addons/web/static/src/js/views.js index 37369377bf1..80e72a5d813 100644 --- a/addons/web/static/src/js/views.js +++ b/addons/web/static/src/js/views.js @@ -585,7 +585,7 @@ instance.web.ViewManager = instance.web.Widget.extend({ var self = this; this.$el.find('.oe_view_manager_switch a').click(function() { self.switch_mode($(this).data('view-type')); - }).tipsy(); + }).tooltip(); var views_ids = {}; _.each(this.views_src, function(view) { self.views[view.view_type] = $.extend({}, view, { @@ -1152,7 +1152,7 @@ instance.web.Sidebar = instance.web.Widget.extend({ $(this).toggle(!!$(this).find('li').length); }); - self.$("[title]").tipsy({ + self.$("[title]").tooltip({ 'html': true, 'delayIn': 500, }); diff --git a/addons/web_kanban/static/src/js/kanban.js b/addons/web_kanban/static/src/js/kanban.js index 7d25d647f8b..5275baaa5e8 100644 --- a/addons/web_kanban/static/src/js/kanban.js +++ b/addons/web_kanban/static/src/js/kanban.js @@ -423,7 +423,7 @@ instance.web_kanban.KanbanView = instance.web.View.extend({ }, on_record_moved : function(record, old_group, old_index, new_group, new_index) { var self = this; - $.fn.tipsy.clear(); + $.fn.tooltip('destroy'); $(old_group.$el).add(new_group.$el).find('.oe_kanban_aggregates, .oe_kanban_group_length').hide(); if (old_group === new_group) { new_group.records.splice(old_index, 1); @@ -626,7 +626,7 @@ instance.web_kanban.KanbanGroup = instance.web.Widget.extend({ this.$records.data('widget', this); this.$has_been_started.resolve(); var add_btn = this.$el.find('.oe_kanban_add'); - add_btn.tipsy({delayIn: 500, delayOut: 1000}); + add_btn.tooltip({delayIn: 500, delayOut: 1000}); this.$records.find(".oe_kanban_column_cards").click(function (ev) { if (ev.target == ev.currentTarget) { if (!self.state.folded) { @@ -666,7 +666,7 @@ instance.web_kanban.KanbanGroup = instance.web.Widget.extend({ return (new instance.web.Model(field.relation)).query([options.tooltip_on_group_by]) .filter([["id", "=", this.value]]).first().then(function(res) { self.tooltip = res[options.tooltip_on_group_by]; - self.$(".oe_kanban_group_title_text").attr("title", self.tooltip || self.title || "").tipsy({html: true}); + self.$(".oe_kanban_group_title_text").attr("title", self.tooltip || self.title || "").tooltip({html: true}); }); } }, @@ -894,7 +894,7 @@ instance.web_kanban.KanbanRecord = instance.web.Widget.extend({ bind_events: function() { var self = this; this.setup_color_picker(); - this.$el.find('[tooltip]').tipsy({ + this.$el.find('[tooltip]').tooltip({ delayIn: 500, delayOut: 0, fade: true, diff --git a/addons/web_kanban_sparkline/static/src/js/kanban_sparkline.js b/addons/web_kanban_sparkline/static/src/js/kanban_sparkline.js index 5335599478f..bb1d5627ef0 100644 --- a/addons/web_kanban_sparkline/static/src/js/kanban_sparkline.js +++ b/addons/web_kanban_sparkline/static/src/js/kanban_sparkline.js @@ -27,7 +27,7 @@ instance.web_kanban.SparklineBarWidget = instance.web_kanban.AbstractField.exten } }, self.options); self.$el.sparkline(value, sparkline_options); - self.$el.tipsy({'delayIn': 0, 'html': true, 'title': function(){return title}, 'gravity': 'n'}); + self.$el.tooltip({'delayIn': 0, 'html': true, 'title': function(){return title}, 'gravity': 'n'}); }, 0); }, });