I have a card template with multiple fields where not all notes contain info in each of the fields.
For example some notes have information in the Alternative field, but some don’t.
I want to hide these fields to save visual space on the notes that have empty fields but it isn’t working correctly. My code is as follows:
{{#Expression}}
{{#Simplified}}
{{#Traditional}}
{{#Japanese}}
{{#Kunyomi}}
{{#Onyomi}}
{{Expression}}
{{Simplified}}
{{Traditional}}
{{Japanese}}
{{Kunyomi}}
{{Onyomi}}
{{/Onyomi}}
{{/Kunyomi}}
{{/Japanese}}
{{/Traditional}}
{{/Simplified}}
{{/Expression}}
This code doesn’t remove the space if the field is empty, in fact it doesn’t do anything. I tried adding a < br > after each field but that didn’t work.
Any help is appreciated!
{{#Expression}}
{{Expression}}
{{/Expression}}
{{#Simplified}}
<br>
{{Simplified}}
{{/Simplified}}
{{#Traditional}}
<br>
{{Traditional}}
{{/Traditional}}
{{#Japanese}}
<br>
{{Japanese}}
{{/Japanese}}
{{#Kunyomi}}
<br>
{{Kunyomi}}
{{/Kunyomi}}
{{#Onyomi}}
<br>
{{Onyomi}}
{{/Onyomi}}
You had your conditional fields nested, but they should be used one after another so that they don’t depend on other fields being filled.
In your current template, if the field “Expression” is empty, nothing will be shown.
Oooh, I see now…However it doesn’t seem to change anything, it still creates the space.
Perhaps I didn’t fully understand your issue.
Since the font size is quite huge (looks bigger than 20px), it could be that the line-height of your template is set to a very high value in the Styling section of your template and the <br> tags you are using before (and maybe after) the conditional replacement lines are enough to cause this big space.
I think it would be easiest if you post the front/back/styling of your template here (enclosed with this symbol ` to prevent the forum editor from interpreting it as HTML) and I take a look at it.
Yes, I have script which makes the font, background color, font color and style variable for all fields inside a div class. My styling section is empty though…
This is my complete Back, maybe something’s wrong? Thanks for your help!
<div id="yomis" hidden>
<p>
<div class="randomJapanese shuffle colorize">{{Expression}}</div>
<div class="randomTraditionalChinese shuffle colorize">{{Traditional}}</div>
<div class="randomSimplifiedChinese shuffle colorize">{{Simplified}}</div>
<div class="randomJapanese shuffle colorize">{{yomi}}</div>
<div class="randomJapanese shuffle colorize">{{Kunyomi}}</div>
<div class="randomJapanese shuffle colorize">{{Onyomi}}</div>
<div class="randomJapanese shuffle colorize">{{Similar}}</div>
<div class="randomJapanese shuffle colorize">{{Alternative}}</div>
<div class="randomJapanese shuffle colorize">{{Context}}</div>
<div class="randomJapanese shuffle colorize">{{Japanese}}</div>
<div class="randomJapanese colorize">説明：{{Sanseido}}</div>
<div id="container"></div>
</p>
</div>
<script>
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function setRandomBackgroundColor() {
const nightMode = document.body.classList.contains("night_mode");
document.body.style.background = randomHsl(!nightMode);
}
function randomHsl(lightColor) {
const hue = (Math.random() * 361) | 0;
const saturation = (50 + (Math.random() * 50)) | 0;
let lightness = (Math.random() * 35) | 0;
if (lightColor) {
lightness += 65;
}
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}
function colorizeEachChar(element) {
const text = element.textContent;
const nightMode = document.body.classList.contains("night_mode");
const resultArray = [];
for (const char of text) {
if (/\S/.test(char)) {
resultArray.push(
`<span style="color: ${randomHsl(nightMode)};">${char}</span>`
);
} else {
resultArray.push(" ");
}
}
element.innerHTML = resultArray.join("");
}
setTimeout(() => {
// Randomize the alignment and size of the text
const alignments = ["justify","left","center","right","top","bottom","vertical horizontal"];
const alignmentindex = Math.floor(Math.random()*alignments.length);
const size = Math.floor(Math.random()*20)+Math.floor(Math.random()*20)+Math.floor(Math.random()*20)+10;
const yomis = document.getElementById("yomis");
yomis.style.fontSize = size+"px";
yomis.style.textAlign = alignments[alignmentindex];
// Randomize the color of each character
document.querySelectorAll(".colorize").forEach(colorizeEachChar);
// Randomize the order of the elements with the "shuffle" class
const fields = [...document.querySelectorAll(".shuffle")];
shuffleArray(fields);
const container = document.getElementById("container");
fields.forEach((fld, index) => {
if (index !== 0) {
container.appendChild(document.createElement("br"));
}
container.appendChild(fld);
});
// Randomize the background color
setRandomBackgroundColor();
// Un-hide the main container
yomis.hidden = false;
}, 0);
</script>
In the template you just posted, you aren’t using conditional replacement. I’m wondering what that screenshot from yesterday was, since it’s quite different.
Anyway, if you replace your back template wth this (and adjust the front template to be like this), the issue should be fixed. I just tested this on a new note type:
<div id="yomis" hidden>
<p>
<div class="randomJapanese shuffle colorize">{{Expression}}</div>
{{#Traditional}}
<div class="randomTraditionalChinese shuffle colorize">{{Traditional}}</div>
{{/Traditional}}
{{#Simplified}}
<div class="randomSimplifiedChinese shuffle colorize">{{Simplified}}</div>
{{/Simplified}}
{{#yomi}}
<div class="randomJapanese shuffle colorize">{{yomi}}</div>
{{/yomi}}
{{#Kunyomi}}
<div class="randomJapanese shuffle colorize">{{Kunyomi}}</div>
{{/Kunyomi}}
{{#Onyomi}}
<div class="randomJapanese shuffle colorize">{{Onyomi}}</div>
{{/Onyomi}}
{{#Similar}}
<div class="randomJapanese shuffle colorize">{{Similar}}</div>
{{/Similar}}
{{#Alternative}}
<div class="randomJapanese shuffle colorize">{{Alternative}}</div>
{{/Alternative}}
{{#Context}}
<div class="randomJapanese shuffle colorize">{{Context}}</div>
{{/Context}}
{{#Japanese}}
<div class="randomJapanese shuffle colorize">{{Japanese}}</div>
{{/Japanese}}
{{#Sanseido}}
<div class="randomJapanese colorize">説明：{{Sanseido}}</div>
{{/Sanseido}}
<div id="container"></div>
</p>
</div>
<script>
function shuffleArray(array) {
for (let i = array.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[array[i], array[j]] = [array[j], array[i]];
}
}
function setRandomBackgroundColor() {
const nightMode = document.body.classList.contains("night_mode");
document.body.style.background = randomHsl(!nightMode);
}
function randomHsl(lightColor) {
const hue = (Math.random() * 361) | 0;
const saturation = (50 + (Math.random() * 50)) | 0;
let lightness = (Math.random() * 35) | 0;
if (lightColor) {
lightness += 65;
}
return `hsl(${hue}, ${saturation}%, ${lightness}%)`;
}
function colorizeEachChar(element) {
const text = element.textContent;
const nightMode = document.body.classList.contains("night_mode");
const resultArray = [];
for (const char of text) {
if (/\S/.test(char)) {
resultArray.push(
`<span style="color: ${randomHsl(nightMode)};">${char}</span>`
);
} else {
resultArray.push(" ");
}
}
element.innerHTML = resultArray.join("");
}
setTimeout(() => {
// Randomize the alignment and size of the text
const alignments = ["justify","left","center","right","top","bottom","vertical horizontal"];
const alignmentindex = Math.floor(Math.random()*alignments.length);
const size = Math.floor(Math.random()*20)+Math.floor(Math.random()*20)+Math.floor(Math.random()*20)+10;
const yomis = document.getElementById("yomis");
yomis.style.fontSize = size+"px";
yomis.style.textAlign = alignments[alignmentindex];
// Randomize the color of each character
document.querySelectorAll(".colorize").forEach(colorizeEachChar);
// Randomize the order of the elements with the "shuffle" class
const fields = [...document.querySelectorAll(".shuffle")];
shuffleArray(fields);
const container = document.getElementById("container");
fields.forEach((fld, index) => {
if (index !== 0) {
container.appendChild(document.createElement("br"));
}
container.appendChild(fld);
});
// Randomize the background color
setRandomBackgroundColor();
// Un-hide the main container
yomis.hidden = false;
}, 0);
</script>
The conditional I posted yesterday was the top part of the Back template, the part I posted now was what came beneath that. So what I did wrong is to assume that the fields specified in the class divs would appear and disappear if they were stated in the conditional you gave me. What an idiot. I just noticed too that the fields which contained text and were specified by the conditional formatting did in fact appear, but without any font or styling, because of course, they were duplicates of the ones below. So it was actually working, just not applying the scripts because they weren’t part of them. Thanks a bunch for your help!
1 Like
