added drag and drop functionality

[stephaniequintana]

trafficstars

This PR fixes the drag and drop functionality of issue #0415 It focuses only on the function itself. I will open a separate PR which will include changes to the UI (a visually-designed drop-zone, corrected font-size, improved user-guidance and relocation of the <input> element.. )

• [x] PR is descriptively titled 📑 and links the original issue above 🔗
• [x] tests pass -- look for a green checkbox ✔️ a few minutes after opening your PR
• [x] code is in uniquely-named feature branch and has no merge conflicts 📁
• [x] screenshots/GIFs are attached 📎 in case of UI updation
• [x] ask @publiclab/reviewers for help, in a comment below

[gitpod-io[bot]]

[stephaniequintana]

@jywarren, @TildaDares, @cesswairimu,

Admittedly, this functionality is very simplistic. Currently, it only includes the drop and drag-over events. Also, it does not work in Safari (apparently iOS does not readily support drag and drop and after searching long and wide for a solution I digressed).

Please let me know if you are aware of a polyfil or library that might better address this.

This functionality is reflected at https://stephaniequintana.github.io/infragram/index2.html

---

Aside: I've recently realized that #0435 fixed the tabbing for keyboard-accessibility but my "solution" actually broke the ability to click the input element. I will correct this in my next PR which will also create a visually improved drop-zone.

[TildaDares]

This is amazing work @stephaniequintana! Just a quick question, does the Safari issue also occur on MacOS? Because I tried it on my Mac's Safari and it works fine.

[stefq2]

@TildaDares, that's fantastic!! It didn't work on my MacBook Air (laptop) and that is the only iOS that I "tested" it on. I am super stoked to hear it worked on yours! 🎉 🥳 I also noticed many styling issues that I need to address for iOS - I will add it to my list 😄

&&& THANK YOU !!!! 🙏 Getting the file to transfer was a big win for me 🚀

[Forchapeatl]

Nicely done ! :) @stephaniequintana , Just a few observations.

• File upload not working
• Video file not dropping .

Should I merge this PR https://github.com/publiclab/infragram/pull/439. so that we can work on the drag and together ?

[stephaniequintana]

@Forchapeatl, I think you should merge #0439, everything seems good on that PR, great work, btw! (perhaps you can add the temporary fix to the file-upload to #0439 so that it at least will work for now(?) - change visibility-hidden back to d-none on the input element)

I've identified exactly why the file-upload/video-file -is-not-dropping: in PR #0435 when I corrected keyboard accessibility I changed display none on that element to visibility-hidden.

• display-none will does not allow for keyboard-accessibility.
• I didn't realize until after the merge that visibility-hidden with the given css size specs makes it virtually impossible to be clicked.
• The best solution is to use opacity: 0, but this is causing very unfavorable spacing issues bc even though we cannot "see" the element, it is not taken out of flow and is very large and is pushing the other header elements far off.

The solution should be simple: utilizing opacity:0 and resizing the <input> element. I am playing around with other UI changes and was waiting [with no particular reason] until those are complete to address it.

Yes, please help with the drag and drop functionality. I've created a very simple function on #0440, it works but is lacking. I am still working on organizing links for the navigation tour and hope to open PRs towards that in a few days.

[Forchapeatl]

@stephaniequintana , please have a look at this https://github.com/publiclab/infragram/pull/445. Can you provide me with the links to resources which helped you in creating the drag an drop function ?

[jywarren]

Love to see this coordination and collaboration. Great work everyone!

Let me know if you get one ready to merge!

[stephaniequintana]

@Forchapeatl

Or I might change the code completely

Please feel free to completely change the code. I'd have to dive deep to find the resources I used and felt all along that the final code is lacking, but I couldn't find resources for a Safari fix. Please, I would greatly appreciate your help. Thank you ❤️

[Forchapeatl]

@stephaniequintana okay

[jywarren]

Hi! It's ok to do Safari in a separate PR. Is it true that it doesn't work in for example https://jywarren.github.io/bookletize.js/ ?

On Thu, Jul 28, 2022, 10:39 AM Stephanie Quintana @.***> wrote:

@jywarren https://github.com/jywarren, @TildaDares https://github.com/TildaDares, @cesswairimu https://github.com/cesswairimu,

Admittedly, this functionality is very simplistic. Currently, it only includes the drop and drag-over events. Also, it does not work in Safari (apparently iOS does not readily support drag and drop and after searching long and wide for a solution I digressed).

Please let me know if you are aware of a polyfil or library that might better address this.

This functionality is reflected at https://stephaniequintana.github.io/infragram/index2.html

Aside: I've recently realized that #435 https://github.com/publiclab/infragram/pull/435 fixed the tabbing for keyboard-accessibility but my "solution" actually broke the ability to click the input element. I will correct this in my next PR which will also create a visually improved drop-zone.

— Reply to this email directly, view it on GitHub https://github.com/publiclab/infragram/pull/440#issuecomment-1198233374, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAAF6JZTEMUCUYO5OHSC2PLVWKLRJANCNFSM545N3VIQ . You are receiving this because you were mentioned.Message ID: @.***>