+
+ ');
+ }
+
+ /**
+ * @inheritdoc
+ */
+ public function get_form_labels() {
+ return [
+ 'link-as-button' => [
+ 'title' => __( 'Display link as a button', 'tainacan' ),
+ 'description' => __( 'Style the link to be displayed as a button instead of a simple textual link.', 'tainacan' ),
+ ],
+ 'force-iframe' => [
+ 'title' => __( 'Force iframe', 'tainacan' ),
+ 'description' => __( 'Force the URL to be displayed in an iframe in case the content is not embeddable by WordPress.', 'tainacan' ),
+ ],
+ 'iframe-min-height' => [
+ 'title' => __( 'Forced iframe minimum height', 'tainacan' ),
+ 'description' => __( 'If forcing the use of an iframe, sets the height attribute, in pixels. Leave it empty to be 100% of the container.', 'tainacan' ),
+ ],
+ 'iframe-allowfullscreen' => [
+ 'title' => __( 'Allow fullscreen on forced iframe', 'tainacan' ),
+ 'description' => __( 'If forcing the use of an iframe, allows it to request fullscreen to the browser.', 'tainacan' ),
+ ],
+ 'is-image' => [
+ 'title' => __( 'Is link to external image', 'tainacan' ),
+ 'description' => __( 'If you are linking directly to an external image, use this option so it can be properly embedded.', 'tainacan' ),
+ ]
+ ];
+ }
+
+ /**
+ * Get the value as a HTML string with links
+ * @return string
+ */
+ public function get_value_as_html(\Tainacan\Entities\Item_Metadata_Entity $item_metadata) {
+
+ $value = $item_metadata->get_value();
+ $link_as_button = $this->get_option('link-as-button') == 'yes';
+ $return = '';
+
+ $return .= $link_as_button ? '' : '';
+
+ return $return;
+ }
+
+ /**
+ * Get the a single value as a HTML string with links
+ * @return string
+ */
+ public function get_single_value_as_html($value) {
+ global $wp_embed;
+
+ $link_as_button = $this->get_option('link-as-button') == 'yes';
+ $return = '';
+
+ if ($link_as_button) {
+ $mkstr = preg_replace(
+ '/\[([^\]]+)\]\(([^\)]+)\)/',
+ '',
+ $value
+ );
+ $return = $this->make_clickable_links($mkstr);
+ } else {
+
+ // First, we try WordPress autoembed
+ $embed = $wp_embed->autoembed($value);
+
+ // If it didn't work, it will still ba a URL
+ if ( esc_url($embed) == esc_url($value) ) {
+
+ // Than we can force the usage of an iframe
+ if ( $this->get_option('force-iframe') == 'yes' ) {
+
+ // URL points to an image file
+ if ( $this->get_option('is-image') == 'yes' ) {
+ $return = sprintf('
+
+
+
+ #empty>
{{ $i18n.get('info_no_user_found') }}
@@ -51,7 +51,7 @@
diff --git a/src/views/admin/components/navigation/tainacan-header.vue b/src/views/admin/components/navigation/tainacan-header.vue
index 8bdf3a320..00319fdce 100644
--- a/src/views/admin/components/navigation/tainacan-header.vue
+++ b/src/views/admin/components/navigation/tainacan-header.vue
@@ -7,7 +7,6 @@
v-if="!$adminOptions.hideTainacanHeaderHomeButton"
class="level-item home-area">
-
+
@@ -44,11 +42,11 @@ v-if="!$adminOptions.hideTainacanHeaderSearchInput" class="is-hidden-tablet">
- + class="button" + :aria-label="$i18n.get('exporters')" + @click="openAvailableExportersModal"> - + {{ $i18n.get('exporters') }}
- + class="button"> - + {{ $i18n.get('label_view_collection_on_website') }}
- + class="button"> - + {{ $i18n.get('label_view_taxonomies_on_website') }}
-
+ class="button">
-
+
{{ $i18n.get('label_view_collections_on_website') }}
@@ -126,14 +132,11 @@ export default {
}
},
computed: {
- collection() {
- return this.getCollection();
- }
+ ...mapGetters('collection', {
+ 'collection': 'getCollection'
+ })
},
methods: {
- ...mapGetters('collection', [
- 'getCollection'
- ]),
openAvailableExportersModal(){
this.$buefy.modal.open({
diff --git a/src/views/admin/components/navigation/tainacan-title.vue b/src/views/admin/components/navigation/tainacan-title.vue
index e729a0076..2811d469b 100644
--- a/src/views/admin/components/navigation/tainacan-title.vue
+++ b/src/views/admin/components/navigation/tainacan-title.vue
@@ -5,8 +5,8 @@
{{ pageTitle }} {{ !isRepositoryLevel && collection && collection.name ? collection.name : '' }}
+ class="back-link has-text-secondary"
+ @click="$router.go(-1)">
{{ $i18n.get('back') }}
@@ -14,45 +14,40 @@ @@ -61,6 +56,7 @@ \ No newline at end of file diff --git a/src/views/admin/components/other/item-copy-dialog.vue b/src/views/admin/components/other/item-copy-dialog.vue index f26d907e5..c94d68526 100644 --- a/src/views/admin/components/other/item-copy-dialog.vue +++ b/src/views/admin/components/other/item-copy-dialog.vue @@ -1,12 +1,12 @@+ class="tainacan-form tainacan-dialog dialog">@@ -53,7 +53,7 @@ type="submit" class="button is-outlined" :disabled="isLoading" - @click="onConfirm(newItems); $parent.close();"> + @click="onConfirm(newItems); $emit('close');"> {{ hasCopied ? $i18n.get('label_return_to_list') : $i18n.get('cancel') }} @@ -105,9 +105,12 @@ type: Function, default: () => {} }, - collectionId: String, + collectionId: [String, Number], itemId: String }, + emits: [ + 'close' + ], data() { return { isLoading: Boolean, @@ -169,7 +172,7 @@ let sequenceId = group.id; this.isCreatingSequenceEditGroup = false; this.$router.push(this.$routerHelper.getCollectionSequenceEditPath(this.collectionId, sequenceId, 1)); - this.$parent.close(); + this.$emit('close'); }); }, openBulkEditionModal() { @@ -192,7 +195,7 @@ closeButtonAriaLabel: this.$i18n.get('close') }); - this.$parent.close(); + this.$emit('close'); }, } } @@ -214,11 +217,11 @@ align-items: flex-end; } - .field.is-horizontal /deep/ .label { + .field.is-horizontal :deep(.label) { white-space: nowrap; } - .field.is-horizontal /deep/ .has-numberinput { + .field.is-horizontal :deep(.has-numberinput) { margin-top: 0; } diff --git a/src/views/admin/components/other/item-creation-status-dialog.vue b/src/views/admin/components/other/item-creation-status-dialog.vue index dde21841a..e85143f93 100644 --- a/src/views/admin/components/other/item-creation-status-dialog.vue +++ b/src/views/admin/components/other/item-creation-status-dialog.vue @@ -1,12 +1,12 @@@@ -16,7 +16,7 @@ + class="tainacan-icon" />+ @update:model-value="copyCount = $event" />+ class="tainacan-form tainacan-dialog dialog">@@ -16,7 +16,7 @@ + class="tainacan-icon" />+ class="tainacan-icon tainacan-icon-18px" + :class="$statusHelper.getIcon(statusOption.slug)" /> {{ statusOption.name }} @@ -53,13 +53,13 @@ type="button" style="margin-right: auto" class="button is-outlined" - @click="$parent.close();"> + @click="$emit('close');"> {{ $i18n.get('cancel') }} @@ -78,6 +78,9 @@ default: () => {} } }, + emits: [ + 'close' + ], data() { return { selectedStatus: !this.$adminOptions.hideItemEditionStatusPublishOption ? 'publish' : 'private' @@ -127,7 +130,7 @@ display: flex; font-size: 1.125em; } - .status-radios /deep/ .b-radio { + .status-radios :deep(.b-radio) { margin-bottom: 0px !important; } .modal-card-foot { diff --git a/src/views/admin/components/other/item-metadatum-errors-tooltip.vue b/src/views/admin/components/other/item-metadatum-errors-tooltip.vue index e3dba9bf2..28b91bfe2 100644 --- a/src/views/admin/components/other/item-metadatum-errors-tooltip.vue +++ b/src/views/admin/components/other/item-metadatum-errors-tooltip.vue @@ -1,7 +1,7 @@ + class="tainacan-help-tooltip-trigger" + @mouseenter="loadMetadataElements">- - + +
- @@ -40,12 +40,12 @@
diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-table.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-table.vue index 4dbe3ab34..bd6952435 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-table.vue +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/components/view-mode-table.vue @@ -12,35 +12,39 @@ class="tainacan-table tainacan-table-skeleton" tabindex="0"> - +- {{ column.name }}++ {{ column.name }} +- + v-for="item in 12" + :key="item"> + @@ -53,25 +57,28 @@+ class="column-default-width skeleton" /> - + - {{ column.name }}++ {{ column.name }} ++ role="listitem"> diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/theme-router.js b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/theme-router.js index 257d44d7a..a32d9e3a8 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/theme-router.js +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/theme-router.js @@ -1,21 +1,26 @@ -import Vue from 'vue'; -import VueRouter from 'vue-router' +import { createRouter, createWebHistory } from 'vue-router'; +import ThemeSearch from '../../theme.vue'; import qs from 'qs'; -Vue.use(VueRouter); +const themeRoutes = [ + // Catch-all route to handle any path + { + path: '/:catchAll(.*)*', + component: ThemeSearch, // The component where you want to respond to changes + props: true, + meta: { isOnTheme: true } + } +]; -const themeRoutes = []; - -export default new VueRouter ({ - mode: 'history', - themeRoutes, - // set custom query resolver +export default createRouter ({ + history: createWebHistory(window.document.location.pathname), + routes: themeRoutes, + // Set custom query resolver. Important for dealing with nested query params such as taxquery objects. parseQuery(query) { return qs.parse(query); }, stringifyQuery(query) { let result = qs.stringify(query); - - return result ? ('?' + result) : ''; + return result ? result : ''; } }); \ No newline at end of file diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/view-modes-mixin.js b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/view-modes-mixin.js index 0c052eb12..0543fcb82 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/view-modes-mixin.js +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/js/view-modes-mixin.js @@ -7,8 +7,10 @@ export const viewModesMixin = { } }, props: { - collectionId: Number, + collectionId: [String, Number], + termId: [String, Number], displayedMetadata: Array, + shouldHideItemsThumbnail: Boolean, items: { type: Array, default: () => [], @@ -78,7 +80,7 @@ export const viewModesMixin = { if (this.queries) { // Inserts information necessary for item by item navigation on single pages this.queries['pos'] = ((this.queries['paged'] - 1) * this.queries['perpage']) + index; - this.queries['source_list'] = this.$root.termId ? 'term' : (!this.$root.collectionId || this.$root.collectionId == 'default' ? 'repository' : 'collection'); + this.queries['source_list'] = this.termId ? 'term' : (!this.collectionId || this.collectionId == 'default' ? 'repository' : 'collection'); this.queries['ref'] = this.$route.path; return itemUrl + '?' + qs.stringify(this.queries); } diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss index 4181202a0..91142695f 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/scss/_view-mode-slideshow.scss @@ -1,3 +1,50 @@ +@keyframes open-full-screen { + from { + opacity: 0; + transform: scale(0.6); + } + to { + opacity: 1; + transform: scale(1.0); + } +} + +.is-fullscreen { + position: fixed !important; + top: 0; + bottom: 0; + left: 0; + right: 0; + width: 100%; + height: 100%; + width: 100vw; + height: 100vh; + z-index: 999999999; + background-color: var(--tainacan-black) !important; + transition: background-color 0.3s ease, width 0.3s ease, height 0.3s ease; + animation: open-full-screen 0.4s ease; + + .filters-menu { + display: none !important; + } + .metadata-alert { + display: none; + visibility: hidden; + } + + .table-wrapper { + overflow: hidden !important; + display: flex; + flex-wrap: nowrap; + flex-direction: column; + justify-content: space-between; + width: 100%; + height: 100%; + height: 100vh; + width: 100vw; + } +} + #close-fullscren-button, #item-page-button, #metedata-panel-button, @@ -439,7 +486,8 @@ border-bottom: 4px solid var(--tainacan-gray2); } - img { + img, + canvas { color: var(--tainacan-white); width: 100%;//85px; height: auto; diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue deleted file mode 100644 index dd9d4bfad..000000000 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme-search/theme-items-page.vue +++ /dev/null @@ -1,1836 +0,0 @@ - -- - + + - + v-html="`` + column.name + ': ' + (item.description != undefined && item.description != '' ? item.description : `` + $i18n.get('label_value_not_provided') + ``)" /> + v-html="renderMetadataWithLabel(item.metadata, column) != '' ? renderMetadataWithLabel(item.metadata, column) : `` + $i18n.get('label_value_not_provided') + ``" /> @@ -203,9 +211,9 @@ placement: 'auto-start', popperClass: ['tainacan-tooltip', 'tooltip'] }" - @click.prevent="starSlideshowFromHere(index)" - class="icon slideshow-icon"> - + class="icon slideshow-icon" + @click.prevent="starSlideshowFromHere(index)"> + @@ -214,7 +222,7 @@- +
+ v-html="getAfterHook(item)" /> -- - - - - - - diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme.js b/src/views/gutenberg-blocks/blocks/faceted-search/theme.js index 53cb3849f..a0b75073f 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme.js +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme.js @@ -1,5 +1,5 @@ // Main imports -import Vue from 'vue'; +import { createApp, h, defineAsyncComponent } from 'vue'; import { Field, Input, @@ -13,6 +13,7 @@ import { Checkbox, Radio, Tag, + Icon, Loading, Dropdown, Modal, @@ -21,13 +22,12 @@ import { Toast, Pagination, Numberinput -} from 'buefy'; +} from '@ntohq/buefy-next'; import VTooltip from 'floating-vue'; import cssVars from 'css-vars-ponyfill'; -import qs from 'qs'; -import VueBlurHash from 'vue-blurhash'; +import VueBlurHash from 'another-vue3-blurhash'; -import ThemeItemsPage from './theme-search/theme-items-page.vue'; +import getDataAttribute from '../../js/compatibility/tainacan-blocks-compat-data-attributes.js'; import ThemeSearch from './theme.vue'; // Remaining imports @@ -38,18 +38,29 @@ import { I18NPlugin, UserPrefsPlugin, ConsolePlugin, - AdminOptionsHelperPlugin + AdminOptionsHelperPlugin, + AxiosErrorHandlerPlugin } from '../../../admin/js/admin-utilities'; import { ThumbnailHelperPlugin, OrderByHelperPlugin } from '../../../admin/js/utilities'; +import mitt from 'mitt'; + +const isParameterTrue = function(value) { + return (value == true || value == 'true' || value == '1' || value == 1) ? true : false; +} + +const maybeConvertFromJSON = function(someString) { + try { + return JSON.parse(someString); + } catch(error) { + return someString; + } +} export default (element) => { - // Vue Dev Tools! - Vue.config.devtools = TAINACAN_ENV === 'development'; - function renderTainacanItemsListComponent() { // Gets the div with the content of the block @@ -58,35 +69,107 @@ export default (element) => { // Mount only if the div exists and it is not already mounted if ( blockElement && blockElement.classList && !blockElement.classList.contains('has-mounted') ) { + // Filters logic + const possibleHideFilters = isParameterTrue(getDataAttribute(blockElement,'hide-filters')); + + // View Modes Logic + const registeredViewModes = + ( tainacan_plugin && tainacan_plugin.registered_view_modes && tainacan_plugin.registered_view_modes.length ) ? + tainacan_plugin.registered_view_modes : + [ 'table', 'cards', 'records', 'masonry', 'slideshow', 'list', 'map' ]; + + // At first, we consider that all registered view modes are included. + let possibleViewModes = registeredViewModes; + if ( getDataAttribute(blockElement, 'enabled-view-modes') != undefined ) + possibleViewModes = getDataAttribute(blockElement, 'enabled-view-modes').split(','); + + // View Mode settings + let possibleDefaultViewMode = 'masonry'; + if ( getDataAttribute(blockElement, 'default-view-mode') != undefined ) + possibleDefaultViewMode = getDataAttribute(blockElement, 'default-view-mode'); + + if ( possibleViewModes.indexOf(possibleDefaultViewMode) < 0 ) + possibleViewModes.push(possibleDefaultViewMode); + + const VueItemsList = createApp({ + created() { + blockElement.setAttribute('aria-live', 'polite'); + blockElement.classList.add('theme-items-list'); // This used to be on the component, but as Vue now do not renders the component inside a div... + }, + mounted() { + blockElement.classList.add('has-mounted'); + }, + render: () => h(ThemeSearch, { + collectionId: getDataAttribute(blockElement, 'collection-id'), + termId: getDataAttribute(blockElement, 'term-id'), + taxonomy: getDataAttribute(blockElement, 'taxonomy'), + defaultOrder: getDataAttribute(blockElement, 'default-order', 'ASC'), + defaultOrderBy: (() => { + const defaultOrderByValue = maybeConvertFromJSON(getDataAttribute(blockElement, 'default-orderby', 'date')); + return defaultOrderByValue === 'creation_date' ? 'date' : defaultOrderByValue; + })(), + defaultOrderByMeta: getDataAttribute(blockElement, 'default-orderby-meta'), + defaultOrderByType: maybeConvertFromJSON(getDataAttribute(blockElement, 'default-orderby-type')), + defaultViewMode: possibleDefaultViewMode, + enabledViewModes: possibleViewModes, + isForcedViewMode: new Boolean(getDataAttribute(blockElement, 'is-forced-view-mode')), + hideFilters: possibleHideFilters, + hideHideFiltersButton: isParameterTrue(getDataAttribute(blockElement, 'hide-hide-filters-button')), + hideSearch: isParameterTrue(getDataAttribute(blockElement, 'hide-search')), + hideAdvancedSearch: isParameterTrue(getDataAttribute(blockElement, 'hide-advanced-search')), + hideDisplayedMetadataButton: isParameterTrue(getDataAttribute(blockElement, 'hide-displayed-metadata-button')), + hideSortingArea: isParameterTrue(getDataAttribute(blockElement, 'hide-sorting-area')), + hideItemsThumbnail: isParameterTrue(getDataAttribute(blockElement, 'hide-items-thumbnail')), + hideSortByButton: isParameterTrue(getDataAttribute(blockElement, 'hide-sort-by-button')), + hideExposersButton: isParameterTrue(getDataAttribute(blockElement, 'hide-exposers-button')), + hideItemsPerPageButton: isParameterTrue(getDataAttribute(blockElement, 'hide-items-per-page-button')), + hideGoToPageButton: isParameterTrue(getDataAttribute(blockElement, 'hide-go-to-page-button')), + hidePaginationArea: isParameterTrue(getDataAttribute(blockElement, 'hide-pagination-area')), + defaultItemsPerPage: new Number(getDataAttribute(blockElement, 'default-items-per-page', 12)), + showFiltersButtonInsideSearchControl: isParameterTrue(getDataAttribute(blockElement, 'show-filters-button-inside-search-control')), + startWithFiltersHidden: isParameterTrue(getDataAttribute(blockElement, 'start-with-filters-hidden')), + filtersAsModal: isParameterTrue(getDataAttribute(blockElement, 'filters-as-modal')), + showInlineViewModeOptions: isParameterTrue(getDataAttribute(blockElement, 'show-inline-view-mode-options')), + showFullscreenWithViewModes: isParameterTrue(getDataAttribute(blockElement, 'show-fullscreen-with-view-modes')) + }), + }); + + VueItemsList.use(store); + VueItemsList.use(routerTheme); + + if ( !possibleHideFilters ) + VueItemsList.component('filters-items-list', defineAsyncComponent(() => import('../../../admin/components/search/filters-items-list.vue'))); + /* 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)) { - Vue.component(extraVuePluginName, extraVuePluginObject); + VueItemsList.component(extraVuePluginName, extraVuePluginObject); } } // Configure and Register Plugins - Vue.use(Field); - Vue.use(Input); - Vue.use(Autocomplete); - Vue.use(Taginput); - Vue.use(Collapse); - Vue.use(Button); - Vue.use(Datepicker); - Vue.use(Select); - Vue.use(Checkbox); - Vue.use(Radio); - Vue.use(Tag); - Vue.use(Tabs); - Vue.use(Loading); - Vue.use(Dropdown); - Vue.use(Modal); - Vue.use(Dialog); - Vue.use(Snackbar); - Vue.use(Toast); - Vue.use(Pagination); - Vue.use(Numberinput); - Vue.use(VTooltip, { + VueItemsList.use(Field); + VueItemsList.use(Input); + VueItemsList.use(Autocomplete); + VueItemsList.use(Taginput); + VueItemsList.use(Collapse); + VueItemsList.use(Button); + VueItemsList.use(Datepicker); + VueItemsList.use(Select); + VueItemsList.use(Checkbox); + VueItemsList.use(Radio); + VueItemsList.use(Tag); + VueItemsList.use(Icon); + VueItemsList.use(Tabs); + VueItemsList.use(Loading); + VueItemsList.use(Dropdown); + VueItemsList.use(Modal); + VueItemsList.use(Dialog); + VueItemsList.use(Snackbar); + VueItemsList.use(Toast); + VueItemsList.use(Pagination); + VueItemsList.use(Numberinput); + VueItemsList.use(VTooltip, { popperTriggers: ['hover'], themes: { 'taianacan-tooltip': { @@ -97,192 +180,34 @@ export default (element) => { } } }); - Vue.use(VueBlurHash); - Vue.use(I18NPlugin); - Vue.use(UserPrefsPlugin); - Vue.use(ThumbnailHelperPlugin); - Vue.use(OrderByHelperPlugin); - Vue.use(ConsolePlugin, {visual: false}); - Vue.use(AdminOptionsHelperPlugin, blockElement.dataset['options']); + VueItemsList.use(VueBlurHash); + VueItemsList.use(I18NPlugin); + VueItemsList.use(UserPrefsPlugin); + VueItemsList.use(ThumbnailHelperPlugin); + VueItemsList.use(OrderByHelperPlugin); + VueItemsList.use(AxiosErrorHandlerPlugin); + VueItemsList.use(ConsolePlugin, {visual: false}); + VueItemsList.use(AdminOptionsHelperPlugin, blockElement.dataset['options']); /* Registers Extra Vue Components passed to the window.tainacan_extra_components */ if (typeof window.tainacan_extra_components != "undefined") { for (let [extraVueComponentName, extraVueComponentObject] of Object.entries(window.tainacan_extra_components)) { - Vue.component(extraVueComponentName, extraVueComponentObject); + VueItemsList.component(extraVueComponentName, extraVueComponentObject); } } - // Filters logic - let possibleHideFilters = false; - if ( blockElement.attributes['hide-filters'] != undefined ) { - const hideFiltersValue = blockElement.attributes['hide-filters'].value; - possibleHideFilters = ( hideFiltersValue == true || hideFiltersValue == 'true' || hideFiltersValue == '1' || hideFiltersValue == 1 ) ? true : false; - } - - if ( !possibleHideFilters ) { - import('../../../admin/components/search/filters-items-list.vue') - .then(importedModule => Vue.component('filters-items-list', importedModule.default)) - .catch(error => console.log(error)); - } - - /* Main page component */ - Vue.component('theme-items-page', ThemeItemsPage); - Vue.component('theme-search', ThemeSearch); - - // View Modes Logic - const registeredViewModes = - ( tainacan_plugin && tainacan_plugin.registered_view_modes && tainacan_plugin.registered_view_modes.length ) ? - tainacan_plugin.registered_view_modes : - [ 'table', 'cards', 'records', 'masonry', 'slideshow', 'list', 'map' ]; - - // At first, we consider that all registered view modes are included. - let possibleViewModes = registeredViewModes; - if ( blockElement.attributes['enabled-view-modes'] != undefined ) - possibleViewModes = blockElement.attributes['enabled-view-modes'].value.split(','); - - // View Mode settings - let possibleDefaultViewMode = 'masonry'; - if ( blockElement.attributes['default-view-mode'] != undefined) - possibleDefaultViewMode = blockElement.attributes['default-view-mode'].value; - - if ( possibleViewModes.indexOf(possibleDefaultViewMode) < 0 ) - possibleViewModes.push(possibleDefaultViewMode); - // Logic for dynamic importing Tainacan oficial view modes only if they are necessary possibleViewModes.forEach(viewModeSlug => { if ( registeredViewModes.indexOf(viewModeSlug) >= 0 ) - import('./theme-search/components/view-mode-' + viewModeSlug + '.vue') - .then(importedModule => Vue.component('view-mode-' + viewModeSlug, importedModule.default) ) - .catch(error => console.log(error)); + VueItemsList.component('view-mode-' + viewModeSlug, defineAsyncComponent(() => import('./theme-search/components/view-mode-' + viewModeSlug + '.vue'))); }); - Vue.use(eventBusSearch, { store: store, router: routerTheme}); - - const VueItemsList = new Vue({ - store, - router: routerTheme, - data: { - termId: '', - taxonomy: '', - collectionId: '', - defaultViewMode: '', - defaultOrder: 'ASC', - defaultOrderBy: 'date', - defaultOrderByMeta: '', - defaultOrderByType: '', - isForcedViewMode: false, - enabledViewModes: {}, - defaultItemsPerPage: '', - hideFilters: false, - hideHideFiltersButton: false, - hideSearch: false, - hideAdvancedSearch: false, - hideDisplayedMetadataButton: false, - hideSortByButton: false, - hideSortingArea: false, - hideItemsThumbnail: false, - hideItemsPerPageButton: false, - hideGoToPageButton: false, - hidePaginationArea: false, - showFiltersButtonInsideSearchControl: false, - startWithFiltersHidden: false, - filtersAsModal: false, - showInlineViewModeOptions: false, - showFullscreenWithViewModes: false - }, - beforeMount() { - - // Loads params if passed previously - if (this.$route.hash && this.$route.hash.split('#/?') && this.$route.hash.split('#/?')[1]) { - const existingQueries = qs.parse(this.$route.hash.split('#/?')[1]); + const emitter = mitt(); + VueItemsList.config.globalProperties.$emitter = emitter; + + VueItemsList.use(eventBusSearch); - for (let key of Object.keys(existingQueries)) - this.$route.query[key] = existingQueries[key]; - } - - // Collection or Term source settings - if (this.$el.attributes['collection-id'] != undefined) - this.collectionId = this.$el.attributes['collection-id'].value; - if (this.$el.attributes['term-id'] != undefined) - this.termId = this.$el.attributes['term-id'].value; - if (this.$el.attributes['taxonomy'] != undefined) - this.taxonomy = this.$el.attributes['taxonomy'].value; - - // Sorting options - if (this.$el.attributes['default-order'] != undefined) - this.defaultOrder = this.$el.attributes['default-order'].value; - if (this.$el.attributes['default-orderby'] != undefined) { - this.defaultOrderBy = this.maybeConvertFromJSON(this.$el.attributes['default-orderby'].value); - this.defaultOrderBy === 'creation_date' ? 'date' : this.defaultOrderBy; - } - if (this.$el.attributes['default-orderby-meta'] != undefined) - this.defaultOrderByMeta = this.$el.attributes['default-orderby-meta'].value; - if (this.$el.attributes['default-orderby-type'] != undefined) - this.defaultOrderByType = this.maybeConvertFromJSON(this.$el.attributes['default-orderby-type'].value); - - // View modes settings - if (this.$el.attributes['is-forced-view-mode'] != undefined) - this.isForcedViewMode = new Boolean(this.$el.attributes['is-forced-view-mode'].value); - - this.defaultViewMode = possibleDefaultViewMode; - this.enabledViewModes = possibleViewModes; - - // Options related to hidding elements - this.hideFilters = possibleHideFilters; - if (this.$el.attributes['hide-hide-filters-button'] != undefined) - this.hideHideFiltersButton = this.isParameterTrue('hide-hide-filters-button'); - if (this.$el.attributes['hide-search'] != undefined) - this.hideSearch = this.isParameterTrue('hide-search'); - if (this.$el.attributes['hide-advanced-search'] != undefined) - this.hideAdvancedSearch = this.isParameterTrue('hide-advanced-search'); - if (this.$el.attributes['hide-displayed-metadata-button'] != undefined) - this.hideDisplayedMetadataButton = this.isParameterTrue('hide-displayed-metadata-button'); - if (this.$el.attributes['hide-sorting-area'] != undefined) - this.hideSortingArea = this.isParameterTrue('hide-sorting-area'); - if (this.$el.attributes['hide-items-thumbnail'] != undefined) - this.hideItemsThumbnail = this.isParameterTrue('hide-items-thumbnail'); - if (this.$el.attributes['hide-sort-by-button'] != undefined) - this.hideSortByButton = this.isParameterTrue('hide-sort-by-button'); - if (this.$el.attributes['hide-exposers-button'] != undefined) - this.hideExposersButton = this.isParameterTrue('hide-exposers-button'); - if (this.$el.attributes['hide-items-per-page-button'] != undefined) - this.hideItemsPerPageButton = this.isParameterTrue('hide-items-per-page-button'); - if (this.$el.attributes['hide-go-to-page-button'] != undefined) - this.hideGoToPageButton = this.isParameterTrue('hide-go-to-page-button'); - if (this.$el.attributes['hide-pagination-area'] != undefined) - this.hidePaginationArea = this.isParameterTrue('hide-pagination-area'); - - // Other Tweaks - if (this.$el.attributes['default-items-per-page'] != undefined) - this.defaultItemsPerPage = this.$el.attributes['default-items-per-page'].value; - if (this.$el.attributes['show-filters-button-inside-search-control'] != undefined) - this.showFiltersButtonInsideSearchControl = this.isParameterTrue('show-filters-button-inside-search-control'); - if (this.$el.attributes['start-with-filters-hidden'] != undefined) - this.startWithFiltersHidden = this.isParameterTrue('start-with-filters-hidden'); - if (this.$el.attributes['filters-as-modal'] != undefined) - this.filtersAsModal = this.isParameterTrue('filters-as-modal'); - if (this.$el.attributes['show-inline-view-mode-options'] != undefined) - this.showInlineViewModeOptions = this.isParameterTrue('show-inline-view-mode-options'); - if (this.$el.attributes['show-fullscreen-with-view-modes'] != undefined) - this.showFullscreenWithViewModes = this.isParameterTrue('show-fullscreen-with-view-modes'); - }, - methods: { - isParameterTrue(parameter) { - const value = this.$el.attributes[parameter].value; - return (value == true || value == 'true' || value == '1' || value == 1) ? true : false; - }, - maybeConvertFromJSON(someString) { - try { - return JSON.parse(someString); - } catch(error) { - return someString; - } - } - }, - render: h => h(ThemeSearch) - }); - - VueItemsList.$mount('#tainacan-items-page'); + VueItemsList.mount('#' + blockElement.id); // Initialize Ponyfill for Custom CSS properties cssVars({ diff --git a/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue b/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue index 2c8d80493..cae0d256e 100644 --- a/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue +++ b/src/views/gutenberg-blocks/blocks/faceted-search/theme.vue @@ -1,68 +1,1632 @@ -- {{ $i18n.get('label_items_list') }} -
- - -- -- - - -- {{ $i18n.get('label_sort_visualization') }} -
- - - - - - - - --- - ---- - - {{ $i18n.get('advanced_search') }} - - - - -- - - {{ sentenceMode == true ? futureSearchQuery : ('"' + futureSearchQuery + '"') }}. - -- -- {{ $i18n.get('label_use_search_separated_words') }} - - {{ $i18n.get('info_use_search_separated_words') }} -- {{ $i18n.get('info_for_more_metadata_search_options_use') }} - - {{ $i18n.get('advanced_search') }} - - -- -- - - - - --- - -- - -- - - - - {{ $i18n.get('info_by_inner') }} - -- - {{ $i18n.get('label_descending') }} - -- - {{ $i18n.get('label_ascending') }} - -- - - - -- {{ metadatum.name }} - - --- - -- - - -- - - -- - - {{ registeredViewModes[viewModeOption].label }} - - -- - - -- - -- -- - - - -- - - - - - - - -- - - - - - - - - - -- -- - - - - - - - -- - - - --- - - - - - - - - - - - - -- -- {{ $i18n.get('label_items_list_results') }} -
- - - - -- - -- - - - - - - - - - -- - - - - - - - - - - - - - - - - - -- - ---- - - -
-- {{ (hasFiltered || openAdvancedSearch || searchQuery) ? $i18n.get('info_no_item_found_filter') : $i18n.get('info_no_item_found') }} -
- -- - {{ $i18n.getWithVariables('info_you_searched_for_%s', ['"' + searchQuery + '"']) }}. {{ $i18n.get('info_try_enabling_search_by_word') }} -
-
- {{ $i18n.get('info_details_about_search_by_word') }} - - - {{ $i18n.getWithVariables('info_you_searched_for_%s', ['"' + searchQuery + '"']) }}. {{ $i18n.get('info_try_disabling_search_by_word') }} - -
-- {{ $i18n.get('label_use_search_separated_words') }} - -- - - - - - - - - - - + + {{ $i18n.get('label_items_list') }} +
+ + ++ ++ + + ++ {{ $i18n.get('label_sort_visualization') }} +
+ + + + + + + + +++ + ++++ + + + {{ $i18n.get('advanced_search') }} + + + + ++ + + + {{ sentenceMode == true ? futureSearchQuery : ('"' + futureSearchQuery + '"') }}. + ++ ++ {{ $i18n.get('label_use_search_separated_words') }} + + {{ $i18n.get('info_use_search_separated_words') }} ++ {{ $i18n.get('info_for_more_metadata_search_options_use') }} + + {{ $i18n.get('advanced_search') }} + + ++ ++ + + + + +++ + ++ + ++ + + + + + + {{ $i18n.get('info_by_inner') }} + ++ + {{ $i18n.get('label_descending') }} + ++ + {{ $i18n.get('label_ascending') }} + ++ + + + + + ++ {{ metadatum.name }} + + +++ + ++ + + ++ + + + + ++ + + {{ registeredViewModes[viewModeOption].label }} + + ++ + + ++ + ++ ++ + + + ++ + + + + + + + ++ + + + + + + + + + +- + + diff --git a/src/views/gutenberg-blocks/blocks/facets-list/deprecated.js b/src/views/gutenberg-blocks/blocks/facets-list/deprecated.js index 0133b8ad4..f37a89a28 100644 --- a/src/views/gutenberg-blocks/blocks/facets-list/deprecated.js +++ b/src/views/gutenberg-blocks/blocks/facets-list/deprecated.js @@ -1,6 +1,196 @@ const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor ); export default [ + /* Deprecated during Vue 3 migration to prepend attributes with data- */ + { + "attributes": { + "content": { + "type": "array", + "source": "children", + "selector": "div" + }, + "collectionId": { + "type": "string", + "default": "" + }, + "collectionSlug": { + "type": "string", + "default": "" + }, + "facets": { + "type": "array", + "default": [] + }, + "facetsObject": { + "type": "array", + "default": [] + }, + "showImage": { + "type": "boolean", + "default": true + }, + "nameInsideImage": { + "type": "boolean", + "default": false + }, + "showItemsCount": { + "type": "boolean", + "default": true + }, + "showLoadMore": { + "type": "boolean", + "default": false + }, + "showSearchBar": { + "type": "boolean", + "value": false + }, + "layout": { + "type": "string", + "default": "grid" + }, + "cloudRate": { + "type": "number", + "default": 1 + }, + "isModalOpen": { + "type": "boolean", + "default": false + }, + "gridMargin": { + "type": "number", + "default": 24 + }, + "metadatumId": { + "type": "string", + "default": "" + }, + "metadatumType": { + "type": "string", + "default": "" + }, + "facetsRequestSource": { + "type": "string", + "default": "" + }, + "maxFacetsNumber": { + "type": "number", + "value": 12 + }, + "isLoading": { + "type": "boolean", + "value": false + }, + "isLoadingCollection": { + "type": "boolean", + "value": false + }, + "collection": { + "type": "object", + "value": {} + }, + "searchstring": { + "type": "string", + "default": "" + }, + "blockId": { + "type": "string", + "default": "" + }, + "parentTerm": { + "type": "number", + "default": null + }, + "isParentTermModalOpen": { + "type": "boolean", + "default": false + }, + "maxColumnsCount": { + "type": "number", + "default": 5 + }, + "appendChildTerms": { + "type": "boolean", + "default": false + }, + "childFacetsObject": { + "type": "object", + "default": {} + }, + "linkTermFacetsToTermPage": { + "type": "boolean", + "default": true + }, + "isLoadingChildTerms": { + "type": "number", + "default": null + }, + "itemsCountStyle": { + "type": "string", + "default": "default" + }, + "imageSize": { + "type": "string", + "default": "tainacan-medium" + } + }, + save: function({ attributes }) { + const { + content, + blockId, + collectionId, + collectionSlug, + parentTerm, + showImage, + nameInsideImage, + showItemsCount, + showLoadMore, + layout, + cloudRate, + gridMargin, + metadatumId, + metadatumType, + maxFacetsNumber, + maxColumnsCount, + showSearchBar, + linkTermFacetsToTermPage, + appendChildTerms, + itemsCountStyle, + imageSize + } = attributes; + + // Gets attributes such as style, that are automatically added by the editor hook + const blockProps = useBlockProps.save(); + return+ + + + + + + + ++ + + + +++ + + + + + + + + + + + + ++ ++ {{ $i18n.get('label_items_list_results') }} +
+ + + + ++ + ++ + + + + + + + + + ++ + + + + + + + + + + + + + + + + + ++ + ++++ + + +
++ {{ (hasFiltered || openAdvancedSearch || searchQuery) ? $i18n.get('info_no_item_found_filter') : $i18n.get('info_no_item_found') }} +
+ ++ + {{ $i18n.getWithVariables('info_you_searched_for_%s', ['"' + searchQuery + '"']) }}. {{ $i18n.get('info_try_enabling_search_by_word') }} +
+
+ {{ $i18n.get('info_details_about_search_by_word') }} + + + {{ $i18n.getWithVariables('info_you_searched_for_%s', ['"' + searchQuery + '"']) }}. {{ $i18n.get('info_try_disabling_search_by_word') }} + +
++ {{ $i18n.get('label_use_search_separated_words') }} + ++ + + + + + + + + + + + { content } ++ } + }, /* Deprecated on Tainacan 0.20.1 to add imageSize */ { "attributes": { diff --git a/src/views/gutenberg-blocks/blocks/facets-list/edit.js b/src/views/gutenberg-blocks/blocks/facets-list/edit.js index 51484e8a3..f17e66ea0 100644 --- a/src/views/gutenberg-blocks/blocks/facets-list/edit.js +++ b/src/views/gutenberg-blocks/blocks/facets-list/edit.js @@ -10,7 +10,7 @@ import map from 'lodash/map'; // Do not user import { map,pick } from 'lodash'; import pick from 'lodash/pick'; import MetadataModal from './metadata-modal.js'; import ParentTermModal from './parent-term-modal.js'; -import tainacan from '../../js/axios.js'; +import tainacanApi from '../../js/axios.js'; import axios from 'axios'; import qs from 'qs'; import { ThumbnailHelperFunctions } from '../../../admin/js/utilities.js'; @@ -147,7 +147,7 @@ export default function({ attributes, setAttributes, isSelected, clientId }) { { facet.label ? facet.label : '' } { facet.total_items ? - + { itemsCountStyle === 'below' ? ( facet.total_items != 1 ? (facet.total_items + ' ' + __('items', 'tainacan' )) : (facet.total_items + ' ' + __('item', 'tainacan' )) ) : @@ -182,19 +182,19 @@ export default function({ attributes, setAttributes, isSelected, clientId }) { { appendChildTerms && facet.total_children > 0 ? isLoadingChildTerms == facetId ? -+: ( childFacetsObject[facetId] && childFacetsObject[facetId].visible ? --
+
-
{
childFacetsObject[facetId].facets.length ?
childFacetsObject[facetId].facets.map((aChildTermFacet) => {
return prepareFacet(aChildTermFacet);
})
:
-
{ __( 'The child terms of this facet do not contain items.', 'tainacan' )}
+{ __( 'The child terms of this facet do not contain items.', 'tainacan' )}
} - + +