(ns weathergen.ui.buttons (:require [weathergen.ui.common :as comm] [taoensso.timbre :as log :refer-macros ^{:line 5, :column 28} (log trace debug info warn error fatal report logf tracef debugf infof warnf errorf fatalf reportf spy get-env log-env)] [javelin.core :refer [->Cell input? cell cell? destroy-cell! lift lens? set-formula! constant? cell-doseq* deref* set-cell! lens formula? alts! dosync* cell-map formula]] [hoplon.jquery :refer [set-attributes! check-val! set-styles! text-val!]] [hoplon.core :refer [form audio input menuitem hgroup do! timeout $text base h1 set-attributes! embed shadow h3 body keygen progress main cite on-page-load i p nav ruby a menu blockquote img $comment span track data u dl select html thead del fieldset aside figure figcaption q on! bdi append-child! video address caption dd rp hr tbody table html-var add-initfn! pre ul replace-child! html-time html-map sup dfn sub mark script button wbr insert-before! strong normalize-class li dt rtc td tr section th optgroup bust-cache iframe remove-child! legend em kbd spliced html-object article abbr template multicol prerendering? <!-- source output set-styles! route-cell header datalist tfoot s ins footer title h5 canvas param div option summary samp small style textarea loop-tpl* h4 head ol details col label picture rt when-dom h6 link page-load colgroup meter html-meta static-elements bdo --> b attribute? code dialog noframes do-watch noscript safe-nth h2 area br]]) (:require-macros [weathergen.cljs.macros :refer [with-attr-bindings with-bbox with-time formula-of]] [javelin.core :refer [with-let mx2 dosync cell= set-cell!= prop-cell cell-doseq formulet defc defc= macroexpand-all mx formula-of cell-let]] [hoplon.core :refer [definterval text elem+ cache-key with-timeout defelem+ when-tpl static sexp defelem elem def-values if-tpl cond-tpl with-page-load for-tpl with-dom case-tpl loop-tpl with-interval with-init!]]))









;; (set! *warn-on-infer* true)

(defn- image-button-style
  [pressed?]
  {:border-style (if pressed? "inset" "outset")
   :border-color "#ddd"
   :border-radius "6px"
   :padding "2px"
   ;; :width "16px"
   ;; :height "16px"
   :background (if pressed? "lightgrey" "white")
   :border-width "2px"
   :vertical-align "middle"})

(defelem image-button
  "A button displaying an image rather than text. Can take a
  `latched?` attribute, which, if a cell evaluating to true, locks the
  button in the pressed state."
  [attrs]
  (with-attr-bindings attrs [css latched?]
    (let [down (cell false)]
      (img
       :css (formula-of
              [latched? down]
              (merge (image-button-style (or latched? down))
                     css))
       :mousedown (fn [e]
                    (let [up (fn up-fn [e]
                               (.removeEventListener js/document "mouseup" up-fn)
                               (reset! down false))]
                      (.addEventListener js/document "mouseup" up))
                    (reset! down true))
       ;; Overriding dragstart stops the browser from trying
       ;; to drag and drop SVG as images, which would
       ;; interfere with our functionality.
       :dragstart (constantly false)
       attrs))))

(comm/register-class!
 ::div-button
 [{:border-width    "0.5px"
   :border-style    "solid"
   :border-color    "#d0d0d0"
   :background      "linear-gradient(white, white 75%, #ededed 100%)"
   :display         "inline-block"
   :font-family     "Lucida Grande, Lucida Sans Unicode, Tahoma, sans-serif"
   :font-size       "72%"
   :margin          "2px"
   :padding         "3px"
   :border-radius   "4px"
   :text-decoration "none"
   :color           "black"
   :cursor          "pointer"}
  [:&:active
   {:background "linear-gradient(#c0c0c0, #f0f0f0)"}]])

(comm/register-class!
 ::latched-div-button
 [{:background "linear-gradient(#c0c0c0, #f0f0f0)"}])

(comm/register-class!
 ::disabled-button
 [{:pointer-events "none"
   :color          "grey"
   :cursor         "default"}])

(defelem a-button
  "Renders a plain button, but using an anchor tag to better enable
  styling. Can take a `latched?` attribute, which, if a cell
  evaluating to true, locks the button in the pressed state. Can take
  a `disabled?` attribute, which, if a cell evalating to true,
  disables the button."
  [attrs content]
  (with-attr-bindings attrs [latched? disabled?]
    (let [down (cell false)]
      (a (merge attrs
                {:class (formula-of [latched? down disabled?]
                          {(comm/class-for ::div-button) true
                           (comm/class-for ::latched-div-button) (or latched? down)
                           (comm/class-for ::disabled-button) disabled?})})
         content))))
