r101178 MediaWiki - Code Review archive

Repository:MediaWiki
Revision:< r101177‎ | r101178 | r101179 >
Date:19:24, 28 October 2011
Author:foxtrott
Status:deferred
Tags:
Comment:
remove last occurences of origID; debugging "show on select"; eye-candy for "show on select" and multiple-instance forms
Modified paths:
  • /trunk/extensions/SemanticForms/libs/SemanticForms.js (modified) (history)

Diff [purge]

Index: trunk/extensions/SemanticForms/libs/SemanticForms.js
——@@ -308,14 +308,24 @@
309309 */
310310
311311 // Display a div that would otherwise be hidden by "show on select".
312 -function showDiv(div_id, instanceWrapperDiv) {
313 - jQuery('[id="' + div_id + '"]', instanceWrapperDiv).find(".hiddenBySF").removeClass('hiddenBySF');
314 - jQuery('[id="' + div_id + '"]', instanceWrapperDiv).show();
 312+function showDiv(div_id, instanceWrapperDiv, speed) {
 313+ var elem = jQuery('[id="' + div_id + '"]', instanceWrapperDiv);
 314+ elem.find(".hiddenBySF").removeClass('hiddenBySF');
 315+
 316+ elem.each( function() {
 317+ if ( jQuery(this).css('display') == 'none' ) {
 318+
 319+ jQuery(this).slideDown(speed, function() {
 320+ jQuery(this).fadeTo(speed,1);
 321+ });
 322+
 323+ }
 324+ });
315325 }
316326
317327 // Hide a div due to "show on select". The CSS class is there so that SF can
318328 // ignore the div's contents when the form is submitted.
319 -function hideDiv(div_id, instanceWrapperDiv) {
 329+function hideDiv(div_id, instanceWrapperDiv, speed) {
320330 // IDs can't contain spaces, and jQuery won't work with such IDs - if
321331 // this one has a space, display an alert.
322332 if ( div_id.indexOf( ' ' ) > -1 ) {
——@@ -324,79 +334,114 @@
325335 alert( "Warning: this form has \"show on select\" pointing to an invalid element ID (\"" + div_id + "\") - IDs in HTML cannot contain spaces." );
326336 }
327337
328 - jQuery('[id="' + div_id + '"]', instanceWrapperDiv).find("span, div").addClass('hiddenBySF');
329 - jQuery('[id="' + div_id + '"]', instanceWrapperDiv).hide();
 338+ var elem = jQuery('[id="' + div_id + '"]', instanceWrapperDiv);
 339+ elem.find("span, div").addClass('hiddenBySF');
 340+
 341+ elem.each( function() {
 342+ if ( jQuery(this).css('display') != 'none' ) {
 343+
 344+ // if 'display' is not 'hidden', but the element is hidden otherwise
 345+ // (e.g. by having height = 0), just hide it, else animate the hiding
 346+ if ( jQuery(this).is(':hidden') ) {
 347+ jQuery(this).hide();
 348+ } else {
 349+ jQuery(this).fadeTo(speed, 0, function() {
 350+ jQuery(this).slideUp(speed);
 351+ });
 352+ }
 353+ }
 354+ });
330355 }
331356
332357 // Show this div if the current value is any of the relevant options -
333358 // otherwise, hide it.
334 -function showDivIfSelected(options, div_id, inputVal, instanceWrapperDiv) {
 359+function showDivIfSelected(options, div_id, inputVal, instanceWrapperDiv, initPage) {
335360 for ( var i = 0; i < options.length; i++ ) {
336361 // If it's a listbox and the user has selected more than one
337362 // value, it'll be an array - handle either case.
338363 if ((jQuery.isArray(inputVal) && jQuery.inArray(options[i], inputVal) >= 0) ||
339364 (!jQuery.isArray(inputVal) && (inputVal == options[i]))) {
340 - showDiv(div_id, instanceWrapperDiv);
 365+ showDiv( div_id, instanceWrapperDiv, initPage ? 0 : 'fast' );
341366 return;
342367 }
343368 }
344 - hideDiv(div_id, instanceWrapperDiv);
 369+ hideDiv(div_id, instanceWrapperDiv, initPage ? 0 : 'fast' );
345370 }
346371
347372 // Used for handling 'show on select' for the 'dropdown' and 'listbox' inputs.
348 -jQuery.fn.showIfSelected = function(partOfMultiple) {
 373+jQuery.fn.showIfSelected = function(initPage) {
349374 var inputVal = this.val();
350375 var showOnSelectVals = sfgShowOnSelect[this.attr("id")];
351 - var instanceWrapperDiv = null;
 376+
 377+ var instanceWrapperDiv = this.closest('.multipleTemplateInstance');
 378+ if ( instanceWrapperDiv.length == 0 ) {
 379+ instanceWrapperDiv = null;
 380+ }
352381
353382 if ( showOnSelectVals !== undefined ) {
354383 for ( var i = 0; i < showOnSelectVals.length; i++ ) {
355384 var options = showOnSelectVals[i][0];
356385 var div_id = showOnSelectVals[i][1];
357 - showDivIfSelected(options, div_id, inputVal, instanceWrapperDiv);
 386+ showDivIfSelected( options, div_id, inputVal, instanceWrapperDiv, initPage );
358387 }
359388 }
 389+
 390+ return this;
360391 }
361392
362393 // Show this div if any of the relevant selections are checked -
363394 // otherwise, hide it.
364 -jQuery.fn.showDivIfChecked = function(options, div_id, instanceWrapperDiv) {
 395+jQuery.fn.showDivIfChecked = function(options, div_id, instanceWrapperDiv, initPage ) {
365396 for ( var i = 0; i < options.length; i++ ) {
366397 if (jQuery(this).find('[value="' + options[i] + '"]').is(":checked")) {
367 - showDiv(div_id, instanceWrapperDiv);
368 - return;
 398+ showDiv(div_id, instanceWrapperDiv, initPage ? 0 : 'fast' );
 399+ return this;
369400 }
370401 }
371402 hideDiv(div_id, instanceWrapperDiv);
 403+
 404+ return this;
372405 }
373406
374407 // Used for handling 'show on select' for the 'checkboxes' and 'radiobutton'
375408 // inputs.
376 -jQuery.fn.showIfChecked = function(partOfMultiple) {
 409+jQuery.fn.showIfChecked = function(initPage) {
377410
378411 var showOnSelectVals = sfgShowOnSelect[this.attr("id")];
379 - var instanceWrapperDiv = null;
380412
 413+ var instanceWrapperDiv = this.closest('.multipleTemplateInstance');
 414+ if ( instanceWrapperDiv.length == 0 ) {
 415+ instanceWrapperDiv = null;
 416+ }
 417+
381418 if ( showOnSelectVals !== undefined ) {
382419 for ( var i = 0; i < showOnSelectVals.length; i++ ) {
383420 var options = showOnSelectVals[i][0];
384421 var div_id = showOnSelectVals[i][1];
385 - this.showDivIfChecked(options, div_id, instanceWrapperDiv);
 422+ this.showDivIfChecked(options, div_id, instanceWrapperDiv, initPage );
386423 }
387424 }
 425+
 426+ return this;
388427 }
389428
390429 // Used for handling 'show on select' for the 'checkbox' input.
391 -jQuery.fn.showIfCheckedCheckbox = function(partOfMultiple) {
 430+jQuery.fn.showIfCheckedCheckbox = function(initPage) {
392431
393432 var div_id = sfgShowOnSelect[this.attr("id")];
394 - var instanceWrapperDiv = null;
395433
 434+ var instanceWrapperDiv = this.closest('.multipleTemplateInstance');
 435+ if ( instanceWrapperDiv.length == 0 ) {
 436+ instanceWrapperDiv = null;
 437+ }
 438+
396439 if (jQuery(this).is(":checked")) {
397 - showDiv(div_id, instanceWrapperDiv);
 440+ showDiv(div_id, instanceWrapperDiv, initPage ? 0 : 'fast' );
398441 } else {
399 - hideDiv(div_id, instanceWrapperDiv);
 442+ hideDiv(div_id, instanceWrapperDiv, initPage ? 0 : 'fast' );
400443 }
 444+
 445+ return this;
401446 }
402447
403448 /*
——@@ -615,16 +660,11 @@
616661 .addClass('multipleTemplateInstance')
617662 .addClass('multipleTemplate') // backwards compatibility
618663 .removeAttr("id")
619 - .css("display", "block");
 664+ .fadeTo(0,0)
 665+ .slideDown('fast', function() {
 666+ jQuery(this).fadeTo('fast', 1);
 667+ });
620668
621 - // Add on a new attribute, "origID", representing the ID of all
622 - // HTML elements that had an ID; and delete the actual ID attribute
623 - // of any divs and spans (presumably, these exist only for the
624 - // sake of "show on select"). We do the deletions because no two
625 - // elements on the page are allowed to have the same ID.
626 - new_div.find('[id!=""]').attr('origID', function() { return this.id; });
627 - new_div.find('div[id!=""], span[id!=""]').removeAttr('id');
628 -
629669 // Make internal ID unique for the relevant form elements, and replace
630670 // the [num] index in the element names with an actual unique index
631671 new_div.find("input, select, textarea").each(
——@@ -640,6 +680,12 @@
641681
642682 this.id = this.id.replace(/input_/g, 'input_' + num_elements + '_');
643683
 684+ // TODO: Data in sfgShowOnSelect should probably be stored in
 685+ // jQuery("#sfForm").data('SemanticForms')
 686+ if ( sfgShowOnSelect[ old_id ] ) {
 687+ sfgShowOnSelect[ this.id ] = sfgShowOnSelect[ old_id ];
 688+ }
 689+
644690 // register initialization and validation methods for new inputs
645691
646692 var sfdata = jQuery("#sfForm").data('SemanticForms');
——@@ -703,9 +749,6 @@
704750 }
705751 );
706752
707 - // Remove the encompassing div for this instance.
708 - jQuery(this).closest(".multipleTemplateInstance")
709 - .fadeOut('fast', function() { jQuery(this).remove(); });
710753 });
711754
712755 // Somewhat of a hack - remove the divs that the combobox() call
——@@ -714,7 +757,7 @@
715758 // that doesn't involve removing and then recreating divs.
716759 new_div.find('.sfComboBoxActual').remove();
717760
718 - new_div.initializeJSElements(true);
 761+ new_div.initializeJSElements();
719762
720763 // Initialize new inputs
721764 new_div.find("input, select, textarea").each(
——@@ -744,33 +787,41 @@
745788 * called for either the entire HTML body, or for a div representing an
746789 * instance of a multiple-instance template.
747790 */
748 -jQuery.fn.initializeJSElements = function(partOfMultiple) {
 791+jQuery.fn.initializeJSElements = function() {
749792 this.find(".sfShowIfSelected").each( function() {
750 - jQuery(this).showIfSelected(partOfMultiple);
751 - jQuery(this).change( function() {
752 - jQuery(this).showIfSelected(partOfMultiple);
 793+ jQuery(this)
 794+ .showIfSelected(true)
 795+ .change( function() {
 796+ jQuery(this).showIfSelected(false);
753797 });
754798 });
755799
756800 this.find(".sfShowIfChecked").each( function() {
757 - jQuery(this).showIfChecked(partOfMultiple);
758 - jQuery(this).click( function() {
759 - jQuery(this).showIfChecked(partOfMultiple);
 801+ jQuery(this)
 802+ .showIfChecked(true)
 803+ .click( function() {
 804+ jQuery(this).showIfChecked(false);
760805 });
761806 });
762807
763808 this.find(".sfShowIfCheckedCheckbox").each( function() {
764 - jQuery(this).showIfCheckedCheckbox(partOfMultiple);
765 - jQuery(this).click( function() {
766 - jQuery(this).showIfCheckedCheckbox(partOfMultiple);
 809+ jQuery(this)
 810+ .showIfCheckedCheckbox(true)
 811+ .click( function() {
 812+ jQuery(this).showIfCheckedCheckbox(false);
767813 });
768814 });
769815
770816 this.find(".remover").click( function() {
771817 // Remove the encompassing div for this instance.
772818 jQuery(this).closest(".multipleTemplateInstance")
773 - .fadeOut('fast', function() { jQuery(this).remove(); });
 819+ .fadeTo('fast', 0, function() {
 820+ jQuery(this).slideUp('fast', function() {
 821+ jQuery(this).remove();
 822+ });
 823+ });
774824 });
 825+
775826 this.find('.autocompleteInput').attachAutocomplete();
776827 this.find('.sfComboBox').combobox();
777828 this.find('.autoGrow').autoGrow();
——@@ -790,10 +841,10 @@
791842
792843 // Once the document has finished loading, set up everything!
793844 jQuery(document).ready(function() {
794 - jQuery('body').initializeJSElements(false);
 845+ jQuery('body').initializeJSElements();
795846
796847 jQuery('.multipleTemplateInstance').initializeJSElements(true);
797 - jQuery('.multipleTemplateAdder').click( function() { jQuery(this).addInstance(); } );
 848+ jQuery('.multipleTemplateAdder').click( function() {jQuery(this).addInstance();} );
798849 jQuery('.multipleTemplateList').sortable({
799850 axis: 'y',
800851 handle: '.rearrangerImage'
——@@ -801,7 +852,7 @@
802853
803854
804855 // If the form is submitted, validate everything!
805 - jQuery('#sfForm').submit( function() { return validateAll(); } );
 856+ jQuery('#sfForm').submit( function() {return validateAll();} );
806857 });
807858
808859 /* extending jquery functions */