spaCy/website/assets/js/universe.vue.js

126 lines
4.5 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
export default function(selector, dataPath) {
Vue.use(VueMarkdown);
new Vue({
el: selector,
data: {
filteredResources: [],
allResources: [],
projectCats: {},
educationCats: {},
filterVals: ['category'],
activeMenu: 'all',
selected: null,
loading: false
},
computed: {
resources() {
return this.filteredResources.sort((a, b) => a.id.localeCompare(b.id));
},
categories() {
return Object.assign({}, this.projectCats, this.educationCats);
}
},
beforeMount() {
this.loading = true;
window.addEventListener('popstate', this.$_init);
fetch(dataPath)
.then(res => res.json())
.then(({ resources, projectCats, educationCats }) => {
this.allResources = resources || [];
this.filteredResources = resources || [];
this.projectCats = projectCats || {};
this.educationCats = educationCats || {};
this.$_init();
this.loading = false;
});
},
updated() {
if (window.Prism) Prism.highlightAll();
// make sure scroll positions for progress bar etc. are recalculated
window.dispatchEvent(new Event('resize'));
},
methods: {
getAuthorLink(id, link) {
if (id == 'twitter') return `https://twitter.com/${link}`;
else if (id == 'github') return `https://github.com/${link}`;
return link;
},
filterBy(id, selector = 'category') {
window.scrollTo(0, 0);
if (!this.filterVals.includes(selector)) {
return;
}
const resources = this.$_filterResources(id, selector);
if (!resources.length) return;
this.selected = null;
this.activeMenu = id;
this.filteredResources = resources;
},
viewResource(id) {
const res = this.allResources.find(r => r.id == id);
if (!res) return;
this.selected = res;
this.activeMenu = null;
if (this.$_getQueryVar('id') != res.id) {
this.$_updateUrl({ id: res.id });
}
window.scrollTo(0, 0);
},
$_filterResources(id, selector) {
if (id == 'all') {
if (window.location.search != '') {
this.$_updateUrl({});
}
return this.allResources;
}
const resources = this.allResources
.filter(res => (res[selector] || []).includes(id));
if (resources.length && this.$_getQueryVar(selector) != id) {
this.$_updateUrl({ [selector]: id });
}
return resources;
},
$_init() {
const current = this.$_getQueryVar('id');
if (current) {
this.viewResource(current);
return;
}
for (let filterVal of this.filterVals) {
const queryVar = this.$_getQueryVar(filterVal);
if (queryVar) {
this.filterBy(queryVar, filterVal);
return;
}
}
this.filterBy('all');
},
$_getQueryVar(key) {
const query = window.location.search.substring(1);
const params = query.split('&').map(param => param.split('='));
for(let param of params) {
if (param[0] == key) {
return decodeURIComponent(param[1]);
}
}
return false;
},
$_updateUrl(params) {
const loc = Object.keys(params)
.map(param => `${param}=${encodeURIComponent(params[param])}`);
2018-04-30 19:48:35 +03:00
const url = loc.length ? '?' + loc.join('&')
: window.location.origin + window.location.pathname;
💫 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
window.history.pushState(params, null, url);
}
}
})
}