https://marvelapp.com/fd6610g/screen/26718172
This features calls for a very app (native) like experience. In order to acheive this, we'd be using drawers and dialogs extensively. Out of the box, these modules are not robust enough for a feature like this. The following are changes made to those two pieces of functionality in order to get us closer to an app-like experience
Add an option to destory (remove from the DOM) on close. Why do this?
- CSS Transitions were not working on "re-opened" drawers. This may have been a simple CSS issue, but I couldn't come up with a solution, so I added this.
- Additionally, and more importantly, there were contexts which required the drawer to be rebuilt with new content
Add a data-attribute to a dialog-button
= button_tag 'Search', type: 'button', data: { drawer_button: { edge: 'bottom', content: '#search' }.to_json, remove_drawer_on_close: true }No code changes needed. Simply add more modifiers to the edge data-attribute key. Whatever the value of that key will be appended to the drawer's class attribute.
= button_tag 'Search', type: 'button', data: { drawer_button: { edge: 'bottom drawer--search drawer--bottom', content: '#search' }.to_json }This has been requested a number of times on builds. When you get to the bottom of a scrollable drawer, the page behind the drawer will keep scrolling. This negates that by toggling a class on the body. Class is then used as a new stylesheet under "trumps"
Out of the box, the dialogButtons module does a great job of determining where the content of a dialog is coming from (promise, template, the DOM, etc) before firing it off to the actual dialog module. However, if you want the dialog to be built with custom options, you must place them in the dom, and it's not immediately clear where exactly they should go and how they should be labeled.
This led to a new module that essentially wraps the dialogButtons module.
data: { dialog_preset: 'assemblageExitConfirmationOptions' }
Using CSS provides a more reliable way to center the dialog than the inline styles applied by jQuery
Adding show: true, hide: true to the jQuery UI dialog options is low hanging fruit to add some animations to your dialogs
Out of the box, the loading dialog does not receive any custom dialog options passed to your dialog. The promise module utilizes an options parameter, but nothing is passed to it from dialog.js. This change makes it so the loading dialog will look and behave the same as your eventual dialog. This was particularly useful for the full screen dialogs
To stick with the app/native feel, the promise module was updated to accept a template for the loading dialog. Using configs, this allows us to have the loading dialog mimic the layout of the eventual content of the dialog, giving user immediate feedback
Same as for drawers, resues the .prevent-scrol trump on the body element