Reply To: How to make keypress add a CSS class to text

[Larissa_Cury]

Hi, @Jeremy! Can you help me walk through it?

# PART 1:

// embed each word in a span, highlight the very first one
newText("words", row.Words.split('_').map((w,i)=><code><span class='word ${i==0?'highlighted':''}'>${w}</span></code>).join(''))

1) We create newText called “words” which gets each word from the cell. All words are separated by “_”, hence, “a word” equals “a string separed by _”, which is what split(”) is doing
2) Involve the words in a span HTML class (I’m a bit confused here, but I guess it is to show the words in a box-like way?)
3) the map function gets the current element (each word (w)) and the current index (i). The condition says “if the current index equals 0, add the highlighted class to .word otherwise, just print the word {w}, which just has the class .word
4) Join the words back together in a string separed by the empty string

# part 2:

.cssContainer("width","810px") // 3 times the space reserved for each word + horizontal padding
.css({
        display: 'flex',            // items contained in the element will be rearranged smartly
        'flex-direction': 'column', // stack items in columns 
        'flex-wrap': 'wrap',        // items that overflow vertically will start on new columns
        'font-size': '50px',
        height: '210px'             // more than 3 times the space reserved for each word + vertical padding
    })
    .print()

I was a bit confused here with the two css elements, the .cssContainer and the .css. At first, I supposed that the .cssContainer would modify the NewText element and the .css would modify the .word or .word highlighted classes, but if I change the font-size, it changes the fontsize of the text element, so I guess I’m wrong. Hence: Why do we have both .css and .cssContainer here?

Second question: “3 times the space reserved for each word + horizontal padding”. I couldn’t figure out waht “the space reserved for each word” means. Are we talking about the specifications in the .word class in the css file? (if yes, what is precisely the “space” reserved? the padding?)

# PART 3:

newVar("listOfWords", ""), // we'll update this Var element with the list of words tagged as desired
newVar("highlightedWord").set(0) // this is the index of the highlighted word
,
newKey("NEXT", " ")
    .callback(
        // first make sure that the next index is within bounds
        getVar("highlightedWord").test.is(v=>v+1<row.Words.split('_').length).success(
            getVar("highlightedWord").set(v=>v+1) // increment the index of the highlighted word
            ,
            getVar("listOfWords") // update listOfWords with appropriate tags
                .set(getVar("highlightedWord")) // first look up the index
                .set(v=>row.Words.split('_').map((w,i)=><code><span class='word ${i==v?'highlighted':''}'>${w}</span></code>).join('')) // now set the class as desired
            ,
            getText("words").text( getVar("listOfWords") ) // update the content of the Text element
        )
    )

1) I didn’t get the ‘check’ logic: getVar(“highlightedWord”).test.is(v=>v+1<row.Words.split(‘_’).length).success() ? Shouldn’t we test if i === 0 ? why then v + 1 ?
2) Ok, we increment the word index by one (to move on to the next word)
3) I get this part: .set(v=>row.Words.split('_').map((w,i)=><span class=’word ${i==v?’highlighted’:”}’>${w}</span>).join('')) // now set the class as desired
if the current word is === v, then add the highlight class, otherwise, just print the w , right?

But I can’t understand the 2 lines before it.
4) we have to update the textElement, so we update the content of ‘words’ with the ‘list of words’ one.

# Questions about the styling:

I also didn’t quite understand what css was updating what element, if I got it right, then:

# Updates the ‘words’ in general (all words) – then, why do we need the cssContainer back there?

.PennController-words .word {
    width: 230px;
    height: 60px;  
    padding: 5px 15px; # around each word
}

.word.highlighted this is ok, this is the highlighted class 🙂

When you mentioned “you could do 12 words as in your example too, just adjust the widths and heights accordingly to fit 4×4 words” which height and weight were you refering too? I changed the height of the .css (originally 210pc), but I don’t know if that was the right place to do so?

Sorry for the long post, I started learning ‘raw’ Js and now I guess I’m a little bit more able to understand PciBex code better, I really would like to understand it. Thanks in advance!