Compliments - Multi Line not working?

[noisedoctor]

Platform: Raspberry Pi 3
MagicMirror Version [ V1 / V2-Beta ]: 2.9.0

I have the following in my .json file for the compliments module:
{
“anytime” : [
“line 1\nline 2”
]
}

on the screen I see:
line 1 line 2

not what I expect:
line 1
line 2

I wanted to see if this is known issue. I don’t see any issue raised in github. The documentation (https://github.com/MichMich/MagicMirror/tree/master/modules/default/compliments) says the \n syntax should work for multi-line compliements.

This is external json file if that matters.

[broberg]

It works as intended on my setup, so I don’t think it’s a issue for everyone.

Can you check so you are not missing

.pre-line {
  white-space: pre-line;
}

in your main.css file (or if you have overwritten it in your custom.css file)

[noisedoctor]

I do have that in the CSS. I haven’t made any CSS customizations. I installed everything two days ago, so I expect I have the latest code installed.

[broberg]

@noisedoctor Okey, so thats not the issue.

Is the json-file saved in utf8 (and not in ascii)?
Are you running on the mirrors electron browser or are you viewing it on a different browser?

[noisedoctor]

@broberg – sorry for the lag… I did save a file as utf8 (it was ANSI before). I am simply viewing the MM on the display connected to my Raspberry Pi. Any other guess what I could be doing wrong?

[sdetweil]

new line has no meaning in a textElement
replace the getDom function in compliments.js with this

	// Override dom generator.
	getDom: function() {
		var wrapper = document.createElement("div");
		wrapper.className = this.config.classes ? this.config.classes : "thin xlarge bright pre-line";
		// get the compliment text 
		var complimentText = this.randomCompliment();
		// split it into parts on newline text 
		var parts= complimentText.split('\n')
		// create a span to hold it all
		var compliment=document.createElement('span')
                // process all the parts of the compliment text
		for (part of parts){
			// create a text element for each part
			compliment.appendChild(document.createTextNode(part))
			// add a break `
			compliment.appendChild(document.createElement('BR'))
		}
		// remove the last break
		compliment.lastElementChild.remove();
		wrapper.appendChild(compliment);

		return wrapper;
	},

then u can use ‘\n’ in the text to split a line like this

		compliments: {
			anytime: [
				"Hey there\n sexy!"
			],
			morning: [
				"Good morning, handsome!",
				"Enjoy your day!",
				"How was your sleep?"
			],
			afternoon: [
				"Hello, \nbeauty!",
				"You look sexy!",
				"Looking good today!"
			],
			evening: [
				"Wow, you \nlook hot!",
				"You look nice!",
				"Hi,\nsexy!"
			]
		},

[noisedoctor]

so, is the documentation wrong?
https://github.com/MichMich/MagicMirror/tree/master/modules/default/compliments

Multi-line compliments:
Use \n to split compliment text into multiple lines, e.g. First line.\nSecond line. will be shown as:

First line.
Second line.

I’m happy making a code change, but the docs state that this should already be working. is it a factor of being an external file?

[sdetweil]

@noisedoctor I do not know. I don’t see how it ever worked. The field used does not interpolate the text. Just presents it as is.

I opened an issue, and logged the correction as a regression somewhere along the way

[noisedoctor]

@sdetweil – thanks so much. I wanted to confirm before reporting as a defect, but I guess you did that for me :)

[broberg]

@sdetweil said in Compliments - Multi Line not working?:

@noisedoctor I do not know. I don’t see how it ever worked. The field used does not interpolate the text. Just presents it as is.

I opened an issue, and logged the correction as a regression somewhere along the way

The \n gets converted to a whitespace in the textNode. And then the css pre -code converts every whitespace to a row break. It works on my setup, and probably more. Why it doesn’t on OPs setup is however beyond me.