[wip] Allow long captions #2

andi34 · 2020-08-12T10:05:47Z

Long caption solution by @PeterSweetAndSour

…ement' to avoid confusion with the boolean option of the same name a few lines below. Also add some extra whitespace to separate functions.

…ption to go under the picture and be able to scroll to see it.

…lement and arrows and figure out why it is failing on mobile.

… so arrows are above expanded caption.

…top/bottom gaps so that caption function can be initiated with just the event. Not sure if this is better or just different.

…howing.

…tion toggles now. Adding/removing whitespace for clarity.

…to indicate the end. Make caption text white so people like me can actually read it.

…apping on the caption because it is too easy to close accidentally when you thought you were swiping.

…nd/collapse arrows without another request to get an image and still have it work on IE11. Now need to get the event to fire when clicking on the arrow itself. Not sure it is worth the trouble.

…ize set explicitly so that it will work with IE11.

…n toggling the control.

…viewport is wide enough.

…o where the keydown events are handled. Also removing some console output.

Note that Google says that doing a CSS animation on height (and width) is bad for performance so I may revisit this later but it seems to work just fine. https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse

…her than attempting to manipulate an existing one.

…n a phone does not call the goTo function so the resetCaption function was not getting called which had some odd results.

Unfortunately it did not work reliably and so it is now commented out in the hope that someone else will understand how to fix it. Added lines 348 and 719 as I thought they might be why I could usually expand the caption with an upward swipe but could not close it. It seems those lines should be there but they did not seem to help so now commented out.

…en when allowLongCaptions is true. Don't close caption on vertical drag when allowLongCaption is true. Don't close caption when tap is on an element inside the caption

andi34 · 2020-09-05T09:29:06Z

If caption expanded and next picture contains a caption too it can not collapse the caption.
If caption is collapsed it's also working to expand/collapse caption of next picture or if previous opened picture does not have a caption.

andi34 · 2020-09-05T10:19:28Z

src/js/ui/photoswipe-ui-default.js

@@ -59,14 +59,14 @@

 					// If allowLongCaptions is true, position caption just under picture and show "Expand" button if necessary
 					if (_options.allowLongCaptions) {
-						var imagePositionTop = item.initialPosition.y;


It can't get item.initialPosition.y somehow

Uncaught TypeError: Cannot read property 'y' of undefined

This is a mystery since it was working for me earlier.

I am only using the title attribute, could this cause an issue? (See the index.html)

Have a good flight!

@andi34 I remembered to look at this again. In my rush to get out the door for our trip, I didn't understand the issue. My long caption solution has the captions - both the teaser and the full version - in
elements (one with class="figure__caption--thumbnail" and the other "figure__caption--fullsize") using the structure shown here https://github.com/dimsemenov/PhotoSwipe/blob/master/website/documentation/getting-started.md#-how-to-build-an-array-of-slides-from-a-list-of-links and then the Javascript harvests that information to create the options object. Aside from being easier (for me) to generate the HTML, instead of the JS that includes the options object, from the database , putting the information in the figcaption elements means that it can contain arbitrary HTML so links and even other images can be included.

I'm going to update the documentation to make that clear and also check that I have not broken it for those using only the title object for the standard implementation. I wish I had done that earlier since now I can barely remember how it works!

I noticed in commit 83885ed that you moved some declarations further up. I had it where it was so that code would only be exercised if _options.allowLongCaptions was true.

Do you have a public-facing test page? When I ran your index.html I did not see any captions.

Thanks for your reply!

There's a test page inside the source, only dist files haven't been generated.
You could clone my fork and checkout the "allow_long_captions-prettier" branch and generate them. I can do also and push to that branch if needed.

https://github.com/andi34/PhotoSwipe/blob/allow_long_captions-prettier/index.html

Without 83885ed it wasn't working and had some errors visible in the browser console. My fork is far ahead of the official tree, have added a lot of stuff from the open Pullrequests.

Thanks a lot for looking at it, let me know if you need anything :)

andi34 · 2020-09-05T10:21:40Z

src/js/ui/photoswipe-ui-default.js

 						var gapTop = item.vGap.top;

 						ui.resetCaption();
 						var naturalCaptionHeight = innerCaptionElement.clientHeight;

-						var captionCtrl = captionElement.querySelector('.pswp__button--caption--ctrl');
+						var captionCtrl = document.querySelector('.pswp__button--caption--ctrl');


Doesn't work without this...

PeterSweetAndSour · 2020-09-05T14:09:18Z

I think using title attribute shoud be OK. It seems an appropriate use. About to board plane now.

…

-------- Original Message --------

On Sep 5, 2020, 14:57, Andreas Blaesius wrote: @andi34 commented on this pull request. --------------------------------------------------------------- In [src/js/ui/photoswipe-ui-default.js](#2 (comment)): > @@ -59,14 +59,14 @@ // If allowLongCaptions is true, position caption just under picture and show "Expand" button if necessary if (_options.allowLongCaptions) { - var imagePositionTop = item.initialPosition.y; I am only using the title attribute, could this cause an issue? (See the index.html) Have a good flight! — You are receiving this because you were mentioned. Reply to this email directly, [view it on GitHub](#2 (comment)), or [unsubscribe](https://github.com/notifications/unsubscribe-auth/ABPUROFZZA5XDRM4RDARZGLSEI7THANCNFSM4P4OBIRA).

andi34 force-pushed the master branch 2 times, most recently from 0c558bc to cc99a07 Compare August 12, 2020 17:17

andi34 force-pushed the allow_long_captions-prettier branch from 67cdd34 to 2679c13 Compare August 12, 2020 17:58

andi34 mentioned this pull request Aug 12, 2020

[wip] Allow long captions #1

Closed

andi34 changed the title ~~[wip] Allow long captions prettier~~ [wip] Allow long captions Aug 12, 2020

andi34 force-pushed the master branch 5 times, most recently from cbe905f to a8277d0 Compare August 23, 2020 08:49

PeterSweetAndSour added 20 commits September 4, 2020 18:36

Rename framework.createEl to framework.createElement for clarity.

d8d0410

Rename function argument of a DOM node from 'captionEl' to 'captionEl…

3d968ea

…ement' to avoid confusion with the boolean option of the same name a few lines below. Also add some extra whitespace to separate functions.

Capture the calculated size of the image and set an option for the ca…

dae5c97

…ption to go under the picture and be able to scroll to see it.

Move new option to the UI file.

09d9b20

First pass with something that works. Need to fix z-index on captionE…

a2e8e60

…lement and arrows and figure out why it is failing on mobile.

Rename button to be consistent pattern with others. Fix z-index issue…

52becb6

… so arrows are above expanded caption.

Fix display/hiding of expand control when switching photos.

2a4a41f

Set data attributes on .pswp__item to carry initial image height and …

0f1e189

…top/bottom gaps so that caption function can be initiated with just the event. Not sure if this is better or just different.

Rename function to indicate that it is private.

c4511c4

Save so far now that positioning is correct. Need to fix hiding and s…

9591a4c

…howing.

Somewhat closer. Accounting for scale but only on first load. :-( Cap…

2983364

…tion toggles now. Adding/removing whitespace for clarity.

Seems to work.

11eef5e

Stop accidental scroll on close. Add a box at the end of the caption …

a71e6db

…to indicate the end. Make caption text white so people like me can actually read it.

Polyfill for closest() for IE11

b5e4f45

Various fixes

219be4c

Sorted out weirdness with tap behavior. Now preventing closing when t…

298e77e

…apping on the caption because it is too easy to close accidentally when you thought you were swiping.

Renaming option name and removing redundant code.

534b671

Drag up on collapsed caption will expand it.

43453c3

Swap out two lines of SVG for two dozen lines of CSS to make the expa…

493af2b

…nd/collapse arrows without another request to get an image and still have it work on IE11. Now need to get the event to fire when clicking on the arrow itself. Not sure it is worth the trouble.

Back to SVG background images but now Base64 encoded and background s…

aa2a947

…ize set explicitly so that it will work with IE11.

PeterSweetAndSour added 11 commits September 4, 2020 19:42

Ensure HTML exists for caption control and change title on button whe…

f20655e

…n toggling the control.

Allow left/right buttons to show above expanded caption overlay when …

fd24fe1

…viewport is wide enough.

Now with keyboard control.

ab38d3e

Moving the setting of tabindex and focus on the innerCaptionElement t…

599f1b0

…o where the keydown events are handled. Also removing some console output.

Animate expansion and collapse of caption.

d16f1e9

Note that Google says that doing a CSS animation on height (and width) is bad for performance so I may revisit this later but it seems to work just fine. https://developers.google.com/web/updates/2017/03/performant-expand-and-collapse

Get around cross-site security issue by creating a new stylesheet rat…

d8e13fd

…her than attempting to manipulate an existing one.

A bit of rearrangement as I discovered that dragging to a new photo o…

d8fe302

…n a phone does not call the goTo function so the resetCaption function was not getting called which had some odd results.

Increase the width of the caption if long captions are selected.

99a15f9

Add "FYI" to console notices explaining that two options are overridd…

661065d

…en when allowLongCaptions is true. Don't close caption on vertical drag when allowLongCaption is true. Don't close caption when tap is on an element inside the caption

Remove some console output and updated generated files.

17bf594

andi34 force-pushed the allow_long_captions-prettier branch from 2679c13 to 17bf594 Compare September 4, 2020 18:25

PeterSweetAndSour and others added 2 commits September 5, 2020 09:14

Expand and collapse caption with just the mouse wheel

507a2f5

Add long caption to index

d9cd2ec

andi34 mentioned this pull request Sep 5, 2020

Allow captions of arbitrary length and content dimsemenov/PhotoSwipe#1692

Open

andi34 commented Sep 5, 2020

View reviewed changes

andi34 and others added 2 commits September 6, 2020 10:15

seems to work

83885ed

Increase font size

2e70369

andi34 force-pushed the allow_long_captions-prettier branch from 07ff53d to 2e70369 Compare September 6, 2020 08:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[wip] Allow long captions #2

[wip] Allow long captions #2

andi34 commented Aug 12, 2020 •

edited

Loading

andi34 commented Sep 5, 2020

andi34 Sep 5, 2020

andi34 Sep 5, 2020

PeterSweetAndSour Sep 5, 2020

andi34 Sep 5, 2020

PeterSweetAndSour Sep 27, 2020

andi34 Sep 27, 2020 •

edited

Loading

andi34 Sep 5, 2020

PeterSweetAndSour commented Sep 5, 2020 via email

[wip] Allow long captions #2

Are you sure you want to change the base?

[wip] Allow long captions #2

Conversation

andi34 commented Aug 12, 2020 • edited Loading

andi34 commented Sep 5, 2020

andi34 Sep 5, 2020

Choose a reason for hiding this comment

andi34 Sep 5, 2020

Choose a reason for hiding this comment

PeterSweetAndSour Sep 5, 2020

Choose a reason for hiding this comment

andi34 Sep 5, 2020

Choose a reason for hiding this comment

PeterSweetAndSour Sep 27, 2020

Choose a reason for hiding this comment

andi34 Sep 27, 2020 • edited Loading

Choose a reason for hiding this comment

andi34 Sep 5, 2020

Choose a reason for hiding this comment

PeterSweetAndSour commented Sep 5, 2020 via email

andi34 commented Aug 12, 2020 •

edited

Loading

andi34 Sep 27, 2020 •

edited

Loading