diff --git a/samples/music-festival-vue-decoupled/README.md b/samples/music-festival-vue-decoupled/README.md index 4fcdd4d..c95439f 100644 --- a/samples/music-festival-vue-decoupled/README.md +++ b/samples/music-festival-vue-decoupled/README.md @@ -37,7 +37,7 @@ This project uses: ### On-Page Editing helpers -- [epiBootstrap.js](frontend/src/epiBootstrap.js): registers the `contentSaved` and `epiReady` message handlers that updates the vuex store. +- [livePreview.js](frontend/src/livePreview.js): subscribes to `contentSaved` events to update the vuex store which enabled live preview of content. - [epiEdit.js](frontend/src/directives/epiEdit.js): a directive that can be added on components to make them optionally editable (e.g. ``), through `isEditable` and `epiDisableEditing`. - [EpiProperty.vue](frontend/src/components/EpiProperty.vue): a component that renders a button to edit a property (e.g. ``). diff --git a/samples/music-festival-vue-decoupled/backend/MusicFestival.Backend.csproj b/samples/music-festival-vue-decoupled/backend/MusicFestival.Backend.csproj index ba33058..d69892a 100644 --- a/samples/music-festival-vue-decoupled/backend/MusicFestival.Backend.csproj +++ b/samples/music-festival-vue-decoupled/backend/MusicFestival.Backend.csproj @@ -8,7 +8,7 @@ - + diff --git a/samples/music-festival-vue-decoupled/frontend/src/epiBootstrap.js b/samples/music-festival-vue-decoupled/frontend/src/epiBootstrap.js deleted file mode 100644 index 84e91c2..0000000 --- a/samples/music-festival-vue-decoupled/frontend/src/epiBootstrap.js +++ /dev/null @@ -1,44 +0,0 @@ -/* - * Context flags that are useful to enable properly working On-Page Editing. - * Sets the context in the vuex store to be used on every component that is - * interested. - * - * These values are `false` by default and will be updated when the page has - * finished loading. See the event handler at the bottom of the page. - * - * Also registers the `contentSaved` event that will update - * the model in the store during editing. - */ - -import store from "@/store"; -import { parsePreviewToken } from "@/urlHelpers"; -import { UPDATE_CONTEXT, UPDATE_PREVIEW_TOKEN } from "@/store/modules/epiContext"; -import { UPDATE_MODEL_BY_URL } from "@/store/modules/epiDataModel"; - -function setContext() { - // Make the context available to all Vue components. - store.commit(UPDATE_CONTEXT, window.epi.inEditMode); - - // If we're in an editable context we want to update the model on every change by the editor. - if (window.epi.isEditable) { - window.epi.subscribe("contentSaved", (message) => { - var parsed = parsePreviewToken(message.previewUrl); - store.commit(UPDATE_PREVIEW_TOKEN, parsed.previewToken); - store.dispatch(UPDATE_MODEL_BY_URL, parsed.url); - }); - } -} - -window.addEventListener("load", () => { - // Expect `epi` to be there after the `load` event. If it's not then we're - // not in any editing context. - if (!window.epi) { - return; - } - - if (window.epi.ready === true) { - setContext(); - } else if (window.epi.subscribe) { - window.epi.subscribe("epiReady", () => setContext()); - } -}); diff --git a/samples/music-festival-vue-decoupled/frontend/src/livePreview.js b/samples/music-festival-vue-decoupled/frontend/src/livePreview.js new file mode 100644 index 0000000..10e7b4e --- /dev/null +++ b/samples/music-festival-vue-decoupled/frontend/src/livePreview.js @@ -0,0 +1,15 @@ +/* + * Sets up subscription to the `contentSaved` event that will update + * the model in the store during editing. + */ + +import store from "@/store"; +import { parsePreviewToken } from "@/urlHelpers"; +import { UPDATE_PREVIEW_TOKEN } from "@/store/modules/epiContext"; +import { UPDATE_MODEL_BY_URL } from "@/store/modules/epiDataModel"; + +window.addEventListener("optimizely:cms:contentSaved", (event) => { + var parsed = parsePreviewToken(event.detail.previewUrl); + store.commit(UPDATE_PREVIEW_TOKEN, parsed.previewToken); + store.dispatch(UPDATE_MODEL_BY_URL, parsed.url); +}); diff --git a/samples/music-festival-vue-decoupled/frontend/src/main.js b/samples/music-festival-vue-decoupled/frontend/src/main.js index 9bcdf31..447a595 100644 --- a/samples/music-festival-vue-decoupled/frontend/src/main.js +++ b/samples/music-festival-vue-decoupled/frontend/src/main.js @@ -1,28 +1,25 @@ -import { createApp } from 'vue'; -import App from './App.vue'; -import EpiEdit from './directives/epiEdit'; -import router from './router'; -import store from './store'; -import './epiBootstrap'; -import './assets/styles/main.less'; +import { createApp } from "vue"; +import App from "./App.vue"; +import EpiEdit from "./directives/epiEdit"; +import router from "./router"; +import store from "./store"; +import "./livePreview"; +import "./assets/styles/main.less"; -const app = createApp(App) - .directive('epi-edit', EpiEdit) - .use(store) - .use(router); +const app = createApp(App).directive("epi-edit", EpiEdit).use(store).use(router); // Register all Optimizely view components globally. This requires webpack! // Otherwise we need to register all components manually here in main.js. -const requireComponent = require.context('./views', true, /.vue$/); +const requireComponent = require.context("./views", true, /.vue$/); requireComponent.keys().forEach((fileName) => { const componentConfig = requireComponent(fileName); // Gets the component name regardless folder depth const componentName = fileName - .split('/') + .split("/") .pop() - .replace(/\.\w+$/, ''); + .replace(/\.\w+$/, ""); // Look for the component options on `.default`, which will // exist if the component was exported with `export default`, @@ -30,4 +27,4 @@ requireComponent.keys().forEach((fileName) => { app.component(componentName, componentConfig.default || componentConfig); }); -app.mount('#app'); +app.mount("#app");