Skip to content

Commit

Permalink
New: Thumbnails Sidebar (#932)
Browse files Browse the repository at this point in the history
  • Loading branch information
Conrad Chan authored Feb 19, 2019
1 parent 66ed344 commit 4d3ecc3
Show file tree
Hide file tree
Showing 75 changed files with 3,285 additions and 254 deletions.
36 changes: 36 additions & 0 deletions UPGRADING.md
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.
2 changes: 2 additions & 0 deletions src/i18n/en-US.properties
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,8 @@ loading_preview=Loading Preview...
download_file=Download File
# Text shown when a text file has been truncated due to size limits.
text_truncated=This file has been truncated due to size limits. Please download to view the whole file.
# Button tooltip to toggle Thumbnails Sidebar
toggle_thumbnails=Toggle thumbnails

# Error messages
# Default preview error message
Expand Down
8 changes: 5 additions & 3 deletions src/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,10 @@
<input id='fileid-set' placeholder='Enter file ID' data-testid="fileid"/>
<button onClick="setProperty('fileid')" data-testid="fileid-set">Set new file ID</button>
</div>

<div class='container' id='load'>
<button onClick="loadPreview()" data-testid="load-preview">Load Preview</button>
</div>
</div>

<div class='preview-container' data-testid="preview-container"> </div>
Expand All @@ -77,9 +81,6 @@

// Cache it in local storage
localStorage.setItem(selector, value)

// Attempt to load Preview
loadPreview();
}

function loadPreview(options) {
Expand All @@ -102,6 +103,7 @@
// Try to load all properties from storage on page load
setProperty('token');
setProperty('fileid');
loadPreview();
</script>
</body>
</html>
62 changes: 62 additions & 0 deletions src/lib/BoundedCache.js
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;
3 changes: 3 additions & 0 deletions src/lib/Preview.js
Original file line number Diff line number Diff line change
Expand Up @@ -937,6 +937,9 @@ class Preview extends EventEmitter {
// Options that are applicable to certain file ids
this.options.fileOptions = options.fileOptions || {};

// Option to enable use of thumbnails sidebar for document types
this.options.enableThumbnailsSidebar = !!options.enableThumbnailsSidebar;

// Prefix any user created loaders before our default ones
this.loaders = (options.loaders || []).concat(loaderList);

Expand Down
1 change: 1 addition & 0 deletions src/lib/Preview.scss
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,4 @@
@import 'navigation';
@import './Controls';
@import './ProgressBar';
@import './VirtualScroller';
Loading

0 comments on commit 4d3ecc3

Please sign in to comment.