imported>Iris Leininger: Die Seite wurde neu angelegt: „/** * Initiate a select tool that displays other boxes upon selecting an option * @author Andreas Plank * @requires jQuery * @requires $.jI18n as resource …“

2015-08-12T13:56:25Z

Die Seite wurde neu angelegt: „/** * Initiate a select tool that displays other boxes upon selecting an option * @author Andreas Plank * @requires jQuery * @requires $.jI18n as resource …“

Neue Seite

/**
* 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
});

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

imported>Iris Leininger: Die Seite wurde neu angelegt: „/** * Initiate a select tool that displays other boxes upon selecting an option * @author Andreas Plank * @requires jQuery * @requires $.jI18n as resource …“