yetangitu/nextcloud-apps
1
0
Fork 0
mirror of https://github.com/Yetangitu/owncloud-apps.git synced 2025-10-03 14:59:19 +02:00
Code Issues Releases Wiki Activity

reader: lots'a changes again, still in flux...

Browse source
This commit is contained in:
frankdelange 2017-02-14 21:17:50 +01:00
parent 57a76be890
commit c7ba1e3fb1
9 changed files with 265 additions and 211 deletions
Download patch file Download diff file Expand all files Collapse all files

8
reader/appinfo/routes.php
View file

@ -15,10 +15,10 @@ return ['routes' => [
['name' => 'page#showReader', 'url' => '/', 'verb' => 'GET'], ['name' => 'page#showReader', 'url' => '/', 'verb' => 'GET'],
// Bookmarks // Bookmarks
['name' => 'bookmark#get_cursor', 'url' => '/position/cursor/{fileId}', 'verb' => 'GET'], ['name' => 'bookmark#get_cursor', 'url' => '/bookmark/cursor/{fileId}', 'verb' => 'GET'],
['name' => 'bookmark#set_cursor', 'url' => '/position/cursor/{fileId}/{value}', 'verb' => 'POST'], ['name' => 'bookmark#set_cursor', 'url' => '/bookmark/cursor/{fileId}/{value}', 'verb' => 'POST'],
['name' => 'bookmark#get', 'url' => '/position/{fileId}/{name}', 'verb' => 'GET', 'defaults' => ['name' => '']], ['name' => 'bookmark#get', 'url' => '/bookmark/{fileId}/{name}', 'verb' => 'GET', 'defaults' => ['name' => '']],
['name' => 'bookmark#set', 'url' => '/position/{fileId}/{name}/{value}', 'verb' => 'POST'], ['name' => 'bookmark#set', 'url' => '/bookmark/{fileId}/{name}/{value}', 'verb' => 'POST'],
// Metadata // Metadata
['name' => 'metadata#get', 'url' => '/metadata/{fileId}/{name}', 'verb' => 'GET', 'defaults' => ['name' => '']], ['name' => 'metadata#get', 'url' => '/metadata/{fileId}/{name}', 'verb' => 'GET', 'defaults' => ['name' => '']],

1
reader/lib/Controller/PageController.php
View file

@ -79,6 +79,7 @@ class PageController extends Controller {
'cursor' => $this->toJson($this->bookmarkService->getCursor($fileId)), 'cursor' => $this->toJson($this->bookmarkService->getCursor($fileId)),
'defaults' => $this->toJson($this->preferenceService->getDefault($scope)), 'defaults' => $this->toJson($this->preferenceService->getDefault($scope)),
'preferences' => $this->toJson($this->preferenceService->get($scope, $fileId)), 'preferences' => $this->toJson($this->preferenceService->get($scope, $fileId)),
'defaults' => $this->toJson($this->preferenceService->getDefault($scope)),
'metadata' => $this->toJson($this->metadataService->get($fileId)) 'metadata' => $this->toJson($this->metadataService->get($fileId))
]; ];

13
reader/lib/Db/Bookmark.php
View file

@ -12,12 +12,23 @@ namespace OCA\Files_Reader\Db;
use OCP\AppFramework\Db\Entity; use OCP\AppFramework\Db\Entity;
class Bookmark extends Entity { class Bookmark extends ReaderEntity implements \JsonSerializable {
protected $userId; // user protected $userId; // user
protected $fileId; // book (identified by fileId) for which this mark is valid protected $fileId; // book (identified by fileId) for which this mark is valid
protected $name; // name, defaults to $location protected $name; // name, defaults to $location
protected $value; // bookmark value (format-specific, eg. page number for PDF, CFI for epub, etc) protected $value; // bookmark value (format-specific, eg. page number for PDF, CFI for epub, etc)
protected $lastModified; // modification timestamp protected $lastModified; // modification timestamp
public function jsonSerialize() {
return [
'id' => $this->getId(),
'userId' => $this->getUserId(),
'fileId' => $this->getFileId(),
'name' => $this->getName(),
'value' => static::conditional_json_decode($this->getValue()),
'lastModified' => $this->getLastModified(),
];
}
} }

13
reader/lib/Db/Preference.php
View file

@ -12,7 +12,7 @@ namespace OCA\Files_Reader\Db;
use OCP\AppFramework\Db\Entity; use OCP\AppFramework\Db\Entity;
class Preference extends Entity { class Preference extends ReaderEntity implements \JsonSerializable {
protected $userId; // user for whom this preference is valid protected $userId; // user for whom this preference is valid
protected $scope; // scope (default or specific renderer) protected $scope; // scope (default or specific renderer)
@ -20,5 +20,16 @@ class Preference extends Entity {
protected $name; // preference name protected $name; // preference name
protected $value; // preference value protected $value; // preference value
protected $lastModified; // modification timestamp protected $lastModified; // modification timestamp
public function jsonSerialize() {
return [
'id' => $this->getId(),
'scope' => $this->getScope(),
'fileId' => $this->getFileId(),
'name' => $this->getName(),
'value' => $this->conditional_json_decode($this->getValue()),
'lastModified' => $this->getLastModified(),
];
}
} }

18
reader/lib/Service/BookmarkService.php
View file

@ -15,8 +15,8 @@ use OCA\Files_Reader\Db\BookmarkMapper;
class BookmarkService extends Service { class BookmarkService extends Service {
// use 'CURSOR_$UserId' to identify cursor (current position in book) // "bookmark" name to use for the cursor (current reading position)
const CURSOR = 'CURSOR'; const CURSOR = '__CURSOR__';
private $bookmarkMapper; private $bookmarkMapper;
private $userId; private $userId;
@ -41,11 +41,7 @@ class BookmarkService extends Service {
$result = $this->bookmarkMapper->get($fileId, $name); $result = $this->bookmarkMapper->get($fileId, $name);
return array_map( return array_map(
function($entity) { function($entity) {
return [ return $entity->toService();
'name' => $entity->getName(),
'value' => $entity->getValue(),
'lastModified' => $entity->getLastModified()
];
}, $result); }, $result);
} }
@ -72,10 +68,7 @@ class BookmarkService extends Service {
* @return array * @return array
*/ */
public function getCursor($fileId) { public function getCursor($fileId) {
$cursor = self::CURSOR . '_' . $this->userId; return $this->get($fileId, static::CURSOR);
if (!empty($value = $this->get($fileId, $cursor))) {
return $value[0];
}
} }
/** /**
@ -87,8 +80,7 @@ class BookmarkService extends Service {
* @return array * @return array
*/ */
public function setCursor($fileId, $value) { public function setCursor($fileId, $value) {
$cursor = self::CURSOR . '_' . $this->userId; return $this->bookmarkMapper->set($fileId, static::CURSOR, $value);
return $this->bookmarkMapper->set($fileId, $cursor, $value);
} }
} }

6
reader/lib/Service/PreferenceService.php
View file

@ -44,11 +44,7 @@ class PreferenceService extends Service {
$result = $this->preferenceMapper->get($scope, $fileId, $name); $result = $this->preferenceMapper->get($scope, $fileId, $name);
return array_map( return array_map(
function($entity) { function($entity) {
return [ return $entity->toService();
'name' => $entity->getName(),
'value' => $entity->getValue(),
'lastModified' => $entity->getLastModified()
];
}, $result); }, $result);
} }

37
reader/templates/cbreader.php
View file

@ -103,22 +103,26 @@
<!-- /toolbar --> <!-- /toolbar -->
<!-- loading overlay --> <!-- loading overlay -->
<div id="cb-loading-overlay" class="cb-control control" name="loadingOverlay" style="display:none"></div> <div id="cbr-loading-overlay" class="cbr-control control overlay" name="loadingOverlay" style="display:none"></div>
<!-- /loading overlay --> <!-- /loading overlay -->
<!-- busy overlay -->
<div id="cbr-busy-overlay" class="cbr-control control overlay" name="busyOverlay" style="display:none"></div>
<!-- /busy overlay -->
<!-- navigation --> <!-- navigation -->
<div data-trigger="click" data-action="navigation" data-navigate-side="left" class="cb-control navigate navigate-left control" name="navigateLeft"> <div data-trigger="click" data-action="navigation" data-navigate-side="left" class="cbr-control navigate navigate-left control" name="navigateLeft">
<span class="icon-navigate_before"></span> <span class="icon-navigate_before"></span>
</div> </div>
<div data-trigger="click" data-action="toggleToolbar" class="toggle-controls control" name="toggleToolbar"></div> <div data-trigger="click" data-action="toggleToolbar" class="toggle-controls control" name="toggleToolbar"></div>
<div data-trigger="click" data-action="navigation" data-navigate-side="right" class="cb-control navigate navigate-right control" name="navigateRight"> <div data-trigger="click" data-action="navigation" data-navigate-side="right" class="cbr-control navigate navigate-right control" name="navigateRight">
<span class="icon-navigate_next"></span> <span class="icon-navigate_next"></span>
</div> </div>
<!-- /navigation --> <!-- /navigation -->
<!-- inline progressbar --> <!-- inline progressbar -->
<div id="cb-status" class="cb-control control" name="progressbar" style="display:none"> <div id="cbr-status" class="cbr-control control" name="progressbar" style="display:none">
<div id="cb-progress-bar"> <div id="cbr-progress-bar">
<div class="progressbar-value"></div> <div class="progressbar-value"></div>
</div> </div>
</div> </div>
@ -133,6 +137,7 @@
<button data-trigger="click" data-action="showSettings" title="show settings" class="icon-settings settings-view"></button> <button data-trigger="click" data-action="showSettings" title="show settings" class="icon-settings settings-view"></button>
</div> </div>
<div class="pull-right"> <div class="pull-right">
<button id="toc-populate" data-trigger="click" data-action="tocPopulate" title="generate thumbnails" class="icon-sync" style="display:none"></button>
<button data-trigger="click" data-action="closeSidebar" title="close sidebar" class="icon-menu"></button> <button data-trigger="click" data-action="closeSidebar" title="close sidebar" class="icon-menu"></button>
</div> </div>
</div> </div>
@ -157,20 +162,21 @@
</tr> </tr>
</table> </table>
</div> </div>
<div class="settings-container" name="enhancements"> <div class="settings-container" name="enhancements" id="enhancements">
<label for="enhancements">Image enhancements</label>
<form name="image-enhancements" data-trigger="reset" data-action="resetEnhancements"> <form name="image-enhancements" data-trigger="reset" data-action="resetEnhancements">
<div class="sliders"> <div class="sliders">
<div class="control-group"> <div class="control-group">
<label title="adjust brightness" class="icon-brightness_low"></label> <label title="adjust brightness" class="icon-brightness_low"></label>
<input data-trigger="change" data-action="brightness" type="range" min="-100" max="100" step="1" value="0"> <input id="brightness" data-trigger="change" data-action="brightness" type="range" min="-100" max="100" step="1" value="0">
</div> </div>
<div class="control-group"> <div class="control-group">
<label title="adjust contrast" class="icon-contrast"></label> <label title="adjust contrast" class="icon-contrast"></label>
<input data-trigger="change" data-action="contrast" type="range" min="-1" max="1" step="0.1" value="0"> <input id="contrast" data-trigger="change" data-action="brightness" type="range" min="-1" max="1" step="0.1" value="0">
</div> </div>
<div class="control-group"> <div class="control-group">
<label title="sharpen" class="icon-droplet"></label> <label title="sharpen" class="icon-droplet"></label>
<input data-trigger="change" data-action="sharpen" type="range" min="0" max="1" step="0.1" value="0"> <input id="sharpen" data-trigger="change" data-action="sharpen" type="range" min="0" max="1" step="0.1" value="0">
</div> </div>
</div> </div>
<div class="control-group pull-left"> <div class="control-group pull-left">
@ -186,17 +192,14 @@
</div> </div>
</div> </div>
<div class="settings-view view"> <div class="settings-view view">
<div class="settings-container" name="settings"> <div class="settings-container" name="settings" id="thumbnail-settings">
<label for="thumbnail-settings">Thumbnails</label>
<form name="settings" data-trigger="reset" data-action="resetSettings"> <form name="settings" data-trigger="reset" data-action="resetSettings">
<div class="control-group pull-left"> <div class="control-group pull-left">
<input id="thumbnail-width" type="number" min="50" max="500" step="10" value="200" > <input id="thumbnail-generate" data-trigger="change" data-action="thumbnails" type="checkbox">
<label for="thumbnail-generate">Use thumbnails in index </label>
<input id="thumbnail-width" data-trigger="change" data-action="thumbnailWidth" type="number" min="50" max="500" step="10" value="200" >
<label for="thumbnail-width">Thumbnail width</label> <label for="thumbnail-width">Thumbnail width</label>
<input id="thumbnail-generate" type="checkbox" checked>
<label for="thumbnail-generate">Thumbnails in index (disable to save memory)</label>
</div>
<div class="control-group pull-right">
<input type="submit" value="save">
<input type="reset" value="reset">
</div> </div>
</form> </form>
</div> </div>

76
reader/vendor/cbrjs/cbr.css vendored
View file

@ -51,12 +51,12 @@ table {
border-spacing: 0; border-spacing: 0;
} }
.cb-control { .cbr-control {
font-family: helvetica, arial, sans-serif; font-family: helvetica, arial, sans-serif;
font-size: 12px; font-size: 12px;
} }
.cb-control { .cbr-control {
color: #fff; color: #fff;
background-color: #111; background-color: #111;
padding: 10px; padding: 10px;
@ -114,14 +114,17 @@ body:not(.mobile) .navigate:hover {
position: fixed; position: fixed;
} }
#cb-loading-overlay { #cbr-loading-overlay {
z-index: 100; z-index: 100;
opacity: 0.8;
background: #000 url("img/loading.gif") no-repeat center; background: #000 url("img/loading.gif") no-repeat center;
}
.overlay {
opacity: 0.7;
box-shadow: none; box-shadow: none;
} }
#cb-status { #cbr-status {
z-index: 101; z-index: 101;
font-size: 12px; font-size: 12px;
right: 0; right: 0;
@ -130,16 +133,16 @@ body:not(.mobile) .navigate:hover {
border-radius: 4px; border-radius: 4px;
} }
#cb-progress-bar { #cbr-progress-bar {
width: 200px; width: 200px;
} }
#cb-progress-bar, #cbr-progress-bar,
#cb-progress-bar .progressbar-value { #cbr-progress-bar .progressbar-value {
height: 3px; height: 3px;
} }
#cb-progress-bar .progressbar-value { #cbr-progress-bar .progressbar-value {
width: 0; width: 0;
background: #86C441; background: #86C441;
border-color: #3E7600; border-color: #3E7600;
@ -209,8 +212,7 @@ body:not(.mobile) .toolbar:hover,
opacity: 1; opacity: 1;
} }
.toolbar div, .toolbar div {
.sidebar div {
display: inline-block; display: inline-block;
position: relative; position: relative;
} }
@ -257,12 +259,6 @@ body:not(.mobile) .toolbar button[data-action=close]:hover {
/* sidebar */ /* sidebar */
.sidebar.open { .sidebar.open {
box-shadow: 3px 0px 3px 0px rgba(0, 0, 0, 0.4); box-shadow: 3px 0px 3px 0px rgba(0, 0, 0, 0.4);
/* transitions and animations cause problems on older devices...
transform: translate3d(0,0,0);
-webkit-transform: translate3d(0,0,0);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
... so use display instead ...*/
display: block; display: block;
} }
@ -274,21 +270,12 @@ body:not(.mobile) .toolbar button[data-action=close]:hover {
min-width: 25em; min-width: 25em;
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
/* transitions and animations cause problems on older devices...
transform: translate3d(-20vw,0,0);
-webkit-transform: translate3d(-20vw,0,0);
transition: all 0.3s ease-out;
-webkit-transition: all 0.3s ease-out;
... so use display instead ...*/
display: none; display: none;
z-index: 100; z-index: 100;
} }
.panels { .panels {
position: fixed;
overflow: hidden; overflow: hidden;
box-shadow: 0px 1px 3px rgba(0,0,0,.6);
z-index: 101;
} }
.panels .open { .panels .open {
@ -299,6 +286,11 @@ body:not(.mobile) .toolbar button[data-action=close]:hover {
display: block !important; display: block !important;
} }
#toc-populate.open {
display: inline-block !important;
background-color: #4e4e4e;
}
.view { .view {
overflow-x: hidden; overflow-x: hidden;
display: none !important; display: none !important;
@ -312,32 +304,49 @@ body:not(.mobile) .toolbar button[data-action=close]:hover {
font-family: Georgia, "Times New Roman", Times, serif; font-family: Georgia, "Times New Roman", Times, serif;
} }
.toc-view img { .toc-view img, .placeholder {
width: 100%; width: 100%;
position: relative; position: relative;
background-color: #999;
} }
.toc-view img + span { .toc-view span {
position: absolute; position: relative;
font-size: 5em; font-size: 5em;
font-weight: bold; font-weight: bold;
color: #F8F8F8; color: #F8F8F8;
left: 60%; float: right;
margin-top: 75%; top: -2em;
left: -2em;
text-shadow: 0.05em 0.05em 0.02em rgba(70, 70, 70, 0.8); text-shadow: 0.05em 0.05em 0.02em rgba(70, 70, 70, 0.8);
-webkit-text-stroke: 2px black; -webkit-text-stroke: 2px black;
} }
.settings-container { .settings-container {
position: absolute;
font-size: 1em; font-size: 1em;
background: #F8F8F8; background: #F8F8F8;
color: #111; color: #111;
padding: 1em; padding: 1em;
margin: 1em; margin-top: 1em;
left: 1em;
right: 1em;
border-radius: 4px; border-radius: 4px;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4); box-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
} }
.settings-container label {
margin-right: 1em;
}
.settings-container > label {
font-weight: bold;
width: 100%;
display: inline-block;
margin-bottom: 1em;
text-align: center;
}
.view .control-group input[type=range] { .view .control-group input[type=range] {
width: 90%; width: 90%;
float: right; float: right;
@ -345,8 +354,7 @@ body:not(.mobile) .toolbar button[data-action=close]:hover {
} }
.view .control-group { .view .control-group {
padding: 0.5em; padding: 1em;
width: 95%;
} }
.view .sliders { .view .sliders {

300
reader/vendor/cbrjs/cbr.js vendored
View file

@ -20,6 +20,7 @@ CBRJS.Reader = function(bookPath, _options) {
CBRJS.session.cursor = $('.session').data('cursor') || {}; CBRJS.session.cursor = $('.session').data('cursor') || {};
CBRJS.session.defaults = $('.session').data('defaults') || {}; CBRJS.session.defaults = $('.session').data('defaults') || {};
CBRJS.session.preferences = $('.session').data('preferences') || {}; CBRJS.session.preferences = $('.session').data('preferences') || {};
CBRJS.session.defaults = $('.session').data('defaults') || {};
CBRJS.basePath = $('.session').data('basepath'); CBRJS.basePath = $('.session').data('basepath');
CBRJS.downloadLink = $('.session').data('downloadlink'); CBRJS.downloadLink = $('.session').data('downloadlink');
@ -127,7 +128,7 @@ CBRJS.Reader = function(bookPath, _options) {
var title, page = 0; var title, page = 0;
var options = $.extend({ var options = $.extend(true, {
getPreference: function(name) {}, getPreference: function(name) {},
setPreference: function(name, value) {}, setPreference: function(name, value) {},
getDefault: function(name) {}, getDefault: function(name) {},
@ -139,7 +140,9 @@ CBRJS.Reader = function(bookPath, _options) {
vendorPath: 'vendor/' vendorPath: 'vendor/'
}, opts); }, opts);
console.log("options:"); console.log("opts before extractImages:");
console.log(opts);
console.log("options before extractImages:");
console.log(options); console.log(options);
extractImages(url, { extractImages(url, {
@ -182,13 +185,23 @@ CBRJS.Reader = function(bookPath, _options) {
book.destroy(); book.destroy();
}); });
console.log("options:"); console.log("options after extractImages:");
console.log(options); console.log(options);
} }
}); });
} }
function getPref (arr, name) {
if (found = arr.find(function(e) { return e.name === name; })) {
if (found.hasOwnProperty("value")) {
console.log("property " + name + " has value " + found.value);
return found.value;
}
}
};
console.log("CBRJS:");console.log(CBRJS); console.log("CBRJS:");console.log(CBRJS);
openComicArchive(bookPath, { openComicArchive(bookPath, {
@ -206,79 +219,28 @@ CBRJS.Reader = function(bookPath, _options) {
return $.post(CBRJS.basePath + "preference/default/" + CBRJS.session.scope + "/" + name + "/" + JSON.stringify(value)); return $.post(CBRJS.basePath + "preference/default/" + CBRJS.session.scope + "/" + name + "/" + JSON.stringify(value));
}, },
getBookmark: function(name) { getBookmark: function(name) {
return $.get(CBRJS.basePath + "position/" + CBRJS.session.fileId + "/" + name); return $.get(CBRJS.basePath + "bookmark/" + CBRJS.session.fileId + "/" + name);
}, },
setBookmark: function(name, value) { setBookmark: function(name, value) {
return $.post(CBRJS.basePath + "bookmark/" + CBRJS.session.fileId + "/" + name + "/" + JSON.stringify(value)); return $.post(CBRJS.basePath + "bookmark/" + CBRJS.session.fileId + "/" + name + "/" + JSON.stringify(value));
}, },
getCursor: function() { getCursor: function() {
return $.get(CBRJS.basePath + "position/cursor/" + CBRJS.session.fileId); return $.get(CBRJS.basePath + "bookmark/cursor/" + CBRJS.session.fileId);
}, },
setCursor: function(value) { setCursor: function(value) {
return $.post(CBRJS.basePath + "position/cursor/" + CBRJS.session.fileId + "/" + JSON.stringify(value)); return $.post(CBRJS.basePath + "bookmark/cursor/" + CBRJS.session.fileId + "/" + JSON.stringify(value));
}, },
currentPage: (CBRJS.session.cursor.hasOwnProperty('value')) ? parseInt(CBRJS.session.cursor.value) : 0, currentPage: parseInt(getPref(CBRJS.session.cursor, "__CURSOR__")) || 0,
filters: (CBRJS.session.preferences.hasOwnProperty('filters')) ? CBRJS.session.preferences.filters : {}, enhance: getPref(CBRJS.session.preferences, "enhance") || {},
manga: (CBRJS.session.preferences.hasOwnProperty('manga')) ? CBRJS.session.preferences.manga : false manga: getPref(CBRJS.session.preferences, "manga") || false,
thumbnails: getPref(CBRJS.session.defaults, "thumbnails"),
thumbnailWidth: parseInt(getPref(CBRJS.session.defaults, "thumbnailWidth")) || 200
}); });
return this; return this;
}; };
/* /* pixastic */
* object.watch polyfill
*
* 2012-04-03
*
* By Eli Grey, http://eligrey.com
* Public Domain.
* NO WARRANTY EXPRESSED OR IMPLIED. USE AT YOUR OWN RISK.
*/
// object.watch
if (!Object.prototype.watch) {
Object.defineProperty(Object.prototype, "watch", {
enumerable: false
, configurable: true
, writable: false
, value: function (prop, handler) {
var
oldval = this[prop]
, newval = oldval
, getter = function () {
return newval;
}
, setter = function (val) {
oldval = newval;
return newval = handler.call(this, prop, oldval, val);
}
;
if (delete this[prop]) { // can't watch constants
Object.defineProperty(this, prop, {
get: getter
, set: setter
, enumerable: true
, configurable: true
});
}
}
});
}
// object.unwatch
if (!Object.prototype.unwatch) {
Object.defineProperty(Object.prototype, "unwatch", {
enumerable: false
, configurable: true
, writable: false
, value: function (prop) {
var val = this[prop];
delete this[prop]; // remove accessors
this[prop] = val;
}
});
}
/*! /*!
* Pixastic - JavaScript Image Processing * Pixastic - JavaScript Image Processing
@ -1948,8 +1910,9 @@ ComicBook = (function ($) {
zoomMode: 'fitWindow', // manual / fitWidth / fitWindow zoomMode: 'fitWindow', // manual / fitWidth / fitWindow
manga: false, // true / false manga: false, // true / false
fullscreen: false, // true / false fullscreen: false, // true / false
enhance: {}, enhance: {}, // image filters to use
thumbWidth: 200, // width of thumbnail thumbnails: true, // true / false (use thumbnails in index)
thumbnailWidth: 200, // width of thumbnail
currentPage: 0, // current page currentPage: 0, // current page
keyboard: { keyboard: {
32: 'next', // space 32: 'next', // space
@ -2028,7 +1991,7 @@ ComicBook = (function ($) {
if (shiv === false) { if (shiv === false) {
shiv = $(document.createElement('div')) shiv = $(document.createElement('div'))
.attr('id', 'cb-width-shiv') .attr('id', 'cbr-width-shiv')
.css({ .css({
width: '100%', width: '100%',
position: 'absolute', position: 'absolute',
@ -2116,9 +2079,41 @@ ComicBook = (function ($) {
*/ */
ComicBook.prototype.renderControls = function () { ComicBook.prototype.renderControls = function () {
var controls = {}, var controls = {}, $toolbar;
$toolbar;
// set values from preferences or defaults
// do this before connecting listeners to avoid triggering callbacks
for (var prop in options.enhance) {
if(options.enhance.hasOwnProperty(prop)) {
switch (prop) {
case 'brightness':
document.getElementById('brightness').value = options.enhance.brightness['brightness'];
document.getElementById('contrast').value = options.enhance.brightness['contrast'];
break;
case 'sharpen':
document.getElementById('sharpen').value = options.enhance.sharpen['strength'];
break;
case 'desaturate':
$('#image-desaturate').prop('checked', true);
break;
case 'removenoise':
$('#image-removenoise').prop('checked', true);
break;
default:
console.log("unknown enhancement: " + JSON.stringify(prop));
}
}
};
// thumbnail controls
$('#thumbnail-generate').prop('checked', options.thumbnails);
$('#thumbnail-width').val(options.thumbnailWidth);
if (!options.thumbnails) {
$('#toc-populate').addClass('open');
$('#thumbnail-width').prop('disabled', true);
}
// connect callbacks
$('.control').each(function () { $('.control').each(function () {
controls[$(this).attr('name')] = $(this); controls[$(this).attr('name')] = $(this);
@ -2191,41 +2186,37 @@ ComicBook = (function ($) {
* *
* @return Image * @return Image
*/ */
ComicBook.prototype.getThumb = function (image, page) { ComicBook.prototype.getThumb = function (image) {
var thumb = new Image(); var thumb = new Image();
var scale = image.width / options.thumbWidth; var scale = image.width / options.thumbnailWidth;
tcv.width = options.thumbnailWidth;
tcv.width = options.thumbWidth;
tcv.height = Math.floor(image.height / scale); tcv.height = Math.floor(image.height / scale);
tctx.drawImage(image, 0, 0, tcv.width, tcv.height); tctx.drawImage(image, 0, 0, tcv.width, tcv.height);
thumb.src = tcv.toDataURL(); thumb.src = tcv.toDataURL();
thumb.addEventListener('click', function (e) {
self.drawPage(page + 1, true);
});
tctx.clearRect(0, 0, tcv.width, tcv.height); tctx.clearRect(0, 0, tcv.width, tcv.height);
return thumb; return thumb;
}; };
/** /**
* Create empty TOC * Create empty TOC with placeholder images
*/ */
ComicBook.prototype.tocCreate = function (no_pages) { ComicBook.prototype.tocCreate = function (no_pages) {
var width = options.thumbWidth; // use small image with reasonable aspect ratio
var height = options.thumbWidth * 1.414; tcv.width = 5;
tcv.height = 7;
// transparent, style with .placeholder in CSS
tctx.fillStyle = "rgba(200, 200, 200, 0)";
tctx.fillRect(0, 0, tcv.width, tcv.height);
var imgsrc = tcv.toDataURL();
for(var i = 0; i < no_pages; i++) { for(var i = 0; i < no_pages; i++) {
var item = document.createElement('li'); var item = document.createElement('li');
var placeholder = document.createElement('div'); item.setAttribute("id", "page-" + parseInt(i + 1));
placeholder.setAttribute("style","display:block;width:" + width + "px;height:" + height + "px;background:#AAA"); var placeholder = new Image();
placeholder.className = "placeholder"; placeholder.src = imgsrc;
var label = document.createElement('span'); var label = document.createElement('span');
label.innerHTML = i + 1; label.innerHTML = i + 1;
item.addEventListener('click', function (e) {
self.drawPage(i + 1, true);
});
item.appendChild(placeholder); item.appendChild(placeholder);
item.appendChild(label); item.appendChild(label);
toc.appendChild(item); toc.appendChild(item);
@ -2235,9 +2226,33 @@ ComicBook = (function ($) {
/** /**
* Insert thumbnail into TOC * Insert thumbnail into TOC
*/ */
ComicBook.prototype.tocInsert = function (thumb, page) { ComicBook.prototype.tocInsert = function (image, page, replace) {
var placeholder = toc.children[page].firstChild; var placeholder = toc.children[page].firstChild;
placeholder.parentNode.replaceChild(thumb,placeholder); if (replace === true) {
placeholder.parentNode.replaceChild(
self.getThumb(image),
placeholder
);
}
toc.children[page].addEventListener('click', function (e) {
self.drawPage(page + 1, true);
});
};
/**
* Populate TOC on demand
*/
ComicBook.prototype.tocPopulate = function () {
var i = 0;
while (i < srcs.length) {
self.tocInsert(pages[i], i, true);
i++;
}
// set, but don't save
options.thumbnails = true;
$('#toc-populate').removeClass('open');
}; };
/** /**
@ -2268,7 +2283,7 @@ ComicBook = (function ($) {
// resize navigation controls // resize navigation controls
$('.navigate').outerHeight(window.innerHeight); $('.navigate').outerHeight(window.innerHeight);
$('#cb-loading-overlay').outerWidth(windowWidth()).height(window.innerHeight); $('.overlay').outerWidth(windowWidth()).height(window.innerHeight);
// preload images if needed // preload images if needed
if (pages.length !== no_pages) { if (pages.length !== no_pages) {
@ -2331,12 +2346,12 @@ ComicBook = (function ($) {
page.onload = function () { page.onload = function () {
pages[i] = this; pages[i] = this;
thumbs[i] = self.getThumb(this, i);
self.tocInsert(thumbs[i], i); self.tocInsert(this, i, options.thumbnails);
loaded.push(i); loaded.push(i);
$('#cb-progress-bar .progressbar-value').css('width', Math.floor((loaded.length / no_pages) * 100) + '%'); $('#cbr-progress-bar .progressbar-value').css('width', Math.floor((loaded.length / no_pages) * 100) + '%');
// double page mode needs an extra page added // double page mode needs an extra page added
var buffer = (options.displayMode === 'double' && options.currentPage < srcs.length - 1) ? 1 : 0; var buffer = (options.displayMode === 'double' && options.currentPage < srcs.length - 1) ? 1 : 0;
@ -2359,7 +2374,7 @@ ComicBook = (function ($) {
loadImage(queue[0]); loadImage(queue[0]);
queue.splice(0, 1); queue.splice(0, 1);
} else { } else {
$('#cb-status').delay(500).fadeOut(); $('#cbr-status').delay(500).fadeOut();
} }
}; };
} }
@ -2574,8 +2589,8 @@ ComicBook = (function ($) {
} }
// disable the fit width button if needed // disable the fit width button if needed
$('button.cb-fit-width').attr('disabled', (options.zoomMode === 'fitWidth')); $('button.cbr-fit-width').attr('disabled', (options.zoomMode === 'fitWidth'));
$('button.cb-fit-window').attr('disabled', (options.zoomMode === 'fitWindow')); $('button.cbr-fit-window').attr('disabled', (options.zoomMode === 'fitWindow'));
// disable prev/next buttons if not needed // disable prev/next buttons if not needed
$('.navigate').show(); $('.navigate').show();
@ -2670,22 +2685,37 @@ ComicBook = (function ($) {
window.scroll(0, 0); window.scroll(0, 0);
}; };
ComicBook.prototype.brightness = function () { /* default settings */
options.enhance.brightness = $(this).val();
self.enhance.brightness({
brightness: options.enhance.brightness
});
options.setPreference("filters",options.enhance); ComicBook.prototype.thumbnails = function() {
if ($(this).is(':checked')) {
options.thumbnails = true;
document.getElementById('thumbnail-width').disabled = false;
} else {
options.thumbnails = false;
document.getElementById('thumbnail-width').disabled = true;
}
options.setDefault("thumbnails", options.thumbnails);
}; };
ComicBook.prototype.contrast = function () { ComicBook.prototype.thumbnailWidth = function() {
options.enhance.contrast = $(this).val(); options.thumbnailWidth = $(this).val();
self.enhance.brightness({ options.setDefault("thumbnailWidth", options.thumbnailWidth);
contrast: options.enhance.contrast };
});
options.setPreference("filters",options.enhance); /* book-specific settings */
ComicBook.prototype.brightness = function () {
var $brightness = {
brightness: $('#brightness').val(),
contrast: $('#contrast').val()
};
self.enhance.brightness($brightness);
options.enhance.brightness = $brightness;
options.setPreference("enhance",options.enhance);
console.log(options.enhance);
}; };
ComicBook.prototype.sharpen = function () { ComicBook.prototype.sharpen = function () {
@ -2694,7 +2724,8 @@ ComicBook = (function ($) {
strength: options.enhance.sharpen strength: options.enhance.sharpen
}); });
options.setPreference("filters",options.enhance); options.setPreference("enhance",options.enhance);
console.log(options.enhance);
}; };
ComicBook.prototype.desaturate = function () { ComicBook.prototype.desaturate = function () {
@ -2706,7 +2737,8 @@ ComicBook = (function ($) {
self.enhance.resaturate(); self.enhance.resaturate();
} }
options.setPreference("filters",options.enhance); options.setPreference("enhance",options.enhance);
console.log(options.enhance);
}; };
ComicBook.prototype.removenoise = function () { ComicBook.prototype.removenoise = function () {
@ -2718,11 +2750,14 @@ ComicBook = (function ($) {
self.enhance.unremovenoise(); self.enhance.unremovenoise();
} }
options.setPreference("filters",options.enhance); options.setPreference("enhance",options.enhance);
console.log(options.enhance);
}; };
ComicBook.prototype.resetEnhancements = function () { ComicBook.prototype.resetEnhancements = function () {
self.enhance.reset(); self.enhance.reset();
options.setPreference("enhance",options.enhance);
console.log(options.enhance);
}; };
/** /**
@ -2749,8 +2784,6 @@ ComicBook = (function ($) {
delete options.enhance[method]; delete options.enhance[method];
} }
self.drawPage(null, false); self.drawPage(null, false);
options.setPreference("filters",options.enhance);
}, },
/** /**
@ -2791,7 +2824,6 @@ ComicBook = (function ($) {
contrast: 0 contrast: 0
}, params); }, params);
// remember options for later
options.enhance.brightness = opts; options.enhance.brightness = opts;
// run the enhancement // run the enhancement
@ -2862,7 +2894,7 @@ ComicBook = (function ($) {
ComicBook.prototype.navigation = function (e) { ComicBook.prototype.navigation = function (e) {
// disable navigation when the overlay is showing // disable navigation when the overlay is showing
if ($('#cb-loading-overlay').is(':visible')) { if ($('#cbr-loading-overlay').is(':visible')) {
return false; return false;
} }
@ -2964,15 +2996,19 @@ ComicBook = (function ($) {
ComicBook.prototype.openSidebar = function () { ComicBook.prototype.openSidebar = function () {
$('.sidebar').addClass('open'); $('.sidebar').addClass('open');
$('.toolbar').addClass('open'); $('.toolbar').addClass('open');
self.showControl('busyOverlay');
self.scrollToc();
}; };
ComicBook.prototype.closeSidebar = function () { ComicBook.prototype.closeSidebar = function () {
$('.sidebar').removeClass('open'); $('.sidebar').removeClass('open');
$('.toolbar').removeClass('open'); $('.toolbar').removeClass('open');
self.hideControl('busyOverlay');
}; };
ComicBook.prototype.toggleSidebar = function () { ComicBook.prototype.toggleSidebar = function () {
$('.sidebar').toggleClass('open'); $('.sidebar').toggleClass('open');
self.scrollToc();
}; };
ComicBook.prototype.toggleFullscreen = function () { ComicBook.prototype.toggleFullscreen = function () {
@ -2987,13 +3023,26 @@ ComicBook = (function ($) {
} }
}; };
/*
* Scroll TOC to page (default: current page)
*/
ComicBook.prototype.scrollToc = function (page) {
if (page === undefined) {
page = options.currentPage;
}
document.getElementById('toc').parentNode.scrollTop =
document.getElementById('page-' + page + 1).offsetTop
- Math.floor($('.panels').height() * 1.5);
};
ComicBook.prototype.showToc = function () { ComicBook.prototype.showToc = function () {
/* self.getControl('sidebar')
.find('.view').hide().end()
.find('#tocView').show(); */
self.getControl('sidebar') self.getControl('sidebar')
.find('.open').removeClass('open').end() .find('.open').removeClass('open').end()
.find('.toc-view').addClass('open'); .find('.toc-view').addClass('open');
if (!options.thumbnails) {
$('#toc-populate').addClass('open');
}
}; };
ComicBook.prototype.showBookSettings = function () { ComicBook.prototype.showBookSettings = function () {
@ -3022,23 +3071,6 @@ ComicBook = (function ($) {
setHash(''); setHash('');
/* ugly, but for now... */
options.currentPage = undefined;
no_pages = undefined;
pages = undefined;
thumbs = undefined;
canvas = undefined;
context = undefined;
tcv = undefined;
tctx = undefined;
toc = undefined;
loaded = undefined;
scale = undefined;
is_double_page_spread = undefined;
controlsRendered = undefined;
page_requested = undefined;
shiv = undefined;
// $(this).trigger('destroy'); // $(this).trigger('destroy');
}; };