2021-01-31 02:43:13 +13:00
< template >
< div id = "q-app" >
2021-02-26 14:50:46 +13:00
< appWindowButtons / >
2021-01-31 02:43:13 +13:00
< router -view / >
< / div >
< / template >
< script lang = "ts" >
import BaseClass from "src/BaseClass"
2021-03-18 10:26:08 +13:00
import { Component , Watch } from "vue-property-decorator"
2021-02-26 14:50:46 +13:00
import { defaultKeybinds } from "src/scripts/appSettings/defaultKeybinds"
import appWindowButtons from "src/components/appHeader/AppWindowButtons.vue"
2021-03-18 10:26:08 +13:00
import PouchDB from "pouchdb"
import { OptionsStateInteface } from "./store/module-options/state"
import { colors } from "quasar"
2021-03-21 07:13:46 +13:00
import { tipsTricks } from "src/scripts/utilities/tipsTricks"
2021-03-22 05:06:38 +13:00
import { shell } from "electron"
2021-04-11 13:40:03 +12:00
import { summonAllPlusheForms } from "src/scripts/utilities/plusheMascot"
2021-02-26 14:50:46 +13:00
@ Component ( {
components : {
appWindowButtons : appWindowButtons
}
} )
2021-01-31 02:43:13 +13:00
export default class App extends BaseClass {
2021-04-06 01:28:33 +12:00
/****************************************************************/
// APP START & END SETUP
/****************************************************************/
2021-02-23 11:30:18 +13:00
created ( ) {
2021-04-06 01:28:33 +12:00
// Catch middle clicks
2021-02-23 11:30:18 +13:00
window . addEventListener ( "auxclick" , this . reactToMiddleClick )
2021-04-06 01:28:33 +12:00
// Add a secondary blocker to prevent the middle-mouse button scrolling
2021-02-23 11:30:18 +13:00
document . body . onmousedown = function ( e ) {
if ( e . button === 1 ) {
e . preventDefault ( )
return false
}
}
2021-04-06 01:28:33 +12:00
// Catch normal clicks inside wysiwyg
window . addEventListener ( "click" , this . openWysiwygLink )
// Load settings
2021-03-18 10:26:08 +13:00
this . loadSettings ( ) . catch ( e => console . log ( e ) )
2021-04-06 01:28:33 +12:00
// React to keybind presses
2021-03-08 11:07:40 +13:00
window . addEventListener ( "keydown" , this . triggerKeyPush )
2021-04-06 01:28:33 +12:00
// Load the popup hint on start
2021-03-21 07:13:46 +13:00
this . loadHintPopup ( )
}
2021-04-06 01:28:33 +12:00
destroyed ( ) {
window . removeEventListener ( "auxclick" , this . reactToMiddleClick )
this . deregisterCustomKeybinds ( )
this . deregisterDefaultKeybinds ( )
window . removeEventListener ( "keydown" , this . triggerKeyPush )
2021-03-22 05:06:38 +13:00
}
2021-04-06 01:28:33 +12:00
/****************************************************************/
// START NOTIFICATION
/****************************************************************/
2021-03-21 07:13:46 +13:00
2021-04-06 01:28:33 +12:00
/ * *
* Model for the startup notification
* /
2021-03-21 13:55:17 +13:00
starupNotif = null as any
2021-04-06 01:28:33 +12:00
/ * *
* Notification checker
* Can go up to 3
* /
popupCheck = 0
/ * *
* Show the actual popup
* /
2021-03-21 07:13:46 +13:00
loadHintPopup ( ) {
const options = this . SGET _options
// Considering there is a bit of a delay between the initial load of the store DB content, we give the program 3 attempts to load the data over 3 seconds. If no is loaded in that time, we assume that the settings are not set at all and display the hint as normal.
if ( ( ! options . _id || ! options . _rev ) && this . popupCheck < 3 ) {
setTimeout ( ( ) => {
this . popupCheck ++
this . loadHintPopup ( )
} , 1000 )
return
}
if ( options . hideTooltipsStart ) {
return
}
const messageToShow = tipsTricks [ Math . floor ( Math . random ( ) * tipsTricks . length ) ]
2021-04-11 13:40:03 +12:00
const plusheForm = summonAllPlusheForms [ Math . floor ( Math . random ( ) * summonAllPlusheForms . length ) ]
2021-03-21 13:55:17 +13:00
this . starupNotif = this . $q . notify ( {
2021-04-11 13:40:03 +12:00
2021-03-21 07:13:46 +13:00
timeout : 15000 ,
2021-04-11 13:40:03 +12:00
icon : ( this . hidePlushes ) ? "mdi-help" : undefined ,
color : "info" ,
2021-03-21 07:13:46 +13:00
message : "Did you know?" ,
2021-04-11 13:40:03 +12:00
avatar : ( ! this . hidePlushes ) ? plusheForm : undefined ,
2021-03-21 07:13:46 +13:00
caption : messageToShow ,
actions : [ { icon : "mdi-close" , color : "white" } ]
} )
2021-02-26 14:50:46 +13:00
}
2021-04-06 01:28:33 +12:00
/ * *
* Hide the startup notification if the user changed the route before it disappeared
* /
2021-03-21 13:55:17 +13:00
@ Watch ( "$route" , { deep : true } )
onUrlChange ( ) {
2021-03-22 05:06:38 +13:00
if ( typeof this . starupNotif === "function" ) {
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
this . starupNotif ( )
}
2021-03-21 13:55:17 +13:00
}
2021-04-06 01:28:33 +12:00
/****************************************************************/
// KEYBIND HANDLING
/****************************************************************/
/ * *
* React to keybind combinations being pushed and submit them to the store
* /
2021-02-26 14:50:46 +13:00
triggerKeyPush ( e : any ) {
2021-03-08 11:07:40 +13:00
// console.log("")
// console.log(`Key: ${e.key}`)
// console.log(`Ctrl: ${e.ctrlKey}`)
// console.log(`Shift: ${e.shiftKey}`)
// console.log(`Alt: ${e.altKey}`)
// console.log(e)
2021-02-26 14:50:46 +13:00
if ( e ? . altKey === true || e ? . ctrlKey || e ? . shiftKey ) {
const ouputKeycombo = {
altKey : e . altKey ,
ctrlKey : e . ctrlKey ,
shiftKey : e . shiftKey ,
2021-03-18 10:26:08 +13:00
which : e . which
2021-02-26 14:50:46 +13:00
}
this . SSET _updatePressedKey ( ouputKeycombo )
}
2021-02-23 11:30:18 +13:00
}
2021-04-06 01:28:33 +12:00
/ * *
* Registers a default keybind into the store
* /
2021-02-23 11:30:18 +13:00
registerDefaultKeybinds ( ) {
2021-04-10 12:36:36 +12:00
// @ts-ignore
2021-02-23 11:30:18 +13:00
defaultKeybinds . forEach ( e => this . SSET _registerDefaultKeybind ( e ) )
}
2021-01-31 02:43:13 +13:00
2021-04-06 01:28:33 +12:00
/ * *
* Removes a default keybind from the store
* /
2021-02-23 11:30:18 +13:00
deregisterDefaultKeybinds ( ) {
2021-04-10 12:36:36 +12:00
// @ts-ignore
2021-02-23 11:30:18 +13:00
defaultKeybinds . forEach ( e => this . SSET _deregisterDefaultKeybind ( e ) )
}
2021-03-18 10:26:08 +13:00
2021-04-06 01:28:33 +12:00
/ * *
* Registers a custom keybind into the store
* /
2021-03-18 10:26:08 +13:00
registerCustomKeybinds ( ) {
setTimeout ( ( ) => {
this . SGET _options . userKeybindList . forEach ( e => this . SSET _registerUserKeybind ( e ) )
} , 1000 )
}
2021-04-06 01:28:33 +12:00
/ * *
* Removes a custom keybind from the store
* /
2021-03-18 10:26:08 +13:00
deregisterCustomKeybinds ( ) {
2021-04-10 12:36:36 +12:00
// @ts-ignore
2021-03-18 10:26:08 +13:00
defaultKeybinds . forEach ( e => this . SSET _deregisterUserKeybind ( e ) )
}
2021-04-06 01:28:33 +12:00
/****************************************************************/
// VARIOUS APP FUNCTIONALITY
/****************************************************************/
/ * *
* Open wysiwyg links in default browser window
* /
openWysiwygLink ( event : MouseEvent ) {
// @ts-ignore
// eslint-disable-next-line @typescript-eslint/no-unsafe-call
if ( event . target && event . target . tagName . toLowerCase ( ) === "a" && event . target . closest ( ".fieldWysiwyg" ) ) {
// @ts-ignore
shell . openExternal ( event . target . href ) . catch ( e => console . log ( e ) )
}
}
/ * *
* React to middle mouse button clicks
* /
reactToMiddleClick ( e : { button : number , preventDefault : ( ) => void } ) {
if ( e . button === 1 ) {
e . preventDefault ( )
return false
}
}
/ * *
* Load settings for the first time upon app load
* /
2021-03-18 10:26:08 +13:00
async loadSettings ( ) {
const SettingsDB = new PouchDB ( "fa-settings" )
const settingsData = await SettingsDB . allDocs ( { include _docs : true } )
const settings = settingsData ? . rows [ 0 ] ? . doc as unknown as OptionsStateInteface
if ( settings ) {
this . SSET _options ( settings )
}
this . registerDefaultKeybinds ( )
this . registerCustomKeybinds ( )
2021-04-06 01:28:33 +12:00
await SettingsDB . close ( )
2021-03-18 10:26:08 +13:00
}
2021-04-06 01:28:33 +12:00
/ * *
* Update dark / light mode across the app based on what is currently in the store
* /
2021-03-18 10:26:08 +13:00
@ Watch ( "SGET_options" , { deep : true } )
onSettingsChange ( ) {
const options = this . SGET _options
2021-04-11 13:40:03 +12:00
this . hidePlushes = options . hidePlushes
2021-03-18 10:26:08 +13:00
this . $q . dark . set ( options . darkMode )
if ( options . darkMode ) {
colors . setBrand ( "dark" , "#1b333e" )
colors . setBrand ( "primary" , "#ffd673" )
}
else {
colors . setBrand ( "dark" , "#18303a" )
2021-03-21 07:13:46 +13:00
colors . setBrand ( "primary" , "#e8bb50" )
2021-03-18 10:26:08 +13:00
}
}
2021-04-11 13:40:03 +12:00
/ * *
* Hides the mascot ... nooo : (
* /
hidePlushes = false
2021-01-31 02:43:13 +13:00
}
< / script >