diff options
-rw-r--r-- | docs/lab/index.html | 55 |
1 files changed, 32 insertions, 23 deletions
diff --git a/docs/lab/index.html b/docs/lab/index.html index bee4f36f0..79bcd2a91 100644 --- a/docs/lab/index.html +++ b/docs/lab/index.html @@ -967,9 +967,6 @@ samples { sample .glyphlist.hideNames g span.name { display:none; } - /*sample .glyphlist.hideNames g span.glyph { - margin-top:0; - }*/ body.secondarySampleDisabled .showOnlyWithSecondarySample { display: none; @@ -1103,13 +1100,15 @@ document.head.appendChild(fontCSS) <label style="display:inline-block; margin-left:4px"><input type="checkbox" name="italic"> <em>Italic</em></label> </label> - <label class="label-and-value repertoireOrder"> - <span>Repertoire order:</span> - <select name="repertoireOrder"> - <option value="" selected>Original</option> - <option value="u">Unicode</option> - </select> - </label> + <div class="checkbox-group repertoireControl"> + <label class="label-and-value"> + <span>Repertoire order:</span> + <select name="repertoireOrder"> + <option value="" selected>Original</option> + <option value="u">Unicode</option> + </select> + </label> + </div> <label class="label-and-value"> <span>Anti-alias:</span> @@ -1465,11 +1464,30 @@ function main() { const primaryFontElements = Array.prototype.slice.call(document.querySelectorAll('.primaryFont')) - const repertoireOrderControl = document.querySelector('label.repertoireOrder') + const repertoireControl = document.querySelector('.repertoireControl') const samplesElement = document.querySelector('samples') let sizeVar = null + function forEachGlyphlist(fn) { + let elements = samplesElement.querySelectorAll('.glyphlist') + if (elements) { + for (let i = 0; i < elements.length; ++i) { + fn(elements[i], i) + } + } + } + + function setGlyphlistClass(className, add) { + forEachGlyphlist(gl => { + if (add) { + gl.classList.add(className) + } else { + gl.classList.remove(className) + } + }) + } + // sample text const samplesSelect = document.querySelector('select[name="sample"]') for (let [k,v] of samples) { @@ -1489,9 +1507,9 @@ function main() { } if (v == 'Repertoire') { - repertoireOrderControl.style.display = null + repertoireControl.style.display = null } else { - repertoireOrderControl.style.display = 'none' + repertoireControl.style.display = 'none' } if (typeof sampleText == 'object' && sampleText.toHTML) { @@ -1573,16 +1591,7 @@ function main() { sizeVar = vars.bind('size', (e, v) => { boxes.style.display = (v > 20) ? 'none' : null setCSSProp('font-size', v + 'px') - let glyphlists = samplesElement.querySelectorAll('.glyphlist') - if (glyphlists && glyphlists.length) { - for (let i = 0; i < glyphlists.length; ++i) { - if (v >= 36) { - glyphlists[i].classList.remove('hideNames') - } else { - glyphlists[i].classList.add('hideNames') - } - } - } + setGlyphlistClass('hideNames', v < 36) // setCSSProp('line-height', Math.ceil(v * 1.5) + 'px') }) |