History mode for theme router. Loads vue instance of theme main items list only when div exists.

This commit is contained in:
mateuswetah 2020-04-01 09:20:29 -03:00
parent 8c67b65790
commit 2bb949ca40
2 changed files with 156 additions and 147 deletions

View File

@ -35,6 +35,29 @@ import routerTheme from './theme-router.js';
import eventBusSearch from '../../admin/js/event-bus-search';
import { I18NPlugin, UserPrefsPlugin, ConsolePlugin } from '../../admin/js/utilities';
document.addEventListener("DOMContentLoaded", () => {
// Mount only if the div exists
if (document.getElementById('tainacan-items-page')) {
// Display Icons only once everything is loaded
function listen(evnt, elem, func) {
if (elem.addEventListener) // W3C DOM
elem.addEventListener(evnt,func,false);
else if (elem.attachEvent) { // IE DOM
var r = elem.attachEvent("on"+evnt, func);
return r;
} else if (document.head) {
var iconHideStyle = document.createElement("style");
iconHideStyle.innerText = '.tainacan-icon{ opacity: 1 !important; }';
document.head.appendChild(iconHideStyle);
} else {
var iconHideStyle = document.createElement("style");
iconHideStyle.innerText = '.tainacan-icon{ opacity: 1 !important; }';
document.getElementsByTagName("head")[0].appendChild(iconHideStyle);
}
}
/* Registers Extra Vue Plugins passed to the window.tainacan_extra_plugins */
if (typeof window.tainacan_extra_plugins != "undefined") {
for (let [extraVuePluginName, extraVuePluginObject] of Object.entries(window.tainacan_extra_plugins)) {
@ -87,9 +110,7 @@ Vue.component('view-mode-slideshow', ViewModeSlideshow);
Vue.use(eventBusSearch, { store: store, router: routerTheme});
document.addEventListener("DOMContentLoaded", () => {
new Vue({
el: '#tainacan-items-page',
const VueItemsList = new Vue({
store,
router: routerTheme,
data: {
@ -112,6 +133,7 @@ document.addEventListener("DOMContentLoaded", () => {
showFullscreenWithViewModes: false
},
beforeMount () {
console.log('antes de montar')
// Collection or Term source settings
if (this.$el.attributes['collection-id'] != undefined)
this.collectionId = this.$el.attributes['collection-id'].value;
@ -161,33 +183,19 @@ document.addEventListener("DOMContentLoaded", () => {
},
render: h => h(ThemeSearch)
});
});
// Initialize Ponyfill for Custom CSS properties
cssVars({
// Options...
});
VueItemsList.$mount('#tainacan-items-page');
// Display Icons only once everything is loaded
function listen(evnt, elem, func) {
if (elem.addEventListener) // W3C DOM
elem.addEventListener(evnt,func,false);
else if (elem.attachEvent) { // IE DOM
var r = elem.attachEvent("on"+evnt, func);
return r;
} else if (document.head) {
var iconHideStyle = document.createElement("style");
iconHideStyle.innerText = '.tainacan-icon{ opacity: 1 !important; }';
document.head.appendChild(iconHideStyle);
} else {
var iconHideStyle = document.createElement("style");
iconHideStyle.innerText = '.tainacan-icon{ opacity: 1 !important; }';
document.getElementsByTagName("head")[0].appendChild(iconHideStyle);
}
}
listen("load", window, function() {
var iconsStyle = document.createElement("style");
iconsStyle.setAttribute('type', 'text/css');
iconsStyle.innerText = '.tainacan-icon{ opacity: 1 !important; }';
document.head.appendChild(iconsStyle);
});
// Initialize Ponyfill for Custom CSS properties
cssVars({
// Options...
});
}
});

View File

@ -7,6 +7,7 @@ Vue.use(VueRouter);
const themeRoutes = [];
export default new VueRouter ({
mode: 'history',
themeRoutes,
// set custom query resolver
parseQuery(query) {