diff options
Diffstat (limited to 'addons/web_tip/static/src')
| -rw-r--r-- | addons/web_tip/static/src/css/tip.css | 56 | ||||
| -rw-r--r-- | addons/web_tip/static/src/js/tip.js | 254 |
2 files changed, 310 insertions, 0 deletions
diff --git a/addons/web_tip/static/src/css/tip.css b/addons/web_tip/static/src/css/tip.css new file mode 100644 index 00000000000..089b7133be7 --- /dev/null +++ b/addons/web_tip/static/src/css/tip.css @@ -0,0 +1,56 @@ +.oe_tip_overlay { + top: 0; + bottom: 0; + left: 0; + right: 0; + position: absolute; + opacity: 0.8; + z-index: 1001; + background-color: #000; + background: -moz-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%); + background: -webkit-gradient(radial,center center,0px,center center,100%,color-stop(0%,rgba(0,0,0,0.4)),color-stop(100%,rgba(0,0,0,0.9))); + background: -webkit-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%); + background: -o-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%); + background: -ms-radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%); + background: radial-gradient(center,ellipse cover,rgba(0,0,0,0.4) 0,rgba(0,0,0,0.9) 100%); + filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#66000000',endColorstr='#e6000000',GradientType=1); + -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; + filter: alpha(opacity=50); + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.oe_tip_helper { + position: absolute; + z-index: 1008; + background-color: #FFF; + background-color: rgba(255,255,255,.9); + border: 1px solid #777; + border: 1px solid rgba(0,0,0,.5); + border-radius: 4px; + box-shadow: 0 2px 15px rgba(0,0,0,.4); + -webkit-transition: all 0.3s ease-out; + -moz-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; +} + +.oe_tip_close { + padding: 5px 5px 10px 10px !important; + margin-top: -15px; + margin-right: -15px; +} + +.oe_tip_fix_parent { + z-index: auto !important; + opacity: 1.0 !important; +} + +.oe_tip_show_element { + z-index: 1011 !important; + position: relative; +} diff --git a/addons/web_tip/static/src/js/tip.js b/addons/web_tip/static/src/js/tip.js new file mode 100644 index 00000000000..a07eb533039 --- /dev/null +++ b/addons/web_tip/static/src/js/tip.js @@ -0,0 +1,254 @@ +(function() { + + var instance = openerp; + + instance.web.Tip = instance.web.Class.extend({ + init: function() { + var self = this; + self.tips = []; + self.tip_mutex = new $.Mutex(); + self.$overlay = null; + self.$element = null; + + var Tips = new instance.web.Model('web.tip'); + Tips.query(['title', 'description', 'action_id', 'model', 'type', 'mode', 'trigger_selector', + 'highlight_selector', 'end_selector', 'end_event', 'placement', 'is_consumed']) + .all().then(function(tips) { + self.tips = tips; + }) + ; + + instance.web.bus.on('action', this, function(action) { + self.on_action(action); + }); + + instance.web.bus.on('view_shown', this, function(view) { + if (_.keys(view.fields_view).length === 0) { + view.on('view_loaded', this, function(fields_view) { + self.on_view(view); + }); + } else { + self.on_view(view); + } + + view.on('switch_mode', this, function() { + }); + }); + + instance.web.bus.on('view_switch_mode', this, function(viewManager, mode) { + self.on_switch(viewManager, mode); + }); + + instance.web.bus.on('form_view_shown', this, function(formView) { + self.on_form_view(formView); + }); + + instance.web.bus.on('form_view_saved', this, function(formView) { + self.on_form_view(formView); + }); + }, + + // stub + on_action: function(action) { + var self = this; + var action_id = action.id; + var model = action.res_model; + }, + + on_view: function(view) { + var self = this; + var fields_view = view.fields_view; + var action_id = view.ViewManager.action ? view.ViewManager.action.id : null; + var model = fields_view.model; + + // kanban + if(fields_view.type === 'kanban') { + var dataset_def = $.Deferred(); + var groups_def = $.Deferred(); + view.on("kanban_dataset_processed", self, function() { + var length = view.dataset.ids.length; + dataset_def.resolve(length); + }); + view.on('kanban_groups_processed', self, function() { + groups_def.resolve(); + }); + dataset_def.done(function(length) { + self.eval_tip(action_id, model, fields_view.type); + }); + groups_def.done(function() { + self.eval_tip(action_id, model, fields_view.type); + }); + } else if (fields_view.type === 'tree') { + view.on('view_list_rendered', self, function() { + self.eval_tip(action_id, model, fields_view.type); + }); + } + }, + + on_form_view: function(formView) { + var self = this; + var model = formView.model; + var type = formView.datarecord.type ? formView.datarecord.type : null; + var mode = 'form'; + self.eval_tip(null, model, mode, type); + }, + + // stub + on_switch: function (viewManager, mode) { + var self = this; + var action = viewManager.action; + var action_id = action.id; + var model = action.res_model; + }, + + eval_tip: function(action_id, model, mode, type) { + var self = this; + var filter = {}; + var valid_tips = []; + var tips = []; + if (action_id) { + valid_tips = _.filter(self.tips, function (tip) { + return tip.action_id[0] === action_id; + }); + } + + filter.model = model; + filter.mode = mode; + tips = _.where(self.tips, filter); + if (type) { + tips = _.filter(tips, function(tip) { + if (!tip.type) { + return true; + } + return tip.type === type; + }); + } + + valid_tips = _.uniq(valid_tips.concat(tips)); + _.each(valid_tips, function(tip) { + if (!tip.is_consumed) { + self.add_tip(tip); + } + }); + }, + + + add_tip: function(tip) { + var self = this; + self.tip_mutex.exec(function() { + return $.when(self.do_tip(tip)); + }); + }, + + do_tip: function (tip) { + var self = this; + var def = $.Deferred(); + var Tips = new instance.web.Model('web.tip'); + var highlight_selector = tip.highlight_selector; + var triggers = tip.trigger_selector ? tip.trigger_selector.split(',') : []; + var trigger_tip = true; + + if(!$(highlight_selector).length > 0) { + return def.reject(); + } + for (var i = 0; i < triggers.length; i++) { + if(!$(triggers[i]).length > 0) { + trigger_tip = false; + } + } + + if (trigger_tip) { + self.$element = $(highlight_selector).first(); + var _top = self.$element.offset().top -5; + var _left = self.$element.offset().left -5; + var _width = self.$element.outerWidth() + 10; + var _height = self.$element.outerHeight() + 10; + + self.$helper = $("<div>", { class: 'oe_tip_helper' }); + self.$element.after(self.$helper); + self.$helper.offset({top: _top , left: _left}); + self.$helper.width(_width); + self.$helper.height(_height); + + self.$overlay = $("<div>", { class: 'oe_tip_overlay' }); + $('body').append(self.$overlay); + self.$element.addClass('oe_tip_show_element'); + + // fix the stacking context problem + _.each(self.$element.parentsUntil('body'), function(el) { + var zIndex = $(el).css('z-index'); + var opacity = parseFloat($(el).css('opacity')); + + if (/[0-9]+/.test(zIndex) || opacity < 1) { + $(el).addClass('oe_tip_fix_parent'); + } + }); + + self.$element.popover({ + placement: tip.placement, + title: tip.title, + content: tip.description, + html: true, + container: 'body', + }).popover("show"); + + var $cross = $('<button type="button" class="close">×</button>'); + $cross.addClass('oe_tip_close'); + + if (tip.title) { + $('.popover-title').prepend($cross); + } else { + $('.popover-content').prepend($cross); + } + + // consume tip + tip.end_selector = tip.end_selector ? tip.end_selector : tip.highlight_selector; + $(tip.end_selector).one(tip.end_event, function($ev) { + self.end_tip(tip); + def.resolve(); + }); + + // dismiss tip + $cross.on('click', function($ev) { + self.end_tip(tip); + def.resolve(); + }); + self.$overlay.on('click', function($ev) { + self.end_tip(tip); + def.resolve(); + }); + $(document).on('keyup.web_tip', function($ev) { + if ($ev.which === 27) { // esc + self.end_tip(tip); + def.resolve(); + } + }); + } else { + def.reject(); + } + return def; + }, + + end_tip: function(tip) { + var self = this; + var Tips = new instance.web.Model('web.tip'); + self.$element.popover('destroy'); + self.$overlay.remove(); + self.$helper.remove(); + self.$element.removeClass('oe_tip_show_element'); + _.each($('.oe_tip_fix_parent'), function(el) { + $(el).removeClass('oe_tip_fix_parent'); + }); + $(document).off('keyup.web_tip'); + Tips.call('consume', [tip.id], {}); + tip.is_consumed = true; + } + }); + + instance.web.WebClient = instance.web.WebClient.extend({ + show_application: function() { + this._super(); + this.tip_handler = new instance.web.Tip(); + } + }); +})(); |