https://www.chateau-clisson.fr/js/jalios/core/jalios-data-broker.js

1
2!function ($) {
3  
4  // ------------------------------------------
5  //  PRIVATE
6  // ------------------------------------------
7   
8  var callback = function(event) {
9
10    var $e    = $(event.currentTarget);
11    var type  = $e.attr('data-jalios-event');
12    
13    // Do not handle right click
14    if (event.type == 'click' && event.which && event.which > 1){ return; }
15    
16    // Bypass dedicated events
17    if (type && type != event.type){ return; }
18    
19    // Bypass not default events
20    if (!type && event.type == 'contextmenu'){ return; }
21    
22    // 
23    var isBtnWidget = $e.is(':button') || $e.is(':submit') || $e.is(':image'); // $e.attr('type') == 'submit' || $e.attr('type') == 'button';
24    if (!type && isBtnWidget && event.type != 'click'){ return; }
25    
26    // Handle default event change or focusIn 
27    var isTextWidget = !($e.attr('type') == 'radio' || $e.attr('type') == 'checkbox' || $e.prop('tagName') == 'SELECT'); 
28    if (!type &&  isTextWidget && event.type == 'change'){ return; }
29    if (!type && !isTextWidget && event.type != 'change'){ return; }
30    
31    // Handle CheckBox click
32    // if ($e.is('INPUT[type=checkbox]')){
33    //   $e.attr('checked',$e.attr('checked'));
34    // }
35
36    // Trigger actions
37    var trapped = $.jalios.DataBroker.trigger($e, event);
38    
39    // Do not prevent event if there is no listeners
40    if (!trapped){ return; }
41    
42    // Prevent click
43    if ($e.is('A, :submit')){ event.preventDefault(); }
44    
45    // Prevent propagation
46    event.stopPropagation();
47    
48    // Prevent other handlers
49    event.stopImmediatePropagation();
50  };
51
52  var trigger = function(action, event, target, position, options) {
53
54    var evt = jQuery.Event("jalios:broker");
55    evt.broker = {};
56    
57    // The performed action
58    evt.broker.type = action;
59    
60    // The source evt
61    evt.broker.source = event;
62    
63    // The CSS Expression (or false)
64    evt.broker.target = target === "this" ? event.currentTarget : target;
65    
66    // The jQuery function to run on CSS expression
67    evt.broker.position = position;
68    
69    // Add custom options
70    evt.broker.options = options || {};
71    
72    // Transfert the skip information to the new evt (see Modal) avoid loop
73    evt.skip = event.skip;
74    
75
76    // Trigger on document
77    $(document).trigger(evt);
78    
79    // Check if evt has been trapped
80    return evt;
81  };
82  
83  var register = function() {
84    
85    // A
86    $(document).on('click', 'A[data-jalios-action]', callback);
87    $(document).on('contextmenu', 'A[data-jalios-action]', callback);
88    
89    // INPUT, BUTTON
90    $(document).on('click', ':button[data-jalios-action], :submit[data-jalios-action], :image[data-jalios-action]', callback);
91    //$(document).on('click', ':submit[data-jalios-action]', callback);
92    //$(document).on('click', ':image[data-jalios-action]' , callback);
93    
94    // DIV (FIXME: Should we authorize this behavior ?)
95    $(document).on('click', '.broker[data-jalios-action]', callback);
96    
97    // INPUT TEXTAREA SELECT
98    // see jQuery doc for change event 
99    $(document).on('focusin focusout change input propertychange', ':input[data-jalios-action]', callback);
100    // INPUT OF DATEPICKER
101    $(document).on('datechange', ':input[data-jalios-event="datechange"]', callback);
102
103  };
104  
105  // ------------------------------------------
106  //  PUBLIC
107  // ------------------------------------------
108  
109 /**
110  * DataBroker forward events on DOM Elements with HTML5 data-* attributes to dedicated listener
111  * 
112  * <h5>Attributes:</h5>
113  * <ul>
114  *   <li>data-jalios-action: (required) a list of action to perform separated by spaces
115  *     <ul>
116  *       <li>modal: open a modal</li>
117  *       <li>popin: trigger a popin</li>
118  *       <li>ajax-refresh: trigger the ajax-refresh</li>
119  *       <li>toggle-*: toggle elements values</li>
120  *       <li>...</li>
121  *     </ul>
122  *   </li>
123  *   <li>data-jalios-target: CSS expression to apply action</li>
124  *   <li>data-jalios-target-position: jQuery function to apply CSS expression (closest, next, prev, ...)</li>
125  *   <li>data-jalios-event: define the not default event to trigger</li>
126  *   <li>data-jalios-options: the option object in JSON format</li>
127  * </ul>
128  * 
129  * <h5>Default Events:</h5>
130  * <ul>
131  *   <li>A: click (or contextmenu)</li>
132  *   <li>INPUT, BUTTON: click</li>
133  *   <li>DIV: click</li>
134  *   <li>INPUT, TEXTAREA: focusin focusout (or change)</li>
135  *   <li>INPUT[checkbox,radio] SELECT change (or focusin focusout)</li>
136  * </ul>
137  * 
138  * Modules must listen to jalios:broker Events on document. Events provides following hints:
139  * <ul>
140  *   <li>event.broker.type:     the action</li>
141  *   <li>event.broker.target:   the css expression</li>
142  *   <li>event.broker.source:   the source event (be carefull of memory leaks vs element references)</li>
143  *   <li>event.broker.position: the jQuery function name</li>
144  * </ul>
145  * 
146  * <p>Modules must call "event.stopPropagation()" to trap the event and stop bubbling</p>
147  * <p>Modules can trigger (click) event with attribute 'skip' to forward an event. The function <code>$.jalios.DOM.follow()</code> trigger a click on given element. It is called by Modal module to follow actions after a prompt.</p>
148  * 
149  * <h5>RFE/FIXME</h5>
150  * <ul>
151  *   <li>Add Data-Broker to handle all popup, modal,... (fron input, links, ...)</li>
152  * </ul>
153  * 
154  * @fires jalios:broker
155  * @namespace $.jalios.DataBroker
156  * @copyright Jalios SA
157  * 
158  * @see $.jalios.ToggleManager
159  * @see $.jalios.AjaxRefresh
160  * 
161  * 
162  * @example
163  * 
164  * &lt;a href="..." data-jalios-action="anything"&gt;Click me&lt;/a&gt;
165  * 
166  * var listener = function(event){
167  *   ...
168  *   var broker = event.broker;
169  *   alert(broker.type);   // ajax-refresh, toggle-clazz, anything
170  *   event.stopPropagation() // stop propagation on other handlers
171  *   ...
172  * }
173  * $(document).on("jalios:broker", listener);
174  * 
175  * 
176  * @unittest js/tests/jalios/core/jalios-data-broker.html
177  */
178  
179    // Namespace
180  if (!$.jalios) { $.jalios = {}; }
181  
182  $.jalios.DataBroker = {
183  
184    /**
185     * Explicit trigger of a DataBroker Event for given element.
186     * Usefull for jalios custom event on document
187     * 
188     * @param $e the working element
189     * @param event the initial event 
190     */
191    trigger: function($e, event, options) {
192      // Decode event's action
193      var actions  = $e.attr('data-jalios-action');
194      var target   = $e.attr('data-jalios-target');
195      var position = $e.attr('data-jalios-target-position');
196      var opt      = $e.attr('data-jalios-options');
197      
198      if (!actions){ return false; }
199      actions = actions.replace(/[\s]+/g, ' ');
200      
201      if (opt){
202        try { opt = $.parseJSON(opt); } catch(ex){ 
203          try { opt = $.jalios.Http.toQueryParams(opt); } catch(ex) { /* empty */ }  
204        }
205        options = $.extend(true, options || {}, opt);
206      }
207      
208      // Kludge helper
209      target   = target   ? target.split('|')   : false;

210      position = position ? position.split('|') : false;
211      
212      // Trigger: FIXME synchronous vs XHR ?
213      var trapped = false;
214      var bubble  = false;
215      $.each(actions.split(' '),function(idx, action){
216        if (bubble){ return; } // bubbling has been prevent to other actions
217        try {
218          var t     = !target   ? false : target.length   == 1 ? target[0]   : (target.length > idx ? target[idx]   : '');
219          var p     = !position ? false : position.length == 1 ? position[0] : (target.length > idx ? position[idx] : '');
220          var evt   = trigger(action, event, t, p, options);
221          bubble    = bubble || evt.isImmediatePropagationStopped();
222          trapped   = bubble || trapped || evt.isPropagationStopped();
223        } catch (ex){
224          $.console.log(ex);
225          trapped = true;
226        }
227      });
228      
229      return trapped;
230    }
231  };
232  
233  
234  // ------------------------------------------
235  //  DOM Ready
236  // ------------------------------------------
237  
238  
239  // Plugin initialization on DOM ready
240  $(document).ready(function($) {
241    register();
242  });
243  
244}(window.jQuery);