Fork me on GitHub
#hoplon
<
2017-03-17
>
chromalchemy17:03:43

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)

But I'm not getting an index.html page in /target. It works fine with (page "index.html) declaration + .cljs.hl. Is this still the proper form?

jumblerg17:03:44

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

chromalchemy17:03:31

Yes. Tried with BOOT_EMIT_TARGET=no both on and off

jumblerg17:03:38

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

jumblerg17:03:32

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

jumblerg18:03:31

it should be a .cljs file.

jumblerg18:03:13

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>")})

jjttjj18:03:59

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

jumblerg18:03:53

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

jumblerg18:03:57

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

jjttjj18:03:26

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

jumblerg18:03:00

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.

jumblerg18:03:12

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.

jjttjj18:03:07

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

jumblerg18:03:18

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.

jumblerg18:03:32

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.

jumblerg18:03:02

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

chromalchemy18:03:48

@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 😉

chromalchemy18:03:31

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

chromalchemy18:03:15

Its pretty easy to flip view around with that pattern.

jumblerg18:03:57

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

jumblerg18:03:26

what's the transparency issue you're having?

chromalchemy18:03:12

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

chromalchemy18:03:12

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

jjttjj18:03:20

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

jjttjj18:03:47

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

jumblerg18:03:40

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

jumblerg18:03:54

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

jumblerg18:03:30

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

chromalchemy19:03:10

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

chromalchemy19:03:39

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

jumblerg19:03:07

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

chromalchemy19:03:08

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

chromalchemy19:03:44

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. .

chromalchemy19:03:59

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

jumblerg19:03:31

here's how to create "links":

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

jumblerg20:03:22

[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

chromalchemy20:03:22

@jumblerg metal bmo 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!

jumblerg20:03:38

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

chromalchemy20:03:47

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

jumblerg20:03:17

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.

chromalchemy21:03:56

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

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

chromalchemy21:03:44

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

jumblerg21:03:58

jst maybe? otg.

chromalchemy21:03:06

tried that too

jumblerg21:03:58

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

jumblerg21:03:22

i'll look into it

chromalchemy21:03:03

no worries, just a heads up 😅