-
-
-  . ')
';
+ return $placeholder_image;
+ }
+
+ private function get_meta_html(\Tainacan\Entities\Item_Metadata_Entity $meta, \Tainacan\Entities\Item $item, $value_link = false, $thumbnail_id = false) {
+ $html = '';
+ if ($meta instanceof \Tainacan\Entities\Item_Metadata_Entity && !empty($meta->get_value_as_html())) {
+ ob_start();
+ if ($value_link) {
+ ?>
+
+
+
+
= 0 );
+ },
+ metadatumFormClasses() {
+ return '' +
+ (this.hideCollapses ? ' has-collapses-hidden' : '') +
+ (this.isHighlightedMetadatum ? ' hightlighted-metadatum' : '') +
+ (this.metadatumComponent ? ' tainacan-metadatum-component--' + this.metadatumComponent : '') +
+ (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.id ? ' tainacan-metadatum-id--' + this.itemMetadatum.metadatum.id : '');
}
},
created() {
diff --git a/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue b/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
index 48d822d60..4814c78e0 100644
--- a/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
+++ b/src/views/admin/components/metadata-types/taxonomy/Taxonomy.vue
@@ -178,7 +178,7 @@
diff --git a/src/views/admin/components/modals/exposers-modal.vue b/src/views/admin/components/modals/exposers-modal.vue
index 08f43fa3b..3949fdcad 100644
--- a/src/views/admin/components/modals/exposers-modal.vue
+++ b/src/views/admin/components/modals/exposers-modal.vue
@@ -524,7 +524,7 @@ export default {
h4 {
color: var(--tainacan-heading-color);
- font-size: 1em;
+ font-size: 1em !important;
font-weight: 500;
padding: 0em 0.5em;
margin: 0;
diff --git a/src/views/admin/components/other/checkbox-radio-metadata-input.vue b/src/views/admin/components/other/checkbox-radio-metadata-input.vue
index ee8640355..8b7733878 100644
--- a/src/views/admin/components/other/checkbox-radio-metadata-input.vue
+++ b/src/views/admin/components/other/checkbox-radio-metadata-input.vue
@@ -5,9 +5,7 @@
animated
@input="fetchSelectedLabels()"
v-model="activeTab">
-
+
@@ -810,9 +808,9 @@
display: none;
visibility: hidden;
}
- .tab-content {
+ /deep/ .tab-content {
transition: height 0.2s ease;
- padding: 0.5em 20px !important;
+ padding: 0.5em 0px !important;
}
// In theme, the bootstrap removes the style of without href
diff --git a/src/views/admin/pages/lists/filters-page.vue b/src/views/admin/pages/lists/filters-page.vue
index 8e40181ef..4d4d89b2c 100644
--- a/src/views/admin/pages/lists/filters-page.vue
+++ b/src/views/admin/pages/lists/filters-page.vue
@@ -190,8 +190,25 @@
+ animated
+ v-model="activeTab">
+
+
+
+
+
+
+
+ :active.sync="editItemModalOpen"
+ :custom-class="'tainacan-modal' + (collection && collection.id ? ' tainacan-modal-item-edition--collection-' + collection.id : '')">
+ :src="itemModalSrc" />
-
@@ -80,7 +137,7 @@
import { mapGetters } from 'vuex';
import qs from 'qs';
- export default {
+ export default {
props: {
itemMetadatum: Object,
maxtags: undefined,
@@ -95,11 +152,14 @@
isLoading: false,
collectionId: '',
searchQuery: '',
+ editingItemId: '',
totalItems: 0,
page: 1,
- createNewItemModal: false,
+ activeTab: 0,
+ editItemModalOpen: false,
adminFullURL: tainacan_plugin.admin_url + 'admin.php?page=tainacan_admin#',
- currentUserCanEditItems: false
+ currentUserCanEditItems: false,
+ selectedValuesAsHtml: []
}
},
computed: {
@@ -109,30 +169,57 @@
maxMultipleValues() {
return (this.itemMetadatum && this.itemMetadatum.metadatum && this.itemMetadatum.metadatum.cardinality && !isNaN(this.itemMetadatum.metadatum.cardinality)) ? this.itemMetadatum.metadatum.cardinality : undefined;
},
+ itemModalSrc() {
+ if (this.editingItemId)
+ return this.adminFullURL + this.$routerHelper.getItemEditPath(this.collectionId, this.editingItemId) + '?iframemode=true';
+ else
+ return this.adminFullURL + this.$routerHelper.getNewItemPath(this.collectionId) + '?iframemode=true&newmetadatumid=' + this.itemMetadatum.metadatum.metadata_type_options.search + '&newitemtitle=' + this.searchQuery;
+ },
+ relationshipInputId() {
+ if (this.itemMetadatum && this.itemMetadatum.metadatum)
+ return 'tainacan-item-metadatum_id-' + this.itemMetadatum.metadatum.id + (this.itemMetadatum.parent_meta_id ? ('_parent_meta_id-' + this.itemMetadatum.parent_meta_id) : '');
+ else
+ return '';
+ },
+ isDisplayingRelatedItemMetadata() {
+ return this.itemMetadatum &&
+ this.itemMetadatum.metadatum &&
+ this.itemMetadatum.metadatum.metadata_type_options &&
+ this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata &&
+ this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.length &&
+ this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.length > 1;
+ }
},
watch: {
- createNewItemModal() {
- if (this.createNewItemModal)
- window.addEventListener('message', this.createNewItemFromModal, false);
+ editItemModalOpen() {
+ if (this.editItemModalOpen)
+ window.addEventListener('message', this.updateItemFromModal, false);
else
- window.removeEventListener('message', this.createNewItemFromModal);
+ window.removeEventListener('message', this.updateItemFromModal);
}
},
created() {
this.collectionId = ( this.itemMetadatum && this.itemMetadatum.metadatum.metadata_type_options && this.itemMetadatum.metadatum.metadata_type_options.collection_id ) ? this.itemMetadatum.metadatum.metadata_type_options.collection_id : '';
-
+
if (this.itemMetadatum.value && (Array.isArray( this.itemMetadatum.value ) ? this.itemMetadatum.value.length > 0 : true )) {
- let query = qs.stringify({ postin: ( Array.isArray( this.itemMetadatum.value ) ) ? this.itemMetadatum.value : [ this.itemMetadatum.value ] });
- query += this.itemMetadatum.metadatum.metadata_type_options.search ? '&fetch_only_meta=' + this.itemMetadatum.metadatum.metadata_type_options.search : '';
- axios.get('/collection/' + this.collectionId + '/items?' + query + '&nopaging=1&fetch_only=title,document_mimetype,thumbnail&order=asc')
+ let query = [];
+
+ query['postin'] = Array.isArray( this.itemMetadatum.value ) ? this.itemMetadatum.value : [ this.itemMetadatum.value ];
+ query['nopaging'] = 1;
+ query['order'] = 'asc';
+ query['fetch_only'] = 'title,document_mimetype,thumbnail';
+ query['fetch_only_meta'] = this.isDisplayingRelatedItemMetadata ? (this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.filter(metadatumId => metadatumId !== 'thumbnail') + '') : (this.itemMetadatum.metadatum.metadata_type_options.search ? this.itemMetadatum.metadatum.metadata_type_options.search : '');
+ axios.get('/collection/' + this.collectionId + '/items?' + qs.stringify(query) )
.then( res => {
if (res.data.items) {
- for (let item of res.data.items)
+ for (let item of res.data.items) {
this.selected.push({
label: this.getItemLabel(item),
value: item.id,
+ valuesAsHtml: this.getItemMetadataValuesAsHtml(item),
img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)
});
+ }
}
})
.catch(error => {
@@ -194,12 +281,14 @@
.then( res => {
if (res.data.items) {
- for (let item of res.data.items)
+ for (let item of res.data.items) {
this.options.push({
label: this.getItemLabel(item),
value: item.id,
+ valuesAsHtml: this.getItemMetadataValuesAsHtml(item),
img: this.$thumbHelper.getSrc(item['thumbnail'], 'tainacan-small', item.document_mimetype)
- })
+ });
+ }
}
if (res.headers['x-wp-total'])
this.totalItems = res.headers['x-wp-total'];
@@ -275,8 +364,8 @@
} else {
query['search'] = search;
}
- query['fetch_only'] = 'title,thumbnail';
- query['fetch_only_meta'] = this.itemMetadatum.metadatum.metadata_type_options.search;
+ query['fetch_only'] = 'title,thumbnail,document_mimetype';
+ query['fetch_only_meta'] = this.isDisplayingRelatedItemMetadata ? (this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.filter(metadatumId => metadatumId !== 'thumbnail') + '') : (this.itemMetadatum.metadatum.metadata_type_options.search ? this.itemMetadatum.metadatum.metadata_type_options.search : '');
query['perpage'] = 12;
query['paged'] = this.page;
query['order'] = 'asc';
@@ -286,33 +375,200 @@
return qs.stringify(query);
},
- createNewItemFromModal(event) {
+ updateItemFromModal(event) {
const message = event.message ? 'message' : 'data';
const data = event[message];
- if (data.type == 'itemCreationMessage') {
- this.createNewItemModal = false;
+ if (data.type == 'itemEditionMessage') {
+ this.editItemModalOpen = false;
- if (data.itemId) {
- this.searchQuery = '';
- this.selected.push({
- label: data.itemTitle,
- value: data.itemId,
- img: data.itemThumbnail ? data.itemThumbnail : ''
- });
- this.onInput(this.selected);
+ // An item is being edited from the modal
+ if (this.editingItemId) {
+ if (data.item && data.item.id) {
+ const existingItemIndex = this.selected.findIndex(anItemValue => anItemValue.value == data.item.id);
+
+ if (existingItemIndex >= 0) {
+ this.selected.splice(existingItemIndex, 1, {
+ label: this.getItemLabel(data.item),
+ value: data.item.id,
+ valuesAsHtml: this.getItemMetadataValuesAsHtml(data.item),
+ img: data.item.thumbnail ? data.item.thumbnail : ''
+ });
+ }
+ this.onInput(this.selected);
+ }
+ this.editingItemId = '';
+
+ // An item is being created from the modal
+ } else {
+
+ if (data.item && data.item.id) {
+ this.searchQuery = '';
+
+ this.selected.push({
+ label: this.getItemLabel(data.item),
+ value: data.item.id,
+ valuesAsHtml: this.getItemMetadataValuesAsHtml(data.item),
+ img: data.item.thumbnail ? data.item.thumbnail : ''
+ });
+
+ this.onInput(this.selected);
+ }
}
- }
+ }
+ },
+ getItemMetadataValuesAsHtml(item) {
+
+ let valuesAsHtml = '';
+ valuesAsHtml += `
';
}
@@ -163,13 +183,13 @@ class Relationship extends Metadata_Type {
* @param Item_Metadata_Entity $item_metadata
* @return string The HTML representation of the value, containing one or multiple items names, linked to the item page
*/
- public function get_value_as_html(\Tainacan\Entities\Item_Metadata_Entity $item_metadata) {
+ public function get_value_as_html(\Tainacan\Entities\Item_Metadata_Entity $item_metadata) {
$value = $item_metadata->get_value();
+ $search_meta_id = $this->get_option('search');
+ $display_metas = $this->get_option('display_related_item_metadata');
$return = '';
if ( $item_metadata->is_multiple() ) {
- $count = 1;
- $total = sizeof($value);
$prefix = $item_metadata->get_multivalue_prefix();
$suffix = $item_metadata->get_multivalue_suffix();
$separator = $item_metadata->get_multivalue_separator();
@@ -178,19 +198,11 @@ class Relationship extends Metadata_Type {
try {
$Tainacan_Items = \Tainacan\Repositories\Items::get_instance();
$item = $Tainacan_Items->fetch( (int) $item_id);
-
- $count++;
-
- if ( $item instanceof \Tainacan\Entities\Item ) {
- $return .= $prefix;
- $return .= $this->get_item_html($item);
- $return .= $suffix;
-
- if ( $count <= $total ) {
- $return .= $separator;
- }
+ if ( $this->can_display_item($item) ) {
+ $return .= empty($return)
+ ? ($prefix . $this->get_item_html($item, $search_meta_id, $display_metas) . $suffix)
+ : ($separator . $prefix . $this->get_item_html($item, $search_meta_id, $display_metas) . $suffix);
}
-
} catch (\Exception $e) {
// item not found
}
@@ -198,55 +210,126 @@ class Relationship extends Metadata_Type {
} else {
try {
$item = new \Tainacan\Entities\Item($value);
- if ( $item instanceof \Tainacan\Entities\Item ) {
- $return .= $this->get_item_html($item);
+ if ( $this->can_display_item($item) ) {
+ $return .= $this->get_item_html($item, $search_meta_id, $display_metas);
}
} catch (\Exception $e) {
// item not found
}
}
+ if(!empty($display_metas) && is_array($display_metas) && count($display_metas) > 1) {
+ return "
+
+
+ ![]()
+
+
+ {{ props.option.label }}
+
+
+
+
+
+
+ {{ $i18n.get('info_no_item_found') }}
+
+
+
+ {{ $i18n.get('label_crate_new_item') + ' "' + searchQuery + '"' }}
+
+
+
- ![]()
+ v-if="itemMetadatum.value && itemMetadatum.value.length"
+ class="tainacan-relationship-group">
+
-
- {{ props.option.label }}
+
-
-
- {{ $i18n.get('info_no_item_found') }}
-
-
-
- {{ $i18n.get('label_crate_new_item') + ' "' + searchQuery + '"' }}
-
-
-
+
+
@@ -63,15 +121,14 @@
+
+ {{ $i18n.get('info_no_item_found') }} +
+
`;
+
+ return valuesAsHtml;
+ },
+ editSelected(itemId) {
+ this.editingItemId = itemId;
+ this.editItemModalOpen = true;
+ },
+ removeFromSelected(itemId) {
+ const indexOfRemovedItem = this.selected.findIndex(itemValue => itemValue.value == itemId);
+
+ if (indexOfRemovedItem >= 0) {
+ this.selected.splice(indexOfRemovedItem, 1);
+ this.onInput(this.selected);
+ }
}
}
}
-
diff --git a/src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php b/src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php
index 09f4aff51..13591c271 100644
--- a/src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php
+++ b/src/views/admin/components/metadata-types/relationship/class-tainacan-relationship.php
@@ -59,6 +59,10 @@ class Relationship extends Metadata_Type {
'title' => __( 'Related Metadatum', 'tainacan' ),
'description' => __( 'Select the metadata to use as search criteria in the target collection and as a label when representing the relationship', 'tainacan' ),
],
+ 'display_related_item_metadata' => [
+ 'title' => __( 'Displayed related item metadata', 'tainacan' ),
+ 'description' => __( 'Select the metadata that will be displayed from the related item.', 'tainacan' ),
+ ],
'display_in_related_items' => [
'title' => __( 'Display in "Items related to this"', 'tainacan' ),
'description' => __( 'Include items linked by this metadata on a list of related items.', 'tainacan' ),
@@ -119,8 +123,24 @@ class Relationship extends Metadata_Type {
$readable_option_value = $option_value;
break;
+ case 'display_related_item_metadata':
+ if ( is_array($option_value) ) {
+ $metadata_list = [];
+ foreach($option_value as $metadata_id) {
+ if ($metadata_id == 'thumbnail') {
+ $metadata_list[] = __('Thumbnail', 'tainacan');
+ } else {
+ $metadata = \tainacan_metadata()->fetch( (int) $metadata_id );
+ if ( $metadata ) $metadata_list[] = $metadata;
+ }
+
+ }
+ $readable_option_value = implode(", ", $metadata_list);
+ }
+ break;
+
default:
- $readable_option_value = $option_value;
+ $readable_option_value = is_string($option_value) ? $option_value : json_encode($option_value);
}
$options_as_html .= '`;
+ if (this.isDisplayingRelatedItemMetadata && this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.indexOf('thumbnail') >= 0)
+ valuesAsHtml += ` })
`;
+
+ valuesAsHtml += `
`;
+
+ Object.values(item.metadata).forEach(metadatumValue => {
+ if (
+ metadatumValue.id != this.itemMetadatum.metadatum.metadata_type_options.search &&
+ this.itemMetadatum.metadatum.metadata_type_options.display_related_item_metadata.indexOf(metadatumValue.id) >= 0 &&
+ metadatumValue.value_as_html
+ ) {
+ valuesAsHtml += ``;
+ }
+ });
+ valuesAsHtml += `+ ${ this.getItemLabel(item) } +
`; + valuesAsHtml += `' . $readable_option_value . '
{$return}
";
+ }
+ return $return;
+ }
+
+ private function can_display_item($item) {
+ return (
+ $item instanceof \Tainacan\Entities\Item && (
+ is_user_logged_in() ||
+ (
+ \is_post_status_viewable( $item->get_status() ) &&
+ \is_post_status_viewable( $item->get_collection()->get_status() )
+ )
+ )
+ );
+ }
+
+ private function get_item_html($item, $search_meta_id, $display_metas) {
+ $return = '';
+ $id = $item->get_id();
+
+ if(!empty($display_metas) && is_array($display_metas) && count($display_metas) > 1) {
+ $has_thumbnail = array_search('thumbnail', $display_metas);
+ $thumbnail_id = false;
+ if($has_thumbnail !== false) {
+ unset($display_metas[$has_thumbnail]);
+ $thumbnail_id = $item->get__thumbnail_id();
+ }
+ $args = ['post__in' => $display_metas];
+ $metadatum = $item->get_metadata($args);
+
+ $metadata_value = [];
+ foreach ( $metadatum as $item_meta_id => $item_meta ) {
+ if ( $item_meta instanceof \Tainacan\Entities\Item_Metadata_Entity && $item_meta->get_value_as_html() != '' ) {
+ $meta_id = $item_meta->get_metadatum()->get_id();
+ $as_header = $search_meta_id == $meta_id ? $this->get_item_link($item, $search_meta_id) : false;
+ $html = $this->get_meta_html($item_meta, $item, $as_header, $thumbnail_id);
+ if($as_header === false) {
+ $metadata_value[] = $html;
+ } else {
+ array_unshift($metadata_value, $html);
+ }
+ }
+ $return = implode("\n", $metadata_value);
+ }
+ $return = "";
+ } else if ( $id && $search_meta_id ) {
+ $as_link = $this->get_item_link($item, $search_meta_id);
+ $return = "$as_link";
+ }
return $return;
}
- private function get_item_html($item) {
+ private function get_item_link($item, $search_meta_id) {
$return = '';
$id = $item->get_id();
-
- $search_meta_id = $this->get_option('search');
-
- if ( $id && $search_meta_id ) {
- $link = get_permalink( (int) $id );
-
- $search_meta_id = $this->get_option('search');
-
- $metadatum = \Tainacan\Repositories\Metadata::get_instance()->fetch((int) $search_meta_id);
-
- $label = '';
-
- if ($metadatum instanceof \Tainacan\Entities\Metadatum) {
- $item_meta = new \Tainacan\Entities\Item_Metadata_Entity($item, $metadatum);
- $label = $item_meta->get_value_as_string();
- }
-
- if ( empty($label) ) {
- $label = $item->get_title();
- }
-
- if (is_string($link)) {
- if ( is_user_logged_in() ||
- \is_post_status_viewable( $item->get_status() ) &&
- \is_post_status_viewable($item->get_collection()->get_status()) ) {
- $return = "";
- $return.= $label;
- $return .= "";
- } else {
- $return.= $label;
- }
+ $link = get_permalink( (int) $id );
+ $metadatum = \Tainacan\Repositories\Metadata::get_instance()->fetch((int) $search_meta_id);
+ $value = '';
+ if ($metadatum instanceof \Tainacan\Entities\Metadatum) {
+ $item_meta = new \Tainacan\Entities\Item_Metadata_Entity($item, $metadatum);
+ $value = $item_meta->get_value_as_string();
+ }
+ if ( empty($value) ) {
+ $value = $item->get_title();
+ }
+ if (is_string($link)) {
+ $return = "$value";
+ }
+ return $return;
+ }
+
+ private function get_item_thumbnail($thumbnail_id, $item) {
+ if($thumbnail_id !== false && !empty($thumbnail_id)){
+ return \wp_get_attachment_image($thumbnail_id, 'tainacan-small');
+ }
+ $media_type = $item->get_document_mimetype();
+ $placeholder_image = '
+
+
+
+
+
{{ $i18n.get('label_available_metadata') }}
+ + + +
-
.field {
+ font-size: 0.875em;
+ padding-right: 1em;
+ padding-left: 1em;
+ }
+
.available-metadatum-item {
padding: 0.6em;
margin: 4px 4px 4px 1.2em;
diff --git a/src/views/admin/pages/lists/metadata-page.vue b/src/views/admin/pages/lists/metadata-page.vue
index 709d09a4e..7e8ae506e 100644
--- a/src/views/admin/pages/lists/metadata-page.vue
+++ b/src/views/admin/pages/lists/metadata-page.vue
@@ -817,7 +817,7 @@ export default {
.active-metadata-area {
font-size: 0.875em;
margin-left: -0.8em;
- padding-right: 3em;
+ padding-right: 1em;
min-height: 330px;
@media screen and (max-width: 769px) {
diff --git a/src/views/admin/pages/singles/item-page.vue b/src/views/admin/pages/singles/item-page.vue
index b16e5ae13..b20f34446 100644
--- a/src/views/admin/pages/singles/item-page.vue
+++ b/src/views/admin/pages/singles/item-page.vue
@@ -24,7 +24,7 @@
{{ $i18n.get('label_available_metadata') }}
+
-
+
@@ -348,8 +355,8 @@
+ formHooks['view-item'] != undefined &&
+ formHooks['view-item']['end-left'] != undefined">
.multivalue-separator {
+ display: block;
+ max-height: 1px;
+ width: calc(100% - 40px);
+ background: var(--tainacan-gray2);
+ content: none;
+ color: transparent;
+ margin: 0.5em 0 0.5em 40px;
+ }
}
}
\ No newline at end of file
diff --git a/src/views/admin/scss/tainacan-admin.scss b/src/views/admin/scss/tainacan-admin.scss
index 7b664f8d1..1dd7f7a8a 100644
--- a/src/views/admin/scss/tainacan-admin.scss
+++ b/src/views/admin/scss/tainacan-admin.scss
@@ -196,6 +196,7 @@ a:hover {
}
}
+// Inside one of the view modes
.metadata-value {
.tainacan-compound-group {
margin-left: 2px;
@@ -220,9 +221,29 @@ a:hover {
color: transparent;
margin: 1em auto 1em -0.875em;
}
-
+ }
+ .tainacan-relationship-group {
+ .tainacan-relationship-metadatum {
+ .tainacan-relationship-metadatum-header {
+ .label {
+ font-size: 1em;
+ }
+ img {
+ max-width: 22px;
+ max-height: 22px;
+ }
+ }
+ .tainacan-metadatum {
+ margin-left: 40px;
+ font-size: 1.125em;
+ &>*{
+ font-size: 0.875em;
+ }
+ }
+ }
}
}
+// Inside the admin item page
.metadata-type-textarea,
.metadata-type-compound {
.multivalue-separator {
@@ -251,6 +272,44 @@ a:hover {
}
}
}
+.tainacan-relationship-group {
+ .tainacan-relationship-metadatum {
+ .tainacan-relationship-metadatum-header {
+ display: flex;
+ align-items: center;
+ img {
+ margin-right: 12px;
+ max-width: 28px;
+ max-height: 28px;
+ }
+ .label {
+ font-weight: normal;
+ margin-top: 0;
+ margin-left: 0;
+ margin-bottom: 0;
+ margin-right: 0;
+ }
+ }
+ .tainacan-metadatum {
+ margin-left: 40px;
+ .label {
+ font-size: 0.8125em;
+ line-height: 1em;
+ margin-top: 8px;
+ margin-bottom: 2px;
+ }
+ }
+ }
+ &>.multivalue-separator {
+ display: block;
+ max-height: 1px;
+ width: calc(100% - 40px);
+ background: var(--tainacan-gray2);
+ content: none;
+ color: transparent;
+ margin: 0.5em 0 0.5em 40px;
+ }
+}
.taginput-container .input:hover {
border: none !important;
}
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/block.json b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/block.json
index 409374495..e0344d23f 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/block.json
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/block.json
@@ -1,6 +1,7 @@
{
"name": "tainacan/carousel-collections-list",
"title": "Tainacan Collections Carousel",
+ "apiVersion": 2,
"category": "tainacan-blocks",
"keywords": [ "collections", "carousel", "slider" ],
"description": "List collections on a Carousel, displaying either its thumbnail or a preview of its items.",
@@ -11,6 +12,12 @@
"multiple": true,
"typography": {
"fontSize": true
+ },
+ "color": {
+ "text": true,
+ "background": false,
+ "gradients": false,
+ "link": true
}
},
"example": {
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/edit.js b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/edit.js
index 0887bbf85..aa9d8fc7c 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/edit.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/edit.js
@@ -1,6 +1,6 @@
const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components;
-const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
const { __ } = wp.i18n;
@@ -31,6 +31,9 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
showCollectionThumbnail
} = attributes;
+ // Gets blocks props from hook
+ const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+ console.log(blockProps)
// Obtains block's client id to render it on save function
setAttributes({ blockId: clientId });
@@ -189,7 +192,7 @@ export default function ({ attributes, setAttributes, className, isSelected, cli
src={ `${tainacan_blocks.base_url}/assets/images/carousel-collections-list.png` } />
: (
-
+
{ collections.length ?
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/save.js b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/save.js
index fb1f8aa30..878324cf1 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/save.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/save.js
@@ -1,3 +1,5 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
export default function ({ attributes, className }) {
const {
content,
@@ -14,9 +16,12 @@ export default function ({ attributes, className }) {
hideName,
showCollectionThumbnail
} = attributes;
+
+ // Gets attributes such as style, that are automatically added by the editor hook
+ const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
return
{ return collection.id })) }
arrows-position={ arrowsPosition }
auto-play={ '' + autoPlay }
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/style.scss b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/style.scss
index 5b9a78a8d..99b84e13d 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/style.scss
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/style.scss
@@ -139,7 +139,7 @@
a>span,
a:hover>span {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
font-weight: bold;
text-decoration: none;
padding: 8px 12px;
@@ -151,7 +151,9 @@
width: 100%;
height: auto;
}
+ a,
a:hover {
+ color: inherit;
text-decoration: none;
}
@@ -191,7 +193,7 @@
width: 100%;
font-size: 0.875em;
font-style: italic;
- color: var(--tainacan-block-gray4, $gray4);
+ color: inherit;
text-align: center;
margin: 0 auto;
padding: 8px 2px 2px 2px;
@@ -279,7 +281,7 @@
li.collection-list-item {
position: relative;
display: block;
- margin: 16px 32px 16px 0px;
+ margin: 8px 32px 8px 0px;
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px);
scroll-snap-align: start;
@@ -292,7 +294,7 @@
}
a {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
font-weight: bold;
line-height: normal;
}
@@ -306,7 +308,7 @@
}
&:hover a {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
text-decoration: none;
}
@@ -575,5 +577,13 @@
}
}
}
-
+}
+.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-carousel-collections-list {
+ .swiper-container,
+ li.collection-list-item {
+ a>span,
+ a:hover>span {
+ color: var(--tainacan-block-gray5, $gray5)
+ }
+ }
}
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.js b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.js
index 97ea1e108..f73cc0852 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.js
@@ -39,7 +39,8 @@ export default (element) => {
showCollectionThumbnail: false,
tainacanApiRoot: '',
tainacanBaseUrl: '',
- className: ''
+ className: '',
+ style: ''
},
render(h){
return h(CarouselCollectionsListTheme, {
@@ -59,6 +60,7 @@ export default (element) => {
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
className: this.className,
+ style: this.style
}
});
},
@@ -77,6 +79,7 @@ export default (element) => {
this.showCollectionThumbnail = this.$el.attributes['show-collection-thumbnail'] != undefined ? this.$el.attributes['show-collection-thumbnail'].value == 'true' : false;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
+ this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
},
methods: {
__(text, domain) {
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.vue b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.vue
index da84c5d21..e2fc2ad45 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.vue
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-collections-list/theme.vue
@@ -1,5 +1,7 @@
-
+
: (
-
+
{ items.length ?
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/save.js b/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/save.js
index 0671a911e..2275ada56 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/save.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/save.js
@@ -1,3 +1,5 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
export default function ({ attributes, className }) {
const {
content,
@@ -20,10 +22,12 @@ export default function ({ attributes, className }) {
collectionBackgroundColor,
collectionTextColor
} = attributes;
-
+
+ // Gets attributes such as style, that are automatically added by the editor hook
+ const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
return
span,
a:hover>span {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
font-weight: bold;
text-decoration: none;
padding: 8px 12px;
@@ -163,7 +163,9 @@
width: 100%;
height: auto;
}
+ a,
a:hover {
+ color: inherit;
text-decoration: none;
}
}
@@ -173,7 +175,8 @@
width: 100%;
font-size: 0.875em;
font-style: italic;
- color: var(--tainacan-block-gray4, $gray4);
+ color: inherit;
+ opacity: 0.5;
text-align: center;
margin: 0 auto;
padding: 8px 2px 2px 2px;
@@ -257,14 +260,14 @@
li.item-list-item {
position: relative;
display: block;
- margin: 16px;
+ margin: 8px 16px;
width: calc(14.285% - 32px);
min-width: calc(14.285% - 32px);
scroll-snap-align: start;
scroll-margin: 0 16px;
a {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
font-weight: bold;
line-height: normal;
}
@@ -277,7 +280,7 @@
}
&:hover a {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
text-decoration: none;
}
@@ -528,5 +531,13 @@
}
}
}
-
+}
+.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-carousel-items-list {
+ .swiper-container,
+ li.item-list-item {
+ a>span,
+ a:hover>span {
+ color: var(--tainacan-block-gray5, $gray5)
+ }
+ }
}
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.js b/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.js
index 830ed7f9e..b125abbd1 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.js
@@ -45,7 +45,8 @@ export default (element) => {
collectionTextColor: '#ffffff',
tainacanApiRoot: '',
tainacanBaseUrl: '',
- className: ''
+ className: '',
+ style: ''
},
render(h){
return h(CarouselItemsListTheme, {
@@ -70,7 +71,8 @@ export default (element) => {
collectionTextColor: this.collectionTextColor,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
- className: this.className
+ className: this.className,
+ style: this.style
}
});
},
@@ -95,6 +97,7 @@ export default (element) => {
this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
+ this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
},
methods: {
__(text, domain) {
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.vue b/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.vue
index d43c7cf18..cdbce88c5 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.vue
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-items-list/theme.vue
@@ -1,5 +1,7 @@
-
+
{{ item.title ? item.title : '' }}
-
@@ -209,7 +208,8 @@ export default {
collectionTextColor: String,
tainacanApiRoot: String,
tainacanBaseUrl: String,
- className: String
+ className: String,
+ style: String
},
data() {
return {
@@ -224,7 +224,6 @@ export default {
paged: undefined,
totalItems: 0,
swiperOptions: {
- lazy: this.maxItemsPerScreen <= 4,
watchOverflow: true,
mousewheel: true,
observer: true,
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/block.json b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/block.json
index aa09b80cb..4eb838c7b 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/block.json
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/block.json
@@ -1,6 +1,7 @@
{
"name": "tainacan/carousel-terms-list",
"title": "Tainacan Terms Carousel",
+ "apiVersion": 2,
"category": "tainacan-blocks",
"keywords": [ "carousel", "slider", "taxonomy" ],
"description": "List terms on a Carousel, showing their thumbnails or a preview of items.",
@@ -103,6 +104,12 @@
"multiple": true,
"typography": {
"fontSize": true
+ },
+ "color": {
+ "text": true,
+ "background": false,
+ "gradients": false,
+ "link": true
}
},
"editorScript": "carousel-terms-list",
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/edit.js b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/edit.js
index 1669d7ae6..bffbb09b5 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/edit.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/edit.js
@@ -2,7 +2,7 @@ const { __ } = wp.i18n;
const { RangeControl, Spinner, Button, BaseControl, ToggleControl, SelectControl, Placeholder, IconButton, PanelBody } = wp.components;
-const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import TermsModal from '../terms-list/terms-modal.js';
import tainacan from '../../js/axios.js';
@@ -31,6 +31,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
taxonomyId
} = attributes;
+ // Gets blocks props from hook
+ const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
// Obtains block's client id to render it on save function
setAttributes({ blockId: clientId });
@@ -175,7 +178,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
src={ `${tainacan_blocks.base_url}/assets/images/carousel-terms-list.png` } />
: (
-
+
{ terms.length ?
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/save.js b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/save.js
index 09fd9c9c0..9dca7d430 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/save.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/save.js
@@ -1,3 +1,5 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
export default function({ attributes, className }) {
const {
content,
@@ -14,9 +16,12 @@ export default function({ attributes, className }) {
showTermThumbnail,
taxonomyId
} = attributes;
+
+ // Gets attributes such as style, that are automatically added by the editor hook
+ const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
return
{ return term.id; })) }
arrows-position={ arrowsPosition }
auto-play={ '' + autoPlay }
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/style.scss b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/style.scss
index 475d35844..3f7b0ed5a 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/style.scss
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/style.scss
@@ -139,7 +139,7 @@
a>span,
a:hover>span {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
font-weight: bold;
text-decoration: none;
padding: 8px 12px;
@@ -151,7 +151,9 @@
width: 100%;
height: auto;
}
+ a,
a:hover {
+ color: inherit;
text-decoration: none;
}
@@ -191,7 +193,7 @@
width: 100%;
font-size: 0.875em;
font-style: italic;
- color: var(--tainacan-block-gray4, $gray4);
+ color: inherit;
text-align: center;
margin: 0 auto;
padding: 8px 2px 2px 2px;
@@ -279,7 +281,7 @@
li.term-list-item {
position: relative;
display: block;
- margin: 16px 32px 16px 0px;
+ margin: 8px 32px 8px 0px;
width: calc(16.666% - 32px);
min-width: calc(16.666% - 32px);
scroll-snap-align: start;
@@ -292,7 +294,7 @@
}
a {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
font-weight: bold;
line-height: normal;
}
@@ -306,7 +308,7 @@
}
&:hover a {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
text-decoration: none;
}
@@ -439,7 +441,6 @@
min-width: calc(100% - 32px);
}
}
-
@media only screen and (max-width: 1452px) {
ul.terms-list-edit li.terms-list-item {
@@ -574,5 +575,13 @@
}
}
}
-
+}
+.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-carousel-terms-list {
+ .swiper-container,
+ li.term-list-item {
+ a>span,
+ a:hover>span {
+ color: var(--tainacan-block-gray5, $gray5)
+ }
+ }
}
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.js b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.js
index 613732abb..fd23ad57d 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.js
@@ -39,7 +39,8 @@ export default (element) => {
tainacanApiRoot: '',
tainacanBaseUrl: '',
className: '',
- taxonomyId: ''
+ taxonomyId: '',
+ style: ''
},
render(h){
return h(CarouselTermsListTheme, {
@@ -58,7 +59,8 @@ export default (element) => {
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
className: this.className,
- taxonomyId: this.taxonomyId
+ taxonomyId: this.taxonomyId,
+ style: this.style
}
});
},
@@ -77,6 +79,7 @@ export default (element) => {
this.showTermThumbnail = this.$el.attributes['show-term-thumbnail'] != undefined ? this.$el.attributes['show-term-thumbnail'].value == 'true' : false;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
+ this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
},
methods: {
__(text, domain) {
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.vue b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.vue
index f14b4c9ac..630572f15 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.vue
+++ b/src/views/gutenberg-blocks/tainacan-blocks/carousel-terms-list/theme.vue
@@ -1,5 +1,7 @@
-
+
: (
-
+
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/collections-list/save.js b/src/views/gutenberg-blocks/tainacan-blocks/collections-list/save.js
index c0ce578cf..e2cf956f5 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/collections-list/save.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/collections-list/save.js
@@ -1,4 +1,10 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
export default function({ attributes, className }) {
const { content } = attributes;
- return this.cancelSelection() }
- shouldCloseOnClickOutside={ false }
- contentLabel={__('Configure your items search to be shown on block', 'tainacan')}>
-
-
- ) : (
- // Collections modal
- this.cancelSelection() }
- shouldCloseOnClickOutside={ false }
- contentLabel={__('Select items', 'tainacan')}>
-
- );
- }
-}
\ No newline at end of file
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/edit.js b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/edit.js
index 13c3dee7e..86a5b122b 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/edit.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/edit.js
@@ -2,9 +2,9 @@ const { __ } = wp.i18n;
const { ResizableBox, FocalPointPicker, SelectControl, RangeControl, Spinner, Button, ToggleControl, Placeholder, ColorPicker, ColorPalette, BaseControl, PanelBody } = wp.components;
-const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
-import DynamicItemsModal from './dynamic-items-modal.js';
+import DynamicItemsModal from '../carousel-items-list/dynamic-and-carousel-items-modal.js';
import tainacan from '../../js/axios.js';
import axios from 'axios';
import qs from 'qs';
@@ -16,7 +16,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
items,
content,
collection,
- collectionId,
+ collectionId,
showImage,
showName,
layout,
@@ -27,7 +27,9 @@ export default function({ attributes, setAttributes, className, isSelected, clie
maxItemsNumber,
order,
searchString,
+ selectedItems,
isLoading,
+ loadStrategy,
showSearchBar,
showCollectionHeader,
showCollectionLabel,
@@ -44,8 +46,12 @@ export default function({ attributes, setAttributes, className, isSelected, clie
cropImagesToSquare
} = attributes;
+ // Gets blocks props from hook
+ const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
// Obtains block's client id to render it on save function
setAttributes({ blockId: clientId });
+ const thumbHelper = ThumbnailHelperFunctions();
// Sets some defaults that were not working
if (maxColumnsCount === undefined) {
@@ -56,8 +62,10 @@ export default function({ attributes, setAttributes, className, isSelected, clie
cropImagesToSquare = true;
setAttributes({ cropImagesToSquare: cropImagesToSquare });
}
-
- const thumbHelper = ThumbnailHelperFunctions();
+ if (loadStrategy === undefined) {
+ loadStrategy = 'search';
+ setAttributes({ loadStrategy: loadStrategy });
+ }
function prepareItem(item) {
return (
@@ -68,15 +76,26 @@ export default function({ attributes, setAttributes, className, isSelected, clie
backgroundImage: layout == 'mosaic' ? `url(${ thumbHelper.getSrc(item['thumbnail'], 'medium_large', item['document_mimetype']) })` : 'none',
backgroundPosition: layout == 'mosaic' ? `${ (mosaicItemFocalPoint && mosaicItemFocalPoint.x ? mosaicItemFocalPoint.x : 0.5) * 100 }% ${ (mosaicItemFocalPoint && mosaicItemFocalPoint.y ? mosaicItemFocalPoint.y : 0.5) * 100 }%` : 'none'
}}
- >
+ >
+ { loadStrategy == 'selection' ?
+ ( tainacan_blocks.wp_version < '5.4' ?
+ removeItemOfId(item.id) }
+ icon="no-alt"
+ label={__('Remove', 'tainacan')}/>
+ :
+ ,
+ items: items,
+ isLoading: false
+ });
+
+ } else {
+ // Initializes some variables
+ mosaicDensity = mosaicDensity ? mosaicDensity : 5;
+ mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
+ mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
+ mosaicHeight = mosaicHeight ? mosaicHeight : 280;
+ mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
+ sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : '';
+
+ const mosaicGroups = mosaicPartition(response.data.items);
+ for (let mosaicGroup of mosaicGroups)
+ items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
+
+ setAttributes({
+ content: ,
+ items: items,
+ isLoading: false,
+ itemsRequestSource: itemsRequestSource,
+ mosaicDensity: mosaicDensity,
+ mosaicHeight: mosaicHeight,
+ mosaicGridRows: mosaicGridRows,
+ mosaicGridColumns: mosaicGridColumns,
+ mosaicItemFocalPoint: mosaicItemFocalPoint,
+ sampleBackgroundImage: sampleBackgroundImage
+ });
+ }
+
+ } else if (loadStrategy == 'selection') {
+
if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function')
itemsRequestSource.cancel('Previous items search canceled.');
itemsRequestSource = axios.CancelToken.source();
- setAttributes({
- isLoading: isLoading
- });
-
- let endpoint = '/collection' + searchURL.split('#')[1].split('/collections')[1];
- let query = endpoint.split('?')[1];
- let queryObject = qs.parse(query);
-
- // Set up max items to be shown
- if (maxItemsNumber != undefined && maxItemsNumber > 0)
- queryObject.perpage = maxItemsNumber;
- else if (queryObject.perpage != undefined && queryObject.perpage > 0)
- setAttributes({ maxItemsNumber: queryObject.perpage });
- else {
- queryObject.perpage = 12;
- setAttributes({ maxItemsNumber: 12 });
- }
-
- // Set up sorting order
- if (order != '' && showSearchBar)
- queryObject.order = order;
- else if (queryObject.order != '')
- setAttributes({ order: queryObject.order });
- else {
- queryObject.order = 'asc';
- setAttributes({ order: 'asc' });
- }
-
- // Set up sorting order
- if (searchString != undefined)
- queryObject.search = searchString;
- else if (queryObject.search != undefined)
- setAttributes({ searchString: queryObject.search });
- else {
- delete queryObject.search;
- setAttributes({ searchString: undefined });
- }
-
- // Remove unecessary queries
- delete queryObject.readmode;
- delete queryObject.iframemode;
- delete queryObject.admin_view_mode;
- delete queryObject.fetch_only_meta;
-
- endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
+ let endpoint = '/collection/' + collectionId + '/items?'+ qs.stringify({ postin: selectedItems, perpage: selectedItems.length }) + '&fetch_only=title,url,thumbnail';
tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
.then(response => {
-
+
if (layout !== 'mosaic') {
-
+
for (let item of response.data.items)
items.push(prepareItem(item));
@@ -206,7 +225,102 @@ export default function({ attributes, setAttributes, className, isSelected, clie
sampleBackgroundImage: sampleBackgroundImage
});
}
+
});
+ } else {
+
+ if (searchURL) {
+
+ if (itemsRequestSource != undefined && typeof itemsRequestSource == 'function')
+ itemsRequestSource.cancel('Previous items search canceled.');
+
+ itemsRequestSource = axios.CancelToken.source();
+
+ let endpoint = '/collection' + searchURL.split('#')[1].split('/collections')[1];
+ let query = endpoint.split('?')[1];
+ let queryObject = qs.parse(query);
+
+ // Set up max items to be shown
+ if (maxItemsNumber != undefined && maxItemsNumber > 0)
+ queryObject.perpage = maxItemsNumber;
+ else if (queryObject.perpage != undefined && queryObject.perpage > 0)
+ setAttributes({ maxItemsNumber: queryObject.perpage });
+ else {
+ queryObject.perpage = 12;
+ setAttributes({ maxItemsNumber: 12 });
+ }
+
+ // Set up sorting order
+ if (order != '' && showSearchBar)
+ queryObject.order = order;
+ else if (queryObject.order != '')
+ setAttributes({ order: queryObject.order });
+ else {
+ queryObject.order = 'asc';
+ setAttributes({ order: 'asc' });
+ }
+
+ // Set up sorting order
+ if (searchString != undefined)
+ queryObject.search = searchString;
+ else if (queryObject.search != undefined)
+ setAttributes({ searchString: queryObject.search });
+ else {
+ delete queryObject.search;
+ setAttributes({ searchString: undefined });
+ }
+
+ // Remove unecessary queries
+ delete queryObject.readmode;
+ delete queryObject.iframemode;
+ delete queryObject.admin_view_mode;
+ delete queryObject.fetch_only_meta;
+
+ endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
+
+ tainacan.get(endpoint, { cancelToken: itemsRequestSource.token })
+ .then(response => {
+
+ if (layout !== 'mosaic') {
+
+ for (let item of response.data.items)
+ items.push(prepareItem(item));
+
+ setAttributes({
+ content: ,
+ items: items,
+ isLoading: false,
+ itemsRequestSource: itemsRequestSource
+ });
+
+ } else {
+ // Initializes some variables
+ mosaicDensity = mosaicDensity ? mosaicDensity : 5;
+ mosaicGridRows = mosaicGridRows ? mosaicGridRows : 3;
+ mosaicGridColumns = mosaicGridColumns ? mosaicGridColumns : 3;
+ mosaicHeight = mosaicHeight ? mosaicHeight : 280;
+ mosaicItemFocalPoint = mosaicItemFocalPoint ? mosaicItemFocalPoint : { x: 0.5, y: 0.5 };
+ sampleBackgroundImage = response.data.items && response.data.items[0] && response.data.items[0] ? getItemThumbnail(response.data.items[0], 'tainacan-medium') : '';
+
+ const mosaicGroups = mosaicPartition(response.data.items);
+ for (let mosaicGroup of mosaicGroups)
+ items.push(prepareMosaicItem(mosaicGroup, mosaicGroups.length));
+
+ setAttributes({
+ content: ,
+ items: items,
+ isLoading: false,
+ itemsRequestSource: itemsRequestSource,
+ mosaicDensity: mosaicDensity,
+ mosaicHeight: mosaicHeight,
+ mosaicGridRows: mosaicGridRows,
+ mosaicGridColumns: mosaicGridColumns,
+ mosaicItemFocalPoint: mosaicItemFocalPoint,
+ sampleBackgroundImage: sampleBackgroundImage
+ });
+ }
+ });
+ }
}
}
@@ -258,13 +372,46 @@ export default function({ attributes, setAttributes, className, isSelected, clie
)
}
- function openDynamicItemsModal() {
+ function openDynamicItemsModal(aLoadStrategy) {
+ loadStrategy = aLoadStrategy;
isModalOpen = true;
setAttributes( {
- isModalOpen: isModalOpen
+ isModalOpen: isModalOpen,
+ loadStrategy: loadStrategy
} );
}
+ function removeItemOfId(itemId) {
+
+ let existingItemIndex = -1;
+
+ let existingSelectedItemIndex = selectedItems.findIndex((existingSelectedItem) => existingSelectedItem == itemId);
+ if (existingSelectedItemIndex >= 0)
+ selectedItems.splice(existingSelectedItemIndex, 1);
+
+ if (layout == 'mosaic') {
+ existingItemIndex = items.findIndex((existingItem) => existingItem.key == itemId);
+
+ setAttributes({
+ selectedItems: selectedItems,
+ content:
+ });
+ // In the case of the mosaic layout, we need to re-render as the items array is organized in groups.
+ setContent();
+ } else {
+ existingItemIndex = items.findIndex((existingItem) => existingItem.key == itemId);
+
+ if (existingItemIndex >= 0)
+ items.splice(existingItemIndex, 1);
+
+ setAttributes({
+ selectedItems: selectedItems,
+ items: items,
+ content:
+ });
+ }
+ }
+
function updateLayout(newLayout) {
layout = newLayout;
@@ -344,32 +491,49 @@ export default function({ attributes, setAttributes, className, isSelected, clie
];
return content == 'preview' ?
-
{ content }
+
+ // Gets attributes such as style, that are automatically added by the editor hook
+ const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
+
+ return { content }
};
\ No newline at end of file
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/collections-list/style.scss b/src/views/gutenberg-blocks/tainacan-blocks/collections-list/style.scss
index 5c79b6019..88f07e7a5 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/collections-list/style.scss
+++ b/src/views/gutenberg-blocks/tainacan-blocks/collections-list/style.scss
@@ -54,7 +54,7 @@
width: 185px;
a {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
border: none;
font-weight: bold;
line-height: normal;
@@ -72,8 +72,9 @@
display: none;
}
+ a,
&:hover a {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
text-decoration: none;
}
}
@@ -147,7 +148,7 @@
width: calc(20% - 24px);
a {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
height: auto;
display: flex;
align-items: center;
@@ -168,8 +169,9 @@
display: none;
}
+ a,
&:hover a {
- color: var(--tainacan-block-gray5, $gray5);
+ color: inherit;
text-decoration: none;
}
@@ -195,3 +197,12 @@
}
}
}
+.block-editor-block-list__block:not(.has-text-color)>.wp-block-tainacan-collections-list {
+ li.collection-list-item {
+ a>span,
+ a:hover>span {
+ color: inherit;
+ }
+ }
+}
+
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/block.json b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/block.json
index 9549480b7..64e6dafce 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/block.json
+++ b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/block.json
@@ -1,6 +1,7 @@
{
"name": "tainacan/dynamic-items-list",
"title": "Tainacan Collection's Items List",
+ "apiVersion": 2,
"category": "tainacan-blocks",
"keywords": [ "items", "search", "collection" ],
"description": "Dynamically list items from a Tainacan items search",
@@ -84,6 +85,14 @@
"type": "String",
"default": ""
},
+ "selectedItems": {
+ "type": "Array",
+ "default": []
+ },
+ "loadStrategy": {
+ "type": "String",
+ "value": "search"
+ },
"order": {
"type": "String",
"default": ""
@@ -141,6 +150,12 @@
"html": false,
"typography": {
"fontSize": true
+ },
+ "color": {
+ "text": true,
+ "background": false,
+ "gradients": false,
+ "link": true
}
},
"editorScript": "dynamic-items-list",
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/deprecated.js b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/deprecated.js
index 349c3eaad..37b685478 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/deprecated.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/deprecated.js
@@ -1,4 +1,206 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
export default [
+ /* Deprecated when new selection strategy was added */
+ {
+ "attributes": {
+ "content": {
+ "type": "Array",
+ "source": "children",
+ "selector": "div"
+ },
+ "collectionId": {
+ "type": "String",
+ "default": ""
+ },
+ "items": {
+ "type": "Array",
+ "default": []
+ },
+ "showImage": {
+ "type": "Boolean",
+ "default": true
+ },
+ "showName": {
+ "type": "Boolean",
+ "default": true
+ },
+ "layout": {
+ "type": "String",
+ "default": "grid"
+ },
+ "isModalOpen": {
+ "type": "Boolean",
+ "default": false
+ },
+ "gridMargin": {
+ "type": "Number",
+ "default": 0
+ },
+ "searchURL": {
+ "type": "String",
+ "default": ""
+ },
+ "itemsRequestSource": {
+ "type": "String",
+ "default": ""
+ },
+ "maxItemsNumber": {
+ "type": "Number",
+ "value": 12
+ },
+ "isLoading": {
+ "type": "Boolean",
+ "value": false
+ },
+ "isLoadingCollection": {
+ "type": "Boolean",
+ "value": false
+ },
+ "showSearchBar": {
+ "type": "Boolean",
+ "value": false
+ },
+ "showCollectionHeader": {
+ "type": "Boolean",
+ "value": false
+ },
+ "showCollectionLabel": {
+ "type": "Boolean",
+ "value": false
+ },
+ "collection": {
+ "type": "Object",
+ "value": {}
+ },
+ "searchString": {
+ "type": "String",
+ "default": ""
+ },
+ "order": {
+ "type": "String",
+ "default": ""
+ },
+ "blockId": {
+ "type": "String",
+ "default": ""
+ },
+ "collectionBackgroundColor": {
+ "type": "String",
+ "default": "#454647"
+ },
+ "collectionTextColor": {
+ "type": "String",
+ "default": "#ffffff"
+ },
+ "mosaicHeight": {
+ "type": "Number",
+ "value": 280
+ },
+ "mosaicGridColumns": {
+ "type": "Number",
+ "value": 3
+ },
+ "mosaicGridRows": {
+ "type": "Number",
+ "value": 3
+ },
+ "sampleBackgroundImage": {
+ "type": "String",
+ "default": ""
+ },
+ "mosaicItemFocalPoint": {
+ "type": "Object",
+ "default": {
+ "x": 0.5,
+ "y": 0.5
+ }
+ },
+ "mosaicDensity": {
+ "type": "Number",
+ "default": 5
+ },
+ "maxColumnsCount": {
+ "type": "Number",
+ "default": 4
+ },
+ "cropImagesToSquare": {
+ "type": "Boolean",
+ "value": true
+ }
+ },
+ "supports": {
+ "align": ["full", "wide"],
+ "html": false,
+ "typography": {
+ "fontSize": true
+ },
+ "color": {
+ "text": true,
+ "background": false,
+ "gradients": false,
+ "link": true
+ }
+ },
+ save: function({ attributes, className }) {
+ const {
+ content,
+ blockId,
+ collectionId,
+ showImage,
+ showName,
+ layout,
+ gridMargin,
+ searchURL,
+ maxItemsNumber,
+ order,
+ showSearchBar,
+ showCollectionHeader,
+ showCollectionLabel,
+ collectionBackgroundColor,
+ collectionTextColor,
+ mosaicHeight,
+ mosaicGridRows,
+ mosaicGridColumns,
+ mosaicItemFocalPoint,
+ mosaicDensity,
+ maxColumnsCount,
+ cropImagesToSquare
+ } = attributes;
+
+ // Gets attributes such as style, that are automatically added by the editor hook
+ const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
+ return
+ { content }
+
+ }
+ },
/* Deprecated on Tainacan 0.18.4, due to the new block.json strategy */
{
attributes: {
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/dynamic-items-modal.js b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/dynamic-items-modal.js
deleted file mode 100644
index 68bee91fc..000000000
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/dynamic-items-modal.js
+++ /dev/null
@@ -1,293 +0,0 @@
-import tainacan from '../../js/axios.js';
-import axios from 'axios';
-
-const { __ } = wp.i18n;
-
-const { TextControl, Button, Modal, RadioControl, Spinner } = wp.components;
-
-export default class DynamicItemsModal extends React.Component {
- constructor(props) {
- super(props);
-
- // Initialize state
- this.state = {
- collectionsPerPage: 24,
- collectionId: undefined,
- collectionName: '',
- isLoadingCollections: false,
- modalCollections: [],
- totalModalCollections: 0,
- collectionPage: 1,
- temporaryCollectionId: '',
- searchCollectionName: '',
- collections: [],
- collectionsRequestSource: undefined,
- searchURL: '',
- };
-
- // Bind events
- this.resetCollections = this.resetCollections.bind(this);
- this.selectCollection = this.selectCollection.bind(this);
- this.fetchCollections = this.fetchCollections.bind(this);
- this.fetchModalCollections = this.fetchModalCollections.bind(this);
- this.fetchCollection = this.fetchCollection.bind(this);
- this.applySelectedSearchURL = this.applySelectedSearchURL.bind(this);
- }
-
- componentWillMount() {
-
- this.setState({
- collectionId: this.props.existingCollectionId
- });
-
- if (this.props.existingCollectionId) {
- this.fetchCollection(this.props.existingCollectionId);
- this.setState({ searchURL: this.props.existingSearchURL ? this.props.existingSearchURL : tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/'+ this.props.existingCollectionId + '/items/?readmode=true&iframemode=true&status=publish' });
- } else {
- this.setState({ collectionPage: 1 });
- this.fetchModalCollections();
- }
- }
-
- // COLLECTIONS RELATED --------------------------------------------------
- fetchModalCollections() {
-
- let someModalCollections = this.state.modalCollections;
- if (this.state.collectionPage <= 1)
- someModalCollections = [];
-
- let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage + '&paged=' + this.state.collectionPage;
-
- this.setState({
- isLoadingCollections: true,
- collectionPage: this.state.collectionPage + 1,
- modalCollections: someModalCollections
- });
-
- tainacan.get(endpoint)
- .then(response => {
-
- let otherModalCollections = this.state.modalCollections;
- for (let collection of response.data) {
- otherModalCollections.push({
- name: collection.name,
- id: collection.id
- });
- }
-
- this.setState({
- isLoadingCollections: false,
- modalCollections: otherModalCollections,
- totalModalCollections: response.headers['x-wp-total']
- });
-
- return otherModalCollections;
- })
- .catch(error => {
- console.log('Error trying to fetch collections: ' + error);
- });
- }
-
- fetchCollection(collectionId) {
- tainacan.get('/collections/' + collectionId)
- .then((response) => {
- this.setState({ collectionName: response.data.name });
- }).catch(error => {
- console.log('Error trying to fetch collection: ' + error);
- });
- }
-
- selectCollection(selectedCollectionId) {
- this.setState({
- collectionId: selectedCollectionId,
- searchURL: tainacan_blocks.admin_url + 'admin.php?page=tainacan_admin#/collections/' + selectedCollectionId + '/items/?readmode=true&iframemode=true&status=publish'
- });
-
- this.props.onSelectCollection(selectedCollectionId);
- this.fetchCollection(selectedCollectionId);
- }
-
- fetchCollections(name) {
-
- if (this.state.collectionsRequestSource != undefined)
- this.state.collectionsRequestSource.cancel('Previous collections search canceled.');
-
- let aCollectionRequestSource = axios.CancelToken.source();
-
- this.setState({
- collectionsRequestSource: aCollectionRequestSource,
- isLoadingCollections: true,
- collections: [],
- items: []
- });
-
- let endpoint = '/collections/?orderby=title&order=asc&perpage=' + this.state.collectionsPerPage;
- if (name != undefined && name != '')
- endpoint += '&search=' + name;
-
- tainacan.get(endpoint, { cancelToken: aCollectionRequestSource.token })
- .then(response => {
- let someCollections = response.data.map((collection) => ({ name: collection.name, id: collection.id + '' }));
-
- this.setState({
- isLoadingCollections: false,
- collections: someCollections
- });
-
- return someCollections;
- })
- .catch(error => {
- console.log('Error trying to fetch collections: ' + error);
- });
- }
-
- applySelectedSearchURL() {
- this.props.onApplySearchURL(document.getElementById("itemsFrame").contentWindow.location.href);
- }
-
- resetCollections() {
-
- this.setState({
- collectionId: null,
- collectionPage: 1,
- modalCollections: []
- });
- this.fetchModalCollections();
- }
-
- cancelSelection() {
-
- this.setState({
- modalCollections: []
- });
-
- this.props.onCancelSelection();
- }
-
- render() {
- return this.state.collectionId ? (
- // Items modal
-
-
-
-
-
-
-
- {
- this.setState({
- searchCollectionName: value
- });
- _.debounce(this.fetchCollections(value), 300);
- }}/>
-
- {(
- this.state.searchCollectionName != '' ? (
- this.state.collections.length > 0 ?
- (
-
-
- ) :
- this.state.isLoadingCollections ? (
-
- {
- {
- return { label: collection.name, value: '' + collection.id }
- })
- }
- onChange={ ( aCollectionId ) => {
- this.setState({ temporaryCollectionId: aCollectionId });
- } } />
- }
-
-
-
- ):
- this.state.modalCollections.length > 0 ?
- (
- { __('Sorry, no collection found.', 'tainacan') }
-
-
- ) : this.state.isLoadingCollections ?
- {
- {
- return { label: collection.name, value: '' + collection.id }
- })
- }
- onChange={ ( aCollectionId ) => {
- this.setState({ temporaryCollectionId: aCollectionId });
- } } />
- }
-
-
-
- { __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}
- { - this.state.modalCollections.length < this.state.totalModalCollections ? ( - - ) : null - } -
-
- )}
- { __('Sorry, no collection found.', 'tainacan') }
-
-
-
-
-
- 
-
- : (
+
+
+ : (
+
-
@@ -432,39 +596,43 @@ export default function({ attributes, setAttributes, className, isSelected, clie
: null
}
-
- {
- showSearchBar = isChecked;
- setAttributes({ showSearchBar: showSearchBar });
- }
- }
- />
-
+ { loadStrategy == 'search' ?
+
+ {
+ showSearchBar = isChecked;
+ setAttributes({ showSearchBar: showSearchBar });
+ }
+ }
+ />
+
+ : null }
-
+ { items.length ?
{ TainacanBlocksCompatToolbar({ controls: layoutControls }) }
- { items.length ?
- TainacanBlocksCompatToolbar({
- label: __('Configure search', 'tainacan'),
- icon: ,
- onClick: openDynamicItemsModal
- })
- : null }
+ { loadStrategy != 'parent' ?
+ (
+ loadStrategy == 'selection' ?
+ TainacanBlocksCompatToolbar({
+ label: __('Add more items', 'tainacan'),
+ icon: ,
+ onClick: openDynamicItemsModal,
+ onClickParams: 'selection'
+ })
+ :
+ TainacanBlocksCompatToolbar({
+ label: __('Configure a search', 'tainacan'),
+ icon: ,
+ onClick: openDynamicItemsModal,
+ onClickParams: 'search'
+ })
+ ) : null
+ }
-
+ : null }
- {
- maxItemsNumber = aMaxItemsNumber;
- setAttributes( { maxItemsNumber: aMaxItemsNumber } )
- setContent();
- }}
- min={ 1 }
- max={ 96 }
- />
+ { loadStrategy == 'search' ?
+
+ : null }
+ {
+ maxItemsNumber = aMaxItemsNumber;
+ setAttributes( { maxItemsNumber: aMaxItemsNumber } )
+ setContent();
+ }}
+ min={ 1 }
+ max={ 96 }
+ />
+
- + : null }
{ layout == 'list' ?
@@ -591,6 +759,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
{ label: '4 x 3', value: '4x3' },
{ label: '4 x 5', value: '4x5' },
{ label: '5 x 4', value: '5x4' },
+ { label: '6 x 5', value: '6x5' },
] }
onChange={ ( aGrid ) => {
mosaicGridRows = aGrid.split('x')[0];
@@ -625,21 +794,41 @@ export default function({ attributes, setAttributes, className, isSelected, clie
{ isModalOpen ?
{
+ if (collectionId != selectedCollectionId) {
+ items = [];
+ selectedItems = [];
+ }
collectionId = selectedCollectionId;
- setAttributes({ collectionId: collectionId });
+ setAttributes({
+ collectionId: collectionId,
+ items: items,
+ selectedItems: selectedItems
+ });
fetchCollectionForHeader();
}}
onApplySearchURL={ (aSearchURL) =>{
- searchURL = aSearchURL
+ searchURL = aSearchURL;
+ loadStrategy = 'search';
setAttributes({
searchURL: searchURL,
isModalOpen: false
});
setContent();
}}
+ onApplySelectedItems={ (aSelectionOfItems) => {
+ selectedItems = selectedItems.concat(aSelectionOfItems);
+ loadStrategy = 'selection';
+ setAttributes({
+ selectedItems: selectedItems,
+ loadStrategy: loadStrategy,
+ isModalOpen: false
+ });
+ setContent();
+ }}
onCancelSelection={ () => setAttributes({ isModalOpen: false }) }/>
: null
}
@@ -806,12 +995,25 @@ export default function({ attributes, setAttributes, className, isSelected, clie
{__('Dynamically list items from a Tainacan items search', 'tainacan')}
-
+ {
+ loadStrategy != 'parent' ?
+
+
+
+ : null
+ }
) : null
}
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/save.js b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/save.js
index 9ba28cafa..1e0b4e056 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/save.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/save.js
@@ -1,3 +1,5 @@
+const { useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+
export default function({ attributes, className }) {
const {
content,
@@ -24,10 +26,12 @@ export default function({ attributes, className }) {
cropImagesToSquare
} = attributes;
+ // Gets attributes such as style, that are automatically added by the editor hook
+ const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps.save();
return {__('or', 'tainacan')}
+ +.wp-block-tainacan-dynamic-items-list {
+ li.item-list-item {
+ a>span,
+ a:hover>span {
+ color: var(--tainacan-block-gray5, $gray5);
+ }
+ }
+}
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.js b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.js
index 65ad21e13..05a411519 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.js
@@ -32,6 +32,8 @@ export default (element) => {
layout: 'grid',
gridMargin: 0,
searchURL: '',
+ selectedItems: [],
+ loadStrategy: 'search',
maxItemsNumber: 12,
mosaicHeight: 40,
mosaicDensity: 5,
@@ -49,7 +51,8 @@ export default (element) => {
collectionTextColor: '#ffffff',
tainacanApiRoot: '',
tainacanBaseUrl: '',
- className: ''
+ className: '',
+ style: ''
},
render(h){
return h(DynamicItemsListTheme, {
@@ -68,6 +71,8 @@ export default (element) => {
maxColumnsCount: this.maxColumnsCount,
cropImagesToSquare: this.cropImagesToSquare,
searchURL: this.searchURL,
+ selectedItems: this.selectedItems,
+ loadStrategy: this.loadStrategy,
maxItemsNumber: this.maxItemsNumber,
order: this.order,
showSearchBar: this.showSearchBar,
@@ -77,13 +82,16 @@ export default (element) => {
collectionTextColor: this.collectionTextColor,
tainacanApiRoot: this.tainacanApiRoot,
tainacanBaseUrl: this.tainacanBaseUrl,
- className: this.className
+ className: this.className,
+ style: this.style
}
});
},
beforeMount () {
this.className = this.$el.attributes.class != undefined ? this.$el.attributes.class.value : undefined;
this.searchURL = this.$el.attributes['search-url'] != undefined ? this.$el.attributes['search-url'].value : undefined;
+ this.selectedItems = this.$el.attributes['selected-items'] != undefined ? JSON.parse(this.$el.attributes['selected-items'].value) : undefined;
+ this.loadStrategy = this.$el.attributes['load-strategy'] != undefined ? this.$el.attributes['load-strategy'].value : undefined;
this.collectionId = this.$el.attributes['collection-id'] != undefined ? this.$el.attributes['collection-id'].value : undefined;
this.showImage = this.$el.attributes['show-image'] != undefined ? this.$el.attributes['show-image'].value == 'true' : true;
this.showName = this.$el.attributes['show-name'] != undefined ? this.$el.attributes['show-name'].value == 'true' : true;
@@ -106,6 +114,7 @@ export default (element) => {
this.collectionTextColor = this.$el.attributes['collection-text-color'] != undefined ? this.$el.attributes['collection-text-color'].value : undefined;
this.tainacanApiRoot = this.$el.attributes['tainacan-api-root'] != undefined ? this.$el.attributes['tainacan-api-root'].value : undefined;
this.tainacanBaseUrl = this.$el.attributes['tainacan-base-url'] != undefined ? this.$el.attributes['tainacan-base-url'].value : undefined;
+ this.style = this.$el.attributes.style != undefined ? this.$el.attributes.style.value : undefined;
},
methods: {
__(text, domain) {
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.vue b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.vue
index 930f1b0f7..7f2e31d24 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.vue
+++ b/src/views/gutenberg-blocks/tainacan-blocks/dynamic-items-list/theme.vue
@@ -1,5 +1,7 @@
-
+
0)
- queryObject.perpage = this.maxItemsNumber;
- else if (queryObject.perpage != undefined && queryObject.perpage > 0)
- this.localMaxItemsNumber = queryObject.perpage;
- else {
- queryObject.perpage = 12;
- this.localMaxItemsNumber = 12;
- }
-
- // Set up sorting order
- if (this.localOrder != undefined)
- queryObject.order = this.localOrder;
- else if (queryObject.order != undefined)
- this.localOrder = queryObject.order;
- else {
- queryObject.order = 'asc';
- this.localOrder = 'asc';
- }
-
- // Set up sorting order
- if (this.searchString != undefined)
- queryObject.search = this.searchString;
- else if (queryObject.search != undefined)
- this.searchString = queryObject.search;
- else {
- delete queryObject.search;
- this.searchString = undefined;
- }
-
- // Set up paging
- if (this.paged != undefined)
- queryObject.paged = this.paged;
- else if (queryObject.paged != undefined)
- this.paged = queryObject.paged;
- else
- this.paged = 1;
-
- // emove unecessary queries
- delete queryObject.readmode;
- delete queryObject.iframemode;
- delete queryObject.admin_view_mode;
- delete queryObject.fetch_only_meta;
-
- endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
-
- this.tainacanAxios.get(endpoint, { cancelToken: this.itemsRequestSource.token })
- .then(response => {
-
- for (let item of response.data.items)
- this.items.push(item);
+ for (let item of this.selectedItems)
+ this.items.push(item);
this.isLoading = false;
- this.totalItems = response.headers['x-wp-total'];
+ this.totalItems = this.items.length;
- }).catch((error) => {
- this.isLoading = false;
- if (error.response && error.response.status && error.response.status == 401)
- this.errorMessage = 'Not allowed to see these items.'
- });
+ } else if (this.loadStrategy == 'selection') {
+ let endpoint = '/collection/' + this.collectionId + '/items?' + qs.stringify({ postin: this.selectedItems, perpage: this.selectedItems.length }) + '&fetch_only=title,url,thumbnail';
+
+ this.tainacanAxios.get(endpoint, { cancelToken: this.itemsRequestSource.token })
+ .then(response => {
+
+ for (let item of response.data.items)
+ this.items.push(item);
+
+ this.isLoading = false;
+ this.totalItems = response.headers['x-wp-total'];
+
+ }).catch((error) => {
+ this.isLoading = false;
+ if (error.response && error.response.status && error.response.status == 401)
+ this.errorMessage = 'Not allowed to see these items.'
+ });
+ } else {
+
+ let endpoint = '/collection' + this.searchURL.split('#')[1].split('/collections')[1];
+ let query = endpoint.split('?')[1];
+ let queryObject = qs.parse(query);
+
+ // Set up max items to be shown
+ if (this.maxItemsNumber != undefined && Number(this.maxItemsNumber) > 0)
+ queryObject.perpage = this.maxItemsNumber;
+ else if (queryObject.perpage != undefined && queryObject.perpage > 0)
+ this.localMaxItemsNumber = queryObject.perpage;
+ else {
+ queryObject.perpage = 12;
+ this.localMaxItemsNumber = 12;
+ }
+
+ // Set up sorting order
+ if (this.localOrder != undefined)
+ queryObject.order = this.localOrder;
+ else if (queryObject.order != undefined)
+ this.localOrder = queryObject.order;
+ else {
+ queryObject.order = 'asc';
+ this.localOrder = 'asc';
+ }
+
+ // Set up sorting order
+ if (this.searchString != undefined)
+ queryObject.search = this.searchString;
+ else if (queryObject.search != undefined)
+ this.searchString = queryObject.search;
+ else {
+ delete queryObject.search;
+ this.searchString = undefined;
+ }
+
+ // Set up paging
+ if (this.paged != undefined)
+ queryObject.paged = this.paged;
+ else if (queryObject.paged != undefined)
+ this.paged = queryObject.paged;
+ else
+ this.paged = 1;
+
+ // emove unecessary queries
+ delete queryObject.readmode;
+ delete queryObject.iframemode;
+ delete queryObject.admin_view_mode;
+ delete queryObject.fetch_only_meta;
+
+ endpoint = endpoint.split('?')[0] + '?' + qs.stringify(queryObject) + '&fetch_only=title,url,thumbnail';
+
+ this.tainacanAxios.get(endpoint, { cancelToken: this.itemsRequestSource.token })
+ .then(response => {
+
+ for (let item of response.data.items)
+ this.items.push(item);
+
+ this.isLoading = false;
+ this.totalItems = response.headers['x-wp-total'];
+
+ }).catch((error) => {
+ this.isLoading = false;
+ if (error.response && error.response.status && error.response.status == 401)
+ this.errorMessage = 'Not allowed to see these items.'
+ });
+ }
},
fetchCollectionForHeader() {
if (this.showCollectionHeader) {
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/facets-list/block.json b/src/views/gutenberg-blocks/tainacan-blocks/facets-list/block.json
index 174bc98fa..9327147bd 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/facets-list/block.json
+++ b/src/views/gutenberg-blocks/tainacan-blocks/facets-list/block.json
@@ -1,6 +1,7 @@
{
"name": "tainacan/facets-list",
"title": "Tainacan Facets List",
+ "apiVersion": 2,
"category": "tainacan-blocks",
"keywords": [ "facets", "search", "terms" ],
"description": "List facets from a Tainacan Collection or Repository",
@@ -131,6 +132,10 @@
"isLoadingChildTerms": {
"type": "Number",
"default": null
+ },
+ "itemsCountStyle": {
+ "type": "String",
+ "default": "default"
}
},
"supports": {
@@ -138,6 +143,12 @@
"html": false,
"typography": {
"fontSize": true
+ },
+ "color": {
+ "text": true,
+ "background": false,
+ "gradients": false,
+ "link": true
}
},
"editorScript": "facets-list",
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/facets-list/deprecated.js b/src/views/gutenberg-blocks/tainacan-blocks/facets-list/deprecated.js
index a193dcafd..b353f2b11 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/facets-list/deprecated.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/facets-list/deprecated.js
@@ -1,4 +1,186 @@
export default [
+ /* Deprecated on Tainacan 0.18.6 due to itemsCountStyle */
+ {
+ "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
+ }
+ },
+ "supports": {
+ "align": ["full", "wide"],
+ "html": false,
+ "typography": {
+ "fontSize": true
+ }
+ },
+ save({ attributes, className }){
+ const {
+ content,
+ blockId,
+ collectionId,
+ collectionSlug,
+ parentTerm,
+ showImage,
+ nameInsideImage,
+ showItemsCount,
+ showLoadMore,
+ layout,
+ cloudRate,
+ gridMargin,
+ metadatumId,
+ metadatumType,
+ maxFacetsNumber,
+ maxColumnsCount,
+ showSearchBar,
+ linkTermFacetsToTermPage,
+ appendChildTerms
+ } = attributes;
+ return
: null
}
- { facet.label ? facet.label : '' }
- { facet.total_items ? ({ facet.total_items }) : null }
+
: (
-
+ { content }
+
+ }
+ },
/* Deprecated on Tainacan 0.18.4 due to new block.json strategy */
{
attributes: {
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/facets-list/edit.js b/src/views/gutenberg-blocks/tainacan-blocks/facets-list/edit.js
index 57781b270..c815cd2b0 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/facets-list/edit.js
+++ b/src/views/gutenberg-blocks/tainacan-blocks/facets-list/edit.js
@@ -1,8 +1,8 @@
const { __ } = wp.i18n;
-const { BaseControl, RangeControl, Spinner, Button, ToggleControl, Tooltip, Placeholder, PanelBody } = wp.components;
+const { BaseControl, RangeControl, Spinner, SelectControl, Button, ToggleControl, Placeholder, PanelBody } = wp.components;
-const { InspectorControls, BlockControls } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
+const { InspectorControls, BlockControls, useBlockProps } = (tainacan_blocks.wp_version < '5.2' ? wp.editor : wp.blockEditor );
import MetadataModal from './metadata-modal.js';
import ParentTermModal from './parent-term-modal.js';
@@ -17,7 +17,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
facetsObject,
content,
collectionId,
- collectionSlug,
+ collectionSlug,
showImage,
nameInsideImage,
showItemsCount,
@@ -39,9 +39,13 @@ export default function({ attributes, setAttributes, className, isSelected, clie
appendChildTerms,
childFacetsObject,
linkTermFacetsToTermPage,
- isLoadingChildTerms
+ isLoadingChildTerms,
+ itemsCountStyle
} = attributes;
+ // Gets blocks props from hook
+ const blockProps = tainacan_blocks.wp_version < '5.6' ? { className: className } : useBlockProps();
+
// Obtains block's client id to render it on save function
setAttributes({ blockId: clientId });
@@ -70,6 +74,11 @@ export default function({ attributes, setAttributes, className, isSelected, clie
gridMargin = 24;
setAttributes({ gridMargin: gridMargin });
}
+ if (itemsCountStyle === undefined) {
+ itemsCountStyle = 'default';
+ setAttributes({ itemsCountStyle: itemsCountStyle });
+ }
+
// Uptades previous logic of metadatum type
if (metadatumType == __('Taxonomy', 'tainacan')) {
metadatumType = 'Tainacan\\Metadata_Types\\Taxonomy';
@@ -91,7 +100,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
href={ !appendChildTerms ? ((linkTermFacetsToTermPage && isMetadatumTypeTaxonomy(metadatumType)) ? facet.term_url : facet.url) : (facet.total_children > 0 ? null : (linkTermFacetsToTermPage ? facet.term_url : facet.url)) }
onClick={ () => { (appendChildTerms && facet.total_children > 0) ? displayChildTerms(facetId) : null } }
target="_blank"
- style={{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'rem' : ''}}>
+ style={{ fontSize: layout == 'cloud' && facet.total_items ? + (1 + (cloudRate/4) * Math.log(facet.total_items)) + 'em' : ''}}>
{ isMetadatumTypeTaxonomy(metadatumType) ?
+ { facet.label ? facet.label : '' }
+ {
+ facet.total_items ?
+
+ { itemsCountStyle === 'below' ?
+ ( facet.total_items != 1 ? (facet.total_items + ' ' + __('items', 'tainacan' )) : (facet.total_items + ' ' + __('item', 'tainacan' )) )
+ :
+ ( ' (' + facet.total_items + ')' )
+ }
+
+ : null }
+
{ appendChildTerms && facet.total_children > 0 ?
( childFacetsObject[facetId] && childFacetsObject[facetId].visible ?
+
@@ -500,7 +520,21 @@ export default function({ attributes, setAttributes, className, isSelected, clie
updateContent();
}
}
- />
+ />
+ { showItemsCount ?
+ {
+ itemsCountStyle = aStyle;
+ setAttributes({ itemsCountStyle: itemsCountStyle });
+ updateContent();
+ }}/>
+ : null }
{/* Settings related only to facets from Taxonomy metadata */}
{ isMetadatumTypeTaxonomy(metadatumType) ?
@@ -802,7 +836,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
diff --git a/src/views/gutenberg-blocks/tainacan-blocks/facets-list/facet-unit.vue b/src/views/gutenberg-blocks/tainacan-blocks/facets-list/facet-unit.vue
index 8755a4bb6..5dbd5646b 100644
--- a/src/views/gutenberg-blocks/tainacan-blocks/facets-list/facet-unit.vue
+++ b/src/views/gutenberg-blocks/tainacan-blocks/facets-list/facet-unit.vue
@@ -32,17 +32,24 @@
`${tainacanBaseUrl}/assets/images/placeholder_square.png`)
"
:alt="facet.label ? facet.label : $root.__('Thumbnail', 'tainacan')">
- {{ facet.label ? facet.label : '' }}
-
- ({{ facet.total_items }})
-
+
-
{ facets }
@@ -810,7 +844,7 @@ export default function({ attributes, setAttributes, className, isSelected, clie
:
-
{
@@ -828,26 +862,24 @@ export default function({ attributes, setAttributes, className, isSelected, clie
}
{ showLoadMore && facets.length > 0 && !isLoading ?
-
+ {{ facet.label ? facet.label : '' }}
+
+
+ {{ facet.total_items != 1 ? (facet.total_items + ' ' + $root.__('items', 'tainacan' )) : (facet.total_items + ' ' + $root.__('item', 'tainacan' )) }}
+
+
+ ({{ facet.total_items }})
+
+
+