refactor: use separate entry point for admin
Signed-off-by: Varun Patil <radialapps@gmail.com>pull/672/head
Varun Patil
parent
cb20753a7f
commit
0532bc8ee3
|
|
@ -28,12 +28,9 @@ class Admin implements ISettings
|
|||
*/
|
||||
public function getForm()
|
||||
{
|
||||
$parameters = [
|
||||
];
|
||||
\OCP\Util::addScript('memories', 'memories-admin');
|
||||
|
||||
\OCP\Util::addScript('memories', 'memories-main');
|
||||
|
||||
return new TemplateResponse('memories', 'admin', $parameters);
|
||||
return new TemplateResponse('memories', 'main', []);
|
||||
}
|
||||
|
||||
public function getSection()
|
||||
|
|
|
|||
|
|
@ -0,0 +1,11 @@
|
|||
import './bootstrap';
|
||||
|
||||
import Vue from 'vue';
|
||||
import App from './components/admin/AdminMain.vue';
|
||||
|
||||
globalThis.mode = 'admin';
|
||||
|
||||
export default new Vue({
|
||||
el: '#vue-content',
|
||||
render: (h) => h(App),
|
||||
});
|
||||
|
|
@ -0,0 +1,101 @@
|
|||
// Library imports
|
||||
import 'reflect-metadata';
|
||||
import Vue from 'vue';
|
||||
import { generateFilePath } from '@nextcloud/router';
|
||||
import { getRequestToken } from '@nextcloud/auth';
|
||||
|
||||
// Global components
|
||||
import XImg from './components/frame/XImg.vue';
|
||||
import XLoadingIcon from './components/XLoadingIcon.vue';
|
||||
import GlobalMixin from './mixins/GlobalMixin';
|
||||
import VueVirtualScroller from 'vue-virtual-scroller';
|
||||
|
||||
// Locals
|
||||
import router from './router';
|
||||
|
||||
// Types
|
||||
import type { Route } from 'vue-router';
|
||||
import type { IPhoto, IRow } from './types';
|
||||
import type PlyrType from 'plyr';
|
||||
import type videojsType from 'video.js';
|
||||
|
||||
// CSS for components
|
||||
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
|
||||
|
||||
// Global CSS
|
||||
import './global.scss';
|
||||
import './native.scss';
|
||||
|
||||
// Global exposed variables
|
||||
declare global {
|
||||
var mode: 'admin' | 'user';
|
||||
|
||||
var vueroute: () => Route;
|
||||
var OC: Nextcloud.v24.OC;
|
||||
var OCP: Nextcloud.v24.OCP;
|
||||
|
||||
var editMetadata: (photos: IPhoto[], sections?: number[]) => void;
|
||||
var sharePhoto: (photo: IPhoto) => void;
|
||||
var shareNodeLink: (path: string, immediate?: boolean) => Promise<void>;
|
||||
var showSettings: () => void;
|
||||
|
||||
var mSidebar: {
|
||||
open: (photo: IPhoto | number, filename?: string, forceNative?: boolean) => void;
|
||||
close: () => void;
|
||||
setTab: (tab: string) => void;
|
||||
getWidth: () => number;
|
||||
};
|
||||
|
||||
var mViewer: {
|
||||
open: (anchorPhoto: IPhoto, rows: IRow[]) => Promise<void>;
|
||||
openStatic(photo: IPhoto, list: IPhoto[], thumbSize?: number): Promise<void>;
|
||||
close: () => void;
|
||||
isOpen: () => boolean;
|
||||
};
|
||||
|
||||
var currentViewerPhoto: IPhoto;
|
||||
|
||||
var windowInnerWidth: number; // cache
|
||||
var windowInnerHeight: number; // cache
|
||||
|
||||
var __webpack_nonce__: string;
|
||||
var __webpack_public_path__: string;
|
||||
|
||||
var vidjs: typeof videojsType;
|
||||
var Plyr: typeof PlyrType;
|
||||
var videoClientId: string;
|
||||
var videoClientIdPersistent: string;
|
||||
}
|
||||
|
||||
// Allow global access to the router
|
||||
globalThis.vueroute = () => router.currentRoute;
|
||||
|
||||
// Cache these for better performance
|
||||
globalThis.windowInnerWidth = window.innerWidth;
|
||||
globalThis.windowInnerHeight = window.innerHeight;
|
||||
|
||||
// CSP config for webpack dynamic chunk loading
|
||||
__webpack_nonce__ = window.btoa(getRequestToken() ?? '');
|
||||
|
||||
// Correct the root of the app for chunk loading
|
||||
// OC.linkTo matches the apps folders
|
||||
// OC.generateUrl ensure the index.php (or not)
|
||||
// We do not want the index.php since we're loading files
|
||||
__webpack_public_path__ = generateFilePath('memories', '', 'js/');
|
||||
|
||||
// Generate client id for this instance
|
||||
// Does not need to be cryptographically secure
|
||||
const getClientId = (): string => Math.random().toString(36).substring(2, 15).padEnd(12, '0');
|
||||
globalThis.videoClientId = getClientId();
|
||||
globalThis.videoClientIdPersistent = localStorage.getItem('videoClientIdPersistent') ?? getClientId();
|
||||
localStorage.setItem('videoClientIdPersistent', globalThis.videoClientIdPersistent);
|
||||
|
||||
// Turn on virtual keyboard support
|
||||
if ('virtualKeyboard' in navigator) {
|
||||
(<any>navigator.virtualKeyboard).overlaysContent = true;
|
||||
}
|
||||
|
||||
Vue.mixin(GlobalMixin as any);
|
||||
Vue.use(VueVirtualScroller);
|
||||
Vue.component('XImg', XImg);
|
||||
Vue.component('XLoadingIcon', XLoadingIcon);
|
||||
119
src/main.ts
119
src/main.ts
|
|
@ -1,116 +1,13 @@
|
|||
import 'reflect-metadata';
|
||||
import Vue from 'vue';
|
||||
import VueVirtualScroller from 'vue-virtual-scroller';
|
||||
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css';
|
||||
import XImg from './components/frame/XImg.vue';
|
||||
import XLoadingIcon from './components/XLoadingIcon.vue';
|
||||
import GlobalMixin from './mixins/GlobalMixin';
|
||||
import './bootstrap';
|
||||
|
||||
import Vue from 'vue';
|
||||
import App from './App.vue';
|
||||
import router from './router';
|
||||
import { generateFilePath } from '@nextcloud/router';
|
||||
import { getRequestToken } from '@nextcloud/auth';
|
||||
|
||||
import type { Route } from 'vue-router';
|
||||
import type { IPhoto, IRow } from './types';
|
||||
import type PlyrType from 'plyr';
|
||||
import type videojsType from 'video.js';
|
||||
globalThis.mode = 'user';
|
||||
|
||||
import './global.scss';
|
||||
import './native.scss';
|
||||
|
||||
// Global exposed variables
|
||||
declare global {
|
||||
var mode: 'admin' | 'user';
|
||||
|
||||
var vueroute: () => Route;
|
||||
var OC: Nextcloud.v24.OC;
|
||||
var OCP: Nextcloud.v24.OCP;
|
||||
|
||||
var editMetadata: (photos: IPhoto[], sections?: number[]) => void;
|
||||
var sharePhoto: (photo: IPhoto) => void;
|
||||
var shareNodeLink: (path: string, immediate?: boolean) => Promise<void>;
|
||||
var showSettings: () => void;
|
||||
|
||||
var mSidebar: {
|
||||
open: (photo: IPhoto | number, filename?: string, forceNative?: boolean) => void;
|
||||
close: () => void;
|
||||
setTab: (tab: string) => void;
|
||||
getWidth: () => number;
|
||||
};
|
||||
|
||||
var mViewer: {
|
||||
open: (anchorPhoto: IPhoto, rows: IRow[]) => Promise<void>;
|
||||
openStatic(photo: IPhoto, list: IPhoto[], thumbSize?: number): Promise<void>;
|
||||
close: () => void;
|
||||
isOpen: () => boolean;
|
||||
};
|
||||
|
||||
var currentViewerPhoto: IPhoto;
|
||||
|
||||
var windowInnerWidth: number; // cache
|
||||
var windowInnerHeight: number; // cache
|
||||
|
||||
var __webpack_nonce__: string;
|
||||
var __webpack_public_path__: string;
|
||||
|
||||
var vidjs: typeof videojsType;
|
||||
var Plyr: typeof PlyrType;
|
||||
var videoClientId: string;
|
||||
var videoClientIdPersistent: string;
|
||||
}
|
||||
|
||||
// Allow global access to the router
|
||||
globalThis.vueroute = () => router.currentRoute;
|
||||
|
||||
// Cache these for better performance
|
||||
globalThis.windowInnerWidth = window.innerWidth;
|
||||
globalThis.windowInnerHeight = window.innerHeight;
|
||||
|
||||
// CSP config for webpack dynamic chunk loading
|
||||
__webpack_nonce__ = window.btoa(getRequestToken() ?? '');
|
||||
|
||||
// Correct the root of the app for chunk loading
|
||||
// OC.linkTo matches the apps folders
|
||||
// OC.generateUrl ensure the index.php (or not)
|
||||
// We do not want the index.php since we're loading files
|
||||
__webpack_public_path__ = generateFilePath('memories', '', 'js/');
|
||||
|
||||
// Generate client id for this instance
|
||||
// Does not need to be cryptographically secure
|
||||
const getClientId = (): string => Math.random().toString(36).substring(2, 15).padEnd(12, '0');
|
||||
globalThis.videoClientId = getClientId();
|
||||
globalThis.videoClientIdPersistent = localStorage.getItem('videoClientIdPersistent') ?? getClientId();
|
||||
localStorage.setItem('videoClientIdPersistent', globalThis.videoClientIdPersistent);
|
||||
|
||||
// Turn on virtual keyboard support
|
||||
if ('virtualKeyboard' in navigator) {
|
||||
(<any>navigator.virtualKeyboard).overlaysContent = true;
|
||||
}
|
||||
|
||||
Vue.mixin(GlobalMixin as any);
|
||||
Vue.use(VueVirtualScroller);
|
||||
Vue.component('XImg', XImg);
|
||||
Vue.component('XLoadingIcon', XLoadingIcon);
|
||||
|
||||
let app = null;
|
||||
|
||||
const adminSection = document.getElementById('memories-admin-content');
|
||||
if (adminSection) {
|
||||
import('./components/admin/AdminMain.vue').then((module) => {
|
||||
app = new Vue({
|
||||
el: '#memories-admin-content',
|
||||
render: (h) => h(module.default),
|
||||
});
|
||||
});
|
||||
globalThis.mode = 'admin';
|
||||
} else {
|
||||
app = new Vue({
|
||||
el: '#content',
|
||||
router,
|
||||
render: (h) => h(App),
|
||||
});
|
||||
globalThis.mode = 'user';
|
||||
}
|
||||
|
||||
export default app;
|
||||
export default new Vue({
|
||||
el: '#content',
|
||||
router,
|
||||
render: (h) => h(App),
|
||||
});
|
||||
|
|
|
|||
|
|
@ -1 +0,0 @@
|
|||
<div id="memories-admin-content"></div>
|
||||
12
webpack.js
12
webpack.js
|
|
@ -1,12 +1,19 @@
|
|||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
const webpackConfig = require('@nextcloud/webpack-vue-config');
|
||||
const WorkboxPlugin = require('workbox-webpack-plugin');
|
||||
const path = require('path');
|
||||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
|
||||
const buildMode = process.env.NODE_ENV;
|
||||
const isDev = buildMode === 'development';
|
||||
|
||||
// Entry points
|
||||
webpackConfig.entry = {
|
||||
main: path.resolve(path.join('src', 'main')),
|
||||
admin: path.resolve(path.join('src', 'admin')),
|
||||
};
|
||||
|
||||
// Enable TypeScript
|
||||
webpackConfig.module.rules.push({
|
||||
test: /\.ts?$/,
|
||||
loader: 'ts-loader',
|
||||
|
|
@ -15,13 +22,14 @@ webpackConfig.module.rules.push({
|
|||
appendTsSuffixTo: [/\.vue$/],
|
||||
},
|
||||
});
|
||||
webpackConfig.entry.main = path.resolve(path.join('src', 'main'));
|
||||
|
||||
// Exclude node_modules from watch
|
||||
webpackConfig.watchOptions = {
|
||||
ignored: /node_modules/,
|
||||
aggregateTimeout: 300,
|
||||
};
|
||||
|
||||
// Bundle service worker
|
||||
webpackConfig.plugins.push(
|
||||
new WorkboxPlugin.InjectManifest({
|
||||
swSrc: path.resolve(path.join('src', 'service-worker.js')),
|
||||
|
|
|
|||
Loading…
Reference in New Issue