@oxygen-cms/ui 1.9.1 → 2.1.0

package/src/components/LegacyPage.vue

@@ -1,263 +0,0 @@
-<template>
-    <div class="full-height full-height-container legacy-container">
-        <transition name="fade">
-            <iframe v-show="!loading" ref="iframe" class="iframe" />
-        </transition>
-
-        <MediaInsertModal :active.sync="isInsertMediaItemModalActive" @close="closeInsertMediaItemModal" @select="onFilesSelected" />
-    </div>
-</template>
-
-<script>
-import MediaInsertModal from "./media/MediaInsertModal.vue";
-
-import {getApiHost, initCsrfCookie, morphToNotification} from "../api";
-import MediaApi from "../MediaApi";
-import {LOGIN_AGAIN_NOTIFICATION} from "../AuthApi";
-
-// from https://gist.github.com/hdodov/a87c097216718655ead6cf2969b0dcfa
-
-const iframeURLChange = (iframe, callback, legacyPage) => {
-    var unloadHandler = function() {
-        console.log('[LegacyPage] Starting load');
-        legacyPage.loadingPath = 'unknown';
-    };
-
-    function attachUnload() {
-        // Remove the unloadHandler in case it was already attached.
-        // Otherwise, the change will be dispatched twice.
-        iframe.contentWindow.removeEventListener("unload", unloadHandler);
-        iframe.contentWindow.addEventListener("unload", unloadHandler);
-    }
-
-    iframe.addEventListener("load", attachUnload);
-    attachUnload();
-}
-
-// This component manages the tricky/hacky integration of two incompatible GUI systems.
-// Legacy pages are rendered inside an iframe, and legacy pages can transition between each other using SmoothState.js
-// When the iframe location is updated, so is the url of the parent page using this.$router.push()
-
-export default {
-    name: "LegacyPage",
-    components: { MediaInsertModal },
-    beforeRouteLeave(to, from, next) {
-        window.document.body.style.overflowY = 'auto';
-        window.document.documentElement.style.overflowY = 'auto';
-        this.$parent.$data.requestedCollapsed = false;
-        next();
-    },
-    props: {
-        fullPath: { type: String, required: true },
-        legacyPrefix: { type: String, required: true },
-        adminPrefix: { type: String, required: true }
-    },
-    data() {
-        return {
-            loadingPath: null,
-            currentPath: null,
-            isInsertMediaItemModalActive: false,
-            resolveInsertMediaItems: null,
-            rejectInsertMediaItems: null
-        }
-    },
-    computed: {
-        loading() { return this.loadingPath !== null; },
-        userPreferences() { return this.$store.getters.userPreferences; }
-    },
-    'watch': {
-        'fullPath': 'onFullPathChanged'
-    },
-    async mounted() {
-        this.loadingPath = 'prefs';
-
-        window.document.body.style.overflowY = 'hidden';
-        window.document.documentElement.style.overflowY = 'hidden';
-        let iframe = this.$refs.iframe;
-
-        iframeURLChange(iframe, this.onNavigated.bind(this), this);
-
-        this.loadPath(this.$route.fullPath);
-
-        iframe.addEventListener('load', this.onLoaded.bind(this));
-        if(iframe.contentDocument.readyState === "complete") {
-            console.warn('[LegacyPage] mounted: page was already loaded - perhaps this page was cached?');
-            await this.onLoaded();
-        }
-    },
-    unmounted() {
-        this.$parent.$data.requestedCollapsed = false;
-    },
-    methods: {
-        onFullPathChanged(newFullPath) {
-            console.log('Route changed', );
-            this.loadPath(newFullPath);
-        },
-        setupIframeIntegrations() {
-            console.log('[LegacyPage] Setting up iframe integrations for', this.$refs.iframe.contentWindow.location.href);
-            let elem = this.$refs.iframe;
-            elem.contentWindow.Oxygen = elem.contentWindow.Oxygen || {};
-            elem.contentWindow.Oxygen.user = this.userPreferences.preferences;
-            elem.contentWindow.Oxygen.onNavigationBegin = this.onNavigated.bind(this);
-            elem.contentWindow.Oxygen.onNavigationEnd = this.onLoaded.bind(this);
-            elem.contentWindow.Oxygen.notify = this.showInnerNotification.bind(this);
-            elem.contentWindow.Oxygen.openAlertDialog = this.openAlertDialog.bind(this);
-            elem.contentWindow.Oxygen.hardRedirect = this.hardRedirect.bind(this);
-            elem.contentWindow.Oxygen.insertMediaItem = this.openInsertMediaItemModal.bind(this);
-            elem.contentWindow.Oxygen.openConfirmDialog = this.openConfirmDialog.bind(this);
-            elem.contentWindow.Oxygen.popState = this.popState.bind(this);
-            elem.contentWindow.Oxygen.onToggleFullscreen = this.onToggleFullscreen.bind(this);
-
-            if(elem.contentWindow.Oxygen.onLoadedInsideIFrame) {
-                elem.contentWindow.Oxygen.onLoadedInsideIFrame();
-            } else {
-                console.warn('[LegacyPage] no onLoadedInsideIFrame callback set');
-            }
-        },
-        fullURLToVuePath(url) {
-            let urlObj = new URL(url);
-            let urlString = urlObj.toString();
-            if(urlObj.pathname.startsWith(this.legacyPrefix)) {
-                let loc = urlString.split(this.legacyPrefix)[1];
-                return { loadInside: 'iframe', location: this.adminPrefix + loc, locationWithoutPrefix: loc };
-            } else if(urlObj.pathname.startsWith(this.adminPrefix)) {
-                return { loadInside: 'vue', location: urlString.split(this.adminPrefix)[1] };
-            } else {
-                return { loadInside: false, location: urlString };
-            }
-        },
-        vuePathToURL(path) {
-            return getApiHost() + this.legacyPrefix.replace(/^\//, '') + path;
-        },
-        // We detect when the iframe url changes, and update our window accordingly...
-        onNavigated(newURL) {
-            console.log('[LegacyPage] Navigated to ' + newURL);
-        },
-        showInnerNotification(data) {
-            this.$buefy.notification.open(morphToNotification(data));
-        },
-        openAlertDialog(message) {
-            this.$buefy.dialog.alert({
-                message: message,
-                size: 'is-small'
-            });
-        },
-        openConfirmDialog(options) {
-            this.$buefy.dialog.confirm(options);
-        },
-        popState() {
-            this.$router.back();
-        },
-        async onLoaded() {
-            let path = this.$refs.iframe.contentWindow.location.href;
-            if(path === 'about:blank') { return; }
-            console.log('[LegacyPage] Loaded', path);
-
-            if(path !== this.currentPath) {
-                let { loadInside, location } = this.fullURLToVuePath(path);
-                console.log('[LegacyPage] ', 'loadInside:', loadInside, 'location:', location);
-                if(loadInside === 'iframe') {
-                    window.history.pushState({}, "", location);
-                } else if(loadInside === 'vue') {
-                    if(location.startsWith('/auth/login?location=')) {
-                        // If the legacy page is redirecting us to login,
-                        // then that must be because our auth expired/failed.
-                        // So we explicitly log ourselves out, and redirect to the login page.
-                        let redirectTo = this.fullURLToVuePath(this.currentPath);
-                        if(redirectTo.loadInside !== 'iframe') { throw new Error("this.currentPath was not inside iframe"); }
-                        console.log("Requested redirect to /auth/login . Clearing user state first", redirectTo);
-                        this.$store.commit('setUser', null);
-                        this.$buefy.notification.open(LOGIN_AGAIN_NOTIFICATION);
-                        await initCsrfCookie();
-                        location = { name: 'login', query: { redirect: redirectTo.locationWithoutPrefix } };
-                    }
-
-                    await this.$router.push(location);
-                    return;
-                } else {
-                    // load outside of iframe
-                    window.location = location;
-                    return;
-                }
-                this.currentPath = path;
-            }
-
-            document.title = this.$refs.iframe.contentDocument.title;
-            this.setupIframeIntegrations();
-
-            this.loadingPath = null;
-        },
-        loadPath(routePath) {
-            let path = this.vuePathToURL(routePath);
-            if(path.endsWith('/oxygen/view/auth/login')) {
-                console.log('[LegacyPage] Need to login again, redirecting...');
-                window.location.replace('/oxygen/auth/login');
-            }
-
-            console.log('[LegacyPage] Loading', path);
-
-            this.loadingPath = path;
-
-            let elem = this.$refs.iframe;
-            if(elem.src !== path) {
-                // load the page from scratch
-                elem.src = path;
-            }
-        },
-        hardRedirect(loc) {
-            window.location.replace(loc);
-        },
-        openInsertMediaItemModal() {
-            this.isInsertMediaItemModalActive = true;
-            return new Promise((resolve, reject) => {
-                this.resolveInsertMediaItems = resolve;
-                this.rejectInsertMediaItems = reject;
-            });
-        },
-        closeInsertMediaItemModal() {
-            this.rejectInsertMediaItems({ message: 'modal closed' });
-            this.isInsertMediaItemModalActive = false;
-        },
-        onFilesSelected(files) {
-            let include = files.map(item => MediaApi.generateIncludeStatement(item)).join("\n") + "\n";
-            let filenames = files.map(item => item.fullPath).join(",");
-            this.resolveInsertMediaItems(include);
-            this.isInsertMediaItemModalActive = false;
-            this.$buefy.toast.open({
-                message: 'Inserted ' + filenames,
-                type: 'is-info',
-                queue: false
-            });
-        },
-        onToggleFullscreen(mode) {
-            this.$parent.$data.requestedCollapsed = mode;
-        }
-    }
-}
-</script>
-
-<style scoped lang="scss">
-    @import  './util.css';
-    @import '../styles/_variables.scss';
-
-    .iframe {
-        flex: 1;
-        width: 100%;
-    }
-
-    .hidden {
-        transition: opacity 1s ease, visibility 1s ease;
-        opacity: 0;
-        visibility: hidden;
-    }
-
-    .visible {
-        opacity: 1;
-        visibility: visible;
-    }
-
-    .legacy-container {
-        position: relative;
-        background-color: $grey-lightest;
-    }
-</style>

package/src/components/PageActions.vue

@@ -1,151 +0,0 @@
-<template>
-    <div class="page-actions">
-        <b-button v-if="item.stage !== STAGE_PUBLISHED" rounded size="is-small" icon-left="globe-asia" class="mr-2" @click="publish">Publish</b-button>
-
-        <b-dropdown
-            ref="moveDropdown"
-            position="is-top-left"
-            append-to-body
-            aria-role="menu"
-            trap-focus
-            class="move-page-dropdown"
-        >
-            <template #trigger>
-                <b-button rounded size="is-small" icon-left="folder-open" class="mr-2">Move</b-button>
-            </template>
-
-            <b-dropdown-item
-                aria-role="menu-item"
-                custom
-                paddingless>
-                <div class="modal-card" style="width: auto; overflow: visible">
-                    <header class="modal-card-head">
-                        <p class="modal-card-title">Update the parent for "{{ item.title }}"</p>
-                    </header>
-                    <section class="modal-card-body" style="overflow: visible;">
-                        <b-field>
-                            <b-autocomplete
-                                v-model.lazy="movePageSearchQuery"
-                                :disabled="isLoading"
-                                open-on-focus
-                                :data="sortedPagesList"
-                                placeholder="Search for pages..."
-                                clearable
-                                @select="setParentPage">
-                                <template #default="props">
-                                    <span :style="getOptionStyle(props.option)">
-                                        {{ props.option.title }} - {{ props.option.slug }}
-                                        <span v-if="isCurrentParent(props.option)" style="opacity: 0.6;"> (current parent)</span>
-                                    </span>
-                                </template>
-                                <template #empty>No results found</template>
-                            </b-autocomplete>
-                        </b-field>
-                    </section>
-                    <footer class="modal-card-foot is-flex">
-                        <div class="is-flex-grow-1"></div>
-                        <b-button
-                            label="Close"
-                            @click="close"/>
-                    </footer>
-                </div>
-            </b-dropdown-item>
-        </b-dropdown>
-    </div>
-</template>
-
-<script>
-import PagesApi from "../PagesApi.js";
-import {morphToNotification} from "../api.js";
-
-export default {
-    name: "PageActions",
-    props: {
-        item: { type: Object, required: true }
-    },
-    created() {
-        this.isLoading = true;
-        this.fetchData()
-    },
-    data() {
-        return {
-            STAGE_PUBLISHED: PagesApi.STAGE_PUBLISHED,
-            pagesApi: new PagesApi(),
-            movePageSearchQuery: '',
-            isLoading: false,
-            pagesList: []
-        }
-    },
-    computed: {
-        sortedPagesList() {
-            // Sort with Home page (slug '/') at the top, then alphabetically by title
-            return [...this.pagesList].sort((a, b) => {
-                if (a.slug === '/') return -1;
-                if (b.slug === '/') return 1;
-                return a.title.localeCompare(b.title);
-            });
-        }
-    },
-    watch: {
-        'movePageSearchQuery': 'fetchData'
-    },
-    methods: {
-        async fetchData() {
-            let data = await this.pagesApi.list({ inTrash: false, page: 1, q: this.movePageSearchQuery });
-            this.pagesList = data.items;
-            this.isLoading = false;
-        },
-        async publish() {
-            let item = await this.pagesApi.publish(this.item.id);
-            this.$emit('update', item);
-        },
-        async setParentPage(parentPage) {
-            // Don't allow moving to current parent
-            if (this.isCurrentParent(parentPage)) {
-                return;
-            }
-            let data = await this.pagesApi.update({id: this.item.id, parent: parentPage.id, autoConvertToDraft: 'no', version: false});
-            this.$buefy.toast.open(morphToNotification(data));
-            this.$emit('reload');
-        },
-        close() {
-            this.$refs.moveDropdown.toggle();
-        },
-        isCurrentParent(page) {
-            if (!this.item.parent) return false;
-            // Handle both cases: parent as object or parent as ID
-            const parentId = typeof this.item.parent === 'object' ? this.item.parent.id : this.item.parent;
-            return page.id === parentId;
-        },
-        getOptionStyle(option) {
-            let style = '';
-            if (option.slug === '/') {
-                style += 'font-weight: bold;';
-            }
-            if (this.isCurrentParent(option)) {
-                style += ' opacity: 0.5; cursor: not-allowed;';
-            }
-            return style;
-        }
-    }
-}
-</script>
-
-<style scoped>
-    .modal-card-title {
-        flex-shrink: unset;
-        flex-grow: unset;
-    }
-</style>
-
-<style>
-    .move-page-dropdown .dropdown-content {
-        padding-top: 0;
-        padding-bottom: 0;
-    }
-
-    .move-page-dropdown .dropdown-menu {
-        overflow: visible !important;
-        min-width: 20rem;
-    }
-</style>