From 8c457c3ecc9bb3f6a44420696f4f50fb592ab0a3 Mon Sep 17 00:00:00 2001 From: median-dispersion Date: Sat, 3 Aug 2024 08:56:23 +0200 Subject: [PATCH] Added Example --- Example/SuperSimpleFullScreenDragAndDrop.js | 332 ++++++++++++++++++++ Example/index.html | 31 ++ Example/main.js | 66 ++++ 3 files changed, 429 insertions(+) create mode 100644 Example/SuperSimpleFullScreenDragAndDrop.js create mode 100644 Example/index.html create mode 100644 Example/main.js diff --git a/Example/SuperSimpleFullScreenDragAndDrop.js b/Example/SuperSimpleFullScreenDragAndDrop.js new file mode 100644 index 0000000..f8f7cf8 --- /dev/null +++ b/Example/SuperSimpleFullScreenDragAndDrop.js @@ -0,0 +1,332 @@ +// https://github.com/median-dispersion/Super-Simple-Full-Screen-Drag-And-Drop-JS + +class SuperSimpleFullScreenDragAndDropJS extends EventTarget { + + // ============================================================================================ + // Public fields + // ============================================================================================ + + // The info text that is displayed when the drag and drop window appears + text = "Drag and Drop"; + + // The path or data of the icon that is displayed when the drag and drop window appears + icon = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512' fill='%23fff'%3E%3Cpath d='m80 32c-26.315 0-48 21.685-48 48v192c0 26.315 21.685 48 48 48h172.12l-110.06-110.06c-18.48-18.477-18.48-49.409 0-67.887 5.9579-5.9567 13.383-10.243 21.521-12.422 4.1269-1.1054 8.3314-1.6376 12.506-1.625 12.529 0.0378 24.786 4.9798 33.854 14.047a32.003 32.003 0 0 0 0 2e-3l110.06 110.06v-172.12c0-26.315-21.685-48-48-48zm97.395 128.06a16 16 0 0 0-5.5352 0.48437 16 16 0 0 0-7.1738 4.1406 16 16 0 0 0 0 22.629l140.11 140.11-12.111 12.111a16.002 16.002 0 0 0 7.1719 26.77l64.002 17.148a16.002 16.002 0 0 0 19.596-19.596l-17.148-64a16.002 16.002 0 0 0-16.053-11.848 16.002 16.002 0 0 0-3.543 0.53516 16.002 16.002 0 0 0-7.1738 4.1387l-12.111 12.111-140.11-140.11a16 16 0 0 0-9.9199-4.625zm174.61 31.939v32h48v-32zm80 0v32c9.1407 0 16 6.8593 16 16h32c0-26.315-21.685-48-48-48zm16 80v48h32v-48zm-256 80v48h32v-48zm256 0v48h32v-48zm-256 80c0 26.315 21.685 48 48 48v-32c-9.1407 0-16-6.8593-16-16zm256 0c0 9.1407-6.8593 16-16 16v32c26.315 0 48-21.685 48-48zm-176 16v32h48v-32zm80 0v32h48v-32z'/%3E%3C/svg%3E"; + + // The type of input field, i.e. "text" or "file" + type = "text"; + + // Z-Index, this should be the highest value of all the HTML elements on the site to make the window appear in front of everything + zIndex = 1000; + + // Name of the event that is being dispatched + eventName = "dropped"; + + // Styling for the drag and drop window + style = { + + window: { + + padding: "50px" + + }, + + background: { + + color: "rgba(0, 0, 0, 0.5)", + blur: "50px" + + }, + + border: { + + size: "5px", + color: "rgba(255, 255, 255, 1)", + style: "dashed", + radius: "50px", + padding: "50px" + + }, + + icon: { + + size: "150px", + + }, + + text: { + + family: "Arial, Helvetica, sans-serif", + size: "30px", + color: "rgba(255, 255, 255, 1)", + weight: "normal", + style: "normal" + + } + + }; + + // ============================================================================================ + // Private fields + // ============================================================================================ + + // A random suffix for element IDs to prevent naming conflicts + #suffix = this.#getRandomString(16); + + // Animation timer + #timer = null; + + // References to the HTML elements that are being added to the DOM + #element = {window: null, info: null, input: null, style: null}; + + // CSS styling + #css() { + + return ` + + + + `; + + } + + // HTML elements + #html() { + + return ` + +
+ +
+ +
+ +
+
${this.text}
+ +
+ +
+ + + +
+ + + `; + + } + + // ============================================================================================ + // Generate a random string + // ============================================================================================ + #getRandomString(length = 8) { + + // Allowed characters + const characterSet = "abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789"; + + let result = ""; + + // Loop until the desired length is reached + for (let i = 0; i < length; i++) { + + // Select a random character from the list of allowed characters and add it to the result + result += characterSet.charAt(Math.floor(Math.random() * characterSet.length)); + + } + + return result; + + } + + // ============================================================================================ + // Show the drag and drop window + // ============================================================================================ + #show() { + + // Clear any running animation timers + clearTimeout(this.#timer); + + // Remove all classes + this.#element.window.removeAttribute("class"); + this.#element.info.removeAttribute("class"); + + // Set the display style to "block" so that the drag and drop window will be rendered + this.#element.window.style.display = "block"; + + // Add the animation classes to play the animations + this.#element.window.setAttribute("class", `ssfsdadjs-fade-in-${this.#suffix}`); + this.#element.info.setAttribute("class", `ssfsdadjs-scale-${this.#suffix}`); + + } + + // ============================================================================================ + // Hide the drag and drop window + // ============================================================================================ + #hide() { + + // Add the animation class to play the animation + this.#element.window.setAttribute("class", `ssfsdadjs-fade-out-${this.#suffix}`); + + // Set timer for animation to play (101 ms) + this.#timer = setTimeout(() => { + + // Set the display style to "none" so that the drag and drop window will not be rendered + this.#element.window.style.display = "none"; + + // Remove all classes + this.#element.window.removeAttribute("class"); + this.#element.info.removeAttribute("class"); + + }, 101); + + } + + // ============================================================================================ + // Dispatch the drop event + // ============================================================================================ + #dispatchDropEvent() { + + // Create a new event that is dispatched when something is dropped on the input field + // The event contains the value of the input in "event.detail.value" + const dropEvent = new CustomEvent(this.eventName, { + detail: { + value: this.#element.input.value, + } + }); + + // Dispatch the event + this.dispatchEvent(dropEvent); + + // Clear the input field + this.#element.input.value = ""; + + // Hide the drag and drop window + this.#hide(); + + } + + // ============================================================================================ + // Enable the drag and drop window + // ============================================================================================ + enable() { + + // Append the CSS styling and HTML elements to the DOM + document.head.insertAdjacentHTML("beforeend", this.#css()); + document.body.insertAdjacentHTML("beforeend", this.#html()); + + // Set the references for the added HTML elements + this.#element.window = document.getElementById(`ssfsdadjs-${this.#suffix}`); + this.#element.info = document.getElementById(`ssfsdadjs-border-${this.#suffix}`); + this.#element.input = document.getElementById(`ssfsdadjs-input-${this.#suffix}`); + this.#element.style = document.getElementById(`ssfsdadjs-style-${this.#suffix}`); + + // Add an event listener to the browser window that listens for a drag event. When dragging something, show the drag and drop window + window.addEventListener("dragenter", () => this.#show()); + + // Add an event listener to the drag and drop window. If the dragged element leaves, hide the main window + this.#element.window.addEventListener("dragleave", () => this.#hide()); + + // Add an event listener to the input field. If something is dropped, dispatch the drop event + this.#element.input.addEventListener("input", () => this.#dispatchDropEvent()); + + } + + // ============================================================================================ + // Disable the drag and drop window + // ============================================================================================ + disable() { + + // Remove all event listeners + window.removeEventListener("dragenter", () => this.#show()); + this.#element.window.removeEventListener("dragleave", () => this.#hide()); + this.#element.input.removeEventListener("input", () => this.#dispatchDropEvent()); + + // Remove all HTML elements from the DOM + this.#element.window.remove(); + this.#element.style.remove(); + + } + +} \ No newline at end of file diff --git a/Example/index.html b/Example/index.html new file mode 100644 index 0000000..7d6a38e --- /dev/null +++ b/Example/index.html @@ -0,0 +1,31 @@ + + + + + + + + + + + + + + + + + + + + + Example | Super Simple Full Screen Drag And Drop JS + + + + + +
Try dragging something into this window...
+ + + + \ No newline at end of file diff --git a/Example/main.js b/Example/main.js new file mode 100644 index 0000000..52515de --- /dev/null +++ b/Example/main.js @@ -0,0 +1,66 @@ +// https://github.com/median-dispersion/Super-Simple-Full-Screen-Drag-And-Drop-JS + +// Set up the drag and drop window once the page has finished loading +document.addEventListener("DOMContentLoaded", () => { + + // Create a new drag and drop window object + const dragAndDrop = new SuperSimpleFullScreenDragAndDropJS(); + + // Settings ----- + // These options allow you to change certain settings of the drag and drop window + + // The info text that is displayed when the drag and drop window appears + // dragAndDrop.text = "Drag and Drop"; + + // The path or data of the icon that is displayed when the drag and drop window appears + // dragAndDrop.icon = "/path/to/my/icon.png"; + + // The type of input field, i.e. "text" or "file" + // dragAndDrop.type = "text"; + + // Z-Index, this should be the highest value of all the HTML elements on the site to make the window appear in front of everything + // dragAndDrop.zIndex = 1000; + + // Name of the event that is being dispatched + // dragAndDrop.eventName = "dropped"; + + // Styling ----- + // These options allow you to change the appearance of the drag and drop window + + // Main window styling + // dragAndDrop.style.window.padding = "50px"; + // dragAndDrop.style.background.color = "rgba(0, 0, 0, 0.5)"; + // dragAndDrop.style.background.blur = "50px"; + + // Border styling + // dragAndDrop.style.border.size = "5px"; + // dragAndDrop.style.border.color = "rgba(255, 255, 255, 1)"; + // dragAndDrop.style.border.style = "dashed"; + // dragAndDrop.style.border.radius = "50px"; + // dragAndDrop.style.border.padding = "50px"; + + // Info icon styling + // dragAndDrop.style.icon.size = "150px"; + + // Info text styling + // dragAndDrop.style.text.family = "Arial, Helvetica, sans-serif"; + // dragAndDrop.style.text.size = "30px"; + // dragAndDrop.style.text.color = "rgba(255, 255, 255, 1)"; + // dragAndDrop.style.text.weight = "normal"; + // dragAndDrop.style.text.style = "normal"; + + // Add the eventlistner + dragAndDrop.addEventListener("dropped", (event) => { + + // Use the value of the drop event + alert(event.detail.value); + + }); + + // Enable the drag and drop window + dragAndDrop.enable(); + + // Disable the drag and drop window + // dragAndDrop.disable(); + +}); \ No newline at end of file