Merge pull request #95 from swilcock0/main

Modification to add menu item in new UI

Author: pydn

js/save-as-script.js

@@ -10,6 +10,37 @@ app.registerExtension({
 		});
 	},
 	async setup() {
+		function savePythonScript() {
+			var filename = prompt("Save script as:");
+			if(filename === undefined || filename === null || filename === "") {
+				return
+			}
+			
+			app.graphToPrompt().then(async (p) => {
+				const json = JSON.stringify({name: filename + ".json", workflow: JSON.stringify(p.output, null, 2)}, null, 2); // convert the data to a JSON string
+				var response = await api.fetchApi(`/saveasscript`, { method: "POST", body: json });
+				if(response.status == 200) {
+					const blob = new Blob([await response.text()], {type: "text/python;charset=utf-8"});
+					const url = URL.createObjectURL(blob);
+					if(!filename.endsWith(".py")) {
+						filename += ".py";
+					}
+
+					const a = $el("a", {
+						href: url,
+						download: filename,
+						style: {display: "none"},
+						parent: document.body,
+					});
+					a.click();
+					setTimeout(function () {
+						a.remove();
+						window.URL.revokeObjectURL(url);
+					}, 0);
+				}
+			});
+		}
+
 		const menu = document.querySelector(".comfy-menu");
 		const separator = document.createElement("hr");
 
@@ -19,37 +50,61 @@ app.registerExtension({
 
 		const saveButton = document.createElement("button");
 		saveButton.textContent = "Save as Script";
-		saveButton.onclick = () => {
-				var filename = prompt("Save script as:");
-				if(filename === undefined || filename === null || filename === "") {
-					return
-				}
-				
-				app.graphToPrompt().then(async (p) => {
-					const json = JSON.stringify({name: filename + ".json", workflow: JSON.stringify(p.output, null, 2)}, null, 2); // convert the data to a JSON string
-					var response = await api.fetchApi(`/saveasscript`, { method: "POST", body: json });
-					if(response.status == 200) {
-						const blob = new Blob([await response.text()], {type: "text/python;charset=utf-8"});
-						const url = URL.createObjectURL(blob);
-						if(!filename.endsWith(".py")) {
-							filename += ".py";
-						}
-
-						const a = $el("a", {
-							href: url,
-							download: filename,
-							style: {display: "none"},
-							parent: document.body,
-						});
-						a.click();
-						setTimeout(function () {
-							a.remove();
-							window.URL.revokeObjectURL(url);
-						}, 0);
-					}
-				});
-			}
+		saveButton.onclick = () => savePythonScript();
 		menu.append(saveButton);
+
+
+		// Also load to new style menu
+		const dropdownMenu = document.querySelectorAll(".p-menubar-submenu ")[0];
+		// Get submenu items
+		const listItems = dropdownMenu.querySelectorAll("li");
+		let newSetsize = listItems.length;
+
+		const separatorMenu = document.createElement("li");
+		separatorMenu.setAttribute("id", "pv_id_8_0_" + (newSetsize - 1).toString());
+		separatorMenu.setAttribute("class", "p-menubar-separator");
+		separatorMenu.setAttribute("role", "separator");
+		separatorMenu.setAttribute("data-pc-section", "separator");
+
+		dropdownMenu.append(separatorMenu);
+
+		// Adjust list items within to increase setsize
+		listItems.forEach((item) => {
+			// First check if it's a separator
+			if(item.getAttribute("data-pc-section") !== "separator") {
+				item.setAttribute("aria-setsize", newSetsize);
+			}
+		});
+
+		console.log(newSetsize);
+
+		// Here's the format of list items		
+		const saveButtonText = document.createElement("li");
+		saveButtonText.setAttribute("id", "pv_id_8_0_" + newSetsize.toString());
+		saveButtonText.setAttribute("class", "p-menubar-item relative");
+		saveButtonText.setAttribute("role", "menuitem");
+		saveButtonText.setAttribute("aria-label", "Save as Script");
+		saveButtonText.setAttribute("aria-level", "2");
+		saveButtonText.setAttribute("aria-setsize", newSetsize.toString());
+		saveButtonText.setAttribute("aria-posinset", newSetsize.toString());
+		saveButtonText.setAttribute("data-pc-section", "item");
+		saveButtonText.setAttribute("data-p-active", "false");
+		saveButtonText.setAttribute("data-p-focused", "false");
+
+		saveButtonText.innerHTML = `
+			<div class="p-menubar-item-content" data-pc-section="itemcontent">
+				<a class="p-menubar-item-link" tabindex="-1" aria-hidden="true" data-pc-section="itemlink" target="_blank">
+					<span class="p-menubar-item-icon pi pi-book"></span>
+					<span class="p-menubar-item-label">Save as Script</span>
+				</a>
+			</div>
+		`
+
+		saveButtonText.onclick = () => savePythonScript();
+		
+		dropdownMenu.append(saveButtonText);
+		
+
 
 		console.log("SaveAsScript loaded");
 	}