I tried the bootstrap-cljs modal yesterday and it works pretty well for me. I'd say its definitely worth a look.
On 14 August 2014 07:44, Makoto H. <[email protected]> wrote: > It looks cool ! I will try to run your code. > > > Don't know if this'll help you, but I had a similar issue and took a > stab at translating the bootstrap modal into an om component. It's a bit > hacky, but here it is: > > > > > > > > (ns om-pages.components.modal > > > > (:require-macros [cljs.core.async.macros :refer [go]]) > > > > (:require [goog.dom :as gdom] > > > > [om.core :as om :include-macros true] > > > > [om.dom :as dom :include-macros true] > > > > [cljs.core.async :refer [chan timeout put! <!]])) > > > > > > > > (def modal-opts-chan (chan)) > > > > (def modal-close-chan (chan)) > > > > (def fade-time 160) > > > > > > > > (defn set-modal [modal-opts] > > > > (put! modal-opts-chan modal-opts)) > > > > > > > > (defn close-modal [] > > > > (put! modal-close-chan true)) > > > > > > > > (defn option->button [{:keys [text style action]}] > > > > (let [className (str "btn btn-" (or style "default"))] > > > > (dom/button #js {:type "button" :className className :onClick > action} text))) > > > > > > > > (defn modal [cursor owner] > > > > (reify > > > > om/IInitState > > > > (init-state [_] > > > > {:modal-opts nil}) > > > > > > > > om/IWillMount > > > > (will-mount [_] > > > > (go (loop [] > > > > (om/set-state! owner :modal {:opts (<! modal-opts-chan) :state > :init}) > > > > (<! (timeout 50)) > > > > (om/set-state! owner [:modal :state] :in) > > > > (<! modal-close-chan) > > > > (om/set-state! owner [:modal :state] :out) > > > > (<! (timeout fade-time)) > > > > (om/set-state! owner :modal {:opts nil :state :clear}) > > > > (recur)))) > > > > > > > > om/IRenderState > > > > (render-state [_ {{:keys [opts state]} :modal}] > > > > (when opts > > > > (let [{:keys [title content options]} opts > > > > in (= state :in) > > > > click-on-bg? #(= (.-target %) (.-currentTarget %))] > > > > (dom/div nil > > > > (dom/div #js {:className (str "modal fade" (when in " in")) > > > > :onClick #(when (click-on-bg? %) > (close-modal))} > > > > (dom/div #js {:className "modal-dialog"} > > > > (dom/div #js {:className "modal-content"} > > > > (dom/div #js {:className "modal-header"} > > > > (dom/button #js {:type "button" :className "close" > > > > :onClick close-modal} > > > > (dom/i #js {:className "fa fa-times"})) > > > > (dom/h4 #js {:className "modal-title"} title)) > > > > (dom/div #js {:className "modal-body"} content) > > > > (apply dom/div #js {:className "modal-footer"} > > > > (map option->button options))))) > > > > (dom/div #js {:className (str "modal-backdrop fade" (when in > " in"))}))))))) > > > > > > > > I mount this to one of the last top-level divs in my html file using > om/root. Then, other components can show and hide the modal by using the > set-modal and close-modal functions. Something like this: > > > > > > > > (set-modal > > > > {:title "Unsaved Changes" > > > > :content "You have made changes to this page that have not > > > > yet been saved. How do you wish to proceed?" > > > > :options [{:text "Discard Changes" > > > > :style "danger" > > > > :action #(do (set! (.-hash js/location) view-url) > > > > (close-modal))} > > > > {:text "Cancel" > > > > :action close-modal}]}) > > > > > > > > The way the component works is to allow the bootstrap css transition > settings to do all the fading in and out work. The trick is to set the > classes to the proper starting state, then add or remove the "in" class to > allow the transition to take effect and allow enough time to pass. > > > > > > > > I used core.async channels to help with the timing and also to guard > against situations where two or more events might trigger modals. This way, > when that happens, the modal will show for the event that fired first, and > once that's dealt with, the modal for the next will show, and on and on. > > > > > > > > One more note—you need to add something like the following to your > css/sass/less to make sure the modal displays. (You could alternatively add > it to the css style attribute on the component itself, but I don't like > doing that.) > > > > > > > > #modal { > > > > .modal.fade { > > > > display: block !important; > > > > } > > > > } > > > > > > > > > > > > > > > > On Wednesday, August 6, 2014 8:53:54 PM UTC-7, Makoto H. wrote: > > > > > It worked with jayq. My code is as follows: > > > > > > > > > > > > > > > > > > > > (ns menu.test > > > > > > > > > > (:require-macros [cljs.core.async.macros :refer [go]]) > > > > > > > > > > (:require [om.core :as om :include-macros true] > > > > > > > > > > [om.dom :as dom :include-macros true] > > > > > > > > > > .... > > > > > > > > > > [jayq.core :refer [$]] > > > > > > > > > > > > > > > > > > > > ..... > > > > > > > > > > (.modal ($ :#div-modal) "hide") > > > > > > > > > > (.modal ($ :#div-modal) "show") > > > > > > > > > > > > > > > > > > > > I also think writing Thomas's suggestion using modal Om component is > better and > > > > > > > > > > I will try this. The bootstrap-cljs approach is also interesting. > > > > > > > > > > > > > > > > > > > > Thanks, > > > > > > > > > > Makoto > > > > > > > > > > > > > > > > > > > > > You call .modal on the div, but AFAIK when using jquery, $(..) does > more than just retrieve the DOM node - it adds all the jquery methods too. > > > > > > > > > > > You could try calling (.modal (js/$ modal) "show") or you could look > into using https://github.com/ibdknox/jayq > > > > > > > > > > > > > > > > > > > > > > In any case, mixing jquery (and similar) with React/Om doesn't seem > to be a great idea if you can at all help it. My suggestion would be as > Thomas says and write a modal Om component instead. Another alternative > (probably what I will do soon) is to look into using the modals from > https://github.com/luxbock/bootstrap-cljs > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > On 6 August 2014 14:54, Makoto H. <[email protected]> wrote: > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > I have defined bootstrap.js like > > > > > > > > > > > > > > > > > > > > > > ":externs ["/bootstrap.js"]" in my project.clj. > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > But I'm not sure that is correct or not. > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > https://gist.github.com/tokomakoma123/d2111e9ee288e3dddbcf > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > I found an article in the web which provides a solution how to use > > > > > > > > > > > > > > > > > > > > > > bootstrap components from react.js. > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > http://clozeit.wordpress.com/2014/01/08/bootstrap-modals-and-popover-in-react-js/ > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > I will try to rewrite it into om. > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > Thanks, > > > > > > > > > > > > > > > > > > > > > > Makoto > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > Looking at the code it seems like you are calling jquery style > code without actual jquery. > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > (.modal modal "show") > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > .modal is a method provided via bootstrap.js/jquery and usually > called as > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > $('#div-modal').modal('show') > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > I'm not sure on how you'd interface bootstrap with Om but I doubt > that there is a "sane" way. You are probably better off writing a modal > component in Om. > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > > -- > > > > > > > > > > > > > > > > > > > > > > Note that posts from new members are moderated - please be patient > with your first post. > > > > > > > > > > > > > > > > > > > > > > --- > > > > > > > > > > > > > > > > > > > > > > You received this message because you are subscribed to the Google > Groups "ClojureScript" group. > > > > > > > > > > > > > > > > > > > > > > To unsubscribe from this group and stop receiving emails from it, > send an email to [email protected]. > > > > > > > > > > > > > > > > > > > > > > To post to this group, send email to [email protected]. > > > > > > > > > > > > > > > > > > > > > > Visit this group at http://groups.google.com/group/clojurescript. > > -- > Note that posts from new members are moderated - please be patient with > your first post. > --- > You received this message because you are subscribed to the Google Groups > "ClojureScript" group. > To unsubscribe from this group and stop receiving emails from it, send an > email to [email protected]. > To post to this group, send email to [email protected]. > Visit this group at http://groups.google.com/group/clojurescript. > -- Note that posts from new members are moderated - please be patient with your first post. --- You received this message because you are subscribed to the Google Groups "ClojureScript" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To post to this group, send email to [email protected]. Visit this group at http://groups.google.com/group/clojurescript.
