Show or hide components - Historique des versions

Neo-Teyrall : mise a jour visuelle des image pour que le bord blancs apparaissent pas

2025-09-11T09:41:41Z

mise a jour visuelle des image pour que le bord blancs apparaissent pas

← Version précédente		Version du 11 septembre 2025 à 11:41
Ligne 17 :		Ligne 17 :
	This is especially useful for '''Repeater''' views, which may contain a lot of text.		This is especially useful for '''Repeater''' views, which may contain a lot of text.

	This tutorial methods show how to create a button that hide or display contente. [[Fichier:Tuto_ex_hideshow1.png\|centré~~\|vignette~~\|500x500px]]		This tutorial methods show how to create a button that hide or display contente. [[Fichier:Tuto_ex_hideshow1.png\|centré\|500x500px]]

	To do this, you will need to use scripting.		To do this, you will need to use scripting.
Ligne 38 :		Ligne 38 :
	*If the content is hidden by default → apply '''d-none''' to the "Hide" button.		*If the content is hidden by default → apply '''d-none''' to the "Hide" button.

	[[Fichier:Tuto_hideshow1.png\|centré~~\|vignette~~\|700x700px]]		[[Fichier:Tuto_hideshow1.png\|centré\|700x700px]]

	=== Script ===		=== Script ===
Ligne 90 :		Ligne 90 :

	With this method, the visibility state is preserved. When the character sheet is initialized, you simply check the checkbox value and display the content according to the saved state.		With this method, the visibility state is preserved. When the character sheet is initialized, you simply check the checkbox value and display the content according to the saved state.
	[[Fichier:Tuto_hideshow2.png\|centré~~\|vignette~~\|800x800px]]		[[Fichier:Tuto_hideshow2.png\|centré\|800x800px]]
	init = function(sheet) {		init = function(sheet) {
	if (sheet.id() === "main") {		if (sheet.id() === "main") {

Neo-Teyrall : ajout d'une version plus avancé qui permet de sauvegarder l'état de la page.

2025-09-10T21:45:35Z

ajout d'une version plus avancé qui permet de sauvegarder l'état de la page.

← Version précédente		Version du 10 septembre 2025 à 23:45
Ligne 5 :		Ligne 5 :
	This page presents a basic method to toggle the visibility of content, followed by an improved version with a small update.		This page presents a basic method to toggle the visibility of content, followed by an improved version with a small update.

	= Basic Hide / Show Components =		== Basic Hide / Show Components ==

	Components can be hidden using Bootstrap classes:		Components can be hidden using Bootstrap classes:
	*'''d-none''': [https://getbootstrap.com/docs/5.3/utilities/display/#hiding-elements Hide elements]		*'''d-none''': [https://getbootstrap.com/docs/5.3/utilities/display/#hiding-elements Hide elements]
Ligne 13 :		Ligne 12 :
	This allows you to hide parts of a character sheet in order to keep it more compact and readable.		This allows you to hide parts of a character sheet in order to keep it more compact and readable.

	== Creating a collapsible container ==		=== Creating a collapsible container ===
	When your character sheet contains large amounts of text, it can be useful to hide some of it to keep the sheet clear.		When your character sheet contains large amounts of text, it can be useful to hide some of it to keep the sheet clear.

Ligne 19 :		Ligne 18 :

	This tutorial methods show how to create a button that hide or display contente. [[Fichier:Tuto_ex_hideshow1.png\|centré\|vignette\|500x500px]]		This tutorial methods show how to create a button that hide or display contente. [[Fichier:Tuto_ex_hideshow1.png\|centré\|vignette\|500x500px]]


	To do this, you will need to use scripting.		To do this, you will need to use scripting.
Ligne 33 :		Ligne 31 :
	To control the hidden content, create two buttons:		To control the hidden content, create two buttons:
	*a '''Show''' button		*a '''Show''' button
	* a '''Hide''' button		*a '''Hide''' button

	These two buttons will alternate to control the content display.		These two buttons will alternate to control the content display.

	* If the content is visible by default → apply '''d-none''' to the "Show" button.		*If the content is visible by default → apply '''d-none''' to the "Show" button.
	* If the content is hidden by default → apply '''d-none''' to the "Hide" button.		*If the content is hidden by default → apply '''d-none''' to the "Hide" button.

	[[Fichier:Tuto_hideshow1.png\|centré\|vignette\|700x700px]]		[[Fichier:Tuto_hideshow1.png\|centré\|vignette\|700x700px]]
Ligne 52 :		Ligne 50 :
	const initMain = function(sheet) {		const initMain = function(sheet) {
	// initialize the main sheet		// initialize the main sheet
	~~initGlobalHideShow~~(sheet,"hideShow1_fold", "hideShow1_unfold", "hideShow1_extra");		initHideShow(sheet,"hideShow1_fold", "hideShow1_unfold", "hideShow1_extra");
	};		};

	const ~~initGlobalHideShow~~ = function (sheet, fold_button_id, unfold_button_id, extra_id) {		const initHideShow = function (sheet, fold_button_id, unfold_button_id, extra_id) {
	log("START ~~initGlobalHideShow~~");		log("START initHideShow");
	let fold_button = sheet.get(fold_button_id);		let fold_button = sheet.get(fold_button_id);
	let unfold_button = sheet.get(unfold_button_id);		let unfold_button = sheet.get(unfold_button_id);
Ligne 68 :		Ligne 66 :
	});		});

	log("END ~~initGlobalHideShow~~");		log("END initHideShow");
	}		}

Ligne 85 :		Ligne 83 :
	}		}
	This simple method is easy to build but has some limitations. The first one is that if the page is reloaded, all the content will return to its original state.		This simple method is easy to build but has some limitations. The first one is that if the page is reloaded, all the content will return to its original state.

			=== Improved Hide / Show Components ===
			To solve the issue where the content always returns to its original state after the page is reloaded, you need to '''save its state'''.

			To achieve this, use a '''checkbox''' that will be checked or unchecked depending on the visibility of the content.

			With this method, the visibility state is preserved. When the character sheet is initialized, you simply check the checkbox value and display the content according to the saved state.
			[[Fichier:Tuto_hideshow2.png\|centré\|vignette\|800x800px]]
			init = function(sheet) {
			if (sheet.id() === "main") {
			initMain(sheet);
			}
			};

			const initMain = function(sheet) {
			// initialize the main sheet
			initHideShowSave(sheet,"hideShow2_fold", "hideShow2_unfold", "hideShow2_extra","hideShow2_save");
			};

			const initHideShowSave = function (sheet, fold_button_id, unfold_button_id, extra_id, visibility_id) {
			log("START initHideShowSave");
			let fold_button = sheet.get(fold_button_id);
			let unfold_button = sheet.get(unfold_button_id);
			let visibility = sheet.get(visibility_id);
			let extra = sheet.get(extra_id);

			fold_button.on("click", function () {
			toggleExtra(extra, fold_button, unfold_button, false);
			visibility.value(false);
			});

			unfold_button.on("click", function () {
			toggleExtra(extra, fold_button, unfold_button, true);
			visibility.value(true);
			});

			toggleExtra(extra,fold_button,unfold_button,visibility.value());
			log("END initHideShowSave");
			}

			const toggleExtra = function (extra_comp, fold, unfold, visibility) {
			log("START toggleExtra");
			if (visibility) {
			extra_comp.show();
			fold.show();
			unfold.hide();
			} else {
			extra_comp.hide();
			fold.hide();
			unfold.show();
			}
			log("END toggleExtra");
			}

Neo-Teyrall : ajouter une version plus factoriser du code

2025-09-10T17:25:03Z

ajouter une version plus factoriser du code

@@ Ligne 1 : / Ligne 1 : @@
-= Hide / Show Components =
+'''In a character sheet, you may sometimes want to hide certain parts of the sheet to make navigation easier.'''
 Components can be hidden using Bootstrap classes:
-* '''d-none''': [https://getbootstrap.com/docs/5.3/utilities/display/#hiding-elements Hide elements]
+*'''d-none''': [https://getbootstrap.com/docs/5.3/utilities/display/#hiding-elements Hide elements]
-* '''invisible''': [https://getbootstrap.com/docs/5.3/utilities/visibility/ Visibility]
+*'''invisible''': [https://getbootstrap.com/docs/5.3/utilities/visibility/ Visibility]
 This allows you to hide parts of a character sheet in order to keep it more compact and readable.
 == Creating a collapsible container ==
 When your character sheet contains large amounts of text, it can be useful to hide some of it to keep the sheet clear.
 This is especially useful for '''Repeater''' views, which may contain a lot of text.
-[[image repeater expanded and repeater collapsed]]
+This tutorial methods show how to create a button that hide or display contente.   [[Fichier:Tuto_ex_hideshow1.png|centré|vignette|500x500px]]
 To do this, you will need to use scripting.
 === Define the content to hide ===
 Place the content you want to hide inside a '''Column''' component, itself inside a '''Row''' component.
 This way, you can easily hide or display the content.
@@ Ligne 22 : / Ligne 31 : @@
 === Prepare the buttons ===
 To control the hidden content, create two buttons:
-* a '''Show''' button
+*a '''Show''' button
 * a '''Hide''' button
 These two buttons will alternate to control the content display.
 * If the content is visible by default → apply '''d-none''' to the "Show" button.
 * If the content is hidden by default → apply '''d-none''' to the "Hide" button.
 === Script ===
@@ Ligne 41 : / Ligne 52 : @@
   const initMain = function(sheet) {
      // initialize the main sheet
-     initContentVisibility(sheet,"content_to_hide_id", "hide_button_id", "show_button_id");
+     initGlobalHideShow(sheet,"hideShow1_fold", "hideShow1_unfold", "hideShow1_extra");
   };

Neo-Teyrall : /* Script */

2025-08-31T18:30:31Z

Script

← Version précédente		Version du 31 août 2025 à 20:30
Ligne 34 :		Ligne 34 :
	The script should detect button clicks and act accordingly.		The script should detect button clicks and act accordingly.

	~~<blockquote>~~		init = function(sheet) {
	init = function(sheet) {

	if (sheet.id() === "main") {		if (sheet.id() === "main") {

	initMain(sheet);		initMain(sheet);

	}		}
			};
	};		const initMain = function(sheet) {

	const initMain = function(sheet) {

	// initialize the main sheet		// initialize the main sheet

	initContentVisibility(sheet,"content_to_hide_id", "hide_button_id", "show_button_id");		initContentVisibility(sheet,"content_to_hide_id", "hide_button_id", "show_button_id");
			};
	};		const initContentVisibility = function(sheet, extra_id, hide_button_id, show_button_id){

	const initContentVisibility = function(sheet, extra_id, hide_button_id, show_button_id){

	// Get the button.		// Get the button.

	let hideButton = sheet.get(hide_button_id);		let hideButton = sheet.get(hide_button_id);

	let showButton = sheet.get(show_button_id);		let showButton = sheet.get(show_button_id);

	let content = sheet.get(extra_id);		let content = sheet.get(extra_id);

	// hide the content, show show_button and hide hide_button.		// hide the content, show show_button and hide hide_button.

	const hideContent = function() {		const hideContent = function() {

	log("hide click");		log("hide click");

	hideButton.hide();		hideButton.hide();

	showButton.show();		showButton.show();

	content.hide();		content.hide();

	};		};

	// show the contente, hide show_button and show hide_button.		// show the contente, hide show_button and show hide_button.

	const showContent = function() {		const showContent = function() {

	log("show click");		log("show click");

	hideButton.show();		hideButton.show();

	showButton.hide();		showButton.hide();

	content.show();		content.show();

	};		};

	// show		// show

	hideButton.on('click', hideContent);		hideButton.on('click', hideContent);

	// hide		// hide

	showButton.on('click', showContent);		showButton.on('click', showContent);
			};
	};
	~~</blockquote>~~

Neo-Teyrall : essaie d'utiliser le blockquote pour formater des code

2025-08-28T22:33:52Z

essaie d'utiliser le blockquote pour formater des code

Nouvelle page

= Hide / Show Components =

Components can be hidden using Bootstrap classes:
* '''d-none''': [https://getbootstrap.com/docs/5.3/utilities/display/#hiding-elements Hide elements]
* '''invisible''': [https://getbootstrap.com/docs/5.3/utilities/visibility/ Visibility]

This allows you to hide parts of a character sheet in order to keep it more compact and readable.

== Creating a collapsible container ==
When your character sheet contains large amounts of text, it can be useful to hide some of it to keep the sheet clear.
This is especially useful for '''Repeater''' views, which may contain a lot of text.

[[image repeater expanded and repeater collapsed]]

To do this, you will need to use scripting.

=== Define the content to hide ===
Place the content you want to hide inside a '''Column''' component, itself inside a '''Row''' component.
This way, you can easily hide or display the content.

To test, add or remove the '''d-none''' class from the '''Row''' component. Its child elements should show or hide accordingly.

=== Prepare the buttons ===
To control the hidden content, create two buttons:
* a '''Show''' button
* a '''Hide''' button

These two buttons will alternate to control the content display.

* If the content is visible by default → apply '''d-none''' to the "Show" button.
* If the content is hidden by default → apply '''d-none''' to the "Hide" button.

=== Script ===
The script should detect button clicks and act accordingly.

<blockquote>
init = function(sheet) {

if (sheet.id() === "main") {

initMain(sheet);

}

};

const initMain = function(sheet) {

// initialize the main sheet

initContentVisibility(sheet,"content_to_hide_id", "hide_button_id", "show_button_id");

};

const initContentVisibility = function(sheet, extra_id, hide_button_id, show_button_id){

// Get the button.

let hideButton = sheet.get(hide_button_id);

let showButton = sheet.get(show_button_id);

let content = sheet.get(extra_id);

// hide the content, show show_button and hide hide_button.

const hideContent = function() {

log("hide click");

hideButton.hide();

showButton.show();

content.hide();

};

// show the contente, hide show_button and show hide_button.

const showContent = function() {

log("show click");

hideButton.show();

showButton.hide();

content.show();

};

// show

hideButton.on('click', hideContent);

// hide

showButton.on('click', showContent);

};
</blockquote>

Show or hide components - Historique des versions

Neo-Teyrall : mise a jour visuelle des image pour que le bord blancs apparaissent pas

Neo-Teyrall : ajout d'une version plus avancé qui permet de sauvegarder l'état de la page.

Neo-Teyrall : ajouter une version plus factoriser du code

Neo-Teyrall : /* Script */

Neo-Teyrall : essaie d'utiliser le blockquote pour formater des code

Neo-Teyrall : mise a jour visuelle des image pour que le bord blancs apparaissent pas

Neo-Teyrall : ajout d'une version plus avancé qui permet de sauvegarder l'état de la page.

Neo-Teyrall : ajouter une version plus factoriser du code

Neo-Teyrall : /* Script */

Neo-Teyrall : essaie d'utiliser le blockquote pour formater des code