Is your feature request related to a problem?
I need to use StoryInterface to put some divs around the story to style it nicely but I still want the features the UIBar offers without having to replicate them myself from scratch.
Describe alternatives you've considered.
At the moment, I call UIBar.init(); in my Story Javascript and then jQuery("#ui-bar-history").detach().appendTo('#newhistory'); jQuery("#title").detach().appendTo('#newtitle'); jQuery("#menu").detach().appendTo('#newmenu'); jQuery("#ui-bar").detach(); move its parts where I want them. This works (even better with 2.37 now the StoryMenu bug is fixed), but it feels like I'm relying on undocumented implementation details.
Describe the solution you'd like.
I thought about a couple of solutions that might work, but this one feels the most straightforward and uncomplicated:
When encountering StoryInterface in engineInit(), destroy the old UIBar as it is currently, but after adding the html to the page, try to reconnect as follows:
If there's no #ui-bar, do nothing.
Try to find #ui-bar-tray, if it is there, add the ui-bar-toggle button to it
Try to find #ui-bar-history, if it is there, add the 3 history buttons to it
Try to find story-banner, story-title, story-subtitle, story-title-separator, story-author, and story-caption. Reconnect their updates if found
Same for menu-story and menu-core (the latter also with button creation)
Document that with a note that the author also is responsible for providing all the needed CSS that would have been in #style-ui-bar (I feel like still removing that would be the right choice as the CSS in there wouldn't fit any different structure anyway.)
This would ideally allow the author to use the functionality of all UIBar components just by including matching IDs in their html and styling them as wanted. And while my old solution isn't hard to do---it's literally 5 lines of code---, this would be a cleaner and update-safer way.
Additional context.
"Add any other context or screenshots about the feature request here." Ok, here's a screenshot of what I made using StoryInterface and then re-adding the UIBar elements:
Not that related, but I spent way too much time making this look good and getting it to work on any screen size as long as it's landscape. Who'd have thought specifying font sizes and image widths in vh would ever make sense? ;) (Ignore the whiteness of the page (turn) number, the text colour is bleeding over from the debug style there.) And yes, this does resize so the text always stays on the pages, the book always is the full browser height and stays slightly left of centre and the sides of the book can slide off-screen but not the text area---with just CSS. (I'm getting off-topic, showing off my creation here, sorry!!!)
Is your feature request related to a problem? I need to use StoryInterface to put some divs around the story to style it nicely but I still want the features the UIBar offers without having to replicate them myself from scratch.
Describe alternatives you've considered. At the moment, I call
UIBar.init();in my Story Javascript and thenjQuery("#ui-bar-history").detach().appendTo('#newhistory'); jQuery("#title").detach().appendTo('#newtitle'); jQuery("#menu").detach().appendTo('#newmenu'); jQuery("#ui-bar").detach();move its parts where I want them. This works (even better with 2.37 now the StoryMenu bug is fixed), but it feels like I'm relying on undocumented implementation details.Describe the solution you'd like. I thought about a couple of solutions that might work, but this one feels the most straightforward and uncomplicated:
#ui-bar, do nothing.#ui-bar-tray, if it is there, add the ui-bar-toggle button to it#ui-bar-history, if it is there, add the 3 history buttons to it#style-ui-bar(I feel like still removing that would be the right choice as the CSS in there wouldn't fit any different structure anyway.)This would ideally allow the author to use the functionality of all UIBar components just by including matching IDs in their html and styling them as wanted. And while my old solution isn't hard to do---it's literally 5 lines of code---, this would be a cleaner and update-safer way.
Additional context. "Add any other context or screenshots about the feature request here." Ok, here's a screenshot of what I made using StoryInterface and then re-adding the UIBar elements:
Not that related, but I spent way too much time making this look good and getting it to work on any screen size as long as it's landscape. Who'd have thought specifying font sizes and image widths in
vhwould ever make sense? ;) (Ignore the whiteness of the page (turn) number, the text colour is bleeding over from the debug style there.) And yes, this does resize so the text always stays on the pages, the book always is the full browser height and stays slightly left of centre and the sides of the book can slide off-screen but not the text area---with just CSS. (I'm getting off-topic, showing off my creation here, sorry!!!)