added drag and drop functionality

stephaniequintana commented 2 years ago

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] commented 2 years ago

stephaniequintana commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

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 commented 2 years ago

@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 commented 2 years ago

@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 commented 2 years ago

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

Let me know if you get one ready to merge!

stephaniequintana commented 2 years ago

@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 commented 2 years ago

@stephaniequintana okay

jywarren commented 1 year ago

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: @.***>

publiclab / infragram

added drag and drop functionality #440

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