r84580 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r84579‎ | r84580 | r84581 >
Date:22:52, 22 March 2011
Author:yaron
Status:deferred
Tags:
Comment:
Added handling for "show on select" within multiple-instance templates; simplified some of the other Javascript
Modified paths:
  • /trunk/extensions/SemanticForms/libs/SemanticForms.js (modified) (history)

Diff [purge]

Index: trunk/extensions/SemanticForms/libs/SemanticForms.js
——@@ -308,74 +308,102 @@
309309 */
310310
311311 // Display a div that would otherwise be hidden by "show on select".
312 -function showDiv(div_id) {
313 - jQuery('#' + div_id).find(".hiddenBySF").removeClass('hiddenBySF');
314 - jQuery('#' + div_id).show();
 312+function showDiv(div_id, instanceWrapperDiv) {
 313+ if (instanceWrapperDiv != null) {
 314+ instanceWrapperDiv.find('[origID=' + div_id + ']').find(".hiddenBySF").removeClass('hiddenBySF');
 315+ instanceWrapperDiv.find('[origID=' + div_id + ']').show();
 316+ } else {
 317+ jQuery('#' + div_id).find(".hiddenBySF").removeClass('hiddenBySF');
 318+ jQuery('#' + div_id).show();
 319+ }
315320 }
316321
317322 // Hide a div due to "show on select". The CSS class is there so that SF can
318323 // ignore the div's contents when the form is submitted.
319 -function hideDiv(div_id) {
320 - jQuery('#' + div_id).find("span, div").addClass('hiddenBySF');
321 - jQuery('#' + div_id).hide();
 324+function hideDiv(div_id, instanceWrapperDiv) {
 325+ if (instanceWrapperDiv != null) {
 326+ instanceWrapperDiv.find('[origID=' + div_id + ']').find("span, div").addClass('hiddenBySF');
 327+ instanceWrapperDiv.find('[origID=' + div_id + ']').hide();
 328+ } else {
 329+ jQuery('#' + div_id).find("span, div").addClass('hiddenBySF');
 330+ jQuery('#' + div_id).hide();
 331+ }
322332 }
323333
324334 // Show this div if the current value is any of the relevant options -
325335 // otherwise, hide it.
326 -function showDivIfSelected(options, div_id, inputVal) {
 336+function showDivIfSelected(options, div_id, inputVal, instanceWrapperDiv) {
327337 for (var j in options) {
328338 // If it's a listbox and the user has selected more than one
329339 // value, it'll be an array - handle either case.
330340 if ((jQuery.isArray(inputVal) && jQuery.inArray(options[j], inputVal) >= 0) ||
331341 (!jQuery.isArray(inputVal) && (inputVal == options[j]))) {
332 - showDiv(div_id);
 342+ showDiv(div_id, instanceWrapperDiv);
333343 return;
334344 }
335345 }
336 - hideDiv(div_id);
 346+ hideDiv(div_id, instanceWrapperDiv);
337347 }
338348
339349 // Used for handling 'show on select' for the 'dropdown' and 'listbox' inputs.
340 -jQuery.fn.showIfSelected = function() {
 350+jQuery.fn.showIfSelected = function(partOfMultiple) {
341351 var inputVal = this.val();
342 - var showOnSelectVals = sfgShowOnSelect[this.attr("id")];
 352+ if (partOfMultiple) {
 353+ var showOnSelectVals = sfgShowOnSelect[this.attr("origID")];
 354+ var instanceWrapperDiv = this.closest(".multipleTemplateInstance");
 355+ } else {
 356+ var showOnSelectVals = sfgShowOnSelect[this.attr("id")];
 357+ var instanceWrapperDiv = null;
 358+ }
343359 for (i in showOnSelectVals) {
344360 var options = showOnSelectVals[i][0];
345361 var div_id = showOnSelectVals[i][1];
346 - showDivIfSelected(options, div_id, inputVal);
 362+ showDivIfSelected(options, div_id, inputVal, instanceWrapperDiv);
347363 }
348364 }
349365
350366 // Show this div if any of the relevant selections are checked -
351367 // otherwise, hide it.
352 -jQuery.fn.showDivIfChecked = function(options, div_id) {
 368+jQuery.fn.showDivIfChecked = function(options, div_id, instanceWrapperDiv) {
353369 for (var i in options) {
354370 if (jQuery(this).find('[value="' + options[i] + '"]').is(":checked")) {
355 - showDiv(div_id);
 371+ showDiv(div_id, instanceWrapperDiv);
356372 return;
357373 }
358374 }
359 - hideDiv(div_id);
 375+ hideDiv(div_id, instanceWrapperDiv);
360376 }
361377
362378 // Used for handling 'show on select' for the 'checkboxes' and 'radiobutton'
363379 // inputs.
364 -jQuery.fn.showIfChecked = function() {
365 - var showOnSelectVals = sfgShowOnSelect[this.attr("id")];
 380+jQuery.fn.showIfChecked = function(partOfMultiple) {
 381+ if (partOfMultiple) {
 382+ var showOnSelectVals = sfgShowOnSelect[this.attr("origID")];
 383+ var instanceWrapperDiv = this.closest(".multipleTemplateInstance");
 384+ } else {
 385+ var showOnSelectVals = sfgShowOnSelect[this.attr("id")];
 386+ var instanceWrapperDiv = null;
 387+ }
366388 for (i in showOnSelectVals) {
367389 var options = showOnSelectVals[i][0];
368390 var div_id = showOnSelectVals[i][1];
369 - this.showDivIfChecked(options, div_id);
 391+ this.showDivIfChecked(options, div_id, instanceWrapperDiv);
370392 }
371393 }
372394
373395 // Used for handling 'show on select' for the 'checkbox' input.
374 -jQuery.fn.showIfCheckedCheckbox = function() {
375 - var div_id = sfgShowOnSelect[this.attr("id")];
 396+jQuery.fn.showIfCheckedCheckbox = function(partOfMultiple) {
 397+ if (partOfMultiple) {
 398+ var div_id = sfgShowOnSelect[this.attr("origID")];
 399+ var instanceWrapperDiv = this.closest(".multipleTemplateInstance");
 400+ } else {
 401+ var div_id = sfgShowOnSelect[this.attr("id")];
 402+ var instanceWrapperDiv = null;
 403+ }
376404 if (jQuery(this).is(":checked")) {
377 - showDiv(div_id);
 405+ showDiv(div_id, instanceWrapperDiv);
378406 } else {
379 - hideDiv(div_id);
 407+ hideDiv(div_id, instanceWrapperDiv);
380408 }
381409 }
382410
——@@ -596,8 +624,16 @@
597625 .addClass('multipleTemplate') // backwards compatibility
598626 .removeAttr("id")
599627 .css("display", "block");
 628+
 629+ // Add on a new attribute, "origID", representing the ID of all
 630+ // HTML elements that had an ID; and delete the actual ID attribute
 631+ // of any divs and spans (presumably, these exist only for the
 632+ // sake of "show on select"). We do the deletions because no two
 633+ // elements on the page are allowed to have the same ID.
 634+ new_div.find('[id!=""]').attr('origID', function() { return this.id; });
 635+ new_div.find('div[id!=""], span[id!=""]').removeAttr('id');
600636
601 - // Make internal ID unique for the relevant divs and spans, and replace
 637+ // Make internal ID unique for the relevant form elements, and replace
602638 // the [num] index in the element names with an actual unique index
603639 new_div.find("input, select, textarea").each(
604640 function() {
——@@ -650,9 +686,11 @@
651687 new_div.find('a').attr('href', function() {
652688 return this.href.replace(/input_/g, 'input_' + num_elements + '_');
653689 });
 690+ /*
654691 new_div.find('span').attr('id', function() {
655692 return this.id.replace(/span_/g, 'span_' + num_elements + '_');
656693 });
 694+ */
657695
658696 // Add the new instance
659697 this.closest(".multipleTemplateWrapper")
——@@ -678,30 +716,13 @@
679717 .fadeOut('fast', function() { jQuery(this).remove(); });
680718 });
681719
682 - // Enable autocompletion
683 - new_div.find('.autocompleteInput').attachAutocomplete();
684 -
685 - // Apply the relevant Javascript call for all FancyBox, combobox
686 - // and autogrow instances in this div.
687 - new_div.find('.sfFancyBox').fancybox({
688 - 'width' : '75%',
689 - 'height' : '75%',
690 - 'autoScale' : false,
691 - 'transitionIn' : 'none',
692 - 'transitionOut' : 'none',
693 - 'type' : 'iframe',
694 - 'overlayColor' : '#222',
695 - 'overlayOpacity' : '0.8'
696 - });
697720 // Somewhat of a hack - remove the divs that the combobox() call
698721 // adds on, so that we can just call combobox() again without
699722 // duplicating anything. There's probably a nicer way to do this,
700723 // that doesn't involve removing and then recreating divs.
701724 new_div.find('.sfComboBoxActual').remove();
702 - new_div.find('.sfComboBox').combobox();
703725
704 - // Handle AutoGrow as well.
705 - new_div.find('.autoGrow').autoGrow();
 726+ new_div.initializeJSElements(true);
706727
707728 // Initialize new inputs
708729 new_div.find("input, select, textarea").each(
——@@ -726,40 +747,42 @@
727748
728749 }
729750
730 -var num_elements = 0;
731 -
732 -// Once the document has finished loading, set up everything!
733 -jQuery(document).ready(function() {
734 - jQuery(".sfShowIfSelected").each( function() {
735 - jQuery(this).showIfSelected();
 751+/**
 752+ * Initialize all the JS-using elements contained within this block - can be
 753+ * called for either the entire HTML body, or for a div representing an
 754+ * instance of a multiple-instance template.
 755+ */
 756+jQuery.fn.initializeJSElements = function(partOfMultiple) {
 757+ this.find(".sfShowIfSelected").each( function() {
 758+ jQuery(this).showIfSelected(partOfMultiple);
736759 jQuery(this).change( function() {
737 - jQuery(this).showIfSelected();
 760+ jQuery(this).showIfSelected(partOfMultiple);
738761 });
739762 });
740763
741 - jQuery(".sfShowIfChecked").each( function() {
742 - jQuery(this).showIfChecked();
 764+ this.find(".sfShowIfChecked").each( function() {
 765+ jQuery(this).showIfChecked(partOfMultiple);
743766 jQuery(this).click( function() {
744 - jQuery(this).showIfChecked();
 767+ jQuery(this).showIfChecked(partOfMultiple);
745768 });
746769 });
747770
748 - jQuery(".sfShowIfCheckedCheckbox").each( function() {
749 - jQuery(this).showIfCheckedCheckbox();
 771+ this.find(".sfShowIfCheckedCheckbox").each( function() {
 772+ jQuery(this).showIfCheckedCheckbox(partOfMultiple);
750773 jQuery(this).click( function() {
751 - jQuery(this).showIfCheckedCheckbox();
 774+ jQuery(this).showIfCheckedCheckbox(partOfMultiple);
752775 });
753776 });
754777
755 - jQuery(".remover").click( function() {
 778+ this.find(".remover").click( function() {
756779 // Remove the encompassing div for this instance.
757780 jQuery(this).closest(".multipleTemplateInstance")
758781 .fadeOut('fast', function() { jQuery(this).remove(); });
759782 });
760 - jQuery(".autocompleteInput").attachAutocomplete();
761 - jQuery(".sfComboBox").combobox();
762 - jQuery(".autoGrow").autoGrow();
763 - jQuery(".sfFancyBox").fancybox({
 783+ this.find('.autocompleteInput').attachAutocomplete();
 784+ this.find('.sfComboBox').combobox();
 785+ this.find('.autoGrow').autoGrow();
 786+ this.find('.sfFancyBox').fancybox({
764787 'width' : '75%',
765788 'height' : '75%',
766789 'autoScale' : false,
——@@ -769,7 +792,14 @@
770793 'overlayColor' : '#222',
771794 'overlayOpacity' : '0.8'
772795 });
 796+}
773797
 798+var num_elements = 0;
 799+
 800+// Once the document has finished loading, set up everything!
 801+jQuery(document).ready(function() {
 802+ jQuery('body').initializeJSElements(false);
 803+
774804 jQuery('.multipleTemplateAdder').click( function() { jQuery(this).addInstance(); } );
775805 jQuery('.multipleTemplateList').sortable({
776806 axis: 'y',