Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

add image gallery #2465

Merged
merged 9 commits into from
Dec 24, 2018
Merged

add image gallery #2465

merged 9 commits into from
Dec 24, 2018

Conversation

daiyam
Copy link
Contributor

@daiyam daiyam commented Oct 2, 2018

This change adds the possibility to display image gallery.

## Gallery

```gallery(30h)
https://source.unsplash.com/2ShvY8Lf6l0/800x599
https://source.unsplash.com/Dm-qxdynoEc/800x799
https://source.unsplash.com/qDkso9nvCg0/600x799
https://source.unsplash.com/iecJiKe_RNg/600x799
https://source.unsplash.com/epcsn8Ed8kY/600x799
https://source.unsplash.com/NQSWvyVRIJk/800x599
https://source.unsplash.com/zh7GEuORbUw/600x799
https://source.unsplash.com/PpOHJezOalU/800x599
https://source.unsplash.com/I1ASdgphUH4/800x599
```

```gallery(autoplay=3000)
https://source.unsplash.com/NQSWvyVRIJk/800x599
https://source.unsplash.com/zh7GEuORbUw/600x799
https://source.unsplash.com/PpOHJezOalU/800x599
https://source.unsplash.com/I1ASdgphUH4/800x599
```

screenshot

@kazup01 kazup01 added the awaiting review ❇️ Pull request is awaiting a review. label Oct 5, 2018
@daiyam
Copy link
Contributor Author

daiyam commented Oct 8, 2018

I've updated the PR to support markdown image syntax inside the gallery block.

```gallery(20h)
:storage/3b6f8bd6-4edd-4b15-96e0-eadc4475b564/fad71156.jpg
```

```gallery(20h)
![#5.jpg](:storage/3b6f8bd6-4edd-4b15-96e0-eadc4475b564/f939b2c3.jpg)
```

@ZeroX-DG ZeroX-DG mentioned this pull request Nov 9, 2018
Open
ZeroX-DG
ZeroX-DG requested changes Nov 24, 2018
View reviewed changes
Copy link
Member

@ZeroX-DG ZeroX-DG left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The scrollbar of the image list doesn't seem to follow when you try to switch to an image outside the list

browser/main/lib/dataApi/attachmentManagement.js Outdated
@@ -227,7 +227,7 @@ function migrateAttachments (markdownContent, storagePath, noteKey) {
* @returns {String} postprocessed HTML in which all :storage references are mapped to the actual paths.
*/
function fixLocalURLS (renderedHTML, storagePath) {
return renderedHTML.replace(new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER + '.*?"', 'g'), function (match) {
return renderedHTML.replace(new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER + '(?:\\\/|%5C)[\\w.]+', 'g'), function (match) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can you add some comment explaining the regex?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I've undone the change because I don't remember why I've changed it. And it works with the original one...

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oops, now, I understand why 😁

![#5.jpg](:storage/3b6f8bd6-4edd-4b15-96e0-eadc4475b564/fad71156.jpg)

generates

<p data-line="1"><img src=":storage/3b6f8bd6-4edd-4b15-96e0-eadc4475b564/fad71156.jpg" alt="#5.jpg" /></p>

```gallery(30h)
![#5.jpg](:storage/3b6f8bd6-4edd-4b15-96e0-eadc4475b564/fad71156.jpg)
```

generates

<pre class="fence" data-line="1">
          <span class="filename"></span>
          <div class="gallery" data-autoplay="undefined" data-height="20">:storage/3b6f8bd6-4edd-4b15-96e0-eadc4475b564/fad71156.jpg</div>
</pre>

new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER + '.*?"', 'g') will only match the first image due to the need of the closing ".
new RegExp('/?' + STORAGE_FOLDER_PLACEHOLDER + '(?:\\\/|%5C)[\\w.]+', 'g') will match both images. The \\\/ is for posix systems and %5C is for windows.
It might need further testing on windows.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Couldn't you use the PATH_SEPARATORS variable which is defined at the top of the file?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PATH_SEPARATORS 's value is /\\ so it can't be used.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

could you, at least, use path.win32.sep and path.posix.sep? That would make clearer what the RegExp means..

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

path.win32.sep is \\ which is far from the needed %5C

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Then i am wondering whether you really need your %5C i mean: it dosen't appear everywhere else in the attachment-management, does it?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's the URI encoding of \. After I don't know where it's been done.

@ZeroX-DG ZeroX-DG added awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. and removed awaiting review ❇️ Pull request is awaiting a review. labels Nov 24, 2018
@daiyam
Copy link
Contributor Author

daiyam commented Nov 25, 2018

The scrollbar issue is due to the component. I will try to look at it when I have time.

@ZeroX-DG ZeroX-DG added approved 👍 Pull request has been approved by sufficient reviewers. and removed awaiting changes 🖊️ Pull request has been reviewed, but contributor needs to make changes. labels Nov 26, 2018
ZeroX-DG
ZeroX-DG approved these changes Nov 26, 2018
View reviewed changes
Copy link
Member

@ZeroX-DG ZeroX-DG left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM 🎉

@Rokt33r Rokt33r merged commit 5f385e4 into BoostIO:master Dec 24, 2018
@Rokt33r Rokt33r added next release (v0.11.13) and removed approved 👍 Pull request has been approved by sufficient reviewers. labels Dec 24, 2018
@daiyam daiyam deleted the gallery branch December 24, 2018 08:39
@noklam noklam mentioned this pull request Feb 24, 2019
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@ehhc ehhc ehhc left review comments

@ZeroX-DG ZeroX-DG ZeroX-DG approved these changes

Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
5 participants
@daiyam @ehhc @ZeroX-DG @Rokt33r @kazup01