Как скрыть / показать таблицу в ClojureScript - PullRequest
Новая
       33

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

0 голосов
/ 14 июня 2019

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

Следующий код взят из 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 ]

0 голосов
/ 25 июня 2019

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

0 голосов
/ 21 июня 2019

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

Я попробовал следующее: я создал новый проект с 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.

...