Use hidden attribute instead of style.display

This commit is contained in:
ines 2017-11-05 16:06:50 +01:00
parent ef597622a6
commit f092506578
3 changed files with 20 additions and 21 deletions

View File

@ -50,7 +50,7 @@ for id in CURRENT_MODELS
+cell +cell
span(data-tpl=id data-tpl-key=field) #[em n/a] span(data-tpl=id data-tpl-key=field) #[em n/a]
+row(data-tpl=id data-tpl-key="compat-wrapper" style="display: none") +row(data-tpl=id data-tpl-key="compat-wrapper" hidden="")
+cell +cell
+label Compat #[+help("Latest compatible model version for your spaCy installation").u-color-subtle] +label Compat #[+help("Latest compatible model version for your spaCy installation").u-color-subtle]
+cell +cell
@ -58,15 +58,15 @@ for id in CURRENT_MODELS
select.o-field__select.u-text-small(data-tpl=id data-tpl-key="compat") select.o-field__select.u-text-small(data-tpl=id data-tpl-key="compat")
div(data-tpl=id data-tpl-key="compat-versions")   div(data-tpl=id data-tpl-key="compat-versions")  
section(data-tpl=id data-tpl-key="benchmarks" style="display: none") section(data-tpl=id data-tpl-key="benchmarks" hidden="")
+grid.o-block-small +grid.o-block-small
for keys, label in MODEL_BENCHMARKS for keys, label in MODEL_BENCHMARKS
.u-flex-full.u-padding-small(data-tpl=id data-tpl-key=label.toLowerCase() style="display: none") .u-flex-full.u-padding-small(data-tpl=id data-tpl-key=label.toLowerCase() hidden="")
+table.o-block-small +table.o-block-small
+row("head") +row("head")
+head-cell(colspan="2")=(MODEL_META["benchmark_" + label] || label) +head-cell(colspan="2")=(MODEL_META["benchmark_" + label] || label)
for label, field in keys for label, field in keys
+row(style="display: none") +row(hidden="")
+cell.u-nowrap +cell.u-nowrap
+label=label +label=label
if MODEL_META[field] if MODEL_META[field]

View File

@ -101,9 +101,9 @@ export class ModelLoader {
showError(modelId) { showError(modelId) {
const tpl = new Templater(modelId); const tpl = new Templater(modelId);
tpl.get('table').removeAttribute('data-loading'); tpl.get('table').removeAttribute('data-loading');
tpl.get('error').style.display = 'block'; tpl.get('error').hidden = false;
for (let key of ['sources', 'pipeline', 'vecs', 'author', 'license']) { for (let key of ['sources', 'pipeline', 'vecs', 'author', 'license']) {
tpl.get(key).parentElement.parentElement.style.display = 'none'; tpl.get(key).parentElement.parentElement.hidden = true;
} }
} }
@ -114,13 +114,12 @@ export class ModelLoader {
const modelId = `${data.lang}_${data.name}`; const modelId = `${data.lang}_${data.name}`;
const model = `${modelId}-${data.version}`; const model = `${modelId}-${data.version}`;
const tpl = new Templater(modelId); const tpl = new Templater(modelId);
tpl.get('error').style.display = 'none';
this.renderDetails(tpl, data) this.renderDetails(tpl, data)
this.renderBenchmarks(tpl, data.accuracy, data.speed); this.renderBenchmarks(tpl, data.accuracy, data.speed);
this.renderCompat(tpl, modelId); this.renderCompat(tpl, modelId);
tpl.get('download').setAttribute('href', `${this.repo}/releases/tag/${model}`); tpl.get('download').setAttribute('href', `${this.repo}/releases/tag/${model}`);
tpl.get('table').removeAttribute('data-loading'); tpl.get('table').removeAttribute('data-loading');
tpl.get('error').style.display = 'none'; tpl.get('error').hidden = true;
} }
renderDetails(tpl, { version, size, description, notes, author, url, renderDetails(tpl, { version, size, description, notes, author, url,
@ -133,9 +132,9 @@ export class ModelLoader {
if (license) tpl.fill('license', formats.license(license, this.licenses[license]), true); if (license) tpl.fill('license', formats.license(license, this.licenses[license]), true);
if (sources) tpl.fill('sources', formats.sources(sources)); if (sources) tpl.fill('sources', formats.sources(sources));
if (vectors) tpl.fill('vecs', formats.vectors(vectors)); if (vectors) tpl.fill('vecs', formats.vectors(vectors));
else tpl.get('vecs').parentElement.parentElement.style.display = 'none'; else tpl.get('vecs').parentElement.parentElement.hidden = true;
if (pipeline && pipeline.length) tpl.fill('pipeline', formats.pipeline(pipeline), true); if (pipeline && pipeline.length) tpl.fill('pipeline', formats.pipeline(pipeline), true);
else tpl.get('pipeline').parentElement.parentElement.style.display = 'none'; else tpl.get('pipeline').parentElement.parentElement.hidden = true;
} }
renderBenchmarks(tpl, accuracy = {}, speed = {}) { renderBenchmarks(tpl, accuracy = {}, speed = {}) {
@ -143,7 +142,7 @@ export class ModelLoader {
this.renderTable(tpl, 'parser', accuracy, val => val.toFixed(2)); this.renderTable(tpl, 'parser', accuracy, val => val.toFixed(2));
this.renderTable(tpl, 'ner', accuracy, val => val.toFixed(2)); this.renderTable(tpl, 'ner', accuracy, val => val.toFixed(2));
this.renderTable(tpl, 'speed', speed, Math.round); this.renderTable(tpl, 'speed', speed, Math.round);
tpl.get('benchmarks').style.display = 'block'; tpl.get('benchmarks').hidden = false;
} }
renderTable(tpl, id, benchmarks, converter = val => val) { renderTable(tpl, id, benchmarks, converter = val => val) {
@ -151,13 +150,13 @@ export class ModelLoader {
for (let key of Object.keys(this.benchKeys[id])) { for (let key of Object.keys(this.benchKeys[id])) {
if (benchmarks[key]) tpl if (benchmarks[key]) tpl
.fill(key, convertNumber(converter(benchmarks[key]))) .fill(key, convertNumber(converter(benchmarks[key])))
.parentElement.style.display = 'table-row'; .parentElement.hidden = false;
} }
tpl.get(id).style.display = 'block'; tpl.get(id).hidden = false;
} }
renderCompat(tpl, modelId) { renderCompat(tpl, modelId) {
tpl.get('compat-wrapper').style.display = 'table-row'; tpl.get('compat-wrapper').hidden = false;
const header = '<option selected disabled>spaCy version</option>'; const header = '<option selected disabled>spaCy version</option>';
const options = Object.keys(this.compat) const options = Object.keys(this.compat)
.map(v => `<option value="${v}">v${v}</option>`) .map(v => `<option value="${v}">v${v}</option>`)
@ -197,8 +196,8 @@ export class ModelComparer {
this.colors = CHART_COLORS; this.colors = CHART_COLORS;
this.fonts = CHART_FONTS; this.fonts = CHART_FONTS;
this.defaultModels = defaultModels; this.defaultModels = defaultModels;
this.tpl.get('result').style.display = 'block'; this.tpl.get('result').hidden = false;
this.tpl.get('error').style.display = 'none'; this.tpl.get('error').hidden = true;
this.fetchCompat() this.fetchCompat()
.then(compat => this.init(compat)) .then(compat => this.init(compat))
.catch(this.showError.bind(this)) .catch(this.showError.bind(this))
@ -257,8 +256,8 @@ export class ModelComparer {
showError(err) { showError(err) {
console.error(err || 'Error'); console.error(err || 'Error');
this.tpl.get('result').style.display = 'none'; this.tpl.get('result').hidden = true;
this.tpl.get('error').style.display = 'block'; this.tpl.get('error').hidden = false;
} }
onSelect(ev) { onSelect(ev) {
@ -301,8 +300,8 @@ export class ModelComparer {
this.chart.update(); this.chart.update();
[model1, model2].forEach((model, i) => this.renderTable(metaKeys, i + 1, model)); [model1, model2].forEach((model, i) => this.renderTable(metaKeys, i + 1, model));
this.tpl.get('result').removeAttribute('data-loading'); this.tpl.get('result').removeAttribute('data-loading');
this.tpl.get('error').style.display = 'none'; this.tpl.get('error').hidden = true;
this.tpl.get('result').style.display = 'block'; this.tpl.get('result').hidden = false;
} }
renderTable(metaKeys, i, { lang, name, version, size, description, renderTable(metaKeys, i, { lang, name, version, size, description,

View File

@ -30,7 +30,7 @@ div(data-tpl=TPL data-tpl-key="error")
| overview of the | overview of the
| #[+a(gh("spacy-models") + "/releases") latest model releases]. | #[+a(gh("spacy-models") + "/releases") latest model releases].
div(data-tpl=TPL data-tpl-key="result" style="display: none") div(data-tpl=TPL data-tpl-key="result" hidden="")
+chart("compare_accuracy", 350) +chart("compare_accuracy", 350)
+aside-code("Download", "text") +aside-code("Download", "text")