Merge pull request #32 from MEOM/feature/allow-html

samikeijonen · web-flow · commit 6f88a4a8e528 · 2024-05-14T14:43:28.000+03:00
Allow HTML in button.
diff --git a/.nvmrc b/.nvmrc
@@ -1 +1 @@
-v14.17.1
+16
diff --git a/changelog.md b/changelog.md
@@ -1,4 +1,6 @@
 # Changelog
+## Version 1.2.1 released May 14, 2024
+- Update: Allow HTML in the buttons.
 ## Version 1.2.0 released April 17, 2024
 - Fixed: Close only same level sub sub menus. This way we can support more sub sub menu levels.
 ## Version 1.1.0 released April 3, 2023
diff --git a/demo/dist/navigation-multiple.js b/demo/dist/navigation-multiple.js
@@ -85,7 +85,7 @@
       subToggleButton.className = `${this.settings.subToggleButtonClasses}`;
       subToggleButton.type = "button";
       if (this.settings.action === "click") {
-        subToggleButton.innerHTML = `${subNav.textContent}${this.settings.dropDownIcon}`;
+        subToggleButton.innerHTML = `${subNav.innerHTML}${this.settings.dropDownIcon}`;
       }
       if (this.settings.action === "hover") {
         subToggleButton.innerHTML = `<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`;
diff --git a/demo/dist/navigation.js b/demo/dist/navigation.js
@@ -85,7 +85,7 @@
       subToggleButton.className = `${this.settings.subToggleButtonClasses}`;
       subToggleButton.type = "button";
       if (this.settings.action === "click") {
-        subToggleButton.innerHTML = `${subNav.textContent}${this.settings.dropDownIcon}`;
+        subToggleButton.innerHTML = `${subNav.innerHTML}${this.settings.dropDownIcon}`;
       }
       if (this.settings.action === "hover") {
         subToggleButton.innerHTML = `<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`;
diff --git a/demo/index.html b/demo/index.html
@@ -32,7 +32,7 @@
               </ul>
             </li>
             <li class="menu-item-has-children">
-              <a href="#">Services</a>
+              <a href="#">Services<span class="test">Test</span></a>
               <ul class="sub-menu">
                 <li><a href="#">Design</a></li>
                 <li><a href="#">WordPress</a></li>
diff --git a/demo/package-lock.json b/demo/package-lock.json
diff --git a/dist/index.esm.js b/dist/index.esm.js
@@ -147,7 +147,8 @@ Navigation.prototype.create = function () {
         subToggleButton.type = 'button';
 
         if (this.settings.action === 'click') {
-            subToggleButton.innerHTML = `${subNav.textContent}${this.settings.dropDownIcon}`;
+            // Allow HTML
+            subToggleButton.innerHTML = `${subNav.innerHTML}${this.settings.dropDownIcon}`;
         }
 
         if (this.settings.action === 'hover') {
diff --git a/dist/index.esm.min.js b/dist/index.esm.min.js
diff --git a/dist/index.js b/dist/index.js
@@ -153,7 +153,8 @@
             subToggleButton.type = 'button';
 
             if (this.settings.action === 'click') {
-                subToggleButton.innerHTML = `${subNav.textContent}${this.settings.dropDownIcon}`;
+                // Allow HTML
+                subToggleButton.innerHTML = `${subNav.innerHTML}${this.settings.dropDownIcon}`;
             }
 
             if (this.settings.action === 'hover') {
diff --git a/dist/index.min.js b/dist/index.min.js
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@meom/navigation",
-  "version": "1.2.0",
+  "version": "1.2.1",
   "description": "MEOM navigation",
   "homepage": "https://github.com/MEOM/navigation",
   "repository": {
diff --git a/src/navigation.js b/src/navigation.js
@@ -98,7 +98,8 @@ Navigation.prototype.create = function () {
         subToggleButton.type = 'button';
 
         if (this.settings.action === 'click') {
-            subToggleButton.innerHTML = `${subNav.textContent}${this.settings.dropDownIcon}`;
+            // Allow HTML
+            subToggleButton.innerHTML = `${subNav.innerHTML}${this.settings.dropDownIcon}`;
         }
 
         if (this.settings.action === 'hover') {

Original file line number	Diff line number	Diff line change
`@@ -85,7 +85,7 @@`
`85`	`85`	subToggleButton.className = `${this.settings.subToggleButtonClasses}`;
`86`	`86`	`subToggleButton.type = "button";`
`87`	`87`	`if (this.settings.action === "click") {`
`88`		- subToggleButton.innerHTML = `${subNav.textContent}${this.settings.dropDownIcon}`;
	`88`	+ subToggleButton.innerHTML = `${subNav.innerHTML}${this.settings.dropDownIcon}`;
`89`	`89`	`}`
`90`	`90`	`if (this.settings.action === "hover") {`
`91`	`91`	subToggleButton.innerHTML = `<span class="${this.settings.visuallyHiddenClass}">${this.settings.expandChildNavText}</span>${this.settings.dropDownIcon}`;
Original file line number	Diff line number	Diff line change
`@@ -147,7 +147,8 @@ Navigation.prototype.create = function () {`
`147`	`147`	`subToggleButton.type = 'button';`
`148`	`148`
`149`	`149`	`if (this.settings.action === 'click') {`
`150`		- subToggleButton.innerHTML = `${subNav.textContent}${this.settings.dropDownIcon}`;
	`150`	`+ // Allow HTML`
	`151`	+ subToggleButton.innerHTML = `${subNav.innerHTML}${this.settings.dropDownIcon}`;
`151`	`152`	`}`
`152`	`153`
`153`	`154`	`if (this.settings.action === 'hover') {`
Original file line number	Diff line number	Diff line change
`@@ -153,7 +153,8 @@`
`153`	`153`	`subToggleButton.type = 'button';`
`154`	`154`
`155`	`155`	`if (this.settings.action === 'click') {`
`156`		- subToggleButton.innerHTML = `${subNav.textContent}${this.settings.dropDownIcon}`;
	`156`	`+ // Allow HTML`
	`157`	+ subToggleButton.innerHTML = `${subNav.innerHTML}${this.settings.dropDownIcon}`;
`157`	`158`	`}`
`158`	`159`
`159`	`160`	`if (this.settings.action === 'hover') {`