Changeset View
Changeset View
Standalone View
Standalone View
src/resources/js/app.js
/** | /** | ||||
* First we will load all of this project's JavaScript dependencies which | * First we will load all of this project's JavaScript dependencies which | ||||
* includes Vue and other libraries. It is a great starting point when | * includes Vue and other libraries. It is a great starting point when | ||||
* building robust, powerful web applications using Vue and Laravel. | * building robust, powerful web applications using Vue and Laravel. | ||||
*/ | */ | ||||
require('./bootstrap') | require('./bootstrap') | ||||
import AppComponent from '../vue/App' | import AppComponent from '../vue/App' | ||||
import MenuComponent from '../vue/Widgets/Menu' | import MenuComponent from '../vue/Widgets/Menu' | ||||
import SupportForm from '../vue/Widgets/SupportForm' | import SupportForm from '../vue/Widgets/SupportForm' | ||||
import store from './store' | import store from './store' | ||||
import { Tab } from 'bootstrap' | |||||
import { loadLangAsync, i18n } from './locale' | import { loadLangAsync, i18n } from './locale' | ||||
const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="sr-only">Loading</span></div></div>' | const loader = '<div class="app-loader"><div class="spinner-border" role="status"><span class="visually-hidden">Loading</span></div></div>' | ||||
let isLoading = 0 | let isLoading = 0 | ||||
// Lock the UI with the 'loading...' element | // Lock the UI with the 'loading...' element | ||||
const startLoading = () => { | const startLoading = () => { | ||||
isLoading++ | isLoading++ | ||||
let loading = $('#app > .app-loader').removeClass('fadeOut') | let loading = $('#app > .app-loader').removeClass('fadeOut') | ||||
if (!loading.length) { | if (!loading.length) { | ||||
▲ Show 20 Lines • Show All 148 Lines • ▼ Show 20 Lines | methods: { | ||||
clearTimeout(this.refreshTimeout) | clearTimeout(this.refreshTimeout) | ||||
}, | }, | ||||
logo(mode) { | logo(mode) { | ||||
let src = this.appUrl + this.themeDir + '/images/logo_' + (mode || 'header') + '.png' | let src = this.appUrl + this.themeDir + '/images/logo_' + (mode || 'header') + '.png' | ||||
return `<img src="${src}" alt="${this.appName}">` | return `<img src="${src}" alt="${this.appName}">` | ||||
}, | }, | ||||
// Display "loading" overlay inside of the specified element | // Display "loading" overlay inside of the specified element | ||||
addLoader(elem, small = true) { | addLoader(elem, small = true, style = null) { | ||||
$(elem).css({position: 'relative'}).append(small ? $(loader).addClass('small') : $(loader)) | if (style) { | ||||
$(elem).css(style) | |||||
} else { | |||||
$(elem).css('position', 'relative') | |||||
} | |||||
$(elem).append(small ? $(loader).addClass('small') : $(loader)) | |||||
}, | }, | ||||
// Remove loader element added in addLoader() | // Remove loader element added in addLoader() | ||||
removeLoader(elem) { | removeLoader(elem) { | ||||
$(elem).find('.app-loader').remove() | $(elem).find('.app-loader').remove() | ||||
}, | }, | ||||
startLoading, | startLoading, | ||||
stopLoading, | stopLoading, | ||||
isLoading() { | isLoading() { | ||||
return isLoading > 0 | return isLoading > 0 | ||||
}, | }, | ||||
tab(e) { | tab(e) { | ||||
e.preventDefault() | e.preventDefault() | ||||
$(e.target).tab('show') | new Tab(e.target).show() | ||||
}, | }, | ||||
errorPage(code, msg, hint) { | errorPage(code, msg, hint) { | ||||
// Until https://github.com/vuejs/vue-router/issues/977 is implemented | // Until https://github.com/vuejs/vue-router/issues/977 is implemented | ||||
// we can't really use router to display error page as it has two side | // we can't really use router to display error page as it has two side | ||||
// effects: it changes the URL and adds the error page to browser history. | // effects: it changes the URL and adds the error page to browser history. | ||||
// For now we'll be replacing current view with error page "manually". | // For now we'll be replacing current view with error page "manually". | ||||
if (!msg) msg = this.$te('error.' + code) ? this.$t('error.' + code) : this.$t('error.unknown') | if (!msg) msg = this.$te('error.' + code) ? this.$t('error.' + code) : this.$t('error.unknown') | ||||
▲ Show 20 Lines • Show All 59 Lines • ▼ Show 20 Lines | methods: { | ||||
cost = Math.floor(cost * ((100 - discount) / 100)) | cost = Math.floor(cost * ((100 - discount) / 100)) | ||||
index = '\u00B9' | index = '\u00B9' | ||||
} | } | ||||
return this.price(cost) + '/month' + index | return this.price(cost) + '/month' + index | ||||
}, | }, | ||||
clickRecord(event) { | clickRecord(event) { | ||||
if (!/^(a|button|svg|path)$/i.test(event.target.nodeName)) { | if (!/^(a|button|svg|path)$/i.test(event.target.nodeName)) { | ||||
let link = $(event.target).closest('tr').find('a')[0] | $(event.target).closest('tr').find('a').trigger('click') | ||||
if (link) { | |||||
link.click() | |||||
} | |||||
} | } | ||||
}, | }, | ||||
domainStatusClass(domain) { | domainStatusClass(domain) { | ||||
if (domain.isDeleted) { | if (domain.isDeleted) { | ||||
return 'text-muted' | return 'text-muted' | ||||
} | } | ||||
if (domain.isSuspended) { | if (domain.isSuspended) { | ||||
▲ Show 20 Lines • Show All 63 Lines • ▼ Show 20 Lines | methods: { | ||||
} | } | ||||
}) | }) | ||||
page = page.replace(/^\//, '') | page = page.replace(/^\//, '') | ||||
return page ? page : '404' | return page ? page : '404' | ||||
}, | }, | ||||
supportDialog(container) { | supportDialog(container) { | ||||
let dialog = $('#support-dialog') | let dialog = $('#support-dialog')[0] | ||||
if (!dialog) { | |||||
// FIXME: Find a nicer way of doing this | // FIXME: Find a nicer way of doing this | ||||
if (!dialog.length) { | |||||
SupportForm.i18n = i18n | SupportForm.i18n = i18n | ||||
let form = new Vue(SupportForm) | let form = new Vue(SupportForm) | ||||
form.$mount($('<div>').appendTo(container)[0]) | form.$mount($('<div>').appendTo(container)[0]) | ||||
form.$root = this | form.$root = this | ||||
form.$toast = this.$toast | form.$toast = this.$toast | ||||
dialog = $(form.$el) | dialog = form.$el | ||||
} | } | ||||
dialog.on('shown.bs.modal', () => { | dialog.__vue__.showDialog() | ||||
dialog.find('input').first().focus() | |||||
}).modal() | |||||
}, | }, | ||||
userStatusClass(user) { | userStatusClass(user) { | ||||
if (user.isDeleted) { | if (user.isDeleted) { | ||||
return 'text-muted' | return 'text-muted' | ||||
} | } | ||||
if (user.isSuspended) { | if (user.isSuspended) { | ||||
return 'text-warning' | return 'text-warning' | ||||
▲ Show 20 Lines • Show All 83 Lines • ▼ Show 20 Lines | error => { | ||||
if (!input.length) { | if (!input.length) { | ||||
input = form.find('[name="' + input_name + '"]'); | input = form.find('[name="' + input_name + '"]'); | ||||
} | } | ||||
if (input.length) { | if (input.length) { | ||||
// Create an error message | // Create an error message | ||||
// API responses can use a string, array or object | // API responses can use a string, array or object | ||||
let msg_text = '' | let msg_text = '' | ||||
if ($.type(msg) !== 'string') { | if (typeof(msg) !== 'string') { | ||||
$.each(msg, (index, str) => { | $.each(msg, (index, str) => { | ||||
msg_text += str + ' ' | msg_text += str + ' ' | ||||
}) | }) | ||||
} | } | ||||
else { | else { | ||||
msg_text = msg | msg_text = msg | ||||
} | } | ||||
▲ Show 20 Lines • Show All 46 Lines • Show Last 20 Lines |