Skip to content

Commit

Permalink
Merge pull request #714 from gotson/feat/reading-direction
Browse files Browse the repository at this point in the history 
feat: add support for reading direction
  • Loading branch information
@aferditamuriqi
aferditamuriqi authored Feb 16, 2024
2 parents 9e76078 + bbbc608 commit 9649b1d
Show file tree
Hide file tree
Showing 5 changed files with 172 additions and 17 deletions.
2 changes: 2 additions & 0 deletions src/model/user-settings/ReadiumCSS.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ export class ReadiumCSS {
// static readonly PUBLISHER_DEFAULT_REF = "advancedSettings";
static readonly TEXT_ALIGNMENT_REF = "textAlign";
static readonly COLUMN_COUNT_REF = "colCount";
static readonly DIRECTION_REF = "direction";
static readonly WORD_SPACING_REF = "wordSpacing";
static readonly LETTER_SPACING_REF = "letterSpacing";
static readonly PAGE_MARGINS_REF = "pageMargins";
Expand All @@ -41,6 +42,7 @@ export class ReadiumCSS {
static readonly TEXT_ALIGNMENT_KEY =
"--USER__" + ReadiumCSS.TEXT_ALIGNMENT_REF;
static readonly COLUMN_COUNT_KEY = "--USER__" + ReadiumCSS.COLUMN_COUNT_REF;
static readonly DIRECTION_KEY = "--USER__" + ReadiumCSS.DIRECTION_REF;
static readonly WORD_SPACING_KEY = "--USER__" + ReadiumCSS.WORD_SPACING_REF;
static readonly LETTER_SPACING_KEY =
"--USER__" + ReadiumCSS.LETTER_SPACING_REF;
Expand Down
60 changes: 60 additions & 0 deletions src/model/user-settings/UserSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,7 @@ export interface IUserSettings {
// publisherDefaults: boolean;
textAlignment: number;
columnCount: number;
direction: number;
wordSpacing: number;
letterSpacing: number;
pageMargins: number;
Expand Down Expand Up @@ -100,6 +101,7 @@ export interface InitialUserSettings {
// publisherDefaults?: boolean | "readium-advanced-on" | "readium-advanced-off";
textAlignment: number;
columnCount: number;
direction: string;
wordSpacing: number;
letterSpacing: number;
pageMargins: number;
Expand Down Expand Up @@ -130,6 +132,7 @@ export class UserSettings implements IUserSettings {
private static fontFamilyValues = ["Original", "serif", "sans-serif"];
private static readonly textAlignmentValues = ["auto", "justify", "start"];
private static readonly columnCountValues = ["auto", "1", "2"];
private static readonly directionValues = ["auto", "ltr", "rtl"];

fontSize = 100.0;
fontOverride = false;
Expand All @@ -141,6 +144,7 @@ export class UserSettings implements IUserSettings {
// publisherDefaults = true;
textAlignment = 0;
columnCount = 0;
direction = 0;
wordSpacing = 0.0;
letterSpacing = 0.0;
pageMargins = 2.0;
Expand Down Expand Up @@ -248,6 +252,17 @@ export class UserSettings implements IUserSettings {
}
log.log(settings.columnCount);
}
if (initialUserSettings.direction) {
settings.direction = UserSettings.directionValues.findIndex(
(el: any) => el === initialUserSettings.direction
);
let prop = settings.userProperties.getByRef(ReadiumCSS.DIRECTION_REF);
if (prop) {
prop.value = settings.direction;
await settings.saveProperty(prop);
}
log.log(settings.direction);
}
if (initialUserSettings.wordSpacing) {
settings.wordSpacing = initialUserSettings.wordSpacing;
let prop = settings.userProperties.getByRef(
Expand Down Expand Up @@ -363,6 +378,10 @@ export class UserSettings implements IUserSettings {
"columnCount",
ReadiumCSS.COLUMN_COUNT_KEY
);
this.direction = await this.getPropertyAndFallback<Enumerable>(
"direction",
ReadiumCSS.DIRECTION_KEY
);

this.fontSize = await this.getPropertyAndFallback<Incremental>(
"fontSize",
Expand Down Expand Up @@ -399,6 +418,7 @@ export class UserSettings implements IUserSettings {
// this.publisherDefaults = true;
this.textAlignment = 0;
this.columnCount = 0;
this.direction = 0;
this.wordSpacing = 0.0;
this.letterSpacing = 0.0;
this.pageMargins = 2.0;
Expand Down Expand Up @@ -426,6 +446,8 @@ export class UserSettings implements IUserSettings {
html.style.removeProperty(ReadiumCSS.LETTER_SPACING_KEY);
// Apply column count
html.style.removeProperty(ReadiumCSS.COLUMN_COUNT_KEY);
// Apply direction
html.style.removeProperty(ReadiumCSS.DIRECTION_KEY);
// Apply text alignment
html.style.removeProperty(ReadiumCSS.TEXT_ALIGNMENT_KEY);
// Apply line height
Expand Down Expand Up @@ -601,6 +623,18 @@ export class UserSettings implements IUserSettings {
HTMLUtilities.setAttr(rootElement, "data-viewer-theme", "day");
HTMLUtilities.setAttr(body, "data-viewer-theme", "day");
}

if (this.view?.navigator.publication.isFixedLayout) {
if (await this.getProperty(ReadiumCSS.DIRECTION_KEY)) {
let value =
this.userProperties
.getByRef(ReadiumCSS.DIRECTION_REF)
?.toString() ?? null;
html.style.setProperty(ReadiumCSS.DIRECTION_KEY, value);
this.view.navigator.setDirection(value);
}
}

if (this.view?.navigator.publication.isReflowable) {
// Apply font family
if (await this.getProperty(ReadiumCSS.FONT_FAMILY_KEY)) {
Expand Down Expand Up @@ -786,6 +820,10 @@ export class UserSettings implements IUserSettings {
await this.userProperties?.getByRef(ReadiumCSS.COLUMN_COUNT_REF)
?.value
],
direction:
UserSettings.directionValues[
await this.userProperties?.getByRef(ReadiumCSS.DIRECTION_REF)?.value
],
wordSpacing: this.userProperties?.getByRef(ReadiumCSS.WORD_SPACING_REF)
?.value,
letterSpacing: this.userProperties?.getByRef(
Expand Down Expand Up @@ -829,6 +867,13 @@ export class UserSettings implements IUserSettings {
ReadiumCSS.COLUMN_COUNT_REF,
ReadiumCSS.COLUMN_COUNT_KEY
);
// Direction
userProperties.addEnumerable(
this.direction,
UserSettings.directionValues,
ReadiumCSS.DIRECTION_REF,
ReadiumCSS.DIRECTION_KEY
);
// Appearance
userProperties.addEnumerable(
this.appearance,
Expand Down Expand Up @@ -979,6 +1024,10 @@ export class UserSettings implements IUserSettings {
UserSettings.columnCountValues[
this.userProperties?.getByRef(ReadiumCSS.COLUMN_COUNT_REF)?.value
], // "auto", "1", "2"
direction:
UserSettings.directionValues[
this.userProperties?.getByRef(ReadiumCSS.DIRECTION_REF)?.value
], // "auto", "ltr", "rtl"
verticalScroll: this.verticalScroll,
fontSize: this.fontSize,
wordSpacing: this.wordSpacing,
Expand Down Expand Up @@ -1050,6 +1099,17 @@ export class UserSettings implements IUserSettings {
this.settingsColumnsChangeCallback();
}

if (userSettings.direction) {
this.direction = UserSettings.directionValues.findIndex(
(el: any) => el === userSettings.direction
);
let prop = this.userProperties?.getByRef(ReadiumCSS.DIRECTION_REF);
if (prop) {
prop.value = this.direction;
await this.storeProperty(prop);
}
}

if (userSettings.textAlignment) {
this.textAlignment = UserSettings.textAlignmentValues.findIndex(
(el: any) => el === userSettings.textAlignment
Expand Down
27 changes: 27 additions & 0 deletions src/navigator/IFrameNavigator.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,6 +117,7 @@ export interface NavigatorAPI {
resourceAtEnd: any;
resourceFitsScreen: any;
updateCurrentLocation: any;
direction: any;
onError?: (e: Error) => void;
}

Expand Down Expand Up @@ -531,6 +532,19 @@ export class IFrameNavigator extends EventEmitter implements Navigator {
spreads: HTMLDivElement;
firstSpread: HTMLDivElement;

setDirection(direction?: string | null) {
let dir = "";
if (direction === "rtl" || direction === "ltr") dir = direction;
if (direction === "auto") dir = this.publication.Metadata.Direction2;
if (dir) {
if (dir === "rtl") this.spreads.style.flexDirection = "row-reverse";
if (dir === "ltr") this.spreads.style.flexDirection = "row";
this.keyboardEventHandler.rtl = dir === "rtl";
if (this.api?.direction) this.api?.direction(dir);
this.emit("direction", dir);
}
}

protected async start(
mainElement: HTMLElement,
headerMenu?: HTMLElement | null,
Expand Down Expand Up @@ -575,6 +589,19 @@ export class IFrameNavigator extends EventEmitter implements Navigator {
this.spreads.appendChild(this.firstSpread);
this.firstSpread.appendChild(this.iframes[0]);
wrapper.appendChild(this.spreads);
let dir = "";
switch (this.settings.direction) {
case 0:
dir = "auto";
break;
case 1:
dir = "ltr";
break;
case 2:
dir = "rtl";
break;
}
this.setDirection(dir);
} else {
iframe.setAttribute("height", "100%");
iframe.setAttribute("width", "100%");
Expand Down
39 changes: 22 additions & 17 deletions src/utils/KeyboardEventHandler.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,9 @@ import { IFrameNavigator } from "../navigator/IFrameNavigator";

export default class KeyboardEventHandler {
navigator: IFrameNavigator;
constructor(navigator: IFrameNavigator) {
rtl: boolean; constructor(navigator: IFrameNavigator) {
this.navigator = navigator;
this.rtl = false;
}

public onBackwardSwipe: (event: UIEvent) => void = () => {};
Expand Down Expand Up @@ -90,22 +91,26 @@ export default class KeyboardEventHandler {
const key = event.key;
switch (key) {
case "ArrowRight":
self.onForwardSwipe(event);
break;
case "ArrowLeft":
self.onBackwardSwipe(event);
break;
}
switch (event.code) {
case "Space":
if (event.ctrlKey) {
self.onBackwardSwipe(event);
} else {
self.onForwardSwipe(event);
}
break;
}
})
self.rtl
? self.onBackwardSwipe(event)
: self.onForwardSwipe(event);
break;
case "ArrowLeft":
self.rtl
? self.onForwardSwipe(event)
: self.onBackwardSwipe(event);
break;
}
switch (event.code) {
case "Space":
if (event.ctrlKey) {
self.onBackwardSwipe(event);
} else {
self.onForwardSwipe(event);
}
break;
}
})
);
}
}
61 changes: 61 additions & 0 deletions viewer/index_dita.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -333,6 +333,44 @@
</button>
</center>
</div>
<div id="direction" style="padding: 5px;">
<label style="display: block;
text-align: center;
line-height: 12pt;">Direction</label>
<center>
<button style="width: 30%;
background-color: white;
height: 50px;
border-radius: 25px 0px 0px 25px;
border-color: #00000020;
border-width: 1px;
border-style: solid;
color: black;
font-size: 9pt;text-transform: uppercase"
onclick="d2reader.applyUserSettings({direction:'auto'});setDirection('auto')">Auto
</button><button style="width: 30%;
background-color: white;
height: 50px;
/*border-radius: 25px;*/
border-color: #00000020;
border-width: 1px;
border-style: solid;
color: black;
font-size: 9pt;text-transform: uppercase" onclick="d2reader.applyUserSettings({direction:'ltr'});setDirection('ltr')">
LTR
</button><button style="width: 30%;
background-color: white;
height: 50px;
border-radius: 0px 25px 25px 0px;
border-color: #00000020;
border-width: 1px;
border-style: solid;
color: black;
font-size: 9pt;text-transform: uppercase" onclick="d2reader.applyUserSettings({direction:'rtl'});setDirection('rtl')">
RTL
</button>
</center>
</div>
<div class="range-slider" style="padding: 5px;">
<label style="display: block;
text-align: center;
Expand Down Expand Up @@ -1367,6 +1405,9 @@
onError: function(error) {
console.log(error);
},
direction: function(dir) {
document.getElementById("positionSlider").dir = dir
}
},
injectables: injectables,
injectablesFixed: [],
Expand Down Expand Up @@ -1431,6 +1472,23 @@
}
}

function setDirection(direction) {
let buttons = document.getElementById('direction').getElementsByTagName('button');
if (direction === 'auto') {
buttons[0].style.backgroundColor = '#d7dcdf'
buttons[1].style.backgroundColor = 'white'
buttons[2].style.backgroundColor = 'white'
} else if (direction === 'ltr') {
buttons[1].style.backgroundColor = '#d7dcdf'
buttons[0].style.backgroundColor = 'white'
buttons[2].style.backgroundColor = 'white'
} else if (direction === 'rtl') {
buttons[2].style.backgroundColor = '#d7dcdf'
buttons[0].style.backgroundColor = 'white'
buttons[1].style.backgroundColor = 'white'
}
}

function setScroll(scroll) {
let buttons = document.getElementById('scrollMode').getElementsByTagName('button');
if (scroll === 'true') {
Expand Down Expand Up @@ -1467,6 +1525,9 @@
let columnCount = result['columnCount']
setColumns(columnCount)

let direction = result['direction']
setDirection(direction)

let scrollMode = result['verticalScroll']
setScroll(String(scrollMode).toLowerCase())

Expand Down

0 comments on commit 9649b1d

Please sign in to comment.