Skip to content

Commit

Permalink
Merge pull request #92 from d-i-t-a/improvements/separate-highlighter
Browse files Browse the repository at this point in the history 
separated Text Highlighter from Annotation module
  • Loading branch information
@aferditamuriqi
aferditamuriqi authored Nov 4, 2020
2 parents 4020222 + 45b670c commit 285e3e1
Show file tree
Hide file tree
Showing 9 changed files with 576 additions and 480 deletions.
89 changes: 50 additions & 39 deletions src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,15 @@ import BookmarkModule from "./modules/BookmarkModule";
import { UserSettings } from "./model/user-settings/UserSettings";
import AnnotationModule from "./modules/AnnotationModule";
import TTSModule from "./modules/TTS/TTSModule";
import {oc} from "ts-optchain"
import { oc } from "ts-optchain"
import { TTSSettings } from "./modules/TTS/TTSSettings";
import SearchModule from "./modules/search/SearchModule";
import TextHighlighter from "./modules/highlight/TextHighlighter";

var R2Settings: UserSettings;
var R2TTSSettings: TTSSettings;
var R2Navigator: IFrameNavigator;
var D2Highlighter:TextHighlighter;
var BookmarkModuleInstance: BookmarkModule;
var AnnotationModuleInstance: AnnotationModule;
var TTSModuleInstance: TTSModule;
Expand Down Expand Up @@ -61,19 +63,19 @@ export async function unload() {
}
export function startReadAloud() {
if (IS_DEV) { console.log("startReadAloud") }
return R2Navigator.startReadAloud()
return R2Navigator.startReadAloud()
}
export function stopReadAloud() {
if (IS_DEV) { console.log("stopReadAloud") }
return R2Navigator.stopReadAloud()
return R2Navigator.stopReadAloud()
}
export function pauseReadAloud() {
if (IS_DEV) { console.log("pauseReadAloud") }
return R2Navigator.pauseReadAloud()
return R2Navigator.pauseReadAloud()
}
export function resumeReadAloud() {
if (IS_DEV) { console.log("resumeReadAloud") }
return R2Navigator.resumeReadAloud()
return R2Navigator.resumeReadAloud()
}

export async function saveBookmark() {
Expand Down Expand Up @@ -102,20 +104,20 @@ export async function addAnnotation(highlight) {
}
export async function tableOfContents() {
if (IS_DEV) { console.log("bookmarks") }
return await R2Navigator.tableOfContents()
return await R2Navigator.tableOfContents()
}
export async function bookmarks() {
if (oc(R2Navigator.rights).enableBookmarks(false)) {
if (IS_DEV) { console.log("bookmarks") }
return await BookmarkModuleInstance.getBookmarks()
return await BookmarkModuleInstance.getBookmarks()
} else {
return []
}
}
export async function annotations() {
if (oc(R2Navigator.rights).enableAnnotations(false)) {
if (IS_DEV) { console.log("annotations") }
return await AnnotationModuleInstance.getAnnotations()
return await AnnotationModuleInstance.getAnnotations()
} else {
return []
}
Expand All @@ -137,15 +139,15 @@ export async function goToSearchIndex(href, index) {
}
export function currentResource() {
if (IS_DEV) { console.log("currentResource") }
return R2Navigator.currentResource()
return R2Navigator.currentResource()
}
export function mostRecentNavigatedTocItem() {
if (IS_DEV) { console.log("mostRecentNavigatedTocItem") }
return R2Navigator.mostRecentNavigatedTocItem()
return R2Navigator.mostRecentNavigatedTocItem()
}
export function totalResources() {
if (IS_DEV) { console.log("totalResources") }
return R2Navigator.totalResources()
return R2Navigator.totalResources()
}
export function publicationLanguage() {
if (IS_DEV) { console.log("publicationLanguage") }
Expand All @@ -164,7 +166,7 @@ export async function currentSettings() {
return R2Settings.currentSettings()
}
export async function increase(incremental) {
if ((incremental == "pitch" || incremental == "rate" || incremental == "volume") && oc(R2Navigator.rights).enableTTS(false) ) {
if ((incremental == "pitch" || incremental == "rate" || incremental == "volume") && oc(R2Navigator.rights).enableTTS(false)) {
if (IS_DEV) { console.log("increase " + incremental) }
R2TTSSettings.increase(incremental)
} else {
Expand All @@ -173,7 +175,7 @@ export async function increase(incremental) {
}
}
export async function decrease(incremental) {
if ((incremental == "pitch" || incremental == "rate" || incremental == "volume") && oc(R2Navigator.rights).enableTTS(false) ) {
if ((incremental == "pitch" || incremental == "rate" || incremental == "volume") && oc(R2Navigator.rights).enableTTS(false)) {
if (IS_DEV) { console.log("decrease " + incremental) }
R2TTSSettings.decrease(incremental)
} else {
Expand Down Expand Up @@ -265,7 +267,7 @@ export async function load(config: ReaderConfig): Promise<any> {
store: settingsStore,
initialUserSettings: config.userSettings,
headerMenu: headerMenu,
ui: config.ui,
material: config.material,
api: config.api
})

Expand All @@ -278,15 +280,17 @@ export async function load(config: ReaderConfig): Promise<any> {
settings: R2Settings,
annotator: annotator,
upLink: upLink,
ui: config.ui,
initialLastReadingPosition: config.lastReadingPosition,
material: config.material,
api: config.api,
rights: config.rights,
tts: config.tts,
injectables: config.injectables,
selectionMenuItems: config.selectionMenuItems,
initialAnnotationColor: config.initialAnnotationColor
injectables: config.injectables
})

D2Highlighter = await TextHighlighter.create({
delegate: R2Navigator,
config: config.highlighter
})

// Bookmark Module
Expand All @@ -309,36 +313,43 @@ export async function load(config: ReaderConfig): Promise<any> {
rights: config.rights,
publication: publication,
delegate: R2Navigator,
initialAnnotations: config.initialAnnotations
initialAnnotations: config.initialAnnotations,
config: config.annotations,
highlighter: D2Highlighter
})
// TTS Module
if (oc(config.rights).enableTTS(false)) {
R2TTSSettings = await TTSSettings.create({
store: settingsStore,
initialTTSSettings: config.tts,
headerMenu: headerMenu,
api:config.tts.api
})
TTSModuleInstance = await TTSModule.create({
annotationModule: AnnotationModuleInstance,
tts: R2TTSSettings
})
}
}

// TTS Module
if (oc(config.rights).enableTTS(false)) {
R2TTSSettings = await TTSSettings.create({
store: settingsStore,
initialTTSSettings: config.tts,
headerMenu: headerMenu,
api: config.tts.api
})
TTSModuleInstance = await TTSModule.create({
delegate: R2Navigator,
tts: R2TTSSettings,
headerMenu: headerMenu,
rights: config.rights,
highlighter: D2Highlighter
})
}

// Search Module
if (oc(config.rights).enableSearch(false)) {
// Search Module
SearchModule.create({
headerMenu: headerMenu,
delegate: R2Navigator,
publication: publication,
// api: config.api,
config: config.search
config: config.search,
highlighter: D2Highlighter
}).then(function (searchModule) {
SearchModuleInstance = searchModule
});
}


return new Promise(resolve => resolve(R2Navigator));
}

Expand Down Expand Up @@ -450,16 +461,16 @@ exports.annotations = function () {
return annotations()
}

exports.currentResource = function() {
exports.currentResource = function () {
return currentResource()
}
exports.mostRecentNavigatedTocItem = function() {
exports.mostRecentNavigatedTocItem = function () {
return mostRecentNavigatedTocItem()
}
exports.totalResources = function() {
exports.totalResources = function () {
return totalResources()
}
exports.publicationLanguage = function() {
exports.publicationLanguage = function () {
return publicationLanguage()
}
exports.search = function (term, current) {
Expand Down
43 changes: 25 additions & 18 deletions src/model/user-settings/UserSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export interface UserSettingsConfig {
store: Store,
initialUserSettings: UserSettings;
headerMenu: HTMLElement;
ui: ReaderUI;
material: ReaderUI;
api: any;
}
export interface UserSettingsUIConfig {
Expand Down Expand Up @@ -116,7 +116,7 @@ export class UserSettings implements UserSettings {

private settingsView: HTMLDivElement;
private headerMenu: HTMLElement;
private ui: ReaderUI | null = null;
private material: ReaderUI | null = null;
api: any;

private iframe: HTMLIFrameElement;
Expand All @@ -125,7 +125,7 @@ export class UserSettings implements UserSettings {
const settings = new this(
config.store,
config.headerMenu,
config.ui,
config.material,
config.api
);

Expand Down Expand Up @@ -184,13 +184,13 @@ export class UserSettings implements UserSettings {
return new Promise(resolve => resolve(settings));
}

protected constructor(store: Store, headerMenu: HTMLElement, ui: ReaderUI, api: any) {
protected constructor(store: Store, headerMenu: HTMLElement, material: ReaderUI, api: any) {
this.store = store;

this.reflowable = new ReflowableBookView(this.store);

this.headerMenu = headerMenu;
this.ui = ui;
this.material = material;
this.api = api;
this.initialise();
}
Expand Down Expand Up @@ -392,13 +392,15 @@ export class UserSettings implements UserSettings {


private renderControls(element: HTMLElement): void {
if (oc(this.ui).settings.fontSize(false)) {
if (oc(this.material).settings.fontSize(false)) {
this.fontSizeButtons = {};
for (const fontSizeName of ["decrease", "increase"]) {
this.fontSizeButtons[fontSizeName] = HTMLUtilities.findElement(element, "#" + fontSizeName + "-font") as HTMLButtonElement;
}
} else {
HTMLUtilities.findElement(element, "#container-view-fontsize") ? HTMLUtilities.findElement(element, "#container-view-fontsize").remove() : null
}
if (oc(this.ui).settings.fontFamily(false)) {
if (oc(this.material).settings.fontFamily(false)) {
this.fontButtons = {};
this.fontButtons[0] = HTMLUtilities.findElement(element, "#publisher-font") as HTMLButtonElement;
this.fontButtons[1] = HTMLUtilities.findElement(element, "#serif-font") as HTMLButtonElement;
Expand All @@ -409,8 +411,11 @@ export class UserSettings implements UserSettings {
}
}
this.updateFontButtons();
} else {
HTMLUtilities.findElement(element, "#container-view-fontfamily") ? HTMLUtilities.findElement(element, "#container-view-fontfamily").remove() : null
}
if (oc(this.ui).settings.appearance(false)) {

if (oc(this.material).settings.appearance(false)) {
this.themeButtons = {};
this.themeButtons[0] = HTMLUtilities.findElement(element, "#day-theme") as HTMLButtonElement;
this.themeButtons[1] = HTMLUtilities.findElement(element, "#sepia-theme") as HTMLButtonElement;
Expand All @@ -421,17 +426,15 @@ export class UserSettings implements UserSettings {
}
}
} else {
// remove buttons
HTMLUtilities.findRequiredElement(element, "#container-view-appearance").remove()
HTMLUtilities.findElement(element, "#container-view-appearance") ? HTMLUtilities.findElement(element, "#container-view-appearance").remove() : null
}

if (oc(this.ui).settings.scroll(false)) {
if (oc(this.material).settings.scroll(false)) {
this.viewButtons = {};
this.viewButtons[0] = HTMLUtilities.findElement(element, "#view-scroll") as HTMLButtonElement;
this.viewButtons[1] = HTMLUtilities.findElement(element, "#view-paginated") as HTMLButtonElement;
this.updateViewButtons();
} else {
// remove buttons
HTMLUtilities.findElement(element, "#container-view-scroll") ? HTMLUtilities.findElement(element, "#container-view-scroll").remove() : null
}

Expand All @@ -453,7 +456,7 @@ export class UserSettings implements UserSettings {

private async setupEvents(): Promise<void> {

if (oc(this.ui).settings.fontSize(false)) {
if (oc(this.material).settings.fontSize(false)) {
addEventListenerOptional(this.fontSizeButtons["decrease"], 'click', async (event: MouseEvent) => {
(this.userProperties.getByRef(ReadiumCSS.FONT_SIZE_REF) as Incremental).decrement()
await this.storeProperty(this.userProperties.getByRef(ReadiumCSS.FONT_SIZE_REF))
Expand All @@ -470,7 +473,7 @@ export class UserSettings implements UserSettings {
});
}

if (oc(this.ui).settings.fontFamily(false)) {
if (oc(this.material).settings.fontFamily(false)) {
for (let index = 0; index < UserSettings.fontFamilyValues.length; index++) {
const button = this.fontButtons[index];
if (button) {
Expand All @@ -486,7 +489,7 @@ export class UserSettings implements UserSettings {
}
}

if (oc(this.ui).settings.appearance(false)) {
if (oc(this.material).settings.appearance(false)) {
for (let index = 0; index < UserSettings.appearanceValues.length; index++) {
const button = this.themeButtons[index];
if (button) {
Expand All @@ -501,7 +504,7 @@ export class UserSettings implements UserSettings {
}
}

if (oc(this.ui).settings.scroll(false)) {
if (oc(this.material).settings.scroll(false)) {
for (let index = 0; index < UserSettings.scrollValues.length; index++) {
const button = this.viewButtons[index];
if (button) {
Expand All @@ -522,22 +525,26 @@ export class UserSettings implements UserSettings {
}

private async updateFontButtons(): Promise<void> {
if (oc(this.material).settings.fontFamily(false)) {
for (let index = 0; index < UserSettings.fontFamilyValues.length; index++) {
this.fontButtons[index].className = this.fontButtons[index].className.replace(" active", "")
}
if (this.userProperties) {
if (this.fontButtons[await this.userProperties.getByRef(ReadiumCSS.FONT_FAMILY_REF).value]) this.fontButtons[await this.userProperties.getByRef(ReadiumCSS.FONT_FAMILY_REF).value].className += " active"
}
}
}

private async updateViewButtons(): Promise<void> {
if (oc(this.material).settings.scroll(false)) {
for (let index = 0; index < UserSettings.scrollValues.length; index++) {
this.viewButtons[index].className = this.viewButtons[index].className.replace(" active", "")
}
if (this.userProperties) {
if (this.viewButtons[await this.userProperties.getByRef(ReadiumCSS.SCROLL_REF).value]) this.viewButtons[await this.userProperties.getByRef(ReadiumCSS.SCROLL_REF).value].className += " active"
}
}
}

private async storeProperty(property: UserProperty): Promise<void> {
this.updateUserSettings()
Expand All @@ -555,7 +562,7 @@ export class UserSettings implements UserSettings {
UserSettings.fontFamilyValues.push(fontFamily)
this.applyProperties()

if (this.settingsView) {
if (this.settingsView && oc(this.material).settings.fontFamily(false)) {
const index = UserSettings.fontFamilyValues.length - 1
this.fontButtons[index] = HTMLUtilities.findElement(this.settingsView, "#"+fontFamily+"-font") as HTMLButtonElement;
const button = this.fontButtons[index];
Expand Down Expand Up @@ -792,7 +799,7 @@ export class UserSettings implements UserSettings {
this.userProperties.getByRef(ReadiumCSS.SCROLL_REF).value = this.verticalScroll;
this.saveProperty(this.userProperties.getByRef(ReadiumCSS.SCROLL_REF))
this.applyProperties()
if (oc(this.ui).settings.scroll(false)) {
if (oc(this.material).settings.scroll(false)) {
this.updateViewButtons();
}
this.reflowable.setMode(scroll)
Expand Down
Loading

0 comments on commit 285e3e1

Please sign in to comment.