Own VPN client on JavaScript. Part 7 - Electron Context Component
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
Context - Electron component , an element of navigation through the application.
Folder structure
index.js - The file in which the Electron component is created.
')
Contents of the index.js file.
index.html - HTML page window.
Contents of the index.html file.
style.css - page styles.
Contents of the style.css file.
Application
Application use: / app / ontext .
API
Interface component Context.
Test
Test version: / app_test / ontext .
Part 8 - Setting component
Context - Electron component , an element of navigation through the application.
Folder structure
context │ │ index.js │ └───client // │ 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 Context { constructor(parent) { // this.root = new BrowserWindow({ frame: false, // transparent: true, // resizable: false, // show: false, // width: 170, height: 235, parent }) // this.root.loadURL(`${__dirname}/client/index.html`) // callback this.cb_update = () => {} // this.root.on('blur', () => { this.root.hide() }) } ready() { // return new Promise(res => { this.root.once('ready-to-show', res) }) } show() { // this.root.show() this.root.focus() } hide() { // this.root.hide() } onCheckIP(cb) { // ( IP) ipcMain.on('CONTEXT_CHECKIP', e => { this.hide() cb() e.returnValue = 'ok' }) } onUpdate(cb) { // this.cb_update = cb // ( ) ipcMain.on('CONTEXT_UPDATE', e => { this.hide() cb() e.returnValue = 'ok' }) } update() { // onUpdate this.cb_update() } onSetting(cb) { // () ipcMain.on('CONTEXT_SETTING', e => { this.hide() cb() e.returnValue = 'ok' }) } onCallback(cb) { // ( ) ipcMain.on('CONTEXT_CALLBACK', e => { this.hide() cb() e.returnValue = 'ok' }) } onHidden(cb) { // () ipcMain.on('CONTEXT_HIDDEN', e => { this.hide() cb() e.returnValue = 'ok' }) } onExit(cb) { // () ipcMain.on('CONTEXT_EXIT', e => { this.hide() cb() e.returnValue = 'ok' }) } } index.html - HTML page window.
Contents of the index.html file.
Code
<!DOCTYPE html> <html lang='en'> <head> <meta charset='UTF-8'> <link rel='stylesheet' type='text/css' href='style.css'> </head> <body> <div class='body'> <div class='btn' id='ip'> IP</div> <div class='btn' id='update'> </div> <div class='btn' id='setting'></div> <div class='btn' id='about'> </div> <div class='btn' id='hidden'></div> <div class='btn end' id='exit'></div> </div> <script> const { ipcRenderer, remote } = require('electron') // const win = remote.getCurrentWindow() // setInterval(() => { win.setPosition( parseInt(localStorage.x) + parseInt(localStorage.context_x) - 168, parseInt(localStorage.y) + parseInt(localStorage.context_y) - 233 ) }, 3) // "CONTEXT_CHECKIP" document.getElementById('ip').addEventListener('click', () => { ipcRenderer.send('CONTEXT_CHECKIP') }) // "CONTEXT_UPDATE" document.getElementById('update').addEventListener('click', () => { ipcRenderer.send('CONTEXT_UPDATE') }) // "CONTEXT_SETTING" document.getElementById('setting').addEventListener('click', () => { ipcRenderer.send('CONTEXT_SETTING') }) // "CONTEXT_CALLBACK" document.getElementById('about').addEventListener('click', () => { ipcRenderer.send('CONTEXT_CALLBACK') }) // "CONTEXT_HIDDEN" document.getElementById('hidden').addEventListener('click', () => { ipcRenderer.send('CONTEXT_HIDDEN') }) // "CONTEXT_EXIT" document.getElementById('exit').addEventListener('click', () => { ipcRenderer.send('CONTEXT_EXIT') }) </script> </body> </html> style.css - page styles.
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; } @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; } @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; } @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; } @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; } @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; } @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 { border-radius: 10px 10px 5px 10px; background: rgba(36, 39, 39, 0.9); padding: 10px 0px 10px 0px; height: 215px; font-size: 0px; } .btn { font-size: 14px; user-select: none; cursor: pointer; color: #eee; width: 170px; height: 35px; display: flex; justify-content: center; align-items: center; border-bottom: 1px solid rgba(36, 39, 39, 0.05); } .btn:hover { background: rgba(51, 54, 54, 0.6); } .end { border: none; } Application
Application use: / app / ontext .
API
Interface component Context.
const { app } = require('electron') , VPN = require('./../../app/components/vpn') , CONTEXT = require('./../../app/components/context') app.on('ready', async() => { const Vpn = new VPN(), Context = new CONTEXT(Vpn.root) // await Promise.all([ Context.ready(), Vpn.ready() ]) Vpn.show() Vpn.showTray() Vpn.onContext(() => Context.show()) // Context.onCheckIP(() => { console.log(' IP') }) Context.onUpdate(() => { console.log(' ') }) Context.onSetting(() => { console.log('') }) Context.onCallback(() => { console.log(' ') }) Context.onHidden(() => { console.log('') }) Context.onExit(() => { console.log('') }) }) Test
Test version: / app_test / ontext .
Part 8 - Setting component
Navigation
Source: https://habr.com/ru/post/429438/
All Articles