Electron API Demos
-This is a desktop app that interactively and with sample code demonstrates core features of the [Electron](http://electron.atom.io) API. It's built with Electron, too, of course. This app works on Windows, OS X and Linux operating systems.
+[](https://travis-ci.org/electron/electron-api-demos)
+[](http://standardjs.com)
+
+This is a desktop app that interactively and with sample code demonstrates core features of the [Electron](http://electronjs.org) API. It's built with Electron, too, of course. This app works on Windows, macOS and Linux operating systems.
Use this app to see what you can do with Electron and use the source code to learn how to create a basic Electron app.
@@ -10,10 +13,10 @@ Use this app to see what you can do with Electron and use the source code to lea
This project adheres to the Contributor Covenant [code of conduct](CODE_OF_CONDUCT.md).
By participating, you are expected to uphold this code. Please report unacceptable
-behavior to electron@github.com.
+behavior to [coc@electronjs.org](mailto:coc@electronjs.org).
Follow [@ElectronJS](https://twitter.com/electronjs) on Twitter for important
-announcements. Visit the [electron website](http://electron.atom.io).
+announcements. Visit the [electron website](http://electronjs.org).
## Using
@@ -41,3 +44,11 @@ $ npm run dev
## Extending
[Read the docs](docs.md) to learn more about how this app is built or how to [add a new demo](docs.md#add-a-section-or-demo).
+
+## Translations
+
+* Simplified Chinese translation of this app is available at [`demopark/electron-api-demos-Zh_CN`](https://github.com/demopark/electron-api-demos-Zh_CN).
+* Traditional Chinese translation of this app is available at [`CalvertYang/electron-api-demos-zh-Hant`](https://github.com/CalvertYang/electron-api-demos-zh-Hant).
+* Japanese translation of this app is available at [`LeeDDHH/electron-api-demos-ja`](https://github.com/LeeDDHH/electron-api-demos-ja).
+
+Note: these versions are maintained by outside contributors and may not always be in sync with this version.
diff --git a/assets/code-blocks.js b/assets/code-blocks.js
index 07cf8831..f607800d 100644
--- a/assets/code-blocks.js
+++ b/assets/code-blocks.js
@@ -3,17 +3,17 @@ const path = require('path')
const codeBlocksWithPaths = document.querySelectorAll('code[data-path]')
-Array.prototype.forEach.call(codeBlocksWithPaths, function (code) {
+Array.prototype.forEach.call(codeBlocksWithPaths, (code) => {
const codePath = path.join(__dirname, '..', code.dataset.path)
const extension = path.extname(codePath)
- code.classList.add('language-' + extension.substring(1))
+ code.classList.add(`language-${extension.substring(1)}`)
code.textContent = fs.readFileSync(codePath)
})
-document.addEventListener('DOMContentLoaded', function () {
+document.addEventListener('DOMContentLoaded', () => {
const highlight = require('highlight.js')
const codeBlocks = document.querySelectorAll('pre code')
- Array.prototype.forEach.call(codeBlocks, function (code) {
+ Array.prototype.forEach.call(codeBlocks, (code) => {
highlight.highlightBlock(code)
})
})
diff --git a/assets/css/demo.css b/assets/css/demo.css
index f958252d..96afc4bd 100644
--- a/assets/css/demo.css
+++ b/assets/css/demo.css
@@ -173,6 +173,19 @@
word-break: break-word;
}
+.smooth-appear {
+ opacity: 1;
+ transition: opacity .5s ease-in-out;
+}
+
+.disappear {
+ opacity: 0;
+}
+.demo-button.smooth-disappear:focus {
+ outline: inherit;
+ border-color: inherit;
+ background-color: inherit;
+}
/* ProTip ----------------------------- */
@@ -189,3 +202,4 @@
.demo-protip strong {
font-weight: 600;
}
+
diff --git a/assets/css/global.css b/assets/css/global.css
index 99997d09..b9d96fc5 100644
--- a/assets/css/global.css
+++ b/assets/css/global.css
@@ -16,7 +16,7 @@
html {
height: 100%;
- font-family: system, -apple-system, '.SFNSText-Regular', 'SF UI Text', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
+ font-family: 'BlinkMacSystemFont', 'Lucida Grande', 'Segoe UI', Ubuntu, Cantarell, sans-serif;
font-size: 14px;
line-height: 1.5;
overflow: hidden; /* Prevents rubber-band scrolling of the whole "page" */
@@ -130,6 +130,10 @@ kbd {
border: 0;
}
+.no-display {
+ display: none;
+}
+
/* Content ------------------ */
diff --git a/assets/css/nativize.css b/assets/css/nativize.css
index 1942953a..88c71421 100644
--- a/assets/css/nativize.css
+++ b/assets/css/nativize.css
@@ -5,7 +5,7 @@
html {
font-family: sans-serif;
- -webkit-user-select: none; /* disable selection */
+ user-select: none; /* disable selection */
-webkit-user-drag: none; /* disable dragging */
cursor: default; /* use default cursor */
}
@@ -20,7 +20,7 @@ body {
.is-selectable,
pre,
code {
- -webkit-user-select: auto;
+ user-select: text;
cursor: auto;
}
diff --git a/assets/css/print.css b/assets/css/print.css
index 13c2d1bd..605ce740 100644
--- a/assets/css/print.css
+++ b/assets/css/print.css
@@ -11,7 +11,7 @@
}
.nav, button, .demo-box:before,
- #pdf-path, header p {
+ header p {
display: none;
}
diff --git a/assets/demo-btns.js b/assets/demo-btns.js
index b9c952de..b00c781f 100644
--- a/assets/demo-btns.js
+++ b/assets/demo-btns.js
@@ -1,20 +1,26 @@
-const storage = require('electron-json-storage')
+const settings = require('electron-settings')
const demoBtns = document.querySelectorAll('.js-container-target')
// Listen for demo button clicks
-Array.prototype.forEach.call(demoBtns, function (btn) {
- btn.addEventListener('click', function (event) {
- event.target.parentElement.classList.toggle('is-open')
+Array.prototype.forEach.call(demoBtns, (btn) => {
+ btn.addEventListener('click', (event) => {
+ const parent = event.target.parentElement
- // Save currently active demo button in localStorage
- storage.set('activeDemoButtonId', event.target.getAttribute('id'), function (err) {
- if (err) return console.error(err)
- })
+ // Toggles the "is-open" class on the demo's parent element.
+ parent.classList.toggle('is-open')
+
+ // Saves the active demo if it is open, or clears it if the demo was user
+ // collapsed by the user
+ if (parent.classList.contains('is-open')) {
+ settings.set('activeDemoButtonId', event.target.getAttribute('id'))
+ } else {
+ settings.delete('activeDemoButtonId')
+ }
})
})
// Default to the demo that was active the last time the app was open
-storage.get('activeDemoButtonId', function (err, id) {
- if (err) return console.error(err)
- if (id && id.length) document.getElementById(id).click()
-})
+const buttonId = settings.get('activeDemoButtonId')
+if (buttonId) {
+ document.getElementById(buttonId).click()
+}
diff --git a/assets/ex-links.js b/assets/ex-links.js
index 33d7e0f7..4319f8cb 100644
--- a/assets/ex-links.js
+++ b/assets/ex-links.js
@@ -2,10 +2,10 @@ const shell = require('electron').shell
const links = document.querySelectorAll('a[href]')
-Array.prototype.forEach.call(links, function (link) {
+Array.prototype.forEach.call(links, (link) => {
const url = link.getAttribute('href')
if (url.indexOf('http') === 0) {
- link.addEventListener('click', function (e) {
+ link.addEventListener('click', (e) => {
e.preventDefault()
shell.openExternal(url)
})
diff --git a/assets/img/icons.svg b/assets/img/icons.svg
index 3c56751b..e41b557c 100644
--- a/assets/img/icons.svg
+++ b/assets/img/icons.svg
@@ -8,8 +8,11 @@
+ About the Code
Nearly all (over 90%) of ES2015(opens in new window) is available to use in Electron without the use of pre-processors because it's a part of V8(opens in new window) which is built into Electron.
-To illustrate this we've made use of const, for un changing declarations; let for scoped declarations; and template strings like: `Result is ${output}` in the demo snippets.
To illustrate this we've made use of const, for unchanging declarations; let for scoped declarations; and template strings like: `Result is ${output}` in the demo snippets.