I'm trying to use the .cljs version of a page. like so:

(ns ^{:hoplon/page "index.html"} project.index
  (:require
    [hoplon.core :as h]
    [javelin.core :as j]
    [hoplon.jquery]
    [hoplon.ui :as ui]

(ui/window
   (ui/elem "hello world)

@chromalchemy: do you have a target task in your build pipeline?

Yes. Tried with BOOT_EMIT_TARGET=no both on and off

i assume it isn't the missing closing parens for ns and :require...

here's what the version i'm using right now looks like (with a transition sneak-preview):

(ns ^{:hoplon/page "index.html"} hoplon.ui.transitions-demo
  (:require
    [hoplon.ui.interpolators :as i]
    [hoplon.ui       :refer [window elem t]]
    [hoplon.ui.attrs :refer [r rgb hsl font]]
    [javelin.core    :refer [cell cell=]]))

(def g 10)

(def black (rgb 0x666666))
(def grey  (rgb 0xAAAAAA))

(def transitions [["linear" i/linear] ["sine" i/sine] ["cubic" i/cubic]])
(def size (cell 200))

(def lato (font :system ["Lato"] :generic :sans-serif))

(window
  :title "Transitions"
  :ts    :antialiased
  (elem :sh (r 1 1) :ah :end :p g :g g :c grey
    (elem :sh 140 :sv 40 :a :mid :c :white :tc black :m :pointer :click #(swap! size (partial + 400))
      "move"))
  (elem :sh (r 1 1) :pv g :gv g
    (for [[idx [name easing]] (map-indexed vector transitions)]
      (elem :sh (r 1 1)
        (elem :sv 100 :sh (t size 1000 easing) :p 10 :av :mid :tc :white :c (hsl (+ (* 60 idx) 100) (r 1 3) (r 1 2)) ::b 2 :bc :black
          name))))
  (elem :sh (r 1 1) :sv 600 :a :mid :t (t (cell= (/ size 4)) 2000 i/cubic) :tf lato
    "I GET BIGGER"))

it should be a .cljs file.

and the build.boot:

(set-env!
  :asset-paths  #{"rsc"}
  :source-paths #{"src" "lib"}
  :dependencies '[[org.clojure/clojure       "1.8.0"          :scope "test"]
                  [org.clojure/clojurescript "1.9.494"        :scope "test"]
                  [adzerk/boot-cljs          "1.7.228-2"      :scope "test"]
                  [adzerk/boot-reload        "0.4.13"         :scope "test"]
                  [tailrecursion/boot-static "0.0.1-SNAPSHOT" :scope "test"]
                  [tailrecursion/boot-bucket "0.2.1-SNAPSHOT" :scope "test"]
                  [tailrecursion/boot-front  "0.1.0-SNAPSHOT" :scope "test"]
                  [hoplon/ui                 "0.2.0-SNAPSHOT"]
                  [hoplon/castra             "3.0.0-alpha8"]])

(require
  '[adzerk.boot-cljs          :refer [cljs]]
  '[adzerk.boot-reload        :refer [reload]]
  '[hoplon.boot-hoplon        :refer [hoplon]]
  '[tailrecursion.boot-bucket :refer [spew]]
  '[tailrecursion.boot-front  :refer [burst]]
  '[tailrecursion.boot-static :refer [serve]])

(def buckets
  {:production "production-application"
   :staging    "staging-application"})

(def distributions
  {:production "<production-dist-id>"
   :staging    "<staging-dist-id>"})

(deftask build
  [o optimizations OPM kw "Optimizations to pass the cljs compiler."]
  (let [o (or optimizations :advanced)]
    (comp (speak) (hoplon) (cljs :optimizations o :compiler-options {:elide-asserts true}) (sift))))

(deftask develop
  [e elide-asserts bool   "Exclude validations from build"
   o optimizations OPM kw "Optimizations to pass the cljs compiler."]
  (let [o (or optimizations :none)]
    (comp (watch) (speak) (hoplon) (reload) (cljs :optimizations o :compiler-options {:elide-asserts elide-asserts}) (serve))))

(deftask deploy
  "Build the application with advanced optimizations then deploy it to s3."
  [e environment   ENV kw "The application environment to be utilized by the service."
   o optimizations OPM kw "Optimizations to pass the cljs compiler."]
  (assert environment "Missing required environment argument.")
  (let [b (buckets       environment)
        d (distributions environment)]
    (comp (build :optimizations optimizations) (spew :bucket b) (burst :distribution d))))

(deftask package
  "Build the application with advanced optimizations then dump it into the tgt folder."
  [o optimizations OPM kw "Optimizations to pass the cljs compiler."]
  (comp (build :optimizations optimizations) (target :dir #{"tgt"})))

(task-options!
  cljs   #(assoc-in % [:compiler-options :language-in] :ecmascript5-strict)
  serve  {:port 3001}
  sift   {:include #{#"index.html.out/" #"hoplon.ui.transition-demo/"} :invert true}
  spew   {:access-key (System/getenv "<ACCESS_KEY>")
          :secret-key (System/getenv "<AWS_SECRET_KEY>")}
  burst  {:access-key (System/getenv "<ACCESS_KEY>")
          :secret-key (System/getenv "<SECRET_KEY>")})

@jumblerg I'm excited for the transition stuff, looks good!

@jjttjj: thanks - me too! all the optimization work micha did on javelin recently made it possible. here's what they look like in action.

cool!

the choppiness is just the video; the're actually quite smooth.

Nice. I've been using ui pretty regularly, I have to actually get used to just shipping my little side projects on github before i get sick of looking at them though haha

good to hear. i have a notion of inheritance scoped vars i'm working as well, which in turn will be used to finish off the forms.

they rely on events to bubble up a reference that gets bound to a cell when handled by the parent where the var is declared.

oh cool

I've just been rolling my own form stuff for now but it'll be nice when the UI implementation is finished

this allows an item to swap its value into the set of values maintained by a picks elem, and the picks to swap their data into the form map.

without having to rely on a macro to perform the dynamic var binding tricks that only work in certain contexts when the page is evaluated.

i've been doing the same, constantly postponing the rest of the form implementation because i need to ship something sooner rather than later.

@jumblerg The transitions look AWESOME!!! Will that include fade in/out (I never seemed to be able to get transparency to work on a whole elem) Excited to hear about the forms too. Wrapping my head around the new Font stuff now. Thank you for all the great work. Its a sweet design experience working in UI already, and getting better all the time. ex: the pile attr was worth the wait 😉

Thanks too for the follow-up info on the routing behavior. I got it working nicely now.

Its pretty easy to flip view around with that pattern.

thanks. and yes, the transition fn can accept any cell that holds a quantitative value.

what's the transparency issue you're having?

:v is visibility. I've used it with a boolean value. Can it take a quantity or ratio too?

what is the proper attr for element transparency (not just background color)?

@chromalchemy It's :o for opacity that you're looking for i think

If I remember correctly it takes a float from 0.0 to 1.0

@jjttjj, @chromalchemy: yes, it is :opacity, and i was just noticing that i had a note to myself to make it accept ratios.

(defn opacity? [v]
  (cond (keyword? v) (in? v globals)
        (number?  v) (and (>= v 0) (<= v 1)) ;; todo: make a ratio
        (nil?     v) :initial
        :else        false))

also, it doesn't seem to work for me (even when using floats) either. i'm looking into it now.

Tested it again, still not working for me. (I don't think it ever worked as stated in the source, maybe since it's defined in the color function?) https://github.com/hoplon/ui/blob/master/lib/src/hoplon/ui.cljs#L208

@jumblerg also, I've been missing text-shadow.. is that part of the new font stuff, or is there a simple css implementation available?

hm, that's not one i've used before; i suppose it's something that needs to be added though.

Ok. It should take the same args as box-shadow I think

PS. I still couldn't get the index.html file to show up with a plain .cljs file. I tried to mirror your code as closely as I could. It's not critical for me though, so will try again later with a vanilla project. Thanks for the sample tho. .

Can one do a html hyperlink with a UI elem? Currently I'm nesting in an (a :href "url-string") anchor element.

here's how to create "links":

(elem :td :underline :tc :blue :m :pointer :click #(.open js/window "")
  "GOOGLE")

[hoplon/ui 0.2.1-SNAPSHOT] is on clojars. changes follow: - renamed shadow attribute constructor to s. - renamed text spacing attribute to :tw - added text shadow attribute :ts - fixed opacity attribute :o and modified to accept a ratio

@chromalchemy: ^^

@jumblerg Thx for looking into those so quick. Fills some crucial gaps. Now I can make the design I'm currently working on more lush. Trying it out now!

np! you caught me at an opportune moment. looking forward to seeing what you do with it.

I think I'm pretty close to mastering all the visual basics of Hoplon + UI. Ready to rumble 😈 & def exited about Transitions.

i'll put 'em out there in a couple days to a week. it will be awesome to see some professional-quality designs implemented in ui.

@jumblerg note: :ah :justify seems to have broken

(elem :sh 200 :ah :justify
    (for [x [ 1 2 3]]
      (elem :s 10 x))))

That link code is working nice! made it reusable like:

(defelem link 
  [{:keys [url open-new?] :or {:open-new? false} :as attr} kids]
  (elem
        :td :underline
        :tc :blue
        :m :pointer
        :click #(.open js/window
                        url
                        (if (not open-new?) "_self"))
        (dissoc attr :url :open-new?)
    kids))

jst maybe? otg.

tried that too

:jst

i also recall disabling it some time ago while switching to the beg mid end scheme.

i'll look into it

no worries, just a heads up 😅