-
Notifications
You must be signed in to change notification settings - Fork 113
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.
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
New: Thumbnails Sidebar #932
Merged
Merged
Changes from all commits
Commits
Show all changes
29 commits
Select commit
Hold shift + click to select a range
ce82772
New: Thumbnails toggle button (#875)
76bab2a
New: Thumbnails toggle sidebar (#876)
3586c89
New: Expose thumbnails sidebar as preview option (#879)
631c554
New: Virtual scroll for the thumbnails sidebar (#880)
ca1dceb
Chore: adding unit tests for VirtualScroller (#882)
5be7787
Update: Thumbnails sidebar images (#887)
63061a7
Chore: unit tests for ThumbnailsSidebar and VirtualScroller (#888)
5a132f3
Update: Use correct thumbnails toggle icon (#890)
64a3fb9
Update: Thumbnails navigation (#889)
66ced4d
Chore: unit tests for Thumbnail Sidebar clicks (#891)
cfb9b9f
Update: Emit metrics for Thumbnail Sidebar usage (#892)
5d67e63
Chore: Thumbnail metrics unit tests (#894)
2dc3174
Update: Handle non uniform thumbnail sizes (#896)
f1417d4
Update: Emit thumbnails[Open|Close] viewer event (#898)
dba419e
Update: Change VirtualScroller.renderItems strategy (#900)
e9037fd
Update: Serially render thumbnail images (#901)
713da29
Update: Scroll into view (#906)
f07961b
Chore: fixing BaseViewer-test.js after rebase
240ad38
Chore: adding e2e tests for Thumbnails (#915)
3321ff2
Update: Add BoundedCache for Thumbnails Sidebar (#917)
42ebb44
Chore: Change thumbnail selection to be #444 (#920)
68c0ff7
Chore: Remove fractional thumbnail heights (#919)
8f37b46
Chore: Render the visible thumbnails first (#924)
ad6c761
Chore: Handle Thumbnails Sidebar resize event (#925)
8172a6f
Chore: Fix fullscreen nav and hide toggle thumbnail button (#926)
872cce7
Chore: Fix BaseMediaViewer's lowerlights mode (#928)
f0b73b9
Chore: Safari fullscreen (#930)
43ff2b3
Chore: Move loading wrapper inside bp-content (#931)
4a09b70
Chore: Rename ThumbnailsImageCache to BoundedCache test
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
Upgrading Guide | ||
========================= | ||
|
||
Upgrading from 1.x to 2.x | ||
------------------------- | ||
Version 2 includes a breaking change to the DOM structure of the Preview element. | ||
|
||
In version 1, the `.bp-navigate` buttons were siblings with the `.bp` container div | ||
``` | ||
<div class="bp" tabindex="0"> | ||
... | ||
</div> | ||
<button class="bp-btn-plain bp-navigate bp-navigate-left bp-is-hidden"> | ||
... | ||
</button> | ||
<button class="bp-btn-plain bp-navigate bp-navigate-right bp-is-hidden"> | ||
... | ||
</button> | ||
``` | ||
But in version 2, the buttons are now inside a new container div `.bp-content`. | ||
``` | ||
<div class="bp" tabindex="0"> | ||
<div class="bp-content"> | ||
<button class="bp-btn-plain bp-navigate bp-navigate-left bp-is-hidden"> | ||
... | ||
</button> | ||
<button class="bp-btn-plain bp-navigate bp-navigate-right bp-is-hidden"> | ||
... | ||
</button> | ||
</div> | ||
</div> | ||
``` | ||
|
||
`.bp-content` is also the new point in which the various viewers will be dynamically inserted as children, i.e. `.bp-doc`, `.bp-image`, etc... | ||
|
||
This change in structure is to account for the new thumbnails sidebar which will appear to the left of the viewer content. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,62 @@ | ||
import Cache from './Cache'; | ||
|
||
class BoundedCache extends Cache { | ||
/** @property {Array} - Maintains the list of cache keys in order in which they were added to the cache */ | ||
cacheQueue; | ||
|
||
/** @property {number} - The maximum number of entries in the cache */ | ||
maxEntries; | ||
|
||
/** | ||
* [constructor] | ||
* | ||
* @param {number} [maxEntries] - Override the maximum number of cache entries | ||
*/ | ||
constructor(maxEntries) { | ||
super(); | ||
|
||
this.maxEntries = maxEntries || 500; | ||
this.cache = {}; | ||
this.cacheQueue = []; | ||
} | ||
|
||
/** | ||
* Destroys the bounded cache | ||
* | ||
* @return {void} | ||
*/ | ||
destroy() { | ||
this.cache = null; | ||
this.cacheQueue = null; | ||
} | ||
|
||
/** | ||
* Caches a simple object in memory. If the number of cache entries | ||
* then exceeds the maxEntries value, then the earliest key in cacheQueue | ||
* will be removed from the cache. | ||
* | ||
* @param {string} key - The cache key | ||
* @param {*} value - The cache value | ||
* @return {void} | ||
*/ | ||
set(key, value) { | ||
// If this key is not already in the cache, then add it | ||
// to the cacheQueue. This avoids adding the same key to | ||
// the cacheQueue multiple times if the cache entry gets updated | ||
if (!this.inCache(key)) { | ||
this.cacheQueue.push(key); | ||
} | ||
|
||
super.set(key, value); | ||
|
||
// If the cacheQueue exceeds the maxEntries then remove the first | ||
// key from the front of the cacheQueue and unset that entry | ||
// from the cache | ||
if (this.cacheQueue.length > this.maxEntries) { | ||
const deleteKey = this.cacheQueue.shift(); | ||
this.unset(deleteKey); | ||
} | ||
} | ||
} | ||
|
||
export default BoundedCache; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -3,3 +3,4 @@ | |
@import 'navigation'; | ||
@import './Controls'; | ||
@import './ProgressBar'; | ||
@import './VirtualScroller'; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
You could initialize
cacheQueue
as a class field, above the constructor.No need to set
this.cache
since that will happen in thesuper
callAlso, give a default value to
maxEntries
parameter, then you can remove the||