@readium/navigator 2.0.0-beta.6 → 2.0.0-beta.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@readium/navigator",
-  "version": "2.0.0-beta.6",
+  "version": "2.0.0-beta.7",
   "type": "module",
   "description": "Next generation SDK for publications in Web Apps",
   "author": "readium",
@@ -49,7 +49,7 @@
   },
   "devDependencies": {
     "@laynezh/vite-plugin-lib-assets": "^0.5.25",
-    "@readium/css": ">=2.0.0-beta.14",
+    "@readium/css": ">=2.0.0-beta.15",
     "@readium/navigator-html-injectables": "workspace:*",
     "@readium/shared": "workspace:*",
     "@types/path-browserify": "^1.0.3",

package/src/epub/css/Properties.ts

@@ -240,6 +240,10 @@ export interface IRSProperties {
   sansSerifJa?: string | null;
   sansSerifJaV?: string | null;
   sansTf?: string | null;
+  scrollPaddingBottom?: number | null;
+  // scrollPaddingLeft?: number | null;
+  // scrollPaddingRight?: number | null;
+  scrollPaddingTop?: number | null;
   secondaryColor?: string | null;
   selectionBackgroundColor?: string | null;
   selectionTextColor?: string | null;
@@ -280,6 +284,10 @@ export class RSProperties extends Properties {
   sansSerifJa: string | null;
   sansSerifJaV: string | null;
   sansTf: string | null;
+  scrollPaddingBottom: number | null;
+  // scrollPaddingLeft: number | null;
+  // scrollPaddingRight: number | null;
+  scrollPaddingTop: number | null;
   secondaryColor: string | null;
   selectionBackgroundColor: string | null;
   selectionTextColor: string | null;
@@ -317,6 +325,10 @@ export class RSProperties extends Properties {
     this.paraIndent = props.paraIndent ?? null;
     this.paraSpacing = props.paraSpacing ?? null;
     this.primaryColor = props.primaryColor ?? null;
+    this.scrollPaddingBottom = props.scrollPaddingBottom ?? null;
+    // this.scrollPaddingLeft = props.scrollPaddingLeft ?? null;
+    // this.scrollPaddingRight = props.scrollPaddingRight ?? null;
+    this.scrollPaddingTop = props.scrollPaddingTop ?? null;
     this.sansSerifJa = props.sansSerifJa ?? null;
     this.sansSerifJaV = props.sansSerifJaV ?? null;
     this.sansTf = props.sansTf ?? null;
@@ -362,6 +374,10 @@ export class RSProperties extends Properties {
     if (this.sansSerifJa) cssProperties["--RS__sans-serif-ja"] = this.sansSerifJa;
     if (this.sansSerifJaV) cssProperties["--RS__sans-serif-ja-v"] = this.sansSerifJaV;
     if (this.sansTf) cssProperties["--RS__sansTf"] = this.sansTf;
+    if (this.scrollPaddingBottom != null) cssProperties["--RS__scrollPaddingBottom"] = this.toPx(this.scrollPaddingBottom);
+    // if (this.scrollPaddingLeft != null) cssProperties["--RS__scrollPaddingLeft"] = this.toPx(this.scrollPaddingLeft);
+    // if (this.scrollPaddingRight != null) cssProperties["--RS__scrollPaddingRight"] = this.toPx(this.scrollPaddingRight);
+    if (this.scrollPaddingTop != null) cssProperties["--RS__scrollPaddingTop"] = this.toPx(this.scrollPaddingTop);
     if (this.secondaryColor) cssProperties["--RS__secondaryColor"] = this.secondaryColor;
     if (this.selectionBackgroundColor) cssProperties["--RS__selectionBackgroundColor"] = this.selectionBackgroundColor;
     if (this.selectionTextColor) cssProperties["--RS__selectionTextColor"] = this.selectionTextColor;

package/src/epub/css/ReadiumCSS.ts

@@ -49,6 +49,18 @@ export class ReadiumCSS {
     if (settings.pageGutter !== this.rsProperties.pageGutter)
       this.rsProperties.pageGutter = settings.pageGutter;
 
+    if (settings.scrollPaddingBottom !== this.rsProperties.scrollPaddingBottom)
+      this.rsProperties.scrollPaddingBottom = settings.scrollPaddingBottom;
+
+    // if (settings.scrollPaddingLeft !== this.rsProperties.scrollPaddingLeft)
+    //   this.rsProperties.scrollPaddingLeft = settings.scrollPaddingLeft;
+
+    // if (settings.scrollPaddingRight !== this.rsProperties.scrollPaddingRight)
+    //   this.rsProperties.scrollPaddingRight = settings.scrollPaddingRight;
+
+    if (settings.scrollPaddingTop !== this.rsProperties.scrollPaddingTop)
+      this.rsProperties.scrollPaddingTop = settings.scrollPaddingTop;
+
     // This has to be updated before pagination
     // otherwise the metrics won’t be correct for line length
     this.lineLengths.update({

package/src/epub/preferences/EpubDefaults.ts

@@ -51,6 +51,10 @@ export interface IEpubDefaults {
   paragraphIndent?: number | null,
   paragraphSpacing?: number | null,
   scroll?: boolean | null,
+  scrollPaddingTop?: number | null,
+  scrollPaddingBottom?: number | null,
+  // scrollPaddingLeft?: number | null,
+  // scrollPaddingRight?: number | null,
   selectionBackgroundColor?: string | null,
   selectionTextColor?: string | null,
   textAlign?: TextAlignment | null,
@@ -91,6 +95,10 @@ export class EpubDefaults {
   paragraphIndent: number | null;
   paragraphSpacing: number | null;
   scroll: boolean | null;
+  scrollPaddingTop: number | null;
+  scrollPaddingBottom: number | null;
+  // scrollPaddingLeft: number | null;
+  // scrollPaddingRight: number | null;
   selectionBackgroundColor: string | null;
   selectionTextColor: string | null;
   textAlign: TextAlignment | null;
@@ -132,6 +140,10 @@ export class EpubDefaults {
     this.paragraphIndent = ensureNonNegative(defaults.paragraphIndent) ?? null;
     this.paragraphSpacing = ensureNonNegative(defaults.paragraphSpacing) ?? null;
     this.scroll = ensureBoolean(defaults.scroll) ?? false;
+    this.scrollPaddingTop = ensureNonNegative(defaults.scrollPaddingTop) ?? null;
+    this.scrollPaddingBottom = ensureNonNegative(defaults.scrollPaddingBottom) ?? null;
+    // this.scrollPaddingLeft = ensureNonNegative(defaults.scrollPaddingLeft) ?? null;
+    // this.scrollPaddingRight = ensureNonNegative(defaults.scrollPaddingRight) ?? null;
     this.selectionBackgroundColor = ensureString(defaults.selectionBackgroundColor) || null;
     this.selectionTextColor = ensureString(defaults.selectionTextColor) || null;
     this.textAlign = ensureEnumValue<TextAlignment>(defaults.textAlign, TextAlignment) || null;

package/src/epub/preferences/EpubPreferences.ts

@@ -48,6 +48,10 @@ export interface IEpubPreferences {
   paragraphIndent?: number | null,
   paragraphSpacing?: number | null,
   scroll?: boolean | null,
+  scrollPaddingTop?: number | null,
+  scrollPaddingBottom?: number | null,
+  // scrollPaddingLeft?: number | null,
+  // scrollPaddingRight?: number | null,
   selectionBackgroundColor?: string | null,
   selectionTextColor?: string | null,
   textAlign?: TextAlignment | null,
@@ -88,6 +92,10 @@ export class EpubPreferences implements ConfigurablePreferences {
   paragraphIndent?: number | null;
   paragraphSpacing?: number | null;
   scroll?: boolean | null;
+  scrollPaddingTop?: number | null;
+  scrollPaddingBottom?: number | null;
+  // scrollPaddingLeft?: number | null;
+  // scrollPaddingRight?: number | null;
   selectionBackgroundColor?: string | null;
   selectionTextColor?: string | null;
   textAlign?: TextAlignment | null;
@@ -124,6 +132,10 @@ export class EpubPreferences implements ConfigurablePreferences {
     this.paragraphIndent = ensureNonNegative(preferences.paragraphIndent);
     this.paragraphSpacing = ensureNonNegative(preferences.paragraphSpacing);
     this.scroll = ensureBoolean(preferences.scroll);
+    this.scrollPaddingTop = ensureNonNegative(preferences.scrollPaddingTop);
+    this.scrollPaddingBottom = ensureNonNegative(preferences.scrollPaddingBottom);
+    // this.scrollPaddingLeft = ensureNonNegative(preferences.scrollPaddingLeft);
+    // this.scrollPaddingRight = ensureNonNegative(preferences.scrollPaddingRight);
     this.selectionBackgroundColor = ensureString(preferences.selectionBackgroundColor);
     this.selectionTextColor = ensureString(preferences.selectionTextColor);
     this.textAlign = ensureEnumValue<TextAlignment>(preferences.textAlign, TextAlignment);

package/src/epub/preferences/EpubPreferencesEditor.ts

@@ -383,6 +383,52 @@ export class EpubPreferencesEditor implements IPreferencesEditor {
     });
   }
 
+  get scrollPaddingTop(): Preference<number> {
+    return new Preference<number>({
+      initialValue: this.preferences.scrollPaddingTop,
+      effectiveValue: this.settings.scrollPaddingTop || 0,
+      isEffective: this.layout === EPUBLayout.reflowable && !!this.settings.scroll && this.preferences.scrollPaddingTop !== null,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("scrollPaddingTop", newValue || null);
+      }
+    });
+  }
+
+  get scrollPaddingBottom(): Preference<number> {
+    return new Preference<number>({
+      initialValue: this.preferences.scrollPaddingBottom,
+      effectiveValue: this.settings.scrollPaddingBottom || 0,
+      isEffective: this.layout === EPUBLayout.reflowable && !!this.settings.scroll && this.preferences.scrollPaddingBottom !== null,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("scrollPaddingBottom", newValue || null);
+      }
+    });
+  }
+
+  /* 
+  get scrollPaddingLeft(): Preference<number> {
+    return new Preference<number>({
+      initialValue: this.preferences.scrollPaddingLeft,
+      effectiveValue: this.settings.scrollPaddingLeft || 0,
+      isEffective: this.layout === EPUBLayout.reflowable && !!this.settings.scroll && this.preferences.scrollPaddingLeft !== null,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("scrollPaddingLeft", newValue || null);
+      }
+    });
+  }
+
+  get scrollPaddingRight(): Preference<number> {
+    return new Preference<number>({
+      initialValue: this.preferences.scrollPaddingRight,
+      effectiveValue: this.settings.scrollPaddingRight || 0,
+      isEffective: this.layout === EPUBLayout.reflowable && !!this.settings.scroll && this.preferences.scrollPaddingRight !== null,
+      onChange: (newValue: number | null | undefined) => {
+        this.updatePreference("scrollPaddingRight", newValue || null);
+      }
+    });
+  } 
+  */
+
   get selectionBackgroundColor(): Preference<string> {
     return new Preference<string>({
       initialValue: this.preferences.selectionBackgroundColor,

package/src/epub/preferences/EpubSettings.ts

@@ -35,6 +35,10 @@ export interface IEpubSettings {
   paragraphIndent?: number | null,
   paragraphSpacing?: number | null,
   scroll?: boolean | null,
+  scrollPaddingTop?: number | null,
+  scrollPaddingBottom?: number | null,
+  // scrollPaddingLeft?: number | null,
+  // scrollPaddingRight?: number | null,
   selectionBackgroundColor?: string | null,
   selectionTextColor?: string | null,
   textAlign?: TextAlignment | null,
@@ -75,6 +79,10 @@ export class EpubSettings implements ConfigurableSettings {
   paragraphIndent: number | null;
   paragraphSpacing: number | null;
   scroll: boolean | null;
+  scrollPaddingTop: number | null;
+  scrollPaddingBottom: number | null;
+  // scrollPaddingLeft: number | null;
+  // scrollPaddingRight: number | null;
   selectionBackgroundColor: string | null;
   selectionTextColor: string | null;
   textAlign: TextAlignment | null;
@@ -182,6 +190,28 @@ export class EpubSettings implements ConfigurableSettings {
     this.scroll = typeof preferences.scroll === "boolean" 
       ? preferences.scroll 
       : defaults.scroll ?? null;
+    this.scrollPaddingTop = preferences.scrollPaddingTop !== undefined 
+      ? preferences.scrollPaddingTop 
+      : defaults.scrollPaddingTop !== undefined 
+        ? defaults.scrollPaddingTop 
+        : null;
+    this.scrollPaddingBottom = preferences.scrollPaddingBottom !== undefined 
+      ? preferences.scrollPaddingBottom 
+      : defaults.scrollPaddingBottom !== undefined 
+        ? defaults.scrollPaddingBottom 
+        : null;
+    /* 
+    this.scrollPaddingLeft = preferences.scrollPaddingLeft !== undefined 
+      ? preferences.scrollPaddingLeft 
+      : defaults.scrollPaddingLeft !== undefined 
+        ? defaults.scrollPaddingLeft 
+        : null;
+    this.scrollPaddingRight = preferences.scrollPaddingRight !== undefined 
+      ? preferences.scrollPaddingRight 
+      : defaults.scrollPaddingRight !== undefined 
+        ? defaults.scrollPaddingRight 
+        : null;
+    */
     this.selectionBackgroundColor = preferences.selectionBackgroundColor || defaults.selectionBackgroundColor || null;
     this.selectionTextColor = preferences.selectionTextColor || defaults.selectionTextColor || null;
     this.textAlign = preferences.textAlign || defaults.textAlign || null;

package/types/src/epub/css/Properties.d.ts

@@ -122,6 +122,8 @@ export interface IRSProperties {
     sansSerifJa?: string | null;
     sansSerifJaV?: string | null;
     sansTf?: string | null;
+    scrollPaddingBottom?: number | null;
+    scrollPaddingTop?: number | null;
     secondaryColor?: string | null;
     selectionBackgroundColor?: string | null;
     selectionTextColor?: string | null;
@@ -161,6 +163,8 @@ export declare class RSProperties extends Properties {
     sansSerifJa: string | null;
     sansSerifJaV: string | null;
     sansTf: string | null;
+    scrollPaddingBottom: number | null;
+    scrollPaddingTop: number | null;
     secondaryColor: string | null;
     selectionBackgroundColor: string | null;
     selectionTextColor: string | null;

package/types/src/epub/preferences/EpubDefaults.d.ts

@@ -29,6 +29,8 @@ export interface IEpubDefaults {
     paragraphIndent?: number | null;
     paragraphSpacing?: number | null;
     scroll?: boolean | null;
+    scrollPaddingTop?: number | null;
+    scrollPaddingBottom?: number | null;
     selectionBackgroundColor?: string | null;
     selectionTextColor?: string | null;
     textAlign?: TextAlignment | null;
@@ -68,6 +70,8 @@ export declare class EpubDefaults {
     paragraphIndent: number | null;
     paragraphSpacing: number | null;
     scroll: boolean | null;
+    scrollPaddingTop: number | null;
+    scrollPaddingBottom: number | null;
     selectionBackgroundColor: string | null;
     selectionTextColor: string | null;
     textAlign: TextAlignment | null;

package/types/src/epub/preferences/EpubPreferences.d.ts

@@ -30,6 +30,8 @@ export interface IEpubPreferences {
     paragraphIndent?: number | null;
     paragraphSpacing?: number | null;
     scroll?: boolean | null;
+    scrollPaddingTop?: number | null;
+    scrollPaddingBottom?: number | null;
     selectionBackgroundColor?: string | null;
     selectionTextColor?: string | null;
     textAlign?: TextAlignment | null;
@@ -69,6 +71,8 @@ export declare class EpubPreferences implements ConfigurablePreferences {
     paragraphIndent?: number | null;
     paragraphSpacing?: number | null;
     scroll?: boolean | null;
+    scrollPaddingTop?: number | null;
+    scrollPaddingBottom?: number | null;
     selectionBackgroundColor?: string | null;
     selectionTextColor?: string | null;
     textAlign?: TextAlignment | null;

package/types/src/epub/preferences/EpubPreferencesEditor.d.ts

@@ -41,6 +41,8 @@ export declare class EpubPreferencesEditor implements IPreferencesEditor {
     get paragraphIndent(): RangePreference<number>;
     get paragraphSpacing(): RangePreference<number>;
     get scroll(): BooleanPreference;
+    get scrollPaddingTop(): Preference<number>;
+    get scrollPaddingBottom(): Preference<number>;
     get selectionBackgroundColor(): Preference<string>;
     get selectionTextColor(): Preference<string>;
     get textAlign(): EnumPreference<TextAlignment>;

package/types/src/epub/preferences/EpubSettings.d.ts

@@ -32,6 +32,8 @@ export interface IEpubSettings {
     paragraphIndent?: number | null;
     paragraphSpacing?: number | null;
     scroll?: boolean | null;
+    scrollPaddingTop?: number | null;
+    scrollPaddingBottom?: number | null;
     selectionBackgroundColor?: string | null;
     selectionTextColor?: string | null;
     textAlign?: TextAlignment | null;
@@ -71,6 +73,8 @@ export declare class EpubSettings implements ConfigurableSettings {
     paragraphIndent: number | null;
     paragraphSpacing: number | null;
     scroll: boolean | null;
+    scrollPaddingTop: number | null;
+    scrollPaddingBottom: number | null;
     selectionBackgroundColor: string | null;
     selectionTextColor: string | null;
     textAlign: TextAlignment | null;