https://www.ehess.fr/js/jalios/core/jalios-data-toggle.js

1  
2!function ($) {
3  
4  // Namespace
5  if (!$.jalios) { $.jalios = {}; }
6
7  // ------------------------------------------
8  //  PRIVATE
9  // ------------------------------------------
10
11  // Action regexp
12  var pattern = /(toggle|add|remove|sync|run):([\w-]+)/i;
13  
14  // ------------------------------------------
15  //  PRIVATE: Options
16  // ------------------------------------------
17  
18  function Options(swtch, target, position) {
19    this.target = target;
20    this.swtch  = swtch;
21    this.position = position;
22    this.self   = true;  // False to remove this from query
23    this.clazz  = true;  // True to add a class for given attr
24    this.attr   = false; // String, the target attribute
25    this.previous = '';  // previous value to remove
26    this.sync   = true;  // Sync state to know to add or remove info (for classes)
27
28  }
29  
30  Options.prototype = {
31    
32    constructor: Options,
33    
34    getTarget: function(elm){
35      if (!this.target){
36        return $(elm);
37      }
38
39      var $target = false;
40      if (this.position){
41        $target = $(elm)[this.position].apply($(elm), [this.target]);
42      } else {
43        $target = $(this.target);
44      }
45      
46      // Remove self
47      if (!this.self){ $target = $target.not(elm); }
48
49      return $target;
50    },
51    
52    getAttribute: function(elm, def){ 
53      if (this.attr){
54        return this.attr;
55      }
56
57      var data = $(elm).attr('data-jalios-target-attribute');
58      return data ? data : def;
59    }
60  }
61  
62  // ------------------------------------------
63  //  PRIVATE: Clazz, Boolean, ...
64  // ------------------------------------------
65  
66    // Working on classes
67    var _Clazz = function(elm, clazz, options){
68      
69      var $e = $(elm); 
70      var $target = options.getTarget(elm);
71      
72      if ('add' == options.swtch){
73        $target.toggleClass(clazz, true);
74      } else if ('remove' == options.swtch){
75        $target.toggleClass(clazz, false);
76      } else if ('toggle' == options.swtch){
77        $target.removeClass(options.previous);
78        $target.toggleClass(clazz);
79      } else if ('sync' == options.swtch){
80        $target.removeClass(options.previous);
81        $target.toggleClass(clazz, options.sync);
82      }
83    }
84    
85    // Working on boolean attributes
86    var _Boolean = function(elm, attribute, options){
87    
88      var $target = options.getTarget(elm);
89      var tgtAttr = options.getAttribute(elm, attribute);
90      
91      if ('add' == options.swtch){
92        $target.attr(tgtAttr, true);
93      } else if ('remove' == options.swtch){
94        $target.attr(tgtAttr, false);
95      } else if ('toggle' == options.swtch){
96        $target.attr(tgtAttr, function(index, attr){return !attr; });
97      } else if ('sync' == options.swtch){
98        var srcValue  = $(elm).is(':checked'); // $(elm).is(':'+attribute); because only checked/disabled
99        $target.prop(tgtAttr, srcValue); // use prop: see http://forum.jquery.com/topic/please-explain-attr-vs-prop-change-in-1-6
100      }
101    }
102
103    // Working on String attributes
104    var _String = function(elm, attribute, options){
105      var $elm     = $(elm);
106      var srcValue = $elm.attr(attribute);
107      var tgtAttr  = options.getAttribute(elm, attribute);
108      
109      if (srcValue === undefined){ 
110        srcValue = $elm.find('['+attribute+']:selected').attr(attribute);
111      }
112      
113      if (srcValue === undefined){ 
114        srcValue = $elm.find('['+attribute+']:checked').attr(attribute);
115      }
116      
117      if (srcValue === undefined){
118        srcValue = attribute;
119      }
120      
121      // Custom mapping data-jalios-mapping
122      // var mapping = $elm.attr('data-jalios-mapping');
123      // if (mapping){
124      //   mapping = $.parseJSON(mapping);
125      //   srcValue = mapping[srcValue] || srcValue;
126      // }
127      
128      if ('class' == tgtAttr){
129        _Clazz(elm, srcValue, options);
130        return;
131      }
132
133      // Find the parameter to apply
134      var param = '';
135      if ('add' == options.swtch){
136        param = srcValue;
137      } else if ('toggle' == options.swtch){
138        param = function(index, attr){ return attr == srcValue ? param : srcValue; };
139      }

139 else if ('sync' == options.swtch){
140        param = srcValue;
141      }
142      
143      // Apply jquery function or attr()
144      var $target  = options.getTarget(elm);
145      if ($.fn[tgtAttr]){
146        $.fn[tgtAttr].apply($target, param.split('|'));
147      } else {
148        $.fn['attr'].apply($target, [tgtAttr, param]);
149      }
150    }
151  
152  // ------------------------------------------
153  //  PRIVATE: Register
154  // ------------------------------------------
155  
156  var callback = function(event){
157  
158    var broker = $.jalios.Event.match(event, 'broker')
159    if (!broker){ return; }
160  
161    // No pattern
162    var  regex = broker.type.match(pattern);
163    if (!regex){ return; }
164    
165    // No action
166    var  regex = broker.type.match(pattern);
167    var swtch  = regex[1];
168    var attr   = regex[2];
169    if (!swtch || !attr){ return; }
170    
171    // Prevent propagation
172    event.stopPropagation();
173    
174    // Dispatch to action
175    var elm = broker.source.currentTarget;
176    if (swtch == 'run'){
177      return window[attr](elm);
178    }
179    
180    var options = $.jalios.ToggleManager.getOption(swtch, broker.target, broker.position);
181    $.jalios.ToggleManager.toggle(elm, attr, options);
182  }
183  
184    // Register a logger
185  var register = function(){
186    $(document).on("jalios:broker", callback);
187  }
188  
189  // ------------------------------------------
190  //  PUBLIC
191  // ------------------------------------------
192
193   /**
194    * ToggleManager listen to DataBroker to handle toggle action to perform on target elements (or self).<br/> 
195    * <br/>
196    * 
197    * <h5>Actions: {toggle|add|remove|sync}-{class|disable|checked|...}</h5>
198    * <ul>
199    *   <li>toggle: Toggle Add or Remove the target value</li>
200    *   <li>add:    Add or set to true the target value</li>
201    *   <li>remove: Remove or set to false the target value</li>
202    *   <li>sync:   Set the target value equals to self</li>
203    *   <li>run:    Run given function (bind to window)</li>
204    * </ul>
205    * 
206    * <ul>
207    *   <li>class: a  class name</li>
208    *   <li>data-* element's data attribute</li>
209    *   <li>disabled: disabled/enabled</li>
210    *   <li>checked:  check/uncheck</li>
211    *   <li>title:    element's title</li>
212    *   <li>longdesc: element's longdesc</li>
213    *   <li>value:    element's value</li>
214    * </ul>
215    * 
216    * <h5>Introduce custom field:</h5>
217    * <ul>
218    *   <li>data-jalios-target-attribute The target's field name to update. The name of the field can be a jQuery funcion like 'html', 'css' or 'after' ... </li>
219    * </ul> 
220    * 
221    * 
222    * @namespace $.jalios.ToggleManager
223    * @copyright Jalios SA
224    * 
225    * @see $.jalios.DataBroker
226    * @unittest js/tests/jalios/core/jalios-data-toggle.html
227    */
228
229  
230  // Plugin definition
231  $.jalios.ToggleManager = {
232    
233    getOption: function(swtch, target, position){
234      return new Options(swtch, target, position);
235    },
236    
237    /**
238     * Toggle given attribute of given element with given options.<br/>
239     * Toggle can be performed on self or targets elements.
240     * 
241     * @param elm the source element
242     * @param attr the attribut to switch
243     * @param options option object
244     * 
245     * @example
246     * 
247     * var $elm = $('#link1');
248     * var options = $.jalios.ToggleManager.getOption('toggle', false, false);      
249     * $.jalios.ToggleManager.toggle($elm[0], 'clazz', options);
250     * 
251     * => Toggle state of class 'clazz'
252     * 
253     * @example
254     * 
255     * var $elm = $('#link4A');
256     * var options = $.jalios.ToggleManager.getOption('sync', '#link4B', false);
257     * $.jalios.ToggleManager.toggle($elm[0], 'clazz', options);
258     * 
259     * => Synchronize state of class 'clazz' on #link4A with #link4B
260     * 
261     * @example
262     * 
263     * var $elm = $('#input8');
264     * var options = $.jalios.ToggleManager.getOption('sync', 'DIV.input8Div');
265     * options.attr = 'html';
266     * 
267     * $elm.attr('value','typed values in input8');
268     * $.jalios.ToggleManager.toggle(elm, 'value', options);
269     * 
270     * => Value on #input8 is set to all $('DIV.input8Div').html(...) on focusin/focusout  
271     * 
272     */
273    toggle: function(elm, attr, options){
274      
275      if ($.jalios.ToggleManager[attr]){
276        options.clazz = false;

277        $.jalios.ToggleManager[attr].apply(this, [elm, options]);
278      }
279      else if (attr.indexOf('data-') == 0){
280        options.clazz = false;
281        _String(elm, attr, options);
282      }
283      else if (options.getAttribute(elm, false)){
284        options.clazz = false;
285        _String(elm, attr, options);
286      }
287      
288      if (options.clazz) {
289        const $elm = $(elm);
290        const ariaExpanded = $elm.attr('aria-expanded');
291  
292        if($elm.is('[aria-expanded]')){
293          $elm.attr('aria-expanded', !JSON.parse(ariaExpanded));
294        };
295      
296        options.sync = $elm.hasClass(options.clazz) || $elm.is(':checked');
297        _Clazz(elm, attr, options);
298      }
299    },
300    
301    checked: function(elm, options){
302      options.self = false;
303      options.clazz = true;
304      _Boolean(elm, 'checked', options);
305    },
306    
307    disabled: function(elm, options){
308      options.clazz = true;
309      _Boolean(elm, 'disabled', options);
310    },
311    
312    title: function(elm, options){
313      _String(elm, 'title', options);
314    },
315    
316    longdesc: function(elm, options){
317      _String(elm, 'longdesc', options);
318    },
319    
320    value: function(elm, options){
321      var $elm = $(elm);
322      
323      // Custom use case for SELECT
324      if ($elm.is('SELECT')){
325        $.each(elm.options, function(){  options.previous += ' ' + $(this).attr('value');  });
326      } 
327      else if ($elm.is('INPUT[type=radio]')) {
328        options.previous = $('input[name='+$elm.attr('name')+']', elm.form).map(function() { return $(this).attr('value'); }).get().join(' ');
329      }
330    
331      _String(elm, 'value', options);
332    }
333  };
334  
335  // ------------------------------------------
336  //  DOM READY
337  // ------------------------------------------
338  
339  $(document).ready(function($) {
340    register();
341  });
342  
343}(window.jQuery);