Acessibility improvements using recent features made for Buefy (Ref. #3). Updates Buefy and Bulma.
This commit is contained in:
Mateus Machado Luna
parent
bb27a20b47
commit
21d8569cd7
|
|
@ -7,16 +7,13 @@
|
|||
"build": "cross-env NODE_ENV=development webpack --display-error-details --mode development --progress --hide-modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"@brainhubeu/react-carousel": "^1.10.1",
|
||||
"axios": "^0.18.0",
|
||||
"buefy": "^0.7.2",
|
||||
"bulma": "^0.7.2",
|
||||
"buefy": "^0.7.3",
|
||||
"bulma": "^0.7.4",
|
||||
"mdi": "^2.2.43",
|
||||
"moment": "^2.22.2",
|
||||
"node-sass": "^4.9.4",
|
||||
"qs": "^6.5.2",
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2",
|
||||
"t": "^0.5.1",
|
||||
"v-tooltip": "^2.0.0-rc.33",
|
||||
"vue": "^2.5.17",
|
||||
|
|
|
|||
|
|
@ -173,7 +173,8 @@
|
|||
class="two-columns-dropdown"
|
||||
ref="enabledViewModesDropdown"
|
||||
:mobile-modal="true"
|
||||
:disabled="Object.keys(registeredViewModes).length < 0">
|
||||
:disabled="Object.keys(registeredViewModes).length < 0"
|
||||
aria-role="list">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger"
|
||||
|
|
@ -188,7 +189,8 @@
|
|||
v-for="(viewMode, index) in Object.keys(registeredViewModes)"
|
||||
:key="index"
|
||||
class="control"
|
||||
custom>
|
||||
custom
|
||||
aria-role="listitem">
|
||||
<b-checkbox
|
||||
v-if="registeredViewModes[viewMode] != undefined"
|
||||
@input="updateViewModeslist(viewMode)"
|
||||
|
|
|
|||
|
|
@ -15,7 +15,8 @@
|
|||
position="is-bottom-left"
|
||||
v-if="$userCaps.hasCapability('delete_tainacan-collections')"
|
||||
:disabled="!isSelectingCollections"
|
||||
id="bulk-actions-dropdown">
|
||||
id="bulk-actions-dropdown"
|
||||
aria-role="list">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
|
|
@ -27,10 +28,13 @@
|
|||
|
||||
<b-dropdown-item
|
||||
id="item-delete-selected-items"
|
||||
@click="deleteSelectedCollections()">
|
||||
@click="deleteSelectedCollections()"
|
||||
aria-role="listitem">
|
||||
{{ $i18n.get('label_delete_selected_collections') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>{{ $i18n.get('label_edit_selected_collections') + ' (Not ready)' }}
|
||||
<b-dropdown-item
|
||||
disabled
|
||||
aria-role="listitem">{{ $i18n.get('label_edit_selected_collections') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -31,7 +31,8 @@
|
|||
position="is-bottom-left"
|
||||
v-if="items.length > 0 && items[0].current_user_can_edit"
|
||||
:disabled="selectedItemsIDs.every(id => id === false) || this.selectedItemsIDs.filter(item => item !== false).length <= 1"
|
||||
id="bulk-actions-dropdown">
|
||||
id="bulk-actions-dropdown"
|
||||
aria-role="list">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
|
|
@ -43,23 +44,27 @@
|
|||
|
||||
<b-dropdown-item
|
||||
v-if="$route.params.collectionId && $userCaps.hasCapability('edit_others_posts') && !isOnTrash"
|
||||
@click="openBulkEditionModal()">
|
||||
@click="openBulkEditionModal()"
|
||||
aria-role="listitem">
|
||||
{{ $i18n.get('label_bulk_edit_selected_items') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
v-if="$route.params.collectionId && $userCaps.hasCapability('edit_others_posts') && !isOnTrash"
|
||||
@click="sequenceEditSelectedItems()">
|
||||
@click="sequenceEditSelectedItems()"
|
||||
aria-role="listitem">
|
||||
{{ $i18n.get('label_sequence_edit_selected_items') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
v-if="collectionId"
|
||||
@click="deleteSelectedItems()"
|
||||
id="item-delete-selected-items">
|
||||
id="item-delete-selected-items"
|
||||
aria-role="listitem">
|
||||
{{ isOnTrash ? $i18n.get('label_delete_permanently') : $i18n.get('label_send_to_trash') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
v-if="collectionId && isOnTrash"
|
||||
@click="untrashSelectedItems()">
|
||||
@click="untrashSelectedItems()"
|
||||
aria-role="listitem">
|
||||
{{ $i18n.get('label_untrash_selected_items') }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
|
|
|||
|
|
@ -16,7 +16,8 @@
|
|||
position="is-bottom-left"
|
||||
v-if="$userCaps.hasCapability('delete_tainacan-taxonomies')"
|
||||
:disabled="!isSelecting"
|
||||
id="bulk-actions-dropdown">
|
||||
id="bulk-actions-dropdown"
|
||||
aria-role="list">
|
||||
<button
|
||||
class="button is-white"
|
||||
slot="trigger">
|
||||
|
|
@ -28,10 +29,13 @@
|
|||
|
||||
<b-dropdown-item
|
||||
id="item-delete-selected-items"
|
||||
@click="deleteSelected()">
|
||||
@click="deleteSelected()"
|
||||
aria-role="listitem">
|
||||
{{ $i18n.get('label_delete_selected_taxonomies') }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>{{ $i18n.get('label_edit_selected_taxonomies') + ' (Not ready)' }}
|
||||
<b-dropdown-item
|
||||
disabled
|
||||
aria-role="listitem">{{ $i18n.get('label_edit_selected_taxonomies') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -53,13 +53,14 @@
|
|||
<b-dropdown
|
||||
ref="advancedSearchShortcut"
|
||||
class="advanced-search-header-dropdown"
|
||||
position="is-bottom-left">
|
||||
position="is-bottom-left"
|
||||
aria-role="list">
|
||||
<a
|
||||
class="advanced-search-text"
|
||||
slot="trigger">
|
||||
{{ $i18n.get('advanced_search') }}
|
||||
</a>
|
||||
<b-dropdown-item>
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<div :style="{'height': '25px'}">
|
||||
<p class="is-pulled-left advanced-search-text-di">{{ $i18n.get('advanced_search') }}</p>
|
||||
<span
|
||||
|
|
@ -72,7 +73,8 @@
|
|||
</b-dropdown-item>
|
||||
<b-dropdown-item
|
||||
style="padding-left: 0 !important; padding-right: 0 !important;"
|
||||
:custom="true">
|
||||
:custom="true"
|
||||
aria-role="listitem">
|
||||
<advanced-search
|
||||
:is-repository-level="true"
|
||||
:is-header="true"/>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
<template>
|
||||
<b-field class="filter-item-forms">
|
||||
<b-collapse
|
||||
aria-id="collection-filters-collapse"
|
||||
class="show"
|
||||
:open="open"
|
||||
animation="filter-item">
|
||||
|
|
|
|||
|
|
@ -39,7 +39,8 @@
|
|||
:label="$i18n.get('label_go_to_page')">
|
||||
<b-dropdown
|
||||
position="is-top-right"
|
||||
@change="onPageChange">
|
||||
@change="onPageChange"
|
||||
aria-role="list">
|
||||
<button
|
||||
aria-labelledby="go-to-page-dropdown"
|
||||
class="button is-white"
|
||||
|
|
@ -54,7 +55,8 @@
|
|||
role="button"
|
||||
:key="pageNumber"
|
||||
v-for="pageNumber in totalPages"
|
||||
:value="Number(pageNumber)">
|
||||
:value="Number(pageNumber)"
|
||||
aria-role="listitem">
|
||||
{{ pageNumber }}
|
||||
</b-dropdown-item>
|
||||
</b-dropdown>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,9 @@
|
|||
|
||||
<!-- New Collection button -->
|
||||
<div class="header-item">
|
||||
<b-dropdown id="collection-creation-options-dropdown">
|
||||
<b-dropdown
|
||||
aria-role="list"
|
||||
id="collection-creation-options-dropdown">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
slot="trigger">
|
||||
|
|
@ -18,7 +20,7 @@
|
|||
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
|
||||
</span>
|
||||
</button>
|
||||
<b-dropdown-item>
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<router-link
|
||||
id="a-create-collection"
|
||||
tag="div"
|
||||
|
|
@ -31,7 +33,8 @@
|
|||
<b-dropdown-item
|
||||
:key="metadatum_mapper.slug"
|
||||
v-for="metadatum_mapper in metadatum_mappers"
|
||||
v-if="metadatum_mapper.metadata != false">
|
||||
v-if="metadatum_mapper.metadata != false"
|
||||
aria-role="listitem">
|
||||
<router-link
|
||||
:id="'a-create-collection-' + metadatum_mapper.slug"
|
||||
tag="div"
|
||||
|
|
@ -39,7 +42,7 @@
|
|||
{{ $i18n.get(metadatum_mapper.name) }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<div
|
||||
id="a-import-collection"
|
||||
tag="div"
|
||||
|
|
@ -131,7 +134,8 @@
|
|||
<div v-if="$userCaps.hasCapability('edit_tainacan-collections') && status == undefined || status == ''">
|
||||
<b-dropdown
|
||||
:disabled="isLoadingMetadatumMappers"
|
||||
id="collection-creation-options-dropdown">
|
||||
id="collection-creation-options-dropdown"
|
||||
aria-role="list">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
slot="trigger">
|
||||
|
|
@ -140,7 +144,7 @@
|
|||
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
|
||||
</span>
|
||||
</button>
|
||||
<b-dropdown-item>
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<router-link
|
||||
id="a-create-collection"
|
||||
tag="div"
|
||||
|
|
@ -153,7 +157,8 @@
|
|||
<b-dropdown-item
|
||||
:key="metadatum_mapper.slug"
|
||||
v-for="metadatum_mapper in metadatum_mappers"
|
||||
v-if="metadatum_mapper.metadata != false">
|
||||
v-if="metadatum_mapper.metadata != false"
|
||||
aria-role="listitem">
|
||||
<router-link
|
||||
:id="'a-create-collection-' + metadatum_mapper.slug"
|
||||
tag="div"
|
||||
|
|
@ -161,7 +166,7 @@
|
|||
{{ $i18n.get(metadatum_mapper.name) }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<div
|
||||
id="a-import-collection"
|
||||
tag="div"
|
||||
|
|
|
|||
|
|
@ -176,7 +176,8 @@
|
|||
v-if="!isOnTheme">
|
||||
<b-dropdown
|
||||
:mobile-modal="true"
|
||||
id="item-creation-options-dropdown">
|
||||
id="item-creation-options-dropdown"
|
||||
aria-role="list">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
slot="trigger">
|
||||
|
|
@ -186,7 +187,9 @@
|
|||
</span>
|
||||
</button>
|
||||
|
||||
<b-dropdown-item v-if="!isRepositoryLevel">
|
||||
<b-dropdown-item
|
||||
v-if="!isRepositoryLevel"
|
||||
aria-role="listitem">
|
||||
<router-link
|
||||
id="a-create-item"
|
||||
tag="div"
|
||||
|
|
@ -194,7 +197,9 @@
|
|||
{{ $i18n.get('add_one_item') }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item v-if="isRepositoryLevel">
|
||||
<b-dropdown-item
|
||||
v-if="isRepositoryLevel"
|
||||
aria-role="listitem">
|
||||
<div
|
||||
id="a-create-item"
|
||||
tag="div"
|
||||
|
|
@ -202,7 +207,9 @@
|
|||
{{ $i18n.get('add_one_item') }}
|
||||
</div>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item v-if="!isRepositoryLevel">
|
||||
<b-dropdown-item
|
||||
v-if="!isRepositoryLevel"
|
||||
aria-role="listitem">
|
||||
<router-link
|
||||
id="a-item-add-bulk"
|
||||
tag="div"
|
||||
|
|
@ -212,7 +219,7 @@
|
|||
<small class="is-small">{{ $i18n.get('info_bulk_add_items') }}</small>
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<div
|
||||
id="a-import-items"
|
||||
tag="div"
|
||||
|
|
@ -242,7 +249,8 @@
|
|||
ref="displayedMetadataDropdown"
|
||||
:mobile-modal="true"
|
||||
:disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry'"
|
||||
class="show metadata-options-dropdown">
|
||||
class="show metadata-options-dropdown"
|
||||
aria-role="list">
|
||||
<button
|
||||
:aria-label="$i18n.get('label_displayed_metadata')"
|
||||
class="button is-white"
|
||||
|
|
@ -257,7 +265,8 @@
|
|||
v-for="(column, index) in localDisplayedMetadata"
|
||||
:key="index"
|
||||
class="control"
|
||||
custom>
|
||||
custom
|
||||
aria-role="listitem">
|
||||
<b-checkbox
|
||||
v-model="column.display"
|
||||
:native-value="column.display">
|
||||
|
|
@ -282,7 +291,8 @@
|
|||
<label class="label is-hidden-mobile">{{ $i18n.get('label_sorting') + ':' }}</label>
|
||||
<b-dropdown
|
||||
:mobile-modal="true"
|
||||
@input="onChangeOrderBy($event)">
|
||||
@input="onChangeOrderBy($event)"
|
||||
aria-role="list">
|
||||
<button
|
||||
:aria-label="$i18n.get('label_sorting')"
|
||||
class="button is-white"
|
||||
|
|
@ -299,7 +309,8 @@
|
|||
v-for="metadatum of sortingMetadata"
|
||||
v-if="metadatum != undefined"
|
||||
:value="metadatum"
|
||||
:key="metadatum.slug">
|
||||
:key="metadatum.slug"
|
||||
aria-role="listitem">
|
||||
{{ metadatum.name }}
|
||||
</b-dropdown-item>
|
||||
<!-- Once we have sorting by metadata we can use this -->
|
||||
|
|
@ -355,7 +366,8 @@
|
|||
@change="onChangeViewMode($event)"
|
||||
:mobile-modal="true"
|
||||
position="is-bottom-left"
|
||||
:aria-label="$i18n.get('label_view_mode')">
|
||||
:aria-label="$i18n.get('label_view_mode')"
|
||||
aria-role="list">
|
||||
<button
|
||||
:aria-label="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization')"
|
||||
class="button is-white"
|
||||
|
|
@ -376,7 +388,8 @@
|
|||
v-for="(viewModeOption, index) of enabledViewModes"
|
||||
:key="index"
|
||||
:value="viewModeOption"
|
||||
v-if="registeredViewModes[viewModeOption] != undefined && registeredViewModes[viewModeOption].full_screen == false">
|
||||
v-if="registeredViewModes[viewModeOption] != undefined && registeredViewModes[viewModeOption].full_screen == false"
|
||||
aria-role="listitem">
|
||||
<span
|
||||
class="gray-icon"
|
||||
v-html="registeredViewModes[viewModeOption].icon"/>
|
||||
|
|
@ -394,7 +407,8 @@
|
|||
@change="onChangeAdminViewMode($event)"
|
||||
:mobile-modal="true"
|
||||
position="is-bottom-left"
|
||||
:aria-label="$i18n.get('label_view_mode')">
|
||||
:aria-label="$i18n.get('label_view_mode')"
|
||||
aria-role="list">
|
||||
<button
|
||||
:aria-label="$i18n.get('label_view_mode')"
|
||||
class="button is-white"
|
||||
|
|
@ -419,7 +433,8 @@
|
|||
aria-controls="items-list-results"
|
||||
role="button"
|
||||
:class="{ 'is-active': adminViewMode == 'table' }"
|
||||
:value="'table'">
|
||||
:value="'table'"
|
||||
aria-role="listitem">
|
||||
<span class="icon gray-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewtable"/>
|
||||
</span>
|
||||
|
|
@ -429,7 +444,8 @@
|
|||
aria-controls="items-list-results"
|
||||
role="button"
|
||||
:class="{ 'is-active': adminViewMode == 'cards' }"
|
||||
:value="'cards'">
|
||||
:value="'cards'"
|
||||
aria-role="listitem">
|
||||
<span class="icon gray-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewcards"/>
|
||||
</span>
|
||||
|
|
@ -439,7 +455,8 @@
|
|||
aria-controls="items-list-results"
|
||||
role="button"
|
||||
:class="{ 'is-active': adminViewMode == 'grid' }"
|
||||
:value="'grid'">
|
||||
:value="'grid'"
|
||||
aria-role="listitem">
|
||||
<span class="icon gray-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewminiature"/>
|
||||
</span>
|
||||
|
|
@ -449,7 +466,8 @@
|
|||
aria-controls="items-list-results"
|
||||
role="button"
|
||||
:class="{ 'is-active': adminViewMode == 'records' }"
|
||||
:value="'records'">
|
||||
:value="'records'"
|
||||
aria-role="listitem">
|
||||
<span class="icon gray-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewrecords"/>
|
||||
</span>
|
||||
|
|
@ -459,7 +477,8 @@
|
|||
aria-controls="items-list-results"
|
||||
role="button"
|
||||
:class="{ 'is-active': adminViewMode == 'masonry' }"
|
||||
:value="'masonry'">
|
||||
:value="'masonry'"
|
||||
aria-role="listitem">
|
||||
<span class="icon gray-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewmasonry"/>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -175,7 +175,8 @@
|
|||
v-if="!isOnTheme">
|
||||
<b-dropdown
|
||||
:mobile-modal="true"
|
||||
id="item-creation-options-dropdown">
|
||||
id="item-creation-options-dropdown"
|
||||
aria-role="list">
|
||||
<button
|
||||
class="button is-secondary"
|
||||
slot="trigger">
|
||||
|
|
@ -185,7 +186,7 @@
|
|||
</span>
|
||||
</button>
|
||||
|
||||
<b-dropdown-item>
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<router-link
|
||||
id="a-create-item"
|
||||
tag="div"
|
||||
|
|
@ -193,13 +194,17 @@
|
|||
{{ $i18n.get('add_one_item') }}
|
||||
</router-link>
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
<b-dropdown-item
|
||||
aria-role="listitem"
|
||||
disabled>
|
||||
{{ $i18n.get('add_items_bulk') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item disabled>
|
||||
<b-dropdown-item
|
||||
aria-role="listitem"
|
||||
disabled>
|
||||
{{ $i18n.get('add_items_external_source') + ' (Not ready)' }}
|
||||
</b-dropdown-item>
|
||||
<b-dropdown-item>
|
||||
<b-dropdown-item aria-role="listitem">
|
||||
<div
|
||||
id="a-import-collection"
|
||||
tag="div"
|
||||
|
|
@ -229,7 +234,8 @@
|
|||
ref="displayedMetadataDropdown"
|
||||
:mobile-modal="true"
|
||||
:disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry'"
|
||||
class="show metadata-options-dropdown">
|
||||
class="show metadata-options-dropdown"
|
||||
aria-role="list">
|
||||
<button
|
||||
:aria-label="$i18n.get('label_displayed_metadata')"
|
||||
class="button is-white"
|
||||
|
|
@ -244,7 +250,8 @@
|
|||
v-for="(column, index) in localDisplayedMetadata"
|
||||
:key="index"
|
||||
class="control"
|
||||
custom>
|
||||
custom
|
||||
aria-role="listitem">
|
||||
<b-checkbox
|
||||
v-model="column.display"
|
||||
:native-value="column.display">
|
||||
|
|
@ -269,7 +276,8 @@
|
|||
<label class="label is-hidden-mobile">{{ $i18n.get('label_sorting') + ':' }}</label>
|
||||
<b-dropdown
|
||||
:mobile-modal="true"
|
||||
@input="onChangeOrderBy($event)">
|
||||
@input="onChangeOrderBy($event)"
|
||||
aria-role="list">
|
||||
<button
|
||||
:aria-label="$i18n.get('label_sorting')"
|
||||
class="button is-white"
|
||||
|
|
@ -286,7 +294,8 @@
|
|||
v-for="metadatum of sortingMetadata"
|
||||
v-if="metadatum != undefined"
|
||||
:value="metadatum"
|
||||
:key="metadatum.slug">
|
||||
:key="metadatum.slug"
|
||||
aria-role="listitem">
|
||||
{{ metadatum.name }}
|
||||
</b-dropdown-item>
|
||||
<!-- Once we have sorting by metadata we can use this -->
|
||||
|
|
@ -342,7 +351,8 @@
|
|||
@change="onChangeViewMode($event)"
|
||||
:mobile-modal="true"
|
||||
position="is-bottom-left"
|
||||
:aria-label="$i18n.get('label_view_mode')">
|
||||
:aria-label="$i18n.get('label_view_mode')"
|
||||
aria-role="list">
|
||||
<button
|
||||
class="button is-white"
|
||||
:aria-label="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization')"
|
||||
|
|
@ -363,7 +373,8 @@
|
|||
v-for="(viewModeOption, index) of enabledViewModes"
|
||||
:key="index"
|
||||
:value="viewModeOption"
|
||||
v-if="registeredViewModes[viewModeOption] != undefined && registeredViewModes[viewModeOption].full_screen == false">
|
||||
v-if="registeredViewModes[viewModeOption] != undefined && registeredViewModes[viewModeOption].full_screen == false"
|
||||
aria-role="listitem">
|
||||
<span
|
||||
class="gray-icon"
|
||||
v-html="registeredViewModes[viewModeOption].icon"/>
|
||||
|
|
@ -381,7 +392,8 @@
|
|||
@change="onChangeAdminViewMode($event)"
|
||||
:mobile-modal="true"
|
||||
position="is-bottom-left"
|
||||
:aria-label="$i18n.get('label_view_mode')">
|
||||
:aria-label="$i18n.get('label_view_mode')"
|
||||
aria-role="list">
|
||||
<button
|
||||
class="button is-white"
|
||||
:aria-label="$i18n.get('label_view_mode')"
|
||||
|
|
@ -406,7 +418,8 @@
|
|||
aria-controls="items-list-results"
|
||||
role="button"
|
||||
:class="{ 'is-active': adminViewMode == 'table' }"
|
||||
:value="'table'">
|
||||
:value="'table'"
|
||||
aria-role="listitem">
|
||||
<span class="icon gray-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewtable"/>
|
||||
</span>
|
||||
|
|
@ -416,7 +429,8 @@
|
|||
aria-controls="items-list-results"
|
||||
role="button"
|
||||
:class="{ 'is-active': adminViewMode == 'cards' }"
|
||||
:value="'cards'">
|
||||
:value="'cards'"
|
||||
aria-role="listitem">
|
||||
<span class="icon gray-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewcards"/>
|
||||
</span>
|
||||
|
|
@ -426,7 +440,8 @@
|
|||
aria-controls="items-list-results"
|
||||
role="button"
|
||||
:class="{ 'is-active': adminViewMode == 'grid' }"
|
||||
:value="'grid'">
|
||||
:value="'grid'"
|
||||
aria-role="listitem">
|
||||
<span class="icon gray-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewminiature"/>
|
||||
</span>
|
||||
|
|
@ -436,7 +451,8 @@
|
|||
aria-controls="items-list-results"
|
||||
role="button"
|
||||
:class="{ 'is-active': adminViewMode == 'records' }"
|
||||
:value="'records'">
|
||||
:value="'records'"
|
||||
aria-role="listitem">
|
||||
<span class="icon gray-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewrecords"/>
|
||||
</span>
|
||||
|
|
@ -446,7 +462,8 @@
|
|||
aria-controls="items-list-results"
|
||||
role="button"
|
||||
:class="{ 'is-active': adminViewMode == 'masonry' }"
|
||||
:value="'masonry'">
|
||||
:value="'masonry'"
|
||||
aria-role="listitem">
|
||||
<span class="icon gray-icon">
|
||||
<i class="tainacan-icon tainacan-icon-viewmasonry"/>
|
||||
</span>
|
||||
|
|
|
|||
|
|
@ -282,6 +282,7 @@
|
|||
:key="index"
|
||||
class="field">
|
||||
<b-collapse
|
||||
:aria-id="'metadatum-collapse-' + metadatum.id"
|
||||
animation="filter-item"
|
||||
:open="open">
|
||||
<label
|
||||
|
|
|
|||
|
|
@ -13,7 +13,6 @@ function tainacan_blocks_initialize() {
|
|||
}
|
||||
|
||||
function tainacan_blocks_add_gutenberg_blocks_actions() {
|
||||
//add_action('init', 'tainacan_blocks_register_tainacan_collections_carousel');
|
||||
add_action('init', 'tainacan_blocks_register_tainacan_items_grid');
|
||||
|
||||
add_action('init', 'tainacan_blocks_add_plugin_settings');
|
||||
|
|
@ -41,10 +40,10 @@ function tainacan_blocks_register_tainacan_block_categories($categories, $post){
|
|||
function tainacan_blocks_enqueue_on_theme(){
|
||||
global $TAINACAN_BASE_URL;
|
||||
|
||||
wp_enqueue_script(
|
||||
'collections-carousel',
|
||||
$TAINACAN_BASE_URL . '/assets/gutenberg_collections_carousel-components.js'
|
||||
);
|
||||
// wp_enqueue_script(
|
||||
// 'collections-carousel',
|
||||
// $TAINACAN_BASE_URL . '/assets/gutenberg_collections_carousel-components.js'
|
||||
// );
|
||||
}
|
||||
|
||||
function tainacan_blocks_register_tainacan_items_grid(){
|
||||
|
|
@ -62,7 +61,7 @@ function tainacan_blocks_register_tainacan_items_grid(){
|
|||
array('wp-edit-blocks')
|
||||
);
|
||||
|
||||
if(function_exists('register_block_type')) {
|
||||
if (function_exists('register_block_type')) {
|
||||
register_block_type( 'tainacan/items-grid', array(
|
||||
'editor_script' => 'items-grid',
|
||||
'style' => 'items-grid'
|
||||
|
|
@ -70,29 +69,6 @@ function tainacan_blocks_register_tainacan_items_grid(){
|
|||
}
|
||||
}
|
||||
|
||||
function tainacan_blocks_register_tainacan_collections_carousel(){
|
||||
global $TAINACAN_BASE_URL;
|
||||
|
||||
wp_register_script(
|
||||
'collections-carousel',
|
||||
$TAINACAN_BASE_URL . '/assets/gutenberg_collections_carousel-components.js',
|
||||
array('wp-blocks', 'wp-element', 'wp-components', 'wp-editor')
|
||||
);
|
||||
|
||||
wp_register_style(
|
||||
'collections-carousel',
|
||||
$TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-blocks-style.css',
|
||||
array('wp-edit-blocks')
|
||||
);
|
||||
|
||||
if(function_exists('register_block_type')) {
|
||||
register_block_type( 'tainacan/collections-carousel', array(
|
||||
'editor_script' => 'collections-carousel',
|
||||
'style' => 'collections-carousel'
|
||||
) );
|
||||
}
|
||||
}
|
||||
|
||||
function tainacan_blocks_get_plugin_js_settings(){
|
||||
global $TAINACAN_BASE_URL;
|
||||
|
||||
|
|
@ -109,6 +85,5 @@ function tainacan_blocks_add_plugin_settings() {
|
|||
|
||||
$settings = tainacan_blocks_get_plugin_js_settings();
|
||||
|
||||
//wp_localize_script( 'collections-carousel', 'tainacan_plugin', $settings );
|
||||
wp_localize_script( 'items-grid', 'tainacan_plugin', $settings );
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,2 +1 @@
|
|||
//@import 'tainacan-collections/collections-carousel/collections-carousel';
|
||||
@import 'tainacan-items/items-grid/items-grid';
|
||||
|
|
@ -1,221 +0,0 @@
|
|||
.wp-block-tainacan-collections-carousel {
|
||||
min-height: 200px;
|
||||
|
||||
.wp-block-tainacan-collections-carousel__carousel-item {
|
||||
display: flex;
|
||||
|
||||
.wp-block-tainacan-collections-carousel__carousel-item-first {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
align-content: start;
|
||||
|
||||
img {
|
||||
padding: 0 !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-tainacan-collections-carousel__carousel-item-others {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
|
||||
img {
|
||||
padding: 0 !important;
|
||||
max-width: 100% !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.components-modal__frame {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.BrainhubCarousel {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.BrainhubCarousel .BrainhubCarousel__trackContainer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track .BrainhubCarousel__track--transition {
|
||||
-webkit-transition: -webkit-transform;
|
||||
transition: -webkit-transform;
|
||||
transition: transform;
|
||||
transition: transform, -webkit-transform;
|
||||
}
|
||||
|
||||
/* arrows */
|
||||
.BrainhubCarousel__arrows {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* variables */
|
||||
.BrainhubCarousel__dots {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot {
|
||||
outline: 0;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot .BrainhubCarousel__dot--selected {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail {
|
||||
outline: 0;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail .BrainhubCarousel__thumbnail--selected {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__thumbnail[type=button] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrows {
|
||||
position: relative;
|
||||
padding: 21px;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrows span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-style: solid;
|
||||
border-color: #298596;
|
||||
border-width: 3px 3px 0 0;
|
||||
padding: 5px;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrows:hover {
|
||||
background-color: #298596;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrows:hover span {
|
||||
border-color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrowLeft span {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(-135deg);
|
||||
transform: translate(-50%, -50%) rotate(-135deg);
|
||||
margin-left: 2.45px;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrowRight span {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(45deg);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
margin-left: -2.45px;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__track {
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
}
|
||||
|
||||
.BrainhubCarouselItem {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
|
||||
width: 100% !important;
|
||||
max-width: 100% !important;
|
||||
max-height: 100% !important;
|
||||
}
|
||||
|
||||
.BrainhubCarouselItem.BrainhubCarouselItem--clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.BrainhubCarouselItem .debug-number {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
font-size: 2em;
|
||||
text-shadow: 0px 0px 9px white;
|
||||
}
|
||||
|
|
@ -1,400 +0,0 @@
|
|||
const { registerBlockType } = wp.blocks;
|
||||
|
||||
const { Modal, Button, IconButton } = wp.components;
|
||||
|
||||
const { RichText } = wp.editor;
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
|
||||
import tainacan from '../../api-client/axios.js';
|
||||
|
||||
import Carousel from '@brainhubeu/react-carousel';
|
||||
|
||||
global.window.userSettings = { uid: 1 };
|
||||
|
||||
registerBlockType('tainacan/collections-carousel', {
|
||||
title: __('Tainacan Collections Carousel', 'tainacan'),
|
||||
icon: 'images-alt',
|
||||
category: 'tainacan-blocks',
|
||||
attributes: {
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
collectionsMatched: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
selectedCollections: {
|
||||
type: Array,
|
||||
default: []
|
||||
},
|
||||
items: {
|
||||
type: 'array',
|
||||
source: 'query',
|
||||
selector: 'a',
|
||||
query: {
|
||||
style: {
|
||||
source: 'attribute',
|
||||
attribute: 'style'
|
||||
},
|
||||
collection_id: {
|
||||
source: 'attribute',
|
||||
attribute: 'class'
|
||||
},
|
||||
url: {
|
||||
source: 'attribute',
|
||||
attribute: 'href'
|
||||
},
|
||||
img: {
|
||||
source: 'query',
|
||||
selector: 'img',
|
||||
query: {
|
||||
src: {
|
||||
source: 'attribute',
|
||||
attribute: 'src'
|
||||
},
|
||||
alt: {
|
||||
source: 'attribute',
|
||||
attribute: 'alt'
|
||||
},
|
||||
}
|
||||
}
|
||||
},
|
||||
default: [],
|
||||
},
|
||||
contentTemp: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
content: {
|
||||
type: 'array',
|
||||
source: 'children',
|
||||
selector: 'div'
|
||||
},
|
||||
},
|
||||
supports: {
|
||||
align: ['full', 'left', 'right', 'wide'],
|
||||
html: false
|
||||
},
|
||||
keywords: [__('tainacan', 'tainacan'), __('carousel', 'tainacan'), __('collections', 'tainacan')],
|
||||
edit({ attributes, setAttributes, className }) {
|
||||
console.log('edit', attributes);
|
||||
|
||||
let { contentTemp, collectionsMatched, selectedCollections, items, isOpen, content } = attributes;
|
||||
let isInEdit = true;
|
||||
|
||||
const arrowRight = (
|
||||
<span style={{cursor: 'pointer'}}>
|
||||
<svg style={{width: '48px', height: '48px'}} viewBox="0 0 24 24">
|
||||
<path fill="#298596" d="M10,17L15,12L10,7V17Z"/>
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
|
||||
const arrowLeft = (
|
||||
<span style={{cursor: 'pointer'}}>
|
||||
<svg style={{width: '48px', height: '48px'}} viewBox="0 0 24 24">
|
||||
<path fill="#298596" d="M14,7L9,12L14,17V7Z" />
|
||||
</svg>
|
||||
</span>
|
||||
);
|
||||
|
||||
function prepareItem(item, style, collectionName) {
|
||||
return (
|
||||
<a
|
||||
href={item.url}
|
||||
className={`${item.collection_id.split('{}')[0]}{}${collectionName}`}
|
||||
style={style}>
|
||||
<img
|
||||
src={
|
||||
(item.thumbnail && item.thumbnail.thumbnail) ?
|
||||
item.thumbnail.thumbnail[0] :
|
||||
( (item.img && item.img[0].src) ?
|
||||
item.img[0].src : `${tainacan_plugin.base_url}/admin/images/placeholder_square.png`)
|
||||
}
|
||||
alt={ item.title ? item.title : item.alt } />
|
||||
</a>
|
||||
);
|
||||
}
|
||||
|
||||
function getTop3ItemsOf(collection) {
|
||||
let collectionID = collection.id;
|
||||
|
||||
return tainacan.get(`/collection/${collectionID}/items?perpage=3&paged=1&orderby=date`)
|
||||
.then(response => {
|
||||
return response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
}
|
||||
|
||||
function updateContent(contentTemp){
|
||||
setAttributes({
|
||||
content: contentTemp.length ?
|
||||
(<div>
|
||||
<Carousel
|
||||
offset={20}
|
||||
arrowLeft={arrowLeft}
|
||||
arrowRight={arrowRight}
|
||||
addArrowClickHandler
|
||||
slidesPerScroll={1}
|
||||
slidesPerPage={contentTemp.length >= 3 ? 3 : contentTemp.length}
|
||||
arrows
|
||||
slides={contentTemp}
|
||||
breakpoints={{
|
||||
1000: { // these props will be applied when screen width is less than 1000px
|
||||
slidesPerPage: 2,
|
||||
clickToChange: false,
|
||||
centered: false,
|
||||
arrows: true,
|
||||
infinite: false,
|
||||
},
|
||||
500: {
|
||||
slidesPerPage: 1,
|
||||
slidesPerScroll: 1,
|
||||
clickToChange: false,
|
||||
centered: false,
|
||||
infinite: false,
|
||||
},
|
||||
}}
|
||||
/>
|
||||
</div>) : []
|
||||
});
|
||||
}
|
||||
|
||||
function removeCollection(collectionID) {
|
||||
let index = contentTemp.findIndex((coll) => {
|
||||
return coll.key == collectionID;
|
||||
});
|
||||
|
||||
if(index >= 0){
|
||||
contentTemp.splice(index, 1);
|
||||
selectedCollections.splice(index, 1);
|
||||
|
||||
setAttributes({contentTemp: contentTemp});
|
||||
updateContent(contentTemp);
|
||||
}
|
||||
}
|
||||
|
||||
function prepareContent(newContent, items, collection){
|
||||
newContent.push(
|
||||
<div key={collection.id}>
|
||||
<div style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'column'}}>
|
||||
|
||||
{ isInEdit ? (
|
||||
<IconButton
|
||||
isSmall
|
||||
isPrimary
|
||||
style={{position: 'absolute'}}
|
||||
label={ __('Remove', 'tainacan') }
|
||||
onClick={() => {
|
||||
console.log('clicked', collection.id);
|
||||
removeCollection(collection.id);
|
||||
}}
|
||||
icon="trash"/>
|
||||
) : null }
|
||||
|
||||
<div className={`${className}__carousel-item`}>
|
||||
<div style={{width: '87px', marginRight: '3px'}} className={`${className}__carousel-item-first`}>
|
||||
{items[0] ? prepareItem(items[0], {display: 'flex', height: '87px'}, collection.name) : null}
|
||||
</div>
|
||||
|
||||
<div className={`${className}__carousel-item-others`}>
|
||||
{items[1] ? prepareItem(items[1], {width: '42px', height: '42px', marginBottom: '3px'}, collection.name) : null}
|
||||
{items[2] ? prepareItem(items[2], {width: '42px', height: '42px'}, collection.name) : null}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<small style={{
|
||||
maxWidth: '130px',
|
||||
marginLeft: '10px'}}>
|
||||
<p style={{
|
||||
fontSize: '10px',
|
||||
whiteSpace: 'nowrap',
|
||||
overflow: 'hidden',
|
||||
textOverflow: 'ellipsis',
|
||||
fontWeight: '600'
|
||||
}}>{collection.name}</p>
|
||||
</small>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
console.info(newContent);
|
||||
|
||||
setAttributes({ contentTemp: newContent });
|
||||
}
|
||||
|
||||
if(content && content.length && content[0].type && !contentTemp.length){
|
||||
let groupedItems = items.reduce((r, a) => {
|
||||
r[a.collection_id] = r[a.collection_id] || [];
|
||||
r[a.collection_id].push(a);
|
||||
return r;
|
||||
}, Object.create(null));
|
||||
|
||||
console.log('Grouped', groupedItems);
|
||||
|
||||
for(let group in groupedItems){
|
||||
let itemsTemp = groupedItems[group];
|
||||
|
||||
prepareContent(contentTemp, itemsTemp, {
|
||||
name: itemsTemp[0].collection_id.split('{}')[1],
|
||||
id: itemsTemp[0].collection_id.split('{}')[0]
|
||||
});
|
||||
|
||||
selectedCollections.push(itemsTemp[0].collection_id.split('{}')[0]);
|
||||
}
|
||||
}
|
||||
|
||||
const autocompleters = [{
|
||||
name: __('Collections', 'tainacan'),
|
||||
triggerPrefix: '/',
|
||||
options(keyword) {
|
||||
if (!keyword) {
|
||||
return [];
|
||||
}
|
||||
|
||||
return tainacan.get(`/collections?search=${keyword}`)
|
||||
.then(response => {
|
||||
return response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
console.error(error);
|
||||
});
|
||||
},
|
||||
getOptionLabel(option) {
|
||||
return (<span>{option.name}</span>);
|
||||
},
|
||||
getOptionKeywords(option) {
|
||||
let found = selectedCollections.find((id) => {
|
||||
return id == option.id;
|
||||
});
|
||||
|
||||
if(found == undefined) {
|
||||
collectionsMatched.push(option.name);
|
||||
|
||||
return collectionsMatched;
|
||||
}
|
||||
},
|
||||
getOptionCompletion(option) {
|
||||
|
||||
let found = selectedCollections.find((id) => {
|
||||
return id == option.id;
|
||||
});
|
||||
|
||||
if(found == undefined) {
|
||||
selectedCollections.push(option.id);
|
||||
|
||||
getTop3ItemsOf(option).then((res) => {
|
||||
res.map((item) => {
|
||||
items.push(prepareItem(item))
|
||||
});
|
||||
|
||||
prepareContent(contentTemp, res, option);
|
||||
|
||||
setAttributes({items: items});
|
||||
});
|
||||
|
||||
setAttributes({selectedCollections: selectedCollections});
|
||||
|
||||
return (<abbr title={option.name}>{` | ${option.name} `}</abbr>);
|
||||
}
|
||||
},
|
||||
isDebounced: true,
|
||||
debounceSpeak: true,
|
||||
}];
|
||||
|
||||
return (
|
||||
<div className={ className }>
|
||||
<div style={{
|
||||
marginBottom: '20px',
|
||||
display: 'flex',
|
||||
justifyContent: 'center',
|
||||
alignContent: 'center'
|
||||
}}>
|
||||
<Button
|
||||
style={{
|
||||
justifyContent: 'center',
|
||||
width: '100%'
|
||||
}}
|
||||
isDefault
|
||||
onClick={ () => setAttributes( { isOpen: true } ) }>{ __('Add collection', 'tainacan') }</Button>
|
||||
</div>
|
||||
|
||||
{ isOpen ?
|
||||
<Modal
|
||||
shouldCloseOnClickOutside={ false }
|
||||
shouldCloneOnEsc={false}
|
||||
focusOnMount={false}
|
||||
title={ __('Add collection', 'tainacan') }
|
||||
onRequestClose={ () => {
|
||||
setAttributes( { isOpen: false } );
|
||||
updateContent(contentTemp);
|
||||
}}>
|
||||
|
||||
<div>
|
||||
<RichText
|
||||
onChange={() => true}
|
||||
tagName="p"
|
||||
autocompleters={autocompleters}
|
||||
/>
|
||||
<p>{ __('Type '+ autocompleters[0].triggerPrefix +' for triggering the autocomplete.', 'tainacan') }</p>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<Button isDefault onClick={ () => {
|
||||
setAttributes( { isOpen: false } );
|
||||
updateContent(contentTemp);
|
||||
} }>
|
||||
{ __('Close', 'tainacan') }
|
||||
</Button>
|
||||
</div>
|
||||
</Modal>
|
||||
: null
|
||||
}
|
||||
|
||||
<div>
|
||||
{ contentTemp.length ?
|
||||
<Carousel
|
||||
offset={20}
|
||||
arrowLeft={arrowLeft}
|
||||
arrowRight={arrowRight}
|
||||
addArrowClickHandler
|
||||
slidesPerScroll={1}
|
||||
slidesPerPage={contentTemp.length >= 3 ? 3 : contentTemp.length}
|
||||
arrows
|
||||
slides={contentTemp}
|
||||
breakpoints={{
|
||||
1000: { // these props will be applied when screen width is less than 1000px
|
||||
slidesPerPage: 2,
|
||||
clickToChange: false,
|
||||
centered: false,
|
||||
arrows: true,
|
||||
infinite: false,
|
||||
},
|
||||
500: {
|
||||
slidesPerPage: 1,
|
||||
slidesPerScroll: 1,
|
||||
clickToChange: false,
|
||||
centered: false,
|
||||
infinite: false,
|
||||
},
|
||||
}}
|
||||
/> : null
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
save({ attributes }) {
|
||||
console.log('save', attributes);
|
||||
|
||||
const { content } = attributes;
|
||||
|
||||
return <div>{content}</div>
|
||||
},
|
||||
});
|
||||
|
|
@ -82,7 +82,9 @@
|
|||
v-if="metadatum.value_as_html != undefined && metadatum.value_as_html != ''"
|
||||
:key="index"
|
||||
class="field">
|
||||
<b-collapse :open="!collapseAll">
|
||||
<b-collapse
|
||||
aria-id="metadata-collapse-for-slideshow"
|
||||
:open="!collapseAll">
|
||||
<label
|
||||
class="label has-text-white"
|
||||
slot="trigger"
|
||||
|
|
|
|||
Loading…
Reference in New Issue