1

I would like to show/hide a table when a font-awesome chevron button is clicked.

The following code comes from http://jsfiddle.net/z0y0hp8o/6/. I would like to do the same thing, but in clojurescript using java interop.

(document).on('click', '.panel-heading span.clickable', function(e){
    var $this = $(this);
    if(!$this.hasClass('panel-collapsed')) {
        $this.parents('.panel').find('.specialCollapse').slideUp();
        $this.addClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    } else {
        $this.parents('.panel').find('.specialCollapse').slideDown();
        $this.removeClass('panel-collapsed');
        $this.find('i').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    }                                                                })

Here is my draft attempt in clojurescript.

(if (-> e -target -value
 (.getElementsByClassName js/document "panel-collapsed"))
  (do
    (.slideUp js/document
              (.find js/document ".specialCollapse"
                     (.parentElements js/document ".panel")))
    (.addClass "panel-collapsed")
    (.addClass "fas fa-chevron-down"
               (.removeClass "fas fa-chevron-up"
                             (.find "i"))))
  (do
    (.slideDown js/document
              (.find js/document ".specialCollapse"
                     (.parentElements js/document ".panel")))
    (.removeClass "panel-collapsed")
    (.addClass "fas fa-chevron-up"
               (.removeClass "fas fa-chevron-down"
                             (.find "i")))))
CambodianCoder
  • 467
  • 4
  • 14

2 Answers2

2

I think you were really close.

I gave this a try with the following: I created a new project with Figwheel, using Leiningen like this: lein new figwheel jq-inter

In the new jq-inter folder, I edited the file in resources/public/index.html to have more/less the same contents of the rendered HTML file from the JSFiddle. Basically I copied the source of http://fiddle.jshell.net/z0y0hp8o/6/show/ removing the native JS version of the code between lines 64 and 84, and removed the block of JS used for messaging at the bottom of the file that is only required for JSFiddle themselves.

Right before the closing </body> tag, I added the line to the JS file what will be compiled from ClojureScript:

<script src="js/compiled/jq_inter.js" type="text/javascript"></script>

Now I edited the ClojureScript file at src/jq_inter/core.cljs so that it looks like this:

(ns jq-inter.core
    (:require ))

(enable-console-print!)
(println "Loaded!")

(defonce $ js/$)

(-> ($ js/document)
    (.on "click" ".panel-heading span.clickable"
         (fn [e]
           (let [$this ($ (-> e .-target))]
             ;; (js/console.log $this) ;; To check using the inspector
             (if-not (.hasClass $this "panel-collapsed")
               (do
                 (-> $this (.parents ".panel") (.find ".specialCollapse") (.slideUp))
                 (-> $this (.addClass "panel-collapsed"))
                 (-> $this (.removeClass "glyphicon-chevron-up") (.addClass "glyphicon-chevron-down")))
               (do
                 (-> $this (.parents ".panel") (.find ".specialCollapse") (.slideDown))
                 (-> $this (.removeClass "panel-collapsed"))
                 (-> $this (.removeClass "glyphicon-chevron-down") (.addClass "glyphicon-chevron-up")))
               )))))


(defn on-js-reload []
  ;; optionally touch your app-state to force rerendering depending on
  ;; your application
  ;; (swap! app-state update-in [:__figwheel_counter] inc)
)

You can start the project with lein figwheel. It will download a bunch of dependencies and start the compiler in the background, then serve the files from the resources folder. It took me a few tries to get the chevron icon working and in the end I think it was that the target of the click even was the <i> tag itself rather than the <span> for some reason. YMMV.

Denis Fuenzalida
  • 3,271
  • 1
  • 17
  • 22
2

Found something that worked for me. I already had Bulma installed in my project, and was able to utilize a Bulma dropdown feature, with the following function from derHowie.

(defn toggle-class [id toggled-class]
 (let [el-classList (.-classList (.getElementById js/document id))]
   (if (.contains el-classList toggled-class)
     (.remove el-classList toggled-class)
     (.add el-classList toggled-class))))

implemented like

     [:div {:class "dropdown-trigger"}
      [:button {:class "button" :aria-haspopup "true" :aria-controls "drop-down-menu"
                :on-click #(toggle-class "table-dropdown" "is-active")}
       [:span "Table"]
       [:span {:class "icon is-small"}
        [:i {:class "fas fa-angle-down" :aria-hidden "true"}]]]]
     [:div {:class "dropdown-menu" :id "dropdown-menu" :role "menu"}
      [:div.dropdown-content
       [:div {:class "dropdown-item"}
        [table-to-be-displayed]]]]]

Pretty much, you can call the function toggle-class and send it the id of the element that you wish to modify, and the "is-active" class, and if that class is already applied to an element, it toggles it off, and then back on again. @Dennis provided a nice way to toggle the chevron up/down icon as well.

CambodianCoder
  • 467
  • 4
  • 14