activist
activist copied to clipboard
activist-org
Open QR Code in new page on click
Terms
- [X] I have searched open and closed feature requests
- [X] I agree to follow activist's Code of Conduct
Description
In #473 we were able to add in the ability to download QR Codes for pages in multiple formats. This functionality can be seen on say the about page of an event where clicking the QR Code icon will open the modal where the download functionality is. It would be great if we could add in one final functionality to this modal, which would be that the user could click the QR Code and have it open in a new tab. We'd need to alert the user that this would happen by applying cursor-pointer to QRCode in ModalQRCode, and beyond this adding a tooltip on hover that indicates that clicking will open it in a new page would also be helpful.
Contribution
Happy to support someone who wants to work on this!
Hey @Vidhanvyrs! Nice to hear from you again 😊 Sure thing! Please let me know if I can do anything to help :)
hey @andrewtavis i need some help ! I just want to know how can i get the url of the qr code because my function is ready with the tooltip and all its just i was unable to find the url of the qrcode which we wanted to open in a new tab
This is a great question, @Vidhanvyrs :) Made the issue and then realized that this could be more complex than I expected 🤔 I guess that we want to be able to open the image that's being saved in a new window, but there's no URL for it as it's generated in the frontend. Is there a way of copying the functionality of "open in a new window" without a URL? I guess not. We could make a URL for it that's based on the route for the event or organization and then at that route it'd just be the code? Can you think of anything else?
As we have a dynamically generated image on the frontend and we want that same image to open it in a new window, we can indeed create a temporary URL for it. One approach is to convert the image data into a data URL and use that as the source for the new window Now that is something to be researched iny give me some time may be I could come up with something that might solve it🙂
Sounds wonderful, @Vidhanvyrs! We could also potentially make a route in pages/events/[id] and the like for organizations, if need be :) Let me know if there's something you find and want to check on!
Hey @Vidhanvyrs 👋 How's all with this issue here? Let me know if there's anything I can do to support!
Most modern browsers do not support opening a data URL in the top-frame (such as Mozilla Firefox and Google Chrome. One approach is to open a new window using window.open, then write an image or iFrame to that window. This may be blocked by browsers as a pop-up window, and it is not as easy to save as an image since the page is not a simple image. This is the approach I used.
The better approach would probably be to, as was mentioned earlier here, create a backend version of the image that can be opened, potentially temporarily. This would allow for opening the actual image, which might be more intuitive. Also, it could allow for using an anchor element, which matches with its role better.
Hey @Robot8lover! Thanks for the work here and further explanations! I'll review the PR soon - likely next week as I'm away this weekend :)
Sounds like the current approach is fine for an initial take on this, and then I can compile the information in this issue into a new one to rework it based on a backend object. Will make that post review and tag you in there so you can keep an eye on it! 😊
Closed by #887 🥳 Congrats on being contributor number 100, @Robot8lover! I had had it in mind for some time that it'd be good to give you the honor given all the work you picked up in one go :) :) Thanks again so much for this!
@andrewtavis Thank you! It really means a lot. You have a very interesting project!
Let's be in touch on another issue once everything else is merged 😊 There will definitely be some conflicts coming through as I've got loads of changes locally, but I'll handle them when they're up. Happy to also do a call at some point if you have questions about activist or want to talk the context of another issue!