From c25715c8d0d627d24d1dabb80d6488a5182a016b Mon Sep 17 00:00:00 2001 From: Anthony Correa Date: Sun, 19 Jan 2025 15:47:17 -0600 Subject: [PATCH] Add drag-and-drop file upload and macro settings enhancements ### Changes Made - Added a new SVG asset (`download-solid.svg`) to `src/assets`. - Updated `main.js`: - Added a new template `SETTINGS_MENU_MACRO`. - Improved drag-and-drop file upload handling with visual feedback. - Enhanced macro functionality with custom drag-and-drop events on hotbar macros. - Adjusted `registerSettings` function to include macro menu registration. - Updated `module.json`: - Added macro pack support under `packs` for "asc-asset-manager-macros." - Created new binary files for macro pack (`asc-asset-manager-macros`). - Improved CSS styling: - Added `.dragover` class for better drag-and-drop UI feedback. - Updated styles to include `asc-asset-manager` context. - Updated `upload-choose.hbs` and `upload-form.hbs`: - Added `moduleId` class context. - Enhanced `upload-form` with an image preview section. - Added a new template (`settings-menu-macro.hbs`) for macro-related UI. - Improved logging and hooks for better event tracking and debugging. This commit enhances functionality, user experience, and modularity for managing assets. --- src/assets/download-solid.svg | 1 + src/main.js | 85 ++++++++++++++---- src/module.json | 16 +++- src/packs/asc-asset-manager-macros/000005.ldb | Bin 0 -> 687 bytes src/packs/asc-asset-manager-macros/000008.ldb | Bin 0 -> 634 bytes src/packs/asc-asset-manager-macros/000011.log | 0 src/packs/asc-asset-manager-macros/CURRENT | 1 + src/packs/asc-asset-manager-macros/LOCK | 0 src/packs/asc-asset-manager-macros/LOG | 3 + src/packs/asc-asset-manager-macros/LOG.old | 5 ++ .../asc-asset-manager-macros/MANIFEST-000010 | Bin 0 -> 192 bytes src/settings.js | 31 ++++++- src/styles/style.css | 24 +++-- src/templates/settings-menu-macro.hbs | 20 +++++ src/templates/upload-choose.hbs | 3 +- src/templates/upload-form.hbs | 4 +- 16 files changed, 159 insertions(+), 34 deletions(-) create mode 100644 src/assets/download-solid.svg create mode 100644 src/packs/asc-asset-manager-macros/000005.ldb create mode 100644 src/packs/asc-asset-manager-macros/000008.ldb create mode 100644 src/packs/asc-asset-manager-macros/000011.log create mode 100644 src/packs/asc-asset-manager-macros/CURRENT create mode 100644 src/packs/asc-asset-manager-macros/LOCK create mode 100644 src/packs/asc-asset-manager-macros/LOG create mode 100644 src/packs/asc-asset-manager-macros/LOG.old create mode 100644 src/packs/asc-asset-manager-macros/MANIFEST-000010 create mode 100644 src/templates/settings-menu-macro.hbs diff --git a/src/assets/download-solid.svg b/src/assets/download-solid.svg new file mode 100644 index 0000000..7b84625 --- /dev/null +++ b/src/assets/download-solid.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/main.js b/src/main.js index 5940532..2277bc3 100644 --- a/src/main.js +++ b/src/main.js @@ -7,7 +7,8 @@ export class AscAssetManager { static ID = 'asc-asset-manager' static TEMPLATES = { UPLOAD_CHOOSE:`modules/${this.ID}/templates/upload-choose.hbs`, - UPLOAD_FORM:`modules/${this.ID}/templates/upload-form.hbs` + UPLOAD_FORM:`modules/${this.ID}/templates/upload-form.hbs`, + SETTINGS_MENU_MACRO:`modules/${this.ID}/templates/settings-menu-macro.hbs` } static getDirectory () { @@ -34,14 +35,17 @@ export class AscAssetManager { } } +Hooks.on('init', ()=>CONFIG.debug.hooks = true) + Hooks.on("ready", function() { AscAssetManager.log(false, "Deno nodule reody") - registerSettings(AscAssetManager.ID); + registerSettings(AscAssetManager); }); -Hooks.on("ascAssetManager.renderUploadChoose", () => { - renderTemplate(AscAssetManager.TEMPLATES.UPLOAD_CHOOSE).then((content)=>{ - new Dialog({ +Hooks.on("ascAssetManager.renderUploadChoose", (data={}) => { + let {files} = data + renderTemplate(AscAssetManager.TEMPLATES.UPLOAD_CHOOSE, {moduleId: AscAssetManager.ID}).then((content)=>{ + const dialog = new Dialog({ title: "Choose", content: content, buttons: [], @@ -51,19 +55,23 @@ Hooks.on("ascAssetManager.renderUploadChoose", () => { const fileInput = html.find("#file-input"); const form = html.find("form") + if (files) { + fileInput.val(files) + } + // Handle drag-and-drop events uploadArea.on("dragover", (event) => { event.preventDefault(); - uploadArea.css("background-color", "#e0f7fa"); + uploadArea.addClass('dragover') }); uploadArea.on("dragleave", () => { - uploadArea.css("background-color", ""); + uploadArea.removeClass('dragover') }); uploadArea.on("drop", (event) => { event.preventDefault(); - uploadArea.css("background-color", ""); + // uploadArea.css("background-color", ""); const files = event.originalEvent.dataTransfer.files; if (files.length > 0) { AscAssetManager.log(false, 'file dropped change') @@ -73,7 +81,9 @@ Hooks.on("ascAssetManager.renderUploadChoose", () => { dataTransfer.items.add(file); // Add the first dropped file } fileInput.files = dataTransfer.files; - fileInput.trigger('change') + for (let file of fileInput.files) { + Hooks.callAll("ascAssetManager.renderUploadForm", {file}) + } } }); @@ -83,22 +93,56 @@ Hooks.on("ascAssetManager.renderUploadChoose", () => { uploadArea.find("p").text(`Selected file: ${Array.from(files).map(f=>f.name).join(', ')}`); }) - form.on('submit', (event) => { - for (let file of fileInput.files) { - Hooks.callAll("ascAssetManager.renderUploadForm", {file}) - } - }) - } }).render(true) }) }) -Hooks.on("ascAssetManager.renderUploadForm", (data)=>{ - const templateData = {fileCategories: AscAssetManager.fileCategories, fileTags: AscAssetManager.fileTags} +Hooks.on("renderHotbar", ({macros}, html) => { + // Find macro on the hotbar + for (let macro_item of macros) { + const {macro} = macro_item + if (macro?.command?.includes("ascAssetManager.renderUploadChoose")) { + AscAssetManager.log(false, `Found macro with command: ${macro.name}`); + + // Find the corresponding button in the hotbar + const macroButton = html.find(`.macro[data-macro-id='${macro.id}']`); + + if (macroButton.length > 0) { + AscAssetManager.log(false, `Adding custom drop event to macro: ${macro.name}`, {macro, macroButton}); + macroButton.addClass(AscAssetManager.ID) + + macroButton.on('dragover', (event)=>{ + AscAssetManager.log(false, {event}); + $(event.currentTarget).addClass('dragover'); + AscAssetManager.log(false, {classlist: event.currentTarget.classList}); + }) + macroButton.on('dragleave', (event)=>$(event.currentTarget).removeClass('dragover')) + + // Add a custom drop event to the macro + macroButton.on("drop", (event) => { + event.preventDefault(); + $(event.currentTarget).removeClass('dragover') + const files = event.originalEvent.dataTransfer.files; + AscAssetManager.log(false, "Dropped file on macro.", {files}); + + for (let file of files) { + Hooks.callAll("ascAssetManager.renderUploadForm", {file}) + } + + // Perform your custom logic with the dropped data + // handleCustomDrop(droppedData, macro); + }); + } + } + } +}); + +Hooks.on("ascAssetManager.renderUploadForm", (data={})=>{ + const templateData = {moduleId: AscAssetManager.ID, fileCategories: AscAssetManager.fileCategories, fileTags: AscAssetManager.fileTags} renderTemplate(AscAssetManager.TEMPLATES.UPLOAD_FORM, templateData).then(content => { let {file} = data - new Dialog({ + const dialog = new Dialog({ title: "Simple Popup", content: content, buttons: [], @@ -153,7 +197,10 @@ Hooks.on("ascAssetManager.renderUploadForm", (data)=>{ notify: true } ) - .then((res)=>AscAssetManager.log(false, 'Uploaded!', res)) + .then((res)=>{ + AscAssetManager.log(false, 'Uploaded!', res); + dialog.close() + }) .catch((e)=>ui.notifications.error('Error uploading', e)) }) } diff --git a/src/module.json b/src/module.json index c63a0cb..1f48002 100644 --- a/src/module.json +++ b/src/module.json @@ -13,9 +13,21 @@ } ], "esmodules": [ - "./main.js" + "main.js" ], "styles": [ - "./styles/style.css" + "styles/style.css" + ], + "packs": [ + { + "name": "asc-asset-manager-macros", + "label": "Asset Manager Macros", + "path": "packs/asc-asset-manager-macros", + "type": "Macro", + "ownership": { + "PLAYER": "OBSERVER", + "ASSISTANT": "OWNER" + } + } ] } \ No newline at end of file diff --git a/src/packs/asc-asset-manager-macros/000005.ldb b/src/packs/asc-asset-manager-macros/000005.ldb new file mode 100644 index 0000000000000000000000000000000000000000..483e9e95118d3c7452e920c182a10259092224ec GIT binary patch literal 687 zcmaJ;-D?v;5Z_I&YOq2Tv=mZJ7LgXN`MTPqQ3`FfHEQgKZHiEk&D~zIX7Bdg-D`}c z&_~e+Q3RnN1>Y6_3jYZO5&r?7`XZ=vDn9t&u(KaC^ZU)r&c|a9Q1*qD3#hB4&M8kg zS9;F9wJvXktE&q*g$8kFhlDg>q((L(A*q+0)0!D#6Vs3InPKfJ9^v80l|ev555lfV z+0}WM3Na_d_!gns9lSWzpdoEDl~*kEm`X2y-CyWPso55pxCCT8XakhHGSmelrO*XI zTT)RYRll&!snC-x5wppNhuwUSwIaaK*mR@<*y6VE>m|`!Yu>LuT;IG2KJCgVsktp= ziwZFKQb1l(3u7T{B6}fIy2B$<+aVtFX)Fw>741J%V>ec6&MtriZEFaD>s@WA!9)14 z8bJp<4sOd>xsW2gmG$CCaF-f3J%Zl3Qn4nGa~VSZQaSH9rKF&~HY}(o9|TOQN0s*d z_UTd794%kY&lDYqaTNm+Z=L7%S4tJ9;uI@W#p&Wq$tHpHxX)+DkX?34(^Z=Ys!iiW z&YJJvs$l#Har}7pWC}mErAj*49XPDJBr*M8HoxsXIUg^5_z4$J$sYg! literal 0 HcmV?d00001 diff --git a/src/packs/asc-asset-manager-macros/000008.ldb b/src/packs/asc-asset-manager-macros/000008.ldb new file mode 100644 index 0000000000000000000000000000000000000000..c3a5f4773604df3254c4ade5d8075d46422e956b GIT binary patch literal 634 zcmaJ;OK%e~5VlEz6!9tuh;l$mEDl9VHv35P0wERm7PZbB%P zdZq`&om0;U^~jkM{{bN+u3WjGO28~g92seBkH7gok7qt+pP|y5Y&oE=lDe!s;oO)y zPu92jFkD+(#2J*s;~f&xfRPT_jD)0KsjD@MNrl9-2w$AjuHq4%i(DB5H1r_tmXzDt zaH$YoA?62!YB#q~U!fr#F=Z$gdQ9c-zgQegso8*Bxe8i57y&boULu&T0i#NBkgW#! zHmc=LpVu`{PD8wZSk+Q+&(M<*kZ2N*r2^j4MEJ{=n6CGqww`Zn-33g$GQw})kAxgj z0kJOyJWD!ZB1DCN7*l%8BhuL+9`k7;V$v}yOLx#}$JvE+K}Q-uI6l%bjqyqR(~O{W zo&*nMqFi=%Q1X&UaF@ocQ9y^TRICr8T!v7QWgCuTrFG17%!1{#FQB8QRB7KIT_~b{ z(Y|K1O$TyZ#X!W{;N^o=tLZcyvspJAX4|Ty9pOH=FQJyzYBcPHdc8sf)$z)ya<(_S z*Tnb>;`rtD;xYWHB~|)~T?B?xx4YF3ui{%>1Hd;6D@ Ho1cCIme97` literal 0 HcmV?d00001 diff --git a/src/packs/asc-asset-manager-macros/000011.log b/src/packs/asc-asset-manager-macros/000011.log new file mode 100644 index 0000000..e69de29 diff --git a/src/packs/asc-asset-manager-macros/CURRENT b/src/packs/asc-asset-manager-macros/CURRENT new file mode 100644 index 0000000..3051f81 --- /dev/null +++ b/src/packs/asc-asset-manager-macros/CURRENT @@ -0,0 +1 @@ +MANIFEST-000010 diff --git a/src/packs/asc-asset-manager-macros/LOCK b/src/packs/asc-asset-manager-macros/LOCK new file mode 100644 index 0000000..e69de29 diff --git a/src/packs/asc-asset-manager-macros/LOG b/src/packs/asc-asset-manager-macros/LOG new file mode 100644 index 0000000..f2fe778 --- /dev/null +++ b/src/packs/asc-asset-manager-macros/LOG @@ -0,0 +1,3 @@ +2025/01/19-15:09:29.737471 17359b000 Recovering log #9 +2025/01/19-15:09:29.737887 17359b000 Delete type=3 #7 +2025/01/19-15:09:29.737973 17359b000 Delete type=0 #9 diff --git a/src/packs/asc-asset-manager-macros/LOG.old b/src/packs/asc-asset-manager-macros/LOG.old new file mode 100644 index 0000000..65b43b2 --- /dev/null +++ b/src/packs/asc-asset-manager-macros/LOG.old @@ -0,0 +1,5 @@ +2025/01/19-15:04:17.219781 17397b000 Recovering log #6 +2025/01/19-15:04:17.219809 17397b000 Level-0 table #8: started +2025/01/19-15:04:17.219961 17397b000 Level-0 table #8: 634 bytes OK +2025/01/19-15:04:17.220279 17397b000 Delete type=0 #6 +2025/01/19-15:04:17.220330 17397b000 Delete type=3 #4 diff --git a/src/packs/asc-asset-manager-macros/MANIFEST-000010 b/src/packs/asc-asset-manager-macros/MANIFEST-000010 new file mode 100644 index 0000000000000000000000000000000000000000..9767b8e5eb5b602d0c2b22d56a8d0320cacdd1eb GIT binary patch literal 192 zcmYejwd(gO21Z7yoYb<^oRlOzr^=Gl^338?=ltA)#G=HK{33P+j$bSain)o&Mft^w zMJYMPF6G8qLD`u}d4Yk>jLZyRKu`fY1M7NL+^U!e8N&!skdx*w&%waR#LdaT%)`PA E09+a~rT_o{ literal 0 HcmV?d00001 diff --git a/src/settings.js b/src/settings.js index d8fdb69..d8d9533 100644 --- a/src/settings.js +++ b/src/settings.js @@ -1,6 +1,7 @@ -export function registerSettings(ID) { +export function registerSettings(AscAssetManager) { console.log("Registering settings for My Module..."); - + const ID = AscAssetManager.ID + //Ability // Register the "enableFeature" setting game.settings.register(ID, "enableFeature", { name: "Enable Feature", @@ -45,4 +46,30 @@ export function registerSettings(ID) { console.log(`Theme changed to: ${value}`); } }); + + game.settings.registerMenu(ID, "instructions", { + name: "Add macro to hotbar", + label: "Get Macro", + scope: "world", + icon: "fas fa-code", + config: true, + type: class extends FormApplication { + static get defaultOptions() { + return mergeObject(super.defaultOptions, { + id: ID, // Unique ID for the application + title: "Simple Form Application", // Title of the window + template: AscAssetManager.TEMPLATES.SETTINGS_MENU_MACRO, // Path to your Handlebars template + width: 300, // Width of the form + height: "auto", // Adjust height automatically + }); + } + async getData() { + const macros = game.packs.get("asc-asset-manager.asc-asset-manager-macros").getDocuments() + return { + moduleId: ID, + macros: await macros + } + } + }, + }); } \ No newline at end of file diff --git a/src/styles/style.css b/src/styles/style.css index 30dbf29..36e4e46 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -1,7 +1,17 @@ -#upload-area { - border: 2px dashed #ccc; - padding: 20px; - text-align: center; - cursor: pointer; - background-color: #f9f9f9; -} \ No newline at end of file +.asc-asset-manager { + /* --dragover-border-color: #e0f7fa; */ + --dragover-border-color: var(--color-border-highlight); + + &#upload-area { + border: 2px dashed #ccc; + padding: 20px; + text-align: center; + cursor: pointer; + background-color: #f9f9f9; + } + + &.dragover { + border: 2px solid var(--dragover-border-color) !important; + } +} + diff --git a/src/templates/settings-menu-macro.hbs b/src/templates/settings-menu-macro.hbs new file mode 100644 index 0000000..ace76de --- /dev/null +++ b/src/templates/settings-menu-macro.hbs @@ -0,0 +1,20 @@ +
+
+ {{#each macros}} + + {{name}} + {{/each}} +
+
+

Drag this macro to your hotbar to make it easily accessible during gameplay!

+

You can drag the macro by clicking and holding the macro icon, then dropping it onto the hotbar at the bottom of your screen.

+
+
\ No newline at end of file diff --git a/src/templates/upload-choose.hbs b/src/templates/upload-choose.hbs index 0605c88..111a738 100644 --- a/src/templates/upload-choose.hbs +++ b/src/templates/upload-choose.hbs @@ -1,7 +1,6 @@
-
+

Drag files here to upload

- \ No newline at end of file diff --git a/src/templates/upload-form.hbs b/src/templates/upload-form.hbs index 0027133..ee2c541 100644 --- a/src/templates/upload-form.hbs +++ b/src/templates/upload-form.hbs @@ -1,6 +1,6 @@ -
+ - +