mirror of https://github.com/explosion/spaCy.git
Update JavaScript
This commit is contained in:
ines
parent
a8ff8423bb
commit
49b58d35fd
|
|
@ -1,27 +1,46 @@
|
|||
//- 💫 INCLUDES > SCRIPTS
|
||||
|
||||
script(src="/assets/js/main.js?v#{V_JS}")
|
||||
script(src="/assets/js/prism.js")
|
||||
if quickstart
|
||||
script(src="/assets/js/quickstart.min.js")
|
||||
|
||||
if SECTION == "docs"
|
||||
if quickstart
|
||||
script(src="/assets/js/quickstart.js")
|
||||
script var qs = new Quickstart("#qs")
|
||||
if IS_PAGE
|
||||
script(src="/assets/js/in-view.min.js")
|
||||
|
||||
script.
|
||||
((window.gitter = {}).chat = {}).options = {
|
||||
useStyles: false,
|
||||
activationElement: '.js-gitter-button',
|
||||
targetElement: '.js-gitter',
|
||||
room: '!{SOCIAL.gitter}'
|
||||
};
|
||||
|
||||
script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
|
||||
if HAS_MODELS
|
||||
script(src="/assets/js/chart.min.js")
|
||||
|
||||
if environment == "deploy"
|
||||
script
|
||||
script(async src="https://www.google-analytics.com/analytics.js")
|
||||
|
||||
script(src="/assets/js/prism.min.js")
|
||||
script(src="/assets/js/main.js?v#{V_JS}")
|
||||
|
||||
script
|
||||
| new ProgressBar('.js-progress');
|
||||
|
||||
if changelog
|
||||
| new Changelog('!{SOCIAL.github}', 'spacy');
|
||||
|
||||
if quickstart
|
||||
| new Quickstart("#qs");
|
||||
|
||||
if IS_PAGE
|
||||
| new SectionHighlighter('data-section', 'data-nav');
|
||||
| new GitHubEmbed('!{SOCIAL.github}', 'data-gh-embed');
|
||||
| ((window.gitter = {}).chat = {}).options = {
|
||||
| useStyles: false,
|
||||
| activationElement: '.js-gitter-button',
|
||||
| targetElement: '.js-gitter',
|
||||
| room: '!{SOCIAL.gitter}'
|
||||
| };
|
||||
|
||||
if HAS_MODELS
|
||||
| new ModelLoader('!{MODELS_REPO}', !{JSON.stringify(CURRENT_MODELS)}, !{JSON.stringify(MODEL_LICENSES)}, !{JSON.stringify(MODEL_ACCURACY)});
|
||||
|
||||
if environment == "deploy"
|
||||
| window.ga=window.ga||function(){
|
||||
| (ga.q=ga.q||[]).push(arguments)}; ga.l=+new Date;
|
||||
| ga('create', '#{ANALYTICS}', 'auto'); ga('send', 'pageview');
|
||||
|
||||
script(async src="https://www.google-analytics.com/analytics.js")
|
||||
if IS_PAGE
|
||||
script(src="https://sidecar.gitter.im/dist/sidecar.v1.js" async defer)
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,23 +1,324 @@
|
|||
//- 💫 MAIN JAVASCRIPT
|
||||
//- Note: Will be compiled using Babel before deployment.
|
||||
|
||||
'use strict'
|
||||
|
||||
{
|
||||
const nav = document.querySelector('.js-nav')
|
||||
const fixedClass = 'is-fixed'
|
||||
let vh, scrollY = 0, scrollUp = false
|
||||
const $ = document.querySelector.bind(document);
|
||||
const $$ = document.querySelectorAll.bind(document);
|
||||
|
||||
const updateVh = () => Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
|
||||
|
||||
const updateNav = () => {
|
||||
const vh = updateVh()
|
||||
const newScrollY = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0)
|
||||
if (newScrollY != scrollY) scrollUp = newScrollY <= scrollY
|
||||
scrollY = newScrollY
|
||||
|
||||
if(scrollUp && !(isNaN(scrollY) || scrollY <= vh)) nav.classList.add(fixedClass)
|
||||
else if (!scrollUp || (isNaN(scrollY) || scrollY <= vh/2)) nav.classList.remove(fixedClass)
|
||||
class ProgressBar {
|
||||
/**
|
||||
* Animated reading progress bar.
|
||||
* @param {String} selector – CSS selector of progress bar element.
|
||||
*/
|
||||
constructor(selector) {
|
||||
this.el = $(selector);
|
||||
this.scrollY = 0;
|
||||
this.sizes = this.updateSizes();
|
||||
this.el.setAttribute('max', 100);
|
||||
this.init();
|
||||
}
|
||||
|
||||
window.addEventListener('scroll', () => requestAnimationFrame(updateNav))
|
||||
init() {
|
||||
window.addEventListener('scroll', () => {
|
||||
this.scrollY = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
|
||||
requestAnimationFrame(this.update.bind(this));
|
||||
}, false);
|
||||
window.addEventListener('resize', () => {
|
||||
this.sizes = this.updateSizes();
|
||||
requestAnimationFrame(this.update.bind(this));
|
||||
})
|
||||
}
|
||||
|
||||
update() {
|
||||
const offset = 100 - ((this.sizes.height - this.scrollY - this.sizes.vh) / this.sizes.height * 100);
|
||||
this.el.setAttribute('value', (this.scrollY == 0) ? 0 : offset || 0);
|
||||
}
|
||||
|
||||
updateSizes() {
|
||||
const body = document.body;
|
||||
const html = document.documentElement;
|
||||
return {
|
||||
height: Math.max(body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight),
|
||||
vh: Math.max(html.clientHeight, window.innerHeight || 0)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class SectionHighlighter {
|
||||
/**
|
||||
* Hightlight section in viewport in sidebar, using in-view library.
|
||||
* @param {String} sectionAttr - Data attribute of sections.
|
||||
* @param {String} navAttr - Data attribute of navigation items.
|
||||
* @param {String} activeClass – Class name of active element.
|
||||
*/
|
||||
constructor(sectionAttr, navAttr, activeClass = 'is-active') {
|
||||
this.sections = [...$$(`[${navAttr}]`)];
|
||||
this.navAttr = navAttr;
|
||||
this.sectionAttr = sectionAttr;
|
||||
this.activeClass = activeClass;
|
||||
inView(`[${sectionAttr}]`).on('enter', this.highlightSection.bind(this));
|
||||
}
|
||||
|
||||
highlightSection(section) {
|
||||
const id = section.getAttribute(this.sectionAttr);
|
||||
const el = $(`[${this.navAttr}="${id}"]`);
|
||||
if (el) {
|
||||
this.sections.forEach(el => el.classList.remove(this.activeClass));
|
||||
el.classList.add(this.activeClass);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class Templater {
|
||||
/**
|
||||
* Mini templating engine based on data attributes. Selects elements based
|
||||
* on a data-tpl and data-tpl-key attribute and can set textContent
|
||||
* and innterHtml.
|
||||
*
|
||||
* @param {String} templateId - Template section, e.g. value of data-tpl.
|
||||
*/
|
||||
constructor(templateId) {
|
||||
this.templateId = templateId;
|
||||
}
|
||||
|
||||
get(key) {
|
||||
return $(`[data-tpl="${this.templateId}"][data-tpl-key="${key}"]`);
|
||||
}
|
||||
|
||||
fill(key, value, html = false) {
|
||||
const el = this.get(key);
|
||||
if (html) el.innerHTML = value || '';
|
||||
else el.textContent = value || '';
|
||||
return el;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class ModelLoader {
|
||||
/**
|
||||
* Load model meta from GitHub and update model details on site. Uses the
|
||||
* Templater mini template engine to update DOM.
|
||||
*
|
||||
* @param {String} repo - Path tp GitHub repository containing releases.
|
||||
* @param {Array} models - List of model IDs, e.g. "en_core_web_sm".
|
||||
* @param {Object} licenses - License IDs mapped to URLs.
|
||||
* @param {Object} accKeys - Available accuracy keys mapped to display labels.
|
||||
*/
|
||||
constructor(repo, models = [], licenses = {}, accKeys = {}) {
|
||||
this.url = `https://raw.githubusercontent.com/${repo}/master`;
|
||||
this.repo = `https://github.com/${repo}`;
|
||||
this.modelIds = models;
|
||||
this.licenses = licenses;
|
||||
this.accKeys = accKeys;
|
||||
this.chartColor = '#09a3d5';
|
||||
this.chartOptions = {
|
||||
type: 'bar',
|
||||
options: { responsive: true, scales: {
|
||||
yAxes: [{ label: 'Accuracy', ticks: { suggestedMin: 70 }}],
|
||||
xAxes: [{ barPercentage: 0.425 }]
|
||||
}}
|
||||
}
|
||||
Chart.defaults.global.legend.position = 'bottom';
|
||||
Chart.defaults.global.defaultFontFamily = "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'";
|
||||
this.init();
|
||||
}
|
||||
|
||||
init() {
|
||||
this.modelIds.forEach(modelId =>
|
||||
new Templater(modelId).get('table').setAttribute('data-loading', ''));
|
||||
fetch(`${this.url}/compatibility.json`)
|
||||
.then(res => this.handleResponse(res))
|
||||
.then(json => json.ok ? this.getModels(json['spacy']) : this.modelIds.forEach(modelId => this.showError(modelId)))
|
||||
}
|
||||
|
||||
handleResponse(res) {
|
||||
if (res.ok) return res.json().then(json => Object.assign({}, json, { ok: res.ok }))
|
||||
else return ({ ok: res.ok })
|
||||
}
|
||||
|
||||
getModels(compat) {
|
||||
this.compat = compat;
|
||||
for (let modelId of this.modelIds) {
|
||||
const version = this.getLatestVersion(modelId, compat);
|
||||
if (!version) {
|
||||
this.showError(modelId); return;
|
||||
}
|
||||
fetch(`${this.url}/meta/${modelId}-${version}.json`)
|
||||
.then(res => this.handleResponse(res))
|
||||
.then(json => json.ok ? this.render(json) : this.showError(modelId))
|
||||
}
|
||||
// make sure scroll positions for progress bar etc. are recalculated
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}
|
||||
|
||||
showError(modelId) {
|
||||
const template = new Templater(modelId);
|
||||
template.get('table').removeAttribute('data-loading');
|
||||
template.get('error').style.display = 'block';
|
||||
for (let key of ['sources', 'pipeline', 'author', 'license']) {
|
||||
template.get(key).parentElement.parentElement.style.display = 'none';
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* Update model details in tables. Currently quite hacky :(
|
||||
*/
|
||||
render({ lang, name, version, sources, pipeline, url, author, license, accuracy, size, description, notes }) {
|
||||
const modelId = `${lang}_${name}`;
|
||||
const model = `${modelId}-${version}`;
|
||||
const template = new Templater(modelId);
|
||||
|
||||
const getSources = s => (s instanceof Array) ? s.join(', ') : s;
|
||||
const getPipeline = p => p.map(comp => `<code>${comp}</code>`).join(', ');
|
||||
const getLink = (t, l) => `<a href="${l}" target="_blank">${t}</a>`;
|
||||
|
||||
const keys = { version, size, description, notes }
|
||||
Object.keys(keys).forEach(key => template.fill(key, keys[key]));
|
||||
|
||||
if (sources) template.fill('sources', getSources(sources));
|
||||
if (pipeline && pipeline.length) template.fill('pipeline', getPipeline(pipeline), true);
|
||||
else template.get('pipeline').parentElement.parentElement.style.display = 'none';
|
||||
|
||||
if (author) template.fill('author', url ? getLink(author, url) : author, true);
|
||||
if (license) template.fill('license', this.licenses[license] ? getLink(license, this.licenses[license]) : license, true);
|
||||
|
||||
template.get('download').setAttribute('href', `${this.repo}/releases/tag/${model}`);
|
||||
if (accuracy) this.renderAccuracy(template, accuracy, modelId);
|
||||
this.renderCompat(template, modelId);
|
||||
template.get('table').removeAttribute('data-loading');
|
||||
}
|
||||
|
||||
renderCompat(template, modelId) {
|
||||
template.get('compat-wrapper').style.display = 'table-row';
|
||||
const options = Object.keys(this.compat).map(v => `<option value="${v}">v${v}</option>`).join('');
|
||||
template
|
||||
.fill('compat', '<option selected disabled>spaCy version</option>' + options, true)
|
||||
.addEventListener('change', ev => {
|
||||
const result = this.compat[ev.target.value][modelId];
|
||||
if (result) template.fill('compat-versions', `<code>${modelId}-${result[0]}</code>`, true);
|
||||
else template.fill('compat-versions', '');
|
||||
});
|
||||
}
|
||||
|
||||
renderAccuracy(template, accuracy, modelId, compare=false) {
|
||||
template.get('accuracy-wrapper').style.display = 'block';
|
||||
const metaKeys = Object.keys(this.accKeys).map(k => accuracy[k] ? k : false).filter(k => k);
|
||||
for (let key of metaKeys) {
|
||||
template.fill(key, accuracy[key].toFixed(2)).parentElement.style.display = 'table-row';
|
||||
}
|
||||
|
||||
this.chartOptions.options.legend = { display: compare }
|
||||
new Chart(`chart_${modelId}`, Object.assign({}, this.chartOptions, { data: {
|
||||
datasets: [{
|
||||
label: modelId,
|
||||
data: metaKeys.map(key => accuracy[key].toFixed(2)),
|
||||
backgroundColor: this.chartColor
|
||||
}],
|
||||
labels: metaKeys.map(key => this.accKeys[key])
|
||||
}}))
|
||||
}
|
||||
|
||||
getLatestVersion(model, compat = {}) {
|
||||
for (let spacy_v of Object.keys(compat)) {
|
||||
const models = compat[spacy_v];
|
||||
if (models[model]) return models[model][0];
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class Changelog {
|
||||
/**
|
||||
* Fetch and render changelog from GitHub. Clones a template node (table row)
|
||||
* to avoid doubling templating markup in JavaScript.
|
||||
*
|
||||
* @param {String} user - GitHub username.
|
||||
* @param {String} repo - Repository to fetch releases from.
|
||||
*/
|
||||
constructor(user, repo) {
|
||||
this.url = `https://api.github.com/repos/${user}/${repo}/releases`;
|
||||
this.template = new Templater('changelog');
|
||||
fetch(this.url)
|
||||
.then(res => this.handleResponse(res))
|
||||
.then(json => json.ok ? this.render(json) : false)
|
||||
}
|
||||
|
||||
/**
|
||||
* Get template section from template row. Slightly hacky, but does make sense.
|
||||
*/
|
||||
$(item, id) {
|
||||
return item.querySelector(`[data-changelog="${id}"]`);
|
||||
}
|
||||
|
||||
handleResponse(res) {
|
||||
if (res.ok) return res.json().then(json => Object.assign({}, json, { ok: res.ok }))
|
||||
else return ({ ok: res.ok })
|
||||
}
|
||||
|
||||
render(json) {
|
||||
this.template.get('error').style.display = 'none';
|
||||
this.template.get('table').style.display = 'block';
|
||||
this.row = this.template.get('item');
|
||||
this.releases = this.template.get('releases');
|
||||
this.prereleases = this.template.get('prereleases');
|
||||
Object.values(json)
|
||||
.filter(release => release.name)
|
||||
.forEach(release => this.renderRelease(release));
|
||||
this.row.remove();
|
||||
// make sure scroll positions for progress bar etc. are recalculated
|
||||
window.dispatchEvent(new Event('resize'));
|
||||
}
|
||||
|
||||
/**
|
||||
* Clone the template row and populate with content from API response.
|
||||
* https://developer.github.com/v3/repos/releases/#list-releases-for-a-repository
|
||||
*
|
||||
* @param {String} name - Release title.
|
||||
* @param {String} tag (tag_name) - Release tag.
|
||||
* @param {String} url (html_url) - URL to the release page on GitHub.
|
||||
* @param {String} date (published_at) - Timestamp of release publication.
|
||||
* @param {Boolean} pre (prerelease) - Whether the release is a prerelease.
|
||||
*/
|
||||
renderRelease({ name, tag_name: tag, html_url: url, published_at: date, prerelease: pre }) {
|
||||
const container = pre ? this.prereleases : this.releases;
|
||||
const row = this.row.cloneNode(true);
|
||||
this.$(row, 'date').textContent = date.split('T')[0];
|
||||
this.$(row, 'tag').innerHTML = `<a href="${url}" target="_blank"><code>${tag}</code></a>`;
|
||||
this.$(row, 'title').textContent = (name.split(': ').length == 2) ? name.split(': ')[1] : name;
|
||||
container.appendChild(row);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
class GitHubEmbed {
|
||||
/**
|
||||
* Embed code from GitHub repositories, similar to Gist embeds. Fetches the
|
||||
* raw text and places it inside element.
|
||||
* Usage: <pre><code data-gh-embed="spacy/master/examples/x.py"></code><pre>
|
||||
*
|
||||
* @param {String} user - GitHub user or organization.
|
||||
* @param {String} attr - Data attribute used to select containers. Attribute
|
||||
* value should be path to file relative to user.
|
||||
*/
|
||||
constructor(user, attr) {
|
||||
this.url = `https://raw.githubusercontent.com/${user}`;
|
||||
this.attr = attr;
|
||||
this.error = `\nCan't fetch code example from GitHub :(\n\nPlease use the link below to view the example. If you've come across\na broken link, we always appreciate a pull request to the repository,\nor a report on the issue tracker. Thanks!`;
|
||||
[...$$(`[${this.attr}]`)].forEach(el => this.embed(el));
|
||||
}
|
||||
|
||||
embed(el) {
|
||||
el.parentElement.setAttribute('data-loading', '');
|
||||
fetch(`${this.url}/${el.getAttribute(this.attr)}`)
|
||||
.then(res => res.text().then(text => ({ text, ok: res.ok })))
|
||||
.then(({ text, ok }) => {
|
||||
el.textContent = ok ? text : this.error;
|
||||
if (ok && window.Prism) Prism.highlightElement(el);
|
||||
})
|
||||
el.parentElement.removeAttribute('data-loading');
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue