Keyboard shortcuts disable-able
This commit is contained in:
Dennis
@@ -12,7 +12,8 @@ class ProfileSettingController extends Controller
|
||||
{
|
||||
return inertia('Profile/Settings', [
|
||||
'profile' => [
|
||||
'theme' => auth()->user()->theme
|
||||
'theme' => auth()->user()->theme,
|
||||
'keyboard_shortcuts' => auth()->user()->keyboard_shortcuts,
|
||||
]
|
||||
]);
|
||||
}
|
||||
@@ -27,7 +28,10 @@ class ProfileSettingController extends Controller
|
||||
]
|
||||
]);
|
||||
|
||||
$request->user()->update(['theme' => $request->input('theme')]);
|
||||
$request->user()->update([
|
||||
'theme' => $request->input('theme'),
|
||||
'keyboard_shortcuts' => $request->input('keyboard_shortcuts', true),
|
||||
]);
|
||||
|
||||
return redirect()->route('profile.settings.index')->with('success', __('Instellingen zijn aangepast'));
|
||||
}
|
||||
|
||||
@@ -57,6 +57,7 @@ class HandleInertiaRequests extends Middleware
|
||||
'user_name' => Auth::user()->user_name,
|
||||
'avatar' => Auth::user()->getGravatar(),
|
||||
'theme' => Auth::user()->theme,
|
||||
'keyboard_shortcuts' => Auth::user()->keyboard_shortcuts,
|
||||
] : null,
|
||||
'package' => auth()->user() && auth()->user()->package ? [
|
||||
'name' => auth()->user()->package->name,
|
||||
|
||||
@@ -31,7 +31,8 @@ class User extends Authenticatable implements HasLocalePreference
|
||||
'notes',
|
||||
'language',
|
||||
'blocked',
|
||||
'theme'
|
||||
'theme',
|
||||
'keyboard_shortcuts'
|
||||
];
|
||||
|
||||
protected $hidden = [
|
||||
@@ -43,6 +44,7 @@ class User extends Authenticatable implements HasLocalePreference
|
||||
protected $casts = [
|
||||
'email_verified_at' => 'datetime',
|
||||
'ftp_password' => Encrypted::class,
|
||||
'keyboard_shortcuts' => 'boolean'
|
||||
];
|
||||
|
||||
protected $appends = [
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
<?php
|
||||
|
||||
use Illuminate\Database\Migrations\Migration;
|
||||
use Illuminate\Database\Schema\Blueprint;
|
||||
use Illuminate\Support\Facades\Schema;
|
||||
|
||||
class AddKeyboardShortcutsToUsersTable extends Migration
|
||||
{
|
||||
/**
|
||||
* Run the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function up()
|
||||
{
|
||||
Schema::table('users', function (Blueprint $table) {
|
||||
$table->boolean('keyboard_shortcuts')->default(true)->after('blocked');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Reverse the migrations.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function down()
|
||||
{
|
||||
Schema::table('users', function (Blueprint $table) {
|
||||
$table->dropColumn('keyboard_shortcuts');
|
||||
});
|
||||
}
|
||||
}
|
||||
16
public/js/1.js
vendored
16
public/js/1.js
vendored
@@ -484,14 +484,16 @@ __webpack_require__.r(__webpack_exports__);
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.key === 'c') {
|
||||
this.$inertia.visit(this.route('sites.index', {
|
||||
create: true
|
||||
}));
|
||||
}
|
||||
if (this.$page.props.auth.user.keyboard_shortcuts) {
|
||||
if (event.key === 'c') {
|
||||
this.$inertia.visit(this.route('sites.index', {
|
||||
create: true
|
||||
}));
|
||||
}
|
||||
|
||||
if (event.key === 'p') {
|
||||
this.$inertia.visit(this.route('profile.index'));
|
||||
if (event.key === 'p') {
|
||||
this.$inertia.visit(this.route('profile.index'));
|
||||
}
|
||||
}
|
||||
},
|
||||
openSearch: function openSearch() {
|
||||
|
||||
85
public/js/45.js
vendored
85
public/js/45.js
vendored
@@ -54,6 +54,15 @@ __webpack_require__.r(__webpack_exports__);
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
//
|
||||
|
||||
|
||||
|
||||
@@ -110,7 +119,8 @@ __webpack_require__.r(__webpack_exports__);
|
||||
data: function data() {
|
||||
return {
|
||||
form: {
|
||||
theme: this.profile.theme
|
||||
theme: this.profile.theme,
|
||||
keyboard_shortcuts: this.profile.keyboard_shortcuts
|
||||
},
|
||||
breadcrumbs: [{
|
||||
title: this.$page.props.settings.name,
|
||||
@@ -374,6 +384,79 @@ var render = function() {
|
||||
]
|
||||
),
|
||||
_vm._v(" "),
|
||||
_c("div", [
|
||||
_c("input", {
|
||||
directives: [
|
||||
{
|
||||
name: "model",
|
||||
rawName: "v-model",
|
||||
value: _vm.form.keyboard_shortcuts,
|
||||
expression: "form.keyboard_shortcuts"
|
||||
}
|
||||
],
|
||||
staticClass: "form-checkbox",
|
||||
attrs: { id: "keyboard_shortcuts", type: "checkbox" },
|
||||
domProps: {
|
||||
checked: Array.isArray(_vm.form.keyboard_shortcuts)
|
||||
? _vm._i(_vm.form.keyboard_shortcuts, null) > -1
|
||||
: _vm.form.keyboard_shortcuts
|
||||
},
|
||||
on: {
|
||||
change: function($event) {
|
||||
var $$a = _vm.form.keyboard_shortcuts,
|
||||
$$el = $event.target,
|
||||
$$c = $$el.checked ? true : false
|
||||
if (Array.isArray($$a)) {
|
||||
var $$v = null,
|
||||
$$i = _vm._i($$a, $$v)
|
||||
if ($$el.checked) {
|
||||
$$i < 0 &&
|
||||
_vm.$set(
|
||||
_vm.form,
|
||||
"keyboard_shortcuts",
|
||||
$$a.concat([$$v])
|
||||
)
|
||||
} else {
|
||||
$$i > -1 &&
|
||||
_vm.$set(
|
||||
_vm.form,
|
||||
"keyboard_shortcuts",
|
||||
$$a.slice(0, $$i).concat($$a.slice($$i + 1))
|
||||
)
|
||||
}
|
||||
} else {
|
||||
_vm.$set(_vm.form, "keyboard_shortcuts", $$c)
|
||||
}
|
||||
}
|
||||
}
|
||||
}),
|
||||
_vm._v(" "),
|
||||
_c(
|
||||
"label",
|
||||
{
|
||||
staticClass: "ml-2 text-sm",
|
||||
attrs: { for: "keyboard_shortcuts" }
|
||||
},
|
||||
[_vm._v(_vm._s(_vm.__("Enable keyboard shortcuts")))]
|
||||
),
|
||||
_vm._v(" "),
|
||||
_c(
|
||||
"p",
|
||||
{ staticClass: "text-small mt-1 text-medium-emphasis" },
|
||||
[
|
||||
_vm._v(
|
||||
"\n " +
|
||||
_vm._s(
|
||||
_vm.__(
|
||||
'This will allow you to do keyboard shortcuts for navigation, which is visible when you press "/"'
|
||||
)
|
||||
) +
|
||||
"\n "
|
||||
)
|
||||
]
|
||||
)
|
||||
]),
|
||||
_vm._v(" "),
|
||||
_c(
|
||||
"FormActions",
|
||||
[_c("Button", [_vm._v(_vm._s(_vm.__("Save changes")))])],
|
||||
|
||||
2
public/js/app.js
vendored
2
public/js/app.js
vendored
@@ -43,7 +43,7 @@
|
||||
/******/
|
||||
/******/ // script path function
|
||||
/******/ function jsonpScriptSrc(chunkId) {
|
||||
/******/ return __webpack_require__.p + "js/" + ({}[chunkId]||chunkId) + ".js?id=" + {"0":"9dbb021f6384d3c23306","1":"398b5450bb0ff7f955da","2":"d2a49802291d427ca7c8","3":"a0f4c2f49863abbfe7f1","4":"27416beeac7dd90b6c9f","5":"fbfbcf45610d060d921e","6":"73fc0264b5cc06f5bd55","7":"140acb8c38018bb7c822","8":"e835283042c657d72cfa","9":"e38040143ab4cb3b9fef","10":"e217ea28c7893da97d0e","11":"ef2595fcf3dd3fef8e64","12":"b96242d4ce01132cb92f","13":"3dcdef58d7cfcb427534","14":"f9a657f13956ab04d9f5","15":"6eeef8da00ef7dc93e05","16":"8a379b56eb36d181e9f4","17":"4acf5c704242d5b434e3","18":"3499890b69bdb9f9d169","19":"4c910b7e5f24c14a47d6","20":"29f8c25bbce6335091c4","21":"1b6ec740e3e0fa870c13","22":"78d7d7baea9c4ec014eb","23":"dadc044a01aadc33169c","24":"1a81948d78f13001b9c4","25":"0b89439971fa15be86f4","26":"249b37045d01be95c68f","27":"4299d48de82aac06ac31","28":"31d1e12727c7d58e40de","29":"37242422acd72921f7be","30":"b5a3755fc751b2ee4bf1","31":"1bd1de5de0862302373b","32":"d87a727897ca5e5059c2","33":"c1f34ce71b4bf0a3b899","34":"ba4f3196c8153feacca8","35":"de3e658a55e7e8117bae","36":"a6fafbe7d4dfe3b1655f","37":"e393acb4ab9639679624","38":"72559d87b50c668aa19d","39":"1b8bdd0af0b88473f48a","40":"540bf40dd5ad8d9ec7f3","41":"a03f2d732b438beccfc1","42":"afe142c54eae565ba42e","43":"03efabc61d9c91c12d1b","44":"6949e4deaa455907016f","45":"c13926ac67a0cf89251e","46":"166a4198a1369a6bb86a","47":"3c4c97fe715c97ad863d","48":"b9fffb646becc49bdab2","49":"1ec3a79cb6bc0e34858b","50":"6fa0be27e82f0aa17306","51":"c18695d9f8bd823b916b","52":"22fc8b2d90e12bd3f5eb","53":"327b50ce903b0f348341","54":"cb30fead7b74df252e66","55":"0953446db22303519e08","56":"6bc136b4c9a35e9a1836","57":"3f7b6082e37f0f114055","58":"a1668de9111dbf09572b","59":"b6ab5d03b46b7ae139a7","60":"bf011565ef2a862673be","61":"1443728c4244b6b3effa","62":"ddf0cb09136d61479c45","63":"fc1ce56148d40705df67","64":"000e69f8fb11c501e503","65":"c40d3bc7ae4294705195","66":"54405ebd171bf0a0be8a","67":"9eb8259c212d00564353","68":"47e5da1f84b24bfeab25","69":"6258b9920cf545ad6043","70":"cf0dc959ae07c017ed3e","71":"a82af2a3c60b498c6b10","72":"adda6ceb50c78f5aae68","73":"1cf0d939a3f69325b6c1","74":"cf1ca882da11e35bea7c","75":"7e7c004989bdfef01a71"}[chunkId] + ""
|
||||
/******/ return __webpack_require__.p + "js/" + ({}[chunkId]||chunkId) + ".js?id=" + {"0":"9dbb021f6384d3c23306","1":"036bc93ad1cffe03c96e","2":"d2a49802291d427ca7c8","3":"a0f4c2f49863abbfe7f1","4":"27416beeac7dd90b6c9f","5":"fbfbcf45610d060d921e","6":"73fc0264b5cc06f5bd55","7":"140acb8c38018bb7c822","8":"e835283042c657d72cfa","9":"e38040143ab4cb3b9fef","10":"e217ea28c7893da97d0e","11":"ef2595fcf3dd3fef8e64","12":"b96242d4ce01132cb92f","13":"3dcdef58d7cfcb427534","14":"f9a657f13956ab04d9f5","15":"6eeef8da00ef7dc93e05","16":"8a379b56eb36d181e9f4","17":"4acf5c704242d5b434e3","18":"3499890b69bdb9f9d169","19":"4c910b7e5f24c14a47d6","20":"29f8c25bbce6335091c4","21":"1b6ec740e3e0fa870c13","22":"78d7d7baea9c4ec014eb","23":"dadc044a01aadc33169c","24":"1a81948d78f13001b9c4","25":"0b89439971fa15be86f4","26":"249b37045d01be95c68f","27":"4299d48de82aac06ac31","28":"31d1e12727c7d58e40de","29":"37242422acd72921f7be","30":"b5a3755fc751b2ee4bf1","31":"1bd1de5de0862302373b","32":"d87a727897ca5e5059c2","33":"c1f34ce71b4bf0a3b899","34":"ba4f3196c8153feacca8","35":"de3e658a55e7e8117bae","36":"a6fafbe7d4dfe3b1655f","37":"e393acb4ab9639679624","38":"72559d87b50c668aa19d","39":"1b8bdd0af0b88473f48a","40":"540bf40dd5ad8d9ec7f3","41":"a03f2d732b438beccfc1","42":"afe142c54eae565ba42e","43":"03efabc61d9c91c12d1b","44":"6949e4deaa455907016f","45":"e9078e89f79cb47e3225","46":"166a4198a1369a6bb86a","47":"3c4c97fe715c97ad863d","48":"b9fffb646becc49bdab2","49":"1ec3a79cb6bc0e34858b","50":"6fa0be27e82f0aa17306","51":"c18695d9f8bd823b916b","52":"22fc8b2d90e12bd3f5eb","53":"327b50ce903b0f348341","54":"cb30fead7b74df252e66","55":"0953446db22303519e08","56":"6bc136b4c9a35e9a1836","57":"3f7b6082e37f0f114055","58":"a1668de9111dbf09572b","59":"b6ab5d03b46b7ae139a7","60":"bf011565ef2a862673be","61":"1443728c4244b6b3effa","62":"ddf0cb09136d61479c45","63":"fc1ce56148d40705df67","64":"000e69f8fb11c501e503","65":"c40d3bc7ae4294705195","66":"54405ebd171bf0a0be8a","67":"9eb8259c212d00564353","68":"47e5da1f84b24bfeab25","69":"6258b9920cf545ad6043","70":"cf0dc959ae07c017ed3e","71":"a82af2a3c60b498c6b10","72":"adda6ceb50c78f5aae68","73":"1cf0d939a3f69325b6c1","74":"cf1ca882da11e35bea7c","75":"7e7c004989bdfef01a71"}[chunkId] + ""
|
||||
/******/ }
|
||||
/******/
|
||||
/******/ // The require function
|
||||
|
||||
@@ -12,6 +12,15 @@
|
||||
<option value="auto">{{ __('Auto') }}</option>
|
||||
</FormSelect>
|
||||
|
||||
<div>
|
||||
<input id="keyboard_shortcuts" class="form-checkbox" type="checkbox"
|
||||
v-model="form.keyboard_shortcuts">
|
||||
<label for="keyboard_shortcuts" class="ml-2 text-sm">{{ __('Enable keyboard shortcuts') }}</label>
|
||||
<p class="text-small mt-1 text-medium-emphasis">
|
||||
{{ __('This will allow you to do keyboard shortcuts for navigation, which is visible when you press "/"') }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FormActions>
|
||||
<Button>{{ __('Save changes') }}</Button>
|
||||
</FormActions>
|
||||
@@ -85,6 +94,7 @@
|
||||
return {
|
||||
form: {
|
||||
theme: this.profile.theme,
|
||||
keyboard_shortcuts: this.profile.keyboard_shortcuts
|
||||
},
|
||||
|
||||
breadcrumbs: [
|
||||
|
||||
@@ -51,92 +51,93 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchOpen: false,
|
||||
search: '',
|
||||
results: [],
|
||||
timeout: null,
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
searchOpen: false,
|
||||
search: '',
|
||||
results: [],
|
||||
timeout: null,
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isSearching() {
|
||||
return this.search.trim() !== ''
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
search: function (value) {
|
||||
this.results = null;
|
||||
this.loading = true;
|
||||
|
||||
this.getResults();
|
||||
|
||||
this.arrowNavigation = {
|
||||
identifier: null,
|
||||
index: -1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isSearching() {
|
||||
return this.search.trim() !== ''
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
search: function (value) {
|
||||
this.results = null;
|
||||
this.loading = true;
|
||||
mounted() {
|
||||
document.addEventListener('keydown', this.handleKeydown);
|
||||
|
||||
this.getResults();
|
||||
window.eventBus.$on('openSearch', () => {
|
||||
this.openSearch();
|
||||
});
|
||||
},
|
||||
|
||||
this.arrowNavigation = {
|
||||
identifier: null,
|
||||
index: -1
|
||||
}
|
||||
},
|
||||
},
|
||||
destroyed() {
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
document.addEventListener('keydown', this.handleKeydown);
|
||||
|
||||
window.eventBus.$on('openSearch', () => {
|
||||
this.openSearch();
|
||||
});
|
||||
},
|
||||
|
||||
destroyed() {
|
||||
methods: {
|
||||
getResults() {
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
if (!this.search) {
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
|
||||
this.results = null;
|
||||
|
||||
window.axios.get(this.route('search', {query: this.search}).url())
|
||||
.then((response) => {
|
||||
this.loading = false;
|
||||
this.totalResults = response.data.total;
|
||||
|
||||
if (!response.data.total) {
|
||||
this.results = null;
|
||||
} else {
|
||||
this.results = response.data.results;
|
||||
}
|
||||
})
|
||||
}, 300);
|
||||
},
|
||||
|
||||
methods: {
|
||||
getResults() {
|
||||
if (this.timeout) clearTimeout(this.timeout);
|
||||
this.timeout = setTimeout(() => {
|
||||
if (!this.search) {
|
||||
this.loading = false;
|
||||
return;
|
||||
}
|
||||
handleKeydown(event) {
|
||||
if (this.isNotInputElement(event) && event.keyCode === 191) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
this.results = null;
|
||||
this.openSearch();
|
||||
}
|
||||
|
||||
window.axios.get(this.route('search', {query: this.search}).url())
|
||||
.then((response) => {
|
||||
this.loading = false;
|
||||
this.totalResults = response.data.total;
|
||||
if (event.keyCode === 27) {
|
||||
this.closeSearch();
|
||||
}
|
||||
|
||||
if (!response.data.total) {
|
||||
this.results = null;
|
||||
} else {
|
||||
this.results = response.data.results;
|
||||
}
|
||||
})
|
||||
}, 300);
|
||||
},
|
||||
if (!this.isNotInputElement(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
handleKeydown(event) {
|
||||
if (this.isNotInputElement(event) && event.keyCode === 191) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
|
||||
this.openSearch();
|
||||
}
|
||||
|
||||
if (event.keyCode === 27) {
|
||||
this.closeSearch();
|
||||
}
|
||||
|
||||
if (!this.isNotInputElement(event)) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
return;
|
||||
}
|
||||
if (event.ctrlKey || event.metaKey) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (this.$page.props.auth.user.keyboard_shortcuts) {
|
||||
if (event.key === 'c') {
|
||||
this.$inertia.visit(this.route('sites.index', {create: true}));
|
||||
}
|
||||
@@ -144,38 +145,39 @@
|
||||
if (event.key === 'p') {
|
||||
this.$inertia.visit(this.route('profile.index'));
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
|
||||
openSearch() {
|
||||
// Enable search focus
|
||||
this.searchOpen = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.search) {
|
||||
this.$refs.search.focus();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
closeSearch() {
|
||||
this.search = '';
|
||||
this.searchOpen = false;
|
||||
|
||||
// Remove search focus
|
||||
openSearch() {
|
||||
// Enable search focus
|
||||
this.searchOpen = true;
|
||||
this.$nextTick(() => {
|
||||
if (this.$refs.search) {
|
||||
this.$refs.search.blur();
|
||||
this.$refs.search.focus();
|
||||
}
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
isNotInputElement(event) {
|
||||
const tagName = event.target.tagName
|
||||
closeSearch() {
|
||||
this.search = '';
|
||||
this.searchOpen = false;
|
||||
|
||||
return Boolean(
|
||||
tagName !== 'INPUT' &&
|
||||
tagName !== 'TEXTAREA' &&
|
||||
event.target.id !== 'code-editor' &&
|
||||
!event.target.classList.contains('form-textarea')
|
||||
)
|
||||
},
|
||||
}
|
||||
// Remove search focus
|
||||
if (this.$refs.search) {
|
||||
this.$refs.search.blur();
|
||||
}
|
||||
},
|
||||
|
||||
isNotInputElement(event) {
|
||||
const tagName = event.target.tagName
|
||||
|
||||
return Boolean(
|
||||
tagName !== 'INPUT' &&
|
||||
tagName !== 'TEXTAREA' &&
|
||||
event.target.id !== 'code-editor' &&
|
||||
!event.target.classList.contains('form-textarea')
|
||||
)
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user