Injecting custom CSS files in each WebView #72
-
|
We have created a custom CSS file for the comics book. What would be a good approach of injecting that CSS file into the each WebView? |
Beta Was this translation helpful? Give feedback.
Replies: 1 comment 3 replies
-
|
We plan to work soonish on an Injectable API to inject custom JavaScript and CSS but there's nothing available yet. However, you can implement a custom transformer for the HTML resources to use with the You can wrap the publication fetcher from the func injectCSS(_ resource: Resource) -> Resource {
...
}
streamer.open(
...,
onCreatePublication: { _, _, fetcher, _ in
fetcher = TransformingFetcher(fetcher: fetcher, transformers: [injectCSS]),
}
)Take a look at the
|
Beta Was this translation helpful? Give feedback.
-
|
@mickael-menu Thank you for your reply. I have created the following methods to inject the css. [UPDATE] working example private func injectCSS(_ resource: Resource) -> Resource {
// We only transform HTML resources.
guard resource.link.mediaType.isHTML else {
return resource
}
let commicCssKey = registrar?.lookupKey(forAsset: "assets/helpers/comics.css", fromPackage: "flutter_readium")
...
let sourceFiles = [commicCssKey, ...]
let source = sourceFiles.map { sourceFile -> String in
let path = Bundle.main.path(forResource: sourceFile, ofType: nil)!
let data = FileManager().contents(atPath: path)!
return String(data: data, encoding: .utf8)!
}.joined(separator: "\n")
return resource.mapAsString { content -> String in
var content = content
if let headStart = content.endIndex(of: "<head>") {
let style = "<style>\(source)</style>"
content = content.insert(string: style, at: headStart)
}
return content
}
}
private func assetToPublication(asset: PublicationAsset) -> Promise<Publication> {
return Promise<Publication>() { resolver in
Streamer().open(
asset: asset,
allowUserInteraction: false,
onCreatePublication: { _, _, fetcher, _ in
fetcher = TransformingFetcher(fetcher: fetcher, transformers: [injectCSS])
}
) { result in
do {
let publication = try result.get()
resolver.fulfill(publication)
} catch let error {
print("error = \(error)")
resolver.reject(error)
}
}
}
}Am I doing something wrong here? because the |
Beta Was this translation helpful? Give feedback.
-
|
Yes, my bad. You need to set the fetcher inout parameter: Also you need to modify the resource HTML in your I'll update my initial answer. |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your great help 🙏 🙂 |
Beta Was this translation helpful? Give feedback.
We plan to work soonish on an Injectable API to inject custom JavaScript and CSS but there's nothing available yet.
However, you can implement a custom transformer for the HTML resources to use with the
TransformingFetcherand inject the CSS yourself.You can wrap the publication fetcher from the
Streamer.open(onCreatePublication:)closure:Take a look at the
EPUBHTMLInjectorfor an example:swift-toolkit/Sources/Streamer/Parser/EPUB/Resource Transformers/EPUBHTML…