Slot for content / PDF support

elalekey commented 4 years ago

I was looking for the possibility to show one more PDF I couldn't find it... it would be good if there was a SLOT to be able to place the content you want.

lucaspulliese commented 4 years ago

Yep, add a slot for custom content sounds good, I will be working on it.

elalekey commented 4 years ago

Great @lucaspulliese awesome job!

One question.. can you do something similar with the zoom as in Slack? that even though you can already see the image in a respectable size.. you can make it an extra zoom, actually the library works perfectly.. but is it possible?

and.. to be able to add custom? buttons that one can generate one's own functionality..

I think it would be something simple like...

lucaspulliese commented 4 years ago

Sorry for the late replies, I'm currently very busy.

That zoom effect sounds good, I will try to add it. And yes, but I'm going to check if I can add it as a "repeatable slot".

Thanks for the ideas!

elalekey commented 4 years ago

Okay! good luck and awesome job.

lucaspulliese commented 4 years ago

I was doing the custom button enhancement, you think something like this it's ok for you?

Captura

This way you don't need to emit the event, also It's not possible to emit an event from a slot.

elalekey commented 4 years ago

Sorry I'm late.. that's fine I agree.. by the way a note, some companies like all designs to be uniform.. What do I mean with this? If the X is blue.. the rest of the buttons must be blue.. with the same width * height measurements, etc. I know I'm asking a lot but I do it as a suggestion..if the CLOSE button could be customizable..thanks anyway for all these optimizations.

lucaspulliese commented 4 years ago

It's ok, don't worry!

Yep, I should add a slot for the close button.

lucaspulliese commented 4 years ago

Hi @elalekey!

Now in version 2.3.0 you have the slot for the close button, and you have a prop called useZoomBar, by default is false. If you set that prop to true you can use a zoom like Slack.

I'm still working on the custom buttons and the custom content slot.

elalekey commented 4 years ago

Yo.. @lucaspulliese thanks you very very much. Do you have a release date for the pdf version?

btw bro remember the "read me" github for users, if there's anything I can help you with, let me know

lucaspulliese commented 4 years ago

remember the "read me" github for users, if there's anything I can help you with, let me know

Yes, I know, today I will update the readme, and the docs too.

Do you have a release date for the pdf version?

Not yet, I'm sorry, maybe this weekend. But just to be clear, do you want a slot where you can insert custom content right? The pdf is something that is on your own, isn't a functionality from the lightbox.

I'm correct?

lucaspulliese commented 4 years ago

I added a small fix in version 2.3.1, so if you use the zoom bar like Slack use that version :)

elalekey commented 4 years ago

Sorry for answering so late.. answering your previous question.. basically yes, I could use a slot to be able to place custom content.. regarding the PDF I think you could render it according to what you send it.. for example.. if the "type" is PDF instead of placing a tag you will place a to be able to render it. In the end both use an SRC to be able to render with the difference that the images are shown with <img> and the PDF with <iframe>. It occurs to me that you could place a PROP of type String where I can specify what type of content it is... if the string is a PDF you can have a conditioner with v-if which will have all the logic in the <iframe> and if it is Image / Video, a bit of the same.</p> <p>and bro.. thanks you very very much for the version 2.3.1 i'll use it <3</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lucaspulliese"><img src="https://avatars.githubusercontent.com/u/15676286?v=4" />lucaspulliese</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>It's ok bro!</p> <p>Ahhh It is simpler than I imagined, I forgot that with an iframe you could insert PDFs in the web, so I will try to have the PDF version today or tomorrow :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/elalekey"><img src="https://avatars.githubusercontent.com/u/41456459?v=4" />elalekey</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Take your time my bro. Grateful with your work</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lucaspulliese"><img src="https://avatars.githubusercontent.com/u/15676286?v=4" />lucaspulliese</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Hi bro! </p> <p>Update the lightbox to version <a href="https://www.npmjs.com/package/vue-cool-lightbox">2.3.2</a>. In that version when the item src is a pdf it will render an iframe with that PDF.</p> <p>Test it and tell me if everything is ok!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/elalekey"><img src="https://avatars.githubusercontent.com/u/41456459?v=4" />elalekey</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Thank you very much.. I'll try it and let you know</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/elalekey"><img src="https://avatars.githubusercontent.com/u/41456459?v=4" />elalekey</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I don't know if it's my idea but sometimes if the SRC is NULL and you open the vue-cool-lightbox to show some content the loader circle is not shown. It would be good to add that validation that as long as the SRC is NULL the loader is shown. I tried the PDF and it works perfectly.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/elalekey"><img src="https://avatars.githubusercontent.com/u/41456459?v=4" />elalekey</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@lucaspulliese i found a problem... when I tried to make a PDF stream with a signed Cloudfront URL and when I tried to return it, it got damaged.</p> <p><img src="https://user-images.githubusercontent.com/41456459/83309814-40c6ce00-a1d8-11ea-8638-f4ee843d6bbf.png" alt="image" /></p> <p><a href="http://xxxxxxxxx.cloudfront.net/792e61bf-433c-4485-8d22-b59df51d901d.pdf?Expires=1590790732&Policy=TOKENBLABLABLABLAH&Key-Pair-Id=APKBLABLABLA">http://xxxxxxxxx.cloudfront.net/792e61bf-433c-4485-8d22-b59df51d901d.pdf?Expires=1590790732&Policy=TOKENBLABLABLABLAH&Key-Pair-Id=APKBLABLABLA</a></p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/elalekey"><img src="https://avatars.githubusercontent.com/u/41456459?v=4" />elalekey</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Sometimes it detects the URL and gives no error but renders the item that is not .. I think the best thing for this case is that you put a prop to detect the item more easily .. What do I mean? </p> <p>props: { isPdf: { type: Boolean, required: false, default: false, } }</p> <p>In case isPdf is true, you would show the iframe, it would be a quick exit with code reduction.</p> <p><img src="https://user-images.githubusercontent.com/41456459/83318839-7387bb00-a206-11ea-9782-5635a99ef4e8.png" alt="image" /></p> <p>Sorry I can't show much in the image, the SRC contains credentials that I can't put as public :(</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lucaspulliese"><img src="https://avatars.githubusercontent.com/u/15676286?v=4" />lucaspulliese</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I thinks it is better for the developer just add the url and from the lightbox detect if is a pdf or not. </p> <p>But yes, I know what's happening. It was just a lazy solution from me haha. Currently the lightbox detects if the url ends with .pdf or not, obviously it was a bad idea.</p> <p>Sorry bro, I will try to fix it soon.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/elalekey"><img src="https://avatars.githubusercontent.com/u/41456459?v=4" />elalekey</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>I don't think it was a bad idea, I would have done the same as you, I'll keep an eye out, greetings!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kaypro4"><img src="https://avatars.githubusercontent.com/u/6536955?v=4" />kaypro4</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Hello, late to the conversation here but wanted to add that we're looking for a similar capability to allow embedding the filestack viewer which looks like it's done via iframe.</p> <p><a href="https://www.filestack.com/docs/concepts/transform/#document-viewer">https://www.filestack.com/docs/concepts/transform/#document-viewer</a></p> <p>If i'm understanding this right, seems like a slot for content would do the trick for us. Alternatively, adding an optional prop like <code>itemType</code> with options image, video, iframe, etc to override the internal detection of item type might also work. Especially since the code won't detect this filestack URL as a PDF.</p> <p>I think the optional slot for content seems like the solution that might make it most re-usable and less complex in the library code. </p> <p>Apologize if this is off context for the issue, just didn't want to add a duplicate issue to the list. </p> <p>Let me know if I can help with any requirements or testing. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lucaspulliese"><img src="https://avatars.githubusercontent.com/u/15676286?v=4" />lucaspulliese</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Hi @kaypro4! </p> <p>Thanks for your contribution.</p> <p>In this case I think there's no other way to do it, because, as you said, the lightbox won't be able to detect if is a PDF with a filestack file. The itemType prop I think is easier for me. </p> <p>On the other hand you said that If I add a slot for custom content it will work, but I can't think now how its gonna be developed, because at the moment the lightbox only works with array of items.</p> <p>Any suggestion is welcome!</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kaypro4"><img src="https://avatars.githubusercontent.com/u/6536955?v=4" />kaypro4</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Hi @lucaspulliese , yeah, thinking about it some more, not sure how the slot would work for passing in content since items is an array. Seems like an optional itemType (or maybe mediaType) item attribute might be the best solution which could serve as essentially an override to your auto detection of type.</p> <p>Maybe image, video, and iframe could be the options accepted. Hopefully if this is optional, and is an override to your existing detection, it would be backwards compatible. </p> <p>I'm happy to share more thoughts, and of course be a tester if/when that's useful.</p> <p>Thanks again for the work you're putting into this. We're super happy with the results in our app! </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lucaspulliese"><img src="https://avatars.githubusercontent.com/u/15676286?v=4" />lucaspulliese</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>@kaypro4 thank you so much for your help, I updated the readme.md and I will update the docs tomorrow. </p> <p>Now in version 2.3.4 you have your pull request merged, I did some small changes but it worked fine, the mediaType prop now it's working for each item, if you set those PDF url as iframe it will work fine.</p> <p>I'm going to add you and @elalekey to the acknowledgements section in the readme and on the page as soon as I can. </p> <blockquote> <p>I'm happy to share more thoughts</p> </blockquote> <p>Any help or thoughts are welcome!</p> <blockquote> <p>We're super happy with the results in our app!</p> </blockquote> <p>Cool! I would like to see how it looks in the app or see some screenshot of the lightbox working in the app :)</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lucaspulliese"><img src="https://avatars.githubusercontent.com/u/15676286?v=4" />lucaspulliese</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>And sorry, I didn't have much time to work on the component lately, and it took me a long time to do this feature.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/kaypro4"><img src="https://avatars.githubusercontent.com/u/6536955?v=4" />kaypro4</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Thanks @lucaspulliese! I'm amazed by your responsiveness so no apologies needed. </p> <p>Our app is in a limited beta for the next month but after that it'll be public and I'll share a URL. </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/elalekey"><img src="https://avatars.githubusercontent.com/u/41456459?v=4" />elalekey</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Thanks @lucaspulliese ! Amazing job.</p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/lucaspulliese"><img src="https://avatars.githubusercontent.com/u/15676286?v=4" />lucaspulliese</a> commented <strong> 4 years ago</strong> </div> <div class="markdown-body"> <p>Thanks to both!</p> <blockquote> <p>Our app is in a limited beta for the next month but after that it'll be public and I'll share a URL.</p> </blockquote> <p>Great! </p> </div> </div> <div class="comment"> <div class="user"> <a rel="noreferrer nofollow" target="_blank" href="https://github.com/shamshadpattani"><img src="https://avatars.githubusercontent.com/u/37972248?v=4" />shamshadpattani</a> commented <strong> 2 years ago</strong> </div> <div class="markdown-body"> <p>does it support doc (xlsx ,csv) files?</p> </div> </div> <div class="page-bar-simple"> </div> <div class="footer"> <ul class="body"> <li>© <script> document.write(new Date().getFullYear()) </script> Githubissues.</li> <li>Githubissues is a development platform for aggregating issues.</li> </ul> </div> <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js"></script> <script src="/githubissues/assets/js.js"></script> <script src="/githubissues/assets/markdown.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/highlight.min.js"></script> <script src="https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@11.4.0/build/languages/go.min.js"></script> <script> hljs.highlightAll(); </script> </body> </html>

lucaspulliese / vue-cool-lightbox

Slot for content / PDF support #32