Page loader module about kvision HOT 12 CLOSED

I think a module for pace.js would be very cool (I personally like the simple "Flash" theme). It could be configured automatically for all events when the module is added to the project, and reconfigured at any time with a simple API wrapper.

from kvision.

I like your idea, I'll try to add it in, previously we were using a simple CSS loader but I think this would be much better.

from kvision.

I'm currently trying to add in a module for pace.js, but I am running into a little trouble when trying to use the module from Kotlin. The underlying issue is that it is a function that is called when loading the module, that function then persists an object to the window and that's how Pace methods are called.

I've tried loading it in like this:

pl.treksoft.kvision.require("pace-js/pace.js")

But this spits out an error of:

can't resolve 'Pace' in '..../pace-js'

Do you have an idea of how to get the require to run the function straight away without those errors?

from kvision.

Try this:

1. Use dependency("pace-progressbar", "1.0.8") in build.gradle (it seems to be the most updated fork)
2. Use:

    val pace = require("pace-progressbar").default
    val paceCss = require("pace-progressbar/themes/blue/pace-theme-flash.css")

to load and activate the module.

Btw, when I work with a new npm library, and I don't know how to use it, I always do this very simple test:

val module = require("module-name")
console.log(module)

Then I see in the browser console what functions and properties this module exports, and how to "dig" to the api functions described in the docs.

from kvision.

awesome thanks for the pointers, its working now with pace-progressbar. you will hopefully see a new PR coming through sometime next week

from kvision.

I am seeing a strange effect on chrome when starting PaceJs, it adds a blue border to the element:

Any idea why this happens?

from kvision.

It's probably some interaction with Bootstrap's CSS.

from kvision.

yeah I think its happening because it's in focus, should be able to set border to 0.

from kvision.

There is a "slight" problem with your new module. This line:

require("pace-progressbar/themes/${color.paceColorString}/pace-theme-${theme.paceThemeString}.css")

is broken. It makes webpack add all pace themes css files to the production bundle (about 1MB of compressed "garbage"). It's because require function allows to use only static strings. Unfortunately there is probably no way to fix this - you need to add all themes to the bundle to be able to dynamically choose one. And this 1MB is very, very much for such small module (it makes the bigest, showcase example grow from about 3MB to about 4MB). For now I will remove this dynamic require and hardcode "blue flash" theme - next we can think about other solutions.

from kvision.

yeah I was trying to find a way to make the theme dynamic but I didn't realize it would affect the size that much, I'm not sure how to fix that as yet

from kvision.

I committed the following solution.

1. To use the default ("blue flash") theme we can use:

    override fun start(state: Map<String, Any>) {
        Pace.init()
        // other stuff ...
    }

2. To use any other theme we can use:

    override fun start(state: Map<String, Any>) {
        Pace.init(require("pace-progressbar/themes/red/pace-theme-center-radar.css"))
        // other stuff ...
    }

It should work fine (it will always add the default theme to the bundle, but it's only a few bytes) and should be easy enough to work with. What do you think?

from kvision.

that sounds good to me, I think this issue is now resolved with version 0.0.37

from kvision.