This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
2015-11-12
Channels
- # admin-announcements (3)
- # beginners (13)
- # boot (52)
- # cbus (1)
- # cider (13)
- # cljs-dev (70)
- # cljsjs (16)
- # cljsrn (124)
- # clojure (129)
- # clojure-austin (3)
- # clojure-boston (2)
- # clojure-russia (238)
- # clojure-sg (3)
- # clojurescript (119)
- # cursive (18)
- # datomic (22)
- # editors-rus (2)
- # events (1)
- # hoplon (160)
- # jobs (1)
- # jobs-rus (8)
- # ldnclj (31)
- # ldnproclodo (1)
- # lein-figwheel (4)
- # leiningen (8)
- # off-topic (3)
- # om (335)
- # onyx (29)
- # re-frame (15)
- # reagent (12)
- # robots (1)
- # yada (19)
after i create an element like (a :href “/foo”)
is it possible for me to A. retrieve “/foo” something like (:href my-link)
B. change the :href
to something else?
or alternatively, is there a way to process links on a page or something?
the context is, trying to get an active
class on links to the current page
@thedavidmeister: you can just use JavaScript and jquery functions for accessing/changing element attributes
hmm, ok
i’ll give that a whirl
(def test-link (c/a :href "foo"))
(print (. test-link attr "href”))
errors
am i doing that wrong @bsima ?
(.attr test-link "href")
I think. I haven't done CLJS for a while so I'm rusty on JS interop
same error
says that attr is not a functio
*function
test_link.attr is not a function
printing test-link
just gives #<Element: A>
(print (:href test-link))
is nil
hmm, not sure how to do that
aah ok
(print (.attr js/$ test-link "href”))
is that really the best way to get at an attribute?
seems very clunky in comparison to creating the element
(a :href “foo”)
vs. (.attr js/$ my-link “href”)
I guess so. There's no get-attribute method in the ICustomElement protocol, but if there were then you could implement a cleaner way to get elements via keyword like you showed before https://github.com/hoplon/hoplon/blob/master/src/hoplon/core.cljs
is that something somebody could add to the framework?
I might open an issue on github if it is
The ability to do (:href my-elem)
and get the attribute would be really cool, and I think it's just a matter of implementing a protocol
any idea why addClass
would not work?
I think the protocol is IMapEntry https://github.com/clojure/clojurescript/blob/master/src/main/cljs/cljs/core.cljs
(defn- add-active-class!
[a]
(.addClass js/$ a "active”))
i tried that
(defn- get-href
[a]
(.attr js/$ a "href”))
that works
but not the adding of the class
@bsima: soz, i’m pretty new, barely following 😛 probably can’t help actually write the protocol
oh, because $.attr
is a function
i’m just using it in a weird way
@bsima: um, about… a week, in the evenings
i had a map
well, have
actually, the issue is that the attr
example never “should” have worked
it fluked because $.attr
is a method, as is $(elem).attr
so i thought i was doing the latter but actually doing the former
there is no $.addClass
so, doesn’t work
so i’m totally doing the wrong thing, lol
well really
i’m happy to return a new link that has the right thing
i can get at the :href
with this approach
i suppose i could conj
on the class or something...
this just all seems a lot harder than i was expecting >.<
to conditionally append a class based on an existing attribute and something about the state of the system
yeah but then i have to put the cell on each link don’t i?
actually, ideally i would not even be touching the a
elements directly
i’d just do something like $(a[href=“foo”]).addClass(‘active’);
but i’m concerned that hoplon would end up being too “dynamic” for that to be a good idea
and i don’t know if there’s a way to “hook into” a
creation
i thought about a custom element for links, but then I’d have to be careful about consistently using my element instead of the base one everywhere
i think that might get confusing if i’m working with someone else, easy to let a few slip through
but actually, i end up with the same problem
(defn- get-href
[a]
(.attr js/$ a "href"))
(defn- with-active-class
[a]
; @TODO - Figure out how to make a have an extra class
a)
; In this list we are able to set the class of any link that matches path-is-active.
(defn- do-active-class
"Add an active class to anchor a if appropriate for the current path."
[a]
(if (url/current-path? (get-href a))
(with-active-class a)
(a)))
(c/defelem support []
(c/nav
(map do-active-class links)))
the @TODO there needs to be done whether I decide to map a list of links or make a custom element
it will just look like
(defelem custom-a
[attributes]
; @TODO - figure out how to add a class based on the href here.
(a attributes))
instead 😛
Btw this is a great place to look for ideas https://github.com/hoplon/demos?files=1
not a toggle
an active class for any link to the current page
so, if you’re on http://example.com/foo then any link on the page to “/foo” would have the active class
so, you could highlight the link to the current page in a nav
which could be header, footer, sidebar, some other thing… whatever
like i said, ideally wouldn’t have to know in advance
ideally would just add extra “preprocessing” to all a
elements as they’re built
@bsima: anywaaay, i think i’ve resigned myself to either mapping a list through a function that returns new links, or making a custom element
any idea how to return a new link that has one extra class on it?
I think javelin cells are really meant for this use case, so don't write them out too quickly
i’m not
i just don’t see how it would work
i can’t visualise what would go where
@thedavidmeister: is it true to say that you want to add and remove a class to certain elements on the page depending on the current route?
@alandipert: just add
but yeah
the page detection is pretty simple atm
(def current-path (.. js/window -location -pathname))
(defn current-path?
"Is the current path p?"
[p]
(= current-path p))
so if the href
on a link returns true for current-path?
, make that link have an active class somehow
like, class=“active”
so i can style it up with CSS
i see
since this involved more than one attribute... both href and class, i think this is custom element territory
lemme make an example one for you
route-cell is a thing in javelin, a cell that contains the value of the current hash fragment
there is a little delay because it uses a setinterval to update
oh ok, cool
i notice that sets the class
instead of adding it
which would blow away any existing classes
i tried this
(defn- do-active-class
"Add an active class to anchor a if appropriate for the current path."
[a]
(when (url/current-path? (get-href a))
(.addClass (.$ js/window a) "active")))
Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node’.
so i’ll try your setup @alandipert and try to tweak it to see if it can work with adding instead of setting
for now though
i gotta go
it’s like 1:30am here
thanks for the help
i’ll experiment some more tomorrow
@thedavidmeister: np! yeah my version replaces the class
as long as i can use jQuery’s addClass i think it’s OK
yeah, you should be able to do (.addClass (js/jQuery elem) class-name)
in the do!
is there something special about the do!
that makes it not error?
no... the only special thing about it is it handles the attributes for all elements
so by adding an implementatino for :set-class
we've added the :set-class
attribute to all elements everywhere
do i even need a custom element?
or just a custom do!
?
very nearly... but i think not since you need to know the href value to do the logic
could i just make a :active-class
that do picks up?
i suppose you could make a custom attribute and then inspect elem
, look at its href
yeah i could do that
yeah that could be sweet actually, i dunno
definitely worth trying
oooh, that sounds col
magic attributes
so you could make a custom attribute that takes a class name to add if the link points at the current page
or not to the current page, or maybe two attributes, one for each behavior 😄
exactly
i like the idea of that if i can get it to work
i already figured out (.attr (.$ js/window a) "href”)
maybe I could do this in do!
(when (current-path? (.attr (js/jQuery elem) "href"))
(.addClass (js/jQuery elem) "active”))
something to try tomorrow
if that issue ^^ got in, it would be even simpler logic
well, a cell must be involved in order for it to work more than once
for me it does not have to work more than once
it might later
oh, interesting
i haven’t really done any “routing"
i just made pages
if i ever do, i suppose i’ll revisit
a little refactoring never killed anyone 😉
anyway, i gotta cruise
@thedavidmeister: even if it "doesnt have to work more than once" whats the problem with using cells for this purpose? like:
(def route (route-cell "#/default/route"))
(a :href x :class (cell= {:active (= x route)}))