tmdinosaurcenter
/
tainacan
mirror of https://github.com/tainacan/tainacan
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

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 2019-04-26 13:07:51 -03:00
parent dd8f83313c
commit 6315da7589
10 changed files with 149 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/admin/admin.vue
View File

@ -2,7 +2,10 @@
<div <div
id="tainacan-admin-app" id="tainacan-admin-app"
class="columns is-fullheight" 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'"> <template v-if="activeRoute == 'HomePage'">
<tainacan-header /> <tainacan-header />
<router-view /> <router-view />
@ -52,8 +55,7 @@
return { return {
isMenuCompressed: false, isMenuCompressed: false,
isRepositoryLevel : true, isRepositoryLevel : true,
activeRoute: '/collections', activeRoute: '/collections'
isReadMode: false
} }
}, },
components: { components: {
@ -72,7 +74,6 @@
this.isMenuCompressed = (to.params.collectionId != undefined); this.isMenuCompressed = (to.params.collectionId != undefined);
this.activeRoute = to.name; this.activeRoute = to.name;
this.isRepositoryLevel = this.$route.params.collectionId == undefined; 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> </style>

79
src/admin/components/lists/items-list.vue
View File

@ -75,7 +75,7 @@
<!-- Context menu for right click selection --> <!-- Context menu for right click selection -->
<div <div
v-if="cursorPosY > 0 && cursorPosX > 0" v-if="cursorPosY > 0 && cursorPosX > 0 && !$route.query.readmode"
class="context-menu"> class="context-menu">
<!-- Backdrop for escaping context menu --> <!-- Backdrop for escaping context menu -->
@ -89,12 +89,12 @@
:style="{ top: cursorPosY + 'px', left: cursorPosX + 'px' }"> :style="{ top: cursorPosY + 'px', left: cursorPosX + 'px' }">
<b-dropdown-item <b-dropdown-item
@click="openItem()" @click="openItem()"
v-if="!isOnTrash"> v-if="!isOnTrash && !$route.query.iframemode">
{{ $i18n.getFrom('items','view_item') }} {{ $i18n.getFrom('items','view_item') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
@click="openItemOnNewTab()" @click="openItemOnNewTab()"
v-if="!isOnTrash"> v-if="!isOnTrash && !$route.query.iframemode">
{{ $i18n.get('label_open_item_new_tab') }} {{ $i18n.get('label_open_item_new_tab') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
@ -104,12 +104,12 @@
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
@click="goToItemEditPage(contextMenuItem)" @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') }} {{ $i18n.getFrom('items','edit_item') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
@click="deleteOneItem(contextMenuItem.id)" @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') }} {{ $i18n.get('label_delete_item') }}
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>
@ -130,7 +130,7 @@
<!-- Checkbox --> <!-- Checkbox -->
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done --> <!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
<div <div
v-if="collectionId" v-if="collectionId && !$route.query.readmode"
:class="{ 'is-selecting': isSelectingItems }" :class="{ 'is-selecting': isSelectingItems }"
class="grid-item-checkbox"> class="grid-item-checkbox">
<b-checkbox <b-checkbox
@ -176,7 +176,7 @@
<!-- Actions --> <!-- Actions -->
<div <div
v-if="item.current_user_can_edit" v-if="item.current_user_can_edit && !$route.query.iframemode"
class="actions-area" class="actions-area"
:label="$i18n.get('label_actions')"> :label="$i18n.get('label_actions')">
<a <a
@ -249,7 +249,7 @@
<!-- Checkbox --> <!-- Checkbox -->
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done --> <!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
<div <div
v-if="collectionId" v-if="collectionId && !$route.query.readmode"
:class="{ 'is-selecting': isSelectingItems }" :class="{ 'is-selecting': isSelectingItems }"
class="masonry-item-checkbox"> class="masonry-item-checkbox">
<label <label
@ -288,7 +288,7 @@
<!-- Actions --> <!-- Actions -->
<div <div
v-if="item.current_user_can_edit" v-if="item.current_user_can_edit && !$route.query.iframemode"
class="actions-area" class="actions-area"
:label="$i18n.get('label_actions')"> :label="$i18n.get('label_actions')">
<a <a
@ -356,7 +356,7 @@
<!-- Checkbox --> <!-- Checkbox -->
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done --> <!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
<div <div
v-if="collectionId" v-if="collectionId && !$route.query.readmode"
:class="{ 'is-selecting': isSelectingItems }" :class="{ 'is-selecting': isSelectingItems }"
class="card-checkbox"> class="card-checkbox">
<b-checkbox <b-checkbox
@ -386,7 +386,7 @@
</div> </div>
<!-- Actions --> <!-- Actions -->
<div <div
v-if="item.current_user_can_edit" v-if="item.current_user_can_edit && !$route.query.iframemode"
class="actions-area" class="actions-area"
:label="$i18n.get('label_actions')"> :label="$i18n.get('label_actions')">
<a <a
@ -519,7 +519,7 @@
<!-- Checkbox --> <!-- Checkbox -->
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done --> <!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
<div <div
v-if="collectionId" v-if="collectionId && !$route.query.readmode"
:class="{ 'is-selecting': isSelectingItems }" :class="{ 'is-selecting': isSelectingItems }"
class="record-checkbox"> class="record-checkbox">
<label <label
@ -574,7 +574,7 @@
</div> </div>
<!-- Actions --> <!-- Actions -->
<div <div
v-if="item.current_user_can_edit" v-if="item.current_user_can_edit && !$route.query.iframemode"
class="actions-area" class="actions-area"
:label="$i18n.get('label_actions')"> :label="$i18n.get('label_actions')">
<a <a
@ -671,7 +671,7 @@
<tr> <tr>
<!-- Checking list --> <!-- Checking list -->
<th <th
v-if="collectionId"> v-if="collectionId && !$route.query.readmode">
&nbsp; &nbsp;
<!-- nothing to show on header for checkboxes --> <!-- nothing to show on header for checkboxes -->
</th> </th>
@ -708,7 +708,7 @@
<!-- Checking list --> <!-- Checking list -->
<!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done --> <!-- TODO: Remove v-if="collectionId" from this element when the bulk edit in repository is done -->
<td <td
v-if="collectionId" v-if="collectionId && !$route.query.readmode"
:class="{ 'is-selecting': isSelectingItems }" :class="{ 'is-selecting': isSelectingItems }"
class="checkbox-cell"> class="checkbox-cell">
<b-checkbox <b-checkbox
@ -815,7 +815,7 @@
<!-- Actions --> <!-- Actions -->
<td <td
v-if="item.current_user_can_edit" v-if="item.current_user_can_edit && !$route.query.iframemode"
class="actions-cell" class="actions-cell"
:label="$i18n.get('label_actions')"> :label="$i18n.get('label_actions')">
<div class="actions-container"> <div class="actions-container">
@ -914,6 +914,19 @@ export default {
this.selectedItemsIDs.push(false); this.selectedItemsIDs.push(false);
this.selectedItems.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: { watch: {
selectedItems() { selectedItems() {
@ -1138,25 +1151,31 @@ export default {
if ($event.ctrlKey || $event.shiftKey) { if ($event.ctrlKey || $event.shiftKey) {
this.$set(this.selectedItems, index, !this.selectedItems[index]); this.$set(this.selectedItems, index, !this.selectedItems[index]);
} else { } else {
if(this.isOnTrash){ if (!this.$route.query.iframemode && this.$route.query.iframemode) {
this.$toast.open({ this.$set(this.selectedItems, index, !this.selectedItems[index]);
duration: 3000, } else if (!this.$route.query.iframemode && !this.$route.query.readmode) {
message: this.$i18n.get('info_warning_remove_from_trash_first'), if(this.isOnTrash){
position: 'is-bottom', this.$toast.open({
type: 'is-warning' duration: 3000,
}); message: this.$i18n.get('info_warning_remove_from_trash_first'),
} else { position: 'is-bottom',
this.$router.push(this.$routerHelper.getItemPath(item.collection_id, item.id)); type: 'is-warning'
});
} else {
this.$router.push(this.$routerHelper.getItemPath(item.collection_id, item.id));
}
} }
} }
}, },
onRightClickItem($event, item, index) { onRightClickItem($event, item, index) {
$event.preventDefault(); if (!this.$route.query.readmode) {
$event.preventDefault();
this.cursorPosX = $event.clientX; this.cursorPosX = $event.clientX;
this.cursorPosY = $event.clientY; this.cursorPosY = $event.clientY;
this.contextMenuItem = item; this.contextMenuItem = item;
this.contextMenuIndex = index; this.contextMenuIndex = index;
}
}, },
clearContextMenu() { clearContextMenu() {
this.cursorPosX = -1; this.cursorPosX = -1;

6
src/admin/pages/lists/items-page.vue
View File

@ -167,7 +167,7 @@
<!-- Item Creation Dropdown, only on Admin --> <!-- Item Creation Dropdown, only on Admin -->
<div <div
class="search-control-item" class="search-control-item"
v-if="!isOnTheme"> v-if="!isOnTheme && !$route.query.iframemode">
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
id="item-creation-options-dropdown" id="item-creation-options-dropdown"
@ -517,7 +517,9 @@
</div> </div>
<!-- Exposers or alternative links modal button --> <!-- Exposers or alternative links modal button -->
<div class="search-control-item"> <div
v-if="!$route.query.iframemode"
class="search-control-item">
<button <button
class="button is-white" class="button is-white"
:aria-label="$i18n.get('label_urls')" :aria-label="$i18n.get('label_urls')"

6
src/admin/pages/lists/term-items-page.vue
View File

@ -165,7 +165,7 @@
<!-- Item Creation Dropdown, only on Admin --> <!-- Item Creation Dropdown, only on Admin -->
<div <div
class="search-control-item" class="search-control-item"
v-if="!isOnTheme"> v-if="!isOnTheme && !$route.query.iframemode">
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
id="item-creation-options-dropdown" id="item-creation-options-dropdown"
@ -501,7 +501,9 @@
</div> </div>
<!-- Exposers or alternative links modal button --> <!-- Exposers or alternative links modal button -->
<div class="search-control-item"> <div
v-if="!$route.query.iframemode"
class="search-control-item">
<button <button
class="button is-white" class="button is-white"
:aria-label="$i18n.get('label_urls')" :aria-label="$i18n.get('label_urls')"

61
src/admin/scss/_iframe_read_mode_overrides.scss Normal file
View File

@ -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; }
}
}
}

1
src/admin/scss/tainacan-admin.scss
View File

@ -28,6 +28,7 @@
@import "../scss/_notices.scss"; @import "../scss/_notices.scss";
@import "../scss/_filters-menu-modal.scss"; @import "../scss/_filters-menu-modal.scss";
@import "../scss/_repository-level-overrides.scss"; @import "../scss/_repository-level-overrides.scss";
@import "../scss/_iframe_read_mode_overrides.scss";
// Clears wordpress content // Clears wordpress content
body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, body.tainacan-admin-page #wp-auth-check-wrap { body.tainacan-admin-page #adminmenumain, body.tainacan-admin-page #wpfooter, body.tainacan-admin-page #wp-auth-check-wrap {

9
src/assets/css/tainacan-gutenberg-blocks-style.css
View File

@ -423,20 +423,21 @@
@media only screen and (max-width: 768px) { @media only screen and (max-width: 768px) {
.wp-block-tainacan-modal { .wp-block-tainacan-modal {
width: 100%; } } width: 100%; } }
.wp-block-tainacan-modal.large-modal { .wp-block-tainacan-modal.dynamic-modal {
width: 90%; width: 90%;
height: 90%; height: 90%;
width: 80vw; width: 80vw;
height: 80vh; } height: 80vh; }
.wp-block-tainacan-modal.large-modal iframe { .wp-block-tainacan-modal.dynamic-modal iframe {
width: calc(100% + 64px); width: calc(100% + 64px);
height: calc(100% - 104px); height: calc(100% - 104px);
margin-left: -32px; } margin-left: -32px; }
.wp-block-tainacan-modal.large-modal .modal-footer { .wp-block-tainacan-modal.dynamic-modal .modal-footer-area {
height: 68px; height: 68px;
background: #dbdbdb; background: #dbdbdb;
width: calc(100% + 64px); 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 { .wp-block-tainacan-modal .components-spinner {
position: absolute; position: absolute;
right: 5%; right: 5%;

2
src/assets/css/tainacan-gutenberg-blocks-style.css.map
View File

File diff suppressed because one or more lines are too long

7
src/gutenberg-blocks/gutenberg-blocks-style.scss
View File

@ -12,7 +12,7 @@
@media only screen and (max-width: 768px) { width: 100%; } @media only screen and (max-width: 768px) { width: 100%; }
// Iframe for dynamic modal // Iframe for dynamic modal
&.large-modal { &.dynamic-modal {
width: 90%; width: 90%;
height: 90%; height: 90%;
width: 80vw; width: 80vw;
@ -24,11 +24,12 @@
margin-left: -32px; margin-left: -32px;
} }
.modal-footer { .modal-footer-area {
height: 68px; height: 68px;
background: #dbdbdb; background: #dbdbdb;
width: calc(100% + 64px); width: calc(100% + 64px);
margin: 0px 0 -32px -32px; margin: 0px 0 -32px -32px !important;
padding: 1.2rem 3rem !important;
} }
} }

19
src/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-modal.js
View File

@ -41,7 +41,7 @@ export default class DynamicItemsModal extends React.Component {
if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) { if (this.props.existingCollectionId != null && this.props.existingCollectionId != undefined) {
this.fetchCollection(this.props.existingCollectionId); 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 { } else {
this.setState({ collectionPage: 1 }); this.setState({ collectionPage: 1 });
this.fetchModalCollections(); this.fetchModalCollections();
@ -99,7 +99,7 @@ export default class DynamicItemsModal extends React.Component {
selectCollection(selectedCollectionId) { selectCollection(selectedCollectionId) {
this.setState({ this.setState({
collectionId: selectedCollectionId, collectionId: selectedCollectionId,
itemsURL: '/collections/' + selectedCollectionId + '/items/?readmode=true' itemsURL: '/collections/' + selectedCollectionId + '/items/?readmode=true&iframemode=true'
}); });
this.props.onSelectCollection(selectedCollectionId); this.props.onSelectCollection(selectedCollectionId);
@ -156,12 +156,23 @@ export default class DynamicItemsModal extends React.Component {
return this.state.collectionId != null && this.state.collectionId != undefined ? ( return this.state.collectionId != null && this.state.collectionId != undefined ? (
// Items modal // Items modal
<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')} title={__('Select the desired items from collection ' + this.state.collectionName, 'tainacan')}
onRequestClose={ () => this.cancelSelection() } onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select items', 'tainacan')}> contentLabel={__('Select items', 'tainacan')}>
<iframe src={ tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#' + this.state.itemsURL }></iframe> <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> </Modal>
) : ( ) : (
// Collections modal // Collections modal