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

Merge branch 'develop' into feature/third-party-filter-types

This commit is contained in:
Mateus Machado Luna 2020-02-27 16:10:06 -03:00
parent 05de22cea9 0d59132800
commit c7142a15e2
46 changed files with 2990 additions and 450 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
compile-sass.sh
View File

@ -33,5 +33,7 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-11 src/views/gutenberg-blocks/t
sass -E 'UTF-8' --cache-location .tmp/sass-cache-12 src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-terms-list.css
sass -E 'UTF-8' --cache-location .tmp/sass-cache-13 src/views/gutenberg-blocks/tainacan-facets/faceted-search/faceted-search.scss:src/assets/css/tainacan-gutenberg-block-faceted-search.css
echo "Compilação do Sass Concluído!"
exit 0

6
package-lock.json generated
View File

@ -1964,9 +1964,9 @@
}
},
"buefy": {
"version": "0.8.10",
"resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.10.tgz",
"integrity": "sha512-Lw/UP3Ku7o+oqam9TIoRMG5SrytGQwXWAoxAtqt6Wb9eSsMEqp/5o+jZnz8oteR06YWgjdSIfOv2YeEdjEkQCg==",
"version": "0.8.11",
"resolved": "https://registry.npmjs.org/buefy/-/buefy-0.8.11.tgz",
"integrity": "sha512-+LcnrK4b3UKRXm1aalDfXvp5be7EJKJzLtRAhptnaHpCGySPDjm7MCvyIHnV02qjUMgwOF1UWp0xkkWc8suQOQ==",
"requires": {
"bulma": "0.7.5"
}

2
package.json
View File

@ -8,7 +8,7 @@
},
"dependencies": {
"axios": "^0.19.0",
"buefy": "^0.8.10",
"buefy": "^0.8.11",
"bulma": "^0.7.5",
"css-vars-ponyfill": "^2.1.2",
"mdi": "^2.2.43",

452
src/assets/css/tainacan-gutenberg-block-faceted-search.css Normal file
View File

@ -0,0 +1,452 @@
[data-align='full'] .block-control {
width: calc(100% + 14px); }
.block-control {
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 5px;
position: relative;
top: -14px;
left: -14px;
width: calc(100% + 28px);
background: #f2f2f2; }
.block-control p {
font-size: 0.875em !important;
margin: 12px 1.5em 16px 0;
fill: #555758; }
.block-control p svg {
top: 4px;
margin-right: 0.75em;
position: relative;
fill: #555758; }
.components-placeholder {
margin-bottom: 0;
background: #f6f6f6; }
.components-placeholder .components-placeholder__label {
margin-bottom: 0; }
.components-placeholder .components-placeholder__fieldset p {
font-size: 1em !important;
margin: 12px 0;
color: #454647;
fill: #555758; }
.components-placeholder .components-placeholder__fieldset p svg {
margin-right: 1em;
top: 4px;
position: relative;
fill: #555758; }
.wp-block-tainacan-modal {
width: 50%; }
@media only screen and (max-width: 1024px) {
.wp-block-tainacan-modal {
width: 75%; } }
@media only screen and (max-width: 768px) {
.wp-block-tainacan-modal {
width: 100%; } }
.wp-block-tainacan-modal.dynamic-modal {
width: 90%;
height: 90%;
width: 80vw;
height: 80vh; }
.wp-block-tainacan-modal.dynamic-modal iframe {
width: calc(100% + 32px);
height: calc(100% - 128px);
margin-left: -16px; }
.wp-block-tainacan-modal.dynamic-modal .modal-footer-area {
height: 68px;
width: calc(100% + 32px);
margin-left: -16px !important;
padding: 1.2em 1.2em !important;
border-top: 1px solid #cbcbcb; }
.wp-block-tainacan-modal .spinner-container {
min-height: 56px;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
color: #555758; }
.wp-block-tainacan-modal .spinner-container .components-spineer {
margin: 8px; }
.wp-block-tainacan-modal .components-modal__header .components-icon-button {
padding-right: 0; }
.wp-block-tainacan-modal hr {
margin: 5px 0.75em; }
.wp-block-tainacan-modal .modal-search-area {
display: flex;
justify-content: center;
margin-bottom: 14px; }
.wp-block-tainacan-modal .modal-search-area .components-base-control {
width: 60%; }
@media only screen and (max-width: 1024px) {
.wp-block-tainacan-modal .modal-search-area .components-base-control {
width: 95%; } }
.wp-block-tainacan-modal .modal-search-area .components-base-control:nth-child(2) {
flex-shrink: 2; }
.wp-block-tainacan-modal .modal-search-area .components-base-control .components-base-control__field {
flex-wrap: wrap; }
.wp-block-tainacan-modal .modal-search-area .components-base-control label.components-base-control__label {
font-weight: 500;
color: #454647;
font-size: 1em;
text-align: center; }
.wp-block-tainacan-modal .modal-search-area .components-base-control input.components-text-control__input {
padding: 5px 8px;
height: 28px; }
.wp-block-tainacan-modal .modal-radio-area-label {
font-weight: 500;
margin-left: 1.75em; }
.wp-block-tainacan-modal .modal-checkbox-list,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field {
padding: 0;
flex-wrap: wrap;
display: flex;
display: -ms-grid;
display: grid;
-ms-grid-columns: 250px 250px;
grid-template-columns: repeat(auto-fill, 250px);
grid-gap: 0px;
justify-content: space-evenly;
list-style-type: none;
margin: 12px;
max-height: 50vh;
overflow-y: auto;
overflow-x: hidden; }
.wp-block-tainacan-modal .modal-checkbox-list .components-base-control,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-base-control {
overflow: hidden; }
.wp-block-tainacan-modal .modal-checkbox-list svg.dashicon.components-checkbox-control__checked,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field svg.dashicon.components-checkbox-control__checked {
fill: black; }
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item,
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option {
display: flex;
justify-content: flex-start; }
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item img,
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option img,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item img,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option img {
width: 24px;
height: 24px;
margin-right: 10px; }
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item label,
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item label,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option label {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
display: inline-block;
max-width: 85%; }
@media only screen and (max-width: 768px) {
.wp-block-tainacan-modal .modal-checkbox-list .modal-checkbox-list-item label,
.wp-block-tainacan-modal .modal-checkbox-list .components-radio-control__option label,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .modal-checkbox-list-item label,
.wp-block-tainacan-modal .modal-radio-list .components-base-control__field .components-radio-control__option label {
max-width: 80%; } }
.wp-block-tainacan-modal .modal-loadmore-section {
display: flex;
align-items: baseline;
justify-content: center; }
.wp-block-tainacan-modal .modal-loadmore-section p {
color: #555758;
margin-right: 12px;
margin-top: 2px; }
.wp-block-tainacan-modal .modal-footer-area {
border-top: 1px solid #e2e4e7;
display: flex;
align-items: baseline;
justify-content: space-between;
padding: 16px 16px 0 16px;
margin: 0 -16px; }
.wp-block-tainacan-modal .modal-footer-area p {
padding: 0 12px;
color: #454647; }
.wp-block-tainacan-faceted-search {
margin: 2em auto; }
.wp-block-tainacan-faceted-search .spinner-container {
min-height: 56px;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
color: #555758; }
@-webkit-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-moz-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@-o-keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
@keyframes skeleton-animation {
0% {
opacity: 1.0; }
50% {
opacity: 0.2; }
100% {
opacity: 1.0; } }
.wp-block-tainacan-faceted-search .skeleton {
border-radius: 2px;
background: #f2f2f2;
-webkit-animation: skeleton-animation 1.8s ease infinite;
-moz-animation: skeleton-animation 1.8s ease infinite;
-o-animation: skeleton-animation 1.8s ease infinite;
animation: skeleton-animation 1.8s ease infinite; }
.wp-block-tainacan-faceted-search .preview-warning {
width: 100%;
font-size: 0.875em;
font-style: italic;
color: #898d8f;
text-align: center;
margin: 4px auto; }
.wp-block-tainacan-faceted-search .items-list-placeholder {
font-size: 1.125em;
min-height: 400px;
width: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
border-radius: 4px;
border: 1px solid rgba(200, 200, 200, 0.3);
overflow: hidden; }
.wp-block-tainacan-faceted-search .items-list-placeholder .search-control,
.wp-block-tainacan-faceted-search .items-list-placeholder .filters,
.wp-block-tainacan-faceted-search .items-list-placeholder .items,
.wp-block-tainacan-faceted-search .items-list-placeholder .pagination {
background-color: var(--tainacan-background-color, white);
border: 1px solid rgba(200, 200, 200, 0.3);
padding: 12px;
margin: 0px;
border-radius: 1px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .search-control {
flex: 0 0 15%;
display: flex;
justify-content: space-between;
align-items: center; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control {
position: relative;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
flex: 1 0 auto; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters {
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
display: flex;
flex-direction: column;
padding: 40px 20px 60px 15px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter {
display: flex;
flex-direction: column;
width: 80%;
margin: 4% 12%; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-text {
margin: 4px 0;
width: 35%;
background-color: var(--tainacan-label-color, rgba(200, 200, 200, 0.2)); }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-searchbar {
width: 100%; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-checkbox-list > div {
width: 100%;
display: flex;
align-items: center; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-checkbox-list > div:nth-child(odd) .fake-text {
width: 60%; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-checkbox-list .fake-checkbox {
display: block;
width: 0.4em;
height: 0.4em;
min-width: 0.4em;
min-height: 0.4em;
max-width: 0.4em;
max-height: 0.4em;
border: 2px solid var(--tainacan-input-border-color, rgba(200, 200, 200, 0.3));
border-radius: 2px;
margin-right: 4px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-checkbox-list .fake-text {
background-color: var(--tainacan-input-color, rgba(200, 200, 200, 0.3));
width: 54%; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filter .fake-checkbox-list .fake-link {
width: 25%;
margin: 3px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .filters .fake-filters-heading {
position: relative;
top: -1.3em;
left: -0.3em;
background-color: var(--tainacan-heading-color, rgba(200, 200, 200, 0.3));
height: 0.2em;
width: 28%;
border-radius: 2px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .aside-filters {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
flex: 1 1 auto; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .aside-filters .items {
flex: 1 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: flex-start; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .aside-filters .pagination {
flex: 0 1 5%;
display: flex;
justify-content: space-between;
align-items: center; }
.wp-block-tainacan-faceted-search .items-list-placeholder .below-search-control .aside-filters .pagination > .fake-text {
background-color: var(--tainacan-info-color, rgba(200, 200, 200, 0.2)); }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-text {
background-color: var(--tainacan-input-color, rgba(200, 200, 200, 0.3));
height: 0.2em;
width: 24%;
min-width: 1.25em;
border-radius: 2px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-link {
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3));
height: 0.2em;
width: 10%;
border-radius: 2px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-icon {
background-color: var(--tainacan-info-color, rgba(200, 200, 200, 0.3));
height: 0.3em;
width: 0.3em;
min-height: 0.3em;
min-width: 0.3em;
max-height: 0.3em;
max-width: 0.3em;
border-radius: 5px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-tooltip {
background-color: var(--tainacan-primary, rgba(200, 200, 200, 0.1));
position: absolute;
height: 0.75em;
width: 4em;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
top: -0.75em;
left: 1em; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-tooltip .fake-link {
width: 100%;
margin: 0 4px 0 8px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-tooltip:before {
content: "";
display: block;
position: absolute;
left: 12px;
width: 0;
height: 0;
border-style: solid; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-tooltip:before {
border-color: var(--tainacan-primary) transparent transparent transparent;
border-right-width: 7px;
border-top-width: 6px;
border-left-width: 7px;
bottom: -8px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-searchbar {
background-color: var(--tainacan-input-background-color, rgba(200, 200, 200, 0.3));
height: 0.8em;
width: 18%;
border: 2px solid var(--tainacan-input-border-color, rgba(200, 200, 200, 0.3));
border-radius: 3px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-searchbar .fake-advanced-searchbar {
display: block;
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3));
height: 0.2em;
border-radius: 3px;
width: 70%;
position: relative;
bottom: -0.85em; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-hide-button {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--tainacan-primary, rgba(200, 200, 200, 0.1));
height: 0.9em;
width: 0.9em;
font-size: 0.75em;
border-radius: 3px;
position: absolute;
left: 0px;
top: 42px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-hide-button .fake-icon {
background-color: var(--tainacan-secondary, rgba(200, 200, 200, 0.3)); }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-button {
background-color: var(--tainacan-background-color, white);
height: 0.8em;
width: 10%;
max-width: 3.25em;
min-width: 1em;
margin-left: 6px;
border-radius: 3px;
display: flex;
align-items: center; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-button .fake-text {
background-color: var(--tainacan-input-color, rgba(200, 200, 200, 0.3));
width: 95%;
margin: 0 2px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-button .fake-icon {
flex: 1 0 auto;
margin: 0 2px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-buttons-group {
flex: 0 0 15%;
display: flex;
justify-content: space-evenly; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item {
background-color: var(--tainacan-item-background-color, white);
flex: 1 0 180px;
margin: 12px;
height: 78px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item.fake-item-hovered, .wp-block-tainacan-faceted-search .items-list-placeholder .fake-item:hover {
background-color: var(--tainacan-item-hover-background-color, rgba(200, 200, 200, 0.2)); }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item.fake-item-hovered .fake-item-header, .wp-block-tainacan-faceted-search .items-list-placeholder .fake-item:hover .fake-item-header {
background-color: var(--tainacan-item-heading-hover-background-color, rgba(200, 200, 200, 0.3)); }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-header {
height: 20px;
width: 100%;
position: relative;
top: 0;
display: flex;
align-items: center;
padding: 6px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-header .fake-text {
background-color: var(--tainacan-heading-color, rgba(200, 200, 200, 0.35)); }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-thumb {
background-size: cover;
background-color: var(--tainacan-input-border-color, rgba(200, 200, 200, 0.1));
height: 58px;
width: 58px;
float: left; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-description {
background-color: var(--tainacan-info-color, rgba(200, 200, 200, 0.15));
height: 0.18em;
width: 60%;
border-radius: 2px;
margin: 8px 6px 2px 6px;
position: relative;
left: 62px; }
.wp-block-tainacan-faceted-search .items-list-placeholder .fake-item .fake-item-description:nth-child(odd) {
width: 50%; }
.wp-block-tainacan-faceted-search .theme-items-list {
max-width: 100% !important; }
/*# sourceMappingURL=tainacan-gutenberg-block-faceted-search.css.map */

7
src/assets/css/tainacan-gutenberg-block-faceted-search.css.map Normal file
View File

File diff suppressed because one or more lines are too long

27
src/classes/theme-helper/template-tags.php
View File

@ -186,19 +186,20 @@ function tainacan_the_collection_description() {
* @param array $args {
* Optional. Array of arguments.
*
* @type bool $hide-filters Completely hide filter sidebar or modal
* @type bool $hide-hide-filters-button Hides the button resonsible for collpasing filters sidebar on desktop
* @type bool $hide-search Hides the complete search bar, including advanced search link
* @type bool $hide-advanced-search Hides only the advanced search link
* @type bool $hide-sort-by-button Hides the button where user can select the metadata to sort by items (keeps the sort direction)
* @type bool $hide-items-per-page-button Hides the button for selecting amount of items loaded per page
* @type bool $hide-go-to-page-button Hides the button for skiping to a specific page
* @type bool $start-with-filters-hidden Loads the filters list hidden from start
* @type bool $filters-as-modal Display the filters as a modal instead of a collapsable region on desktop
* @type bool $show-inline-view-mode-options Display view modes as inline icon buttons instead of the dropdown
* @type bool $show-fullscreen-with-view-modes Lists fullscreen viewmodes alongside with other view modes istead of separatelly
* @type string $default-view-mode The default view mode
* @type string[] $enabled-view-modes The list os enable view modes to display
* @type bool $hide-filters Completely hide filter sidebar or modal
* @type bool $hide-hide-filters-button Hides the button resonsible for collpasing filters sidebar on desktop
* @type bool $hide-search Hides the complete search bar, including advanced search link
* @type bool $hide-advanced-search Hides only the advanced search link
* @type bool $hide-sort-by-button Hides the button where user can select the metadata to sort by items (keeps the sort direction)
* @type bool $hide-items-per-page-button Hides the button for selecting amount of items loaded per page
* @type bool $hide-go-to-page-button Hides the button for skiping to a specific page
* @type bool $show-filters-button-inside-search-control Display the "hide filters" button inside of the search control instead of floating
* @type bool $start-with-filters-hidden Loads the filters list hidden from start
* @type bool $filters-as-modal Display the filters as a modal instead of a collapsable region on desktop
* @type bool $show-inline-view-mode-options Display view modes as inline icon buttons instead of the dropdown
* @type bool $show-fullscreen-with-view-modes Lists fullscreen viewmodes alongside with other view modes istead of separatelly
* @type string $default-view-mode The default view mode
* @type string[] $enabled-view-modes The list os enable view modes to display
* @return string The HTML div to be used for rendering the items list vue component
*/
function tainacan_the_faceted_search($args = array()) {

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

@ -1009,8 +1009,8 @@ export default {
}
.selected-cover-page {
border: 1px solid var(--tainacan-gray2);
padding: 8px;
font-size: .75em;
padding: 3px 8px;
font-size: .875em;
.span { vertical-align: middle;}
.selected-cover-page-control {

1
src/views/admin/components/edition/term-edition-form.vue
View File

@ -148,6 +148,7 @@
:placeholder="$i18n.get('instruction_parent_term')"
:data="parentTerms"
field="name"
clearable
v-model="parentTermName"
@select="onSelectParentTerm($event)"
:loading="isFetchingParentTerms"

5
src/views/admin/components/filter-types/autocomplete/Autocomplete.vue
View File

@ -11,6 +11,7 @@
@input="search"
field="label"
@select="onSelect"
clearable
:placeholder="(metadatumType === 'Tainacan\\Metadata_Types\\Relationship') ? $i18n.get('info_type_to_search_items') : $i18n.get('info_type_to_search_metadata')">
<template slot-scope="props">
<div class="media">
@ -22,7 +23,9 @@
width="24"
:src="props.option.img">
</div>
<div class="media-content">
<div
:style="{ width: props.option.img ? '' : '100%'}"
class="media-content">
<span class="ellipsed-text">{{ props.option.label }}</span>
<span
v-if="props.option.total_items != undefined"

4
src/views/admin/components/filter-types/date-interval/DateInterval.vue
View File

@ -4,7 +4,6 @@
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')"
v-model="dateInit"
size="is-small"
@focus="isTouched = true"
@input="validadeValues()"
editable
@ -26,12 +25,11 @@
style="font-size: 0.75em; margin-bottom: 0.125em;"
class="has-text-centered is-marginless">
{{ $i18n.get('label_until') }}
</p>
</p>
<b-datepicker
:aria-labelledby="'filter-label-id-' + filter.id"
:placeholder="$i18n.get('label_selectbox_init')"
v-model="dateEnd"
size="is-small"
@input="validadeValues()"
@focus="isTouched = true"
editable

1
src/views/admin/components/filter-types/date/Date.vue
View File

@ -77,7 +77,6 @@
:trap-focus="false"
:date-formatter="(date) => dateFormatter(date)"
:date-parser="(date) => dateParser(date)"
size="is-small"
icon="calendar-today"
:years-range="[-200, 50]"
:day-names="[

5
src/views/admin/components/filter-types/numeric/Numeric.vue
View File

@ -173,11 +173,10 @@
flex-grow: 2;
.dropdown-trigger button {
padding: 0 0.5em !important;
height: auto !important;
font-size: 1em !important;
i:not(.tainacan-icon-arrowdown) {
margin-top: -3px;
font-size: 1.25em;
font-style: normal;
color: var(--tainacan-info-color);

13
src/views/admin/components/filter-types/tainacan-filter-item.vue
View File

@ -194,13 +194,14 @@
.b-checkbox.checkbox {
font-weight: normal;
font-size: 1em;
font-size: 1em !important;
margin-right: 2px;
}
.datepicker {
.dropdown-menu {
left: -18px;
right: 0;
}
@media screen and (min-width: 768px) {
@ -210,19 +211,17 @@
max-width: 165px !important;
}
.pagination .pagination-list .control {
width: 77px !important;
width: 50% !important;
.select {
min-width: 100% !important;
select {
padding-left: 1px !important;
font-size: 0.875em !important;
height: 24px !important;
min-width: 100% !important;
min-width: 100% !important;
}
&:not(.is-loading)::after {
margin-top: -10px !important;
font-size: 1em;
}
}
}

3
src/views/admin/components/lists/filters-list.vue
View File

@ -872,12 +872,13 @@ export default {
margin-left: 0.5em;
}
.controls {
font-size: 0.875em;
position: absolute;
right: 5px;
top: 10px;
.switch {
position: relative;
bottom: 3px;
bottom: 2px;
}
.icon {
bottom: 1px;

3
src/views/admin/components/lists/metadata-list.vue
View File

@ -1117,12 +1117,13 @@ export default {
margin-left: 0.5em;
}
.controls {
font-size: 0.875em;
position: absolute;
right: 5px;
top: 10px;
.switch {
position: relative;
bottom: 3px;
bottom: 1px;
}
.icon {
bottom: 1px;

37
src/views/admin/components/lists/terms-list.vue
View File

@ -59,23 +59,18 @@
</b-dropdown>
</b-field>
<div class="search-area is-hidden-mobile">
<div class="control has-icons-right is-small is-clearfix">
<input
class="input is-small"
:placeholder="$i18n.get('instruction_search')"
type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('terms')"
autocomplete="on"
v-model="searchQuery"
@keyup.enter="searchTerms(0)"
:disabled="isEditingTerm">
<span
@click="searchTerms(0)"
class="icon is-right"
:class="{ 'has-text-gray3': isEditingTerm }">
<i class="tainacan-icon tainacan-icon-search" />
</span>
</div>
<b-input
:placeholder="$i18n.get('instruction_search')"
size="is-small"
type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('terms')"
autocomplete="on"
v-model="searchQuery"
icon-right="magnify"
icon-right-clickable
@icon-right-click="searchTerms(0)"
@keyup.enter.native="searchTerms(0)"
:disabled="isEditingTerm"/>
</div>
</div>
<div class="columns">
@ -528,14 +523,6 @@ export default {
}
.control {
width: 100%;
.icon {
pointer-events: all;
cursor: pointer;
color: var(--tainacan-blue5);
height: 27px;
font-size: 1.125em !important;
height: auto !important;
}
}
a {
margin-left: 12px;

1
src/views/admin/components/metadata-types/taxonomy/AddNewTerm.vue
View File

@ -53,6 +53,7 @@
:data="parentTerms"
field="name"
v-model="parentTermName"
clearable
@select="onSelectParentTerm($event)"
:loading="isFetchingParentTerms"
@input="fecthParentTerms($event)"

1
src/views/admin/components/navigation/tainacan-collection-subheader.vue
View File

@ -242,7 +242,6 @@ export default {
color: turquoise5;
text-shadow: none;
background-color: var(--tainacan-turquoise2);
font-size: 0.75em;
font-weight: 400;
padding: 10px 14px;
}

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

@ -41,22 +41,19 @@
</button>
</div>
<div class="search-area is-hidden-mobile">
<div class="control has-icons-right is-small is-clearfix">
<input
autocomplete="on"
:aria-label="$i18n.get('instruction_search_in_repository')"
:placeholder="$i18n.get('instruction_search_in_repository')"
class="input is-small search-header"
type="search"
:value="searchQuery"
@input="futureSearchQuery = $event.target.value"
@keyup.enter="updateSearch()">
<span class="icon is-right">
<i
@click="updateSearch()"
class="tainacan-icon tainacan-icon-search"/>
</span>
</div>
<b-input
type="search"
autocomplete="on"
:aria-label="$i18n.get('instruction_search_in_repository')"
:placeholder="$i18n.get('instruction_search_in_repository')"
class="search-header"
size="is-small"
:value="searchQuery"
@input.native="futureSearchQuery = $event.target.value"
@keyup.enter.native="updateSearch()"
icon-right="magnify"
icon-right-clickable
@icon-right-click="updateSearch()" />
<b-dropdown
ref="advancedSearchShortcut"
class="advanced-search-header-dropdown"
@ -276,14 +273,6 @@
.search-header:focus, .search-header:active {
width: 372px !important;
}
.icon:not(.add-i) {
pointer-events: all;
color: var(--tainacan-blue5);
cursor: pointer;
height: 27px;
font-size: 1.125em;
width: 30px !important;
}
}
}
}

2
src/views/admin/components/navigation/tainacan-repository-subheader.vue
View File

@ -131,7 +131,6 @@ export default {
color: var(--tainacan-white);
text-shadow: 1px 1px var(--tainacan-turquoise4);
background-color: var(--tainacan-turquoise3);
font-size: 0.75em;
font-weight: 400;
padding: 10px 14px;
}
@ -142,7 +141,6 @@ export default {
.repository-header-tooltips .tooltip-inner {
color: var(--tainacan-white);
background-color: var(--tainacan-blue3);
font-size: 0.75em;
font-weight: 400;
padding: 10px 14px;
}

80
src/views/admin/pages/lists/activities-page.vue
View File

@ -42,7 +42,6 @@
@input="searchActivities()"
:date-formatter="(date) => dateFormatter(date)"
:date-parser="(date) => dateParser(date)"
size="is-small"
icon="calendar-today"
:years-range="[-50, 3]"
:day-names="[
@ -82,53 +81,48 @@
<b-field
style="margin-left: auto"
class="header-item">
<div class="control has-icons-right is-small is-clearfix">
<b-autocomplete
:data="users"
:placeholder="$i18n.get('instruction_type_search_users_filter')"
keep-first
open-on-focus
@input="fetchUsersForFiltering"
@focus.once="($event) => fetchUsersForFiltering($event.target.value)"
@select="filterActivitiesByUser"
:loading="isFetchingUsers"
field="name"
icon="account">
<template slot-scope="props">
<div class="media">
<div
v-if="props.option.avatar_urls && props.option.avatar_urls['24']"
class="media-left">
<img
width="24"
:src="props.option.avatar_urls['24']">
</div>
<div class="media-content">
{{ props.option.name }}
</div>
<b-autocomplete
clearable
:data="users"
:placeholder="$i18n.get('instruction_type_search_users_filter')"
keep-first
open-on-focus
@input="fetchUsersForFiltering"
@focus.once="($event) => fetchUsersForFiltering($event.target.value)"
@select="filterActivitiesByUser"
:loading="isFetchingUsers"
field="name"
icon="account">
<template slot-scope="props">
<div class="media">
<div
v-if="props.option.avatar_urls && props.option.avatar_urls['24']"
class="media-left">
<img
width="24"
:src="props.option.avatar_urls['24']">
</div>
</template>
<div class="media-content">
{{ props.option.name }}
</div>
</div>
</template>
<template slot="empty">{{ $i18n.get('info_no_user_found') }}</template>
</b-autocomplete>
</div>
</b-autocomplete>
</b-field>
<b-field class="header-item">
<div class="control has-icons-right is-small is-clearfix">
<input
class="input is-small"
:placeholder="$i18n.get('instruction_search')"
type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('activities')"
autocomplete="on"
v-model="searchQuery"
@keyup.enter="searchActivities()">
<span
@click="searchActivities()"
class="icon is-right">
<i class="tainacan-icon tainacan-icon-search" />
</span>
</div>
<b-input
:placeholder="$i18n.get('instruction_search')"
type="search"
size="is-small"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('activities')"
autocomplete="on"
v-model="searchQuery"
@keyup.enter.native="searchActivities()"
icon-right="magnify"
icon-right-clickable
@icon-right-click="searchActivities()" />
</b-field>
</div>

1
src/views/admin/pages/lists/capabilities-page.vue
View File

@ -13,6 +13,7 @@
class="header-item">
<div class="control has-icons-right is-small is-clearfix">
<b-autocomplete
clearable
v-model="filteredRole"
:data="filteredRoles"
:placeholder="$i18n.get('instruction_type_search_roles_filter')"

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

@ -125,21 +125,17 @@
<!-- Textual Search -------------->
<b-field class="header-item">
<div class="control has-icons-right is-small is-clearfix">
<input
class="input is-small"
:placeholder="$i18n.get('instruction_search')"
type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('collections')"
autocomplete="on"
v-model="searchQuery"
@keyup.enter="searchCollections()">
<span
@click="searchCollections()"
class="icon is-right">
<i class="tainacan-icon tainacan-icon-search" />
</span>
</div>
<b-input
:placeholder="$i18n.get('instruction_search')"
type="search"
size="is-small"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('collections')"
autocomplete="on"
v-model="searchQuery"
@keyup.enter.native="searchCollections()"
icon-right="magnify"
icon-right-clickable
@icon-right-click="searchCollections()" />
</b-field>
</div>

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

@ -77,22 +77,17 @@
<div
role="search"
class="search-area">
<div class="control has-icons-right is-small is-clearfix">
<input
class="input is-small"
:placeholder="$i18n.get('instruction_search')"
type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('items')"
:value="searchQuery"
@input="futureSearchQuery = $event.target.value"
@keyup.enter="updateSearch()">
<span
aria-controls="items-list-results"
@click="updateSearch()"
class="icon is-right">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-search"/>
</span>
</div>
<b-input
size="is-small"
:placeholder="$i18n.get('instruction_search')"
type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('items')"
:value="searchQuery"
@input.native="futureSearchQuery = $event.target.value"
@keyup.enter.native="updateSearch()"
icon-right="magnify"
icon-right-clickable
@icon-right-click="updateSearch()" />
<a
@click="openAdvancedSearch = !openAdvancedSearch"
style="font-size: 0.75em;"
@ -1332,17 +1327,6 @@
position: relative;
position: sticky;
}
.label {
font-size: 0.75em;
font-weight: normal;
}
.checkbox {
margin-bottom: 5px;
align-items: baseline;
}
}
#filter-menu-compress-button {
position: absolute;
@ -1426,7 +1410,7 @@
color: var(--tainacan-label-color);
font-size: 0.875em;
font-weight: normal;
margin-top: 3px;
margin-top: 2px;
margin-bottom: 2px;
cursor: default;
}
@ -1498,11 +1482,6 @@
.control {
width: 100%;
.icon {
pointer-events: all;
cursor: pointer;
color: var(--tainacan-label-color);
}
margin-bottom: 5px;
}
.is-pulled-right {
@ -1510,10 +1489,6 @@
right: 15px;
top: 100%;
}
.input {
border: 1px solid var(--tainacan-input-border-color);
min-height: 30px !important;
}
a {
margin-left: 12px;
white-space: nowrap;
@ -1565,7 +1540,8 @@
animation-duration: 0.5s;
p {
margin: 0 auto;
margin: 0 auto !important;
font-size: 0.885em;
}
&>div {
@ -1575,8 +1551,8 @@
.button:hover,
.button:active,
.button:focus {
background: none;
color:var(--tainacan-yellow2);
background: none !important;
color: var(--tainacan-yellow2) !important;
font-weight: bold;
border: none;
cursor: pointer;

26
src/views/admin/pages/lists/taxonomies-page.vue
View File

@ -87,21 +87,17 @@
<!-- Textual Search -------------->
<b-field class="header-item">
<div class="control has-icons-right is-small is-clearfix">
<input
class="input is-small"
:placeholder="$i18n.get('instruction_search')"
type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('taxonomies')"
autocomplete="on"
v-model="searchQuery"
@keyup.enter="searchTaxonomies()">
<span
@click="searchTaxonomies()"
class="icon is-right">
<i class="tainacan-icon tainacan-icon-search" />
</span>
</div>
<b-input
:placeholder="$i18n.get('instruction_search')"
type="search"
size="is-small"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('taxonomies')"
autocomplete="on"
v-model="searchQuery"
@keyup.enter.native="searchTaxonomies()"
icon-right="magnify"
icon-right-clickable
@icon-right-click="searchTaxonomies()" />
</b-field>
</div>

46
src/views/admin/scss/_control.scss Normal file
View File

@ -0,0 +1,46 @@
// This used to be inside the TainacanForm class but there are meny places where this settings might be desirable.
.control {
font-size: 1em;
.is-clickable {
pointer-events: auto !important;
cursor: pointer;
}
&.has-icons-right,
&.has-icons-left {
.icon {
height: 100%;
.mdi::before {
color: var(--tainacan-info-color);
display: inline-block;
font: normal normal normal 20px/1 "TainacanIcons";
font-size: inherit;
text-rendering: auto;
vertical-align: middle;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.25em;
text-transform: none !important;
letter-spacing: normal !important;
}
.mdi-alert-circle::before {
content: "close";
color: inherit;
}
.mdi-magnify::before {
content: 'search';
}
.mdi-close-circle::before {
content: 'close';
font-size: 1em;
}
.mdi-account::before {
content: 'user';
}
}
}
&.has-icons-right .icon .mdi-magnify::before {
color: var(--tainacan-blue5);
}
}

4
src/views/admin/scss/_custom_variables.scss
View File

@ -138,6 +138,8 @@
color: var(--tainacan-black) !important;
}
a {
a,
a:hover,
a:focus {
color: var(--tainacan-secondary);
}

63
src/views/admin/scss/_dropdown-and-autocomplete.scss
View File

@ -20,11 +20,8 @@
cursor: default;
}
}
&>.control.has-icons-left .icon {
height: 100%;//2.125em;
width: 2.125em;
}
.dropdown-menu {
font-size: 1em;
padding: 0px;
margin-top: 0;
border-radius: 0px;
@ -61,6 +58,7 @@
.media-left {
margin-right: 0.5em;
display: flex;
}
.media-content {
display: flex;
@ -101,21 +99,6 @@
.taginput.is-expanded {
width: 100%;
}
.taginput-container .mdi-magnify::before,
.autocomplete .mdi-magnify::before {
color: var(--tainacan-info-color);
content: 'search';
display: inline-block;
font: normal normal normal 20px/1 "TainacanIcons";
font-size: inherit;
text-rendering: auto;
vertical-align: middle;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-size: 1.25em;
text-transform: none !important;
}
.taginput-container {
padding: 0px !important;
@ -158,6 +141,9 @@
}
}
}
.autocomplete .icon {
height: 100% !important;
}
}
.selected-list-box {
padding: 4px 6px 0px 6px;
@ -222,6 +208,14 @@
// }
// }
& .dropdown.is-mobile-modal {
@media screen and (max-width: 768px) {
.field.has-addons {
font-size: 1.125em;
}
}
}
.dropdown-menu {
background: transparent;
border: none;
@ -232,6 +226,7 @@
}
.datepicker-header {
.pagination {
a>span>i:before {
display: inline-block;
@ -253,7 +248,7 @@
&>span>i:before {
content: 'previous';
font-size: 1em;
font-size: 1.25em;
}
}
@ -263,7 +258,7 @@
&>span>i:before {
content: 'next';
font-size: 1em;
font-size: 1.25em;
}
}
}
@ -271,7 +266,8 @@
.datepicker-table {
padding: 0;
margin-bottom: 0px;
margin: 0px;
width: 100%;
.datepicker-cell {
border: none !important;
@ -316,6 +312,7 @@
padding-bottom: 0.5em;
.pagination {
font-size: 1.1em;
flex-wrap: wrap;
.pagination-list {
@ -325,24 +322,36 @@
width: 100% !important;
.control {
height: 24px !important;
select {
border: none !important;
min-height: 26px;
}
}
.control:first-child {
margin-right: 1px;
.select {
border-right: 1px solid var(--tainacan-input-border-color);
margin-right: 1px;
}
}
}
}
.pagination-previous {
margin: 0;
height: 24px;
height: 1.5em;
padding: 0;
font-size: 0.75em;
order: 3;
min-height: 24px;
margin-bottom: 0.35em;
}
.pagination-next {
margin: 0;
height: 24px;
height: 1.5em;
padding: 0;
font-size: 0.75em;
min-height: 24px;
margin-bottom: 0.35em;
}
}
}

9
src/views/admin/scss/_filters-menu-modal.scss
View File

@ -1,7 +1,10 @@
#filters-modal {
z-index: 999;
padding: 0;
&.is-fullscreen {
z-index: 9999;
}
.modal-content {
padding: 24px 18px $page-side-padding;
padding: 24px 18px 24px 4.1666667vw;
@ -22,7 +25,7 @@
.modal-close {
top: 32px;
right: calc(8.3333333% + 28px);
background-color: var(--tainacan-white);
background-color: var(--tainacan-background-color);
&::before, &::after {
background-color: var(--tainacan-secondary);
@ -32,7 +35,7 @@
@media screen and (max-width: 768px) {
.modal-content {
background-color: var(--tainacan-white);
background-color: var(--tainacan-background-color);
margin: 0 12% 0 0;
margin: 0 12vw 0 0;
padding: $page-small-side-padding;

1
src/views/admin/scss/_inputs.scss
View File

@ -46,6 +46,7 @@ input[type="week"].input {
&::placeholder {
font-size: 0.875em;
color: var(--tainacan-info-color) !important;
text-overflow: ellipsis;
}
&::-ms-input-placeholder {
font-size: 0.875em;

9
src/views/admin/scss/_modals.scss
View File

@ -1,5 +1,6 @@
// Tainacan modals
.modal .animation-content {
background: none;
width: 91.6666667%;
width: 91.6666667vw;
max-height: 86%;
@ -96,11 +97,12 @@
}
// Bulma modals customized for Tainacan (custom-dialog.vue)
.dialog {
.modal-background {
background-color: rgba(0, 0, 0, 0.70);
}
.modal-card {
background-color: var(--tainacan-white);
background-color: var(--tainacan-background-color);
color: var(--tainacan-secondary);
border-radius: 10px;
flex-wrap: wrap;
@ -135,6 +137,7 @@
background: var(--tainacan-background-color);
padding: 0px 0px 12px 20px;
width: 50%;
font-size: 0.875em;
}
.modal-card-foot {
justify-content: space-between;
@ -159,7 +162,7 @@
border: none;
}
.button:not(.is-success):not(.is-secondary) {
background-color: var(--tainacan-white);
background-color: var(--tainacan-background-color);
color: var(--tainacan-secondary);
border: 1px solid var(--tainacan-gray4);
}
@ -179,7 +182,7 @@
top: 100px;
bottom: 100px;
right: 100px;
background-color: var(--tainacan-white);
background-color: var(--tainacan-background-color);
z-index: 99999999999 !important;
.media-toolbar button.button:not(.is-small):not(.is-medium):not(.is-large){

5
src/views/admin/scss/_pagination.scss
View File

@ -26,10 +26,6 @@
color: var(--tainacan-input-color) !important;
}
.control {
font-size: 1em;
}
.shown-items {
font-size: 0.875em;
}
@ -105,6 +101,7 @@
}
.pagination-list {
flex-wrap: nowrap;
font-size: 1em;
}
.pagination-link, .pagination-previous, .pagination-next {
background-color: transparent;

7
src/views/admin/scss/_selects.scss
View File

@ -5,13 +5,16 @@
&:not(.is-multiple) {
height: auto;
}
&.is-small select {
min-height: 24px !important;
}
select {
background: transparent; // WordPress 5.3 adds arrows here
border: none;
border-radius: 1px !important;
font-weight: normal;
font-size: 0.875em !important;
min-height: 30px !important;
line-height: 1.5em;
height: auto !important;
padding: calc(0.375em - 1px) 20px calc(0.375em - 1px) 10px !important;
margin-top: 0px !important;
@ -27,6 +30,7 @@
&[disabled=disabled] {
background: var(--tainacan-gray1) !important;
}
}
&:not(.is-loading)::after {
content: "arrowdown" !important;
@ -42,6 +46,7 @@
text-transform: none !important;
letter-spacing: normal !important;
font-size: 1.2em;
line-height: 1.5em;
}
&.is-loading.is-small::after {
font-size: 0.875em;

27
src/views/admin/scss/_tainacan-form.scss
View File

@ -4,9 +4,6 @@
width: 100%;
padding: 0;
.control {
font-size: 1em;
}
.form-submit {
justify-content: space-between !important;
padding: 12px 0px ;
@ -80,7 +77,7 @@
border: 1px solid var(--tainacan-input-border-color);
background-color: var(--tainacan-gray1) !important;
color: var(--tainacan-secondary) !important;
padding: 0.26em 0.6em !important;
padding: 0.25em 0.6em !important;
border-radius: 0 !important;
.mdi::before {
@ -105,28 +102,6 @@
}
}
}
.control {
&.has-icons-right {
.icon {
height: 2.0em;
.mdi-alert-circle::before {
content: "close";
display: inline-block;
font: normal normal normal 20px/1 "TainacanIcons";
font-size: inherit;
text-rendering: auto;
vertical-align: middle;
line-height: inherit;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
transform: none !important;
text-transform: none !important;
letter-spacing: normal !important;
font-size: 1em;
}
}
}
}
.radio, .checkbox {
align-items: center;
margin-bottom: 5px;

4
src/views/admin/scss/_tooltips.scss
View File

@ -21,6 +21,7 @@
}
}
.tooltip {
font-size: 0.6875em;
z-index: 999999999;
display: block !important;
@ -31,7 +32,7 @@
.tooltip-inner {
background: var(--tainacan-primary);
color: var(--tainacan-info-color);
font-size: 0.6875em;
font-size: 1em;
border-radius: 5px;
padding: 10px 14px;
max-width: 280px;
@ -138,6 +139,7 @@
pointer-events: none;
cursor: none;
flex-wrap: wrap;
font-size: 1.25em;
.metadata-type-label {
font-weight: 600;

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

@ -11,6 +11,7 @@
// Import Tainacan custom styles
@import "../scss/_tainacan-form.scss";
@import "../scss/_control.scss";
@import "../scss/_buttons.scss";
@import "../scss/_selects.scss";
@import "../scss/_inputs.scss";

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

@ -19,6 +19,7 @@ function tainacan_blocks_add_gutenberg_blocks_actions() {
add_action('init', 'tainacan_blocks_register_tainacan_carousel_items_list');
add_action('init', 'tainacan_blocks_register_tainacan_carousel_terms_list');
add_action('init', 'tainacan_blocks_register_tainacan_search_bar');
add_action('init', 'tainacan_blocks_register_tainacan_faceted_search');
add_action('init', 'tainacan_blocks_register_tainacan_collections_list');
add_action('init', 'tainacan_blocks_register_tainacan_carousel_collections_list');
add_action('init', 'tainacan_blocks_register_tainacan_facets_list');
@ -147,6 +148,37 @@ function tainacan_blocks_register_tainacan_dynamic_items_list(){
}
}
function tainacan_blocks_register_tainacan_faceted_search(){
global $TAINACAN_BASE_URL;
wp_register_script(
'faceted-search-theme',
$TAINACAN_BASE_URL . '/assets/js/theme_search.js',
['underscore']
//array('wp-components')
);
wp_register_script(
'faceted-search',
$TAINACAN_BASE_URL . '/assets/js/block_faceted_search.js',
array('wp-blocks', 'wp-element', 'wp-components', 'wp-editor')
);
wp_register_style(
'faceted-search',
$TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-block-faceted-search.css',
array('wp-edit-blocks')
);
if (function_exists('register_block_type')) {
register_block_type( 'tainacan/faceted-search', array(
'editor_script' => 'faceted-search',
'style' => 'faceted-search',
'script' => 'faceted-search-theme'
) );
}
}
function tainacan_blocks_register_tainacan_carousel_items_list(){
global $TAINACAN_BASE_URL;
@ -314,6 +346,10 @@ function tainacan_blocks_add_plugin_settings() {
wp_localize_script( 'carousel-items-list', 'tainacan_blocks', $settings );
wp_localize_script( 'carousel-terms-list', 'tainacan_blocks', $settings );
wp_localize_script( 'search-bar', 'tainacan_blocks', $settings );
wp_localize_script( 'faceted-search', 'tainacan_blocks', $settings );
// wp_localize_script( 'faceted-search-theme', 'tainacan_plugin', $settings );
wp_localize_script( 'faceted-search-theme', 'tainacan_plugin', \Tainacan\Admin::get_instance()->get_admin_js_localization_params() );
wp_localize_script( 'collections-list', 'tainacan_blocks', $settings );
wp_localize_script( 'carousel-collections-list', 'tainacan_blocks', $settings );
wp_localize_script( 'facets-list', 'tainacan_blocks', $settings );

289
src/views/gutenberg-blocks/tainacan-facets/faceted-search/collection-modal.js Normal file
View File

@ -0,0 +1,289 @@
import tainacan from '../../js/axios.js';
import axios from 'axios';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, SelectControl, RadioControl, Spinner } = wp.components;
export default class CollectionModal extends React.Component {
constructor(props) {
super(props);
// Initialize state
this.state = {
collectionViewModes: [],
collectionsPerPage: 24,
collectionId: undefined,
isLoadingCollections: false,
modalCollections: [],
totalModalCollections: 0,
collectionPage: 1,
collectionOrderBy: 'date-desc',
temporaryCollectionId: '',
searchCollectionName: '',
collections: [],
collectionsRequestSource: undefined
};
// 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);
}
componentWillMount() {
this.setState({
collectionId: this.props.existingCollectionId,
temporaryCollectionId: this.props.existingCollectionId,
collectionPage: 1
});
this.fetchModalCollections();
}
cancelSelection() {
this.setState({
modalCollections: []
});
this.props.onCancelSelection();
}
// COLLECTIONS RELATED --------------------------------------------------
fetchModalCollections() {
let someModalCollections = this.state.modalCollections;
if (this.state.collectionPage <= 1)
someModalCollections = [];
let endpoint = '/collections/?perpage=' + this.state.collectionsPerPage + '&paged=' + this.state.collectionPage;
if (this.state.collectionOrderBy == 'date')
endpoint += '&orderby=date&order=asc';
else if (this.state.collectionOrderBy == 'date-desc')
endpoint += '&orderby=date&order=desc';
else if (this.state.collectionOrderBy == 'title')
endpoint += '&orderby=title&order=asc';
else if (this.state.collectionOrderBy == 'title-desc')
endpoint += '&orderby=title&order=desc';
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);
});
}
selectCollection(selectedCollectionId) {
this.setState({ collectionId: selectedCollectionId });
this.props.onSelectCollection(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: []
});
let endpoint = '/collections/?perpage=' + this.state.collectionsPerPage;
if (name != undefined && name != '')
endpoint += '&search=' + name;
if (this.state.collectionOrderBy == 'date')
endpoint += '&orderby=date&order=asc';
else if (this.state.collectionOrderBy == 'date-desc')
endpoint += '&orderby=date&order=desc';
else if (this.state.collectionOrderBy == 'title')
endpoint += '&orderby=title&order=asc';
else if (this.state.collectionOrderBy == 'title-desc')
endpoint += '&orderby=title&order=desc';
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);
});
}
resetCollections() {
this.setState({
collectionId: null,
collectionPage: 1,
modalCollections: []
});
this.fetchModalCollections();
}
render() {
return (
<Modal
className="wp-block-tainacan-modal"
title={__('Select a collection to fetch items from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select items', 'tainacan')}>
<div>
<div className="modal-search-area">
<TextControl
placeholder={ __('Search by collection\'s name', 'tainacan') }
label={__('Search for a collection', 'tainacan')}
value={ this.state.searchCollectionName }
onChange={(value) => {
this.setState({
searchCollectionName: value
});
_.debounce(this.fetchCollections(value), 300);
}}/>
<SelectControl
label={__('Order by', 'tainacan')}
value={ this.state.collectionOrderBy }
options={ [
{ label: __('Latest', 'tainacan'), value: 'date-desc' },
{ label: __('Oldest', 'tainacan'), value: 'date' },
{ label: __('Name (A-Z)', 'tainacan'), value: 'title' },
{ label: __('Name (Z-A)', 'tainacan'), value: 'title-desc' }
] }
onChange={ ( aCollectionOrderBy ) => {
this.state.collectionOrderBy = aCollectionOrderBy;
this.state.collectionPage = 1;
this.setState({
collectionOrderBy: this.state.collectionOrderBy,
collectionPage: this.state.collectionPage
});
if (this.state.searchCollectionName && this.state.searchCollectionName != '') {
this.fetchCollections(this.state.searchCollectionName);
} else {
this.fetchModalCollections();
}
}}/>
</div>
{(
this.state.searchCollectionName != '' ? (
this.state.collections.length > 0 ?
(
<div>
<div className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporaryCollectionId }
options={
this.state.collections.map((collection) => {
return { label: collection.name, value: '' + collection.id }
})
}
onChange={ ( aCollectionId ) => {
this.setState({ temporaryCollectionId: aCollectionId });
} } />
}
</div>
</div>
) :
this.state.isLoadingCollections ? (
<Spinner />
) :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
</div>
):
this.state.modalCollections.length > 0 ?
(
<div>
<div className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporaryCollectionId }
options={
this.state.modalCollections.map((collection) => {
return { label: collection.name, value: '' + collection.id }
})
}
onChange={ ( aCollectionId ) => {
this.setState({ temporaryCollectionId: aCollectionId });
} } />
}
</div>
<div className="modal-loadmore-section">
<p>{ __('Showing', 'tainacan') + " " + this.state.modalCollections.length + " " + __('of', 'tainacan') + " " + this.state.totalModalCollections + " " + __('collections', 'tainacan') + "."}</p>
{
this.state.modalCollections.length < this.state.totalModalCollections ? (
<Button
isDefault
isSmall
onClick={ () => this.fetchModalCollections() }>
{__('Load more', 'tainacan')}
</Button>
) : null
}
</div>
</div>
) : this.state.isLoadingCollections ? <div class="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no collection found.', 'tainacan') }</p>
</div>
)}
<div className="modal-footer-area">
<Button
isDefault
onClick={ () => { this.cancelSelection() }}>
{__('Cancel', 'tainacan')}
</Button>
<Button
isPrimary
disabled={ this.state.temporaryCollectionId == undefined || this.state.temporaryCollectionId == null || this.state.temporaryCollectionId == ''}
onClick={ () => this.selectCollection(this.state.temporaryCollectionId) }>
{__('Use selected Collection', 'tainacan')}
</Button>
{
this.state.isLoadingItems ? (
<Spinner />
) : null
}
</div>
</div>
</Modal>
)
}
}

344
src/views/gutenberg-blocks/tainacan-facets/faceted-search/faceted-search.scss Normal file
View File

@ -0,0 +1,344 @@
@import '../../gutenberg-blocks-style.scss';
.wp-block-tainacan-faceted-search {
margin: 2em auto;
// Spinner
.spinner-container {
min-height: 56px;
padding: 1em;
display: flex;
justify-content: center;
align-items: center;
color: #555758;
}
// Skeleton loading
@-webkit-keyframes skeleton-animation {
0%{opacity: 1.0}
50%{opacity: 0.2}
100%{opacity: 1.0}
}
@-moz-keyframes skeleton-animation {
0%{opacity: 1.0}
50%{opacity: 0.2}
100%{opacity: 1.0}
}
@-o-keyframes skeleton-animation {
0%{opacity: 1.0}
50%{opacity: 0.2}
100%{opacity: 1.0}
}
@keyframes skeleton-animation {
0%{opacity: 1.0}
50%{opacity: 0.2}
100%{opacity: 1.0}
}
.skeleton {
border-radius: 2px;
background: #f2f2f2;
-webkit-animation: skeleton-animation 1.8s ease infinite;
-moz-animation: skeleton-animation 1.8s ease infinite;
-o-animation: skeleton-animation 1.8s ease infinite;
animation: skeleton-animation 1.8s ease infinite;
}
.preview-warning {
width: 100%;
font-size: 0.875em;
font-style: italic;
color: #898d8f;
text-align: center;
margin: 4px auto;
}
.items-list-placeholder {
font-size: 1.125em;
min-height: 400px;
width: 100%;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
border-radius: 4px;
border: 1px solid rgba(200,200,200, 0.3);
overflow: hidden;
.search-control,
.filters,
.items,
.pagination {
background-color: var(--tainacan-background-color, white);
border: 1px solid rgba(200,200,200, 0.3);
padding: 12px;
margin: 0px;
border-radius: 1px;
}
.search-control {
flex: 0 0 15%;
display: flex;
justify-content: space-between;
align-items: center;
}
.below-search-control {
position: relative;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
flex: 1 0 auto;
.filters {
flex: 0 1 var(--tainacan-filter-menu-width-theme, 20%);
display: flex;
flex-direction: column;
padding: 40px 20px 60px 15px;
.fake-filter {
display: flex;
flex-direction: column;
width: 80%;
margin: 4% 12%;
.fake-text {
margin: 4px 0;
width: 35%;
background-color: var(--tainacan-label-color, rgba(200,200,200, 0.2));
}
.fake-searchbar {
width: 100%;
}
.fake-checkbox-list {
&>div {
width: 100%;
display: flex;
align-items: center;
&:nth-child(odd) .fake-text {
width: 60%;
}
}
.fake-checkbox {
display: block;
width: 0.4em;
height: 0.4em;
min-width: 0.4em;
min-height: 0.4em;
max-width: 0.4em;
max-height: 0.4em;
border: 2px solid var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
border-radius: 2px;
margin-right: 4px;
}
.fake-text {
background-color: var(--tainacan-input-color, rgba(200,200,200, 0.3));
width: 54%;
}
.fake-link {
width: 25%;
margin: 3px;
}
}
}
.fake-filters-heading {
position: relative;
top: -1.3em;
left: -0.3em;
background-color: var(--tainacan-heading-color, rgba(200,200,200, 0.3));
height: 0.2em;
width: 28%;
border-radius: 2px;
}
}
.aside-filters {
display: flex;
flex-wrap: nowrap;
flex-direction: column;
flex: 1 1 auto;
.items {
flex: 1 0 auto;
display: flex;
flex-wrap: wrap;
justify-content: space-evenly;
align-content: flex-start;
}
.pagination {
flex: 0 1 5%;
display: flex;
justify-content: space-between;
align-items: center;
&>.fake-text {
background-color: var(--tainacan-info-color, rgba(200,200,200, 0.2));
}
}
}
}
.fake-text {
background-color: var(--tainacan-input-color, rgba(200,200,200, 0.3));
height: 0.2em;
width: 24%;
min-width: 1.25em;
border-radius: 2px;
}
.fake-link {
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
height: 0.2em;
width: 10%;
border-radius: 2px;
}
.fake-icon {
background-color: var(--tainacan-info-color, rgba(200,200,200, 0.3));
height: 0.3em;
width: 0.3em;
min-height: 0.3em;
min-width: 0.3em;
max-height: 0.3em;
max-width: 0.3em;
border-radius: 5px;
}
.fake-tooltip {
background-color: var(--tainacan-primary, rgba(200,200,200, 0.1));
position: absolute;
height: 0.75em;
width: 4em;
border-radius: 2px;
display: flex;
justify-content: center;
align-items: center;
top: -0.75em;
left: 1em;
.fake-link {
width: 100%;
margin: 0 4px 0 8px;
}
&:before {
content: "";
display: block;
position: absolute;
left: 12px;
width: 0;
height: 0;
border-style: solid;
}
&:before {
border-color: var(--tainacan-primary) transparent transparent transparent;
border-right-width: 7px;
border-top-width: 6px;
border-left-width: 7px;
bottom: -8px;
}
}
.fake-searchbar {
background-color: var(--tainacan-input-background-color, rgba(200,200,200, 0.3));
height: 0.8em;
width: 18%;
border: 2px solid var(--tainacan-input-border-color, rgba(200,200,200, 0.3));
border-radius: 3px;
.fake-advanced-searchbar {
display: block;
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
height: 0.2em;
border-radius: 3px;
width: 70%;
position: relative;
bottom: -0.85em;
}
}
.fake-hide-button {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--tainacan-primary, rgba(200,200,200, 0.1));
height: 0.9em;
width: 0.9em;
font-size: 0.75em;
border-radius: 3px;
position: absolute;
left: 0px;
top: 42px;
.fake-icon {
background-color: var(--tainacan-secondary, rgba(200,200,200, 0.3));
}
}
.fake-button {
background-color: var(--tainacan-background-color, white);
height: 0.8em;
width: 10%;
max-width: 3.25em;
min-width: 1em;
margin-left: 6px;
border-radius: 3px;
display: flex;
align-items: center;
.fake-text {
background-color: var(--tainacan-input-color, rgba(200,200,200, 0.3));
width: 95%;
margin: 0 2px;
}
.fake-icon {
flex: 1 0 auto;
margin: 0 2px;
}
}
.fake-buttons-group {
flex: 0 0 15%;
display: flex;
justify-content: space-evenly;
}
.fake-item {
background-color: var(--tainacan-item-background-color, white);
flex: 1 0 180px;
margin: 12px;
height: 78px;
&.fake-item-hovered,
&:hover {
background-color: var(--tainacan-item-hover-background-color, rgba(200,200,200, 0.2));
.fake-item-header {
background-color: var(--tainacan-item-heading-hover-background-color, rgba(200,200,200, 0.3));
}
}
.fake-item-header {
height: 20px;
width: 100%;
position: relative;
top: 0;
display: flex;
align-items: center;
padding: 6px;
.fake-text {
background-color: var(--tainacan-heading-color, rgba(200,200,200, 0.35));
}
}
.fake-item-thumb {
background-size: cover;
background-color: var(--tainacan-input-border-color, rgba(200,200,200, 0.1));
height: 58px;
width: 58px;
float: left;
}
.fake-item-description {
background-color: var(--tainacan-info-color, rgba(200,200,200, 0.15));
height: 0.18em;
width: 60%;
border-radius: 2px;
margin: 8px 6px 2px 6px;
position: relative;
left: 62px;
&:nth-child(odd) {
width: 50%;
}
}
}
}
.theme-items-list {
max-width: 100% !important;
}
}

932
src/views/gutenberg-blocks/tainacan-facets/faceted-search/index.js Normal file
View File

@ -0,0 +1,932 @@
const { registerBlockType } = wp.blocks;
const { __ } = wp.i18n;
const { Button, ColorPicker, BaseControl, RangeControl, FontSizePicker, HorizontalRule, SelectControl, ToggleControl, Placeholder, PanelBody } = wp.components;
const { InspectorControls } = wp.editor;
import CollectionModal from './collection-modal.js';
import TermModal from './term-modal.js';
registerBlockType('tainacan/faceted-search', {
title: __('Tainacan Faceted Search', 'tainacan'),
icon:
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="24px"
width="24px">
<path
fill="#298596"
d="M21.43,13.64,19.32,16a2.57,2.57,0,0,1-2,1H11a3.91,3.91,0,0,0,0-.49,5.49,5.49,0,0,0-5-5.47V9.64A2.59,2.59,0,0,1,8.59,7H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,13.64ZM4,3A2,2,0,0,0,2,5v7.3a5.32,5.32,0,0,1,2-1V5H16V3ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1,0-7,2.74,2.74,0,0,1,.5,0A3.5,3.5,0,0,1,9,16a2.92,2.92,0,0,1,0,.51,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,1,0,5.5,18,1.5,1.5,0,0,0,7,16.53Z"/>
</svg>,
category: 'tainacan-blocks',
keywords: [ __( 'facets', 'tainacan' ), __( 'search', 'tainacan' ), __( 'items', 'tainacan' ) ],
description: __('A full items list faceted search from either the repository, a collection or a term.', 'tainacan'),
attributes: {
termId: {
type: String,
default: undefined
},
taxonomyId: {
type: String,
default: undefined
},
collectionId: {
type: String,
default: undefined
},
defaultViewMode: {
type: String,
default: 'masonry'
},
enabledViewModes: {
type: Array,
default: [ 'cards', 'masonry', 'table' ]
},
hideFilters: {
type: Boolean,
default: false
},
hideHideFiltersButton: {
type: Boolean,
default: false
},
hideSearch: {
type: Boolean,
default: false
},
hideAdvancedSearch: {
type: Boolean,
default: false
},
hideSortByButton: {
type: Boolean,
default: false
},
hideExposersButton: {
type: Boolean,
default: false
},
hideItemsPerPageButton: {
type: Boolean,
default: false
},
hideGoToPageButton: {
type: Boolean,
default: false
},
showFiltersButtonInsideSearchControl: {
type: Boolean,
default: false
},
startWithFiltersHidden: {
type: Boolean,
default: false
},
filtersAsModal: {
type: Boolean,
default: false
},
showInlineViewModeOptions: {
type: Boolean,
default: false
},
showFullscreenWithViewModes: {
type: Boolean,
default: false
},
listType: {
type: String,
default: 'collection'
},
isCollectionModalOpen: {
type: Boolean,
default: false
},
isTermModalOpen: {
type: Boolean,
default: false
},
backgroundColor: {
type: String,
default: '#ffffff'
},
baseFontSize: {
type: Number,
default: 16
},
filtersAreaWidth: {
type: Number,
default: 20
},
inputColor: {
type: String,
default: '#1d1d1d'
},
inputBackgroundColor: {
type: String,
default: '#ffffff'
},
inputBorderColor: {
type: String,
default: '#dbdbdb'
},
labelColor: {
type: String,
default: '#454647'
},
infoColor: {
type: String,
default: '#555758'
},
headingColor: {
type: String,
default: '#000000'
},
skeletonColor: {
type: String,
default: '#eeeeee'
},
itemBackgroundColor: {
type: String,
default: '#ffffff'
},
itemHoverBackgroundColor: {
type: String,
default: '#f2f2f2'
},
itemHeadingHoverBackgroundColor: {
type: String,
default: '#dbdbdb'
},
primaryColor: {
type: String,
default: '#d9eced'
},
secondaryColor: {
type: String,
default: '#298596'
}
},
supports: {
align: ['full', 'wide'],
html: true,
multiple: false
},
edit({ attributes, setAttributes, className, isSelected, clientId }){
let {
termId,
taxonomyId,
collectionId,
defaultViewMode,
enabledViewModes,
hideFilters,
hideHideFiltersButton,
hideSearch,
hideAdvancedSearch,
hideSortByButton,
hideExposersButton,
hideItemsPerPageButton,
hideGoToPageButton,
showFiltersButtonInsideSearchControl,
startWithFiltersHidden,
filtersAsModal,
showInlineViewModeOptions,
showFullscreenWithViewModes,
listType,
isCollectionModalOpen,
isTermModalOpen,
backgroundColor,
baseFontSize,
filtersAreaWidth,
inputColor,
inputBackgroundColor,
inputBorderColor,
labelColor,
infoColor,
headingColor,
skeletonColor,
itemBackgroundColor,
itemHoverBackgroundColor,
itemHeadingHoverBackgroundColor,
primaryColor,
secondaryColor
} = attributes;
const fontSizes = [
{
name: __( 'Tiny', 'tainacan' ),
slug: 'tiny',
size: 12,
},
{
name: __( 'Small', 'tainacan' ),
slug: 'small',
size: 14,
},
{
name: __( 'Normal', 'tainacan' ),
slug: 'normal',
size: 16,
},
{
name: __( 'Big', 'tainacan' ),
slug: 'big',
size: 18,
},
{
name: __( 'Huge', 'tainacan' ),
slug: 'huge',
size: 20,
},
];
function openCollectionModal() {
isCollectionModalOpen = true;
setAttributes( {
isCollectionModalOpen: isCollectionModalOpen
} );
}
function openTermModal() {
isTermModalOpen = true;
setAttributes( {
isTermModalOpen: isTermModalOpen
} );
}
return (
<div className={className}>
<div>
<InspectorControls>
<PanelBody
title={__('Search Control Area', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Hide search input', 'tainacan')}
help={ hideSearch ? __('Do not show textual search input', 'tainacan') : __('Toggle to show textual search input', 'tainacan')}
checked={ hideSearch }
onChange={ ( isChecked ) => {
hideSearch = isChecked;
setAttributes({ hideSearch: isChecked });
}
}
/>
<ToggleControl
label={__('Hide advanced search', 'tainacan')}
help={ hideAdvancedSearch || hideSearch ? __('Do not show advanced search', 'tainacan') : __('Toggle to show advanced search', 'tainacan')}
checked={ hideAdvancedSearch || hideSearch }
onChange={ ( isChecked ) => {
hideAdvancedSearch = isChecked;
setAttributes({ hideAdvancedSearch: isChecked });
}
}
/>
<ToggleControl
label={__('Hide "Sort By" button', 'tainacan')}
help={ hideSortByButton ? __('Do not show "Sort By" button', 'tainacan') : __('Toggle to show "Sort By" button', 'tainacan')}
checked={ hideSortByButton }
onChange={ ( isChecked ) => {
hideSortByButton = isChecked;
setAttributes({ hideSortByButton: isChecked });
}
}
/>
<ToggleControl
label={__('Show inline View Mode options', 'tainacan')}
help={ showInlineViewModeOptions ? __('Toggle to show View Mode options inline instead of a dropdown', 'tainacan') : __('Keep view mode options as a dropdown', 'tainacan')}
checked={ showInlineViewModeOptions }
onChange={ ( isChecked ) => {
showInlineViewModeOptions = isChecked;
setAttributes({ showInlineViewModeOptions: isChecked });
}
}
/>
<ToggleControl
label={__('Show Fullscreen with other View Modes', 'tainacan')}
help={ showFullscreenWithViewModes ? __('Toggle to show Fullscreen view mode alongside with other View Modes', 'tainacan') : __('Keep Fullscreen view mode separated from other View Mode Options', 'tainacan')}
checked={ showFullscreenWithViewModes }
onChange={ ( isChecked ) => {
showFullscreenWithViewModes = isChecked;
setAttributes({ showFullscreenWithViewModes: isChecked });
}
}
/>
<ToggleControl
label={__('Hide "View as..." button', 'tainacan')}
help={ hideExposersButton ? __('Do not show "View as...", the "Exposers" button', 'tainacan') : __('Toggle to show "View as...", the "Exposers" button', 'tainacan')}
checked={ hideExposersButton }
onChange={ ( isChecked ) => {
hideExposersButton = isChecked;
setAttributes({ hideExposersButton: isChecked });
}
}
/>
<ToggleControl
label={__('Show "Filters" button inside the Search Control', 'tainacan')}
help={ showFiltersButtonInsideSearchControl ? __('Toggle to show Filters button inside the Search Control, instead of floating left', 'tainacan') : __('Keep Filters button as a floating arrow on the left', 'tainacan')}
checked={ showFiltersButtonInsideSearchControl }
onChange={ ( isChecked ) => {
showFiltersButtonInsideSearchControl = isChecked;
setAttributes({ showFiltersButtonInsideSearchControl: isChecked });
}
}
/>
</PanelBody>
<PanelBody
title={__('Filters Area', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Hide Filters', 'tainacan')}
help={ hideFilters ? __('Do not show Filters with the list', 'tainacan') : __('Toggle to show Filters with the list', 'tainacan')}
checked={ hideFilters }
onChange={ ( isChecked ) => {
hideFilters = isChecked;
setAttributes({ hideFilters: isChecked });
}
}
/>
<ToggleControl
label={__('Hide "Hide Filters" button', 'tainacan')}
help={ hideHideFiltersButton || hideFilters ? __('Do not show "Hide Filters" button', 'tainacan') : __('Toggle to show "Hide Filters" button', 'tainacan')}
checked={ hideHideFiltersButton || hideFilters }
onChange={ ( isChecked ) => {
hideHideFiltersButton = isChecked;
setAttributes({ hideHideFiltersButton: isChecked });
}
}
/>
<ToggleControl
label={__('Start with Filters hidden', 'tainacan')}
help={ startWithFiltersHidden ? __('Render the list with filters hidden at first" button', 'tainacan') : __('Toggle to render the list with filters visible at first', 'tainacan')}
checked={ startWithFiltersHidden }
onChange={ ( isChecked ) => {
startWithFiltersHidden = isChecked;
setAttributes({ startWithFiltersHidden: isChecked });
}
}
/>
<ToggleControl
label={__('Filters as a Modal', 'tainacan')}
help={ filtersAsModal ? __('Render the filters area as modal instead of a collapse" button', 'tainacan') : __('Toggle to show filters list as a collapse instead of a modal', 'tainacan')}
checked={ filtersAsModal }
onChange={ ( isChecked ) => {
filtersAsModal = isChecked;
setAttributes({ filtersAsModal: isChecked });
}
}
/>
</PanelBody>
<PanelBody
title={__('Pagination Area', 'tainacan')}
initialOpen={ true }
>
<ToggleControl
label={__('Hide "Items per Page" button', 'tainacan')}
help={ hideItemsPerPageButton ? __('Do not show "Items per Page" button', 'tainacan') : __('Toggle to show "Items per Page" button', 'tainacan')}
checked={ hideItemsPerPageButton }
onChange={ ( isChecked ) => {
hideItemsPerPageButton = isChecked;
setAttributes({ hideItemsPerPageButton: isChecked });
}
}
/>
<ToggleControl
label={__('Hide "Go to Page" button', 'tainacan')}
help={ hideGoToPageButton ? __('Do not show "Go to Page" button', 'tainacan') : __('Toggle to show "Go to Page" button', 'tainacan')}
checked={ hideGoToPageButton }
onChange={ ( isChecked ) => {
hideGoToPageButton = isChecked;
setAttributes({ hideGoToPageButton: isChecked });
}
}
/>
</PanelBody>
<PanelBody
title={__('Colors and Sizes', 'tainacan')}
initialOpen={ false }
>
<FontSizePicker
fontSizes={ fontSizes }
value={ baseFontSize }
fallbackFontSize={ 16 }
onChange={ ( newFontSize ) => {
setAttributes( { baseFontSize: newFontSize } );
} }
/>
<RangeControl
label={ __('Filters Area Width (%)', 'tainacan') }
value={ filtersAreaWidth }
onChange={ ( width ) => setAttributes( { filtersAreaWidth: width } ) }
min={ 10 }
max={ 40 }
/>
<HorizontalRule />
<BaseControl
id="backgroundColorPicker"
label={ __('Background color', 'tainacan')}
help={ __('The background color of the entire items list', 'tainacan') }>
<ColorPicker
color={ backgroundColor }
onChangeComplete={ (colorValue ) => {
backgroundColor = colorValue.hex;
setAttributes({ backgroundColor: backgroundColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="secondaryColorPicker"
label={ __('Link and Active Main color', 'tainacan')}
help={ __('The text color links and other action or active state elements, such as select arrows, tooltip contents, etc', 'tainacan') }>
<ColorPicker
color={ secondaryColor }
onChangeComplete={ (colorValue ) => {
secondaryColor = colorValue.hex;
setAttributes({ secondaryColor: secondaryColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="primaryColorPicker"
label={ __('Tooltips background color', 'tainacan')}
help={ __('The tooltips background color and other elements, such as the hide filters button', 'tainacan') }>
<ColorPicker
color={ primaryColor }
onChangeComplete={ (colorValue ) => {
primaryColor = colorValue.hex;
setAttributes({ primaryColor: primaryColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="inputBackgroundColorPicker"
label={ __('Input Background color', 'tainacan')}
help={ __('The background color for input fields', 'tainacan') }>
<ColorPicker
color={ inputBackgroundColor }
onChangeComplete={ (colorValue ) => {
inputBackgroundColor = colorValue.hex;
setAttributes({ inputBackgroundColor: inputBackgroundColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="inputColorPicker"
label={ __('Input Text color', 'tainacan')}
help={ __('The text color for input fields, including dropdowns and buttons', 'tainacan') }>
<ColorPicker
color={ inputColor }
onChangeComplete={ (colorValue ) => {
inputColor = colorValue.hex;
setAttributes({ inputColor: inputColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="inputBorderColorPicker"
label={ __('Input Border color', 'tainacan')}
help={ __('The border color for input fields', 'tainacan') }>
<ColorPicker
color={ inputBorderColor }
onChangeComplete={ (colorValue ) => {
inputBorderColor = colorValue.hex;
setAttributes({ inputBorderColor: inputBorderColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="labelColorPicker"
label={ __('Label Text color', 'tainacan')}
help={ __('The text color for field labels', 'tainacan') }>
<ColorPicker
color={ labelColor }
onChangeComplete={ (colorValue ) => {
labelColor = colorValue.hex;
setAttributes({ labelColor: labelColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="headingColorPicker"
label={ __('Headings Text color', 'tainacan')}
help={ __('The text color for headings such as items title and filters menu header', 'tainacan') }>
<ColorPicker
color={ headingColor }
onChangeComplete={ (colorValue ) => {
headingColor = colorValue.hex;
setAttributes({ headingColor: headingColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="infoColorPicker"
label={ __('General Info Text color', 'tainacan')}
help={ __('The text color for other information such as item metadata, icons, number of pages, etc', 'tainacan') }>
<ColorPicker
color={ infoColor }
onChangeComplete={ (colorValue ) => {
infoColor = colorValue.hex;
setAttributes({ infoColor: infoColor });
}}
disableAlpha
/>
</BaseControl>
<BaseControl
id="itemBackgroundColorPicker"
label={ __('Item Background color', 'tainacan')}
help={ __('The background color for an item on the list', 'tainacan') }>
<ColorPicker
color={ itemBackgroundColor }
onChangeComplete={ (colorValue ) => {
itemBackgroundColor = colorValue.hex;
setAttributes({ itemBackgroundColor: itemBackgroundColor });
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="itemHoverBackgroundColorPicker"
label={ __('Item Hover Background color', 'tainacan')}
help={ __('The background color for an item on the list, when hovered', 'tainacan') }>
<ColorPicker
color={ itemHoverBackgroundColor }
onChangeComplete={ (colorValue ) => {
itemHoverBackgroundColor = colorValue.hex;
skeletonColor = colorValue.hex;
setAttributes({
itemHoverBackgroundColor: itemHoverBackgroundColor,
skeletonColor: skeletonColor
});
}}
disableAlpha
/>
</BaseControl>
<HorizontalRule />
<BaseControl
id="itemHeadingHoverBackgroundColorPicker"
label={ __('Item Heading Hover Background color', 'tainacan')}
help={ __('The background color for the item heading (where the title is), when hovered', 'tainacan') }>
<ColorPicker
color={ itemHeadingHoverBackgroundColor }
onChangeComplete={ (colorValue ) => {
itemHeadingHoverBackgroundColor = colorValue.hex;
setAttributes({ itemHeadingHoverBackgroundColor: itemHeadingHoverBackgroundColor });
}}
disableAlpha
/>
</BaseControl>
</PanelBody>
</InspectorControls>
</div>
{ isSelected ?
(
<div>
<div className="block-control">
<p style={{ display: 'flex', alignItems: 'baseline' }}>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="24px"
width="24px">
<path
fill="#298596"
d="M21.43,13.64,19.32,16a2.57,2.57,0,0,1-2,1H11a3.91,3.91,0,0,0,0-.49,5.49,5.49,0,0,0-5-5.47V9.64A2.59,2.59,0,0,1,8.59,7H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,13.64ZM4,3A2,2,0,0,0,2,5v7.3a5.32,5.32,0,0,1,2-1V5H16V3ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1,0-7,2.74,2.74,0,0,1,.5,0A3.5,3.5,0,0,1,9,16a2.92,2.92,0,0,1,0,.51,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,1,0,5.5,18,1.5,1.5,0,0,0,7,16.53Z"/>
</svg>
{__('Show items list from: ', 'tainacan')}
&nbsp;
<SelectControl
label={ __('Items list source', 'tainacan') }
hideLabelFromVision
value={ listType }
options={ [
{ label: __('a Collection', 'tainacan'), value: 'collection' },
{ label: __('a Taxonomy Term', 'tainacan'), value: 'term' },
{ label: __('the Repository', 'tainacan'), value: 'repository' },
] }
onChange={ ( aListType) => {
listType = aListType;
setAttributes({ listType: aListType });
} }
/>
&nbsp;
{
(listType == 'collection' && collectionId != undefined) || (listType == 'term' && termId != undefined) ?
<Button
isPrimary
type="submit"
onClick={ () => listType == 'term' ? openTermModal() : openCollectionModal() }>
{ listType == 'term' ? __('Change Term', 'tainacan') : __('Change Collection', 'tainacan') }
</Button>
: null
}
</p>
</div>
</div>
) : null
}
{ ( termId == undefined && listType == 'term' ) || ( collectionId == undefined && listType == 'collection' ) ? (
<Placeholder
icon={(
<img
width={148}
src={ `${tainacan_blocks.base_url}/assets/images/tainacan_logo_header.svg` }
alt="Tainacan Logo"/>
)}>
<p>
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 24 24"
height="24px"
width="24px">
<path
fill="#298596"
d="M21.43,13.64,19.32,16a2.57,2.57,0,0,1-2,1H11a3.91,3.91,0,0,0,0-.49,5.49,5.49,0,0,0-5-5.47V9.64A2.59,2.59,0,0,1,8.59,7H17.3a2.57,2.57,0,0,1,2,1l2.11,2.38A2.59,2.59,0,0,1,21.43,13.64ZM4,3A2,2,0,0,0,2,5v7.3a5.32,5.32,0,0,1,2-1V5H16V3ZM11,21l-1,1L8.86,20.89,8,20H8l-.57-.57A3.42,3.42,0,0,1,5.5,20a3.5,3.5,0,0,1,0-7,2.74,2.74,0,0,1,.5,0A3.5,3.5,0,0,1,9,16a2.92,2.92,0,0,1,0,.51,3.42,3.42,0,0,1-.58,1.92L9,19H9l.85.85Zm-4-4.5A1.5,1.5,0,1,0,5.5,18,1.5,1.5,0,0,0,7,16.53Z"/>
</svg>
{__('Show a complete items list with faceted search.', 'tainacan')}
</p>
<Button
isPrimary
type="submit"
onClick={ () => listType == 'term' ? openTermModal() : openCollectionModal() }>
{ listType == 'term' ? __('Select a Term', 'tainacan') : __('Select a Collection', 'tainacan') }
</Button>
</Placeholder>
) :
(
<div style={{ fontSize: (baseFontSize - 2) + 'px' }}>
<div class="preview-warning">
{ __('Warning: this is just a demonstration. To see the items list, either preview or publish your post.', 'tainacan') }
</div>
<div
style={{
'--tainacan-background-color': backgroundColor,
'--tainacan-filter-menu-width-theme': filtersAreaWidth + '%',
'--tainacan-input-color': inputColor,
'--tainacan-input-background-color': inputBackgroundColor,
'--tainacan-input-border-color': inputBorderColor,
'--tainacan-label-color': labelColor,
'--tainacan-info-color': infoColor,
'--tainacan-heading-color': headingColor,
'--tainacan-skeleton-color': skeletonColor,
'--tainacan-item-background-color': itemBackgroundColor,
'--tainacan-item-hover-background-color': itemHoverBackgroundColor,
'--tainacan-item-heading-hover-background-color': itemHeadingHoverBackgroundColor,
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
class="items-list-placeholder">
<div class="search-control">
{
!hideSearch ?
<span class="fake-searchbar">
{ !hideAdvancedSearch ? <span class="fake-advanced-searchbar"></span> : null }
</span>
: null
}
{
showFiltersButtonInsideSearchControl && !hideHideFiltersButton ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
}
<span class="fake-button"><div class="fake-text"></div></span>
<span class="fake-button"> { !hideSortByButton ? <div class="fake-text"></div> : null }<div class="fake-icon"></div><div class="fake-text"></div></span>
{
!showInlineViewModeOptions ?
<span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span>
:
<div class="fake-buttons-group">
{ Array(3).fill().map( () => <div class="fake-button"><div class="fake-icon"></div></div> )}
{ showFullscreenWithViewModes ? <span class="fake-button"><div class="fake-icon"></div></span> : null }
</div>
}
{
!showFullscreenWithViewModes ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
}
{
!hideExposersButton ? <span class="fake-button"><div class="fake-icon"></div><div class="fake-text"></div></span> : null
}
</div>
<div class="below-search-control">
{ !showFiltersButtonInsideSearchControl & !hideHideFiltersButton && !hideFilters ? <span class="fake-hide-button"><div class="fake-icon"></div></span> : null }
{
!hideFilters && !filtersAsModal && !startWithFiltersHidden ?
<div
style={{
flexBasis: filtersAreaWidth + '%'
}}
class="filters">
<div class="fake-filters-heading"></div>
{ Array(2).fill().map( () => {
return <div class="fake-filter">
<span class="fake-text"></span>
<span class="fake-searchbar"></span>
</div>
} )}
<div class="fake-filter">
<span class="fake-text"></span>
<div class="fake-checkbox-list">
{ Array(4).fill().map( () => {
return <div>
<span class="fake-checkbox"></span>
<span class="fake-text"></span>
</div>
} ) }
<div class="fake-link"></div>
</div>
</div>
<div class="fake-filter">
<span class="fake-text"></span>
<span class="fake-searchbar"></span>
</div>
</div>
: null
}
<div class="aside-filters">
<div class="items">
{ Array(5).fill().map( () => {
return <div class="fake-item">
<div class="fake-item-header">
<div class="fake-text"></div>
</div>
<div
style={{
backgroundImage: tainacan_plugin ? 'url("' + tainacan_plugin.base_url + '/assets/images/placeholder_square.png")' : ''
}}
class="fake-item-thumb"></div>
{ Array(3).fill().map( () => <div class="fake-item-description"></div> ) }
</div>
} ) }
<div class="fake-item fake-item-hovered">
<div class="fake-item-header">
<div class="fake-tooltip"><div class="fake-link"></div></div>
<div class="fake-text"></div>
</div>
<div
style={{
backgroundImage: tainacan_plugin ? 'url("' + tainacan_plugin.base_url + '/assets/images/placeholder_square.png")' : ''
}}
class="fake-item-thumb"></div>
{ Array(3).fill().map( () => <div class="fake-item-description"></div> ) }
</div>
</div>
<div class="pagination">
<span class="fake-text"></span>
{ !hideItemsPerPageButton ? <span class="fake-button"><div class="fake-text"></div></span> : null }
{ !hideGoToPageButton ? <span class="fake-button"><div class="fake-text"></div></span> : null }
<div class="fake-buttons-group">
{ Array(6).fill().map( () => <div class="fake-link"></div> ) }
</div>
</div>
</div>
</div>
</div>
</div>
)
}
{ isCollectionModalOpen ?
<CollectionModal
existingCollectionId={ collectionId }
onSelectCollection={ (selectedCollectionId) => {
collectionId = selectedCollectionId;
setAttributes({
collectionId: collectionId,
isCollectionModalOpen: false
});
}}
onCancelSelection={ () => setAttributes({ isCollectionModalOpen: false }) }/>
: null
}
{ isTermModalOpen ?
<TermModal
existingTermId={ termId }
existingTaxonomyId={ taxonomyId }
onSelectTaxonomy={ (selectedTaxonomy) => {
taxonomyId = selectedTaxonomy;
setAttributes({ taxonomyId: selectedTaxonomy });
}}
onSelectTerm={ (selectedTermId) => {
termId = selectedTermId;
setAttributes({
termId: selectedTermId,
isTermModalOpen: false
});
}}
onCancelSelection={ () => setAttributes({ isTermModalOpen: false }) }/>
: null
}
</div>
);
},
save({ attributes, className }){
const {
termId,
taxonomyId,
collectionId,
defaultViewMode,
enabledViewModes,
hideFilters,
hideHideFiltersButton,
hideSearch,
hideAdvancedSearch,
hideSortByButton,
hideExposersButton,
hideItemsPerPageButton,
hideGoToPageButton,
showFiltersButtonInsideSearchControl,
startWithFiltersHidden,
filtersAsModal,
showInlineViewModeOptions,
showFullscreenWithViewModes,
listType,
backgroundColor,
baseFontSize,
filtersAreaWidth,
inputColor,
inputBackgroundColor,
inputBorderColor,
labelColor,
infoColor,
headingColor,
skeletonColor,
itemBackgroundColor,
itemHoverBackgroundColor,
itemHeadingHoverBackgroundColor,
primaryColor,
secondaryColor
} = attributes;
return <div
style={{
'font-size': baseFontSize + 'px',
'--tainacan-base-font-size': baseFontSize + 'px',
'--tainacan-background-color': backgroundColor,
'--tainacan-filter-menu-width-theme': filtersAreaWidth + '%',
'--tainacan-input-color': inputColor,
'--tainacan-input-background-color': inputBackgroundColor,
'--tainacan-input-border-color': inputBorderColor,
'--tainacan-label-color': labelColor,
'--tainacan-info-color': infoColor,
'--tainacan-heading-color': headingColor,
'--tainacan-skeleton-color': skeletonColor,
'--tainacan-item-background-color': itemBackgroundColor,
'--tainacan-item-hover-background-color': itemHoverBackgroundColor,
'--tainacan-item-heading-hover-background-color': itemHeadingHoverBackgroundColor,
'--tainacan-primary': primaryColor,
'--tainacan-secondary': secondaryColor
}}
className={ className }>
<main
term-id={ listType == 'term' ? termId : null }
taxonomy={ listType == 'term' ? 'tnc_tax_' + taxonomyId : null }
collection-id={ listType == 'collection' ? collectionId : null }
default-view-mode={ defaultViewMode }
enabled-view-modes={ enabledViewModes.toString() }
hide-filters = { hideFilters.toString() }
hide-hide-filters-button= { hideHideFiltersButton.toString() }
hide-search = { hideSearch.toString() }
hide-advanced-search = { hideAdvancedSearch.toString() }
hide-sort-by-button = { hideSortByButton.toString() }
hide-exposers-button = { hideExposersButton.toString() }
hide-items-per-page-button = { hideItemsPerPageButton.toString() }
hide-go-to-page-button = { hideGoToPageButton.toString() }
show-filters-button-inside-search-control = { showFiltersButtonInsideSearchControl.toString() }
start-with-filters-hidden = { startWithFiltersHidden.toString() }
filters-as-modal = { filtersAsModal.toString() }
show-inline-view-mode-options = { showInlineViewModeOptions.toString() }
show-fullscreen-with-view-modes = { showFullscreenWithViewModes.toString() }
id="tainacan-items-page">
</main>
</div>
}
});

509
src/views/gutenberg-blocks/tainacan-facets/faceted-search/term-modal.js Normal file
View File

@ -0,0 +1,509 @@
import tainacan from '../../js/axios.js';
const { __ } = wp.i18n;
const { TextControl, Button, Modal, SelectControl, RadioControl, Spinner } = wp.components;
export default class TermModal extends React.Component {
constructor(props) {
super(props);
// Initialize state
this.state = {
modalTerms: [],
totalModalTerms: 0,
termsPerPage: 24,
termOrder: 'asc',
searchTermName: '',
temporarySelectedTermId: '',
terms: [],
isLoadingTerms: false,
taxonomyId: undefined,
taxonomyName: '',
isLoadingTaxonomies: false,
modalTaxonomies: [],
taxonomyOrderBy: 'date-desc',
totalModalTaxonomies: 0,
taxonomyPage: 1,
temporaryTaxonomyId: '',
searchTaxonomyName: '',
taxonomies: [],
};
// Bind events
this.fetchTerms = this.fetchTerms.bind(this);
this.fetchModalTerms = this.fetchModalTerms.bind(this);
this.selectTemporaryTerm = this.selectTemporaryTerm.bind(this);
this.onSelectTerm = this.onSelectTerm.bind(this);
this.resetTaxonomies = this.resetTaxonomies.bind(this);
this.selectTaxonomy = this.selectTaxonomy.bind(this);
this.fetchTaxonomies = this.fetchTaxonomies.bind(this);
this.fetchModalTaxonomies = this.fetchModalTaxonomies.bind(this);
this.fetchTaxonomy = this.fetchTaxonomy.bind(this);
}
componentWillMount() {
this.setState({
taxonomyId: this.props.existingTaxonomyId,
temporarySelectedTermId: this.props.existingTermId
});
if (this.props.existingTaxonomyId != null && this.props.existingTaxonomyId != undefined) {
this.fetchTaxonomy(this.props.existingTaxonomyId);
this.fetchModalTerms(0, this.props.existingTaxonomyId);
} else {
this.setState({ taxonomyPage: 1 });
this.fetchModalTaxonomies();
}
}
// TERM RELATED --------------------------------------------------
selectTemporaryTerm(termId) {
this.setState({ temporarySelectedTermId: termId });
}
onSelectTerm() {
this.props.onSelectTerm(this.state.temporarySelectedTermId);
}
cancelSelection() {
this.setState({
modalTerms: [],
modalTaxonomies: []
});
this.props.onCancelSelection();
}
fetchTerms(name) {
let endpoint = '/taxonomy/'+ this.state.taxonomyId + '/terms/?order=' + this.state.termOrder + '&hideempty=0&number=' + this.state.termsPerPage;
if (name != undefined && name != '')
endpoint += '&searchterm=' + name;
tainacan.get(endpoint)
.then(response => {
let someTerms = response.data.map((term) => ({
name: term.name,
id: term.id,
url: term.url,
header_image: [{
src: term.header_image,
alt: term.name
}]
}));
this.setState({
isLoadingTerms: false,
terms: someTerms
});
return someTerms;
})
.catch(error => {
console.log('Error trying to fetch terms: ' + error);
});
}
fetchModalTerms(offset, taxonomyId) {
let someModalTerms = this.state.modalTerms;
if (offset <= 0)
someModalTerms = [];
let endpoint = '/taxonomy/'+ taxonomyId + '/terms/?order=' + this.state.termOrder + '&hideempty=0&number=' + this.state.termsPerPage + '&offset=' + offset;
this.setState({
isLoadingTerms: true,
modalTerms: someModalTerms
});
tainacan.get(endpoint)
.then(response => {
let otherModalTerms = this.state.modalTerms;
for (let term of response.data) {
otherModalTerms.push({
name: term.name,
id: term.id,
url: term.url,
header_image: [{
src: term.header_image,
alt: term.name
}]
});
}
this.setState({
isLoadingTerms: false,
modalTerms: otherModalTerms,
totalModalTerms: response.headers['x-wp-total']
});
return otherModalTerms;
})
.catch(error => {
console.log('Error trying to fetch terms: ' + error);
});
}
// TAXONOMY RELATED --------------------------------------------------
fetchModalTaxonomies() {
let someModalTaxonomies = this.state.modalTaxonomies;
if (this.state.taxonomyPage <= 1)
someModalTaxonomies = [];
let endpoint = '/taxonomies/?perpage=' + this.state.termsPerPage + '&paged=' + this.state.taxonomyPage;
if (this.state.taxonomyOrderBy == 'date')
endpoint += '&orderby=date&order=asc';
else if (this.state.taxonomyOrderBy == 'date-desc')
endpoint += '&orderby=date&order=desc';
else if (this.state.taxonomyOrderBy == 'title')
endpoint += '&orderby=title&order=asc';
else if (this.state.taxonomyOrderBy == 'title-desc')
endpoint += '&orderby=title&order=desc';
this.setState({
isLoadingTaxonomies: true,
taxonomyPage: this.state.taxonomyPage + 1,
modalTaxonomies: someModalTaxonomies
});
tainacan.get(endpoint)
.then(response => {
let otherModalTaxonomies = this.state.modalTaxonomies;
for (let taxonomy of response.data) {
otherModalTaxonomies.push({
name: taxonomy.name,
id: taxonomy.id
});
}
this.setState({
isLoadingTaxonomies: false,
modalTaxonomies: otherModalTaxonomies,
totalModalTaxonomies: response.headers['x-wp-total']
});
return otherModalTaxonomies;
})
.catch(error => {
console.log('Error trying to fetch taxonomies: ' + error);
});
}
fetchTaxonomy(taxonomyId) {
tainacan.get('/taxonomies/' + taxonomyId)
.then((response) => {
this.setState({ taxonomyName: response.data.name });
}).catch(error => {
console.log('Error trying to fetch taxonomy: ' + error);
});
}
selectTaxonomy(selectedTaxonomyId) {
this.setState({
taxonomyId: selectedTaxonomyId
});
this.props.onSelectTaxonomy(selectedTaxonomyId);
this.fetchTaxonomy(selectedTaxonomyId);
this.fetchModalTerms(0, selectedTaxonomyId);
}
fetchTaxonomies(name) {
this.setState({
isLoadingTaxonomies: true,
taxonomies: [],
terms: []
});
let endpoint = '/taxonomies/?perpage=' + this.state.termsPerPage;
if (name != undefined && name != '')
endpoint += '&search=' + name;
if (this.state.taxonomyOrderBy == 'date')
endpoint += '&orderby=date&order=asc';
else if (this.state.taxonomyOrderBy == 'date-desc')
endpoint += '&orderby=date&order=desc';
else if (this.state.taxonomyOrderBy == 'title')
endpoint += '&orderby=title&order=asc';
else if (this.state.taxonomyOrderBy == 'title-desc')
endpoint += '&orderby=title&order=desc';
tainacan.get(endpoint)
.then(response => {
let someTaxonomies = response.data.map((taxonomy) => ({ name: taxonomy.name, id: taxonomy.id + '' }));
this.setState({
isLoadingTaxonomies: false,
taxonomies: someTaxonomies
});
return someTaxonomies;
})
.catch(error => {
console.log('Error trying to fetch taxonomies: ' + error);
});
}
resetTaxonomies() {
this.setState({
taxonomyId: null,
taxonomyPage: 1,
modalTaxonomies: []
});
this.fetchModalTaxonomies();
}
render() {
return this.state.taxonomyId != null && this.state.taxonomyId != undefined ? (
// Terms modal
<Modal
className="wp-block-tainacan-modal"
title={__('Select the desired terms from taxonomy ' + this.state.taxonomyName, 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select terms', 'tainacan')}>
<div>
<div className="modal-search-area">
<TextControl
placeholder={ __('Search by term\'s name', 'tainacan') }
label={__('Search for a term', 'tainacan')}
value={ this.state.searchTermName }
onChange={(value) => {
this.setState({
searchTermName: value
});
_.debounce(this.fetchTerms(value), 300);
}}/>
<SelectControl
label={__('Order', 'tainacan')}
value={ this.state.termOrder }
options={ [
{ label: __('Name (A-Z)', 'tainacan'), value: 'asc' },
{ label: __('Name (Z-A)', 'tainacan'), value: 'desc' }
] }
onChange={ ( atermOrder ) => {
this.state.termOrder = atermOrder;
this.setState({
termOrder: this.state.termOrder
});
if (this.state.searchTermName && this.state.searchTermName != '') {
this.fetchTerms(this.state.searchTermName);
} else {
this.fetchModalTerms(0, this.state.taxonomyId);
}
}}/>
</div>
{(
this.state.searchTermName != '' ? (
this.state.terms.length > 0 ?
(
<div>
<ul className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporarySelectedTermId }
options={
this.state.terms.map((term) => {
return { label: term.name, value: '' + term.id }
})
}
onChange={ ( aTermId ) => {
this.selectTemporaryTerm(aTermId);
} } />
}
</ul>
{ this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> : null }
</div>
)
: this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no terms found.', 'tainacan') }</p>
</div>
) :
this.state.modalTerms.length > 0 ?
(
<div>
<ul className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporarySelectedTermId }
options={
this.state.modalTerms.map((term) => {
return { label: term.name, value: '' + term.id }
})
}
onChange={ ( aTermId ) => {
this.selectTemporaryTerm(aTermId);
} } />
}
</ul>
{ this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> : null }
<div className="modal-loadmore-section">
<p>{ __('Showing', 'tainacan') + " " + this.state.modalTerms.length + " " + __('of', 'tainacan') + " " + this.state.totalModalTerms + " " + __('terms', 'tainacan') + "."}</p>
{
this.state.modalTerms.length < this.state.totalModalTerms ? (
<Button
isDefault
isSmall
onClick={ () => this.fetchModalTerms(this.state.modalTerms.length, this.state.taxonomyId) }>
{__('Load more', 'tainacan')}
</Button>
) : null
}
</div>
</div>
) : this.state.isLoadingTerms ? <div class="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no terms found.', 'tainacan') }</p>
</div>
)}
<div className="modal-footer-area">
<Button
isDefault
onClick={ () => this.resetTaxonomies() }>
{__('Switch taxonomy', 'tainacan')}
</Button>
<Button
isPrimary
onClick={ () => this.onSelectTerm() }>
{__('Finish', 'tainacan')}
</Button>
</div>
</div>
</Modal>
) : (
// Taxonomies modal
<Modal
className="wp-block-tainacan-modal"
title={__('Select a taxonomy to fetch terms from', 'tainacan')}
onRequestClose={ () => this.cancelSelection() }
contentLabel={__('Select terms', 'tainacan')}>
<div>
<div className="modal-search-area">
<TextControl
placeholder={ __('Search by taxonomy name', 'tainacan') }
label={__('Search for a taxonomy', 'tainacan')}
value={ this.state.searchTaxonomyName }
onChange={(value) => {
this.setState({
searchTaxonomyName: value
});
_.debounce(this.fetchTaxonomies(value), 300);
}}/>
<SelectControl
label={__('Order by', 'tainacan')}
value={ this.state.taxonomyOrderBy }
options={ [
{ label: __('Latest', 'tainacan'), value: 'date-desc' },
{ label: __('Oldest', 'tainacan'), value: 'date' },
{ label: __('Name (A-Z)', 'tainacan'), value: 'title' },
{ label: __('Name (Z-A)', 'tainacan'), value: 'title-desc' }
] }
onChange={ ( ataxonomyOrderBy ) => {
this.state.taxonomyOrderBy = ataxonomyOrderBy;
this.state.taxonomyPage = 1;
this.setState({
taxonomyOrderBy: this.state.taxonomyOrderBy,
taxonomyPage: this.state.taxonomyPage
});
if (this.state.searchTaxonomyName && this.state.searchTaxonomyName != '') {
this.fetchTaxonomies(this.state.searchTaxonomyName);
} else {
this.fetchModalTaxonomies();
}
}}/>
</div>
{(
this.state.searchTaxonomyName != '' ? (
this.state.taxonomies.length > 0 ?
(
<div>
<div className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporaryTaxonomyId }
options={
this.state.taxonomies.map((taxonomy) => {
return { label: taxonomy.name, value: '' + taxonomy.id }
})
}
onChange={ ( aTaxonomyId ) => {
this.setState({ temporaryTaxonomyId: aTaxonomyId });
} } />
}
</div>
</div>
) :
this.state.isLoadingTaxonomies ? (
<div class="spinner-container"><Spinner /></div>
) :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no taxonomy found.', 'tainacan') }</p>
</div>
):
this.state.modalTaxonomies.length > 0 ?
(
<div>
<div className="modal-radio-list">
{
<RadioControl
selected={ this.state.temporaryTaxonomyId }
options={
this.state.modalTaxonomies.map((taxonomy) => {
return { label: taxonomy.name, value: '' + taxonomy.id }
})
}
onChange={ ( aTaxonomyId ) => {
this.setState({ temporaryTaxonomyId: aTaxonomyId });
} } />
}
</div>
<div className="modal-loadmore-section">
<p>{ __('Showing', 'tainacan') + " " + this.state.modalTaxonomies.length + " " + __('of', 'tainacan') + " " + this.state.totalModalTaxonomies + " " + __('taxonomies', 'tainacan') + "."}</p>
{
this.state.modalTaxonomies.length < this.state.totalModalTaxonomies ? (
<Button
isDefault
isSmall
onClick={ () => this.fetchModalTaxonomies() }>
{__('Load more', 'tainacan')}
</Button>
) : null
}
</div>
</div>
) : this.state.isLoadingTaxonomies ? <div class="spinner-container"><Spinner /></div> :
<div className="modal-loadmore-section">
<p>{ __('Sorry, no taxonomy found.', 'tainacan') }</p>
</div>
)}
<div className="modal-footer-area">
<Button
isDefault
onClick={ () => { this.cancelSelection() }}>
{__('Cancel', 'tainacan')}
</Button>
<Button
isPrimary
disabled={ this.state.temporaryTaxonomyId == undefined || this.state.temporaryTaxonomyId == null || this.state.temporaryTaxonomyId == ''}
onClick={ () => this.selectTaxonomy(this.state.temporaryTaxonomyId) }>
{__('Select terms', 'tainacan')}
</Button>
</div>
</div>
</Modal>
);
}
}

2
src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js
View File

@ -846,7 +846,7 @@ registerBlockType('tainacan/facets-list', {
blockId: {
type: String,
default: undefined
},
}
},
save({ attributes, className }){
const {

139
src/views/theme-search/js/theme-main.js
View File

@ -79,77 +79,80 @@ Vue.component('view-mode-slideshow', ViewModeSlideshow);
Vue.use(eventBusSearch, { store: store, router: routerTheme});
export const ThemeItemsListing = new Vue({
el: '#tainacan-items-page',
store,
router: routerTheme,
data: {
termId: '',
taxonomy: '',
collectionId: '',
defaultViewMode: '',
enabledViewModes: {},
hideFilters: false,
hideHideFiltersButton: false,
hideSearch: false,
hideAdvancedSearch: false,
hideSortByButton: false,
hideExposersButton: false,
hideItemsPerPageButton: false,
hideGoToPageButton: false,
startWithFiltersHidden: false,
filtersAsModal: false,
showInlineViewModeOptions: false,
showFullscreenWithViewModes: false
},
beforeMount () {
document.addEventListener("DOMContentLoaded", () => {
new Vue({
el: '#tainacan-items-page',
store,
router: routerTheme,
data: {
termId: '',
taxonomy: '',
collectionId: '',
defaultViewMode: '',
enabledViewModes: {},
hideFilters: false,
hideHideFiltersButton: false,
hideSearch: false,
hideAdvancedSearch: false,
hideSortByButton: false,
hideItemsPerPageButton: false,
hideGoToPageButton: false,
showFiltersButtonInsideSearchControl: false,
startWithFiltersHidden: false,
filtersAsModal: false,
showInlineViewModeOptions: false,
showFullscreenWithViewModes: false
},
beforeMount () {
// Collection or Term source settings
if (this.$el.attributes['collection-id'] != undefined)
this.collectionId = this.$el.attributes['collection-id'].value;
if (this.$el.attributes['term-id'] != undefined)
this.termId = this.$el.attributes['term-id'].value;
if (this.$el.attributes['taxonomy'] != undefined)
this.taxonomy = this.$el.attributes['taxonomy'].value;
// Collection or Term source settings
if (this.$el.attributes['collection-id'] != undefined)
this.collectionId = this.$el.attributes['collection-id'].value;
if (this.$el.attributes['term-id'] != undefined)
this.termId = this.$el.attributes['term-id'].value;
if (this.$el.attributes['taxonomy'] != undefined)
this.taxonomy = this.$el.attributes['taxonomy'].value;
// View Mode settings
if (this.$el.attributes['default-view-mode'] != undefined)
this.defaultViewMode = this.$el.attributes['default-view-mode'].value;
else
this.defaultViewMode = 'cards';
// View Mode settings
if (this.$el.attributes['default-view-mode'] != undefined)
this.defaultViewMode = this.$el.attributes['default-view-mode'].value;
else
this.defaultViewMode = 'cards';
if (this.$el.attributes['enabled-view-modes'] != undefined)
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
// Options related to hidding elements
if (this.$el.attributes['hide-filters'] != undefined)
this.hideFilters = this.$el.attributes['hide-filters'].value == 'true' ? true : false;
if (this.$el.attributes['hide-hide-filters-button'] != undefined)
this.hideHideFiltersButton = this.$el.attributes['hide-hide-filters-button'].value == 'true' ? true : false;
if (this.$el.attributes['hide-search'] != undefined)
this.hideSearch = this.$el.attributes['hide-search'].value == 'true' ? true : false;
if (this.$el.attributes['hide-advanced-search'] != undefined)
this.hideAdvancedSearch = this.$el.attributes['hide-advanced-search'].value == 'true' ? true : false;
if (this.$el.attributes['hide-sort-by-button'] != undefined)
this.hideSortByButton = this.$el.attributes['hide-sort-by-button'].value == 'true' ? true : false;
if (this.$el.attributes['hide-exposers-button'] != undefined)
this.hideExposersButton = this.$el.attributes['hide-exposers-button'].value == 'true' ? true : false
if (this.$el.attributes['hide-items-per-page-button'] != undefined)
this.hideItemsPerPageButton = this.$el.attributes['hide-items-per-page-button'].value == 'true' ? true : false;
if (this.$el.attributes['hide-go-to-page-button'] != undefined)
this.hideGoToPageButton = this.$el.attributes['hide-go-to-page-button'].value == 'true' ? true : false;
if (this.$el.attributes['enabled-view-modes'] != undefined)
this.enabledViewModes = this.$el.attributes['enabled-view-modes'].value.split(',');
// Options related to hidding elements
if (this.$el.attributes['hide-filters'] != undefined)
this.hideFilters = this.$el.attributes['hide-filters'].value;
if (this.$el.attributes['hide-hide-filters-button'] != undefined)
this.hideHideFiltersButton = this.$el.attributes['hide-hide-filters-button'].value;
if (this.$el.attributes['hide-search'] != undefined)
this.hideSearch = this.$el.attributes['hide-search'].value;
if (this.$el.attributes['hide-advanced-search'] != undefined)
this.hideAdvancedSearch = this.$el.attributes['hide-advanced-search'].value;
if (this.$el.attributes['hide-sort-by-button'] != undefined)
this.hideSortByButton = this.$el.attributes['hide-sort-by-button'].value;
if (this.$el.attributes['hide-exposers-button'] != undefined)
this.hideExposersButton = this.$el.attributes['hide-exposers-button'].value;
if (this.$el.attributes['hide-items-per-page-button'] != undefined)
this.hideItemsPerPageButton = this.$el.attributes['hide-items-per-page-button'].value;
if (this.$el.attributes['hide-go-to-page-button'] != undefined)
this.hideGoToPageButton = this.$el.attributes['hide-go-to-page-button'].value;
// Other Tweaks
if (this.$el.attributes['start-with-filters-hidden'] != undefined)
this.startWithFiltersHidden = this.$el.attributes['start-with-filters-hidden'].value;
if (this.$el.attributes['filters-as-modal'] != undefined)
this.filtersAsModal = this.$el.attributes['filters-as-modal'].value;
if (this.$el.attributes['show-inline-view-mode-options'] != undefined)
this.showInlineViewModeOptions = this.$el.attributes['show-inline-view-mode-options'].value;
if (this.$el.attributes['show-fullscreen-with-view-modes'] != undefined)
this.showFullscreenWithViewModes = this.$el.attributes['show-fullscreen-with-view-modes'].value;
},
render: h => h(ThemeSearch)
// Other Tweaks
if (this.$el.attributes['show-filters-button-inside-search-control'] != undefined)
this.showFiltersButtonInsideSearchControl = this.$el.attributes['show-filters-button-inside-search-control'].value == 'true' ? true : false;
if (this.$el.attributes['start-with-filters-hidden'] != undefined)
this.startWithFiltersHidden = this.$el.attributes['start-with-filters-hidden'].value == 'true' ? true : false;
if (this.$el.attributes['filters-as-modal'] != undefined)
this.filtersAsModal = this.$el.attributes['filters-as-modal'].value == 'true' ? true : false;
if (this.$el.attributes['show-inline-view-mode-options'] != undefined)
this.showInlineViewModeOptions = this.$el.attributes['show-inline-view-mode-options'].value == 'true' ? true : false;
if (this.$el.attributes['show-fullscreen-with-view-modes'] != undefined)
this.showFullscreenWithViewModes = this.$el.attributes['show-fullscreen-with-view-modes'].value == 'true' ? true : false;
},
render: h => h(ThemeSearch)
});
});
// Initialize Ponyfill for Custom CSS properties

123
src/views/theme-search/pages/theme-items-page.vue
View File

@ -29,7 +29,7 @@
aria-controls="filters-modal"
:aria-expanded="isFiltersModalActive"
:class="hideHideFiltersButton ? 'is-hidden-tablet' : ''"
v-if="!hideFilters && !openAdvancedSearch && !(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen)"
v-if="!showFiltersButtonInsideSearchControl && !hideFilters && !openAdvancedSearch && !(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].full_screen)"
id="filter-menu-compress-button"
:aria-label="!isFiltersModalActive ? $i18n.get('label_show_filters') : $i18n.get('label_hide_filters')"
@click="isFiltersModalActive = !isFiltersModalActive"
@ -58,22 +58,17 @@
<div
role="search"
class="search-area">
<div class="control has-icons-right is-small is-clearfix">
<input
class="input is-small"
:placeholder="$i18n.get('instruction_search')"
type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('items')"
:value="searchQuery"
@input="futureSearchQuery = $event.target.value"
@keyup.enter="updateSearch()">
<span
aria-controls="items-list-results"
@click="updateSearch()"
class="icon is-right">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-search"/>
</span>
</div>
<b-input
size="is-small"
:placeholder="$i18n.get('instruction_search')"
type="search"
:aria-label="$i18n.get('instruction_search') + ' ' + $i18n.get('items')"
:value="searchQuery"
@input.native="futureSearchQuery = $event.target.value"
@keyup.enter.native="updateSearch()"
icon-right="magnify"
icon-right-clickable
@icon-right-click="updateSearch()" />
<a
v-if="!hideAdvancedSearch"
@click="openAdvancedSearch = !openAdvancedSearch"
@ -84,6 +79,21 @@
</div>
</div>
<!-- Another option of the Button for hiding filters -->
<div
v-if="showFiltersButtonInsideSearchControl && !hideHideFiltersButton && !hideFilters && !openAdvancedSearch"
class="search-control-item">
<button
class="button is-white"
:aria-label="$i18n.get('filters')"
@click="isFiltersModalActive = !isFiltersModalActive">
<span class="gray-icon">
<i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-filters"/>
</span>
<span class="is-hidden-touch">{{ $i18n.get('filters') }}</span>
</button>
</div>
<!-- Displayed Metadata Dropdown -->
<div
v-if="(registeredViewModes[viewMode] != undefined && registeredViewModes[viewMode].dynamic_metadata)"
@ -541,6 +551,7 @@
hideItemsPerPageButton: false,
hideGoToPageButton: false,
// Other Tweaks
showFiltersButtonInsideSearchControl: false,
startWithFiltersHidden: false,
filtersAsModal: false,
showInlineViewModeOptions: false,
@ -702,13 +713,15 @@
if (this.$userPrefs.get(prefsViewMode) == undefined)
this.$eventBusSearch.setInitialViewMode(this.defaultViewMode);
else {
let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
if (existingViewModeIndex >= 0)
this.$eventBusSearch.setInitialViewMode(this.$userPrefs.get(prefsViewMode));
const userPrefViewMode = this.$userPrefs.get(prefsViewMode);
let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == userPrefViewMode);
let enabledViewModeIndex = this.enabledViewModes.findIndex((viewMode) => viewMode == userPrefViewMode);
if (existingViewModeIndex >= 0 && enabledViewModeIndex >= 0)
this.$eventBusSearch.setInitialViewMode(userPrefViewMode);
else
this.$eventBusSearch.setInitialViewMode(this.defaultViewMode);
}
// For view modes such as slides, we force pagination to request only 12 per page
let existingViewModeIndex = Object.keys(this.registeredViewModes).findIndex(viewMode => viewMode == this.$userPrefs.get(prefsViewMode));
if (existingViewModeIndex >= 0) {
@ -720,7 +733,7 @@
this.showItemsHiddingDueSortingDialog();
// Watches window resize to adjust filter's top position and compression on mobile
if (!this.hideFilters) {
if (!this.hideFilters) {
this.hideFiltersOnMobile();
window.addEventListener('resize', this.hideFiltersOnMobile);
}
@ -1183,29 +1196,6 @@
padding: 0;
}
.filters-menu {
border-right: 0;
.columns {
display: flex;
}
.taginput-container {
.control.has-icons-left .icon {
top: 5px;
}
}
.label {
font-size: 0.75em;
font-weight: normal;
}
.checkbox {
margin-bottom: 5px;
align-items: baseline;
}
}
#filter-menu-compress-button {
position: absolute;
z-index: 99;
@ -1304,7 +1294,7 @@
color: var(--tainacan-label-color);
font-size: 0.875em;
font-weight: normal;
margin-top: 3px;
margin-top: 2px;
margin-bottom: 2px;
cursor: default;
}
@ -1371,11 +1361,6 @@
.control {
width: 100%;
.icon {
pointer-events: all;
cursor: pointer;
color: var(--tainacan-blue5);
}
margin: -2px 0 5px 0;
}
.is-pulled-right {
@ -1383,9 +1368,6 @@
right: 0;
top: 100%;
}
.input {
border: 1px solid var(--tainacan-input-border-color);
}
a {
margin-left: 12px;
white-space: nowrap;
@ -1408,6 +1390,39 @@
}
}
.metadata-alert {
display: flex;
justify-content: space-between;
align-items: center;
margin: 6px $page-side-padding;
border-radius: 3px;
padding: 4px 12px;
color: var(--tainacan-yellow2);
background: var(--tainacan-yellow1);
animation-name: appear;
animation-duration: 0.5s;
p {
margin: 0 auto !important;
font-size: 0.885em;
}
&>div {
display: flex;
.button,
.button:hover,
.button:active,
.button:focus {
background: none !important;
color: var(--tainacan-yellow2) !important;
font-weight: bold;
border: none;
cursor: pointer;
}
}
}
#items-list-area {
position: relative;
height: 100%;

84
src/views/theme-search/theme-search.vue
View File

@ -14,6 +14,7 @@
:hide-exposers-button="$root.hideExposersButton ? $root.hideExposersButton : false"
:hide-items-per-page-button="$root.hideItemsPerPageButton ? $root.hideItemsPerPageButton : false"
:hide-go-to-page-button="$root.hideGoToPageButton ? $root.hideGoToPageButton : false"
:show-filters-button-inside-search-control="$root.showFiltersButtonInsideSearchControl ? $root.showFiltersButtonInsideSearchControl : false"
:start-with-filters-hidden="$root.startWithFiltersHidden ? $root.startWithFiltersHidden : false"
:filters-as-modal="$root.filtersAsModal ? $root.filtersAsModal : false"
:show-inline-view-mode-options="$root.showInlineViewModeOptions ? $root.showInlineViewModeOptions : false"
@ -25,7 +26,7 @@
export default {
name: "ThemeSearch",
created() {
this.$userPrefs.init();
this.$userPrefs.init();
}
}
</script>
@ -47,6 +48,7 @@ export default {
@import "../../../node_modules/buefy/src/scss/components/_loading.scss";
@import "../../../node_modules/buefy/src/scss/components/_dropdown.scss";
@import "../../../node_modules/buefy/src/scss/components/_modal.scss";
@import "../../../node_modules/buefy/src/scss/components/_dialog.scss";
@import "../../../node_modules/buefy/src/scss/components/_notices.scss";
@import "../../../node_modules/buefy/src/scss/components/_numberinput.scss";
@ -63,6 +65,7 @@ export default {
@import "../admin/scss/_selects.scss";
@import "../admin/scss/_dropdown-and-autocomplete.scss";
@import "../admin/scss/_tooltips.scss";
@import "../admin/scss/_control.scss";
@import "../admin/scss/_tainacan-form.scss";
@import "../admin/scss/_filters-menu-modal.scss";
@import "./scss/_layout.scss";
@ -74,6 +77,21 @@ export default {
position: relative;
-webkit-overflow-scrolling: touch;
* {
// For Firefox
scrollbar-color: var(--tainacan-gray3) transparent;
scrollbar-width: thin;
// For Chromium and related
&::-webkit-scrollbar {
width: 0.55em;
opacity: 0.8;
}
&::-webkit-scrollbar-thumb {
background-color: var(--tainacan-gray3);
}
}
h1,
h2,
h3,
@ -87,8 +105,11 @@ export default {
opacity: 0; // Will make it 1 once window.load is done;
}
a, a:not([href]){ color: var(--tainacan-secondary) }
a:hover, a:hover:not([href]) {
a, a:not([href]) {
color: var(--tainacan-secondary);
}
a:hover,
a:hover:not([href]) {
cursor: pointer;
color: var(--tainacan-secondary);
text-decoration: underline;
@ -97,18 +118,10 @@ export default {
list-style: none;
}
.dropdown {
display: inline-flex;
position: relative;
vertical-align: top;
}
// We need this because bootstrap messes up with this class
.dropdown-menu {
display: block;
}
.dropdown .dropdown-trigger .button .icon,
.autocomplete .dropdown-trigger .button .icon {
align-items: center;
}
.dropdown.is-inline .dropdown-content {
display: flex;
border: none;
@ -121,53 +134,6 @@ export default {
}
}
}
.collapse-all {
font-size: 0.75em;
}
.collapse .collapse-trigger {
display: inline;
cursor: pointer;
.label {
vertical-align: middle;
margin-bottom: 0px;
}
}
.metadata-alert {
display: flex;
justify-content: space-between;
align-items: center;
margin: 6px $page-side-padding;
border-radius: 3px;
padding: 4px 12px;
color: var(--tainacan-yellow2);
background: var(--tainacan-yellow1);
animation-name: appear;
animation-duration: 0.5s;
p {
margin: 0 auto;
}
&>div {
display: flex;
.button,
.button:hover,
.button:active,
.button:focus {
background: none;
color:var(--tainacan-yellow2);
font-weight: bold;
border: none;
cursor: pointer;
}
}
}
.b-checkbox.checkbox.is-small {
font-size: 1em;
}
}
.loading-overlay {
min-height: auto !important;

4
webpack.config.js
View File

@ -29,7 +29,9 @@ module.exports = {
block_facets_list: './src/views/gutenberg-blocks/tainacan-facets/facets-list/index.js',
block_facets_list_theme: './src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list-theme.js',
block_faceted_search: './src/views/gutenberg-blocks/tainacan-facets/faceted-search/index.js',
block_carousel_terms_list: './src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/index.js',
block_carousel_terms_list_theme: './src/views/gutenberg-blocks/tainacan-terms/carousel-terms-list/carousel-terms-list-theme.js'