Fork me on GitHub
#hoplon
<
2015-12-18
>
laforge4903:12:39

Just back from the nyc functional Christmas party. So I'll look at it tomorrow. simple_smile

micha03:12:18

i just made some mods to boot-jetty

chromalchemy14:12:49

How could I go about using a custom element to implement a new native element like "Picture" http://responsiveimages.org/demos/basic-implementation/index.html

micha14:12:39

we've done this kind of thing often

micha14:12:27

you have a cell that maintains the viewport size and orientation

micha14:12:56

then you can make "element queries" i think they're called

micha14:12:37

well the simplest thing would be

micha14:12:16

(img :src (cell= (cond (< max-width 480) "landscape_small.jpg" ...)))

micha14:12:38

where max-width is a cell that is updated whenever the viewport is resized or rotated

micha14:12:00

you can of course build abstractions around that

laforge4914:12:52

Still having windows problems. Here's the new dev task from build.boot: (deftask dev "Build address-book for local development." [] (comp (watch) (speak) (hoplon) (reload) (cljs) (serve :port 8000 :init-params {"useFileMappedBuffer" "false"}))) But I am still getting a slew of couldn't delete exceptions in tmp.

laforge4914:12:17

Do I need to update my dependencies perhaps? :dependencies '[[adzerk/boot-cljs "1.7.170-3"] [adzerk/boot-reload "0.4.2"] [hoplon/boot-hoplon "0.1.10"] [hoplon/hoplon "6.0.0-alpha11"] [org.clojure/clojure "1.7.0"] [org.clojure/clojurescript "1.7.189"] [tailrecursion/boot-jetty "0.1.1"]]

micha14:12:32

yeah i made changes for that to work

micha14:12:38

boot-jetty 0.1.3

chromalchemy14:12:36

Thanks! Do you have a simple example of that max-width cell implementation?

laforge4915:12:14

OK, I changed/saved build.boot and reran boot dev. Same problem. And I just confirmed that 0.1.3 has been added to my local repository. 😞

chromalchemy15:12:06

The Picture element is not fully supported yet (no IE, Safari, IOS). So then I would look to js polyfills or libraries. But I am not skilled with js interop yet. Seems like an ideomatic Hoplon/Javelin solution might be more elegant and flexible.

chromalchemy15:12:56

I imagine the tradeoff would be that by not using native "Picture" markup, you might lose image preloading, in that the browser has to wait for the js/cljs to know what image to download. But is this inevitable with Hoplon anyway, since it's dom is rendered from cljs?

chromalchemy15:12:01

I guess it could be prerendered...

micha15:12:41

yeah i don't remember which event it is that is fired when viewport orientation / dimensions change

micha15:12:54

but you'd do like

micha15:12:48

(.on (js/jQuery js/window) "resize" #(reset! max-width (.-width ...)))

micha15:12:20

@laforge49: it doesn't help?

laforge4915:12:34

not at all. sigh simple_smile

micha15:12:05

it could be that the init param needs to be namespaced

laforge4915:12:58

take your time. I still have not finished the getting started page and this is not a complete blocker.

micha15:12:43

org.eclipse.jetty.servlet.Default.useFileMappedBuffer

micha15:12:58

try that in the init-params thing

laforge4915:12:02

different now!

laforge4915:12:05

Compiling Hoplon pages... ò index.cljs.hl Adding :require adzerk.boot-reload to index.html.cljs.edn... Compiling ClojureScript... ò index.html.js java.util.concurrent.ExecutionException: java.nio.file.AccessDeniedException: target\index.html.out\hoplon\app_pages\indexDOT_html.js java.nio.file.AccessDeniedException: target\index.html.out\hoplon\app_pages\indexDOT_html.js file: "target\\index.html.out\\hoplon\\app_pages\\indexDOT_html.js" sun.nio.fs.WindowsException.translateToIOException sun.nio.fs.WindowsException.rethrowAsIOException sun.nio.fs.WindowsException.rethrowAsIOException sun.nio.fs.WindowsFileCopy.copy sun.nio.fs.WindowsFileSystemProvider.copy ...

micha15:12:01

try setting BOOT_EMIT_TARGET=no inyour boot.properties file

micha15:12:09

that's trying to write to the target dir

micha15:12:16

which you don't need there

laforge4915:12:37

Working very nicely now. Many thanks!

micha16:12:16

awesome! great news

micha16:12:07

hi mathiasx long time!

mathiasx16:12:13

yeah sorry about that

mathiasx16:12:32

how’s things?

alandipert16:12:13

things are good

symbit17:12:39

@laforge49 What combination got the hoplon reload to work on Windows? I just tried a new test project. No dice, with or without the BOOT_EMIT_TARGET=no added to the boot.properties

laforge4917:12:31

revise dependency: [tailrecursion/boot-jetty "0.1.3"]

laforge4917:12:56

--both changes are needed

symbit17:12:16

The new hoplon project provides that by default.

symbit17:12:32

If that's the only diff, perhaps a Windows 7 / 10 idiosyncrasy.

flyboarder17:12:21

@symbit: I have had less issues with boot on windows 10 than <8.1

symbit17:12:49

@micah @laforge49 changing boot-jetty 0.1.3 back to [pandeiro/boot-http "0.7.0"] with BOOT_EMIT_TARGET=no works with Windows 7 and boot 2.5.1

laforge4917:12:23

I need to update to boot 2.5.1 simple_smile

symbit17:12:52

@flyboarder: Good to hear. For me it's still the corporate standard.

flyboarder17:12:05

ah thats too bad, but makes sense in larger environments

symbit17:12:51

Heck, maybe we'll move to Macs, since IBM recently ordered 400,000 new Macs for all employees. Hopefully we'll follow their lead.

flyboarder17:12:23

I love my mac 😍

flyboarder18:12:03

unix and I can vm everything else I need, plus vagrant homebrew etc...

chromalchemy19:12:50

Thanks for the help Micha, that snippet is working for me!...

(with-init!
(defc initial-page-width (.width (js/jQuery js/window)))
(defc page-width @initial-page-width))

(.on (js/jQuery js/window) "resize" #(reset! page-width (.width (js/jQuery js/window))))

(img :src (cell= (cond (<= page-width 800) "image1.jpg" (> page-width 800) "image2.jpg")))

chromalchemy22:12:59

Im trying to do something like this:

(defc page-width)

(.on (js/jQuery js/window) "resize" #(reset! page-width (.width (js/jQuery js/window))))

(defc= dynamic-rules
       (cond
         (<= page-width 800)
         {:background-color "red" :border "4px black"})))

(div :css (merge {:height "400px"} dynamic-rules))
But it doesn't seem to be working, any hints?

micha22:12:37

(div :css (cell= (merge {:height "400px"} dynamic-rules)))

micha22:12:12

the attribute value just needs to be a cell simple_smile

chromalchemy22:12:21

I'm getting an error Uncaught Error: No protocol method IDeref.-deref defined for type cljs.core/PersistentArrayMap: {:background-color "red"}

micha23:12:55

can you paste what you have?

micha23:12:24

cause i don't see that map anywhere

chromalchemy23:12:36

Its working now! Thanks again! simple_smile