https://www.once.es/++webresource++ea766885-1e74-5cf0-9abc-e0d5fb2…one.formwidget.masterselect/masterselect.js

1(function($) {
2  var cache = {}; // Cache AJAX results
3  var masterVocabularyQueue = {};
4
5  function sprintf(format, etc) {
6    var arg = arguments;
7    var i = 1;
8    return format.replace(/%((%)|s)/g, function(m) {
9      return m[2] || arg[i++];
10    });
11  }
12
13  function populateSelectOptions(items, selectedValue) {
14    var options = '';
15    var selected = '';
16    for (var i = 0; i < items.length; i++) {
17      selected = items[i].selected ? ' selected="selected"' : '';
18      if (selectedValue && !selected) {
19        selected = items[i].value === selectedValue
20          ? ' selected="selected"'
21          : '';
22      }
23      options += sprintf(
24        '<option id="%s" value="%s"%s>%s</option>',
25        items[i].id,
26        items[i].value,
27        selected,
28        items[i].content
29      );
30    }
31    return options;
32  }
33  // AJAX vocabulary handling
34  function updateSelect(slaveID, data) {
35    var selectedValue = $(slaveID).data('selected-value');
36    $(slaveID)
37      .closest('select')
38      .empty()
39      .html(
40        // Replace all options with new ones
41        populateSelectOptions(data.items, selectedValue)
42      )
43      .end()
44      .change()
45      .attr('disabled', false)
46      .trigger('liszt:updated');
47    // trigger liszt:updated for old chosen version in
48    // collective.z3cform.chosen
49  }
50  function handleMasterVocabularyChange(event) {
51    var value = $(this).attr('type') == 'checkbox'
52      ? '' + this.checked
53      : $(this).val();
54    var slaveID = event.data.slaveID;
55    var name = event.data.name;
56    var masterID = event.data.masterID;
57    var cachekey = [this.id, slaveID, value].join(':');
58
59    // Store current slave value, to be re-selected if needed on page reload
60    $(slaveID).data('selected-value', $(slaveID).val());
61    // Remove options starting at empty_length (so users won't see old
62    // values and disable field
63    $(slaveID).find('option').slice(event.data.empty_length).remove();
64    $(slaveID).change();
65    $(slaveID).closest(':input').attr('disabled', true);
66
67    // NEW:
68    // Need to kill child requests as well
69    // Its here to be after the 'change' trigger
70    if (masterVocabularyQueue[event.data.slaveID]) {
71      masterVocabularyQueue[event.data.slaveID].abort();
72      delete masterVocabularyQueue[event.data.slaveID];
73    }
74
75    // Don't initate ajax request if we match a selected field value
76    // to a value in prevent_ajax_vlaues
77    var prevent_ajax_values = event.data.prevent_ajax_values != undefined
78      ? event.data.prevent_ajax_values
79      : [];
80    if (typeof prevent_ajax_values == 'string')
81      prevent_ajax_values = [prevent_ajax_values];
82    // if length of values is 0; allow any value to match (wildcard)
83    var val = $(this).attr('type') == 'checkbox' ? this.checked : $(this).val();
84    val = prevent_ajax_values.length == 0
85      ? false
86      : $.inArray(val, prevent_ajax_values) > -1;
87    if (val) return;
88
89    // Abort and remove any active requests, since only want the latest
90    //var queuekey = this.id;
91    var queuekey = event.data.masterID;
92    if (masterVocabularyQueue[queuekey]) {
93      masterVocabularyQueue[queuekey].abort();
94      delete masterVocabularyQueue[queuekey];
95    }
96    if (value != null) {
97      if (cache[cachekey] == undefined) {
98        masterVocabularyQueue[queuekey] = $.getJSON(
99          event.data.url,
100          {
101            field: this.id,
102            name: name,
103            slaveID: slaveID,
104            masterID: masterID,
105            value: value
106          },
107          function(data) {
108            cache[cachekey] = data;
109            updateSelect(slaveID, data);
110          }
111        );
112      } else updateSelect(slaveID, cache[cachekey]);
113    }
114  }
115  $.fn.bindMasterSlaveVocabulary = function(data) {
116    var trigger = data.initial_trigger ? data.initial_trigger : false;
117    var masterType = data.masterType;
118    // NEW:
119    // Disable slave select if empty
120    // Only if it's a select field??
121    var emptyLength = data.empty_length ? data.empty_length : 0;
122    var slaveLength = $(data.slaveID)[0].length;
123    if (slaveLength <= emptyLength) $(data.slaveID).attr('disabled', true);
124
125    if (masterType === 'ContactChoice') {
126      // collective.contact.widget
127      $(this).on('change', 'input', data, handleMasterVocabularyChange);
128      if (trigger) {
129        $(this).find('input').first().trigger('change');
130      }
131    } else {
132      $(this).on('change', data, handleMasterVocabularyChange);
133      if (trigger) {
134        $(this).trigger('change');
135      }
136    }
137  };
138
139  // AJAX value handling
140  function updateAttr(slaveID, data) {
141    $(slaveID).attr(data.attr, data.value).change();
142  }
143  function handleMasterAttrChange(event) {
144    var value = $(this).attr('type') == 'checkbox'
145      ? '' + this.checked
146      : $(this).val();
147    var slaveID = event.data.slaveID;
148    var name = event.data.name;
149    var masterID = event.data.masterID;
150    var cachekey = [this.id, slaveID, value].join(':');
151    if (cache[cachekey] == undefined)
152      $.getJSON(
153        event.data.url,
154        {
155          field: this.id,
156          slaveID: slaveID,
157          name: name,
158          masterID: masterID,
159          value: value
160        },
161        function(data) {
162          cache[cachekey] = data;
163          updateAttr(slaveID, data);
164        }
165      );
166    else updateAttr(slaveID, cache[cachekey]);
167  }
168  $.fn.bindMasterSlaveAttr = function(data) {
169    var trigger = data.initial_trigger ? data.initial_trigger : true;
170
171    $(this).on('change', data, handleMasterAttrChange);
172    if (trigger) $(this).trigger('change');
173  };
174
175  // AJAX value handling
176  function updateValue(data) {
177    var slaveID = event.data.form.find(event.data.slaveID);
178    slaveID.val(data).change();
179    if (
180      slaveID.is('.kupu-editor-textarea') // update kupu editor too
181    )
182      slaveID.siblings('iframe:first').contents().find('body').html(data);
183  }
184  function handleMasterValueChange(event) {
185    var value = $(this).attr('type') == 'checkbox'
186      ? '' + this.checked
187      : $(this).val();
188    var slaveID = event.data.slaveID;
189    var name = event.data.name;
190    var masterID = event.data.masterID;
191    var cachekey = [this.id, slaveID, value].join(':');
192    if (cache[cachekey] == undefined)
193      $.getJSON(
194        event.data.url,
195        {
196          field: this.id,
197          slaveID: slaveID,
198          name: name,
199          masterID: masterID,
200          value: value
201        },
202        function(data) {
203          cache[cachekey] = data;

204          updateValue(data);
205        }
206      );
207    else updateValue(cache[cachekey]);
208  }
209  $.fn.bindMasterSlaveValue = function(data) {
210    var trigger = data.initial_trigger ? data.initial_trigger : true;
211    data.form = $(this).parents('form').first();
212    $(this).on('change', data, handleMasterValueChange);
213    if (trigger) $(this).trigger('change');
214  };
215
216  // Field status/visibility toggles
217  function handleMasterToggle(event) {
218    var action = event.data.action;
219    var slaveID = event.data.form.find(event.data.slaveID);
220
221    // toggle not really a toggle; only executes the action when
222    // the selected item is choosen, or every time if ()
223    var val = $(this).attr('type') == 'checkbox' ? this.checked : $(this).val();
224
225    // if length of values is 0; allow any value to match (wildcard)
226    val = event.data.values.length == 0
227      ? true
228      : $.inArray(val, event.data.values) > -1;
229
230    if ($.inArray(action, ['hide', 'disable']) > -1) {
231      val = !val;
232      action = action == 'hide' ? 'show' : 'enable';
233    }
234    // show toggle
235    if (action == 'show') {
236      var selector = event.data.siblings ? slaveID.parent() : slaveID;
237      var css_action = val ? 'show' : 'hide';
238      var css_option = event.data.initial_trigger ? null : 'fast';
239      selector.each(function() {
240        $(this)[css_action](css_option);
241      });
242      //enable toggle
243    } else slaveID.closest(':input').attr('disabled', val ? false : true);
244  }
245  $.fn.bindMasterSlaveToggle = function(data) {
246    var master = $(this);
247    data.form = master.parents('form').first();
248    data.initial_trigger = data.initial_trigger ? data.initial_trigger : true;
249    master.on('change', data, handleMasterToggle);
250    if (data.initial_trigger) {
251      var fieldset_id = master.closest('fieldset').attr('id');
252      if (fieldset_id === undefined || $(fieldset_id).is(':visible')) {
253        master.change();
254      } else {
255        fieldset_id = '#' + fieldset_id;
256        var props = {
257          position: 'absolute',
258          visibility: 'hidden',
259        };
260        // backup old properties
261        var old_props = {};
262        for (var name in props) {
263          old_props[name] = $(fieldset_id).css(name);
264        }
265        // change display and execute change on master
266        $(fieldset_id).css(props);
267        master.change();
268        // set back old properties
269        $(fieldset_id).css(old_props);
270      }
271      data.initial_trigger = false;
272    }
273  };
274})(jQuery);