How to change a paragraph's colour when user clicks?

kyree

I want something like this:

[(colour: "#2f2")[My colour-changing paragraph]]<text1|

(link: "change!")[(replace: ?text1)[(colour: "#e22")[My colour-changing paragraph]]]

but without having two copies of the text in the paragraph.  Is there a better way to change the paragraph's styles?

(I know CSS and Javascript and am happy to use them.  If <tag|s set the element's id="" attribute that'd be plenty for me to find a way to do it :-) )

greyelf

Once the "Stylesheet special passage does not work" related Harlowe bug is fixed you could use a classed <span> or <div> tag and some CSS in the stylesheet:


[<span class="class1">Changing colour using classes and stylesheet</span>]<text1|
(link: "change!")[(replace: ?text1)[<span class="class2">Changing colour using classes and stylesheet</span>]]


Until then you could use a styled <span> or <div> tag instead:


[<span style="color: green;">Changing colour using style</span>]<text2|
(link: "change!")[(replace: ?text2)[<span style="color: red;">Changing colour using style</span>]]


As a possible solution to the "having two copies of the text" issue you could use a variable like the following:


(set: $para to "Changing the colour of paragraphs")
[<span style="color: green;">$para</span>]<text3|
(link: "change!")[(replace: ?text3)[<span style="color: red;">$para</span>]]


kyree

Using a variable is a good thought!  If I want to put formatting in, this works:

(set: $para to "Changing [[the colour]] of paragraphs")

but this does not parse:

(set: $para to "Changing [the colour]<tag| of paragraphs")

let alone (not sure if this would be the right way to escape quotes):

(set: $para to "Changing (link: \"the colour\")[the very colour] of paragraphs")

Are those bugs (are they intended to parse)?

I think my ideal solution would keep the same DOM elements when run, and only change their CSS class from one thing to another, so that e.g. expanded text would stay expanded.  I can live without that for now though   Ooh, this works in my web console, maybe I'll learn how to put js in my harlowe

$('tw-hook[name="tagname"]').css('color', '#e22')

L

kyree wrote:

Using a variable is a good thought!  If I want to put formatting in, this works:

(set: $para to "Changing [[the colour]] of paragraphs")

but this does not parse:
(set: $para to "Changing [the colour]<tag| of paragraphs")

This is specifically a bug, which I've now fixed. Thanks. As for the entire topic... I'm gonna think about adding further macros to manipulate hooks that may fulfill this use-case.

narF

kyree, in the meantime, if you don't want to repeat the same text twice, you could put it in a separate passage and load it via

(display: "name of the passage")

I haven't tried it though so maybe it won't work.

kyree

Thanks L!  Do your changes appear on twinery.org/2/ right away or can I use your code now another way?

narF, that's nice to know about!  although it can't handle formatting with < or > in the linked passage, such as [[text->passagename]] or [text]<tag|. But (link: "text")[newtext] and [[text|passagename]] work.