Merge branch 'develop' into 396-test-render-html
This commit is contained in:
vnmedeiros
commit
4a35a8a960
|
|
@ -12,31 +12,33 @@ sass -E 'UTF-8' --cache-location .tmp/sass-cache-1 src/views/admin/scss/tainacan
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-2 src/views/roles/tainacan-roles.scss:src/assets/css/tainacan-roles.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-2 src/views/roles/tainacan-roles.scss:src/assets/css/tainacan-roles.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-3 src/views/gutenberg-blocks/tainacan-collections/collections-list/collections-list.scss:src/assets/css/tainacan-gutenberg-block-collections-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-3 src/views/media-component/media-component.scss:src/assets/css/media-component.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-4 src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-4 src/views/gutenberg-blocks/tainacan-collections/collections-list/collections-list.scss:src/assets/css/tainacan-gutenberg-block-collections-list.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-5 src/views/gutenberg-blocks/tainacan-items/items-list/items-list.scss:src/assets/css/tainacan-gutenberg-block-items-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-5 src/views/gutenberg-blocks/tainacan-collections/carousel-collections-list/carousel-collections-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-collections-list.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-6 src/views/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss:src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-6 src/views/gutenberg-blocks/tainacan-items/items-list/items-list.scss:src/assets/css/tainacan-gutenberg-block-items-list.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-7 src/views/gutenberg-blocks/tainacan-items/search-bar/search-bar.scss:src/assets/css/tainacan-gutenberg-block-search-bar.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-7 src/views/gutenberg-blocks/tainacan-items/dynamic-items-list/dynamic-items-list.scss:src/assets/css/tainacan-gutenberg-block-dynamic-items-list.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-8 src/views/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-8 src/views/gutenberg-blocks/tainacan-items/search-bar/search-bar.scss:src/assets/css/tainacan-gutenberg-block-search-bar.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-9 src/views/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-9 src/views/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-10 src/views/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss:src/assets/css/tainacan-gutenberg-block-terms-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-10 src/views/gutenberg-blocks/tainacan-items/carousel-items-list/carousel-items-list.scss:src/assets/css/tainacan-gutenberg-block-carousel-items-list.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-11 src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list.scss:src/assets/css/tainacan-gutenberg-block-facets-list.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-11 src/views/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss:src/assets/css/tainacan-gutenberg-block-terms-list.css
|
||||||
|
|
||||||
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-12 src/views/gutenberg-blocks/tainacan-facets/facets-list/facets-list.scss:src/assets/css/tainacan-gutenberg-block-facets-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
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-13 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-14 src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss:src/assets/css/tainacan-gutenberg-block-item-submission-form.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-14 src/views/gutenberg-blocks/tainacan-facets/faceted-search/faceted-search.scss:src/assets/css/tainacan-gutenberg-block-faceted-search.css
|
||||||
|
|
||||||
sass -E 'UTF-8' --cache-location .tmp/sass-cache-15 src/views/gutenberg-blocks/gutenberg-blocks-style.scss:src/assets/css/tainacan-gutenberg-block-common-styles.css
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-15 src/views/gutenberg-blocks/tainacan-items/item-submission-form/item-submission-form.scss:src/assets/css/tainacan-gutenberg-block-item-submission-form.css
|
||||||
|
|
||||||
|
sass -E 'UTF-8' --cache-location .tmp/sass-cache-16 src/views/gutenberg-blocks/gutenberg-blocks-style.scss:src/assets/css/tainacan-gutenberg-block-common-styles.css
|
||||||
|
|
||||||
echo "Compilação do Sass Concluído!"
|
echo "Compilação do Sass Concluído!"
|
||||||
exit 0
|
exit 0
|
||||||
|
|
|
||||||
|
|
@ -3513,18 +3513,32 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"elliptic": {
|
"elliptic": {
|
||||||
"version": "6.5.3",
|
"version": "6.5.4",
|
||||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
|
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
|
||||||
"integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
|
"integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"bn.js": "^4.4.0",
|
"bn.js": "^4.11.9",
|
||||||
"brorand": "^1.0.1",
|
"brorand": "^1.1.0",
|
||||||
"hash.js": "^1.0.0",
|
"hash.js": "^1.0.0",
|
||||||
"hmac-drbg": "^1.0.0",
|
"hmac-drbg": "^1.0.1",
|
||||||
"inherits": "^2.0.1",
|
"inherits": "^2.0.4",
|
||||||
"minimalistic-assert": "^1.0.0",
|
"minimalistic-assert": "^1.0.1",
|
||||||
"minimalistic-crypto-utils": "^1.0.0"
|
"minimalistic-crypto-utils": "^1.0.1"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"bn.js": {
|
||||||
|
"version": "4.12.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/bn.js/-/bn.js-4.12.0.tgz",
|
||||||
|
"integrity": "sha512-c98Bf3tPniI+scsdk237ku1Dc3ujXQTSgyiPUDEOe7tRkhrqridvh8klBv0HCEso1OLOYcHuCv/cS6DNxKH+ZA==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
|
"inherits": {
|
||||||
|
"version": "2.0.4",
|
||||||
|
"resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz",
|
||||||
|
"integrity": "sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==",
|
||||||
|
"dev": true
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"emoji-regex": {
|
"emoji-regex": {
|
||||||
|
|
@ -7539,6 +7553,11 @@
|
||||||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||||
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
|
"integrity": "sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns="
|
||||||
},
|
},
|
||||||
|
"photoswipe": {
|
||||||
|
"version": "4.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/photoswipe/-/photoswipe-4.1.3.tgz",
|
||||||
|
"integrity": "sha512-89Z43IRUyw7ycTolo+AaiDn3W1EEIfox54hERmm9bI12IB9cvRfHSHez3XhAyU8XW2EAFrC+2sKMhh7SJwn0bA=="
|
||||||
|
},
|
||||||
"pify": {
|
"pify": {
|
||||||
"version": "2.3.0",
|
"version": "2.3.0",
|
||||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||||
|
|
@ -11925,9 +11944,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"y18n": {
|
"y18n": {
|
||||||
"version": "4.0.0",
|
"version": "4.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz",
|
||||||
"integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w=="
|
"integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ=="
|
||||||
},
|
},
|
||||||
"yallist": {
|
"yallist": {
|
||||||
"version": "2.1.2",
|
"version": "2.1.2",
|
||||||
|
|
|
||||||
|
|
@ -8,14 +8,15 @@
|
||||||
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
|
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"blurhash": "^1.1.3",
|
|
||||||
"axios": "^0.21.1",
|
"axios": "^0.21.1",
|
||||||
|
"blurhash": "^1.1.3",
|
||||||
"buefy": "^0.9.4",
|
"buefy": "^0.9.4",
|
||||||
"bulma": "^0.9.1",
|
"bulma": "^0.9.1",
|
||||||
"css-vars-ponyfill": "^2.3.1",
|
"css-vars-ponyfill": "^2.3.1",
|
||||||
"mdi": "^2.2.43",
|
"mdi": "^2.2.43",
|
||||||
"moment": "^2.25.3",
|
"moment": "^2.25.3",
|
||||||
"node-sass": "^4.14.1",
|
"node-sass": "^4.14.1",
|
||||||
|
"photoswipe": "^4.1.3",
|
||||||
"qs": "^6.9.4",
|
"qs": "^6.9.4",
|
||||||
"react": "^16.13.1",
|
"react": "^16.13.1",
|
||||||
"react-dom": "^16.13.1",
|
"react-dom": "^16.13.1",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,896 @@
|
||||||
|
/*! PhotoSwipe main CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||||
|
/*
|
||||||
|
Styles for basic PhotoSwipe functionality (sliding area, open/close transitions)
|
||||||
|
*/
|
||||||
|
/* pswp = photoswipe */
|
||||||
|
.pswp {
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
z-index: 9999999;
|
||||||
|
-webkit-text-size-adjust: 100%;
|
||||||
|
/* create separate layer, to avoid paint on window.onscroll in webkit/blink */
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
outline: none; }
|
||||||
|
.pswp * {
|
||||||
|
box-sizing: border-box; }
|
||||||
|
.pswp img {
|
||||||
|
max-width: none; }
|
||||||
|
|
||||||
|
/* style is added when JS option showHideOpacity is set to true */
|
||||||
|
.pswp--animate_opacity {
|
||||||
|
/* 0.001, because opacity:0 doesn't trigger Paint action, which causes lag at start of transition */
|
||||||
|
opacity: 0.001;
|
||||||
|
will-change: opacity;
|
||||||
|
/* for open/close transition */
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
.pswp--open {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.pswp--zoom-allowed .pswp__img {
|
||||||
|
/* autoprefixer: off */
|
||||||
|
cursor: -webkit-zoom-in;
|
||||||
|
cursor: -moz-zoom-in;
|
||||||
|
cursor: zoom-in; }
|
||||||
|
|
||||||
|
.pswp--zoomed-in .pswp__img {
|
||||||
|
/* autoprefixer: off */
|
||||||
|
cursor: -webkit-grab;
|
||||||
|
cursor: -moz-grab;
|
||||||
|
cursor: grab; }
|
||||||
|
|
||||||
|
.pswp--dragging .pswp__img {
|
||||||
|
/* autoprefixer: off */
|
||||||
|
cursor: -webkit-grabbing;
|
||||||
|
cursor: -moz-grabbing;
|
||||||
|
cursor: grabbing; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Background is added as a separate element.
|
||||||
|
As animating opacity is much faster than animating rgba() background-color.
|
||||||
|
*/
|
||||||
|
.pswp__bg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: rgba(0, 0, 0, 0.8);
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateZ(0);
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: opacity; }
|
||||||
|
|
||||||
|
.pswp__scroll-wrap {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
overflow: hidden; }
|
||||||
|
|
||||||
|
.pswp__container,
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
-ms-touch-action: none;
|
||||||
|
touch-action: none;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0; }
|
||||||
|
|
||||||
|
/* Prevent selection and tap highlights */
|
||||||
|
.pswp__container,
|
||||||
|
.pswp__img {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||||
|
-webkit-touch-callout: none; }
|
||||||
|
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
-webkit-transform-origin: left top;
|
||||||
|
-moz-transform-origin: left top;
|
||||||
|
-ms-transform-origin: left top;
|
||||||
|
transform-origin: left top;
|
||||||
|
/* for open/close transition */
|
||||||
|
transition: transform 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
.pswp__bg {
|
||||||
|
will-change: opacity;
|
||||||
|
/* for open/close transition */
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
.pswp--animated-in .pswp__bg,
|
||||||
|
.pswp--animated-in .pswp__zoom-wrap {
|
||||||
|
-webkit-transition: none;
|
||||||
|
transition: none; }
|
||||||
|
|
||||||
|
.pswp__container,
|
||||||
|
.pswp__zoom-wrap {
|
||||||
|
-webkit-backface-visibility: hidden; }
|
||||||
|
|
||||||
|
.pswp__item {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
overflow: hidden; }
|
||||||
|
|
||||||
|
.pswp__img {
|
||||||
|
position: absolute;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
top: 0;
|
||||||
|
left: 0; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
stretched thumbnail or div placeholder element (see below)
|
||||||
|
style is added to avoid flickering in webkit/blink when layers overlap
|
||||||
|
*/
|
||||||
|
.pswp__img--placeholder {
|
||||||
|
-webkit-backface-visibility: hidden; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
div element that matches size of large image
|
||||||
|
large image loads on top of it
|
||||||
|
*/
|
||||||
|
.pswp__img--placeholder--blank {
|
||||||
|
background: #222; }
|
||||||
|
|
||||||
|
.pswp--ie .pswp__img {
|
||||||
|
width: 100% !important;
|
||||||
|
height: auto !important;
|
||||||
|
left: 0;
|
||||||
|
top: 0; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Error message appears when image is not loaded
|
||||||
|
(JS option errorMsg controls markup)
|
||||||
|
*/
|
||||||
|
.pswp__error-msg {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 50%;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 16px;
|
||||||
|
margin-top: -8px;
|
||||||
|
color: #CCC; }
|
||||||
|
|
||||||
|
.pswp__error-msg a {
|
||||||
|
color: #CCC;
|
||||||
|
text-decoration: underline; }
|
||||||
|
|
||||||
|
/*! PhotoSwipe Default UI CSS by Dmitry Semenov | photoswipe.com | MIT license */
|
||||||
|
/*
|
||||||
|
|
||||||
|
Contents:
|
||||||
|
|
||||||
|
1. Buttons
|
||||||
|
2. Share modal and links
|
||||||
|
3. Index indicator ("1 of X" counter)
|
||||||
|
4. Caption
|
||||||
|
5. Loading indicator
|
||||||
|
6. Additional styles (root element, top bar, idle state, hidden state, etc.)
|
||||||
|
|
||||||
|
*/
|
||||||
|
/*
|
||||||
|
|
||||||
|
1. Buttons
|
||||||
|
|
||||||
|
*/
|
||||||
|
/* <button> css reset */
|
||||||
|
.pswp__button {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
position: relative;
|
||||||
|
background: none;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: visible;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
display: block;
|
||||||
|
border: 0;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
float: right;
|
||||||
|
opacity: 0.75;
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
box-shadow: none; }
|
||||||
|
.pswp__button:focus, .pswp__button:hover {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp__button:active {
|
||||||
|
outline: none;
|
||||||
|
opacity: 0.9; }
|
||||||
|
.pswp__button::-moz-focus-inner {
|
||||||
|
padding: 0;
|
||||||
|
border: 0; }
|
||||||
|
|
||||||
|
/* pswp__ui--over-close class it added when mouse is over element that should close gallery */
|
||||||
|
.pswp__ui--over-close .pswp__button--close {
|
||||||
|
opacity: 1; }
|
||||||
|
|
||||||
|
.pswp__button,
|
||||||
|
.pswp__button--arrow--left:before,
|
||||||
|
.pswp__button--arrow--right:before {
|
||||||
|
background: url(../images/default-skin.png) 0 0 no-repeat;
|
||||||
|
background-size: 264px 88px;
|
||||||
|
width: 44px;
|
||||||
|
height: 44px; }
|
||||||
|
|
||||||
|
@media (-webkit-min-device-pixel-ratio: 1.1), (min-resolution: 105dpi), (min-resolution: 1.1dppx) {
|
||||||
|
/* Serve SVG sprite if browser supports SVG and resolution is more than 105dpi */
|
||||||
|
.pswp--svg .pswp__button,
|
||||||
|
.pswp--svg .pswp__button--arrow--left:before,
|
||||||
|
.pswp--svg .pswp__button--arrow--right:before {
|
||||||
|
background-image: url(../images/default-skin.svg); }
|
||||||
|
|
||||||
|
.pswp--svg .pswp__button--arrow--left,
|
||||||
|
.pswp--svg .pswp__button--arrow--right {
|
||||||
|
background: none; } }
|
||||||
|
.pswp__button--close {
|
||||||
|
background-position: 0 -44px; }
|
||||||
|
|
||||||
|
.pswp__button--share {
|
||||||
|
background-position: -44px -44px; }
|
||||||
|
|
||||||
|
.pswp__button--fs {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.pswp--supports-fs .pswp__button--fs {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.pswp--fs .pswp__button--fs {
|
||||||
|
background-position: -44px 0; }
|
||||||
|
|
||||||
|
.pswp__button--zoom {
|
||||||
|
display: none;
|
||||||
|
background-position: -88px 0; }
|
||||||
|
|
||||||
|
.pswp--zoom-allowed .pswp__button--zoom {
|
||||||
|
display: block; }
|
||||||
|
|
||||||
|
.pswp--zoomed-in .pswp__button--zoom {
|
||||||
|
background-position: -132px 0; }
|
||||||
|
|
||||||
|
/* no arrows on touch screens */
|
||||||
|
.pswp--touch .pswp__button--arrow--left,
|
||||||
|
.pswp--touch .pswp__button--arrow--right {
|
||||||
|
visibility: hidden; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
Arrow buttons hit area
|
||||||
|
(icon is added to :before pseudo-element)
|
||||||
|
*/
|
||||||
|
.pswp__button--arrow--left,
|
||||||
|
.pswp__button--arrow--right {
|
||||||
|
background: none;
|
||||||
|
top: 50%;
|
||||||
|
margin-top: -50px;
|
||||||
|
width: 70px;
|
||||||
|
height: 100px;
|
||||||
|
position: absolute; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--left {
|
||||||
|
left: 0; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--right {
|
||||||
|
right: 0; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--left:before,
|
||||||
|
.pswp__button--arrow--right:before {
|
||||||
|
content: '';
|
||||||
|
top: 35px;
|
||||||
|
background-color: rgba(0, 0, 0, 0.3);
|
||||||
|
height: 30px;
|
||||||
|
width: 32px;
|
||||||
|
position: absolute; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--left:before {
|
||||||
|
left: 6px;
|
||||||
|
background-position: -138px -44px; }
|
||||||
|
|
||||||
|
.pswp__button--arrow--right:before {
|
||||||
|
right: 6px;
|
||||||
|
background-position: -94px -44px; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
2. Share modal/popup and links
|
||||||
|
|
||||||
|
*/
|
||||||
|
.pswp__counter,
|
||||||
|
.pswp__share-modal {
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-moz-user-select: none;
|
||||||
|
user-select: none; }
|
||||||
|
|
||||||
|
.pswp__share-modal {
|
||||||
|
display: block;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
padding: 10px;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 10000099;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.25s ease-out;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: opacity; }
|
||||||
|
|
||||||
|
.pswp__share-modal--hidden {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.pswp__share-tooltip {
|
||||||
|
z-index: 10000119;
|
||||||
|
position: absolute;
|
||||||
|
background: #FFF;
|
||||||
|
top: 56px;
|
||||||
|
border-radius: 2px;
|
||||||
|
display: block;
|
||||||
|
width: auto;
|
||||||
|
right: 44px;
|
||||||
|
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25);
|
||||||
|
transform: translateY(6px);
|
||||||
|
transition: transform 0.25s;
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: transform; }
|
||||||
|
.pswp__share-tooltip a {
|
||||||
|
display: block;
|
||||||
|
padding: 8px 12px;
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 18px; }
|
||||||
|
.pswp__share-tooltip a:hover {
|
||||||
|
text-decoration: none;
|
||||||
|
color: #000; }
|
||||||
|
.pswp__share-tooltip a:first-child {
|
||||||
|
/* round corners on the first/last list item */
|
||||||
|
border-radius: 2px 2px 0 0; }
|
||||||
|
.pswp__share-tooltip a:last-child {
|
||||||
|
border-radius: 0 0 2px 2px; }
|
||||||
|
|
||||||
|
.pswp__share-modal--fade-in {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp__share-modal--fade-in .pswp__share-tooltip {
|
||||||
|
transform: translateY(0); }
|
||||||
|
|
||||||
|
/* increase size of share links on touch devices */
|
||||||
|
.pswp--touch .pswp__share-tooltip a {
|
||||||
|
padding: 16px 12px; }
|
||||||
|
|
||||||
|
a.pswp__share--facebook:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 0;
|
||||||
|
height: 0;
|
||||||
|
position: absolute;
|
||||||
|
top: -12px;
|
||||||
|
right: 15px;
|
||||||
|
border: 6px solid rgba(0, 0, 0, 0);
|
||||||
|
border-bottom-color: #FFF;
|
||||||
|
-webkit-pointer-events: none;
|
||||||
|
-moz-pointer-events: none;
|
||||||
|
pointer-events: none; }
|
||||||
|
a.pswp__share--facebook:hover {
|
||||||
|
background: #3E5C9A;
|
||||||
|
color: #FFF; }
|
||||||
|
a.pswp__share--facebook:hover:before {
|
||||||
|
border-bottom-color: #3E5C9A; }
|
||||||
|
|
||||||
|
a.pswp__share--twitter:hover {
|
||||||
|
background: #55ACEE;
|
||||||
|
color: #FFF; }
|
||||||
|
|
||||||
|
a.pswp__share--pinterest:hover {
|
||||||
|
background: #CCC;
|
||||||
|
color: #CE272D; }
|
||||||
|
|
||||||
|
a.pswp__share--download:hover {
|
||||||
|
background: #DDD; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
3. Index indicator ("1 of X" counter)
|
||||||
|
|
||||||
|
*/
|
||||||
|
.pswp__counter {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 44px;
|
||||||
|
font-size: 13px;
|
||||||
|
line-height: 44px;
|
||||||
|
color: #FFF;
|
||||||
|
opacity: 0.75;
|
||||||
|
padding: 0 10px; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
4. Caption
|
||||||
|
|
||||||
|
*/
|
||||||
|
.pswp__caption {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
bottom: 0;
|
||||||
|
width: 100%;
|
||||||
|
min-height: 44px; }
|
||||||
|
.pswp__caption small {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #BBB; }
|
||||||
|
|
||||||
|
.pswp__caption__center {
|
||||||
|
text-align: left;
|
||||||
|
max-width: 420px;
|
||||||
|
margin: 0 auto;
|
||||||
|
font-size: 13px;
|
||||||
|
padding: 10px;
|
||||||
|
line-height: 20px;
|
||||||
|
color: #CCC; }
|
||||||
|
|
||||||
|
.pswp__caption--empty {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
/* Fake caption element, used to calculate height of next/prev image */
|
||||||
|
.pswp__caption--fake {
|
||||||
|
visibility: hidden; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
5. Loading indicator (preloader)
|
||||||
|
|
||||||
|
You can play with it here - http://codepen.io/dimsemenov/pen/yyBWoR
|
||||||
|
|
||||||
|
*/
|
||||||
|
.pswp__preloader {
|
||||||
|
width: 44px;
|
||||||
|
height: 44px;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 50%;
|
||||||
|
margin-left: -22px;
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity 0.25s ease-out;
|
||||||
|
will-change: opacity;
|
||||||
|
direction: ltr; }
|
||||||
|
|
||||||
|
.pswp__preloader__icn {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
margin: 12px; }
|
||||||
|
|
||||||
|
.pswp__preloader--active {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp__preloader--active .pswp__preloader__icn {
|
||||||
|
/* We use .gif in browsers that don't support CSS animation */
|
||||||
|
background: url(../images/preloader.gif) 0 0 no-repeat; }
|
||||||
|
|
||||||
|
.pswp--css_animation .pswp__preloader--active {
|
||||||
|
opacity: 1; }
|
||||||
|
.pswp--css_animation .pswp__preloader--active .pswp__preloader__icn {
|
||||||
|
animation: clockwise 500ms linear infinite; }
|
||||||
|
.pswp--css_animation .pswp__preloader--active .pswp__preloader__donut {
|
||||||
|
animation: donut-rotate 1000ms cubic-bezier(0.4, 0, 0.22, 1) infinite; }
|
||||||
|
.pswp--css_animation .pswp__preloader__icn {
|
||||||
|
background: none;
|
||||||
|
opacity: 0.75;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
position: absolute;
|
||||||
|
left: 15px;
|
||||||
|
top: 15px;
|
||||||
|
margin: 0; }
|
||||||
|
.pswp--css_animation .pswp__preloader__cut {
|
||||||
|
/*
|
||||||
|
The idea of animating inner circle is based on Polymer ("material") loading indicator
|
||||||
|
by Keanu Lee https://blog.keanulee.com/2014/10/20/the-tale-of-three-spinners.html
|
||||||
|
*/
|
||||||
|
position: relative;
|
||||||
|
width: 7px;
|
||||||
|
height: 14px;
|
||||||
|
overflow: hidden; }
|
||||||
|
.pswp--css_animation .pswp__preloader__donut {
|
||||||
|
box-sizing: border-box;
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
border: 2px solid #FFF;
|
||||||
|
border-radius: 50%;
|
||||||
|
border-left-color: transparent;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
background: none;
|
||||||
|
margin: 0; }
|
||||||
|
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.pswp__preloader {
|
||||||
|
position: relative;
|
||||||
|
left: auto;
|
||||||
|
top: auto;
|
||||||
|
margin: 0;
|
||||||
|
float: right; } }
|
||||||
|
@keyframes clockwise {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0deg); }
|
||||||
|
100% {
|
||||||
|
transform: rotate(360deg); } }
|
||||||
|
@keyframes donut-rotate {
|
||||||
|
0% {
|
||||||
|
transform: rotate(0); }
|
||||||
|
50% {
|
||||||
|
transform: rotate(-140deg); }
|
||||||
|
100% {
|
||||||
|
transform: rotate(0); } }
|
||||||
|
/*
|
||||||
|
|
||||||
|
6. Additional styles
|
||||||
|
|
||||||
|
*/
|
||||||
|
/* root element of UI */
|
||||||
|
.pswp__ui {
|
||||||
|
-webkit-font-smoothing: auto;
|
||||||
|
visibility: visible;
|
||||||
|
opacity: 1;
|
||||||
|
z-index: 10000049; }
|
||||||
|
|
||||||
|
/* top black bar with buttons and "1 of X" indicator */
|
||||||
|
.pswp__top-bar {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
height: 44px;
|
||||||
|
width: 100%; }
|
||||||
|
|
||||||
|
.pswp__caption,
|
||||||
|
.pswp__top-bar,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--left,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--right {
|
||||||
|
-webkit-backface-visibility: hidden;
|
||||||
|
will-change: opacity;
|
||||||
|
transition: opacity 333ms cubic-bezier(0.4, 0, 0.22, 1); }
|
||||||
|
|
||||||
|
/* pswp--has_mouse class is added only when two subsequent mousemove events occur */
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--left,
|
||||||
|
.pswp--has_mouse .pswp__button--arrow--right {
|
||||||
|
visibility: visible; }
|
||||||
|
|
||||||
|
.pswp__top-bar,
|
||||||
|
.pswp__caption {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5); }
|
||||||
|
|
||||||
|
/* pswp__ui--fit class is added when main image "fits" between top bar and bottom bar (caption) */
|
||||||
|
.pswp__ui--fit .pswp__top-bar,
|
||||||
|
.pswp__ui--fit .pswp__caption {
|
||||||
|
background-color: rgba(0, 0, 0, 0.3); }
|
||||||
|
|
||||||
|
/* pswp__ui--idle class is added when mouse isn't moving for several seconds (JS option timeToIdle) */
|
||||||
|
.pswp__ui--idle .pswp__top-bar {
|
||||||
|
opacity: 0; }
|
||||||
|
.pswp__ui--idle .pswp__button--arrow--left,
|
||||||
|
.pswp__ui--idle .pswp__button--arrow--right {
|
||||||
|
opacity: 0; }
|
||||||
|
|
||||||
|
/*
|
||||||
|
pswp__ui--hidden class is added when controls are hidden
|
||||||
|
e.g. when user taps to toggle visibility of controls
|
||||||
|
*/
|
||||||
|
.pswp__ui--hidden .pswp__top-bar,
|
||||||
|
.pswp__ui--hidden .pswp__caption,
|
||||||
|
.pswp__ui--hidden .pswp__button--arrow--left,
|
||||||
|
.pswp__ui--hidden .pswp__button--arrow--right {
|
||||||
|
/* Force paint & create composition layer for controls. */
|
||||||
|
opacity: 0.001; }
|
||||||
|
|
||||||
|
/* pswp__ui--one-slide class is added when there is just one item in gallery */
|
||||||
|
.pswp__ui--one-slide .pswp__button--arrow--left,
|
||||||
|
.pswp__ui--one-slide .pswp__button--arrow--right,
|
||||||
|
.pswp__ui--one-slide .pswp__counter {
|
||||||
|
display: none; }
|
||||||
|
|
||||||
|
.pswp__element--disabled {
|
||||||
|
display: none !important; }
|
||||||
|
|
||||||
|
.pswp--minimal--dark .pswp__top-bar {
|
||||||
|
background: none; }
|
||||||
|
|
||||||
|
.tainacan-media-component {
|
||||||
|
--swiper-theme-color: var(--tainacan-secondary, #298596);
|
||||||
|
--swiper-navigation-size: 44px;
|
||||||
|
--tainacan-media-background: var(--tainacan-background-color, #ffffff);
|
||||||
|
--tainacan-media-main-carousel-height: 60vh;
|
||||||
|
--tainacan-media-main-carousel-width: 100%;
|
||||||
|
--tainacan-media-thumbs-carousel-width: 100%;
|
||||||
|
--tainacan-media-thumbs-carousel-item-size: 136px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
background-color: var(--tainacan-media-background, #ffffff); }
|
||||||
|
|
||||||
|
/* Style valid for both cases of carousel, main and thumbs */
|
||||||
|
.tainacan-media-component__swiper-main .swiper-button-prev::after,
|
||||||
|
.tainacan-media-component__swiper-main .swiper-container-rtl .swiper-button-next::after,
|
||||||
|
.tainacan-media-component__swiper-thumbs .swiper-button-prev::after,
|
||||||
|
.tainacan-media-component__swiper-thumbs .swiper-container-rtl .swiper-button-next::after {
|
||||||
|
content: 'previous'; }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-button-next::after,
|
||||||
|
.tainacan-media-component__swiper-main .swiper-button-prev::after,
|
||||||
|
.tainacan-media-component__swiper-thumbs .swiper-button-next::after,
|
||||||
|
.tainacan-media-component__swiper-thumbs .swiper-button-prev::after {
|
||||||
|
font-family: "TainacanIcons";
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: opacity ease 0.2s; }
|
||||||
|
.tainacan-media-component__swiper-main:hover .swiper-button-next::after,
|
||||||
|
.tainacan-media-component__swiper-main:hover .swiper-button-prev::after,
|
||||||
|
.tainacan-media-component__swiper-thumbs:hover .swiper-button-next::after,
|
||||||
|
.tainacan-media-component__swiper-thumbs:hover .swiper-button-prev::after {
|
||||||
|
opacity: 1; }
|
||||||
|
.tainacan-media-component__swiper-main ul.swiper-wrapper,
|
||||||
|
.tainacan-media-component__swiper-thumbs ul.swiper-wrapper {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
.tainacan-media-component__swiper-main {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--tainacan-media-main-carousel-width, 100%); }
|
||||||
|
.tainacan-media-component__swiper-main ul.swiper-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30px; }
|
||||||
|
.tainacan-media-component__swiper-main ul.swiper-wrapper[data-pswp-uid] li.swiper-slide img {
|
||||||
|
cursor: zoom-in !important; }
|
||||||
|
.tainacan-media-component__swiper-main li.swiper-slide {
|
||||||
|
height: 100%;
|
||||||
|
max-width: calc(100% - var(--swiper-navigation-size, 44px) - var(--swiper-navigation-size, 44px));
|
||||||
|
min-width: 100%;
|
||||||
|
padding: 0 var(--swiper-navigation-size, 44px);
|
||||||
|
opacity: 1.0;
|
||||||
|
transition: opacity 0.2s linear; }
|
||||||
|
.tainacan-media-component__swiper-main li.swiper-slide:not(.swiper-slide-active) {
|
||||||
|
opacity: 0.75; }
|
||||||
|
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata {
|
||||||
|
text-align: center; }
|
||||||
|
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-name .swiper-slide-metadata__name {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden; }
|
||||||
|
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-description .swiper-slide-metadata__description {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden; }
|
||||||
|
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata.hide-caption .swiper-slide-metadata__caption {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden; }
|
||||||
|
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata__name {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--tainacan-label-color, #454647); }
|
||||||
|
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata__caption {
|
||||||
|
font-size: 0.9375em;
|
||||||
|
color: var(--tainacan-input-color, #1d1d1d); }
|
||||||
|
.tainacan-media-component__swiper-main li.swiper-slide .swiper-slide-metadata__caption {
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--tainacan-info-color, #555758); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column; }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content .tainacan-embed-container {
|
||||||
|
width: 100%;
|
||||||
|
height: auto; }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content iframe {
|
||||||
|
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
border: none;
|
||||||
|
display: block;
|
||||||
|
background-image: url("../images/preloader.gif");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center; }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content a:first-of-type,
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content p:first-of-type {
|
||||||
|
z-index: 99;
|
||||||
|
background: var(--tainacan-media-background, #ffffff);
|
||||||
|
border-radius: 3px;
|
||||||
|
word-wrap: break-word; }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content audio {
|
||||||
|
background: black;
|
||||||
|
min-height: 38px;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: var(--tainacan-media-main-carousel-height, 60vh); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content video {
|
||||||
|
min-height: 56px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: var(--tainacan-media-main-carousel-height, 60vh); }
|
||||||
|
.tainacan-media-component__swiper-main .swiper-slide-content img {
|
||||||
|
width: auto;
|
||||||
|
max-height: var(--tainacan-media-main-carousel-height, 60vh); }
|
||||||
|
|
||||||
|
.tainacan-media-component__swiper-thumbs {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--tainacan-media-thumbs-carousel-width, 100%); }
|
||||||
|
.tainacan-media-component__swiper-thumbs ul.swiper-wrapper {
|
||||||
|
max-width: calc(100% - var(--swiper-navigation-size, 44px) - var(--swiper-navigation-size, 44px));
|
||||||
|
margin: 0 var(--swiper-navigation-size, 44px);
|
||||||
|
margin-bottom: 30px; }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: top;
|
||||||
|
word-break: break-all;
|
||||||
|
font-size: 0.875em;
|
||||||
|
max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 136px) + 17px);
|
||||||
|
cursor: zoom-in; }
|
||||||
|
@media only screen and (max-width: 380px) {
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide {
|
||||||
|
margin: 10px 0; } }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide img {
|
||||||
|
width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
|
||||||
|
height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
|
||||||
|
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
|
||||||
|
max-height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
border-bottom-width: 6px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
background-color: var(--tainacan-media-background, #ffffff);
|
||||||
|
border-bottom-color: rgba(255, 255, 255, 0);
|
||||||
|
opacity: 0.85;
|
||||||
|
transition: opacity 0.3s ease, border-bottom-color 0.3s ease; }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide img:focus, .tainacan-media-component__swiper-thumbs li.swiper-slide img:hover {
|
||||||
|
opacity: 0.95;
|
||||||
|
outline: none;
|
||||||
|
border-bottom-color: var(--swiper-theme-color, #298596); }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide.swiper-slide-thumb-active .swiper-slide-metadata__name {
|
||||||
|
font-weight: bold; }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide.swiper-slide-thumb-active img {
|
||||||
|
opacity: 1.0;
|
||||||
|
border-bottom-color: var(--swiper-theme-color, #298596); }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata__name {
|
||||||
|
font-size: 1em;
|
||||||
|
color: var(--tainacan-label-color, #454647); }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata__caption {
|
||||||
|
font-size: 0.9375em;
|
||||||
|
color: var(--tainacan-input-color, #1d1d1d); }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata__caption {
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--tainacan-info-color, #555758); }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata {
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.5rem; }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata.hide-name .swiper-slide-metadata__name {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden; }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata.hide-description .swiper-slide-metadata__description {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden; }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide .swiper-slide-metadata.hide-caption .swiper-slide-metadata__caption {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden; }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide a {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
|
||||||
|
text-align: center;
|
||||||
|
word-break: break-word; }
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide a,
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide a:focus,
|
||||||
|
.tainacan-media-component__swiper-thumbs li.swiper-slide a:hover {
|
||||||
|
outline: none;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--tainacan-gray5, #454647); }
|
||||||
|
.tainacan-media-component__swiper-thumbs .swiper-start-border {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: calc(32px + var(--swiper-navigation-size, 44px));
|
||||||
|
background-image: linear-gradient(90deg, var(--tainacan-media-background, #ffffff) 25%, transparent);
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1; }
|
||||||
|
.tainacan-media-component__swiper-thumbs .swiper-end-border {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: calc(32px + var(--swiper-navigation-size, 44px));
|
||||||
|
background-image: linear-gradient(90deg, transparent, var(--tainacan-media-background, #ffffff) 75%);
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1; }
|
||||||
|
|
||||||
|
.tainacan-media-component__swiper-main + .tainacan-media-component__swiper-thumbs li.swiper-slide {
|
||||||
|
cursor: pointer; }
|
||||||
|
|
||||||
|
.tainacan-photoswipe-layer .pswp__bg {
|
||||||
|
background-color: rgba(0, 0, 0, 0.85); }
|
||||||
|
.tainacan-photoswipe-layer .pswp__ui--fit .pswp__top-bar,
|
||||||
|
.tainacan-photoswipe-layer .pswp__ui--fit .pswp__caption {
|
||||||
|
background-color: rgba(0, 0, 0, 0.7); }
|
||||||
|
.tainacan-photoswipe-layer .pswp__button--arrow--left::before,
|
||||||
|
.tainacan-photoswipe-layer .pswp__button--arrow--right::before {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5); }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .attachment-without-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .attachment-without-image.tainacan-embed-container:not(.tainacan-embed-without-iframe) {
|
||||||
|
padding: 0px; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container .attachment-without-image .tainacan-embed-container .twitter-tweet {
|
||||||
|
width: 100vw !important; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container iframe {
|
||||||
|
padding: 44px;
|
||||||
|
min-height: 90vh;
|
||||||
|
max-height: 90vh;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: none;
|
||||||
|
display: block;
|
||||||
|
background-image: url("../images/preloader.gif");
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container a:first-of-type,
|
||||||
|
.tainacan-photoswipe-layer .pswp__container p:first-of-type,
|
||||||
|
.tainacan-photoswipe-layer .pswp__container article:first-of-type {
|
||||||
|
z-index: 99;
|
||||||
|
padding: 1rem 4.33337vw;
|
||||||
|
background: var(--tainacan-media-background, #ffffff);
|
||||||
|
border-radius: var(--borderRadius, 3px);
|
||||||
|
word-wrap: break-word; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container audio {
|
||||||
|
background: black;
|
||||||
|
min-height: 38px;
|
||||||
|
border-radius: 20px; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__container video {
|
||||||
|
min-height: 56px; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__top-bar .pswp__name {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.125em;
|
||||||
|
display: block;
|
||||||
|
height: 44px;
|
||||||
|
max-width: calc(100% - 240px);
|
||||||
|
width: 100%;
|
||||||
|
left: 44px;
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
line-height: 44px;
|
||||||
|
padding: 0 10px; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__figure_caption {
|
||||||
|
font-size: 0.875em;
|
||||||
|
font-style: italic; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__description {
|
||||||
|
font-size: 0.9375em; }
|
||||||
|
.tainacan-photoswipe-layer .pswp__caption__center {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1em;
|
||||||
|
max-width: 800px; }
|
||||||
|
|
||||||
|
/*# sourceMappingURL=media-component.css.map */
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -8,12 +8,36 @@
|
||||||
.tainacan-embed-container:not(.tainacan-embed-without-iframe) {
|
.tainacan-embed-container:not(.tainacan-embed-without-iframe) {
|
||||||
padding-bottom: 56.25%;
|
padding-bottom: 56.25%;
|
||||||
padding-top: 30px;
|
padding-top: 30px;
|
||||||
|
width: 100%;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
.tainacan-embed-container .twitter-tweet {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
.tainacan-embed-container iframe.wp-embedded-content {
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin: auto !important;
|
||||||
|
width: auto !important;
|
||||||
|
top: 50%;
|
||||||
|
bottom: 50%;
|
||||||
|
}
|
||||||
|
@media screen and (max-width: 1024px) {
|
||||||
|
.tainacan-embed-container iframe.wp-embedded-content {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tainacan-embed-container #tainacan-attachment-iframe { /* PDF */
|
||||||
|
width: 100%;
|
||||||
}
|
}
|
||||||
.tainacan-embed-container iframe,
|
.tainacan-embed-container iframe,
|
||||||
.tainacan-embed-container object,
|
.tainacan-embed-container object,
|
||||||
.tainacan-embed-container embed {
|
.tainacan-embed-container embed {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
|
|
||||||
|
|
@ -16,7 +16,6 @@ body:not([class]) > iframe {
|
||||||
min-height: 80vh;
|
min-height: 80vh;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
body:not([class]) > audio,
|
|
||||||
body:not([class]) > video {
|
body:not([class]) > video {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
@ -25,6 +24,11 @@ body:not([class]) > video {
|
||||||
}
|
}
|
||||||
body:not([class]) > audio {
|
body:not([class]) > audio {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
border-radius: 20px;
|
||||||
|
background: black;
|
||||||
|
min-height: 38px;
|
||||||
|
max-height: 100%;
|
||||||
}
|
}
|
||||||
body:not([class]) > a,
|
body:not([class]) > a,
|
||||||
body:not([class]) > p {
|
body:not([class]) > p {
|
||||||
|
|
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
|
|
@ -0,0 +1,95 @@
|
||||||
|
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||||
|
<svg
|
||||||
|
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||||
|
xmlns:cc="http://creativecommons.org/ns#"
|
||||||
|
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||||
|
xmlns:svg="http://www.w3.org/2000/svg"
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
id="svg39"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 264 88"
|
||||||
|
height="88"
|
||||||
|
width="264">
|
||||||
|
<metadata
|
||||||
|
id="metadata45">
|
||||||
|
<rdf:RDF>
|
||||||
|
<cc:Work
|
||||||
|
rdf:about="">
|
||||||
|
<dc:format>image/svg+xml</dc:format>
|
||||||
|
<dc:type
|
||||||
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
|
<dc:title>default-skin 2</dc:title>
|
||||||
|
</cc:Work>
|
||||||
|
</rdf:RDF>
|
||||||
|
</metadata>
|
||||||
|
<defs
|
||||||
|
id="defs43" />
|
||||||
|
<title
|
||||||
|
id="title2">default-skin 2</title>
|
||||||
|
<path
|
||||||
|
id="Shape"
|
||||||
|
d="m 67.002,59.5 v 3.768 C 60.695,64.108 57.818,69.018 57,73 59.22,70.17 62.564,67.902 67.002,67.902 V 71.5 L 73,65.585 Z"
|
||||||
|
style="fill:#ffffff;fill-rule:evenodd" />
|
||||||
|
<g
|
||||||
|
style="fill:#ffffff;fill-rule:evenodd"
|
||||||
|
id="g7">
|
||||||
|
<path
|
||||||
|
id="path5"
|
||||||
|
d="m 13,29 v -5 h 2 v 3 h 3 v 2 z m 0,-14 h 5 v 2 h -3 v 3 h -2 z m 18,0 v 5 h -2 v -3 h -3 v -2 z m 0,14 h -5 v -2 h 3 v -3 h 2 z" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
style="fill:#ffffff;fill-rule:evenodd"
|
||||||
|
id="g11">
|
||||||
|
<path
|
||||||
|
id="path9"
|
||||||
|
d="m 62,24 v 5 h -2 v -3 h -3 v -2 z m 0,-4 h -5 v -2 h 3 v -3 h 2 z m 8,0 v -5 h 2 v 3 h 3 v 2 z m 0,4 h 5 v 2 h -3 v 3 h -2 z" />
|
||||||
|
</g>
|
||||||
|
<path
|
||||||
|
id="path13"
|
||||||
|
d="M 20.586,66 14.93,60.344 16.344,58.93 22,64.586 27.656,58.93 29.07,60.344 23.414,66 29.07,71.656 27.656,73.07 22,67.414 16.344,73.07 14.93,71.656 Z"
|
||||||
|
style="fill:#ffffff;fill-rule:evenodd" />
|
||||||
|
<path
|
||||||
|
id="path15"
|
||||||
|
d="m 108.09738,65.891437 -2.03999,-1.748574 c 1.38784,-1.589364 1.3957,-1.596523 4.44849,-5.142894 -2.91228,-3.313711 -2.89516,-3.3306 -4.44849,-5.142833 L 108.09738,52.179419 114.05739,59 Z"
|
||||||
|
style="fill:#ffffff;fill-rule:evenodd;stroke-width:1.14285851" />
|
||||||
|
<path
|
||||||
|
id="path17"
|
||||||
|
d="m 155.5635,65.896657 2.04,-1.748571 c -1.49112,-1.796968 -1.49059,-1.799812 -4.33482,-5.142858 3.02761,-3.609572 3.02493,-3.60229 4.33482,-5.142857 l -2.04,-1.677714 -5.96,6.820571 z"
|
||||||
|
style="fill:#ffffff;fill-rule:evenodd;stroke-width:1.14285719" />
|
||||||
|
<g
|
||||||
|
id="g23"
|
||||||
|
style="fill:none;fill-rule:evenodd">
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff"
|
||||||
|
d="m 160.957,28.543 -3.25,-3.25 -1.413,1.414 3.25,3.25 z"
|
||||||
|
id="Rectangle-11" />
|
||||||
|
<path
|
||||||
|
style="stroke:#ffffff;stroke-width:1.5"
|
||||||
|
id="Oval-1"
|
||||||
|
d="m 152.5,27 c 3.038,0 5.5,-2.462 5.5,-5.5 0,-3.038 -2.462,-5.5 -5.5,-5.5 -3.038,0 -5.5,2.462 -5.5,5.5 0,3.038 2.462,5.5 5.5,5.5 z" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff"
|
||||||
|
id="path21"
|
||||||
|
d="m 150,21 h 5 v 1 h -5 z" />
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g33"
|
||||||
|
style="fill:none;fill-rule:evenodd">
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff"
|
||||||
|
id="path25"
|
||||||
|
d="m 116.957,28.543 -1.414,1.414 -3.25,-3.25 1.414,-1.414 z" />
|
||||||
|
<path
|
||||||
|
style="stroke:#ffffff;stroke-width:1.5"
|
||||||
|
id="path27"
|
||||||
|
d="m 108.5,27 c 3.038,0 5.5,-2.462 5.5,-5.5 0,-3.038 -2.462,-5.5 -5.5,-5.5 -3.038,0 -5.5,2.462 -5.5,5.5 0,3.038 2.462,5.5 5.5,5.5 z" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff"
|
||||||
|
id="path29"
|
||||||
|
d="m 106,21 h 5 v 1 h -5 z" />
|
||||||
|
<path
|
||||||
|
style="fill:#ffffff"
|
||||||
|
id="path31"
|
||||||
|
d="m 109.043,19.008 -0.085,5 -1,-0.017 0.085,-5 z" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Width: | Height: | Size: 3.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 47 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 5.1 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 859 B |
Binary file not shown.
|
After Width: | Height: | Size: 866 B |
|
|
@ -191,6 +191,9 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
|
||||||
if ($status == 'finished') {
|
if ($status == 'finished') {
|
||||||
$params['progress_label'] = __('Process completed','tainacan');
|
$params['progress_label'] = __('Process completed','tainacan');
|
||||||
$params['progress_value'] = 100;
|
$params['progress_value'] = 100;
|
||||||
|
} else if ($status == 'finished-errors') {
|
||||||
|
$params['progress_label'] = __('Process completed with errors','tainacan');
|
||||||
|
$params['progress_value'] = 100;
|
||||||
}
|
}
|
||||||
$wpdb->update(
|
$wpdb->update(
|
||||||
$this->table,
|
$this->table,
|
||||||
|
|
@ -282,11 +285,11 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
|
||||||
$batch = $this->get_batch();
|
$batch = $this->get_batch();
|
||||||
|
|
||||||
if($this->process_lock_in_time != get_site_transient( $this->identifier . '_process_lock' )) {
|
if($this->process_lock_in_time != get_site_transient( $this->identifier . '_process_lock' )) {
|
||||||
$this->write_log($batch->key, ['New request has ignored']);
|
$this->write_log($batch->key, [['datetime' => date("Y-m-d H:i:s"), 'message' => 'New request has ignored']]);
|
||||||
wp_die();
|
wp_die();
|
||||||
}
|
}
|
||||||
|
|
||||||
$this->write_log($batch->key, ['New Request']);
|
$this->write_log($batch->key, [['datetime' => date("Y-m-d H:i:s"), 'message' => 'New Request']]);
|
||||||
|
|
||||||
register_shutdown_function(function() use($batch) {
|
register_shutdown_function(function() use($batch) {
|
||||||
$error = error_get_last();
|
$error = error_get_last();
|
||||||
|
|
@ -306,8 +309,8 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
|
||||||
|
|
||||||
$this->debug('Shutdown with Fatal error captured');
|
$this->debug('Shutdown with Fatal error captured');
|
||||||
$this->debug($error_str);
|
$this->debug($error_str);
|
||||||
$this->write_error_log($batch->key, ['Fatal Error: ' . $error_str]);
|
$this->write_error_log($batch->key, [['datetime' => date("Y-m-d H:i:s"), 'message' => 'Fatal Error: ' . $error_str]] );
|
||||||
$this->write_error_log($batch->key, ['Process aborted']);
|
$this->write_error_log($batch->key, [['datetime' => date("Y-m-d H:i:s"), 'message' => 'Process aborted']]);
|
||||||
$this->close( $batch->key, 'errored' );
|
$this->close( $batch->key, 'errored' );
|
||||||
$this->debug('Batch closed due to captured error');
|
$this->debug('Batch closed due to captured error');
|
||||||
$this->unlock_process();
|
$this->unlock_process();
|
||||||
|
|
@ -321,8 +324,8 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
|
||||||
$task = $this->task( $task );
|
$task = $this->task( $task );
|
||||||
} catch (\Exception $e) {
|
} catch (\Exception $e) {
|
||||||
// TODO: Add Stacktrace
|
// TODO: Add Stacktrace
|
||||||
$this->write_error_log($batch->key, ['Fatal Error: ' . $e->getMessage()]);
|
$this->write_error_log($batch->key, [['datetime' => date("Y-m-d H:i:s"), 'message' => 'Fatal Error: ' . $e->getMessage()]]);
|
||||||
$this->write_error_log($batch->key, ['Process aborted']);
|
$this->write_error_log($batch->key, [['datetime' => date("Y-m-d H:i:s"), 'message' => 'Process aborted']]);
|
||||||
$task = false;
|
$task = false;
|
||||||
$close_status = 'errored';
|
$close_status = 'errored';
|
||||||
}
|
}
|
||||||
|
|
@ -350,7 +353,7 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
|
||||||
} else {
|
} else {
|
||||||
$this->debug('Complete');
|
$this->debug('Complete');
|
||||||
$this->complete();
|
$this->complete();
|
||||||
$this->write_log($batch->key, ['Process Finished']);
|
$this->write_log($batch->key, [['datetime' => date("Y-m-d H:i:s"), 'message' => 'Process Finished']] );
|
||||||
}
|
}
|
||||||
|
|
||||||
$this->debug('dying');
|
$this->debug('dying');
|
||||||
|
|
@ -434,18 +437,21 @@ abstract class Background_Process extends \Tainacan_WP_Background_Process {
|
||||||
private function recursive_stingify_log_array(array $log, $break = true) {
|
private function recursive_stingify_log_array(array $log, $break = true) {
|
||||||
$return = '';
|
$return = '';
|
||||||
foreach ($log as $k => $l) {
|
foreach ($log as $k => $l) {
|
||||||
|
$l_datetime = $l['datetime'];
|
||||||
|
$l_message = $l['message'];
|
||||||
|
|
||||||
|
$return .= "[$l_datetime] ";
|
||||||
if (!is_numeric($k)) {
|
if (!is_numeric($k)) {
|
||||||
$return .= $k . ': ';
|
$return .= $k . ': ';
|
||||||
}
|
}
|
||||||
if (is_array($l)) {
|
if (is_array($l_message)) {
|
||||||
//$return .= $this->recursive_stingify_log_array($l, false);
|
//$return .= $this->recursive_stingify_log_array($l_message, false);
|
||||||
$return .= print_r($l, true);
|
$return .= print_r($l_message, true);
|
||||||
} elseif (is_string($l)) {
|
} elseif (is_string($l_message)) {
|
||||||
$return .= $l;
|
$return .= $l_message;
|
||||||
}
|
}
|
||||||
$return .="\n";
|
$return .="\n";
|
||||||
//$return .= $break ? "\n" : ', ';
|
//$return .= $break ? "\n" : ', ';
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
return $return;
|
return $return;
|
||||||
|
|
|
||||||
|
|
@ -21,8 +21,6 @@ class Media {
|
||||||
|
|
||||||
protected function __construct() {
|
protected function __construct() {
|
||||||
add_action( 'init', [$this, 'add_attachment_page_rewrite_rule'] );
|
add_action( 'init', [$this, 'add_attachment_page_rewrite_rule'] );
|
||||||
add_action( 'admin_enqueue_scripts', array( &$this, 'add_css' ) );
|
|
||||||
add_action( 'wp_enqueue_scripts', array( &$this, 'add_css' ) );
|
|
||||||
|
|
||||||
add_filter( 'query_vars', [$this, 'attachment_page_add_var'] );
|
add_filter( 'query_vars', [$this, 'attachment_page_add_var'] );
|
||||||
add_action( 'template_redirect', [$this, 'attachment_page'] );
|
add_action( 'template_redirect', [$this, 'attachment_page'] );
|
||||||
|
|
@ -367,6 +365,7 @@ class Media {
|
||||||
$output .= $img;
|
$output .= $img;
|
||||||
|
|
||||||
} else {
|
} else {
|
||||||
|
$this->add_css();
|
||||||
wp_print_styles('tainacan-media-page');
|
wp_print_styles('tainacan-media-page');
|
||||||
global $wp_embed;
|
global $wp_embed;
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -460,7 +460,7 @@ class Item_Metadata_Entity extends Entity {
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
|
|
||||||
if (empty($value)) {
|
if (empty($value) && $value !== '0' && $value !== 0) {
|
||||||
if ($this->is_required()) {
|
if ($this->is_required()) {
|
||||||
$validation_statuses = ['publish', 'future', 'private'];
|
$validation_statuses = ['publish', 'future', 'private'];
|
||||||
if (in_array($item->get_status(), apply_filters( 'tainacan-status-require-validation', $validation_statuses) )) {
|
if (in_array($item->get_status(), apply_filters( 'tainacan-status-require-validation', $validation_statuses) )) {
|
||||||
|
|
|
||||||
|
|
@ -719,7 +719,7 @@ class Item extends Entity {
|
||||||
}
|
}
|
||||||
$output .= $_embed;
|
$output .= $_embed;
|
||||||
} elseif ( $type == 'text' ) {
|
} elseif ( $type == 'text' ) {
|
||||||
$output .= $this->get_document();
|
$output .= '<article>' . $this->get_document() . '</article>';
|
||||||
} elseif ( $type == 'attachment' ) {
|
} elseif ( $type == 'attachment' ) {
|
||||||
|
|
||||||
if ( wp_attachment_is_image($this->get_document()) ) {
|
if ( wp_attachment_is_image($this->get_document()) ) {
|
||||||
|
|
|
||||||
|
|
@ -168,7 +168,7 @@ class Metadatum extends Entity {
|
||||||
/**
|
/**
|
||||||
* Return the an object child of \Tainacan\metadatum_Types\Metadata_Type with options
|
* Return the an object child of \Tainacan\metadatum_Types\Metadata_Type with options
|
||||||
*
|
*
|
||||||
* @return \Tainacan\Metadata_Types\Metadata_Type The metadatum type class with filled options
|
* @return \Tainacan\Metadata_Types\Metadata_Type|Object The metadatum type class with filled options
|
||||||
*/
|
*/
|
||||||
function get_metadata_type_object(){
|
function get_metadata_type_object(){
|
||||||
$class_name = $this->get_metadata_type();
|
$class_name = $this->get_metadata_type();
|
||||||
|
|
|
||||||
|
|
@ -60,6 +60,19 @@ class CSV extends Exporter {
|
||||||
$line[] = $rel;
|
$line[] = $rel;
|
||||||
} elseif ($meta->get_metadatum()->get_metadata_type() == 'Tainacan\Metadata_Types\Compound') {
|
} elseif ($meta->get_metadatum()->get_metadata_type() == 'Tainacan\Metadata_Types\Compound') {
|
||||||
$line[] = $this->get_compound_metadata_cell($meta);
|
$line[] = $this->get_compound_metadata_cell($meta);
|
||||||
|
} elseif ($meta->get_metadatum()->get_metadata_type() == 'Tainacan\Metadata_Types\Date' ) {
|
||||||
|
$metadatum = $meta->get_metadatum();
|
||||||
|
$date_value = 'ERROR ON FORMATING DATE';
|
||||||
|
if (is_object($metadatum)) {
|
||||||
|
$fto = $metadatum->get_metadata_type_object();
|
||||||
|
if (is_object($fto)) {
|
||||||
|
if ( method_exists($fto, 'get_value_as_html') ) {
|
||||||
|
$fto->output_date_format = 'Y-m-d';
|
||||||
|
$date_value = $fto->get_value_as_html($meta);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
$line[] = $date_value;
|
||||||
} else {
|
} else {
|
||||||
$line[] = $meta->get_value_as_string();
|
$line[] = $meta->get_value_as_string();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -355,15 +355,11 @@ abstract class Exporter {
|
||||||
}
|
}
|
||||||
|
|
||||||
public function add_log($message ) {
|
public function add_log($message ) {
|
||||||
$count = count($this->log);
|
$this->log[] = ['datetime' => date("Y-m-d H:i:s"), 'message' => $message];
|
||||||
$date_key = sprintf("[%' 9d | %s]", $count, date("Y-m-d H:i:s"));
|
|
||||||
$this->log[$date_key] = $message;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public function add_error_log($message ) {
|
public function add_error_log($message ) {
|
||||||
$count = count($this->log);
|
$this->error_log[] = ['datetime' => date("Y-m-d H:i:s"), 'message' => $message];
|
||||||
$date_key = sprintf("[%' 9d | %s]", $count, date("Y-m-d H:i:s"));
|
|
||||||
$this->error_log[$date_key] = $message;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public function is_finished() {
|
public function is_finished() {
|
||||||
|
|
|
||||||
|
|
@ -146,14 +146,11 @@ abstract class Generic_Process {
|
||||||
}
|
}
|
||||||
|
|
||||||
public function add_log($message ) {
|
public function add_log($message ) {
|
||||||
$count = count($this->log);
|
$this->log[] = ['datetime' => date("Y-m-d H:i:s"), 'message' => $message];
|
||||||
$date_key = sprintf("[%' 9d | %s]", $count, date("Y-m-d H:i:s"));
|
|
||||||
$this->log[$date_key] = $message;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public function add_error_log($message ){
|
public function add_error_log($message ) {
|
||||||
$date_key = '[' . date("Y-m-d H:i:s") . '] ';
|
$this->error_log[] = ['datetime' => date("Y-m-d H:i:s"), 'message' => $message];
|
||||||
$this->error_log[$date_key] = $message;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public function is_finished() {
|
public function is_finished() {
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,8 @@ class CSV extends Importer {
|
||||||
'delimiter' => ',',
|
'delimiter' => ',',
|
||||||
'multivalued_delimiter' => '||',
|
'multivalued_delimiter' => '||',
|
||||||
'encode' => 'utf8',
|
'encode' => 'utf8',
|
||||||
'enclosure' => ''
|
'enclosure' => '',
|
||||||
|
'escape_empty_value' => '[empty value]'
|
||||||
]);
|
]);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -385,6 +386,31 @@ class CSV extends Importer {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div class="column">
|
||||||
|
<div class="field">
|
||||||
|
<label class="label"><?php _e('Empty value', 'tainacan'); ?></label>
|
||||||
|
<span class="help-wrapper">
|
||||||
|
<a class="help-button has-text-secondary">
|
||||||
|
<span class="icon is-small">
|
||||||
|
<i class="tainacan-icon tainacan-icon-help" ></i>
|
||||||
|
</span>
|
||||||
|
</a>
|
||||||
|
<div class="help-tooltip">
|
||||||
|
<div class="help-tooltip-header">
|
||||||
|
<h5><?php _e('Empty value', 'tainacan'); ?></h5>
|
||||||
|
</div>
|
||||||
|
<div class="help-tooltip-body">
|
||||||
|
<p><?php _e('The string representing a value not informed for the metadata. (e.g. \EMPTY)', 'tainacan'); ?></p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</span>
|
||||||
|
<div class="control is-clearfix">
|
||||||
|
<input class="input" type="text" name="escape_empty_value" value="<?php echo $this->get_option('escape_empty_value'); ?>">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="columns">
|
<div class="columns">
|
||||||
|
|
@ -738,7 +764,9 @@ class CSV extends Importer {
|
||||||
|
|
||||||
if ($metadatum instanceof Entities\Metadatum) {
|
if ($metadatum instanceof Entities\Metadatum) {
|
||||||
$singleItemMetadata = new Entities\Item_Metadata_Entity( $item, $metadatum); // *empty item will be replaced by inserted in the next foreach
|
$singleItemMetadata = new Entities\Item_Metadata_Entity( $item, $metadatum); // *empty item will be replaced by inserted in the next foreach
|
||||||
if( $metadatum->get_metadata_type() == 'Tainacan\Metadata_Types\Taxonomy' ) {
|
if ($this->is_clear_value($values)) {
|
||||||
|
$singleItemMetadata->set_value("");
|
||||||
|
} else if( $metadatum->get_metadata_type() == 'Tainacan\Metadata_Types\Taxonomy' ) {
|
||||||
if( !is_array( $values ) ) {
|
if( !is_array( $values ) ) {
|
||||||
$tmp = $this->insert_hierarchy( $metadatum, $values);
|
$tmp = $this->insert_hierarchy( $metadatum, $values);
|
||||||
if ($tmp !== false) {
|
if ($tmp !== false) {
|
||||||
|
|
@ -874,6 +902,16 @@ class CSV extends Importer {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param $value
|
||||||
|
* @return bool
|
||||||
|
*/
|
||||||
|
private function is_clear_value($value) {
|
||||||
|
if( !empty($value) && is_array($value) )
|
||||||
|
return false;
|
||||||
|
return $this->get_option('escape_empty_value') == $value;
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @param $metadatum the metadata
|
* @param $metadatum the metadata
|
||||||
* @param $values the categories names
|
* @param $values the categories names
|
||||||
|
|
|
||||||
|
|
@ -345,14 +345,10 @@ abstract class Importer {
|
||||||
* @param $messagelog
|
* @param $messagelog
|
||||||
*/
|
*/
|
||||||
public function add_log($message ) {
|
public function add_log($message ) {
|
||||||
$count = count($this->log);
|
$this->log[] = ['datetime' => date("Y-m-d H:i:s"), 'message' => $message];
|
||||||
$date_key = sprintf("[%' 9d | %s]", $count, date("Y-m-d H:i:s"));
|
|
||||||
$this->log[$date_key] = $message;
|
|
||||||
}
|
}
|
||||||
public function add_error_log($message ){
|
public function add_error_log($message ) {
|
||||||
$count = count($this->log);
|
$this->error_log[] = ['datetime' => date("Y-m-d H:i:s"), 'message' => $message];
|
||||||
$date_key = sprintf("[%' 9d | %s]", $count, date("Y-m-d H:i:s"));
|
|
||||||
$this->error_log[$date_key] = $message;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public function add_collection(array $collection) {
|
public function add_collection(array $collection) {
|
||||||
|
|
|
||||||
|
|
@ -17,17 +17,11 @@ use \Tainacan\Repositories;
|
||||||
* Optional. Array or string of arguments.
|
* Optional. Array or string of arguments.
|
||||||
*
|
*
|
||||||
* @type mixed $metadata Metadatum object, ID or slug to retrieve only one metadatum. empty returns all metadata
|
* @type mixed $metadata Metadatum object, ID or slug to retrieve only one metadatum. empty returns all metadata
|
||||||
*
|
|
||||||
* @type array $metadata__in Array of metadata IDs or Slugs to be retrieved. Default none
|
* @type array $metadata__in Array of metadata IDs or Slugs to be retrieved. Default none
|
||||||
*
|
|
||||||
* @type array $metadata__not_in Array of metadata IDs (slugs not accepted) to excluded. Default none
|
* @type array $metadata__not_in Array of metadata IDs (slugs not accepted) to excluded. Default none
|
||||||
*
|
|
||||||
* @type bool $exclude_title Exclude the Core Title Metadata from result. Default false
|
* @type bool $exclude_title Exclude the Core Title Metadata from result. Default false
|
||||||
*
|
|
||||||
* @type bool $exclude_description Exclude the Core Description Metadata from result. Default false
|
* @type bool $exclude_description Exclude the Core Description Metadata from result. Default false
|
||||||
*
|
|
||||||
* @type bool $exclude_core Exclude Core Metadata (title and description) from result. Default false
|
* @type bool $exclude_core Exclude Core Metadata (title and description) from result. Default false
|
||||||
*
|
|
||||||
* @type bool $hide_empty Wether to hide or not metadata the item has no value to
|
* @type bool $hide_empty Wether to hide or not metadata the item has no value to
|
||||||
* Default: true
|
* Default: true
|
||||||
* @type string $before String to be added before each metadata block
|
* @type string $before String to be added before each metadata block
|
||||||
|
|
@ -71,16 +65,53 @@ function tainacan_the_metadata($args = array()) {
|
||||||
* Return the item document as a HTML string to be used as output.
|
* Return the item document as a HTML string to be used as output.
|
||||||
*
|
*
|
||||||
* @param int|string $item_id (Optional) The item ID. Default is the global $post
|
* @param int|string $item_id (Optional) The item ID. Default is the global $post
|
||||||
|
* @param string $img_size (Optional) The image size, in case of an imagen document. Default is 'large'
|
||||||
*
|
*
|
||||||
* @return string The HTML output
|
* @return string The HTML output
|
||||||
*/
|
*/
|
||||||
function tainacan_get_the_document($item_id = 0) {
|
function tainacan_get_the_document($item_id = 0, $img_size = 'large') {
|
||||||
$item = tainacan_get_item($item_id);
|
$item = tainacan_get_item($item_id);
|
||||||
|
|
||||||
if (!$item)
|
if (!$item)
|
||||||
return;
|
return;
|
||||||
|
|
||||||
return apply_filters('tainacan-get-the-document', $item->get_document_as_html(), $item);
|
return apply_filters('tainacan-get-the-document', $item->get_document_as_html($item_id, $img_size), $item);
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* To be used inside The Loop
|
||||||
|
*
|
||||||
|
* Return the item document in raw form (ID if an Attachment, textual content if URL or Text)
|
||||||
|
*
|
||||||
|
* @param int|string $item_id (Optional) The item ID. Default is the global $post
|
||||||
|
*
|
||||||
|
* @return string The raw output
|
||||||
|
*/
|
||||||
|
function tainacan_get_the_document_raw($item_id = 0) {
|
||||||
|
$item = tainacan_get_item($item_id);
|
||||||
|
|
||||||
|
if (!$item)
|
||||||
|
return;
|
||||||
|
|
||||||
|
return apply_filters('tainacan_get_the_document_raw', $item->get_document($item_id), $item);
|
||||||
|
}
|
||||||
|
|
||||||
|
function tainacan_get_the_item_document_url($item_id = 0) {
|
||||||
|
$item = tainacan_get_item($item_id);
|
||||||
|
|
||||||
|
if (!$item)
|
||||||
|
return;
|
||||||
|
|
||||||
|
return apply_filters('tainacan_get_the_item_document_url', $item->get_document_download_url(), $item);
|
||||||
|
}
|
||||||
|
|
||||||
|
function tainacan_get_the_document_type($item_id = 0) {
|
||||||
|
$item = tainacan_get_item($item_id);
|
||||||
|
|
||||||
|
if (!$item)
|
||||||
|
return;
|
||||||
|
|
||||||
|
return apply_filters('tainacan_get_the_document_type', $item->get_document_type(), $item);
|
||||||
}
|
}
|
||||||
|
|
||||||
function tainacan_the_item_document_download_link($item_id = 0) {
|
function tainacan_the_item_document_download_link($item_id = 0) {
|
||||||
|
|
@ -112,10 +143,19 @@ function tainacan_the_document() {
|
||||||
echo tainacan_get_the_document();
|
echo tainacan_get_the_document();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* To be used inside The Loop
|
||||||
|
*
|
||||||
|
* echoes HTML display-ready version of an attachment
|
||||||
|
*/
|
||||||
|
function tainacan_get_single_attachment_as_html($attachment_id, $item_id = 0, $img_size = 'large') {
|
||||||
|
echo tainacan_get_attachment_as_html($attachment_id, $item_id, $img_size);
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Return HTML display-ready version of an attachment
|
* Return HTML display-ready version of an attachment
|
||||||
*/
|
*/
|
||||||
function tainacan_get_single_attachment_as_html($attachment_id, $item_id = 0) {
|
function tainacan_get_attachment_as_html($attachment_id, $item_id = 0, $img_size = 'large') {
|
||||||
|
|
||||||
$item = tainacan_get_item($item_id);
|
$item = tainacan_get_item($item_id);
|
||||||
|
|
||||||
|
|
@ -123,7 +163,7 @@ function tainacan_get_single_attachment_as_html($attachment_id, $item_id = 0) {
|
||||||
return '';
|
return '';
|
||||||
}
|
}
|
||||||
|
|
||||||
echo $item->get_attachment_as_html($attachment_id);
|
return $item->get_attachment_as_html($attachment_id, $img_size);
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -219,6 +259,335 @@ function tainacan_the_collection_description() {
|
||||||
echo tainacan_get_the_collection_description();
|
echo tainacan_get_the_collection_description();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tainacan Gallery component, used to render document, attachments and other files
|
||||||
|
*
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
function tainacan_the_media_component($media_id, $media_items_thumbs, $media_items_main, $args) {
|
||||||
|
echo tainacan_get_the_media_component($media_id, $media_items_thumbs, $media_items_main, $args);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tainacan Media Gallery component, used to render document, attachments and other files
|
||||||
|
*
|
||||||
|
* @param string $media_id ID to be added to the gallery div. If both main and thumbnail items are passed, each div ID will be posfixed with '-main' or '-thumbs'.
|
||||||
|
* @param array $media_items_thumbs Array of media items to be rendered inside smaller the carousel. Default to empty array
|
||||||
|
* @param array $media_items_main Array of media items to be rendered inside main, bigger the carousel. Default to empty array
|
||||||
|
* @param array|string $args {
|
||||||
|
* Optional. Array of arguments.
|
||||||
|
* @type string before_main_div String to be added before the main gallery div
|
||||||
|
* @type string after_main_div String to be added after the main gallery div
|
||||||
|
* @type string before_thumbs_div String to be added before the thumbs gallery div
|
||||||
|
* @type string after_thumbs_div String to be added after the thumbs gallery div
|
||||||
|
* @type string before_main_ul String to be added before the main gallery ul
|
||||||
|
* @type string after_main_ul String to be added after the main gallery ul
|
||||||
|
* @type string before_thumbs_ul String to be added before the thumbs gallery ul
|
||||||
|
* @type string after_thumbs_ul String to be added after the thumbs gallery ul
|
||||||
|
* @type string class_main_div Class to be added to the main gallery div
|
||||||
|
* @type string class_main_ul Class to be added to the main gallery ul
|
||||||
|
* @type string class_main_li Class to be added to the main gallery li
|
||||||
|
* @type string class_thumbs_div Class to be added to the thumbs gallery div
|
||||||
|
* @type string class_thumbs_ul Class to be added to the thumbs gallery ul
|
||||||
|
* @type string class_thumbs_li Class to be added to the thumbs gallery li
|
||||||
|
* @type array swiper_main_options Object with SwiperJS options for the main gallery
|
||||||
|
* @type array swiper_thumbs_options Object with SwiperJS options for the thumb gallery
|
||||||
|
* @type bool show_share_button Shows share button on lightbox
|
||||||
|
* }
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
|
||||||
|
function tainacan_get_the_media_component(
|
||||||
|
$media_id = 'tainacan-media-component',
|
||||||
|
$media_items_thumbs = array(),
|
||||||
|
$media_items_main = array(),
|
||||||
|
$args = array()
|
||||||
|
) {
|
||||||
|
global $TAINACAN_BASE_URL;
|
||||||
|
|
||||||
|
$args = array_merge(array(
|
||||||
|
'before_main_div' => '',
|
||||||
|
'after_main_div' => '',
|
||||||
|
'before_thumbs_div' => '',
|
||||||
|
'after_thumbs_div' => '',
|
||||||
|
'before_main_ul' => '',
|
||||||
|
'after_main_ul' => '',
|
||||||
|
'before_thumbs_ul' => '',
|
||||||
|
'after_thumbs_ul' => '',
|
||||||
|
'class_main_div' => '',
|
||||||
|
'class_main_ul' => '',
|
||||||
|
'class_main_li' => '',
|
||||||
|
'class_thumbs_div' => '',
|
||||||
|
'class_thumbs_ul' => '',
|
||||||
|
'class_thumbs_li' => '',
|
||||||
|
'swiper_main_options' => [],
|
||||||
|
'swiper_thumbs_options' => [],
|
||||||
|
'show_share_button' => false
|
||||||
|
), $args);
|
||||||
|
|
||||||
|
$args['has_media_main'] = $media_items_main && is_array($media_items_main) && count($media_items_main);
|
||||||
|
$args['has_media_thumbs'] = $media_items_thumbs && is_array($media_items_thumbs) && count($media_items_thumbs);
|
||||||
|
$args['media_main_id'] = $media_id . '-main';
|
||||||
|
$args['media_thumbs_id'] = $media_id . '-thumbs';
|
||||||
|
$args['media_id'] = $media_id;
|
||||||
|
|
||||||
|
if ( $args['has_media_main'] || $args['has_media_thumbs'] ) :
|
||||||
|
// Modal lightbox layer for rendering photoswipe
|
||||||
|
add_action('wp_footer', 'tainacan_get_the_media_modal_layer');
|
||||||
|
|
||||||
|
wp_enqueue_style( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/css/media-component.css', array(), TAINACAN_VERSION);
|
||||||
|
wp_enqueue_script( 'tainacan-media-component', $TAINACAN_BASE_URL . '/assets/js/media_component.js', ['tainacan-search','wp-i18n'], TAINACAN_VERSION, true );
|
||||||
|
?>
|
||||||
|
|
||||||
|
<div class="tainacan-media-component">
|
||||||
|
|
||||||
|
<?php if ( $args['has_media_main'] ) : ?>
|
||||||
|
|
||||||
|
<!-- Slider main container -->
|
||||||
|
<?php echo $args['before_main_div'] ?>
|
||||||
|
<div id="<?php echo $args['media_main_id'] ?>" class="tainacan-media-component__swiper-main swiper-container <?php echo $args['class_main_div'] ?>">
|
||||||
|
|
||||||
|
<!-- Additional required wrapper -->
|
||||||
|
<?php echo $args['before_main_ul'] ?>
|
||||||
|
<ul class="swiper-wrapper <?php echo $args['class_main_ul'] ?>">
|
||||||
|
<?php foreach($media_items_main as $media_item) { ?>
|
||||||
|
<li class="swiper-slide <?php echo $args['class_main_li'] ?>">
|
||||||
|
<?php echo $media_item ?>
|
||||||
|
</li>
|
||||||
|
<?php }; ?>
|
||||||
|
</ul>
|
||||||
|
<?php echo $args['before_main_ul'] ?>
|
||||||
|
|
||||||
|
<?php if ( $args['swiper_main_options'] && isset($args['swiper_main_options']['pagination']) ) : ?>
|
||||||
|
<!-- If we need pagination -->
|
||||||
|
<div class="swiper-pagination swiper-pagination_<?php echo $args['media_main_id'] ?>"></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if ( $args['swiper_main_options'] && isset($args['swiper_main_options']['navigation']) ) : ?>
|
||||||
|
<!-- If we need navigation buttons -->
|
||||||
|
<div class="swiper-button-prev swiper-navigation-prev_<?php echo $args['media_main_id'] ?>"></div>
|
||||||
|
<div class="swiper-button-next swiper-navigation-next_<?php echo $args['media_main_id'] ?>"></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php echo $args['after_main_div'] ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if ( $args['has_media_thumbs'] ) : ?>
|
||||||
|
|
||||||
|
<!-- Slider thumbs container -->
|
||||||
|
<?php echo $args['before_thumbs_div'] ?>
|
||||||
|
<div id="<?php echo $args['media_thumbs_id'] ?>" class="tainacan-media-component__swiper-thumbs swiper-container <?php echo $args['class_thumbs_div'] ?>">
|
||||||
|
|
||||||
|
<!-- Additional required wrapper -->
|
||||||
|
<?php echo $args['before_thumbs_ul'] ?>
|
||||||
|
<ul class="swiper-wrapper <?php echo $args['class_thumbs_ul'] ?>">
|
||||||
|
<?php foreach($media_items_thumbs as $media_item) { ?>
|
||||||
|
<li class="swiper-slide <?php echo $args['class_thumbs_li'] ?>">
|
||||||
|
<?php echo $media_item ?>
|
||||||
|
</li>
|
||||||
|
<?php }; ?>
|
||||||
|
</ul>
|
||||||
|
<?php echo $args['before_thumbs_ul'] ?>
|
||||||
|
|
||||||
|
<?php if ( $args['swiper_thumbs_options'] && isset($args['swiper_thumbs_options']['pagination']) ) : ?>
|
||||||
|
<!-- If we need pagination -->
|
||||||
|
<div class="swiper-paginations swiper-pagination_<?php echo $args['media_thumbs_id'] ?>"></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if ( $args['swiper_thumbs_options'] && isset($args['swiper_thumbs_options']['navigation']) ) : ?>
|
||||||
|
<!-- If we need navigation buttons -->
|
||||||
|
<div class="swiper-button-prev swiper-navigation-prev_<?php echo $args['media_thumbs_id'] ?>"></div>
|
||||||
|
<div class="swiper-button-next swiper-navigation-next_<?php echo $args['media_thumbs_id'] ?>"></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<!-- These elements will create a gradient on the side of the carousel -->
|
||||||
|
<div class="swiper-start-border"></div>
|
||||||
|
<div class="swiper-end-border"></div>
|
||||||
|
</div>
|
||||||
|
<?php echo $args['after_thumbs_div'] ?>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php if ( isset( $_REQUEST['wp_customize'] ) ) : ?>
|
||||||
|
<script>
|
||||||
|
tainacan_plugin.tainacan_media_components = (typeof tainacan_plugin != undefined && typeof tainacan_plugin.tainacan_media_components != "undefined") ? tainacan_plugin.tainacan_media_components : {};
|
||||||
|
tainacan_plugin.tainacan_media_components['<?php echo $args['media_id'] ?>'] = <?php echo json_encode($args) ?>;
|
||||||
|
</script>
|
||||||
|
<?php else :
|
||||||
|
wp_add_inline_script( 'tainacan-media-component', '
|
||||||
|
tainacan_plugin.tainacan_media_components = (typeof tainacan_plugin != undefined && typeof tainacan_plugin.tainacan_media_components != "undefined") ? tainacan_plugin.tainacan_media_components : {};
|
||||||
|
tainacan_plugin.tainacan_media_components["' . $args['media_id'] . '"] = '. json_encode($args) . ';
|
||||||
|
', 'before' );
|
||||||
|
endif; ?>
|
||||||
|
<?php endif; ?> <!-- End of if ($args['has_media_main'] || $args['has_media_thumbs'] ) -->
|
||||||
|
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Tainacan Media Item for the Media Gallery component, used to render a single link displayed in the carousel
|
||||||
|
*
|
||||||
|
* @param array|string $args {
|
||||||
|
* Optional. Array of arguments.
|
||||||
|
* @type string before_slide_content String to be added before the slide-content div or a tag
|
||||||
|
* @type string after_slide_content String to be added after the slide-content div or a tag
|
||||||
|
* @type string class_slide_content Class to be added to the slide-content div or a tag
|
||||||
|
* @type string before_slide_metadata String to be added before the slide-metadata div
|
||||||
|
* @type string after_slide_metadata String to be added after the slide-metadata div
|
||||||
|
* @type string class_slide_metadata Class to be added to the slide-metadata div
|
||||||
|
* @type string media_content The content of the slide itself, such as an image, audio, video or iframe tag. It may be wrapped by a link to the full content
|
||||||
|
* @type string media_content_full The media full content, either an image, an html
|
||||||
|
* @type string media_title The media title, if available
|
||||||
|
* @type string media_description The media description, if available
|
||||||
|
* @type string media_caption The media caption, if available
|
||||||
|
* @type string media_type The media type or mime_type, used to render an icon if media_content is empty
|
||||||
|
* }
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
|
||||||
|
function tainacan_get_the_media_component_slide( $args = array() ) {
|
||||||
|
|
||||||
|
$args = array_merge(array(
|
||||||
|
'before_slide_content' => '',
|
||||||
|
'after_slide_content' => '',
|
||||||
|
'class_slide_content' => '',
|
||||||
|
'before_slide_metadata' => '',
|
||||||
|
'after_slide_metadata' => '',
|
||||||
|
'class_slide_metadata' => '',
|
||||||
|
'media_content' => '',
|
||||||
|
'media_content_full' => '',
|
||||||
|
'media_title' => '',
|
||||||
|
'media_description' => '',
|
||||||
|
'media_caption' => '',
|
||||||
|
'media_type' => ''
|
||||||
|
), $args);
|
||||||
|
|
||||||
|
ob_start();
|
||||||
|
|
||||||
|
?>
|
||||||
|
<?php echo $args['before_slide_content'] ?>
|
||||||
|
|
||||||
|
<div class="swiper-slide-content <?php echo $args['class_slide_content'] ?>">
|
||||||
|
|
||||||
|
<?php if ( isset($args['media_content']) && !empty($args['media_content']) && $args['media_content'] !== false ) :?>
|
||||||
|
<?php echo $args['media_content'] ?>
|
||||||
|
<?php else: ?>
|
||||||
|
<img src="<?php echo tainacan_get_the_mime_type_icon($args['media_type']) ?>" alt="<?php echo ( !empty($args['media_title']) ? $args['media_title'] : __('File', 'tainacan') ) ?>" >
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php echo $args['before_slide_metadata'] ?>
|
||||||
|
|
||||||
|
<?php if ( !empty($args['media_title']) || !empty($args['description']) || !empty($args['media_caption']) ) : ?>
|
||||||
|
<div class="swiper-slide-metadata <?php echo $args['class_slide_metadata'] ?>">
|
||||||
|
<?php if ( !empty($args['media_caption']) ) :?>
|
||||||
|
<span class="swiper-slide-metadata__caption">
|
||||||
|
<?php echo $args['media_caption'] ?>
|
||||||
|
<br>
|
||||||
|
</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
<?php if ( !empty($args['media_title']) ) :?>
|
||||||
|
<span class="swiper-slide-metadata__name">
|
||||||
|
<?php echo $args['media_title'] ?>
|
||||||
|
</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
<br>
|
||||||
|
<?php if ( !empty($args['media_description']) ) :?>
|
||||||
|
<span class="swiper-slide-metadata__description">
|
||||||
|
<?php echo $args['media_description'] ?>
|
||||||
|
</span>
|
||||||
|
<?php endif; ?>
|
||||||
|
</div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php if ( !empty($args['media_content_full']) ) : ?>
|
||||||
|
<div class="media-full-content" style="display: none; position: absolute; visibility: hidden;"><?php echo $args['media_content_full'] ?></div>
|
||||||
|
<?php endif; ?>
|
||||||
|
|
||||||
|
<?php echo $args['after_slide_metadata'] ?>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<?php echo $args['after_slide_content'] ?>
|
||||||
|
|
||||||
|
<?php
|
||||||
|
|
||||||
|
$content = ob_get_contents();
|
||||||
|
ob_end_clean();
|
||||||
|
|
||||||
|
return $content;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Div with content necessay to render the photowipe modal
|
||||||
|
*
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
function tainacan_get_the_media_modal_layer() {
|
||||||
|
?>
|
||||||
|
<!-- Root element of PhotoSwipe lightbox. Must have class pswp. -->
|
||||||
|
<div class="tainacan-photoswipe-layer pswp" tabindex="-1" role="dialog" aria-hidden="true">
|
||||||
|
|
||||||
|
<!-- Background of PhotoSwipe.
|
||||||
|
It's a separate element, as animating opacity is faster than rgba(). -->
|
||||||
|
<div class="pswp__bg"></div>
|
||||||
|
|
||||||
|
<!-- Slides wrapper with overflow:hidden. -->
|
||||||
|
<div class="pswp__scroll-wrap">
|
||||||
|
|
||||||
|
<!-- Container that holds slides. PhotoSwipe keeps only 3 slides in DOM to save memory. -->
|
||||||
|
<!-- don't modify these 3 pswp__item elements, data is added later on. -->
|
||||||
|
<div class="pswp__container">
|
||||||
|
<div class="pswp__item"></div>
|
||||||
|
<div class="pswp__item"></div>
|
||||||
|
<div class="pswp__item"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
|
||||||
|
<div class="pswp__ui pswp__ui--hidden">
|
||||||
|
|
||||||
|
<div class="pswp__top-bar">
|
||||||
|
|
||||||
|
<!-- Controls are self-explanatory. Order can be changed. -->
|
||||||
|
<div class="pswp__counter"></div>
|
||||||
|
|
||||||
|
<div class="pswp__name"></div>
|
||||||
|
|
||||||
|
<button class="pswp__button pswp__button--close" title="<?php __('Close modal (Esc)', 'tainacan') ?>"></button>
|
||||||
|
<button class="pswp__button pswp__button--share" title="<?php __('Share', 'tainacan') ?>"></button>
|
||||||
|
<button class="pswp__button pswp__button--fs" title="<?php __('Toggle fullscreen', 'tainacan') ?>"></button>
|
||||||
|
<button class="pswp__button pswp__button--zoom" title="<?php __('Zoom in/out', 'tainacan') ?>"></button>
|
||||||
|
|
||||||
|
<!-- Preloader demo https://codepen.io/dimsemenov/pen/yyBWoR -->
|
||||||
|
<!-- element will get class pswp__preloader--active when preloader is running -->
|
||||||
|
<div class="pswp__preloader">
|
||||||
|
<div class="pswp__preloader__icn">
|
||||||
|
<div class="pswp__preloader__cut">
|
||||||
|
<div class="pswp__preloader__donut"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
|
||||||
|
<div class="pswp__share-tooltip"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<button class="pswp__button pswp__button--arrow--left" title="<?php __('Next', 'tainacan') ?>"></button>
|
||||||
|
|
||||||
|
<button class="pswp__button pswp__button--arrow--right" title="<?php __('Previous', 'tainacan') ?>"></button>
|
||||||
|
|
||||||
|
<div class="pswp__caption">
|
||||||
|
<div class="pswp__caption__center"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
<?php
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* When visiting a collection archive or single, returns the collection url link
|
* When visiting a collection archive or single, returns the collection url link
|
||||||
|
|
@ -545,3 +914,86 @@ function tainacan_get_initials($string, $one = false) {
|
||||||
$result = strtoupper($first . $second);
|
$result = strtoupper($first . $second);
|
||||||
return apply_filters('tainacan-get-initials', $result, $string, $one);
|
return apply_filters('tainacan-get-initials', $result, $string, $one);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Gets the icon mime type using our custom plugin thumbnails
|
||||||
|
*
|
||||||
|
* @param string $mime_type The mime_type or type of the file
|
||||||
|
* @param string $image_size The image size
|
||||||
|
*
|
||||||
|
* @return string
|
||||||
|
*/
|
||||||
|
function tainacan_get_the_mime_type_icon($mime_type, $image_size = 'medium') {
|
||||||
|
global $TAINACAN_BASE_URL;
|
||||||
|
$images_path = $TAINACAN_BASE_URL . '/assets/images/';
|
||||||
|
|
||||||
|
$icon_file = '';
|
||||||
|
|
||||||
|
switch($image_size) {
|
||||||
|
case 'full':
|
||||||
|
case 'large':
|
||||||
|
case 'tainacan-large-full':
|
||||||
|
$image_size = '';
|
||||||
|
break;
|
||||||
|
case 'small':
|
||||||
|
case 'tainacan-small':
|
||||||
|
case 'thumbnail':
|
||||||
|
$image_size = '_small';
|
||||||
|
break;
|
||||||
|
case '':
|
||||||
|
case 'medium':
|
||||||
|
case 'tainacan-medium':
|
||||||
|
case 'tainacan-medium-full':
|
||||||
|
case 'medium_large':
|
||||||
|
default:
|
||||||
|
$image_size = '_medium';
|
||||||
|
}
|
||||||
|
|
||||||
|
switch($mime_type) {
|
||||||
|
case 'image':
|
||||||
|
case 'image/png':
|
||||||
|
case 'image/jpeg':
|
||||||
|
case 'image/gif':
|
||||||
|
case 'image/bmp':
|
||||||
|
case 'image/webp':
|
||||||
|
case 'image/svg+xml':
|
||||||
|
$icon_file = 'placeholder_image';
|
||||||
|
break;
|
||||||
|
case 'audio':
|
||||||
|
case 'audio/midi':
|
||||||
|
case 'audio/mpeg':
|
||||||
|
case 'audio/mp3':
|
||||||
|
case 'audio/webm':
|
||||||
|
case 'audio/ogg':
|
||||||
|
case 'audio/wav':
|
||||||
|
$icon_file = 'placeholder_audio';
|
||||||
|
break;
|
||||||
|
case 'text':
|
||||||
|
case 'text/plain':
|
||||||
|
case 'text/html':
|
||||||
|
case 'text/css':
|
||||||
|
case 'text/javascript':
|
||||||
|
case 'text/csv':
|
||||||
|
$icon_file = 'placeholder_text';
|
||||||
|
break;
|
||||||
|
case 'video':
|
||||||
|
case 'video/webm':
|
||||||
|
case 'video/ogg':
|
||||||
|
case 'video/mpeg':
|
||||||
|
case 'video/mp4':
|
||||||
|
$icon_file = 'placeholder_video';
|
||||||
|
break;
|
||||||
|
case 'url':
|
||||||
|
$icon_file = 'placeholder_url';
|
||||||
|
break;
|
||||||
|
case 'application/pdf':
|
||||||
|
$icon_file = 'placeholder_pdf';
|
||||||
|
break;
|
||||||
|
case 'attachment':
|
||||||
|
case 'empty':
|
||||||
|
default:
|
||||||
|
$icon_file = 'placeholder_attachment';
|
||||||
|
}
|
||||||
|
|
||||||
|
return $images_path . $icon_file . $image_size . '.png';
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -25,6 +25,7 @@ class Date extends Metadata_Type {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
');
|
');
|
||||||
|
$this->output_date_format = get_option('date_format');
|
||||||
}
|
}
|
||||||
|
|
||||||
public function validate( Item_Metadata_Entity $item_metadata) {
|
public function validate( Item_Metadata_Entity $item_metadata) {
|
||||||
|
|
@ -43,10 +44,8 @@ class Date extends Metadata_Type {
|
||||||
}
|
}
|
||||||
|
|
||||||
$d = \DateTime::createFromFormat($format, $value);
|
$d = \DateTime::createFromFormat($format, $value);
|
||||||
|
|
||||||
if (!$d || $d->format($format) !== $value) {
|
if (!$d || $d->format($format) !== $value) {
|
||||||
$this->add_error($this->format_error_msg($value));
|
$this->add_error($this->format_error_msg($value));
|
||||||
|
|
||||||
return false;
|
return false;
|
||||||
}
|
}
|
||||||
return true;
|
return true;
|
||||||
|
|
@ -86,7 +85,7 @@ class Date extends Metadata_Type {
|
||||||
private function format_date_value($value) {
|
private function format_date_value($value) {
|
||||||
if (empty($value))
|
if (empty($value))
|
||||||
return "";
|
return "";
|
||||||
return mysql2date(get_option('date_format'), ($value));
|
return mysql2date($this->output_date_format, ($value));
|
||||||
}
|
}
|
||||||
|
|
||||||
private function format_error_msg($value) {
|
private function format_error_msg($value) {
|
||||||
|
|
|
||||||
|
|
@ -39,6 +39,7 @@ export const ThumbnailHelperFunctions = () => {
|
||||||
break;
|
break;
|
||||||
case 'audio/midi':
|
case 'audio/midi':
|
||||||
case 'audio/mpeg':
|
case 'audio/mpeg':
|
||||||
|
case 'audio/mp3':
|
||||||
case 'audio/webm':
|
case 'audio/webm':
|
||||||
case 'audio/ogg':
|
case 'audio/ogg':
|
||||||
case 'audio/wav':
|
case 'audio/wav':
|
||||||
|
|
@ -55,6 +56,7 @@ export const ThumbnailHelperFunctions = () => {
|
||||||
case 'video/webm':
|
case 'video/webm':
|
||||||
case 'video/ogg':
|
case 'video/ogg':
|
||||||
case 'video/mpeg':
|
case 'video/mpeg':
|
||||||
|
case 'video/mp4':
|
||||||
imageSrc = 'placeholder_video';
|
imageSrc = 'placeholder_video';
|
||||||
break;
|
break;
|
||||||
case 'url':
|
case 'url':
|
||||||
|
|
|
||||||
|
|
@ -238,6 +238,7 @@ class Admin {
|
||||||
'wp_ajax_url' => admin_url( 'admin-ajax.php' ),
|
'wp_ajax_url' => admin_url( 'admin-ajax.php' ),
|
||||||
'nonce' => is_user_logged_in() ? wp_create_nonce( 'wp_rest' ) : false,
|
'nonce' => is_user_logged_in() ? wp_create_nonce( 'wp_rest' ) : false,
|
||||||
'components' => $components,
|
'components' => $components,
|
||||||
|
'classes' => array(),
|
||||||
'i18n' => $tainacan_admin_i18n,
|
'i18n' => $tainacan_admin_i18n,
|
||||||
'user_caps' => $user_caps,
|
'user_caps' => $user_caps,
|
||||||
'user_prefs' => $prefs,
|
'user_prefs' => $prefs,
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,421 @@
|
||||||
|
// TAINACAN MEDIA COMPONENT --------------------------------------------------------
|
||||||
|
//
|
||||||
|
// Counts on some HMTL markup to make a list of media links be displayed
|
||||||
|
// as a carousel with a lightbox. Check examples in the end of the file
|
||||||
|
import PhotoSwipe from 'photoswipe/dist/photoswipe.min.js';
|
||||||
|
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default.min.js';
|
||||||
|
const { __ } = wp.i18n;
|
||||||
|
|
||||||
|
tainacan_plugin.classes.TainacanMediaGallery = class TainacanMediaGallery {
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Constructor initializes the instance. Options are Snake Case because they come from PHP side
|
||||||
|
* @param {String} thumbs_gallery_selector html element to be queried containing the thumbnails list
|
||||||
|
* @param {String} main_gallery_selector html element to be queried containing the main list
|
||||||
|
* @param {Object} options several options to be tweaked
|
||||||
|
* @param {Object} options.swiper_thumbs_options object with SwiperJS options for the thumbnails list (https://swiperjs.com/swiper-api)
|
||||||
|
* @param {Object} options.swiper_main_options object with SwiperJS options for the main list
|
||||||
|
* @param {Boolean} options.show_share_button show share button on lightbox
|
||||||
|
*
|
||||||
|
* @return {Object} TainacanMediaGallery instance
|
||||||
|
*/
|
||||||
|
constructor(thumbs_gallery_selector, main_gallery_selector, options) {
|
||||||
|
this.thumbs_gallery_selector = thumbs_gallery_selector;
|
||||||
|
this.main_gallery_selector = main_gallery_selector;
|
||||||
|
this.thumbsSwiper = null;
|
||||||
|
this.mainSwiper = null;
|
||||||
|
this.options = options;
|
||||||
|
|
||||||
|
this.initializeSwiper();
|
||||||
|
|
||||||
|
if (this.main_gallery_selector)
|
||||||
|
this.initPhotoSwipeFromDOM(this.main_gallery_selector + " .swiper-wrapper");
|
||||||
|
else if (this.thumbs_gallery_selector)
|
||||||
|
this.initPhotoSwipeFromDOM(this.thumbs_gallery_selector + " .swiper-wrapper");
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Initializes Swiper JS instances of carousels */
|
||||||
|
initializeSwiper() {
|
||||||
|
|
||||||
|
if (this.thumbs_gallery_selector) {
|
||||||
|
let thumbsSwiperOptions = {
|
||||||
|
spaceBetween: 12,
|
||||||
|
slidesPerView: 'auto',
|
||||||
|
navigation: {
|
||||||
|
nextEl: '.swiper-navigation-next_' + this.thumbs_gallery_selector,
|
||||||
|
prevEl: '.swiper-navigation-prev_' + this.thumbs_gallery_selector,
|
||||||
|
},
|
||||||
|
pagination: {
|
||||||
|
el: '.swiper-pagination_' + this.thumbs_gallery_selector
|
||||||
|
},
|
||||||
|
centerInsufficientSlides: true,
|
||||||
|
watchOverflow: true,
|
||||||
|
a11y: {
|
||||||
|
prevSlideMessage: __( 'Previous slide', 'tainacan'),
|
||||||
|
nextSlideMessage: __( 'Next slide', 'tainacan'),
|
||||||
|
firstSlideMessage: __('This is the first slide', 'tainacan'),
|
||||||
|
lastSlideMessage: __('This is the last slide', 'tainacan')
|
||||||
|
},
|
||||||
|
};
|
||||||
|
thumbsSwiperOptions = {...thumbsSwiperOptions, ...this.options.swiper_thumbs_options };
|
||||||
|
this.thumbsSwiper = new Swiper(this.thumbs_gallery_selector, thumbsSwiperOptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.main_gallery_selector) {
|
||||||
|
|
||||||
|
let mainSwiperOptions = {
|
||||||
|
slidesPerView: 1,
|
||||||
|
slidesPerGroup: 1,
|
||||||
|
// navigation: {
|
||||||
|
// nextEl: '.swiper-navigation-next_' + this.main_gallery_selector,
|
||||||
|
// prevEl: '.swiper-navigation-prev_' + this.main_gallery_selector,
|
||||||
|
// },
|
||||||
|
// pagination: {
|
||||||
|
// el: '.swiper-pagination_' + this.main_gallery_selector
|
||||||
|
// },
|
||||||
|
watchOverflow: true,
|
||||||
|
a11y: {
|
||||||
|
prevSlideMessage: __( 'Previous slide', 'tainacan'),
|
||||||
|
nextSlideMessage: __( 'Next slide', 'tainacan'),
|
||||||
|
firstSlideMessage: __('This is the first slide', 'tainacan'),
|
||||||
|
lastSlideMessage: __('This is the last slide', 'tainacan')
|
||||||
|
},
|
||||||
|
};
|
||||||
|
if (this.thumbsSwiper) {
|
||||||
|
mainSwiperOptions.thumbs = {
|
||||||
|
swiper: this.thumbsSwiper,
|
||||||
|
autoScrollOffset: 3
|
||||||
|
}
|
||||||
|
}
|
||||||
|
mainSwiperOptions = {...mainSwiperOptions, ...this.options.swiper_main_options };
|
||||||
|
this.mainSwiper = new Swiper(this.main_gallery_selector, mainSwiperOptions);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.thumbsMain && this.mainSwiper) {
|
||||||
|
this.mainSwiper.controller = {
|
||||||
|
control: this.thumbsSwiper,
|
||||||
|
by: 'slide'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
initPhotoSwipeFromDOM (gallerySelector) {
|
||||||
|
// loop through all gallery elements and bind events
|
||||||
|
let galleryElement = document.querySelector(gallerySelector);
|
||||||
|
|
||||||
|
galleryElement.setAttribute("data-pswp-uid", this.options.media_id);
|
||||||
|
galleryElement.onclick = (event) => this.onThumbnailsClick(event, this);
|
||||||
|
|
||||||
|
// Parse URL and open gallery if it contains #&pid=3&gid=1
|
||||||
|
let hashData = this.photoswipeParseHash();
|
||||||
|
|
||||||
|
if (hashData.pid && hashData.gid)
|
||||||
|
this.openPhotoSwipe(hashData.pid, galleryElement, true, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
// parse slide data (url, title, size ...) from DOM elements
|
||||||
|
// (children of gallerySelector)
|
||||||
|
parseThumbnailElements(el) {
|
||||||
|
let items = [];
|
||||||
|
const galleryElements = el.childNodes;
|
||||||
|
|
||||||
|
// Crossbrowser safe way to traverse nodeList
|
||||||
|
Array.prototype.forEach.call(galleryElements, (liElement) => {
|
||||||
|
|
||||||
|
// Include only element nodes
|
||||||
|
if (liElement.nodeType === 1) {
|
||||||
|
|
||||||
|
let item = {};
|
||||||
|
let fullContentElement = liElement.querySelectorAll('.media-full-content *');
|
||||||
|
|
||||||
|
if ( !fullContentElement.length ) {
|
||||||
|
item = {
|
||||||
|
html: fullContentElement.outerHTML ? fullContentElement.outerHTML : fullContentElement
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
if (fullContentElement[fullContentElement.length - 1].nodeName === 'IMG') {
|
||||||
|
fullContentElement = fullContentElement[fullContentElement.length - 1];
|
||||||
|
item = {
|
||||||
|
src: fullContentElement.src,
|
||||||
|
w: parseInt(fullContentElement.width),
|
||||||
|
h: parseInt(fullContentElement.height)
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
fullContentElement = fullContentElement[0];
|
||||||
|
item = {
|
||||||
|
html: fullContentElement.outerHTML ? fullContentElement.outerHTML : fullContentElement
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
let metadataElement = liElement.querySelector('.swiper-slide-metadata');
|
||||||
|
if (metadataElement) {
|
||||||
|
const name = metadataElement.querySelector('.swiper-slide-metadata__name');
|
||||||
|
const caption = metadataElement.querySelector('.swiper-slide-metadata__caption');
|
||||||
|
const description = metadataElement.querySelector('.swiper-slide-metadata__description');
|
||||||
|
|
||||||
|
item.title = {
|
||||||
|
name,
|
||||||
|
caption,
|
||||||
|
description
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
item.title = false;
|
||||||
|
}
|
||||||
|
|
||||||
|
item.el = liElement; // save link to element for getThumbBoundsFn
|
||||||
|
items.push(item);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return items;
|
||||||
|
};
|
||||||
|
|
||||||
|
openPhotoSwipe(
|
||||||
|
index,
|
||||||
|
galleryElement,
|
||||||
|
disableAnimation,
|
||||||
|
fromURL
|
||||||
|
) {
|
||||||
|
let pswpElement = document.querySelectorAll(".pswp")[0],
|
||||||
|
gallery,
|
||||||
|
options,
|
||||||
|
items;
|
||||||
|
items = this.parseThumbnailElements(galleryElement);
|
||||||
|
|
||||||
|
// Photoswipe options
|
||||||
|
// https://photoswipe.com/documentation/options.html //
|
||||||
|
options = {
|
||||||
|
showHideOpacity: true,
|
||||||
|
loop: false,
|
||||||
|
timeToIdle: 6000,
|
||||||
|
timeToIdleOutside: 3000,
|
||||||
|
closeEl: true,
|
||||||
|
captionEl: true,
|
||||||
|
fullscreenEl: true,
|
||||||
|
zoomEl: true,
|
||||||
|
counterEl: true,
|
||||||
|
arrowEl: true,
|
||||||
|
preloaderEl: true,
|
||||||
|
shareEl: this.options.show_share_button ? this.options.show_share_button : false,
|
||||||
|
bgOpacity: 1,
|
||||||
|
// define gallery index (for URL)
|
||||||
|
galleryUID: galleryElement.getAttribute("data-pswp-uid"),
|
||||||
|
getThumbBoundsFn: (index) => {
|
||||||
|
let thumbnail = items[index].el,
|
||||||
|
pageYScroll = window.pageYOffset || document.documentElement.scrollTop,
|
||||||
|
rect = thumbnail.getBoundingClientRect();
|
||||||
|
|
||||||
|
return { x: rect.left, y: rect.top + pageYScroll, w: rect.width };
|
||||||
|
},
|
||||||
|
// Function builds caption markup
|
||||||
|
addCaptionHTMLFn: (item, captionEl, isFake) => {
|
||||||
|
// item - slide object
|
||||||
|
// captionEl - caption DOM element
|
||||||
|
// isFake - true when content is added to fake caption container
|
||||||
|
// (used to get size of next or previous caption)
|
||||||
|
|
||||||
|
captionEl.children[0].innerHTML = '';
|
||||||
|
|
||||||
|
if(!item.title)
|
||||||
|
return false;
|
||||||
|
|
||||||
|
if (item.title.caption)
|
||||||
|
captionEl.children[0].innerHTML += '<span class="pswp__figure_caption">' + item.title.caption.innerHTML + '</span>';
|
||||||
|
|
||||||
|
if (item.title.name && item.title.caption || (!item.title.name && item.title.caption && item.title.description) )
|
||||||
|
captionEl.children[0].innerHTML += '<br>';
|
||||||
|
|
||||||
|
if (item.title.name)
|
||||||
|
captionEl.children[0].innerHTML += '<span class="pswp__name">' + item.title.name.innerHTML + '</span>';
|
||||||
|
|
||||||
|
if (item.title.description && item.title.name)
|
||||||
|
captionEl.children[0].innerHTML += '<br>';
|
||||||
|
|
||||||
|
if (item.title.description)
|
||||||
|
captionEl.children[0].innerHTML += '<span class="pswp__description">' + item.title.description.innerHTML + '</span>';
|
||||||
|
|
||||||
|
return true;
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
|
||||||
|
// PhotoSwipe opened from URL
|
||||||
|
if (fromURL) {
|
||||||
|
if (options.galleryPIDs) {
|
||||||
|
// parse real index when custom PIDs are used
|
||||||
|
// http://photoswipe.com/documentation/faq.html#custom-pid-in-url
|
||||||
|
for (let j = 0; j < items.length; j++) {
|
||||||
|
if (items[j].pid == index) {
|
||||||
|
options.index = j;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// in URL indexes start from 1
|
||||||
|
options.index = parseInt(index, 10) - 1;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
options.index = parseInt(index, 10);
|
||||||
|
}
|
||||||
|
|
||||||
|
// exit if index not found
|
||||||
|
if (isNaN(options.index))
|
||||||
|
return;
|
||||||
|
|
||||||
|
if (disableAnimation)
|
||||||
|
options.showAnimationDuration = 0;
|
||||||
|
|
||||||
|
// Pass data to PhotoSwipe and initialize it
|
||||||
|
gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, options);
|
||||||
|
gallery.init();
|
||||||
|
|
||||||
|
/* Updates PhotoSwiper instance from Swiper */
|
||||||
|
let swiperInstance = this.mainSwiper ? this.mainSwiper : this.thumbsSwiper;
|
||||||
|
|
||||||
|
gallery.listen("unbindEvents", () => {
|
||||||
|
// This is index of current photoswipe slide
|
||||||
|
let getCurrentIndex = gallery.getCurrentIndex();
|
||||||
|
// Update position of the slider
|
||||||
|
swiperInstance.slideTo(getCurrentIndex, 0, false);
|
||||||
|
// Start swiper autoplay (on close - if swiper autoplay is true)
|
||||||
|
if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled)
|
||||||
|
swiperInstance.autoplay.start();
|
||||||
|
});
|
||||||
|
|
||||||
|
// Swiper autoplay stop when image zoom */
|
||||||
|
gallery.listen('initialZoomIn', () => {
|
||||||
|
if (swiperInstance.params && swiperInstance.params.autoplay && swiperInstance.params.autoplay.enabled && swiperInstance.autoplay.running)
|
||||||
|
swiperInstance.autoplay.stop();
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
// triggers when user clicks on thumbnail
|
||||||
|
onThumbnailsClick(e, self) {
|
||||||
|
e = e || window.event;
|
||||||
|
e.preventDefault ? e.preventDefault() : (e.returnValue = false);
|
||||||
|
|
||||||
|
let eTarget = e.target || e.srcElement;
|
||||||
|
|
||||||
|
// find root element of slide
|
||||||
|
let closest = function closest(el, fn) {
|
||||||
|
return el && (fn(el) ? el : closest(el.parentNode, fn));
|
||||||
|
};
|
||||||
|
|
||||||
|
let clickedListItem = closest(eTarget, function(el) {
|
||||||
|
return el.tagName && el.tagName.toUpperCase() === "LI";
|
||||||
|
});
|
||||||
|
|
||||||
|
if (!clickedListItem)
|
||||||
|
return;
|
||||||
|
|
||||||
|
// find index of clicked item by looping through all child nodes
|
||||||
|
// alternatively, you may define index via data- attribute
|
||||||
|
let clickedGallery = clickedListItem.parentNode,
|
||||||
|
childNodes = clickedListItem.parentNode.childNodes,
|
||||||
|
numChildNodes = childNodes.length,
|
||||||
|
nodeIndex = 0,
|
||||||
|
index;
|
||||||
|
|
||||||
|
for (let i = 0; i < numChildNodes; i++) {
|
||||||
|
if (childNodes[i].nodeType !== 1)
|
||||||
|
continue;
|
||||||
|
|
||||||
|
if (childNodes[i] === clickedListItem) {
|
||||||
|
index = nodeIndex;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
nodeIndex++;
|
||||||
|
}
|
||||||
|
|
||||||
|
// open PhotoSwipe if valid index found
|
||||||
|
if (index >= 0)
|
||||||
|
self.openPhotoSwipe(index, clickedGallery);
|
||||||
|
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
// parse picture index and gallery index from URL (#&pid=1&gid=2)
|
||||||
|
photoswipeParseHash() {
|
||||||
|
const hash = window.location.hash.substring(1),
|
||||||
|
params = {};
|
||||||
|
|
||||||
|
if (hash.length < 5)
|
||||||
|
return params;
|
||||||
|
|
||||||
|
const vars = hash.split("&");
|
||||||
|
for (let i = 0; i < vars.length; i++) {
|
||||||
|
if (!vars[i])
|
||||||
|
continue;
|
||||||
|
|
||||||
|
const pair = vars[i].split("=");
|
||||||
|
if (pair.length < 2)
|
||||||
|
continue;
|
||||||
|
|
||||||
|
params[pair[0]] = pair[1];
|
||||||
|
}
|
||||||
|
|
||||||
|
if (params.gid)
|
||||||
|
params.gid = parseInt(params.gid, 10);
|
||||||
|
|
||||||
|
return params;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Loads and instantiates media components passed to the global variable */
|
||||||
|
document.addEventListener('DOMContentLoaded', function() {
|
||||||
|
if (tainacan_plugin?.classes?.TainacanMediaGallery && tainacan_plugin?.tainacan_media_components) {
|
||||||
|
(Object.values(tainacan_plugin.tainacan_media_components) || []).forEach((component) => {
|
||||||
|
new tainacan_plugin.classes.TainacanMediaGallery(
|
||||||
|
component.has_media_thumbs ? '#' + component.media_thumbs_id : null,
|
||||||
|
component.has_media_main ? '#' + component.media_main_id : null,
|
||||||
|
component
|
||||||
|
);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
/*
|
||||||
|
|
||||||
|
---- Carousel of thumbnails only ----------------------------------------
|
||||||
|
|
||||||
|
<div class="swiper-container-thumbs swiper-container">
|
||||||
|
<ul class="swiper-wrapper">
|
||||||
|
<li class="swiper-slide">
|
||||||
|
<a href="link-to-full-image-or-file">
|
||||||
|
<img href="link-to-thumbnail" alt..>
|
||||||
|
<span class="swiper-slide-name>File name</span>
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
new TainacanMediaGallery(.swiper-container-thumbs, null, {...});
|
||||||
|
|
||||||
|
|
||||||
|
---- Carousel of thumbnails with main slider ----------------------------
|
||||||
|
|
||||||
|
<div class="swiper-container-main swiper-container">
|
||||||
|
<ul class="swiper-wrapper">
|
||||||
|
<li class="swiper-slide">
|
||||||
|
<a href="link-to-full-image-or-file">
|
||||||
|
<img href="link-to-medium-or-large" alt..>
|
||||||
|
<span class="swiper-slide-name>File name</span>
|
||||||
|
|
||||||
|
</a>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<div class="swiper-container-thumbs swiper-container">
|
||||||
|
<ul class="swiper-wrapper">
|
||||||
|
<li class="swiper-slide">
|
||||||
|
<img href="link-to-thumbnail" alt..>
|
||||||
|
<span class="swiper-slide-name>File name</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
new TainacanMediaGallery(.swiper-container-thumbs, .swiper-container-main, {...});
|
||||||
|
|
||||||
|
*/
|
||||||
|
|
@ -0,0 +1,381 @@
|
||||||
|
$pswp__show-hide-transition-duration: 333ms !default;
|
||||||
|
$pswp__controls-transition-duration: 333ms !default;
|
||||||
|
$pswp__background-color: rgba(0,0,0, 0.8) !default;
|
||||||
|
$pswp__placeholder-color: #222 !default;
|
||||||
|
$pswp__box-sizing-border-box: true !default; // disable .pswp * { box-sizing:border-box } (in case you already have it in your site css)
|
||||||
|
$pswp__root-z-index: 9999999 !default;
|
||||||
|
$pswp__assets-path: '../images/' !default; // path to skin assets folder (preloader, PNG and SVG sprite)
|
||||||
|
$pswp__error-text-color: #CCC !default; // "Image not loaded" text color
|
||||||
|
$pswp__include-minimal-style: true !default;
|
||||||
|
|
||||||
|
@import '../../../node_modules/photoswipe/src/css/main.scss';
|
||||||
|
@import '../../../node_modules/photoswipe/src/css/default-skin/default-skin.scss';
|
||||||
|
|
||||||
|
.tainacan-media-component {
|
||||||
|
--swiper-theme-color: var(--tainacan-secondary, #298596);
|
||||||
|
--swiper-navigation-size: 44px;
|
||||||
|
--tainacan-media-background: var(--tainacan-background-color, #ffffff);
|
||||||
|
--tainacan-media-main-carousel-height: 60vh;
|
||||||
|
--tainacan-media-main-carousel-width: 100%;
|
||||||
|
--tainacan-media-thumbs-carousel-width: 100%;
|
||||||
|
--tainacan-media-thumbs-carousel-item-size: 136px;
|
||||||
|
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
display: block;
|
||||||
|
background-color: var(--tainacan-media-background, #ffffff);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Style valid for both cases of carousel, main and thumbs */
|
||||||
|
.tainacan-media-component__swiper-main,
|
||||||
|
.tainacan-media-component__swiper-thumbs {
|
||||||
|
.swiper-button-prev::after,
|
||||||
|
.swiper-container-rtl .swiper-button-next::after {
|
||||||
|
content: 'previous';
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-button-next::after,
|
||||||
|
.swiper-button-prev::after {
|
||||||
|
font-family: "TainacanIcons";
|
||||||
|
opacity: 0.7;
|
||||||
|
transition: opacity ease 0.2s;
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
.swiper-button-next::after,
|
||||||
|
.swiper-button-prev::after {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
ul.swiper-wrapper {
|
||||||
|
list-style: none;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.tainacan-media-component__swiper-main {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--tainacan-media-main-carousel-width, 100%);
|
||||||
|
|
||||||
|
ul.swiper-wrapper {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 30px;
|
||||||
|
|
||||||
|
&[data-pswp-uid] li.swiper-slide img {
|
||||||
|
cursor: zoom-in !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
li.swiper-slide {
|
||||||
|
height: 100%;
|
||||||
|
max-width: calc(100% - var(--swiper-navigation-size, 44px) - var(--swiper-navigation-size, 44px));
|
||||||
|
min-width: 100%;
|
||||||
|
padding: 0 var(--swiper-navigation-size, 44px);
|
||||||
|
opacity: 1.0;
|
||||||
|
transition: opacity 0.2s linear;
|
||||||
|
|
||||||
|
&:not(.swiper-slide-active) {
|
||||||
|
opacity: 0.75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide-metadata {
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&.hide-name .swiper-slide-metadata__name {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
&.hide-description .swiper-slide-metadata__description {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
&.hide-caption .swiper-slide-metadata__caption {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide-metadata__name {
|
||||||
|
font-size: 1em;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--tainacan-label-color, #454647);
|
||||||
|
}
|
||||||
|
.swiper-slide-metadata__caption {
|
||||||
|
font-size: 0.9375em;
|
||||||
|
color: var(--tainacan-input-color, #1d1d1d);
|
||||||
|
}
|
||||||
|
.swiper-slide-metadata__caption {
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--tainacan-info-color, #555758);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-slide-content {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.tainacan-embed-container {
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
}
|
||||||
|
iframe {
|
||||||
|
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
border: none;
|
||||||
|
display: block;
|
||||||
|
background-image: url('../images/preloader.gif');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:first-of-type,
|
||||||
|
p:first-of-type {
|
||||||
|
z-index: 99;
|
||||||
|
background: var(--tainacan-media-background, #ffffff);
|
||||||
|
border-radius: 3px;
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
audio {
|
||||||
|
background: black;
|
||||||
|
min-height: 38px;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
min-height: 56px;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: auto;
|
||||||
|
max-height: var(--tainacan-media-main-carousel-height, 60vh);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tainacan-media-component__swiper-thumbs {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--tainacan-media-thumbs-carousel-width, 100%);
|
||||||
|
|
||||||
|
ul.swiper-wrapper {
|
||||||
|
max-width: calc(100% - var(--swiper-navigation-size, 44px) - var(--swiper-navigation-size, 44px));
|
||||||
|
margin: 0 var(--swiper-navigation-size, 44px);
|
||||||
|
margin-bottom: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
li.swiper-slide {
|
||||||
|
text-align: center;
|
||||||
|
vertical-align: top;
|
||||||
|
word-break: break-all;
|
||||||
|
font-size: 0.875em;
|
||||||
|
max-width: calc(var(--tainacan-media-thumbs-carousel-item-size, 136px) + 17px);
|
||||||
|
cursor: zoom-in;
|
||||||
|
|
||||||
|
@media only screen and (max-width: 380px) {
|
||||||
|
margin: 10px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
|
||||||
|
height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
|
||||||
|
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
|
||||||
|
max-height: var(--tainacan-media-thumbs-carousel-item-size, 136px);
|
||||||
|
object-fit: cover;
|
||||||
|
object-position: center;
|
||||||
|
border-bottom-width: 6px;
|
||||||
|
border-bottom-style: solid;
|
||||||
|
background-color: var(--tainacan-media-background, #ffffff);
|
||||||
|
border-bottom-color: rgba(255,255,255, 0.0);
|
||||||
|
opacity: 0.85;
|
||||||
|
transition: opacity 0.3s ease, border-bottom-color 0.3s ease;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
opacity: 0.95;
|
||||||
|
outline: none;
|
||||||
|
border-bottom-color: var(--swiper-theme-color, #298596);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
&.swiper-slide-thumb-active {
|
||||||
|
.swiper-slide-metadata__name {
|
||||||
|
font-weight: bold;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
opacity: 1.0;
|
||||||
|
border-bottom-color: var(--swiper-theme-color, #298596);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.swiper-slide-metadata__name {
|
||||||
|
font-size: 1em;
|
||||||
|
color: var(--tainacan-label-color, #454647);
|
||||||
|
}
|
||||||
|
.swiper-slide-metadata__caption {
|
||||||
|
font-size: 0.9375em;
|
||||||
|
color: var(--tainacan-input-color, #1d1d1d);
|
||||||
|
}
|
||||||
|
.swiper-slide-metadata__caption {
|
||||||
|
font-size: 0.875em;
|
||||||
|
color: var(--tainacan-info-color, #555758);
|
||||||
|
}
|
||||||
|
.swiper-slide-metadata {
|
||||||
|
text-align: center;
|
||||||
|
display: block;
|
||||||
|
margin-top: 0.5rem;
|
||||||
|
|
||||||
|
&.hide-name .swiper-slide-metadata__name {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
&.hide-description .swiper-slide-metadata__description {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
&.hide-caption .swiper-slide-metadata__caption {
|
||||||
|
display: none;
|
||||||
|
visibility: hidden;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
width: 100%;
|
||||||
|
max-width: var(--tainacan-media-thumbs-carousel-item-size, 136px);
|
||||||
|
text-align: center;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
a,
|
||||||
|
a:focus,
|
||||||
|
a:hover {
|
||||||
|
outline: none;
|
||||||
|
text-decoration: none;
|
||||||
|
color: var(--tainacan-gray5, #454647);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.swiper-start-border {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: calc(32px + var(--swiper-navigation-size, 44px));
|
||||||
|
background-image: linear-gradient(90deg, var(--tainacan-media-background, #ffffff) 25%, transparent);
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
.swiper-end-border {
|
||||||
|
position: absolute;
|
||||||
|
height: 100%;
|
||||||
|
width: calc(32px + var(--swiper-navigation-size, 44px));
|
||||||
|
background-image: linear-gradient(90deg, transparent, var(--tainacan-media-background, #ffffff) 75%);
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.tainacan-media-component__swiper-main+.tainacan-media-component__swiper-thumbs {
|
||||||
|
li.swiper-slide {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Photoswip zoom ---------------------------------
|
||||||
|
.tainacan-photoswipe-layer {
|
||||||
|
.pswp__bg {
|
||||||
|
background-color: rgba(0, 0, 0, 0.85);
|
||||||
|
}
|
||||||
|
.pswp__ui--fit .pswp__top-bar,
|
||||||
|
.pswp__ui--fit .pswp__caption {
|
||||||
|
background-color: rgba(0, 0, 0, 0.7);
|
||||||
|
}
|
||||||
|
.pswp__button--arrow--left::before,
|
||||||
|
.pswp__button--arrow--right::before {
|
||||||
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pswp__container {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
.attachment-without-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
&.tainacan-embed-container:not(.tainacan-embed-without-iframe) {
|
||||||
|
padding: 0px;
|
||||||
|
}
|
||||||
|
.tainacan-embed-container .twitter-tweet {
|
||||||
|
width: 100vw !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
iframe {
|
||||||
|
padding: 44px;
|
||||||
|
min-height: 90vh;
|
||||||
|
max-height: 90vh;
|
||||||
|
height: 100%;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 100%;
|
||||||
|
margin: 0 auto;
|
||||||
|
border: none;
|
||||||
|
display: block;
|
||||||
|
background-image: url('../images/preloader.gif');
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
a:first-of-type,
|
||||||
|
p:first-of-type ,
|
||||||
|
article:first-of-type {
|
||||||
|
z-index: 99;
|
||||||
|
padding: 1rem 4.33337vw;
|
||||||
|
background: var(--tainacan-media-background, #ffffff);
|
||||||
|
border-radius: var(--borderRadius, 3px);
|
||||||
|
word-wrap: break-word;
|
||||||
|
}
|
||||||
|
audio {
|
||||||
|
background: black;
|
||||||
|
min-height: 38px;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
video {
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.pswp__top-bar .pswp__name {
|
||||||
|
color: white;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1.125em;
|
||||||
|
display: block;
|
||||||
|
height: 44px;
|
||||||
|
max-width: calc(100% - 240px);
|
||||||
|
width: 100%;
|
||||||
|
left: 44px;
|
||||||
|
position: absolute;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
line-height: 44px;
|
||||||
|
padding: 0 10px;
|
||||||
|
}
|
||||||
|
.pswp__figure_caption {
|
||||||
|
font-size: 0.875em;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
.pswp__description {
|
||||||
|
font-size: 0.9375em;
|
||||||
|
}
|
||||||
|
.pswp__caption__center {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 1em;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -1,8 +1,10 @@
|
||||||
let path = require('path');
|
let path = require('path');
|
||||||
|
const webpack = require('webpack');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
entry: {
|
entry: {
|
||||||
admin: './src/views/admin/js/main.js',
|
admin: './src/views/admin/js/main.js',
|
||||||
|
media_component: './src/views/media-component/media-component.js',
|
||||||
theme_search: './src/views/theme-search/js/theme-main.js',
|
theme_search: './src/views/theme-search/js/theme-main.js',
|
||||||
item_submission: './src/views/item-submission/js/item-submission-main.js',
|
item_submission: './src/views/item-submission/js/item-submission-main.js',
|
||||||
roles: './src/views/roles/js/roles-main.js',
|
roles: './src/views/roles/js/roles-main.js',
|
||||||
|
|
@ -102,5 +104,11 @@ module.exports = {
|
||||||
},
|
},
|
||||||
performance: {
|
performance: {
|
||||||
hints: false
|
hints: false
|
||||||
}
|
},
|
||||||
|
plugins: [
|
||||||
|
new webpack.ProvidePlugin({
|
||||||
|
'Swiper': 'Swiper',
|
||||||
|
'PhotoSwipe': 'PhotoSwipe'
|
||||||
|
})
|
||||||
|
]
|
||||||
};
|
};
|
||||||
Loading…
Reference in New Issue