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

Acessibility improvements using recent features made for Buefy (Ref. #3). Updates Buefy and Bulma.

This commit is contained in:
Mateus Machado Luna 2019-03-01 10:32:59 -03:00
parent bb27a20b47
commit 21d8569cd7
17 changed files with 133 additions and 719 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
package.json
View File

@ -7,16 +7,13 @@
"build": "cross-env NODE_ENV=development webpack --display-error-details --mode development --progress --hide-modules" "build": "cross-env NODE_ENV=development webpack --display-error-details --mode development --progress --hide-modules"
}, },
"dependencies": { "dependencies": {
"@brainhubeu/react-carousel": "^1.10.1",
"axios": "^0.18.0", "axios": "^0.18.0",
"buefy": "^0.7.2", "buefy": "^0.7.3",
"bulma": "^0.7.2", "bulma": "^0.7.4",
"mdi": "^2.2.43", "mdi": "^2.2.43",
"moment": "^2.22.2", "moment": "^2.22.2",
"node-sass": "^4.9.4", "node-sass": "^4.9.4",
"qs": "^6.5.2", "qs": "^6.5.2",
"react": "^16.5.2",
"react-dom": "^16.5.2",
"t": "^0.5.1", "t": "^0.5.1",
"v-tooltip": "^2.0.0-rc.33", "v-tooltip": "^2.0.0-rc.33",
"vue": "^2.5.17", "vue": "^2.5.17",

6
src/admin/components/edition/collection-edition-form.vue
View File

@ -173,7 +173,8 @@
class="two-columns-dropdown" class="two-columns-dropdown"
ref="enabledViewModesDropdown" ref="enabledViewModesDropdown"
:mobile-modal="true" :mobile-modal="true"
:disabled="Object.keys(registeredViewModes).length < 0"> :disabled="Object.keys(registeredViewModes).length < 0"
aria-role="list">
<button <button
class="button is-white" class="button is-white"
slot="trigger" slot="trigger"
@ -188,7 +189,8 @@
v-for="(viewMode, index) in Object.keys(registeredViewModes)" v-for="(viewMode, index) in Object.keys(registeredViewModes)"
:key="index" :key="index"
class="control" class="control"
custom> custom
aria-role="listitem">
<b-checkbox <b-checkbox
v-if="registeredViewModes[viewMode] != undefined" v-if="registeredViewModes[viewMode] != undefined"
@input="updateViewModeslist(viewMode)" @input="updateViewModeslist(viewMode)"

10
src/admin/components/lists/collections-list.vue
View File

@ -15,7 +15,8 @@
position="is-bottom-left" position="is-bottom-left"
v-if="$userCaps.hasCapability('delete_tainacan-collections')" v-if="$userCaps.hasCapability('delete_tainacan-collections')"
:disabled="!isSelectingCollections" :disabled="!isSelectingCollections"
id="bulk-actions-dropdown"> id="bulk-actions-dropdown"
aria-role="list">
<button <button
class="button is-white" class="button is-white"
slot="trigger"> slot="trigger">
@ -27,10 +28,13 @@
<b-dropdown-item <b-dropdown-item
id="item-delete-selected-items" id="item-delete-selected-items"
@click="deleteSelectedCollections()"> @click="deleteSelectedCollections()"
aria-role="listitem">
{{ $i18n.get('label_delete_selected_collections') }} {{ $i18n.get('label_delete_selected_collections') }}
</b-dropdown-item> </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-item>
</b-dropdown> </b-dropdown>
</div> </div>

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

@ -31,7 +31,8 @@
position="is-bottom-left" position="is-bottom-left"
v-if="items.length > 0 && items[0].current_user_can_edit" 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" :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 <button
class="button is-white" class="button is-white"
slot="trigger"> slot="trigger">
@ -43,23 +44,27 @@
<b-dropdown-item <b-dropdown-item
v-if="$route.params.collectionId && $userCaps.hasCapability('edit_others_posts') && !isOnTrash" 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') }} {{ $i18n.get('label_bulk_edit_selected_items') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
v-if="$route.params.collectionId && $userCaps.hasCapability('edit_others_posts') && !isOnTrash" 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') }} {{ $i18n.get('label_sequence_edit_selected_items') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
v-if="collectionId" v-if="collectionId"
@click="deleteSelectedItems()" @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') }} {{ isOnTrash ? $i18n.get('label_delete_permanently') : $i18n.get('label_send_to_trash') }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
v-if="collectionId && isOnTrash" v-if="collectionId && isOnTrash"
@click="untrashSelectedItems()"> @click="untrashSelectedItems()"
aria-role="listitem">
{{ $i18n.get('label_untrash_selected_items') }} {{ $i18n.get('label_untrash_selected_items') }}
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>

10
src/admin/components/lists/taxonomies-list.vue
View File

@ -16,7 +16,8 @@
position="is-bottom-left" position="is-bottom-left"
v-if="$userCaps.hasCapability('delete_tainacan-taxonomies')" v-if="$userCaps.hasCapability('delete_tainacan-taxonomies')"
:disabled="!isSelecting" :disabled="!isSelecting"
id="bulk-actions-dropdown"> id="bulk-actions-dropdown"
aria-role="list">
<button <button
class="button is-white" class="button is-white"
slot="trigger"> slot="trigger">
@ -28,10 +29,13 @@
<b-dropdown-item <b-dropdown-item
id="item-delete-selected-items" id="item-delete-selected-items"
@click="deleteSelected()"> @click="deleteSelected()"
aria-role="listitem">
{{ $i18n.get('label_delete_selected_taxonomies') }} {{ $i18n.get('label_delete_selected_taxonomies') }}
</b-dropdown-item> </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-item>
</b-dropdown> </b-dropdown>
</div> </div>

8
src/admin/components/navigation/tainacan-header.vue
View File

@ -53,13 +53,14 @@
<b-dropdown <b-dropdown
ref="advancedSearchShortcut" ref="advancedSearchShortcut"
class="advanced-search-header-dropdown" class="advanced-search-header-dropdown"
position="is-bottom-left"> position="is-bottom-left"
aria-role="list">
<a <a
class="advanced-search-text" class="advanced-search-text"
slot="trigger"> slot="trigger">
{{ $i18n.get('advanced_search') }} {{ $i18n.get('advanced_search') }}
</a> </a>
<b-dropdown-item> <b-dropdown-item aria-role="listitem">
<div :style="{'height': '25px'}"> <div :style="{'height': '25px'}">
<p class="is-pulled-left advanced-search-text-di">{{ $i18n.get('advanced_search') }}</p> <p class="is-pulled-left advanced-search-text-di">{{ $i18n.get('advanced_search') }}</p>
<span <span
@ -72,7 +73,8 @@
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item <b-dropdown-item
style="padding-left: 0 !important; padding-right: 0 !important;" style="padding-left: 0 !important; padding-right: 0 !important;"
:custom="true"> :custom="true"
aria-role="listitem">
<advanced-search <advanced-search
:is-repository-level="true" :is-repository-level="true"
:is-header="true"/> :is-header="true"/>

1
src/admin/components/repository/collection-filter/collection-filter.vue
View File

@ -1,6 +1,7 @@
<template> <template>
<b-field class="filter-item-forms"> <b-field class="filter-item-forms">
<b-collapse <b-collapse
aria-id="collection-filters-collapse"
class="show" class="show"
:open="open" :open="open"
animation="filter-item"> animation="filter-item">

6
src/admin/components/search/pagination.vue
View File

@ -39,7 +39,8 @@
:label="$i18n.get('label_go_to_page')"> :label="$i18n.get('label_go_to_page')">
<b-dropdown <b-dropdown
position="is-top-right" position="is-top-right"
@change="onPageChange"> @change="onPageChange"
aria-role="list">
<button <button
aria-labelledby="go-to-page-dropdown" aria-labelledby="go-to-page-dropdown"
class="button is-white" class="button is-white"
@ -54,7 +55,8 @@
role="button" role="button"
:key="pageNumber" :key="pageNumber"
v-for="pageNumber in totalPages" v-for="pageNumber in totalPages"
:value="Number(pageNumber)"> :value="Number(pageNumber)"
aria-role="listitem">
{{ pageNumber }} {{ pageNumber }}
</b-dropdown-item> </b-dropdown-item>
</b-dropdown> </b-dropdown>

21
src/admin/pages/lists/collections-page.vue
View File

@ -9,7 +9,9 @@
<!-- New Collection button --> <!-- New Collection button -->
<div class="header-item"> <div class="header-item">
<b-dropdown id="collection-creation-options-dropdown"> <b-dropdown
aria-role="list"
id="collection-creation-options-dropdown">
<button <button
class="button is-secondary" class="button is-secondary"
slot="trigger"> slot="trigger">
@ -18,7 +20,7 @@
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
<b-dropdown-item> <b-dropdown-item aria-role="listitem">
<router-link <router-link
id="a-create-collection" id="a-create-collection"
tag="div" tag="div"
@ -31,7 +33,8 @@
<b-dropdown-item <b-dropdown-item
:key="metadatum_mapper.slug" :key="metadatum_mapper.slug"
v-for="metadatum_mapper in metadatum_mappers" v-for="metadatum_mapper in metadatum_mappers"
v-if="metadatum_mapper.metadata != false"> v-if="metadatum_mapper.metadata != false"
aria-role="listitem">
<router-link <router-link
:id="'a-create-collection-' + metadatum_mapper.slug" :id="'a-create-collection-' + metadatum_mapper.slug"
tag="div" tag="div"
@ -39,7 +42,7 @@
{{ $i18n.get(metadatum_mapper.name) }} {{ $i18n.get(metadatum_mapper.name) }}
</router-link> </router-link>
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item> <b-dropdown-item aria-role="listitem">
<div <div
id="a-import-collection" id="a-import-collection"
tag="div" tag="div"
@ -131,7 +134,8 @@
<div v-if="$userCaps.hasCapability('edit_tainacan-collections') && status == undefined || status == ''"> <div v-if="$userCaps.hasCapability('edit_tainacan-collections') && status == undefined || status == ''">
<b-dropdown <b-dropdown
:disabled="isLoadingMetadatumMappers" :disabled="isLoadingMetadatumMappers"
id="collection-creation-options-dropdown"> id="collection-creation-options-dropdown"
aria-role="list">
<button <button
class="button is-secondary" class="button is-secondary"
slot="trigger"> slot="trigger">
@ -140,7 +144,7 @@
<i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" /> <i class="tainacan-icon tainacan-icon-20px tainacan-icon-arrowdown" />
</span> </span>
</button> </button>
<b-dropdown-item> <b-dropdown-item aria-role="listitem">
<router-link <router-link
id="a-create-collection" id="a-create-collection"
tag="div" tag="div"
@ -153,7 +157,8 @@
<b-dropdown-item <b-dropdown-item
:key="metadatum_mapper.slug" :key="metadatum_mapper.slug"
v-for="metadatum_mapper in metadatum_mappers" v-for="metadatum_mapper in metadatum_mappers"
v-if="metadatum_mapper.metadata != false"> v-if="metadatum_mapper.metadata != false"
aria-role="listitem">
<router-link <router-link
:id="'a-create-collection-' + metadatum_mapper.slug" :id="'a-create-collection-' + metadatum_mapper.slug"
tag="div" tag="div"
@ -161,7 +166,7 @@
{{ $i18n.get(metadatum_mapper.name) }} {{ $i18n.get(metadatum_mapper.name) }}
</router-link> </router-link>
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item> <b-dropdown-item aria-role="listitem">
<div <div
id="a-import-collection" id="a-import-collection"
tag="div" tag="div"

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

@ -176,7 +176,8 @@
v-if="!isOnTheme"> v-if="!isOnTheme">
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
id="item-creation-options-dropdown"> id="item-creation-options-dropdown"
aria-role="list">
<button <button
class="button is-secondary" class="button is-secondary"
slot="trigger"> slot="trigger">
@ -186,7 +187,9 @@
</span> </span>
</button> </button>
<b-dropdown-item v-if="!isRepositoryLevel"> <b-dropdown-item
v-if="!isRepositoryLevel"
aria-role="listitem">
<router-link <router-link
id="a-create-item" id="a-create-item"
tag="div" tag="div"
@ -194,7 +197,9 @@
{{ $i18n.get('add_one_item') }} {{ $i18n.get('add_one_item') }}
</router-link> </router-link>
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item v-if="isRepositoryLevel"> <b-dropdown-item
v-if="isRepositoryLevel"
aria-role="listitem">
<div <div
id="a-create-item" id="a-create-item"
tag="div" tag="div"
@ -202,7 +207,9 @@
{{ $i18n.get('add_one_item') }} {{ $i18n.get('add_one_item') }}
</div> </div>
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item v-if="!isRepositoryLevel"> <b-dropdown-item
v-if="!isRepositoryLevel"
aria-role="listitem">
<router-link <router-link
id="a-item-add-bulk" id="a-item-add-bulk"
tag="div" tag="div"
@ -212,7 +219,7 @@
<small class="is-small">{{ $i18n.get('info_bulk_add_items') }}</small> <small class="is-small">{{ $i18n.get('info_bulk_add_items') }}</small>
</router-link> </router-link>
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item> <b-dropdown-item aria-role="listitem">
<div <div
id="a-import-items" id="a-import-items"
tag="div" tag="div"
@ -242,7 +249,8 @@
ref="displayedMetadataDropdown" ref="displayedMetadataDropdown"
:mobile-modal="true" :mobile-modal="true"
:disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry'" :disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry'"
class="show metadata-options-dropdown"> class="show metadata-options-dropdown"
aria-role="list">
<button <button
:aria-label="$i18n.get('label_displayed_metadata')" :aria-label="$i18n.get('label_displayed_metadata')"
class="button is-white" class="button is-white"
@ -257,7 +265,8 @@
v-for="(column, index) in localDisplayedMetadata" v-for="(column, index) in localDisplayedMetadata"
:key="index" :key="index"
class="control" class="control"
custom> custom
aria-role="listitem">
<b-checkbox <b-checkbox
v-model="column.display" v-model="column.display"
:native-value="column.display"> :native-value="column.display">
@ -282,7 +291,8 @@
<label class="label is-hidden-mobile">{{ $i18n.get('label_sorting') + ':' }}</label> <label class="label is-hidden-mobile">{{ $i18n.get('label_sorting') + ':' }}</label>
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
@input="onChangeOrderBy($event)"> @input="onChangeOrderBy($event)"
aria-role="list">
<button <button
:aria-label="$i18n.get('label_sorting')" :aria-label="$i18n.get('label_sorting')"
class="button is-white" class="button is-white"
@ -299,7 +309,8 @@
v-for="metadatum of sortingMetadata" v-for="metadatum of sortingMetadata"
v-if="metadatum != undefined" v-if="metadatum != undefined"
:value="metadatum" :value="metadatum"
:key="metadatum.slug"> :key="metadatum.slug"
aria-role="listitem">
{{ metadatum.name }} {{ metadatum.name }}
</b-dropdown-item> </b-dropdown-item>
<!-- Once we have sorting by metadata we can use this --> <!-- Once we have sorting by metadata we can use this -->
@ -355,7 +366,8 @@
@change="onChangeViewMode($event)" @change="onChangeViewMode($event)"
:mobile-modal="true" :mobile-modal="true"
position="is-bottom-left" position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')"> :aria-label="$i18n.get('label_view_mode')"
aria-role="list">
<button <button
:aria-label="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization')" :aria-label="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization')"
class="button is-white" class="button is-white"
@ -376,7 +388,8 @@
v-for="(viewModeOption, index) of enabledViewModes" v-for="(viewModeOption, index) of enabledViewModes"
:key="index" :key="index"
:value="viewModeOption" :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 <span
class="gray-icon" class="gray-icon"
v-html="registeredViewModes[viewModeOption].icon"/> v-html="registeredViewModes[viewModeOption].icon"/>
@ -394,7 +407,8 @@
@change="onChangeAdminViewMode($event)" @change="onChangeAdminViewMode($event)"
:mobile-modal="true" :mobile-modal="true"
position="is-bottom-left" position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')"> :aria-label="$i18n.get('label_view_mode')"
aria-role="list">
<button <button
:aria-label="$i18n.get('label_view_mode')" :aria-label="$i18n.get('label_view_mode')"
class="button is-white" class="button is-white"
@ -419,7 +433,8 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': adminViewMode == 'table' }" :class="{ 'is-active': adminViewMode == 'table' }"
:value="'table'"> :value="'table'"
aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-viewtable"/> <i class="tainacan-icon tainacan-icon-viewtable"/>
</span> </span>
@ -429,7 +444,8 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': adminViewMode == 'cards' }" :class="{ 'is-active': adminViewMode == 'cards' }"
:value="'cards'"> :value="'cards'"
aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-viewcards"/> <i class="tainacan-icon tainacan-icon-viewcards"/>
</span> </span>
@ -439,7 +455,8 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': adminViewMode == 'grid' }" :class="{ 'is-active': adminViewMode == 'grid' }"
:value="'grid'"> :value="'grid'"
aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-viewminiature"/> <i class="tainacan-icon tainacan-icon-viewminiature"/>
</span> </span>
@ -449,7 +466,8 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': adminViewMode == 'records' }" :class="{ 'is-active': adminViewMode == 'records' }"
:value="'records'"> :value="'records'"
aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-viewrecords"/> <i class="tainacan-icon tainacan-icon-viewrecords"/>
</span> </span>
@ -459,7 +477,8 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': adminViewMode == 'masonry' }" :class="{ 'is-active': adminViewMode == 'masonry' }"
:value="'masonry'"> :value="'masonry'"
aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-viewmasonry"/> <i class="tainacan-icon tainacan-icon-viewmasonry"/>
</span> </span>

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

@ -175,7 +175,8 @@
v-if="!isOnTheme"> v-if="!isOnTheme">
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
id="item-creation-options-dropdown"> id="item-creation-options-dropdown"
aria-role="list">
<button <button
class="button is-secondary" class="button is-secondary"
slot="trigger"> slot="trigger">
@ -185,7 +186,7 @@
</span> </span>
</button> </button>
<b-dropdown-item> <b-dropdown-item aria-role="listitem">
<router-link <router-link
id="a-create-item" id="a-create-item"
tag="div" tag="div"
@ -193,13 +194,17 @@
{{ $i18n.get('add_one_item') }} {{ $i18n.get('add_one_item') }}
</router-link> </router-link>
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item disabled> <b-dropdown-item
aria-role="listitem"
disabled>
{{ $i18n.get('add_items_bulk') + ' (Not ready)' }} {{ $i18n.get('add_items_bulk') + ' (Not ready)' }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item disabled> <b-dropdown-item
aria-role="listitem"
disabled>
{{ $i18n.get('add_items_external_source') + ' (Not ready)' }} {{ $i18n.get('add_items_external_source') + ' (Not ready)' }}
</b-dropdown-item> </b-dropdown-item>
<b-dropdown-item> <b-dropdown-item aria-role="listitem">
<div <div
id="a-import-collection" id="a-import-collection"
tag="div" tag="div"
@ -229,7 +234,8 @@
ref="displayedMetadataDropdown" ref="displayedMetadataDropdown"
:mobile-modal="true" :mobile-modal="true"
:disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry'" :disabled="totalItems <= 0 || adminViewMode == 'grid'|| adminViewMode == 'cards' || adminViewMode == 'masonry'"
class="show metadata-options-dropdown"> class="show metadata-options-dropdown"
aria-role="list">
<button <button
:aria-label="$i18n.get('label_displayed_metadata')" :aria-label="$i18n.get('label_displayed_metadata')"
class="button is-white" class="button is-white"
@ -244,7 +250,8 @@
v-for="(column, index) in localDisplayedMetadata" v-for="(column, index) in localDisplayedMetadata"
:key="index" :key="index"
class="control" class="control"
custom> custom
aria-role="listitem">
<b-checkbox <b-checkbox
v-model="column.display" v-model="column.display"
:native-value="column.display"> :native-value="column.display">
@ -269,7 +276,8 @@
<label class="label is-hidden-mobile">{{ $i18n.get('label_sorting') + ':' }}</label> <label class="label is-hidden-mobile">{{ $i18n.get('label_sorting') + ':' }}</label>
<b-dropdown <b-dropdown
:mobile-modal="true" :mobile-modal="true"
@input="onChangeOrderBy($event)"> @input="onChangeOrderBy($event)"
aria-role="list">
<button <button
:aria-label="$i18n.get('label_sorting')" :aria-label="$i18n.get('label_sorting')"
class="button is-white" class="button is-white"
@ -286,7 +294,8 @@
v-for="metadatum of sortingMetadata" v-for="metadatum of sortingMetadata"
v-if="metadatum != undefined" v-if="metadatum != undefined"
:value="metadatum" :value="metadatum"
:key="metadatum.slug"> :key="metadatum.slug"
aria-role="listitem">
{{ metadatum.name }} {{ metadatum.name }}
</b-dropdown-item> </b-dropdown-item>
<!-- Once we have sorting by metadata we can use this --> <!-- Once we have sorting by metadata we can use this -->
@ -342,7 +351,8 @@
@change="onChangeViewMode($event)" @change="onChangeViewMode($event)"
:mobile-modal="true" :mobile-modal="true"
position="is-bottom-left" position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')"> :aria-label="$i18n.get('label_view_mode')"
aria-role="list">
<button <button
class="button is-white" class="button is-white"
:aria-label="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization')" :aria-label="registeredViewModes[viewMode] != undefined ? registeredViewModes[viewMode].label : $i18n.get('label_visualization')"
@ -363,7 +373,8 @@
v-for="(viewModeOption, index) of enabledViewModes" v-for="(viewModeOption, index) of enabledViewModes"
:key="index" :key="index"
:value="viewModeOption" :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 <span
class="gray-icon" class="gray-icon"
v-html="registeredViewModes[viewModeOption].icon"/> v-html="registeredViewModes[viewModeOption].icon"/>
@ -381,7 +392,8 @@
@change="onChangeAdminViewMode($event)" @change="onChangeAdminViewMode($event)"
:mobile-modal="true" :mobile-modal="true"
position="is-bottom-left" position="is-bottom-left"
:aria-label="$i18n.get('label_view_mode')"> :aria-label="$i18n.get('label_view_mode')"
aria-role="list">
<button <button
class="button is-white" class="button is-white"
:aria-label="$i18n.get('label_view_mode')" :aria-label="$i18n.get('label_view_mode')"
@ -406,7 +418,8 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': adminViewMode == 'table' }" :class="{ 'is-active': adminViewMode == 'table' }"
:value="'table'"> :value="'table'"
aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-viewtable"/> <i class="tainacan-icon tainacan-icon-viewtable"/>
</span> </span>
@ -416,7 +429,8 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': adminViewMode == 'cards' }" :class="{ 'is-active': adminViewMode == 'cards' }"
:value="'cards'"> :value="'cards'"
aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-viewcards"/> <i class="tainacan-icon tainacan-icon-viewcards"/>
</span> </span>
@ -426,7 +440,8 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': adminViewMode == 'grid' }" :class="{ 'is-active': adminViewMode == 'grid' }"
:value="'grid'"> :value="'grid'"
aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-viewminiature"/> <i class="tainacan-icon tainacan-icon-viewminiature"/>
</span> </span>
@ -436,7 +451,8 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': adminViewMode == 'records' }" :class="{ 'is-active': adminViewMode == 'records' }"
:value="'records'"> :value="'records'"
aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-viewrecords"/> <i class="tainacan-icon tainacan-icon-viewrecords"/>
</span> </span>
@ -446,7 +462,8 @@
aria-controls="items-list-results" aria-controls="items-list-results"
role="button" role="button"
:class="{ 'is-active': adminViewMode == 'masonry' }" :class="{ 'is-active': adminViewMode == 'masonry' }"
:value="'masonry'"> :value="'masonry'"
aria-role="listitem">
<span class="icon gray-icon"> <span class="icon gray-icon">
<i class="tainacan-icon tainacan-icon-viewmasonry"/> <i class="tainacan-icon tainacan-icon-viewmasonry"/>
</span> </span>

1
src/admin/pages/singles/item-page.vue
View File

@ -282,6 +282,7 @@
:key="index" :key="index"
class="field"> class="field">
<b-collapse <b-collapse
:aria-id="'metadatum-collapse-' + metadatum.id"
animation="filter-item" animation="filter-item"
:open="open"> :open="open">
<label <label

33
src/gutenberg-blocks/class-tainacan-gutenberg-block.php
View File

@ -13,7 +13,6 @@ function tainacan_blocks_initialize() {
} }
function tainacan_blocks_add_gutenberg_blocks_actions() { 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_register_tainacan_items_grid');
add_action('init', 'tainacan_blocks_add_plugin_settings'); 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(){ function tainacan_blocks_enqueue_on_theme(){
global $TAINACAN_BASE_URL; global $TAINACAN_BASE_URL;
wp_enqueue_script( // wp_enqueue_script(
'collections-carousel', // 'collections-carousel',
$TAINACAN_BASE_URL . '/assets/gutenberg_collections_carousel-components.js' // $TAINACAN_BASE_URL . '/assets/gutenberg_collections_carousel-components.js'
); // );
} }
function tainacan_blocks_register_tainacan_items_grid(){ function tainacan_blocks_register_tainacan_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(){ function tainacan_blocks_get_plugin_js_settings(){
global $TAINACAN_BASE_URL; global $TAINACAN_BASE_URL;
@ -109,6 +85,5 @@ function tainacan_blocks_add_plugin_settings() {
$settings = tainacan_blocks_get_plugin_js_settings(); $settings = tainacan_blocks_get_plugin_js_settings();
//wp_localize_script( 'collections-carousel', 'tainacan_plugin', $settings );
wp_localize_script( 'items-grid', 'tainacan_plugin', $settings ); wp_localize_script( 'items-grid', 'tainacan_plugin', $settings );
} }

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

@ -1,2 +1 @@
//@import 'tainacan-collections/collections-carousel/collections-carousel';
@import 'tainacan-items/items-grid/items-grid'; @import 'tainacan-items/items-grid/items-grid';

221
src/gutenberg-blocks/tainacan-collections/collections-carousel/collections-carousel.scss
View File

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

400
src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js
View File

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

4
src/theme-helper/view-mode-slideshow.vue
View File

@ -82,7 +82,9 @@
v-if="metadatum.value_as_html != undefined && metadatum.value_as_html != ''" v-if="metadatum.value_as_html != undefined && metadatum.value_as_html != ''"
:key="index" :key="index"
class="field"> class="field">
<b-collapse :open="!collapseAll"> <b-collapse
aria-id="metadata-collapse-for-slideshow"
:open="!collapseAll">
<label <label
class="label has-text-white" class="label has-text-white"
slot="trigger" slot="trigger"