AZEN-SGG/Kavita
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

EPUB CSS Parsing Issues (#690)

Browse source 
* WIP. Rewrote some of the Regex to better support css escaping. We now escape background-image, border-image, and list-style-image within css files.

* Added position relative to help with positioning on books that are just absolute positioned elements.

* When there is absolute positioning, like in some epub based comics, supress the bottom action bar since it wont render in the correct location.

* Fixed tests

* Commented out tests
This commit is contained in:
Joseph Milazzo 2021-10-18 16:28:07 -07:00 • committed by GitHub
parent 22497645a9
commit 60dd66f6ae
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
6 changed files with 81 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

3
UI/Web/src/app/book-reader/book-reader/book-reader.component.html
View file

@ -111,6 +111,9 @@
<ng-container [ngTemplateOutlet]="actionBar"></ng-container>
</div>
</div>
<!-- <div *ngIf="page !== undefined && scrollbarNeeded">
<ng-container [ngTemplateOutlet]="actionBar"></ng-container>
</div> -->
<ng-template #actionBar>
<div class="reading-bar row no-gutters justify-content-between">

5
UI/Web/src/app/book-reader/book-reader/book-reader.component.scss
View file

@ -155,6 +155,11 @@ $primary-color: #0062cc;
.reading-section {
height: 100vh;
width: 100%;
}
.book-content {
position: relative;
}
.drawer-body {

14
UI/Web/src/app/book-reader/book-reader/book-reader.component.ts
View file

@ -160,7 +160,11 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
readerStyles: string = '';
darkModeStyleElem!: HTMLElement;
topOffset: number = 0; // Offset for drawer and rendering canvas
scrollbarNeeded = false; // Used for showing/hiding bottom action bar
/**
* Used for showing/hiding bottom action bar. Calculates if there is enough scroll to show it.
* Will hide if all content in book is absolute positioned
*/
scrollbarNeeded = false;
readingDirection: ReadingDirection = ReadingDirection.LeftToRight;
private readonly onDestroy = new Subject<void>();
@ -715,6 +719,14 @@ export class BookReaderComponent implements OnInit, AfterViewInit, OnDestroy {
this.isLoading = false;
this.scrollbarNeeded = this.readingSectionElemRef.nativeElement.scrollHeight > this.readingSectionElemRef.nativeElement.clientHeight;
const itemsOnScreen = Array.from(this.readingHtml.nativeElement.querySelectorAll('*')).filter(elem => (elem as HTMLElement).nodeName != 'STYLE');
const itemsWithAbsolutePositioning = itemsOnScreen.filter(elem => (elem as HTMLElement).style.getPropertyValue('position') === 'absolute').length;
if (itemsWithAbsolutePositioning >= itemsOnScreen.length) {
// Supress bottom actionbar. This is because of how the html is structured, with abs positioning, it will render inside images, etc.
this.scrollbarNeeded = false;
}
// Find all the part ids and their top offset
this.setupPageAnchors();