Vinícius Nunes Medeiros
GitHub
commit
52acf6f8ad
|
|
@ -13,31 +13,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-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-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!"
|
||||
exit 0
|
||||
|
|
|
|||
|
|
@ -3513,18 +3513,32 @@
|
|||
"dev": true
|
||||
},
|
||||
"elliptic": {
|
||||
"version": "6.5.3",
|
||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.3.tgz",
|
||||
"integrity": "sha512-IMqzv5wNQf+E6aHeIqATs0tOLeOTwj1QKbRcS3jBbYkl5oLAserA8yJTT7/VyHUYG91PRmPyeQDObKLPpeS4dw==",
|
||||
"version": "6.5.4",
|
||||
"resolved": "https://registry.npmjs.org/elliptic/-/elliptic-6.5.4.tgz",
|
||||
"integrity": "sha512-iLhC6ULemrljPZb+QutR5TQGB+pdW6KGD5RSegS+8sorOZT+rdQFbsQFJgvN3eRqNALqJer4oQ16YvJHlU8hzQ==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"bn.js": "^4.4.0",
|
||||
"brorand": "^1.0.1",
|
||||
"bn.js": "^4.11.9",
|
||||
"brorand": "^1.1.0",
|
||||
"hash.js": "^1.0.0",
|
||||
"hmac-drbg": "^1.0.0",
|
||||
"inherits": "^2.0.1",
|
||||
"minimalistic-assert": "^1.0.0",
|
||||
"minimalistic-crypto-utils": "^1.0.0"
|
||||
"hmac-drbg": "^1.0.1",
|
||||
"inherits": "^2.0.4",
|
||||
"minimalistic-assert": "^1.0.1",
|
||||
"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": {
|
||||
|
|
@ -7539,6 +7553,11 @@
|
|||
"resolved": "https://registry.npmjs.org/performance-now/-/performance-now-2.1.0.tgz",
|
||||
"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": {
|
||||
"version": "2.3.0",
|
||||
"resolved": "https://registry.npmjs.org/pify/-/pify-2.3.0.tgz",
|
||||
|
|
|
|||
|
|
@ -8,14 +8,15 @@
|
|||
"build-prod": "cross-env NODE_ENV=production webpack --config webpack.prod.js --display-error-details --progress --hide-modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"blurhash": "^1.1.3",
|
||||
"axios": "^0.21.1",
|
||||
"blurhash": "^1.1.3",
|
||||
"buefy": "^0.9.4",
|
||||
"bulma": "^0.9.1",
|
||||
"css-vars-ponyfill": "^2.3.1",
|
||||
"mdi": "^2.2.43",
|
||||
"moment": "^2.25.3",
|
||||
"node-sass": "^4.14.1",
|
||||
"photoswipe": "^4.1.3",
|
||||
"qs": "^6.9.4",
|
||||
"react": "^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) {
|
||||
padding-bottom: 56.25%;
|
||||
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 object,
|
||||
.tainacan-embed-container embed {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
|
|
|||
|
|
@ -16,7 +16,6 @@ body:not([class]) > iframe {
|
|||
min-height: 80vh;
|
||||
border: none;
|
||||
}
|
||||
body:not([class]) > audio,
|
||||
body:not([class]) > video {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
|
|
@ -25,6 +24,11 @@ body:not([class]) > video {
|
|||
}
|
||||
body:not([class]) > audio {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
border-radius: 20px;
|
||||
background: black;
|
||||
min-height: 38px;
|
||||
max-height: 100%;
|
||||
}
|
||||
body:not([class]) > a,
|
||||
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 |
|
|
@ -21,8 +21,6 @@ class Media {
|
|||
|
||||
protected function __construct() {
|
||||
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_action( 'template_redirect', [$this, 'attachment_page'] );
|
||||
|
|
@ -367,6 +365,7 @@ class Media {
|
|||
$output .= $img;
|
||||
|
||||
} else {
|
||||
$this->add_css();
|
||||
wp_print_styles('tainacan-media-page');
|
||||
global $wp_embed;
|
||||
|
||||
|
|
|
|||
|
|
@ -725,7 +725,7 @@ class Item extends Entity {
|
|||
}
|
||||
$output .= $_embed;
|
||||
} elseif ( $type == 'text' ) {
|
||||
$output .= $this->get_document();
|
||||
$output .= '<article>' . $this->get_document() . '</article>';
|
||||
} elseif ( $type == 'attachment' ) {
|
||||
|
||||
if ( wp_attachment_is_image($this->get_document()) ) {
|
||||
|
|
|
|||
|
|
@ -17,17 +17,11 @@ use \Tainacan\Repositories;
|
|||
* Optional. Array or string of arguments.
|
||||
*
|
||||
* @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__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_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 $hide_empty Wether to hide or not metadata the item has no value to
|
||||
* Default: true
|
||||
* @type string $before String to be added before each metadata block
|
||||
|
|
@ -70,17 +64,54 @@ function tainacan_the_metadata($args = array()) {
|
|||
*
|
||||
* 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
|
||||
*/
|
||||
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);
|
||||
|
||||
if (!$item)
|
||||
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) {
|
||||
|
|
@ -112,10 +143,19 @@ function tainacan_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
|
||||
*/
|
||||
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);
|
||||
|
||||
|
|
@ -123,7 +163,7 @@ function tainacan_get_single_attachment_as_html($attachment_id, $item_id = 0) {
|
|||
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();
|
||||
}
|
||||
|
||||
/**
|
||||
* 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
|
||||
|
|
@ -545,3 +914,86 @@ function tainacan_get_initials($string, $one = false) {
|
|||
$result = strtoupper($first . $second);
|
||||
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';
|
||||
}
|
||||
|
|
|
|||
|
|
@ -39,6 +39,7 @@ export const ThumbnailHelperFunctions = () => {
|
|||
break;
|
||||
case 'audio/midi':
|
||||
case 'audio/mpeg':
|
||||
case 'audio/mp3':
|
||||
case 'audio/webm':
|
||||
case 'audio/ogg':
|
||||
case 'audio/wav':
|
||||
|
|
@ -55,6 +56,7 @@ export const ThumbnailHelperFunctions = () => {
|
|||
case 'video/webm':
|
||||
case 'video/ogg':
|
||||
case 'video/mpeg':
|
||||
case 'video/mp4':
|
||||
imageSrc = 'placeholder_video';
|
||||
break;
|
||||
case 'url':
|
||||
|
|
|
|||
|
|
@ -238,6 +238,7 @@ class Admin {
|
|||
'wp_ajax_url' => admin_url( 'admin-ajax.php' ),
|
||||
'nonce' => is_user_logged_in() ? wp_create_nonce( 'wp_rest' ) : false,
|
||||
'components' => $components,
|
||||
'classes' => array(),
|
||||
'i18n' => $tainacan_admin_i18n,
|
||||
'user_caps' => $user_caps,
|
||||
'user_prefs' => $prefs,
|
||||
|
|
@ -247,7 +248,7 @@ class Admin {
|
|||
'theme_collection_list_url' => get_post_type_archive_link( 'tainacan-collection' ),
|
||||
'custom_header_support' => get_theme_support('custom-header'),
|
||||
'registered_view_modes' => \Tainacan\Theme_Helper::get_instance()->get_registered_view_modes(),
|
||||
'exposer_mapper_param' => \Tainacan\Mappers_Handler::MAPPER_PARAM,
|
||||
'exposer_mapper_param' => \Tainacan\Mappers_Handler::MAPPER_PARAM,
|
||||
'exposer_type_param' => \Tainacan\Exposers_Handler::TYPE_PARAM,
|
||||
'repository_name' => get_bloginfo('name'),
|
||||
'api_max_items_per_page' => $TAINACAN_API_MAX_ITEMS_PER_PAGE,
|
||||
|
|
@ -266,13 +267,13 @@ class Admin {
|
|||
$metadata_types = $Tainacan_Metadata->fetch_metadata_types();
|
||||
|
||||
foreach( $maps as $type => $map ){
|
||||
foreach ( $map as $metadatum => $details){
|
||||
$settings['i18n']['helpers_label'][$type][$metadatum] = [ 'title' => $details['title'], 'description' => $details['description'] ];
|
||||
}
|
||||
}
|
||||
foreach ( $metadata_types as $index => $metadata_type){
|
||||
$class = new $metadata_type;
|
||||
$settings['i18n']['helpers_label'][$class->get_component()] = $class->get_form_labels();
|
||||
foreach ( $map as $metadatum => $details){
|
||||
$settings['i18n']['helpers_label'][$type][$metadatum] = [ 'title' => $details['title'], 'description' => $details['description'] ];
|
||||
}
|
||||
}
|
||||
foreach ( $metadata_types as $index => $metadata_type){
|
||||
$class = new $metadata_type;
|
||||
$settings['i18n']['helpers_label'][$class->get_component()] = $class->get_form_labels();
|
||||
}
|
||||
|
||||
$filter_types = $Tainacan_Filters->fetch_filter_types();
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
const webpack = require('webpack');
|
||||
|
||||
module.exports = {
|
||||
entry: {
|
||||
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',
|
||||
item_submission: './src/views/item-submission/js/item-submission-main.js',
|
||||
roles: './src/views/roles/js/roles-main.js',
|
||||
|
|
@ -102,5 +104,11 @@ module.exports = {
|
|||
},
|
||||
performance: {
|
||||
hints: false
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.ProvidePlugin({
|
||||
'Swiper': 'Swiper',
|
||||
'PhotoSwipe': 'PhotoSwipe'
|
||||
})
|
||||
]
|
||||
};
|
||||
Loading…
Reference in New Issue