Prevents link navigation inside vie modes when in iframe. Creates style file for overriding classes when is on iframe. Separates concept of iframe mode and read mode, to allow future iframes where we can select items.
This commit is contained in:
Mateus Machado Luna
parent
dd8f83313c
commit
6315da7589
|
|
@ -2,7 +2,10 @@
|
|||
<div
|
||||
id="tainacan-admin-app"
|
||||
class="columns is-fullheight"
|
||||
:class="{ 'tainacan-admin-read-mode': isReadMode }">
|
||||
:class="{
|
||||
'tainacan-admin-iframe-mode': $route.query.iframemode,
|
||||
'tainacan-admin-read-mode': $route.query.readmode
|
||||
}">
|
||||
<template v-if="activeRoute == 'HomePage'">
|
||||
<tainacan-header />
|
||||
<router-view />
|
||||
|
|
@ -52,8 +55,7 @@
|
|||
return {
|
||||
isMenuCompressed: false,
|
||||
isRepositoryLevel : true,
|
||||
activeRoute: '/collections',
|
||||
isReadMode: false
|
||||
activeRoute: '/collections'
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
|
@ -72,7 +74,6 @@
|
|||
this.isMenuCompressed = (to.params.collectionId != undefined);
|
||||
this.activeRoute = to.name;
|
||||
this.isRepositoryLevel = this.$route.params.collectionId == undefined;
|
||||
this.isReadMode = this.$route.query.readmode;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -149,31 +150,5 @@
|
|||
}
|
||||
}
|
||||
|
||||
// READ MODE
|
||||
// Used on gutenberg blocks, hiding content
|
||||
.tainacan-admin-read-mode#tainacan-admin-app {
|
||||
#primary-menu,
|
||||
#menu-compress-button,
|
||||
#tainacan-header,
|
||||
#tainacan-repository-subheader,
|
||||
#tainacan-subheader {
|
||||
display: none;
|
||||
}
|
||||
#repository-container .is-secondary-content {
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
|
||||
.page-container-small {
|
||||
height: 100%;
|
||||
|
||||
#item-creation-options-dropdown,
|
||||
.tabs,
|
||||
#items-list-results .selection-control {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -75,7 +75,7 @@
|
|||
|
||||
<!-- Context menu for right click selection -->
|
||||
<div
|
||||
v-if="cursorPosY > 0 && cursorPosX > 0"
|
||||
v-if="cursorPosY > 0 && cursorPosX > 0 && !$route.query.readmode"
|
||||
class="context-menu">
|
||||
|
||||
<!-- Backdrop for escaping context menu -->
|
||||
|
|
@ -89,12 +89,12 @@
|
|||
:style="{ top: cursorPosY + 'px', left: cursorPosX + 'px' }">
|
||||
<b-dropdown-item
|
||||
@click="openItem()"
|
||||
v-if="!isOnTrash">
|
||||
v-if="!isOnTrash && !$route.query.iframemode">
|
||||
{{ $i18n.getFrom('items','view_item') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
@click="openItemOnNewTab()"
|
||||
v-if="!isOnTrash">
|
||||
v-if="!isOnTrash && !$route.query.iframemode">
|
||||
{{ $i18n.get('label_open_item_new_tab') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
|
|
@ -104,12 +104,12 @@
|
|||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
@click="goToItemEditPage(contextMenuItem)"
|
||||
v-if="contextMenuItem != null && contextMenuItem.current_user_can_edit">
|
||||
v-if="contextMenuItem != null && contextMenuItem.current_user_can_edit && !$route.query.iframemode">
|
||||
{{ $i18n.getFrom('items','edit_item') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
@click="deleteOneItem(contextMenuItem.id)"
|
||||
v-if="contextMenuItem != null && contextMenuItem.current_user_can_edit">
|
||||
v-if="contextMenuItem != null && contextMenuItem.current_user_can_edit && !$route.query.iframemode">
|
||||
{{ $i18n.get('label_delete_item') }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
|
@ -130,7 +130,7 @@
|
|||
<!-- Checkbox -->
|
||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||
<div
|
||||
v-if="collectionId"
|
||||
v-if="collectionId && !$route.query.readmode"
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="grid-item-checkbox">
|
||||
<b-checkbox
|
||||
|
|
@ -176,7 +176,7 @@
|
|||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="item.current_user_can_edit"
|
||||
v-if="item.current_user_can_edit && !$route.query.iframemode"
|
||||
class="actions-area"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<a
|
||||
|
|
@ -249,7 +249,7 @@
|
|||
<!-- Checkbox -->
|
||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||
<div
|
||||
v-if="collectionId"
|
||||
v-if="collectionId && !$route.query.readmode"
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="masonry-item-checkbox">
|
||||
<label
|
||||
|
|
@ -288,7 +288,7 @@
|
|||
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="item.current_user_can_edit"
|
||||
v-if="item.current_user_can_edit && !$route.query.iframemode"
|
||||
class="actions-area"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<a
|
||||
|
|
@ -356,7 +356,7 @@
|
|||
<!-- Checkbox -->
|
||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||
<div
|
||||
v-if="collectionId"
|
||||
v-if="collectionId && !$route.query.readmode"
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="card-checkbox">
|
||||
<b-checkbox
|
||||
|
|
@ -386,7 +386,7 @@
|
|||
</div>
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="item.current_user_can_edit"
|
||||
v-if="item.current_user_can_edit && !$route.query.iframemode"
|
||||
class="actions-area"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<a
|
||||
|
|
@ -519,7 +519,7 @@
|
|||
<!-- Checkbox -->
|
||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||
<div
|
||||
v-if="collectionId"
|
||||
v-if="collectionId && !$route.query.readmode"
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="record-checkbox">
|
||||
<label
|
||||
|
|
@ -574,7 +574,7 @@
|
|||
</div>
|
||||
<!-- Actions -->
|
||||
<div
|
||||
v-if="item.current_user_can_edit"
|
||||
v-if="item.current_user_can_edit && !$route.query.iframemode"
|
||||
class="actions-area"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<a
|
||||
|
|
@ -671,7 +671,7 @@
|
|||
<tr>
|
||||
<!-- Checking list -->
|
||||
<th
|
||||
v-if="collectionId">
|
||||
v-if="collectionId && !$route.query.readmode">
|
||||
|
||||
<!-- nothing to show on header for checkboxes -->
|
||||
</th>
|
||||
|
|
@ -708,7 +708,7 @@
|
|||
<!-- Checking list -->
|
||||
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
|
||||
<td
|
||||
v-if="collectionId"
|
||||
v-if="collectionId && !$route.query.readmode"
|
||||
:class="{ 'is-selecting': isSelectingItems }"
|
||||
class="checkbox-cell">
|
||||
<b-checkbox
|
||||
|
|
@ -815,7 +815,7 @@
|
|||
|
||||
<!-- Actions -->
|
||||
<td
|
||||
v-if="item.current_user_can_edit"
|
||||
v-if="item.current_user_can_edit && !$route.query.iframemode"
|
||||
class="actions-cell"
|
||||
:label="$i18n.get('label_actions')">
|
||||
<div class="actions-container">
|
||||
|
|
@ -914,6 +914,19 @@ export default {
|
|||
this.selectedItemsIDs.push(false);
|
||||
this.selectedItems.push(false);
|
||||
}
|
||||
|
||||
// Disables every link in case we're inside an iframe
|
||||
if (this.$route.query.iframemode) {
|
||||
jQuery(document).ready(() =>{
|
||||
jQuery('a[data-linkto="item"]').click((event) => {
|
||||
this.$console.log("Preventing link navigation inside gutenberg modal iframe.");
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
return false;
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
watch: {
|
||||
selectedItems() {
|
||||
|
|
@ -1138,25 +1151,31 @@ export default {
|
|||
if ($event.ctrlKey || $event.shiftKey) {
|
||||
this.$set(this.selectedItems, index, !this.selectedItems[index]);
|
||||
} else {
|
||||
if(this.isOnTrash){
|
||||
this.$toast.open({
|
||||
duration: 3000,
|
||||
message: this.$i18n.get('info_warning_remove_from_trash_first'),
|
||||
position: 'is-bottom',
|
||||
type: 'is-warning'
|
||||
});
|
||||
} else {
|
||||
this.$router.push(this.$routerHelper.getItemPath(item.collection_id, item.id));
|
||||
if (!this.$route.query.iframemode && this.$route.query.iframemode) {
|
||||
this.$set(this.selectedItems, index, !this.selectedItems[index]);
|
||||
} else if (!this.$route.query.iframemode && !this.$route.query.readmode) {
|
||||
if(this.isOnTrash){
|
||||
this.$toast.open({
|
||||
duration: 3000,
|
||||
message: this.$i18n.get('info_warning_remove_from_trash_first'),
|
||||
position: 'is-bottom',
|
||||
type: 'is-warning'
|
||||
});
|
||||
} else {
|
||||
this.$router.push(this.$routerHelper.getItemPath(item.collection_id, item.id));
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onRightClickItem($event, item, index) {
|
||||
$event.preventDefault();
|
||||
if (!this.$route.query.readmode) {
|
||||
$event.preventDefault();
|
||||
|
||||
this.cursorPosX = $event.clientX;
|
||||
this.cursorPosY = $event.clientY;
|
||||
this.contextMenuItem = item;
|
||||
this.contextMenuIndex = index;
|
||||
this.cursorPosX = $event.clientX;
|
||||
this.cursorPosY = $event.clientY;
|
||||
this.contextMenuItem = item;
|
||||
this.contextMenuIndex = index;
|
||||
}
|
||||
},
|
||||
clearContextMenu() {
|
||||
this.cursorPosX = -1;
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@
|
|||
<!-- Item Creation Dropdown, only on Admin -->
|
||||
<div
|
||||
class="search-control-item"
|
||||
v-if="!isOnTheme">
|
||||
v-if="!isOnTheme && !$route.query.iframemode">
|
||||
<b-dropdown
|
||||
:mobile-modal="true"
|
||||
id="item-creation-options-dropdown"
|
||||
|
|
@ -517,7 +517,9 @@
|
|||
</div>
|
||||
|
||||
<!-- Exposers or alternative links modal button -->
|
||||
<div class="search-control-item">
|
||||
<div
|
||||
v-if="!$route.query.iframemode"
|
||||
class="search-control-item">
|
||||
<button
|
||||
class="button is-white"
|
||||
:aria-label="$i18n.get('label_urls')"
|
||||
|
|
|
|||
|
|
@ -165,7 +165,7 @@
|
|||
<!-- Item Creation Dropdown, only on Admin -->
|
||||
<div
|
||||
class="search-control-item"
|
||||
v-if="!isOnTheme">
|
||||
v-if="!isOnTheme && !$route.query.iframemode">
|
||||
<b-dropdown
|
||||
:mobile-modal="true"
|
||||
id="item-creation-options-dropdown"
|
||||
|
|
@ -501,7 +501,9 @@
|
|||
</div>
|
||||
|
||||
<!-- Exposers or alternative links modal button -->
|
||||
<div class="search-control-item">
|
||||
<div
|
||||
v-if="!$route.query.iframemode"
|
||||
class="search-control-item">
|
||||
<button
|
||||
class="button is-white"
|
||||
:aria-label="$i18n.get('label_urls')"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,61 @@
|
|||
// IFRAME MODE AND READ MODE
|
||||
// Used on gutenberg blocks, hiding content not relevant to be rendered inside iframe
|
||||
#tainacan-admin-app.tainacan-admin-iframe-mode {
|
||||
#primary-menu,
|
||||
#menu-compress-button,
|
||||
#tainacan-header,
|
||||
#tainacan-repository-subheader,
|
||||
#tainacan-subheader {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
#repository-container .is-secondary-content {
|
||||
margin-top: 0;
|
||||
height: 100%;
|
||||
|
||||
.page-container-small {
|
||||
height: 100%;
|
||||
|
||||
#item-creation-options-dropdown,
|
||||
.tabs,
|
||||
#items-list-results .selection-control {
|
||||
display: none;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 769px) {
|
||||
#filters-desktop-aside {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
#tainacan-admin-app.tainacan-admin-read-mode {
|
||||
|
||||
#items-list-area {
|
||||
.tainacan-table {
|
||||
tr:hover { background-color: transparent !important; cursor: default; }
|
||||
}
|
||||
.tainacan-card {
|
||||
&:hover { background-color: transparent !important; cursor: default; }
|
||||
.metadata-title { padding-left: 1.5rem !important; margin-bottom: 0; }
|
||||
&:hover .metadata-title { background-color: transparent !important }
|
||||
}
|
||||
.tainacan-grid-item {
|
||||
&:hover, &:hover .metadata-title { background-color: transparent; cursor: default; }
|
||||
a { cursor: default; }
|
||||
.metadata-title { margin-left: 6px !important; padding-left: 6px !important; }
|
||||
}
|
||||
.tainacan-record {
|
||||
&:hover { background-color: $gray0 !important; cursor: default; }
|
||||
.metadata-title { padding-left: 1.5rem !important; margin-bottom: -0.75rem; }
|
||||
&:hover .metadata-title { background-color: $gray0 !important }
|
||||
}
|
||||
.tainacan-masonry-item {
|
||||
&:hover { background-color: transparent; cursor: default; }
|
||||
&:hover .tainacan-masonry-item-thumbnail { cursor: default; }
|
||||
.metadata-title { margin-left: 6px; }
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -28,6 +28,7 @@
|
|||
@import "../scss/_notices.scss";
|
||||
@import "../scss/_filters-menu-modal.scss";
|
||||
@import "../scss/_repository-level-overrides.scss";
|
||||
@import "../scss/_iframe_read_mode_overrides.scss";
|
||||
|
||||
// Clears wordpress content
|
||||
body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, body.tainacan-admin-page #wp-auth-check-wrap {
|
||||
|
|
|
|||
|
|
@ -423,20 +423,21 @@
|
|||
@media only screen and (max-width: 768px) {
|
||||
.wp-block-tainacan-modal {
|
||||
width: 100%; } }
|
||||
.wp-block-tainacan-modal.large-modal {
|
||||
.wp-block-tainacan-modal.dynamic-modal {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
width: 80vw;
|
||||
height: 80vh; }
|
||||
.wp-block-tainacan-modal.large-modal iframe {
|
||||
.wp-block-tainacan-modal.dynamic-modal iframe {
|
||||
width: calc(100% + 64px);
|
||||
height: calc(100% - 104px);
|
||||
margin-left: -32px; }
|
||||
.wp-block-tainacan-modal.large-modal .modal-footer {
|
||||
.wp-block-tainacan-modal.dynamic-modal .modal-footer-area {
|
||||
height: 68px;
|
||||
background: #dbdbdb;
|
||||
width: calc(100% + 64px);
|
||||
margin: 0px 0 -32px -32px; }
|
||||
margin: 0px 0 -32px -32px !important;
|
||||
padding: 1.2rem 3rem !important; }
|
||||
.wp-block-tainacan-modal .components-spinner {
|
||||
position: absolute;
|
||||
right: 5%;
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -12,7 +12,7 @@
|
|||
@media only screen and (max-width: 768px) { width: 100%; }
|
||||
|
||||
// Iframe for dynamic modal
|
||||
&.large-modal {
|
||||
&.dynamic-modal {
|
||||
width: 90%;
|
||||
height: 90%;
|
||||
width: 80vw;
|
||||
|
|
@ -24,11 +24,12 @@
|
|||
margin-left: -32px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
.modal-footer-area {
|
||||
height: 68px;
|
||||
background: #dbdbdb;
|
||||
width: calc(100% + 64px);
|
||||
margin: 0px 0 -32px -32px;
|
||||
margin: 0px 0 -32px -32px !important;
|
||||
padding: 1.2rem 3rem !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ export default class DynamicItemsModal extends React.Component {
|
|||
|
||||
if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) {
|
||||
this.fetchCollection(this.props.existingCollectionId);
|
||||
this.setState({ itemsURL: this.props.existingItemsURL ? this.props.existingItemsURL : '/collections/'+ this.props.existingCollectionId + '/items/?readmode=true' });
|
||||
this.setState({ itemsURL: this.props.existingItemsURL ? this.props.existingItemsURL : '/collections/'+ this.props.existingCollectionId + '/items/?readmode=true&iframemode=true' });
|
||||
} else {
|
||||
this.setState({ collectionPage: 1 });
|
||||
this.fetchModalCollections();
|
||||
|
|
@ -99,7 +99,7 @@ export default class DynamicItemsModal extends React.Component {
|
|||
selectCollection(selectedCollectionId) {
|
||||
this.setState({
|
||||
collectionId: selectedCollectionId,
|
||||
itemsURL: '/collections/' + selectedCollectionId + '/items/?readmode=true'
|
||||
itemsURL: '/collections/' + selectedCollectionId + '/items/?readmode=true&iframemode=true'
|
||||
});
|
||||
|
||||
this.props.onSelectCollection(selectedCollectionId);
|
||||
|
|
@ -156,12 +156,23 @@ export default class DynamicItemsModal extends React.Component {
|
|||
return this.state.collectionId != null && this.state.collectionId != undefined ? (
|
||||
// Items modal
|
||||
<Modal
|
||||
className="wp-block-tainacan-modal large-modal"
|
||||
className="wp-block-tainacan-modal dynamic-modal"
|
||||
title={__('Select the desired items from collection ' + this.state.collectionName, 'tainacan')}
|
||||
onRequestClose={ () => this.cancelSelection() }
|
||||
contentLabel={__('Select items', 'tainacan')}>
|
||||
<iframe src={ tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#' + this.state.itemsURL }></iframe>
|
||||
<div class="modal-footer"></div>
|
||||
<div className="modal-footer-area">
|
||||
<Button
|
||||
isDefault
|
||||
onClick={ () => { this.cancelSelection() }}>
|
||||
{__('Cancel', 'tainacan')}
|
||||
</Button>
|
||||
<Button
|
||||
isPrimary
|
||||
onClick={ () => console.log("Feito!") }>
|
||||
{__('Select items', 'tainacan')}
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
) : (
|
||||
// Collections modal
|
||||
|
|
|
|||
Loading…
Reference in New Issue