MediaWiki:Ui-custom-show-on-select.js

/**
 * Initiate a select tool that displays other boxes upon selecting an option
 * @author Andreas Plank
 * @requires jQuery
 * @requires $.jI18n as resource dictionary
 * @requires $.resource
 * @version 2015-04-23
 * 
 * This is purely controlled by CSS classes. 
 * Layout is done by setting up div boxes as described below.
 * Given a semicolon list, this becomes transformed into the show-on-select tool
 * and the fist select option shows the first <div>, 
 * the second select option shows the second <div> and so forth.
 * There are two features also ste by CSS classes:
 * - feature-hide-on-first-empty-option (add an empty option to get all boxes to be hidden)
 * - feature-show-all-boxes (show all boxes at once)
 * 
  <div class="ui-custom_show-on-select">
    <div class="ui-custom_switch transform-semicolonlist-to-show-on-select feature-hide-on-first-empty-option">
      Option-one; Option-two; 
    </div>
    <div class="ui-custom_show-by-select">
      content one
    </div>
    <div class="ui-custom_show-by-select">
      content two
    </div>
  </div>
 */
/*global $, document */ 
/*jslint devel: true, eqeq: true, sloppy: true, stupid: true, todo: true, white: true, indent: 2, plusplus: true */
function init_ui_custom_show_on_select() {
  if ($('div.ui-custom_show-on-select').length) {
    $('div.ui-custom_show-on-select').each(function () {
      var 
        $this_show_on_select = $(this),
        $this_custom_switch = $this_show_on_select.find('div.ui-custom_switch.transform-semicolonlist-to-show-on-select'),
        has_uitool_already = ($this_show_on_select.find('select.ui-custom_show-on-select').length ? true : false) ,
        add_feature_hide_at_first_all_boxes = ($this_custom_switch.hasClass('feature-hide-on-first-empty-option') ? true : false),
        add_feature_show_all_boxes = ($this_custom_switch.hasClass('feature-show-all-boxes') ? true : false),
        this_list_to_transform = ( $.trim($this_custom_switch.text()) ? $.trim($this_custom_switch.text()).split(/[\s\t]*;[\s\t]*/g) : "" ),
        i=0;
      if (!has_uitool_already) {// do transform the UI tool
        if (!this_list_to_transform) {
          // alert();
          $this_show_on_select.prepend(
            '<div style="font-size:small;">' + $.resource('showonselect_failureNoListFound') + '</div>'
          );
        } else {
          // fix length : option1; option2  vs. option1; option2; (with final ;)
          if (!this_list_to_transform.slice(-1)[0]) {  this_list_to_transform.pop();  }
          // transform the switcher
          $this_show_on_select.find('div.ui-custom_switch').after("<select class='ui-custom_show-on-select'></select>");
          if (add_feature_hide_at_first_all_boxes) { $this_show_on_select.find('select.ui-custom_show-on-select').append($( '<option></option>' )); }
          for(i=0;i < this_list_to_transform.length;++i) {
            $this_show_on_select.find('select.ui-custom_show-on-select').append($( '<option>' + this_list_to_transform[i] + '</option>' ));
          }
          if (add_feature_show_all_boxes) { $this_show_on_select.find('select.ui-custom_show-on-select').append($( '<option class="show-all-boxes">' + $.resource('showonselect_showAll') + '</option>' )); }
          $this_show_on_select.find( ( add_feature_hide_at_first_all_boxes ? 'div.ui-custom_show-by-select' : 'div.ui-custom_show-by-select:gt(0)' ) ).hide();
        }
        // remove div.ui-custom_switch to prevent a wrong reconstruction
        $this_show_on_select.find('div.ui-custom_switch').remove();
      }
      // always bind on also on reexecuting this funxtion anew
      $(this).find('select.ui-custom_show-on-select').on(
            'change.ui-custom_show-on-select',// add namespace as well to event change
        function () {
          var $this_select_option = $(this).find('option:selected'),
            add_feature_hide_at_first_all_boxes = ($(this).find('option:lt(1)').text() ? true : false),
            $this_show_on_select = $this_select_option.parents('div.ui-custom_show-on-select'),
            this_selected_0index = $this_select_option.index(),
            this_show_by_select_0index = this_selected_0index + ( add_feature_hide_at_first_all_boxes ? 1 : 0 );// starts at zero vs. nth-child starts at 1
          console.log("this_selected_0index: " + this_selected_0index + " this_show_by_select_0index " + this_show_by_select_0index);
          $this_show_on_select.find('div.ui-custom_show-by-select').hide();
          if ($this_select_option.hasClass('show-all-boxes')) {
            console.log('add_feature_show_all_boxes');
            console.log($this_show_on_select);
            $this_show_on_select.find('div.ui-custom_show-by-select').fadeIn();
          } else {
            console.log('show-by-select');
            console.log(":nth-child(" + parseInt( this_show_by_select_0index, 10 ) + ")");
            $this_show_on_select.find("div.ui-custom_show-by-select:nth-child(" + parseInt( this_show_by_select_0index, 10 ) + ")").fadeIn();
          }
        }
      );
    });
  }
}
$(document).ready(function() {
  // append local resources to global object, "true" = deep extension
  $.extend(true, $.jI18n, {
  en: { 
    showonselect_showAll : 'Show all',
    showonselect_failureNoListFound : 'Failure: Could not find the semicolon list found to be transformed into the select option tool.<br/> Please check documentation of JavaScript code in “init_ui_custom_show_on_select()” to have a correct setup.'
    },
  de: {
    showonselect_showAll : 'Alles anzeigen',
    showonselect_failureNoListFound : 'Fehler: Keine Semikolon-Liste gefunden, die transformiert werden könnte in das Auswahl-Helferlein.<br/> Bitte Dokumentation nachlesen in JavaScript Funktion “init_ui_custom_show_on_select()” für eine korrekte Benutzung.'
    }
  });
  // init_ui_custom_show_on_select();
  mw.hook('sf.addTemplateInstance').add(init_ui_custom_show_on_select).fire(init_ui_custom_show_on_select);// semantic forms "add another" click
});