☰

script-aaoDraggable

Add possibility to move AAO simply by dragging it

  1. // ==UserScript==
  2. // @name         script-aaoDraggable
  3. // @namespace    https://github.com/Poul0s/script-aooDraggable
  4. // @version      2025-03-02.01
  5. // @description  Add possibility to move AAO simply by dragging it
  6. // @author       Thunlos
  7. // @match        https://www.operateur112.fr/
  8. // @icon         https://www.google.com/s2/favicons?sz=64&domain=operateur112.fr
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12.  
  13. (function() {
  14. 	'use strict';
  15. 	
  16. 	const iframeLink = window.location.origin + "/aaos";
  17.  
  18. 	function startAAODrag(event, aao, iframeContentWindow) {
  19. 		aao.style.cursor = "grabbing";
  20.  
  21. 		let currentHoveringColumn = null;
  22. 		let dummy = null;
  23. 		let currentColumn = aao.parentElement;
  24.  
  25. 		function removeHoveringColumn() {
  26. 			if (!currentHoveringColumn) return;
  27. 			currentHoveringColumn = null;
  28. 			dummy.remove();
  29. 		}
  30.  
  31. 		function drag(event) {
  32. 			if (event.clientX < 0 || event.clientY < 0) {
  33. 				return;
  34. 			}
  35. 			let elements = iframeContentWindow.document.elementsFromPoint(event.clientX, event.clientY);
  36. 			let categorySwitcher = elements.find(e => e.href && e.href.startsWith(iframeLink + "#aao_category_"));
  37. 			if (categorySwitcher && !categorySwitcher.parentElement.classList.contains("active")) {
  38. 				categorySwitcher.click();
  39. 			} else {
  40. 				let categoryContainer = elements.find(e => e.id && e.id.startsWith("aao_category_"));
  41. 				if (categoryContainer) {
  42. 					let columns = categoryContainer.querySelectorAll(".col-sm-2.col-xs-4");
  43. 					let hoveringColumn = Array.from(columns).find(c => {
  44. 						let rect = c.getBoundingClientRect();
  45. 						return rect.left < event.clientX && rect.right > event.clientX
  46. 					});
  47. 					if (hoveringColumn && hoveringColumn != currentColumn) {
  48. 						if (hoveringColumn != currentHoveringColumn) {
  49. 							removeHoveringColumn();
  50. 							currentHoveringColumn = hoveringColumn;
  51. 							dummy = aao.cloneNode(true);
  52. 							dummy.style.opacity = 0.5;
  53. 							currentHoveringColumn.appendChild(dummy);
  54. 						}
  55. 					} else
  56. 						removeHoveringColumn();
  57. 				} else
  58. 					removeHoveringColumn();
  59. 			}
  60.  
  61. 		}
  62.  
  63. 		function dragend(event) {
  64. 			if (currentHoveringColumn) {
  65. 				let editLink = aao.dataset.editLink;
  66. 				let columnNumber = Array.prototype.indexOf.call(currentHoveringColumn.parentNode.children, currentHoveringColumn) + 1;
  67. 				let currentCategory = iframeContentWindow.document.querySelector("#aao-tabs li[role='presentation'].active");
  68. 				if (!currentCategory) {
  69. 					console.error("No active category found");
  70. 					return;
  71. 				}
  72. 				let categoryName = currentCategory.firstElementChild.innerText;
  73. 				let iframe = iframeContentWindow.document.createElement("iframe");
  74. 				iframe.style.visibility = "hidden";
  75. 				iframe.style.position = "absolute";
  76. 				iframe.style.width = "1px";
  77. 				iframe.style.height = "1px";
  78. 				iframeContentWindow.document.body.appendChild(iframe);
  79. 				iframe.src = editLink;
  80. 				let loaded = false;
  81. 				iframe.onload = () => {
  82. 					if (loaded) return;
  83. 					loaded = true;
  84. 					let editContentWindow = iframe.contentWindow;
  85. 					let column_nb_select = editContentWindow.document.getElementById("aao_column_number");
  86. 					column_nb_select.value = columnNumber.toString();
  87. 					let category_select = editContentWindow.document.getElementById("aao_category_id");
  88. 					if (category_select === null)
  89. 						category_select = editContentWindow.document.getElementById("aao_aao_category_id");
  90. 					let option = null
  91. 					for (let opt of category_select.options) {
  92. 						if (opt.innerText == categoryName) {
  93. 							option = opt;
  94. 							break;
  95. 						}
  96. 					}
  97. 					if (!option) {
  98. 						console.error("No category found");
  99. 						return;
  100. 					}
  101. 					category_select.value = option.value;
  102. 					editContentWindow.document.getElementById("save-button").click();
  103. 					dummy.style.opacity = 1;
  104. 					dummy.addEventListener("dragstart", (event) => startAAODrag(event, dummy, iframeContentWindow));
  105. 					if (aao.nextElementSibling && aao.nextElementSibling.nodeName == "BR") {
  106. 						aao.nextElementSibling.remove();
  107. 					}
  108. 					aao.remove();
  109. 					setTimeout(() => {
  110. 						iframe.remove();
  111. 					}, 5000);
  112. 				}
  113. 			}
  114. 			aao.removeEventListener("drag", drag);
  115. 			aao.removeEventListener("dragend", dragend);
  116. 		}
  117.  
  118. 		aao.addEventListener("drag", drag);
  119. 		aao.addEventListener("dragend", dragend);
  120. 	}
  121. 	
  122. 	function setAAOsDraggables(iframeNode, iframeContentWindow) {
  123. 		let aaos = iframeContentWindow.document.getElementsByClassName("aao_btn_group");
  124. 		for (let aao of aaos) {
  125. 			aao.setAttribute("draggable", "true");
  126. 			aao.dataset.editLink = aao.firstElementChild.href;
  127. 			aao.firstElementChild.removeAttribute("href");
  128. 			aao.firstElementChild.style.cursor = "grab";
  129. 			aao.addEventListener("dragstart", (event) => startAAODrag(event, aao, iframeContentWindow));
  130. 		}
  131. 	}
  132.  
  133.  
  134. 	let popupPage = document.getElementById("lightbox_box");
  135. 	const callback = (mutationList, observer) => {
  136. 		for (const mutation of mutationList) {
  137. 			if (mutation.type === "childList") {
  138. 				for (let node of mutation.addedNodes) {
  139. 					if (node.classList.contains("lightbox_iframe")) {
  140. 						node.addEventListener("load", () => {
  141. 							if (node.src.startsWith(iframeLink)) {
  142. 								setAAOsDraggables(node, node.contentWindow);
  143. 							}
  144. 						})
  145. 					}
  146. 				}
  147. 			}
  148. 		}
  149. 	};
  150.  
  151. 	const observer = new MutationObserver(callback)
  152. 	observer.observe(popupPage, { attributes: false, childList: true, subtree: false });
  153. })();