Own VPN client on JavaScript. Part 9 - Electron component Callback
PS Each part is a part, by itself it does not make sense to get the necessary context and not to experience cognitive dissonance from the lack of so necessary blocks of text, start reading from part 1
Callback - Electron component , feedback element.
Folder structure:
index.js - The file in which the Electron component is created.
')
Contents of the index.js file.
index.html - HTML page window.
Content of index.html file:
style.css - HTML page window.
Contents of the style.css file:
Application
Application Usage: / app / Callback
API
Callback component interface:
Test
Test version: / app_test / Callback
10 part - Combining all components
Callback - Electron component , feedback element.
Folder structure:
callback │ │ index.js │ └───client // │ image.jpg │ index.html │ style.css │ └───fonts font1.woff2 font2.woff2 font3.woff2 font4.woff2 font5.woff2 font6.woff2 font7.woff2 index.js - The file in which the Electron component is created.
')
Contents of the index.js file.
Code
const { BrowserWindow, ipcMain } = require('electron') module.exports = class Callback { constructor(parent) { // this.root = new BrowserWindow({ frame: false, // transparent: true, // resizable: false, // show: false, // width: 175, height: 463, center: true, parent }) // this.root.loadURL(`${__dirname}/client/index.html`) // ( ) ipcMain.on('CALLBACK_CLOSE', e => { this.root.hide() e.returnValue = 'ok' }) } ready() { // return new Promise(res => { this.root.once('ready-to-show', res) }) } show() { // this.root.show() } hide() { // this.root.hide() } } index.html - HTML page window.
Content of index.html file:
Code
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <link rel='stylesheet' type='text/css' href='style.css?ss'> </head> <body> <div class='body'> <div class='avatar'></div> <div class='info'> <div class='name'><b>JSus</b> Dev</div> <div class='background'><i>"JavaScript "</i></div> <a onclick='open_link("https://github.com/JsusDev/JS.VPN-Client");event.preventDefault()' href='#' class='gh'>GitHub</a> <a onclick='open_link("https://...");event.preventDefault()' href='#' target='_blank'>Telegram me</a> <a onclick='open_link("https://...");event.preventDefault()' href='#' target='_blank'>Telegram channel</a> <div class='btn'></div> </div> </div> <script> const btn = document.getElementsByClassName('btn')[0] , { ipcRenderer, shell } = require('electron') // const open_link = (url) => shell.openExternal(url) // CALLBACK_CLOSE ( ) btn.addEventListener('click', () => { ipcRenderer.sendSync('CALLBACK_CLOSE') }) </script> </body> </html> style.css - HTML page window.
Contents of the style.css file:
Code
@font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(fonts/font1.woff2) format('woff2'); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } /* cyrillic */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(fonts/font2.woff2) format('woff2'); unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } /* greek-ext */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(fonts/font3.woff2) format('woff2'); unicode-range: U+1F00-1FFF; } /* greek */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(fonts/font4.woff2) format('woff2'); unicode-range: U+0370-03FF; } /* vietnamese */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(fonts/font5.woff2) format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; } /* latin-ext */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(fonts/font6.woff2) format('woff2'); unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; } /* latin */ @font-face { font-family: 'Source Sans Pro'; font-style: normal; font-weight: 400; src: local('Source Sans Pro Regular'), local('SourceSansPro-Regular'), url(fonts/font7.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } * { font-family: 'Source Sans Pro', sans-serif; padding: 0; margin: 0; overflow: hidden; background: rgba(0, 0, 0, 0); } .body { display: flex; justify-content: center; align-items: center; flex-direction: column; } .avatar { width: 120px; height: 120px; border-radius: 100%; border: 13px solid #242424; background: url('image.jpg'); background-size: cover; } .info { margin-top: 10px; font-size: 14px; background: rgba(36, 39, 39, 0.9); color: #eee; width: 135px; border-radius: 10px; padding: 10px 20px 10px 20px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .name { font-size: 23px; margin-bottom: 10px; } .background { text-align: center; margin: 10px; } a { user-select: none; cursor: pointer; width: 100%; display: block; color: #bbb; text-decoration: none; font-size: 13px; } a:hover { color: #ccc; } .gh { margin: 4px; text-align: center; margin-bottom: 10px; } .btn { cursor: pointer; margin-top: 2px; padding: 4px 10px 4px 10px; border-radius: 6px; user-select: none; margin: 10px 10px 0px 10px; } .btn:hover { color: #ccc } Application
Application Usage: / app / Callback
API
Callback component interface:
const { app } = require('electron') , CALLBACK = require('./../../app/components/callback') app.on('ready', async() => { const Callback = new CALLBACK() await Callback.ready() // Callback.show() }) Test
Test version: / app_test / Callback
10 part - Combining all components
Navigation
Source: https://habr.com/ru/post/429442/
All Articles