Allow embedding into custom html page
leif81 opened this issue · comments
This is something that came to my mind after seeing what @dylanwh was up to.
Since the beginning we've put everything into index.html. This simplified development and in some cases deployment too (here, one file, done!). But there are some advantages to splitting up the index.html into html, css and js. For example it'd be nice to be able to run jslint without it barfing on the html and css. And vim autohighlighting would work reliably again. And GitHub would think our project was more than just 100% HTML. Etc.
But the larger motivation would be so that the board could be embedded easily into someone's existing page. Whether it be inside a wiki, or a custom page with common site header/footer, etc.
I'm sure there are many projects that behave like this, but the one that comes to my mind is OpenLayers. The user creates an instance of the map widget (in our case it'd be the board) and pass some configuration to it, attaches it to a page element id, and they're done.
e.g. http://openlayers.org/en/latest/doc/quickstart.html
Maybe later we could publish stable releases of the project into npm or a cdn so users could grab it easily too.
But at the same time, still offering a sample index.html for users who just want to grab a copy to host locally and be done with it.
Ok I did the easy part which is to split the index.html into js and css.
I won't close this yet though.
I feel it'd be best if I refactor as much of the static HTML in index.html into dynamically generated HTML by bzkanban.js. So pretty much everything remaining in the <body>. That way, as mentioned above, for someone who wants to embed bzkanban in their site they would just include the bzkanban.js script and attach the board to a single dom element in their page (e.g. <div id='bzkanban'></div>). And if/when the bzkanban layout evolves over time they needn't be affected or concerned with that because all the HTML would be encapsulated and generated by the script at run time. Our index.html would become the reference example for how to embed the board in a page.
P.S. Much of the above is new territory for me, but it feels like the right thing to do.
Ok, the hardest parts are done and merged.
Next up is allowing external configuration i.e. passing in a configuration object to bzkanban.js, like openlayers does.