516 lines
12 KiB
JavaScript
516 lines
12 KiB
JavaScript
import Localization from '@/mixins/Localization'
|
|
import { setupAxios } from '@/util/axios'
|
|
import { setupNumbro } from '@/util/numbro'
|
|
import { setupInertia } from '@/util/inertia'
|
|
import url from '@/util/url'
|
|
import { createInertiaApp, Head, Link } from '@inertiajs/inertia-vue3'
|
|
import { Inertia } from '@inertiajs/inertia'
|
|
import NProgress from 'nprogress'
|
|
import { registerViews } from './components'
|
|
import { registerFields } from './fields'
|
|
import Mousetrap from 'mousetrap'
|
|
import Form from 'form-backend-validation'
|
|
import { createNovaStore } from './store'
|
|
import resourceStore from './store/resources'
|
|
import FloatingVue from 'floating-vue'
|
|
import find from 'lodash/find'
|
|
import isNil from 'lodash/isNil'
|
|
import fromPairs from 'lodash/fromPairs'
|
|
import isString from 'lodash/isString'
|
|
import omit from 'lodash/omit'
|
|
import Toasted from 'toastedjs'
|
|
import Emitter from 'tiny-emitter'
|
|
import Layout from '@/layouts/AppLayout'
|
|
import CodeMirror from 'codemirror'
|
|
import { Settings } from 'luxon'
|
|
import 'codemirror/mode/markdown/markdown'
|
|
import 'codemirror/mode/javascript/javascript'
|
|
import 'codemirror/mode/php/php'
|
|
import 'codemirror/mode/ruby/ruby'
|
|
import 'codemirror/mode/shell/shell'
|
|
import 'codemirror/mode/sass/sass'
|
|
import 'codemirror/mode/yaml/yaml'
|
|
import 'codemirror/mode/yaml-frontmatter/yaml-frontmatter'
|
|
import 'codemirror/mode/nginx/nginx'
|
|
import 'codemirror/mode/xml/xml'
|
|
import 'codemirror/mode/vue/vue'
|
|
import 'codemirror/mode/dockerfile/dockerfile'
|
|
import 'codemirror/keymap/vim'
|
|
import 'codemirror/mode/sql/sql'
|
|
import 'codemirror/mode/twig/twig'
|
|
import 'codemirror/mode/htmlmixed/htmlmixed'
|
|
import { ColorTranslator } from 'colortranslator'
|
|
|
|
import 'floating-vue/dist/style.css'
|
|
|
|
const { parseColor } = require('tailwindcss/lib/util/color')
|
|
|
|
CodeMirror.defineMode('htmltwig', function (config, parserConfig) {
|
|
return CodeMirror.overlayMode(
|
|
CodeMirror.getMode(config, parserConfig.backdrop || 'text/html'),
|
|
CodeMirror.getMode(config, 'twig')
|
|
)
|
|
})
|
|
|
|
const emitter = new Emitter()
|
|
|
|
window.createNovaApp = config => new Nova(config)
|
|
window.Vue = require('vue')
|
|
|
|
const { createApp, h } = window.Vue
|
|
|
|
class Nova {
|
|
constructor(config) {
|
|
this.bootingCallbacks = []
|
|
this.appConfig = config
|
|
this.useShortcuts = true
|
|
|
|
this.pages = {
|
|
'Nova.Attach': require('@/pages/Attach').default,
|
|
'Nova.Create': require('@/pages/Create').default,
|
|
'Nova.Dashboard': require('@/pages/Dashboard').default,
|
|
'Nova.Detail': require('@/pages/Detail').default,
|
|
'Nova.Error': require('@/pages/AppError').default,
|
|
'Nova.Error403': require('@/pages/Error403').default,
|
|
'Nova.Error404': require('@/pages/Error404').default,
|
|
'Nova.ForgotPassword': require('@/pages/ForgotPassword').default,
|
|
'Nova.Index': require('@/pages/Index').default,
|
|
'Nova.Lens': require('@/pages/Lens').default,
|
|
'Nova.Login': require('@/pages/Login').default,
|
|
'Nova.Replicate': require('@/pages/Replicate').default,
|
|
'Nova.ResetPassword': require('@/pages/ResetPassword').default,
|
|
'Nova.Update': require('@/pages/Update').default,
|
|
'Nova.UpdateAttached': require('@/pages/UpdateAttached').default,
|
|
}
|
|
|
|
this.$toasted = new Toasted({
|
|
theme: 'nova',
|
|
position: config.rtlEnabled ? 'bottom-left' : 'bottom-right',
|
|
duration: 6000,
|
|
})
|
|
this.$progress = NProgress
|
|
this.$router = Inertia
|
|
|
|
if (config.debug === true) {
|
|
this.$testing = {
|
|
timezone: timezone => {
|
|
Settings.defaultZoneName = timezone
|
|
},
|
|
}
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Register a callback to be called before Nova starts. This is used to bootstrap
|
|
* addons, tools, custom fields, or anything else Nova needs
|
|
*/
|
|
booting(callback) {
|
|
this.bootingCallbacks.push(callback)
|
|
}
|
|
|
|
/**
|
|
* Execute all of the booting callbacks.
|
|
*/
|
|
boot() {
|
|
this.store = createNovaStore()
|
|
|
|
this.bootingCallbacks.forEach(callback => callback(this.app, this.store))
|
|
this.bootingCallbacks = []
|
|
}
|
|
|
|
booted(callback) {
|
|
callback(this.app, this.store)
|
|
}
|
|
|
|
async countdown() {
|
|
this.log('Initiating Nova countdown...')
|
|
|
|
const appName = this.config('appName')
|
|
|
|
await createInertiaApp({
|
|
title: title => (!title ? appName : `${title} - ${appName}`),
|
|
resolve: name => {
|
|
const page = !isNil(this.pages[name])
|
|
? this.pages[name]
|
|
: require('@/pages/Error404').default
|
|
|
|
page.layout = page.layout || Layout
|
|
|
|
return page
|
|
},
|
|
setup: ({ el, App, props, plugin }) => {
|
|
this.mountTo = el
|
|
this.app = createApp({ render: () => h(App, props) })
|
|
|
|
this.app.use(plugin)
|
|
this.app.use(FloatingVue, {
|
|
preventOverflow: true,
|
|
flip: true,
|
|
themes: {
|
|
Nova: {
|
|
$extend: 'tooltip',
|
|
triggers: ['click'],
|
|
autoHide: true,
|
|
placement: 'bottom',
|
|
html: true,
|
|
},
|
|
},
|
|
})
|
|
},
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Start the Nova app by calling each of the tool's callbacks and then creating
|
|
* the underlying Vue instance.
|
|
*/
|
|
liftOff() {
|
|
this.log('We have lift off!')
|
|
|
|
this.boot()
|
|
|
|
if (this.config('notificationCenterEnabled')) {
|
|
this.notificationPollingInterval = setInterval(() => {
|
|
if (document.hasFocus()) {
|
|
this.$emit('refresh-notifications')
|
|
}
|
|
}, this.config('notificationPollingInterval'))
|
|
}
|
|
|
|
this.registerStoreModules()
|
|
|
|
this.app.mixin(Localization)
|
|
|
|
setupInertia()
|
|
|
|
document.addEventListener('inertia:before', () => {
|
|
;(async () => {
|
|
this.log('Syncing Inertia props to the store...')
|
|
await this.store.dispatch('assignPropsFromInertia')
|
|
})()
|
|
})
|
|
|
|
document.addEventListener('inertia:navigate', () => {
|
|
;(async () => {
|
|
this.log('Syncing Inertia props to the store...')
|
|
await this.store.dispatch('assignPropsFromInertia')
|
|
})()
|
|
})
|
|
|
|
this.app.mixin({
|
|
methods: {
|
|
$url: (path, parameters) => this.url(path, parameters),
|
|
},
|
|
})
|
|
|
|
this.component('Link', Link)
|
|
this.component('InertiaLink', Link)
|
|
this.component('Head', Head)
|
|
|
|
registerViews(this)
|
|
registerFields(this)
|
|
|
|
this.app.mount(this.mountTo)
|
|
|
|
let mousetrapDefaultStopCallback = Mousetrap.prototype.stopCallback
|
|
|
|
Mousetrap.prototype.stopCallback = (e, element, combo) => {
|
|
if (!this.useShortcuts) {
|
|
return true
|
|
}
|
|
|
|
return mousetrapDefaultStopCallback.call(this, e, element, combo)
|
|
}
|
|
|
|
Mousetrap.init()
|
|
|
|
this.applyTheme()
|
|
|
|
this.log('All systems go...')
|
|
}
|
|
|
|
config(key) {
|
|
return this.appConfig[key]
|
|
}
|
|
|
|
/**
|
|
* Return a form object configured with Nova's preconfigured axios instance.
|
|
*
|
|
* @param {object} data
|
|
*/
|
|
form(data) {
|
|
return new Form(data, {
|
|
http: this.request(),
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Return an axios instance configured to make requests to Nova's API
|
|
* and handle certain response codes.
|
|
*/
|
|
request(options) {
|
|
let axios = setupAxios()
|
|
|
|
if (options !== undefined) {
|
|
return axios(options)
|
|
}
|
|
|
|
return axios
|
|
}
|
|
|
|
/**
|
|
* Get the URL from base Nova prefix.
|
|
*/
|
|
url(path, parameters) {
|
|
if (path === '/') {
|
|
path = this.config('initialPath')
|
|
}
|
|
|
|
return url(this.config('base'), path, parameters)
|
|
}
|
|
|
|
/**
|
|
* Register a listener on Nova's built-in event bus
|
|
*/
|
|
$on(...args) {
|
|
emitter.on(...args)
|
|
}
|
|
|
|
/**
|
|
* Register a one-time listener on the event bus
|
|
*/
|
|
$once(...args) {
|
|
emitter.once(...args)
|
|
}
|
|
|
|
/**
|
|
* Unregister an listener on the event bus
|
|
*/
|
|
$off(...args) {
|
|
emitter.off(...args)
|
|
}
|
|
|
|
/**
|
|
* Emit an event on the event bus
|
|
*/
|
|
$emit(...args) {
|
|
emitter.emit(...args)
|
|
}
|
|
|
|
/**
|
|
* Determine if Nova is missing the requested resource with the given uri key
|
|
*/
|
|
missingResource(uriKey) {
|
|
return (
|
|
find(this.config('resources'), r => r.uriKey === uriKey) === undefined
|
|
)
|
|
}
|
|
|
|
/**
|
|
* Register a keyboard shortcut.
|
|
*/
|
|
addShortcut(keys, callback) {
|
|
Mousetrap.bind(keys, callback)
|
|
}
|
|
|
|
/**
|
|
* Unbind a keyboard shortcut.
|
|
*/
|
|
disableShortcut(keys) {
|
|
Mousetrap.unbind(keys)
|
|
}
|
|
|
|
/**
|
|
* Pause all keyboard shortcuts.
|
|
*/
|
|
pauseShortcuts() {
|
|
this.useShortcuts = false
|
|
}
|
|
|
|
/**
|
|
* Resume all keyboard shortcuts.
|
|
*/
|
|
resumeShortcuts() {
|
|
this.useShortcuts = true
|
|
}
|
|
|
|
/**
|
|
* Register the built-in Vuex modules for each resource
|
|
*/
|
|
registerStoreModules() {
|
|
this.app.use(this.store)
|
|
|
|
this.config('resources').forEach(resource => {
|
|
this.store.registerModule(resource.uriKey, resourceStore)
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Register Inertia component.
|
|
*/
|
|
inertia(name, component) {
|
|
this.pages[name] = component
|
|
}
|
|
|
|
/**
|
|
* Register a custom Vue component.
|
|
*/
|
|
component(name, component) {
|
|
if (isNil(this.app._context.components[name])) {
|
|
this.app.component(name, component)
|
|
}
|
|
}
|
|
|
|
/**
|
|
* Show an error message to the user.
|
|
*
|
|
* @param {string} message
|
|
*/
|
|
info(message) {
|
|
this.$toasted.show(message, { type: 'info' })
|
|
}
|
|
|
|
/**
|
|
* Show an error message to the user.
|
|
*
|
|
* @param {string} message
|
|
*/
|
|
error(message) {
|
|
this.$toasted.show(message, { type: 'error' })
|
|
}
|
|
|
|
/**
|
|
* Show a success message to the user.
|
|
*
|
|
* @param {string} message
|
|
*/
|
|
success(message) {
|
|
this.$toasted.show(message, { type: 'success' })
|
|
}
|
|
|
|
/**
|
|
* Show a warning message to the user.
|
|
*
|
|
* @param {string} message
|
|
*/
|
|
warning(message) {
|
|
this.$toasted.show(message, { type: 'warning' })
|
|
}
|
|
|
|
/**
|
|
* Format a number using numbro.js for consistent number formatting.
|
|
*/
|
|
formatNumber(number, format) {
|
|
const numbro = setupNumbro(
|
|
document.querySelector('meta[name="locale"]').content
|
|
)
|
|
const num = numbro(number)
|
|
|
|
if (format !== undefined) {
|
|
return num.format(format)
|
|
}
|
|
|
|
return num.format()
|
|
}
|
|
|
|
/**
|
|
* Log a message to the console with the NOVA prefix
|
|
*
|
|
* @param message
|
|
* @param type
|
|
*/
|
|
log(message, type = 'log') {
|
|
console[type](`[NOVA]`, message)
|
|
}
|
|
|
|
/**
|
|
* Redirect to login path.
|
|
*/
|
|
redirectToLogin() {
|
|
const url =
|
|
!this.config('withAuthentication') && this.config('customLoginPath')
|
|
? this.config('customLoginPath')
|
|
: this.url('/login')
|
|
|
|
this.visit({
|
|
remote: true,
|
|
url,
|
|
})
|
|
}
|
|
|
|
/**
|
|
* Visit page using Inertia visit or window.location for remote.
|
|
*/
|
|
visit(path, options) {
|
|
options = options || {}
|
|
const openInNewTab = options?.openInNewTab || null
|
|
|
|
if (isString(path)) {
|
|
Inertia.visit(this.url(path), omit(options, ['openInNewTab']))
|
|
return
|
|
}
|
|
|
|
if (isString(path.url) && path.hasOwnProperty('remote')) {
|
|
if (path.remote === true) {
|
|
if (openInNewTab === true) {
|
|
window.open(path.url, '_blank')
|
|
} else {
|
|
window.location = path.url
|
|
}
|
|
|
|
return
|
|
}
|
|
|
|
Inertia.visit(path.url, omit(options, ['openInNewTab']))
|
|
}
|
|
}
|
|
|
|
applyTheme() {
|
|
const brandColors = this.config('brandColors')
|
|
|
|
if (Object.keys(brandColors).length > 0) {
|
|
const style = document.createElement('style')
|
|
|
|
// Handle converting any non-RGB user strings into valid RGB strings.
|
|
// This allows the user to specify any color in HSL, RGB, and RGBA
|
|
// format, and we'll convert it to the proper format for them.
|
|
let css = Object.keys(brandColors).reduce((carry, v) => {
|
|
let colorValue = brandColors[v]
|
|
let validColor = parseColor(colorValue)
|
|
|
|
if (validColor) {
|
|
let parsedColor = parseColor(
|
|
ColorTranslator.toRGBA(convertColor(validColor))
|
|
)
|
|
|
|
let rgbaString = `${parsedColor.color.join(' ')} / ${
|
|
parsedColor.alpha
|
|
}`
|
|
|
|
return carry + `\n --colors-primary-${v}: ${rgbaString};`
|
|
}
|
|
|
|
return carry + `\n --colors-primary-${v}: ${colorValue};`
|
|
}, '')
|
|
|
|
style.innerHTML = `:root {${css}\n}`
|
|
|
|
document.head.append(style)
|
|
}
|
|
}
|
|
}
|
|
|
|
function convertColor(parsedColor) {
|
|
let color = fromPairs(
|
|
Array.from(parsedColor.mode).map((v, i) => {
|
|
return [v, parsedColor.color[i]]
|
|
})
|
|
)
|
|
|
|
if (parsedColor.alpha !== undefined) {
|
|
color.a = parsedColor.alpha
|
|
}
|
|
|
|
return color
|
|
}
|