https://portail.gim-idf.fr/jcms10/js/jalios/core/jalios-treeview.js

1!function ($) {
2  
3  var register = function() {
4    
5    // Upgrade
6    $.jalios.ui.TreeView.upgrade();
7    
8    // Setup autocomplete
9    autocomplete($(document));
10    
11    // Register to Ajax-Refresh
12    $(document).on('jalios:refresh', function(event) {
13      
14      var refresh = $.jalios.Event.match(event, 'refresh', 'after');
15      if (!refresh){ return; }
16      if (!refresh.target){ return; }
17      
18      refresh.target.each(function() {
19        $.jalios.ui.TreeView.upgrade(this);
20      });
21      
22      autocomplete(refresh.target);
23    });
24    
25    // Populate Treeview after autocomplete
26    $(document).on("jalios:autocomplete", populateTreeView);
27    
28    // Register click event
29    $(document).on('click', 'UL.treeview .icon-treeview', toggle);
30    
31    $(document).on('click', ".js-unselect-radio", function(event) {
32      let $radioInput = $(event.currentTarget);
33      if($radioInput.attr('previousValue') == 'true'){
34        $radioInput.prop('checked', false)
35      } else {
36        $radioInput.attr('previousValue', false);
37      }
38  
39      $radioInput.closest(".treeview").find(".js-unselect-radio").each(function(idx, element) {
40        $(element).attr('previousValue', false);
41      });
42      
43      $radioInput.attr('previousValue', $radioInput.is(":checked"));
44    });
45    
46    $(document).on('change', ".js-unselect-radio", function(event) {
47      let $radioInput = $(event.currentTarget);
48      $radioInput.attr('previousValue', $radioInput.is(":checked"));
49    });
50    
51    // Register mouseover
52    $(document).on('mouseover', 'UL.treeview.dragdrop .treeview-item-icon', drag);
53  }
54
55  var autocomplete = function($e) {
56  
57    // Init Autocomplete on TreeCat
58    $e.find('UL.treeview.autocomplete').each(function() {
59      var $this = $(this);
60      if($this.children('LI').exists()) {
61        var url = 'jcore/autocomplete/accategory.jsp?acadd=false';
62        url += $this.hasClass('filter-manage') ? '&filter=MANAGE'
63               : $this.hasClass('filter-use') ? '&filter=USE'
64               : $this.hasClass('filter-read') ? '&filter=READ'
65               : '';
66        url += $this.hasClass('selectable') ? '&selectable=true' : '';
67        url += "&rootCids="+$this.matchClass(/ID_(\w+)/g).join('&rootCids=');
68        url += "&rm="+$this.matchClass(/RM_(\w+)/g).join('&rm=');
69        
70        var clazz = 'form-control typeahead treecatcomplete hidden-print' + ($this.hasClass('hide') ? ' hide' : '');
71        var ph = $this.data("jalios-categorytree-search-input-context") && $this.data("jalios-categorytree-search-input-context").placeholder ? $this.data("jalios-categorytree-search-input-context").placeholder : I18N.glp('info.msg.autocomplete');
72        var ariaLabel = $this.data("jalios-categorytree-search-input-context") && $this.data("jalios-categorytree-search-input-context").ariaLabel ? $this.data("jalios-categorytree-search-input-context").ariaLabel : I18N.glp('info.msg.autocomplete.search-category');
73        var id = $this.attr('id');
74        
75        $this.before('<input type="text" class="' + clazz + '" data-jalios-treecat="' + id + '" aria-label="'+ ariaLabel +'" data-jalios-ajax-refresh-url="' + url + '" placeholder="' + ph + '"/>');
76      } else {
77        var clazz = 'alert alert-info' + ($this.hasClass('hide') ? ' hide' : '');
78        $this.before('<div class="' + clazz + '"><p>' + I18N.glp('treecat.no-item') + '</p></div>');
79      }
80    });
81    
82    $(document).on('keydown', '.treecatcomplete', function(e) {
83      // Prevent to submit the form when we click on the ENTER key on the empty input
84      if (e.which == 13 && $(this).val().trim() === '') {
85        e.preventDefault();
86        return false;
87      }
88    });
89  };
90
91  var populateTreeView = function(event) {
92    
93    var typeahead = jQuery.jalios.Event.match(event, 'autocomplete');
94    var treecat = typeahead.$element.attr('data-jalios-treecat');
95    if (!treecat){ return; }
96    
97    // Clear input
98    typeahead.$element.val('');
99    
100    // Refresh treecat with given value
101    var value = typeahead.$menu.find('.active').attr('data-value');
102    
103    var $ul = typeahead.$element.next('UL.treeview');
104    
105    // Checked
106    var checked = [];
107    if($ul.hasClass('treeview-checkbox')) {
108      $ul.find('INPUT[type=checkbox]:checked').each(function() {
109        checked.push($(this).val());
110      });
111    }
112    if ($ul.hasClass('treeinput')) {
113      checked.push(value);
114    }
115    
116    // Refresh
117    var options = { params : { }};
118    options.url = $ul.attr('data-jalios-ajax-refresh-url');
119
120    options.params.treeHint = $ul.attr('data-jalios-treeview-hint');
121    options.target = $ul;
122    options.scroll = false;
123    
124    var $ahref = $ul.find('A[data-jalios-id=' + value + '].treeview-name');
125    if ($ahref.exists()) {

126      // Do not follow the link of the node if it's already selected/highlighted to not unselected this category
127      if(!$ahref.hasClass('treeview-hl')) {
128        // Add a callback to follow the link of the node after the tree is refreshed
129        options.callback = function() {
130          if ($ul.hasClass('treeinput')){ return; }
131          $.jalios.DOM.follow($ahref);
132        }
133      }
134    } else {
135      options.callback = function(){
136        if ($ul.hasClass('treeinput')){ return; }
137        var $ahref = $ul.find('A[data-jalios-id='+value+'].treeview-name');
138        $.jalios.DOM.follow($ahref);
139      }
140    }
141    
142
143    options.params.treeOpened  = checked.length > 0 ? checked : value;
144    options.params.treeChecked = checked;
145    options.params.treeHighlighted = checked;
146    options.nohistory = true;
147    
148    $ul.refresh(options);
149  }
150
151  var drag = function(event) {
152   
153    var $e = $(event.currentTarget);
154    
155    $e.closest('UL[data-jalios-ajax-refresh-url].treeview-root.dragdrop').find('LI').each(function() {
156      $(this).droppable({
157        tolerance: 'pointer',
158        greedy: true,
159        drop: drop,
160        accept: 'LI',
161        hoverClass: 'sortable-active' // same as jalios-sortable.js
162      });
163    });
164    
165    $e.closest('LI').draggable({
166      axis: 'y',
167      cursor: 'move',
168      revert: 'invalid',
169      handle: '.treeview-item-icon'
170    });
171  }
172  
173  var drop = function(event, ui) {
174    var $drag    = $(ui.helper);
175    var $drop    = $(this);
176    
177    // Build options with drag/drop info
178    var options = {
179      params: {
180        drag : $drag.getJcmsId(),
181        drop : $drop.getJcmsId()
182      }
183    }
184    
185    // Retrieve wrapper
186    var $ul = $drop.closest('UL[data-jalios-ajax-refresh-url].treeview');
187    if (!$ul.exists()){ return; }
188    
189    // Checked
190    var checked = [];
191    $ul.find('INPUT[type=checkbox]:checked').each(function() {
192      checked.push($(this).val());
193    });
194    
195    // Refresh
196    options.url = $ul.attr('data-jalios-ajax-refresh-url');
197    options.params.treeOpened = $drop.getJcmsId();
198    options.params.treeHighlighted = $drop.getJcmsId();
199    options.params.treeHint = $ul.attr('data-jalios-treeview-hint');
200    options.target = $ul;
201    options.scroll = false;
202    options.params.treeChecked = checked;
203    
204    $ul.refresh(options);
205  }
206  
207  /**
208   * Upgrade LI with:
209   * - .icon-treeview
210   * - Convenient state open/close
211   * - Input vs Label
212   */
213  var upgrade = function(context) {
214    
215    var $lookup = $('.treeview', context || document);
216    if (context && $(context).is('.treeview')) {
217      $lookup = $lookup.add(context);
218    }
219    
220    var now = new Date().getTime();
221    $lookup.each(function() {
222      $(this).children('LI').each(function() {
223
224        var $li = $(this);
225
226        // Set open/close LI status
227        if (!$li.hasClass('treeview-open') && !$li.hasClass('treeview-close')) {
228          var $ul = $li.children('UL.treeview');
229          if ($ul.exists()) {
230            if ($ul.children('LI').html()) {
231              $li.addClass('treeview-open');
232            } else {
233              $li.addClass('treeview-close');
234            }
235          }
236        }
237
238        // Append trigger open/close
239        if (!$li.hasClass('treecat-msg') && !$li.children(':first-child').is('.icon-treeview')) {
240          $li.prepend('<span class="icon-treeview"></span> ');
241        }
242        
243        // Bind checkbox and labels
244        $li.children('INPUT').attr('id', function(idx, attr) {
245          if (attr) return attr;
246          attr = "treev_"+(now++);
247          $(this).siblings('LABEL').attr('for', attr);
248          return attr;
249        });
250      });
251    });
252  }
253  
254  /**
255   * Toggle open/close of LI
256   */
257  var toggle = function(event) {
258    var $li = $(this).parent();
259    if ($li.hasClass('treeview-open')) {
260      $li.removeClass('treeview-open').addClass('treeview-close');
261    } else if ($li.hasClass('treeview-close')) {
262      $li.removeClass('treeview-close').addClass('treeview-open');
263      refresh($li);
264    }
265  }
266  
267  var refresh = function($li, openIds) {
268    var $target = $li.is('UL') ? $li :  $li.find('> UL');
269    
270    // Build options
271    var options = {
272      url: 'jcore/treeview/treeview.jsp',
273      target: $target,
274      params: { treeId : $li.getJcmsId(true), treeChecked : [], treeHighlighted : [], treeOpened : [], treeCollection : [] },
275      nohistory: true
276    };
277    
278    // Add checked
279    $li.find('INPUT[type=checkbox]:checked').each(function() {
280      options.params.treeChecked.push($(this).val());
281      options.params.treeHighlighted.push($(this).val());
282    });

283    
284    var $wrapper = options.target.closest('UL[data-jalios-ajax-refresh-url].treeview');
285    if ($wrapper.exists()) {
286      options.url = $wrapper.attr('data-jalios-ajax-refresh-url');
287      options.params.treeHint = $wrapper.attr('data-jalios-treeview-hint');
288    }
289    // JCMS-9415: Propagate original queryString / parameters
290    if ($wrapper.length) {
291      let $treeRoot = $wrapper.closest('UL.treeview-root');
292      if ($treeRoot.length) {
293        // Retrieve params as JSON string on treeview's UL main wrapper
294        let originalQueryStringJSON = $treeRoot.attr('data-jalios-treeview-original-qs');
295        if (originalQueryStringJSON) {
296          let originalParams = JSON.parse(originalQueryStringJSON);
297          if (originalParams) {
298            // Add/restore each parameter for refresh
299            for (let key in originalParams) {
300              if (Object.prototype.hasOwnProperty.call(originalParams, key)) {
301                options.params[key] = originalParams[key];
302              }
303            }
304          }
305        }
306      }
307    }
308
309    if (openIds) {
310      if($.isArray(openIds)) {
311        $.merge(options.params.treeOpened, openIds);
312        $.merge(options.params.treeCollection, openIds);
313      } else {
314        options.params.treeOpened.push(openIds);
315        options.params.treeCollection.push(openIds);        
316      }
317    }
318    
319    // Refresh for Treeid
320    if (options.params.treeId) {
321      $li.refresh(options);
322    }
323    
324    // Refresh if there is one parent
325    else if (options.url /*&& options.url.indexOf('treeId') > 0*/) {
326      $li.refresh(options);
327    }
328    
329    // Refresh browser
330    else {
331      $.jalios.Browser.reload();
332    }
333  };
334  
335  var refreshNode = function(options) {
336    let $refreshingElement = $('LI[data-jalios-id="' + options.nodeId + '"]');
337    let $treeview;
338    if (options.refreshRoot === "true") {
339      // Refresh whole treeview
340      $treeview = $refreshingElement.closest('UL[data-jalios-ajax-refresh-url].treeview-root');
341    } else {
342      // Refresh parent treeview
343      $treeview = $refreshingElement.closest('UL[data-jalios-ajax-refresh-url].treeview');
344    }
345    // Simple refresh
346    jQuery.jalios.ui.TreeView.refresh($treeview, false);
347    jQuery.jalios.ui.CtxMenu.hide();
348  }
349  
350  // ------------------------------------------
351  //  PUBLIC
352  // ------------------------------------------
353  
354  // Namespace
355  if (!$.jalios)      { $.jalios    = {}; }
356  if (!$.jalios.ui)   { $.jalios.ui = {}; }
357  
358  $.jalios.ui.TreeView = {
359    'upgrade': upgrade,
360    'refresh': refresh,
361    'refreshNode': refreshNode
362  }
363  
364  // ------------------------------------------
365  //  READY
366  // ------------------------------------------
367  
368  // Plugin initialization on DOM ready
369  $(document).ready(function($) {
370    register();
371  });
372  
373}(window.jQuery);
374
375