spaCy/website/assets/js/main.js

149 lines
4.6 KiB
JavaScript
Raw Normal View History

💫 Interactive code examples, spaCy Universe and various docs improvements (#2274) * Integrate Python kernel via Binder * Add live model test for languages with examples * Update docs and code examples * Adjust margin (if not bootstrapped) * Add binder version to global config * Update terminal and executable code mixins * Pass attributes through infobox and section * Hide v-cloak * Fix example * Take out model comparison for now * Add meta text for compat * Remove chart.js dependency * Tidy up and simplify JS and port big components over to Vue * Remove chartjs example * Add Twitter icon * Add purple stylesheet option * Add utility for hand cursor (special cases only) * Add transition classes * Add small option for section * Add thumb object for small round thumbnail images * Allow unset code block language via "none" value (workaround to still allow unset language to default to DEFAULT_SYNTAX) * Pass through attributes * Add syntax highlighting definitions for Julia, R and Docker * Add website icon * Remove user survey from navigation * Don't hide GitHub icon on small screens * Make top navigation scrollable on small screens * Remove old resources page and references to it * Add Universe * Add helper functions for better page URL and title * Update site description * Increment versions * Update preview images * Update mentions of resources * Fix image * Fix social images * Fix problem with cover sizing and floats * Add divider and move badges into heading * Add docstrings * Reference converting section * Add section on converting word vectors * Move converting section to custom section and fix formatting * Remove old fastText example * Move extensions content to own section Keep weird ID to not break permalinks for now (we don't want to rewrite URLs if not absolutely necessary) * Use better component example and add factories section * Add note on larger model * Use better example for non-vector * Remove similarity in context section Only works via small models with tensors so has always been kind of confusing * Add note on init-model command * Fix lightning tour examples and make excutable if possible * Add spacy train CLI section to train * Fix formatting and add video * Fix formatting * Fix textcat example description (resolves #2246) * Add dummy file to try resolve conflict * Delete dummy file * Tidy up [ci skip] * Ensure sufficient height of loading container * Add loading animation to universe * Update Thebelab build and use better startup message * Fix asset versioning * Fix typo [ci skip] * Add note on project idea label
2018-04-29 03:06:46 +03:00
/**
* Initialise changelog
*/
import initChangelog from './changelog.vue.js';
{
const selector = '[data-vue="changelog"]';
if (window.Vue && document.querySelector(selector)) {
initChangelog(selector, 'explosion/spacy');
}
}
/**
* Initialise models
*/
import initModels from './models.vue.js';
{
if (window.Vue && document.querySelector('[data-model]')) {
initModels('explosion/spacy-models')
}
}
/**
* Initialise Universe
*/
import initUniverse from './universe.vue.js';
{
const selector = '[data-vue="universe"]';
if (window.Vue && document.querySelector(selector)) {
initUniverse(selector, '/universe/universe.json');
}
}
/**
* Initialise Quickstart
*/
if (document.querySelector('#qs') && window.Quickstart) {
new Quickstart('#qs');
}
/**
* Thebelabs
*/
if (window.thebelab) {
window.thebelab.on('status', (ev, data) => {
if (data.status == 'failed') {
const msg = "Failed to connect to kernel :( This can happen if too many users are active at the same time. Please reload the page and try again!";
const wrapper = `<span style="white-space: pre-wrap">${msg}</span>`;
document.querySelector('.jp-OutputArea-output pre').innerHTML = wrapper;
}
});
}
/**
* Highlight section in viewport in sidebar, using in-view library
*/
{
const sectionAttr = 'data-section';
const navAttr = 'data-nav';
const activeClass = 'is-active';
const sections = [...document.querySelectorAll(`[${navAttr}]`)];
if (window.inView) {
if (sections.length) { // highlight first item regardless
sections[0].classList.add(activeClass);
}
inView(`[${sectionAttr}]`).on('enter', section => {
const id = section.getAttribute(sectionAttr);
const el = document.querySelector(`[${navAttr}="${id}"]`);
if (el) {
sections.forEach(el => el.classList.remove(activeClass));
el.classList.add(activeClass);
}
});
}
}
/**
* Simple, collapsible accordion sections.
* Inspired by: https://inclusive-components.design/collapsible-sections/
*/
{
const elements = [...document.querySelectorAll('.js-accordion')];
elements.forEach(el => el.addEventListener('click', ({ target }) => {
const exp = target.getAttribute('aria-expanded') === 'true' || false;
target.setAttribute('aria-expanded', !exp);
target.parentElement.nextElementSibling.hidden = exp;
}));
}
/**
* Reading indicator as progress bar
* @param {string} selector - Selector of <progress> element.
*/
class ProgressBar {
constructor(selector) {
this.scrollY = 0;
this.sizes = this.updateSizes();
this.el = document.querySelector(selector);
this.el.setAttribute('max', 100);
window.addEventListener('scroll', ev => {
this.scrollY = (window.pageYOffset || document.scrollTop) - (document.clientTop || 0);
requestAnimationFrame(this.update.bind(this));
});
window.addEventListener('resize', ev => {
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() {
return {
height: Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight),
vh: Math.max(document.documentElement.clientHeight, window.innerHeight || 0)
}
}
}
new ProgressBar('.js-progress');
/**
* 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>
*/
{
const attr = 'data-gh-embed';
const url = 'https://raw.githubusercontent.com/explosion';
const elements = [...document.querySelectorAll(`[${attr}]`)];
elements.forEach(el => {
el.parentElement.setAttribute('data-loading', '');
fetch(`${url}/${el.getAttribute(attr)}`)
.then(res => res.text().then(text => ({ text, ok: res.ok })))
.then(({ text, ok }) => {
if (ok) {
el.textContent = text;
if (window.Prism) Prism.highlightElement(el);
}
el.parentElement.removeAttribute('data-loading');
})
});
}