Как скрыть / показать таблицу в ClojureScript

Я хотел бы показать / скрыть таблицу, когда нажата шевронная кнопка.

Следующий код взят с http://jsfiddle.net/z0y0hp8o/6/. Я хотел бы сделать то же самое, но в clojurescript с использованием взаимодействия Java.

(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');
    }                                                                })

Вот моя черновая попытка в 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")))))
Источник

2 ответа

Решение

Нашел что-то, что сработало для меня. У меня уже был установлен Bulma в моем проекте, и я смог использовать функцию выпадающего списка Bulma со следующей функцией 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))))

реализовано как

     [: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]]]]]

В значительной степени, вы можете вызвать функцию toggle-class и отправьте ему идентификатор элемента, который вы хотите изменить, и класс is-active, и, если этот класс уже применен к элементу, он отключит его, а затем снова включит. @Dennis также предоставил хороший способ переключать шеврон вверх / вниз.

Источник

Я думаю, что вы были очень близки.

Я попробовал следующее: я создал новый проект с Figwheel, используя Leiningen, например: lein new figwheel jq-inter

В новом jq-inter папку, я редактировал файл в resources/public/index.html иметь более / менее одинаковое содержимое визуализированного HTML-файла из JSFiddle. В основном я скопировал источник http://fiddle.jshell.net/z0y0hp8o/6/show/ удалив собственную версию кода JS между строками 64 и 84, и удалил блок JS, используемый для обмена сообщениями, в нижней части окна. файл, который требуется только для JSFiddle.

Прямо перед закрытием </body> тег, я добавил строку в файл JS, что будет скомпилировано из ClojureScript:

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

Теперь я отредактировал файл ClojureScript в src/jq_inter/core.cljs так что это выглядит так:

(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)
)

Вы можете начать проект с lein figwheel, Он загрузит кучу зависимостей и запустит компилятор в фоновом режиме, а затем подаст файлы из resources папка. Мне потребовалось несколько попыток, чтобы заставить значок шеврона работать, и в конце я думаю, что цель щелчка была даже <i> сам тег, а не <span> по какой-то причине. YMMV.

Источник
Другие вопросы по тегам