diff --git a/scripts/examples.js b/scripts/examples.js index 5c96907601..f226f45b85 100644 --- a/scripts/examples.js +++ b/scripts/examples.js @@ -20,63 +20,62 @@ var treePromise = new Promise(function (resolve) { var languages = components.languages; -for (var id in languages) { - if (id === 'meta') { - continue; - } - - (function (id) { - var language = languages[id]; - var checked = false; - - if (language.option === 'default') { - checked = true; - } +Promise.all(Object.keys(languages).filter(function (id) { return id !== 'meta'; }).map(function (id) { + var language = languages[id]; - language.enabled = checked; - language.path = languages.meta.path.replace(/\{id}/g, id) + '.js'; - language.examplesPath = languages.meta.examplesPath.replace(/\{id}/g, id) + '.html'; + language.enabled = language.option === 'default'; + language.path = languages.meta.path.replace(/\{id}/g, id) + '.js'; + language.examplesPath = languages.meta.examplesPath.replace(/\{id}/g, id) + '.html'; - fileExists(language.examplesPath).then(function (exists) { - $u.element.create('label', { - attributes: { - 'data-id': id, - 'title': !exists ? 'No examples are available for this language.' : '' - }, - className: !exists ? 'unavailable' : '', - contents: [ - { - tag: 'input', - properties: { - type: 'checkbox', - name: 'language', - value: id, - checked: checked && exists, - disabled: !exists, - onclick: function () { - $$('input[name="' + this.name + '"]').forEach(function (input) { - languages[input.value].enabled = input.checked; - }); - - update(id); - } + return fileExists(language.examplesPath).then(function (exists) { + return { id: id, exists: exists }; + }); +})).then(function (values) { + values.forEach(function (result) { + var id = result.id; + var exists = result.exists; + var language = languages[id]; + var checked = language.enabled; + + $u.element.create('label', { + attributes: { + 'data-id': id, + 'title': !exists ? 'No examples are available for this language.' : '' + }, + className: !exists ? 'unavailable' : '', + contents: [ + { + tag: 'input', + properties: { + type: 'checkbox', + name: 'language', + value: id, + checked: checked && exists, + disabled: !exists, + onclick: function () { + $$('input[name="' + this.name + '"]').forEach(function (input) { + languages[input.value].enabled = input.checked; + }); + + update(id); } - }, - language.title - ], - inside: '#languages' - }); - examples[id] = $u.element.create('section', { - 'id': 'language-' + id, - 'className': 'language-' + id, - inside: '#examples' - }); - if (checked) { - update(id); - } + } + }, + language.title + ], + inside: '#languages' }); - }(id)); -} + examples[id] = $u.element.create('section', { + 'id': 'language-' + id, + 'className': 'language-' + id, + inside: '#examples' + }); + if (checked) { + update(id); + } + }); +}); + function fileExists(filepath) { return treePromise.then(function (tree) { @@ -85,6 +84,12 @@ function fileExists(filepath) { return true; } } + + // on localhost: The missing example might be for a new language + if (location.hostname === 'localhost' || location.hostname === '127.0.0.1') { + return getFileContents(filepath).then(function () { return true; }, function () { return false; }); + } + return false; }); } @@ -150,11 +155,7 @@ function update(id) { examples[id].innerHTML = buildContentsHeader(id) + contents; loadLanguage(id).then(function () { - var elements = examples[id].querySelectorAll('code[class*="language-"], [class*="language-"] code, code[class*="lang-"], [class*="lang-"] code'); - - for (var i=0, element; element = elements[i++];) { - Prism.highlightElement(element); - } + Prism.highlightAllUnder(examples[id]); }); }); } else { @@ -166,10 +167,9 @@ function update(id) { * Loads a language, including all dependencies * * @param {string} lang the language to load - * @type {Promise} the promise which resolves as soon as everything is loaded + * @returns {Promise} the promise which resolves as soon as everything is loaded */ -function loadLanguage (lang) -{ +function loadLanguage(lang) { // at first we need to fetch all dependencies for the main language // Note: we need to do this, even if the main language already is loaded (just to be sure..) // @@ -200,12 +200,10 @@ function loadLanguage (lang) * Returns all dependencies (as identifiers) of a specific language * * @param {string} lang - * @returns {Array.} the list of dependencies. Empty if the language has none. + * @returns {Array} the list of dependencies. Empty if the language has none. */ -function getDependenciesOfLanguage (lang) -{ - if (!components.languages[lang] || !components.languages[lang].require) - { +function getDependenciesOfLanguage(lang) { + if (!components.languages[lang] || !components.languages[lang].require) { return []; }