How to do modal dialogs with Om or Reagent (and Bootstrap)

Question

I wonder how showing and hiding of a modal dialog should be implemented with Om or Reagent. Since my UI is a function on the state, the show/hide should be triggered by a property in this state.

But frameworks like Bootstrap require to call some JavaScript to show/hide dialogs.

Is there any common solution for this problem?

Capitalization

Check out the Reagent Cookbook. – Chronaxie

Answer 1

Don't use javascript or jquery effects to show/hide dialogs in Om or Reagent. Instead, make the value of an atom determine whether the modal dialog should be shown. Here is an example for Reagent:

[(fn [shown]
       (if shown
        [:div.jumbotron.modal-background 
          {:on-click #(reset! popup-shown false)} 
          [:div.alert.alert-info
            [:div "Hello!"]]]
        [:div]))
   @popup-shown]

Nasturtium

It works but it's not a modal. Bootstrap modal wont show by default. That means that if you put modal instead jumbotron it wont work. – Gerdagerdeen

Answer 2

Have a look at re-com. It certainly shows one way of doing it. https://github.com/Day8/re-com

Sunburn

Answer 3

For Bootstrap specifically, the JavaScript adds "show" to the modal's class and style="display: block;" to the modal. By adding these to the modal we can force it to display all the time, we can then use conditional rendering to hide it:

(defn my-modal []
    (let [show @(app-state/query :modal-showing)]
      (when show
          [:div.modal.show {:tabIndex -1
                            :style {:display "block"}}
            [:div.modal-dialog
              [:div.modal-content
                "etc"]]])))

Where you get your show boolean from and how it's updated will be application specific, but hopefully this is sufficient to demonstrate the idea.

Bin