documentation and demo

awesomemotive · Nov 15, 2023 · 7b5a3fc · 7b5a3fc
1 parent 6785518
commit 7b5a3fc
Show file tree

Hide file tree

Showing 5 changed files with 61 additions and 3 deletions.
diff --git a/dist/wpforms-multiselect-checkboxes.js b/dist/wpforms-multiselect-checkboxes.js
diff --git a/docs/assets/css/styles.css b/docs/assets/css/styles.css
@@ -310,6 +310,21 @@ article h3 {
 	background-color: #f6f7f7;
 }
 
+.custom-opener-wrap {
+	vertical-align: middle;
+	margin-bottom: 10px;
+}
+
+.custom-opener {
+	background-color: #fff;
+	border: 1px solid #ccd0d4;
+	border-radius: 4px;
+	box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+	padding: 8px 10px;
+	color: #2c3338;
+	cursor: pointer;
+}
+
 
 /**
  * Footer

diff --git a/docs/assets/js/initializers.js b/docs/assets/js/initializers.js
@@ -4,6 +4,8 @@
 // Call the initialization function when the DOM is ready
 function initializeDropdownCheckboxes() {
 	const dropdowns = document.querySelectorAll( '.dropdown' );
+	const dropDownWithCustomOpener = document.querySelector( '.dropdown-with-custom-opener' );
+	const customOpener = document.querySelector( '.custom-opener' );
 
 	dropdowns.forEach( ( dropdown ) => {
 		const multiSelectCheckbox = new WPFormsMultiSelectCheckbox( dropdown );
@@ -29,6 +31,17 @@ function initializeDropdownCheckboxes() {
 			multiSelectCheckbox.update( dropdown, valuesToSet );
 		}
 	} );
+
+	// Example of how to set a custom opener
+	if ( dropDownWithCustomOpener ) {
+		const multiSelectCheckbox = new WPFormsMultiSelectCheckbox(
+			dropDownWithCustomOpener,
+			{
+				customOpener,
+			}
+		);
+		multiSelectCheckbox.init();
+	}
 }
 
 document.addEventListener( 'DOMContentLoaded', initializeDropdownCheckboxes );