Add keybind setting
This commit is contained in:
parent
e78089a509
commit
0229482be8
|
@ -17,27 +17,29 @@ import DropdownSetting from './types/dropdown';
|
||||||
import RadioSetting from './types/radio';
|
import RadioSetting from './types/radio';
|
||||||
import SliderSetting from './types/slider';
|
import SliderSetting from './types/slider';
|
||||||
import ColourSetting from './types/colour';
|
import ColourSetting from './types/colour';
|
||||||
|
import KeybindSetting from './types/keybind';
|
||||||
import FileSetting from './types/file';
|
import FileSetting from './types/file';
|
||||||
import ArraySetting from './types/array';
|
import ArraySetting from './types/array';
|
||||||
import CustomSetting from './types/custom';
|
import CustomSetting from './types/custom';
|
||||||
|
|
||||||
export default class Setting {
|
export default class Setting {
|
||||||
|
|
||||||
constructor(args) {
|
constructor(args, ...merge) {
|
||||||
args = args.args || args;
|
args = args.args || args;
|
||||||
|
|
||||||
if (args.type === 'color') args.type = 'colour';
|
if (args.type === 'color') args.type = 'colour';
|
||||||
|
|
||||||
if (args.type === 'bool') return new BoolSetting(args);
|
if (args.type === 'bool') return new BoolSetting(args, ...merge);
|
||||||
else if (args.type === 'text') return new StringSetting(args);
|
else if (args.type === 'text') return new StringSetting(args, ...merge);
|
||||||
else if (args.type === 'number') return new NumberSetting(args);
|
else if (args.type === 'number') return new NumberSetting(args, ...merge);
|
||||||
else if (args.type === 'dropdown') return new DropdownSetting(args);
|
else if (args.type === 'dropdown') return new DropdownSetting(args, ...merge);
|
||||||
else if (args.type === 'radio') return new RadioSetting(args);
|
else if (args.type === 'radio') return new RadioSetting(args, ...merge);
|
||||||
else if (args.type === 'slider') return new SliderSetting(args);
|
else if (args.type === 'slider') return new SliderSetting(args, ...merge);
|
||||||
else if (args.type === 'colour') return new ColourSetting(args);
|
else if (args.type === 'colour') return new ColourSetting(args, ...merge);
|
||||||
else if (args.type === 'file') return new FileSetting(args);
|
else if (args.type === 'keybind') return new KeybindSetting(args, ...merge);
|
||||||
else if (args.type === 'array') return new ArraySetting(args);
|
else if (args.type === 'file') return new FileSetting(args, ...merge);
|
||||||
else if (args.type === 'custom') return new CustomSetting(args);
|
else if (args.type === 'array') return new ArraySetting(args, ...merge);
|
||||||
|
else if (args.type === 'custom') return new CustomSetting(args, ...merge);
|
||||||
else throw {message: `Setting type ${args.type} unknown`};
|
else throw {message: `Setting type ${args.type} unknown`};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -0,0 +1,28 @@
|
||||||
|
/**
|
||||||
|
* BetterDiscord Keybind Setting Struct
|
||||||
|
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
||||||
|
* All rights reserved.
|
||||||
|
* https://betterdiscord.net
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
import Setting from './basesetting';
|
||||||
|
import Combokeys from 'combokeys';
|
||||||
|
|
||||||
|
export default class KeybindSetting extends Setting {
|
||||||
|
|
||||||
|
constructor(args, ...merge) {
|
||||||
|
super(args, ...merge);
|
||||||
|
|
||||||
|
this.combokeys = new Combokeys(document);
|
||||||
|
this.combokeys.bind(this.value, event => this.emit('keybind-activated', event));
|
||||||
|
}
|
||||||
|
|
||||||
|
setValueHook() {
|
||||||
|
this.combokeys.reset();
|
||||||
|
this.combokeys.bind(this.value, event => this.emit('keybind-activated', event));
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
|
@ -1,9 +1,10 @@
|
||||||
@import './main.scss';
|
@import './main.scss';
|
||||||
|
@import './switches.scss';
|
||||||
@import './text.scss';
|
@import './text.scss';
|
||||||
@import './files.scss';
|
@import './files.scss';
|
||||||
@import './dropdowns.scss';
|
@import './dropdowns.scss';
|
||||||
@import './radios.scss';
|
@import './radios.scss';
|
||||||
@import './sliders.scss';
|
@import './sliders.scss';
|
||||||
@import './switches.scss';
|
@import './colourpickers.scss';
|
||||||
|
@import './keybinds.scss';
|
||||||
@import './arrays.scss';
|
@import './arrays.scss';
|
||||||
@import './colourpicker.scss';
|
|
||||||
|
|
|
@ -0,0 +1,52 @@
|
||||||
|
.bd-keybind {
|
||||||
|
padding: 10px;
|
||||||
|
display: flex;
|
||||||
|
// width: 180px;
|
||||||
|
margin-top: 10px;
|
||||||
|
background-color: rgba(0,0,0,.1);
|
||||||
|
border: 1px solid rgba(0,0,0,.3);
|
||||||
|
transition: border .15s ease;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 40px;
|
||||||
|
|
||||||
|
.bd-keybind-selected {
|
||||||
|
flex: 1 1 auto;
|
||||||
|
color: #f6f6f7;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bd-keybind-unset {
|
||||||
|
.bd-keybind-selected {
|
||||||
|
color: hsla(240,6%,97%,.3);
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bd-button {
|
||||||
|
border-radius: 2px;
|
||||||
|
margin: -4px -4px -4px 10px;
|
||||||
|
padding: 2px 20px;
|
||||||
|
transition: background-color .2s ease-in-out, color .2s ease-in-out;
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 500;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.bd-active {
|
||||||
|
border-color: $colerr;
|
||||||
|
animation: bd-keybind-pulse 1s infinite;
|
||||||
|
|
||||||
|
.bd-button {
|
||||||
|
color: $colerr;
|
||||||
|
background-color: rgba($colerr, .3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes bd-keybind-pulse {
|
||||||
|
0% { box-shadow: 0 0 6px rgba(240,71,71,.3) }
|
||||||
|
50% { box-shadow: 0 0 10px rgba(240,71,71,.6) }
|
||||||
|
100% { box-shadow: 0 0 6px rgba(240,71,71,.3) }
|
||||||
|
}
|
|
@ -1,12 +1,13 @@
|
||||||
|
.bd-setting-switch,
|
||||||
.bd-form-textinput,
|
.bd-form-textinput,
|
||||||
.bd-form-textarea,
|
.bd-form-textarea,
|
||||||
.bd-form-fileinput,
|
.bd-form-numberinput,
|
||||||
.bd-form-dropdown,
|
.bd-form-dropdown,
|
||||||
.bd-form-radio,
|
.bd-form-radio,
|
||||||
.bd-form-numberinput,
|
|
||||||
.bd-form-slider,
|
.bd-form-slider,
|
||||||
.bd-form-colourpicker,
|
.bd-form-colourpicker,
|
||||||
.bd-setting-switch,
|
.bd-form-keybind,
|
||||||
|
.bd-form-fileinput,
|
||||||
.bd-form-settingsarray {
|
.bd-form-settingsarray {
|
||||||
.bd-title {
|
.bd-title {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
@ -0,0 +1,78 @@
|
||||||
|
/**
|
||||||
|
* BetterDiscord Setting Keybind Component
|
||||||
|
* Copyright (c) 2015-present Jiiks/JsSucks - https://github.com/Jiiks / https://github.com/JsSucks
|
||||||
|
* All rights reserved.
|
||||||
|
* https://betterdiscord.net
|
||||||
|
*
|
||||||
|
* This source code is licensed under the MIT license found in the
|
||||||
|
* LICENSE file in the root directory of this source tree.
|
||||||
|
*/
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="bd-form-keybind">
|
||||||
|
<div class="bd-form-keybind-details">
|
||||||
|
<div class="bd-title">
|
||||||
|
<h3>{{ setting.text }}</h3>
|
||||||
|
</div>
|
||||||
|
<div class="bd-hint">{{ setting.hint }}</div>
|
||||||
|
</div>
|
||||||
|
<div class="bd-keybind" :class="{'bd-active': active, 'bd-disabled': setting.disabled, 'bd-keybind-unset': !setting.value}">
|
||||||
|
<div class="bd-keybind-selected">{{ selected || 'No Keybind Set' }}</div>
|
||||||
|
<button class="bd-button" v-tooltip="`Click to record a new keybind sequence${setting.value ? ' (shift + click to delete the sequence)' : ''}`" @click="$event.shiftKey ? deleteKeybind() : toggleActive(); $event.target.blur()">{{ active ? 'Stop Recording' : setting.value ? 'Edit Keybind' : 'Record Keybind' }}</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import { shell } from 'electron';
|
||||||
|
import { ClientIPC } from 'common';
|
||||||
|
import Combokeys from 'combokeys';
|
||||||
|
import CombokeysRecord from 'combokeys/plugins/record';
|
||||||
|
|
||||||
|
const combokeys = new Combokeys(document);
|
||||||
|
CombokeysRecord(combokeys);
|
||||||
|
|
||||||
|
const process = window.require('process');
|
||||||
|
const modifierKey = process.platform === 'darwin' ? 'meta' : 'ctrl';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
props: ['setting'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
active: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
selected() {
|
||||||
|
return this.getDisplayString(this.setting.value);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
active(active) {
|
||||||
|
if (active) combokeys.record(this.recorded);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toggleActive() {
|
||||||
|
if (this.setting.disabled) return;
|
||||||
|
this.active = !this.active;
|
||||||
|
},
|
||||||
|
deleteKeybind() {
|
||||||
|
this.setting.value = '';
|
||||||
|
},
|
||||||
|
recorded(sequence) {
|
||||||
|
if (!this.active) return;
|
||||||
|
this.active = false;
|
||||||
|
this.recordingValue = undefined;
|
||||||
|
this.setting.value = sequence.join(' ');
|
||||||
|
console.log('keypress', sequence);
|
||||||
|
},
|
||||||
|
getDisplayString(value) {
|
||||||
|
if (!value) return;
|
||||||
|
return value.split(' ').map(pattern => {
|
||||||
|
return pattern.toUpperCase().replace(/\+/g, ' + ').replace(/mod/gi, modifierKey).replace(/meta/gi, 'Cmd').replace(/ctrl/gi, 'Ctrl').replace(/alt/gi, 'Alt').replace(/shift/gi, 'Shift');
|
||||||
|
}).join(', ');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -10,17 +10,18 @@
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="bd-form-item" :class="{'bd-form-item-changed': setting.changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text, 'bd-form-item-fullwidth': setting.fullwidth}">
|
<div class="bd-form-item" :class="{'bd-form-item-changed': setting.changed, 'bd-disabled': disabled, 'bd-form-item-noheader': !setting.text, 'bd-form-item-fullwidth': setting.fullwidth}">
|
||||||
<BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change"/>
|
<BoolSetting v-if="setting.type === 'bool'" :setting="setting" :change="change" />
|
||||||
<DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change"/>
|
<DropdownSetting v-if="setting.type === 'dropdown'" :setting="setting" :change="change" />
|
||||||
<NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change"/>
|
<NumberSetting v-if="setting.type === 'number'" :setting="setting" :change="change" />
|
||||||
<RadioSetting v-if="setting.type === 'radio'" :setting="setting" :change="change"/>
|
<RadioSetting v-if="setting.type === 'radio'" :setting="setting" :change="change" />
|
||||||
<StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" :change="change"/>
|
<StringSetting v-if="setting.type === 'text' && !setting.multiline" :setting="setting" :change="change" />
|
||||||
<MultilineTextSetting v-if="setting.type === 'text' && setting.multiline" :setting="setting" :change="change"/>
|
<MultilineTextSetting v-if="setting.type === 'text' && setting.multiline" :setting="setting" />
|
||||||
<SliderSetting v-if="setting.type === 'slider'" :setting="setting" :change="change"/>
|
<SliderSetting v-if="setting.type === 'slider'" :setting="setting" :change="change" />
|
||||||
<FileSetting v-if="setting.type === 'file'" :setting="setting" :change="change"/>
|
<ColourSetting v-if="setting.type === 'colour'" :setting="setting" :change="change" />
|
||||||
|
<KeybindSetting v-if="setting.type === 'keybind'" :setting="setting" />
|
||||||
|
<FileSetting v-if="setting.type === 'file'" :setting="setting" :change="change" />
|
||||||
<ArraySetting v-if="setting.type === 'array'" :setting="setting" :change="change" />
|
<ArraySetting v-if="setting.type === 'array'" :setting="setting" :change="change" />
|
||||||
<CustomSetting v-if="setting.type === 'custom'" :setting="setting" :change="change" />
|
<CustomSetting v-if="setting.type === 'custom'" :setting="setting" :change="change" />
|
||||||
<ColourSetting v-if="setting.type === 'colour'" :setting="setting" :change="change"/>
|
|
||||||
<div class="bd-form-divider"></div>
|
<div class="bd-form-divider"></div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -33,10 +34,11 @@
|
||||||
import StringSetting from './String.vue';
|
import StringSetting from './String.vue';
|
||||||
import MultilineTextSetting from './Multiline.vue';
|
import MultilineTextSetting from './Multiline.vue';
|
||||||
import SliderSetting from './Slider.vue';
|
import SliderSetting from './Slider.vue';
|
||||||
|
import ColourSetting from './Colour.vue';
|
||||||
|
import KeybindSetting from './Keybind.vue';
|
||||||
import FileSetting from './File.vue';
|
import FileSetting from './File.vue';
|
||||||
import ArraySetting from './Array.vue';
|
import ArraySetting from './Array.vue';
|
||||||
import CustomSetting from './Custom.vue';
|
import CustomSetting from './Custom.vue';
|
||||||
import ColourSetting from './Colour.vue';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
props: [
|
props: [
|
||||||
|
@ -50,10 +52,11 @@
|
||||||
StringSetting,
|
StringSetting,
|
||||||
MultilineTextSetting,
|
MultilineTextSetting,
|
||||||
SliderSetting,
|
SliderSetting,
|
||||||
|
ColourSetting,
|
||||||
|
KeybindSetting,
|
||||||
FileSetting,
|
FileSetting,
|
||||||
ArraySetting,
|
ArraySetting,
|
||||||
CustomSetting,
|
CustomSetting
|
||||||
ColourSetting
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
changed() {
|
changed() {
|
||||||
|
|
|
@ -2032,6 +2032,12 @@
|
||||||
"delayed-stream": "1.0.0"
|
"delayed-stream": "1.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"combokeys": {
|
||||||
|
"version": "3.0.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/combokeys/-/combokeys-3.0.0.tgz",
|
||||||
|
"integrity": "sha1-lVxZo5Wa9A0mhGq2/DxoJEjnVy4=",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"commander": {
|
"commander": {
|
||||||
"version": "2.14.1",
|
"version": "2.14.1",
|
||||||
"resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
|
"resolved": "https://registry.npmjs.org/commander/-/commander-2.14.1.tgz",
|
||||||
|
|
|
@ -22,6 +22,7 @@
|
||||||
"babel-preset-es2015": "^6.24.1",
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"babel-preset-react": "^6.24.1",
|
"babel-preset-react": "^6.24.1",
|
||||||
"codemirror": "^5.23.0",
|
"codemirror": "^5.23.0",
|
||||||
|
"combokeys": "^3.0.0",
|
||||||
"css-loader": "^0.28.9",
|
"css-loader": "^0.28.9",
|
||||||
"electron": "^1.6.15",
|
"electron": "^1.6.15",
|
||||||
"electron-rebuild": "^1.7.3",
|
"electron-rebuild": "^1.7.3",
|
||||||
|
|
|
@ -77,6 +77,13 @@
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"id": "keybind-1",
|
||||||
|
"type": "keybind",
|
||||||
|
"value": "mod+.",
|
||||||
|
"text": "Test Keybind Setting 1",
|
||||||
|
"hint": "Test Keybind Setting Hint 1"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,6 +7,14 @@ module.exports = (Plugin, { Logger, Settings, BdMenu: { BdMenuItems }, Api }) =>
|
||||||
arraySetting.on('item-updated', event => Logger.log('Item', event.item, 'of the array setting was updated', event));
|
arraySetting.on('item-updated', event => Logger.log('Item', event.item, 'of the array setting was updated', event));
|
||||||
arraySetting.on('item-removed', event => Logger.log('Item', event.item, 'removed from the array setting'));
|
arraySetting.on('item-removed', event => Logger.log('Item', event.item, 'removed from the array setting'));
|
||||||
|
|
||||||
|
// Keybind setting examples
|
||||||
|
const keybindSetting = this.settings.getSetting('default', 'keybind-1');
|
||||||
|
Logger.log('Keybind setting', keybindSetting);
|
||||||
|
keybindSetting.on('keybind-activated', event => {
|
||||||
|
Logger.log('Keybind pressed', event);
|
||||||
|
Modals.basic('Example Plugin 4', 'Test keybind activated.');
|
||||||
|
});
|
||||||
|
|
||||||
// Create a new settings set and add it to the menu
|
// Create a new settings set and add it to the menu
|
||||||
const set = Settings.createSet({
|
const set = Settings.createSet({
|
||||||
text: this.name
|
text: this.name
|
||||||
|
|
Loading…
Reference in New Issue