diff --git a/Assets/Banner.png b/Assets/Banner.png new file mode 100644 index 0000000..e56e492 Binary files /dev/null and b/Assets/Banner.png differ diff --git a/Assets/Demo.mp4 b/Assets/Demo.mp4 new file mode 100644 index 0000000..0b258bf Binary files /dev/null and b/Assets/Demo.mp4 differ diff --git a/Assets/Icon.svg b/Assets/Icon.svg new file mode 100644 index 0000000..ae09c62 --- /dev/null +++ b/Assets/Icon.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/README.md b/README.md index fb380a5..a4824ce 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,117 @@ -# Super-Simple-Full-Screen-Drag-And-Drop-JS -A super simple, one file JavaScript solution to add a full screen drag and drop window to any web page. +# Super Simple Full Screen Drag And Drop JS + +

Banner

+ +

A super simple, one file JavaScript solution to add a full screen drag and drop window to any web page.

+ +## 🔨 Quick setup + +Include the script via an HTML ` +``` + +Set up the full screen drag and drop window like so: + +```javascript +// Create a new drag and drop window object +const dragAndDrop = new SuperSimpleFullScreenDragAndDropJS(); + +// 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(); +``` + +### Considerations + +To avoid issues, consider adding an event listener to check if the page has fully loaded before setting up the drag and drop window. + +```javascript + +// Add an event listener to check if the page has fully loaded +document.addEventListener("DOMContentLoaded", () => { + + // Setup code for the drag and drop window + +}; + +``` + +## 🛠️ Advanced setup + +### Adjust window properties + +These are the properties / settings that can be adjusted before enabling the main window. + +```javascript +// 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"; +``` + +### Adjust window styling + +These are the styling options that can be adjusted before enabling the main window. The value syntax is standard CSS. + +```javascript +// 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"; +``` + +### Module usage + +This script can also be loaded as an ES6 module by using the module version. The standard behavior of the module is to `exoport default` the class that can then be import by doing: + +```javascript +import SuperSimpleFullScreenDragAndDropJS from "./mini_module_SuperSimpleFullScreenDragAndDrop.js" +``` + +The rest of the setup is the same as previously shown, except for the HTML `