selector_inspector.cljs

{:epupp/script-name "pez/selector_inspector.cljs"
 :epupp/description "Prints elements and their selector to the console. Run to start. Run again to Stop."}

(ns selector-inspector
  (:require [clojure.string :as string]))

;; Build a selector path for an element
(defn element->selector [elem]
  (loop [el elem
         path []]
    (if (or (nil? el) (= el js/document.body))
      (string/join " > " (reverse path))
      (let [tag (string/lower-case (.-tagName el))
            id (.-id el)
            selector (if (seq id)
                       (str tag "#" id)
                       (let [classes (.-className el)
                             class-str (when (and (string? classes) (seq classes))
                                         (str "." (string/join "." (string/split classes #"\s+"))))]
                         (str tag class-str)))]
        (recur (.-parentElement el) (conj path selector))))))

;; State for inspect mode - persists across re-evaluations
(defonce inspect-state (atom {:active? false
                              :hovered-elem nil}))

;; Highlight style
(defn highlight-elem! [elem]
  (when elem
    (set! (.-outline (.-style elem)) "2px solid red")
    (set! (.-outlineOffset (.-style elem)) "-2px")))

(defn unhighlight-elem! [elem]
  (when elem
    (set! (.-outline (.-style elem)) "")
    (set! (.-outlineOffset (.-style elem)) "")))

;; Event handlers
(defn on-mouseover [e]
  (when (:active? @inspect-state)
    (.stopPropagation e)
    (let [target (.-target e)
          prev (:hovered-elem @inspect-state)]
      (when (not= prev target)
        (unhighlight-elem! prev)
        (highlight-elem! target)
        (swap! inspect-state assoc :hovered-elem target)))))

(defn on-click [e]
  (when (:active? @inspect-state)
    (.preventDefault e)
    (.stopPropagation e)
    (let [target (.-target e)
          selector (element->selector target)]
      (js/console.log "Selector path:" selector)
      (js/console.log "Element:" target))))

;; Functions to start/stop inspect mode
(defn start-inspect! []
  (swap! inspect-state assoc :active? true)
  (js/document.addEventListener "mouseover" on-mouseover true)
  (js/document.addEventListener "click" on-click true)
  (set! (.-cursor (.-style js/document.body)) "crosshair")
  (js/console.log "🔍 Inspect mode ON - click any element to see its selector")
  :inspect-on)

(defn stop-inspect! []
  (unhighlight-elem! (:hovered-elem @inspect-state))
  (swap! inspect-state assoc :active? false :hovered-elem nil)
  (js/document.removeEventListener "mouseover" on-mouseover true)
  (js/document.removeEventListener "click" on-click true)
  (set! (.-cursor (.-style js/document.body)) "")
  (js/console.log "🔍 Inspect mode OFF")
  :inspect-off)

(defn toggle-inspect! []
  (if (:active? @inspect-state)
    (stop-inspect!)
    (start-inspect!)))

;; Run this to toggle:
(toggle-inspect!)