JAVASCRIPT   26

MouseEvents

Guest on 4th June 2022 01:09:16 AM

  1. import {_getClassName, locate} from "../webix/html";
  2. import state from "./state";
  3. import UIManager from "../core/uimanager";
  4. import {extend, isUndefined, bind, toFunctor} from "../webix/helpers";
  5. import env from "../webix/env";
  6. import {_event} from "../webix/htmlevents";
  7.  
  8.  
  9. const MouseEvents={
  10.         $init: function(config){
  11.                 config = config || {};
  12.  
  13.                 this._clickstamp = 0;
  14.                 this._dbl_sensetive = 300;
  15.                 this._item_clicked = null;
  16.  
  17.                 this._mouse_action_extend(config.onClick, "on_click");
  18.                 this._mouse_action_extend(config.onContext, "on_context");
  19.                 this._mouse_action_extend(config.onDblClick, "on_dblclick");
  20.                 this._mouse_action_extend(config.onMouseMove, "on_mouse_move");
  21.  
  22.                 //attach dom events if related collection is defined
  23.                 if (this.on_click){
  24.                         _event(this._contentobj,"click",this._onClick,{bind:this});
  25.                         if (env.isIE8 && this.on_dblclick)
  26.                                 _event(this._contentobj, "dblclick", this._onDblClick, {bind:this});
  27.                 }
  28.                 if (this.on_context)
  29.                         _event(this._contentobj,"contextmenu",this._onContext,{bind:this});
  30.  
  31.                 if (this.on_mouse_move)
  32.                         this._enable_mouse_move();
  33.         },
  34.  
  35.         _enable_mouse_move:function(){
  36.                 if (!this._mouse_move_enabled){
  37.                         this.on_mouse_move = this.on_mouse_move || {};
  38.                         _event(this._contentobj,"mousemove",this._onMouse,{bind:this});
  39.                         _event(this._contentobj,(env.isIE?"mouseleave":"mouseout"),this._onMouse,{bind:this});
  40.                         this._mouse_move_enabled = 1;
  41.                         this.attachEvent("onDestruct", function(){
  42.                                 if (this._mouse_move_timer)
  43.                                         window.clearTimeout(this._mouse_move_timer);
  44.                         });
  45.                 }
  46.  
  47.         },
  48.  
  49.         _mouse_action_extend:function(config, key){
  50.                 if (config){
  51.                         var now = this[key];
  52.                         var step = now ? extend({}, now) : {};
  53.                         this[key] = extend(step, config);
  54.                 }
  55.         },
  56.  
  57.         //inner onclick object handler
  58.         _onClick: function(e){
  59.                 if(!this.isEnabled())
  60.                         return false;
  61.  
  62.                 UIManager._focus_action(this);
  63.                 if(this.on_dblclick){
  64.                         // emulates double click
  65.                         var stamp = (new Date()).valueOf();
  66.  
  67.                         if (stamp - this._clickstamp <= this._dbl_sensetive && this.locate){
  68.                                 var item = this.locate(e);
  69.                                 if (""+item == ""+this._item_clicked) {
  70.                                         this._clickstamp = 0;
  71.                                         return this._onDblClick(e);
  72.                                 }
  73.                         }
  74.                         this._clickstamp = stamp;
  75.                 }
  76.  
  77.                 var result = this._mouseEvent(e,this.on_click,"ItemClick");
  78.                 return result;
  79.         },
  80.         //inner ondblclick object handler
  81.         _onDblClick: function(e) {
  82.                 return this._mouseEvent(e,this.on_dblclick,"ItemDblClick");
  83.         },
  84.         //process oncontextmenu events
  85.         _onContext: function(e) {
  86.                 this._mouseEvent(e, this.on_context, "BeforeContextMenu", "AfterContextMenu");
  87.         },
  88.         /*
  89.                 event throttler - ignore events which occurs too fast
  90.                 during mouse moving there are a lot of event firing - we need no so much
  91.                 also, mouseout can fire when moving inside the same html container - we need to ignore such fake calls
  92.         */
  93.         _onMouse:function(e){
  94.                 if (this.$destructed) return;
  95.                 if (document.createEventObject) //make a copy of event, will be used in timed call
  96.                         e = document.createEventObject(event);
  97.                 else if (!state.$testmode && !isUndefined(e.movementY) && !e.movementY && !e.movementX)
  98.                         return; //logitech mouse driver can send false signals in Chrome
  99.                        
  100.                        
  101.                        
  102.                        
  103.                 if (this._mouse_move_timer)     //clear old event timer
  104.                         window.clearTimeout(this._mouse_move_timer);
  105.                                
  106.                 //this event just inform about moving operation, we don't care about details
  107.                 this.callEvent("onMouseMoving",[e]);
  108.                 //set new event timer
  109.                 this._mouse_move_timer = window.setTimeout(bind(function(){
  110.                         //called only when we have at least 100ms after previous event
  111.                         if (e.type == "mousemove")
  112.                                 this._onMouseMove(e);
  113.                         else
  114.                                 this._onMouseOut(e);
  115.                 },this),(this._settings.mouseEventDelay||500));
  116.         },
  117.  
  118.         //inner mousemove object handler
  119.         _onMouseMove: function(e) {
  120.                 if (!this._mouseEvent(e,this.on_mouse_move,"MouseMove"))
  121.                         this.callEvent("onMouseOut",[e||event]);
  122.         },
  123.         //inner mouseout object handler
  124.         _onMouseOut: function(e) {
  125.                 this.callEvent("onMouseOut",[e||event]);
  126.         },
  127.         //common logic for click and dbl-click processing
  128.         _mouseEvent:function(e,hash,name, pair){
  129.                 e=e||event;
  130.  
  131.                 if (e.processed || !this._viewobj) return;
  132.                 e.processed = true;
  133.  
  134.                 var trg=e.target||e.srcElement;
  135.  
  136.                 //IE8 can't modify event object
  137.                 //so we need to stop event bubbling to prevent double processing
  138.                 if (env.isIE8){
  139.                         var vid = this._settings.id;
  140.                         var wid = trg.w_view;
  141.  
  142.                         if (!wid) trg.w_view = vid; else if (wid !== vid) return;
  143.                 }
  144.  
  145.                 var css = "";
  146.                 var id = null;
  147.                 var found = false;
  148.                 //loop through all parents
  149.                 //we need to check for this._viewobj as some handler can destroy the view
  150.                 while (trg && trg.parentNode && this._viewobj && trg != this._viewobj.parentNode){
  151.                         if (!found && trg.getAttribute){                                                                                                        //if element with ID mark is not detected yet
  152.                                 id = trg.getAttribute(this._id);                                                        //check id of current one
  153.                                 if (id){
  154.                                         this._item_clicked = id;
  155.                                         if (this.callEvent){
  156.                                                 //it will be triggered only for first detected ID, in case of nested elements
  157.                                                 if (!this.callEvent("on"+name,[id,e,trg])) return;
  158.                                                 if (pair) this.callEvent("on"+pair,[id,e,trg]);
  159.                                         }
  160.                                         //set found flag
  161.                                         found = true;
  162.                                 }
  163.                         }
  164.                         css=_getClassName(trg);
  165.                         if (css){               //check if pre-defined reaction for element's css name exists
  166.                                 css = css.toString().split(" ");
  167.                                 for (var i=0; i<css.length; i++){
  168.                                         if (hash[css[i]]){
  169.                                                 var functor = toFunctor(hash[css[i]], this.$scope);
  170.                                                 var res =  functor.call(this,e,id||locate(e, this._id),trg);
  171.                                                 if(res === false)
  172.                                                         return found;
  173.                                         }
  174.                                 }
  175.                         }
  176.                         trg=trg.parentNode;
  177.                 }
  178.                        
  179.                 return found;   //returns true if item was located and event was triggered
  180.         }
  181. };
  182.  
  183. export default MouseEvents;

Raw Paste


Login or Register to edit or fork this paste. It's free.