@@ -38,3 +39,7 @@
{% endblock %}
+{% block outside_bottom %}
+
{% include "aircox/widgets/player.html" %}
+{% endblock %}
+
diff --git a/assets/admin/index.js b/assets/admin/index.js
index f534d5b..bfd0f5f 100644
--- a/assets/admin/index.js
+++ b/assets/admin/index.js
@@ -1,12 +1,8 @@
-import Vue from 'vue';
+import App from 'public/app';
+import 'public';
import './admin.scss';
-
-import Statistics from './statistics.vue';
-
-Vue.component('a-statistics', Statistics)
-
-import 'public';
+import AStatistics from './statistics.vue';
window.aircox_admin = {
/**
@@ -23,7 +19,11 @@ window.aircox_admin = {
for(var item of container.querySelectorAll('a.navbar-item'))
item.style.display = null;
},
+}
+window.aircox.builder.config = {
+ ...App,
+ components: {...App.components, AStatistics},
}
diff --git a/assets/public/app.js b/assets/public/app.js
index 8b23ade..ccc38a8 100644
--- a/assets/public/app.js
+++ b/assets/public/app.js
@@ -1,95 +1,25 @@
-import Vue from 'vue';
+import AAutocomplete from './autocomplete'
+import AEpisode from './episode'
+import APlayer from './player'
+import APlaylist from './playlist'
+import ASoundItem from './soundItem'
-export const defaultConfig = {
+const App = {
el: '#app',
delimiters: ['[[', ']]'],
computed: {
player() { return window.aircox.player; },
},
+
+ components: {AAutocomplete, AEpisode, APlayer, APlaylist, ASoundItem},
}
-
-export default class AppBuilder {
- constructor(config={}) {
- this._config = config;
- this.title = null;
- this.app = null;
- }
-
- get config() {
- let config = this._config instanceof Function ? this._config() : this._config;
- for(var k of new Set([...Object.keys(config || {}), ...Object.keys(defaultConfig)])) {
- if(!config[k] && defaultConfig[k])
- config[k] = defaultConfig[k]
- else if(config[k] instanceof Object)
- config[k] = {...defaultConfig[k], ...config[k]}
- }
- return config;
- }
-
- set config(value) {
- this._config = value;
- }
-
- destroy() {
- self.app && self.app.$destroy();
- self.app = null;
- }
-
- fetch(url, {el='app', ...options}={}) {
- return fetch(url, options).then(response => response.text())
- .then(content => {
- let doc = new DOMParser().parseFromString(content, 'text/html');
- let app = doc.getElementById('app');
- content = app ? app.innerHTML : content;
- return this.load({sync: true, content, title: doc.title, url })
- })
- }
-
- load({async=false,content=null,title=null,el='app'}={}) {
- var self = this;
- return new Promise((resolve, reject) => {
- let func = () => {
- try {
- let config = self.config;
- const el = document.querySelector(config.el);
- if(!el)
- return reject(`Error: can't get element ${config.el}`)
-
- if(content)
- el.innerHTML = content
- if(title)
- document.title = title;
- this.app = new Vue(config);
- window.scroll(0, 0);
- resolve(self.app)
- } catch(error) {
- self.destroy();
- reject(error)
- }};
- async ? window.addEventListener('load', func) : func();
- });
- }
-
- /// Save application state into browser history
- historySave(url,replace=false) {
- const el = document.querySelector(this.config.el);
- const state = {
- content: el.innerHTML,
- title: document.title,
- };
-
- if(replace)
- history.replaceState(state, '', url)
- else
- history.pushState(state, '', url)
- }
-
- /// Load application from browser history's state
- historyLoad(state) {
- return this.load({ content: state.content, title: state.title });
- }
+export const PlayerApp = {
+ el: '#player',
+ components: {APlayer},
}
+export default App
+
diff --git a/assets/public/appBuilder.js b/assets/public/appBuilder.js
new file mode 100644
index 0000000..2bcbffd
--- /dev/null
+++ b/assets/public/appBuilder.js
@@ -0,0 +1,137 @@
+import {createApp} from 'vue'
+
+/**
+ * Utility class used to handle Vue applications. It provides way to load
+ * remote application and update history.
+ */
+export default class Builder {
+ constructor(config={}) {
+ this.config = config
+ this.title = null
+ this.app = null
+ this.vm = null
+ }
+
+ /**
+ * Fetch app from remote and mount application.
+ */
+ fetch(url, {el='app', ...options}={}) {
+ return fetch(url, options).then(response => response.text())
+ .then(content => {
+ let doc = new DOMParser().parseFromString(content, 'text/html')
+ let app = doc.getElementById('app')
+ content = app ? app.innerHTML : content
+ return this.mount({content, title: doc.title, reset:true, url })
+ })
+ }
+
+ /**
+ * Mount application, using `create_app` if required.
+ *
+ * @param {String} options.content: replace app container content with it
+ * @param {String} options.title: set DOM document title.
+ * @param {String} [options.el=this.config.el]: mount application on this element (querySelector argument)
+ * @param {Boolean} [reset=False]: if True, force application recreation.
+ * @return `app.mount`'s result.
+ */
+ mount({content=null, title=null, el=null, reset=false}={}) {
+ try {
+ this.unmount()
+
+ let config = this.config
+ if(el === null)
+ el = config.el
+
+ if(reset || !this.app)
+ this.app = this.createApp({title,content,el,...config})
+ this.vm = this.app.mount(el)
+ window.scroll(0, 0)
+ return this.vm
+ } catch(error) {
+ this.unmount()
+ throw error
+ }
+ }
+
+ createApp({el, title=null, content=null, ...config}) {
+ const container = document.querySelector(el)
+ if(!container)
+ throw `Error: can't get element ${el}`
+ if(content)
+ container.innerHTML = content
+ if(title)
+ document.title = title
+ return createApp(config)
+ }
+
+ unmount() {
+ this.app && this.app.unmount()
+ this.app = null
+ this.vm = null
+ }
+
+ /**
+ * Enable hot reload: catch page change in order to fetch them and
+ * load page without actually leaving current one.
+ */
+ enableHotReload(node=null, historySave=true) {
+ if(historySave)
+ this.historySave(document.location, true)
+ node.addEventListener('click', event => this._onPageChange(event), true)
+ node.addEventListener('submit', event => this._onPageChange(event), true)
+ node.addEventListener('popstate', event => this._onPopState(event), true)
+ }
+
+ _onPageChange(event) {
+ let submit = event.type == 'submit';
+ let target = submit || event.target.tagName == 'A'
+ ? event.target : event.target.closest('a');
+ if(!target || target.hasAttribute('target'))
+ return;
+
+ let url = submit ? target.getAttribute('action') || ''
+ : target.getAttribute('href');
+ if(url===null || !(url === '' || url.startsWith('/') || url.startsWith('?')))
+ return;
+
+ let options = {};
+ if(submit) {
+ let formData = new FormData(event.target);
+ if(target.method == 'get')
+ url += '?' + (new URLSearchParams(formData)).toString();
+ else
+ options = {...options, method: target.method, body: formData}
+ }
+ this.fetch(url, options).then(_ => this.historySave(url))
+ event.preventDefault();
+ event.stopPropagation();
+ }
+
+ _onPopState(event) {
+ if(event.state && event.state.content)
+ // document.title = this.title;
+ this.historyLoad(event.state);
+ }
+
+ /// Save application state into browser history
+ historySave(url,replace=false) {
+ const el = document.querySelector(this.config.el)
+ const state = {
+ content: el.innerHTML,
+ title: document.title,
+ }
+
+ if(replace)
+ history.replaceState(state, '', url)
+ else
+ history.pushState(state, '', url)
+ }
+
+ /// Load application from browser history's state
+ historyLoad(state) {
+ return this.mount({ content: state.content, title: state.title })
+ }
+}
+
+
+
diff --git a/assets/public/autocomplete.vue b/assets/public/autocomplete.vue
index c0ddc92..47061d3 100644
--- a/assets/public/autocomplete.vue
+++ b/assets/public/autocomplete.vue
@@ -12,8 +12,7 @@