6

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?

Witek
  • 5,670
  • 7
  • 39
  • 59
  • 3
    Check out the [Reagent Cookbook](https://github.com/reagent-project/reagent-cookbook/tree/master/recipes/bootstrap-modal). – jmargolisvt Feb 29 '16 at 21:19

3 Answers3

8

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]
Terje Norderhaug
  • 3,509
  • 19
  • 25
  • 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. – foki Jul 12 '16 at 12:45
4

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

Mike Thompson
  • 936
  • 5
  • 11
0

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.

Paul Brown
  • 1,835
  • 10
  • 17