Skip to content

Commit

Permalink
Merge pull request #50 from d-i-t-a/fixes/optionals
Browse files Browse the repository at this point in the history 
Fixes/optionals
  • Loading branch information
@aferditamuriqi
aferditamuriqi authored Jun 3, 2020
2 parents 276d8e7 + aca0525 commit 5a81a5d
Show file tree
Hide file tree
Showing 8 changed files with 1,177 additions and 1,105 deletions.
2,106 changes: 1,076 additions & 1,030 deletions package-lock.json
View file

Large diffs are not rendered by default.

7 changes: 4 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@d-i-t-a/reader",
"version": "1.1.4",
"version": "1.1.5",
"description": "A viewer application for EPUB files.",
"repository": "https://github.com/d-i-t-a/R2D2BC",
"main": "src/index.js",
Expand Down Expand Up @@ -50,14 +50,15 @@
"jsdom": "^9.12.0",
"jsdom-global": "^2.1.1",
"materialize-css": "^1.0.0",
"mocha": "^5.2.0",
"minimist": ">=0.2.1",
"mocha": "^7.2.0",
"node-sass": "^4.14.1",
"rangy": "^1.3.0",
"rimraf": "^2.7.1",
"sinon": "^6.0.1",
"ts-loader": "^5.4.5",
"typescript": "^3.6.4",
"webpack": "^4.41.2",
"webpack": "^4.43.0",
"webpack-cli": "^3.3.9"
},
"files": [
Expand Down
16 changes: 16 additions & 0 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,14 @@ export async function deleteBookmark(bookmark) {
if (IS_DEV) { console.log("deleteBookmark") }
BookmarkModuleInstance.deleteBookmark(bookmark)
}
export async function deleteAnnotation(highlight) {
if (IS_DEV) { console.log("deleteAnnotation") }
AnnotationModuleInstance.deleteAnnotation(highlight)
}
export async function addAnnotation(highlight) {
if (IS_DEV) { console.log("addAnnotation") }
AnnotationModuleInstance.addAnnotation(highlight)
}
export async function tableOfContents() {
if (IS_DEV) { console.log("bookmarks") }
return await R2Navigator.tableOfContents()
Expand Down Expand Up @@ -260,6 +268,14 @@ exports.deleteBookmark = function (bookmark) {
deleteBookmark(bookmark)
}

exports.deleteAnnotation = function (highlight) {
deleteAnnotation(highlight)
}

exports.addAnnotation = function (highlight) {
addAnnotation(highlight)
}

// - go to locator (this will be used for anything form toc, bookmark, last reading position etc.)
exports.goTo = function (locator) {
goTo(locator)
Expand Down
2 changes: 1 addition & 1 deletion src/model/user-settings/UserSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -521,7 +521,7 @@ export class UserSettings implements UserSettings {
letterSpacing: this.userProperties.getByRef(ReadiumCSS.LETTER_SPACING_REF).value,
publisherDefault: this.userProperties.getByRef(ReadiumCSS.PUBLISHER_DEFAULT_REF).value
}
if (this.api) {
if (this.api && this.api.updateUserSettings) {
this.api.updateUserSettings(userSettings).then(_ => {
if (IS_DEV) { console.log("api updated user settings", userSettings) }
})
Expand Down
17 changes: 12 additions & 5 deletions src/modules/AnnotationModule.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -96,7 +96,7 @@ export default class AnnotationModule implements ReaderModule {

this.delegate.annotationModule = this

this.highlightsView = HTMLUtilities.findElement(this.headerMenu, "#container-view-highlights") as HTMLDivElement;
if (this.headerMenu) this.highlightsView = HTMLUtilities.findElement(this.headerMenu, "#container-view-highlights") as HTMLDivElement;

if (this.initialAnnotations) {
var highlights = this.initialAnnotations['highlights'] || null;
Expand Down Expand Up @@ -163,9 +163,16 @@ export default class AnnotationModule implements ReaderModule {
}
}

public async deleteAnnotation(highlight: Annotation): Promise<any> {
this.deleteLocalHighlight(highlight.id);
}
public async addAnnotation(highlight: Annotation): Promise<any> {
await this.annotator.saveAnnotation(highlight);
await this.drawHighlights();
}

private async deleteHighlight(highlight: Annotation): Promise<any> {
if (this.api) {
public async deleteHighlight(highlight: Annotation): Promise<any> {
if (this.api && this.api.deleteAnnotation) {
this.api.deleteAnnotation(highlight).then(async () => {
this.deleteLocalHighlight(highlight.id);
})
Expand All @@ -175,7 +182,7 @@ export default class AnnotationModule implements ReaderModule {
}

public async deleteSelectedHighlight(highlight: Annotation): Promise<any> {
if (this.api) {
if (this.api && this.api.deleteAnnotation) {
this.api.deleteAnnotation(highlight).then(async () => {
this.deleteLocalHighlight(highlight.id);
})
Expand Down Expand Up @@ -220,7 +227,7 @@ export default class AnnotationModule implements ReaderModule {
hightlight: highlight.selectionInfo.cleanText
}
}
if (this.api) {
if (this.api && this.api.addAnnotation) {
this.api.addAnnotation(annotation).then(async result => {
annotation.id = result.id
var saved = await this.annotator.saveAnnotation(annotation);
Expand Down
114 changes: 61 additions & 53 deletions src/modules/highlight/TextHighlighter.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -545,14 +545,16 @@ export default class TextHighlighter {
var colors = ["#fce300", "#48e200", "#00bae5", "#157cf9", "#6a39b7", "#ea426a", "#ff8500"]
var colorIcon = document.getElementById("colorIcon");
var dismissIcon = document.getElementById("dismissIcon");
dismissIcon.innerHTML = icons.close;


var self = this
// Close toolbox color options
dismissIcon.addEventListener("click", function(){
self.toolboxMode('add');
});

if (dismissIcon) {
dismissIcon.innerHTML = icons.close;
// Close toolbox color options
dismissIcon.addEventListener("click", function(){
self.toolboxMode('add');
});
}
if (colorIcon) {
colors.forEach(color => {
var colorButton = document.getElementById(color);
Expand Down Expand Up @@ -613,19 +615,19 @@ export default class TextHighlighter {

switch(mode) {
case 'colors':
toolboxColorsOptions.style.display = "unset"
if (toolboxColorsOptions) toolboxColorsOptions.style.display = "unset"
toolboxAddOptions.style.display = "none"
toolboxEditOptions.style.display = "none"
if (toolboxEditOptions) toolboxEditOptions.style.display = "none"
break;
case 'edit':
toolboxColorsOptions.style.display = "none"
if (toolboxColorsOptions) toolboxColorsOptions.style.display = "none"
toolboxAddOptions.style.display = "none"
toolboxEditOptions.style.display = "unset"
if (toolboxEditOptions) toolboxEditOptions.style.display = "unset"
break;
default:
toolboxColorsOptions.style.display = "none"
if (toolboxColorsOptions) toolboxColorsOptions.style.display = "none"
toolboxAddOptions.style.display = "unset"
toolboxEditOptions.style.display = "none"
if (toolboxEditOptions) toolboxEditOptions.style.display = "none"
break;
}
}
Expand Down Expand Up @@ -670,50 +672,52 @@ export default class TextHighlighter {
var underlineIcon = document.getElementById("underlineIcon");
var speakIcon = document.getElementById("speakIcon");
var colorIcon = document.getElementById("colorIcon");

highlightIcon.style.display = "unset";
if(highlightIcon.getElementsByTagName("span").length>0) {
(highlightIcon.getElementsByTagName("span")[0] as HTMLSpanElement).style.background = this.getColor();
if (highlightIcon) {
highlightIcon.style.display = "unset";
if(colorIcon) {
if(highlightIcon.getElementsByTagName("span").length>0) {
(highlightIcon.getElementsByTagName("span")[0] as HTMLSpanElement).style.background = this.getColor();
}
}
}
underlineIcon.style.display = "unset";
if (underlineIcon.getElementsByTagName("span").length>0) {
(underlineIcon.getElementsByTagName("span")[0] as HTMLSpanElement).style.borderBottomColor = this.getColor();
if (underlineIcon) {
underlineIcon.style.display = "unset";
if(colorIcon) {
if (underlineIcon.getElementsByTagName("span").length>0) {
(underlineIcon.getElementsByTagName("span")[0] as HTMLSpanElement).style.borderBottomColor = this.getColor();
}
}
}
if(colorIcon) {
colorIcon.style.display = "unset";

var colorIconSymbol = colorIcon.lastChild as HTMLElement;
colorIconSymbol.style.backgroundColor = this.getColor();
}
// speaker_notes
// add_comment
// file_copy
// delete
// share
// edit

function highlightEvent(){
self.doHighlight(false, AnnotationMarker.Highlight);
toolbox.style.display = "none";
backdrop.style.display = "none";
highlightIcon.removeEventListener("click", highlightEvent);
if (highlightIcon) {
function highlightEvent(){
self.doHighlight(false, AnnotationMarker.Highlight);
toolbox.style.display = "none";
backdrop.style.display = "none";
highlightIcon.removeEventListener("click", highlightEvent);
}
highlightIcon.addEventListener("click", highlightEvent);
}
highlightIcon.addEventListener("click", highlightEvent);

function commentEvent(){
self.doHighlight(false, AnnotationMarker.Underline);
toolbox.style.display = "none";
backdrop.style.display = "none";
underlineIcon.removeEventListener("click", commentEvent);
if (underlineIcon) {
function commentEvent(){
self.doHighlight(false, AnnotationMarker.Underline);
toolbox.style.display = "none";
backdrop.style.display = "none";
underlineIcon.removeEventListener("click", commentEvent);
}
underlineIcon.addEventListener("click", commentEvent);
}
underlineIcon.addEventListener("click", commentEvent);

function speakEvent(){
speakIcon.removeEventListener("click", speakEvent);
self.speak();
if (speakIcon) {
function speakEvent(){
speakIcon.removeEventListener("click", speakEvent);
self.speak();
}
speakIcon.addEventListener("click", speakEvent);
}
speakIcon.addEventListener("click", speakEvent);


if (this.selectionMenuItems) {
this.selectionMenuItems.forEach(menuItem => {
Expand Down Expand Up @@ -1385,7 +1389,7 @@ export default class TextHighlighter {
var self = this
var anno = await this.delegate.annotator.getAnnotation(payload.highlight) as Annotation
// if(anno.comment) {
if(this.delegate.api) {
if(this.delegate.api && this.delegate.api.selectedAnnotation) {
this.delegate.api.selectedAnnotation(anno).then(async () => {
})
}
Expand Down Expand Up @@ -1430,10 +1434,6 @@ export default class TextHighlighter {
// commentIcon.removeEventListener("click", addCommenH);
// }
// commentIcon.addEventListener("click", addCommenH);

var deleteIcon = document.getElementById("deleteIcon");
deleteIcon.style.display = "unset";
deleteIcon.innerHTML = icons.delete;
function deleteH(){
self.delegate.deleteSelectedHighlight(anno).then(async () => {
if (IS_DEV) {console.log("delete highlight "+anno.id)}
Expand All @@ -1442,7 +1442,13 @@ export default class TextHighlighter {
})
deleteIcon.removeEventListener("click", deleteH);
};
deleteIcon.addEventListener("click", deleteH);

var deleteIcon = document.getElementById("deleteIcon");
if (deleteIcon) {
deleteIcon.style.display = "unset";
deleteIcon.innerHTML = icons.delete;
deleteIcon.addEventListener("click", deleteH);
}

var backdropButton = document.getElementById("toolbox-backdrop");

Expand All @@ -1457,7 +1463,9 @@ export default class TextHighlighter {
// self.delegate.api.highlightUnSelected().then(async () => {
// if (IS_DEV) {console.log("highlightUnSelected, click on backdrop (click, mousedown,mouseup )")}
// })
deleteIcon.removeEventListener("click", deleteH);
if (deleteIcon) {
deleteIcon.removeEventListener("click", deleteH);
}
// commentIcon.removeEventListener("click", addCommenH);

backdropButton.removeEventListener("click", backdropEvent);
Expand Down
12 changes: 6 additions & 6 deletions src/navigator/IFrameNavigator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -271,7 +271,7 @@ export default class IFrameNavigator implements Navigator {
this.infoTop = HTMLUtilities.findElement(mainElement, "div[class='info top']") as HTMLDivElement;
this.infoBottom = HTMLUtilities.findElement(mainElement, "div[class='info bottom']") as HTMLDivElement;

if (this.headerMenu) this.bookTitle = HTMLUtilities.findElement(headerMenu, "#book-title") as HTMLSpanElement;
if (this.headerMenu) this.bookTitle = HTMLUtilities.findElement(this.headerMenu, "#book-title") as HTMLSpanElement;

if (this.infoBottom) this.chapterTitle = HTMLUtilities.findRequiredElement(this.infoBottom, "span[class=chapter-title]") as HTMLSpanElement;
if (this.infoBottom) this.chapterPosition = HTMLUtilities.findRequiredElement(this.infoBottom, "span[class=chapter-position]") as HTMLSpanElement;
Expand All @@ -280,20 +280,20 @@ export default class IFrameNavigator implements Navigator {

// Header Menu

if (this.headerMenu) this.links = HTMLUtilities.findElement(headerMenu, "ul.links.top") as HTMLUListElement;
if (this.headerMenu) this.linksTopLeft = HTMLUtilities.findElement(headerMenu, "#nav-mobile-left") as HTMLUListElement;
if (this.headerMenu) this.links = HTMLUtilities.findElement(this.headerMenu, "ul.links.top") as HTMLUListElement;
if (this.headerMenu) this.linksTopLeft = HTMLUtilities.findElement(this.headerMenu, "#nav-mobile-left") as HTMLUListElement;

if (this.headerMenu) this.tocView = HTMLUtilities.findElement(headerMenu, "#container-view-toc") as HTMLDivElement;
if (this.headerMenu) this.tocView = HTMLUtilities.findElement(this.headerMenu, "#container-view-toc") as HTMLDivElement;

// Footer Menu
if (footerMenu) this.linksBottom = HTMLUtilities.findElement(footerMenu, "ul.links.bottom") as HTMLUListElement;
if (footerMenu) this.linksMiddle = HTMLUtilities.findElement(footerMenu, "ul.links.middle") as HTMLUListElement;

if (this.headerMenu) this.nextChapterAnchorElement = HTMLUtilities.findElement(headerMenu, "a[rel=next]") as HTMLAnchorElement;
if (this.headerMenu) this.nextChapterAnchorElement = HTMLUtilities.findElement(this.headerMenu, "a[rel=next]") as HTMLAnchorElement;
if (this.headerMenu) this.nextChapterBottomAnchorElement = HTMLUtilities.findElement(mainElement, "#next-chapter") as HTMLAnchorElement;
if (footerMenu) this.nextPageAnchorElement = HTMLUtilities.findElement(footerMenu, "a[rel=next]") as HTMLAnchorElement;

if (this.headerMenu) this.previousChapterAnchorElement = HTMLUtilities.findElement(headerMenu, "a[rel=prev]") as HTMLAnchorElement;
if (this.headerMenu) this.previousChapterAnchorElement = HTMLUtilities.findElement(this.headerMenu, "a[rel=prev]") as HTMLAnchorElement;
if (this.headerMenu) this.previousChapterTopAnchorElement = HTMLUtilities.findElement(mainElement, "#previous-chapter") as HTMLAnchorElement;
if (footerMenu) this.previousPageAnchorElement = HTMLUtilities.findElement(footerMenu, "a[rel=prev]") as HTMLAnchorElement;

Expand Down
8 changes: 1 addition & 7 deletions viewer/index_api.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@
</head>

<body>
<header id="headerMenu" style="position:fixed;top:0;right:10px;z-index: 2;">
<header id="sideMenu" style="position:fixed;top:0;right:10px;z-index: 2;">
<div id="container-toc"></div>
<div id="container-bookmarks"></div>
<div id="container-annotations"></div>
Expand Down Expand Up @@ -177,16 +177,10 @@
<div id="toolbox-backdrop" class="toolbox-backdrop"></div>

<span id="highlight-toolbox" class="highlight-toolbox">
<div id="highlight-toolbox-mode-colors">
<button style="background-color: gainsboro;" id="dismissIcon"><i class="material-icons" style="color:gray">close</i></button>
</div>
<div id="highlight-toolbox-mode-add">
<button style="background-color: gainsboro;" id="highlightIcon"><span style="background: yellow;display: inline-block;width: 24px;height: 24px;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" role="img" class="icon open" aria-labelledby="text-icon"><title id="text-icon">Text</title><path d="M5 4v3h5.5v12h3V7H19V4z"></path></svg>
</span></button>
<button style="background-color: gainsboro;" id="underlineIcon"><span style="display: inline-block;width: 24px;height: 24px;border-bottom: yellow solid 4px;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" role="img" class="icon open" aria-labelledby="text-icon"><title id="text-icon">Text</title><path d="M5 4v3h5.5v12h3V7H19V4z"></path></svg>
</span></button>
<button style="background-color: gainsboro;" id="speakIcon"><span style="display: inline-block;width: 24px;height: 24px;">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" role="img" class="icon open" aria-labelledby="speak-icon"><title id="speak-icon">Speak</title><circle cx="9" cy="9" r="4"></circle><path d="M9 15c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4zm7.76-9.64l-1.68 1.69c.84 1.18.84 2.71 0 3.89l1.68 1.69c2.02-2.02 2.02-5.07 0-7.27zM20.07 2l-1.63 1.63c2.77 3.02 2.77 7.56 0 10.74L20.07 16c3.9-3.89 3.91-9.95 0-14z"></path><path d="M0 0h24v24H0z" fill="none"></path></svg>
</span></button>
Expand Down

0 comments on commit 5a81a5d

Please sign in to comment.