diff --git a/desktop/sources/index.html b/desktop/sources/index.html index 12e113c..38d0ef2 100644 --- a/desktop/sources/index.html +++ b/desktop/sources/index.html @@ -88,6 +88,9 @@ left.controller.addSpacer('default', 'Theme', 'Download') left.controller.add("default","Theme","Download Themes..",() => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Themes') }) + left.controller.add("default","Options","Set Text Area Width",() => { left.operator.start('setTextAreaColumns: ')}) + left.controller.add("default","Options","Save Window Size",() => { left.options.setDimensions()}) + left.controller.add('reader', '*', 'About', () => { require('electron').shell.openExternal('https://github.com/hundredrabbits/Left') }, 'CmdOrCtrl+,') left.controller.add('reader', '*', 'Fullscreen', () => { app.toggleFullscreen() }, 'CmdOrCtrl+Enter') left.controller.add('reader', '*', 'Hide', () => { app.toggleVisible() }, 'CmdOrCtrl+H') @@ -129,6 +132,8 @@ left.controller.add('operator', 'Find', 'Find Next', () => { left.operator.find_next() }, 'CmdOrCtrl+N') left.controller.add('operator', 'Operator', 'Stop', () => { left.operator.stop() }, 'Esc') + left.controller.add('operator', 'Options', 'setTextAreaColumns', () => { left.operator.start('setTextAreaColumns: ') }) + left.controller.commit() diff --git a/desktop/sources/left.js b/desktop/sources/left.js index aab3d6c..fa37f5a 100644 --- a/desktop/sources/left.js +++ b/desktop/sources/left.js @@ -11,6 +11,7 @@ const Project = require('./scripts/project') const Reader = require('./scripts/reader') const Insert = require('./scripts/insert') const Font = require('./scripts/font') +const Options = require('./scripts/options') const EOL = '\n' @@ -18,7 +19,8 @@ function Left () { this.theme = new Theme({ background: '#222', f_high: '#eee', f_med: '#888', f_low: '#666', f_inv: '#00f', b_high: '#f9a', b_med: '#a9f', b_low: '#000', b_inv: '#af9' }) this.controller = new Controller() this.dictionary = new Dictionary() - this.operator = new Operator() + this.options = new Options() + this.operator = new Operator(this.options) this.navi = new Navi() this.stats = new Stats() this.go = new Go() @@ -78,6 +80,7 @@ function Left () { this.font.start() this.dictionary.start() this.project.start() + this.options.start() this.go.to_page() @@ -328,6 +331,7 @@ function Left () { this.reset = () => { this.theme.reset() this.font.reset() + this.options.reset() this.update() } diff --git a/desktop/sources/scripts/operator.js b/desktop/sources/scripts/operator.js index 281ce35..dcef70e 100644 --- a/desktop/sources/scripts/operator.js +++ b/desktop/sources/scripts/operator.js @@ -1,11 +1,14 @@ 'use strict' +const Options = require("./options"); + const EOL = '\n' -function Operator () { +function Operator (options) { this.el = document.createElement('input'); this.el.id = 'operator' this.is_active = false this.index = 0 + this.Options = options this.el.addEventListener('keyup', (e) => { left.operator.on_change(e, false) }) this.el.addEventListener('keydown', (e) => { left.operator.on_change(e, true) }) @@ -167,6 +170,15 @@ function Operator () { left.go.to_line(target) } } + + this.setTextAreaColumns = function (size, bang = false) { + if (size.length < 2) { return } + this.Options.setTextAreaColumns(size) + + if (bang) { + setTimeout(() => { left.operator.stop() }, 250) + } + } } module.exports = Operator diff --git a/desktop/sources/scripts/options.js b/desktop/sources/scripts/options.js new file mode 100644 index 0000000..6e3f39d --- /dev/null +++ b/desktop/sources/scripts/options.js @@ -0,0 +1,66 @@ +'use strict' + +function Options () { + this.electron = require('electron'); + const root = document.documentElement + this.colWidth = 80 + this.w = 900 + this.h = 500 + + + this.setDimensions = function () { + var window = this.electron.remote.getCurrentWindow(); + const { w, h } = window.getSize() + this.w = window.getSize()[0] + this.h = window.getSize()[1] + this.updateVariables() + } + + this.start = function () { + this.element = document.querySelector('textarea') + + // If localStorage has information about the options, + // load the saved values and apply them + if (localStorage.getItem('options')) { + console.log(JSON.parse(localStorage.getItem('options'))) + const { colWidth, w, h } = JSON.parse(localStorage.getItem('options')) + this.colWidth = colWidth + this.w = w + this.h = h + this.updateVariables() + } + } + + this.setTextAreaColumns = function (size) { + this.colWidth = size + this.updateVariables() + } + + // Update the CSS variables, save the values to localStorage + this.updateVariables = function () { + this.element.style.setProperty('width', `${this.colWidth}ch`) + var window = this.electron.remote.getCurrentWindow(); + window.setSize(this.w, this.h) + window.center() + this.save() + } + + // Save the font-related values to localStorage + this.save = function () { + localStorage.setItem('options', JSON.stringify({ + colWidth: this.colWidth, + w: this.w, + h: this.h + })) + } + + this.reset = function () { + localStorage.removeItem('options') + this.colWidth = 80 + this.w = 900 + this.h = 500 + this.updateVariables() + } +} + +module.exports = Options