Create Tainacan Blocks category, add a carousel, adjusts carousel styles (#136)
This commit is contained in:
parent
e619fc3fa1
commit
11c23c29ea
|
@ -885,6 +885,11 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@brainhubeu/react-carousel": {
|
||||||
|
"version": "1.10.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/@brainhubeu/react-carousel/-/react-carousel-1.10.1.tgz",
|
||||||
|
"integrity": "sha512-W8BdG9mWsU9c9F4GKBcQH1R7QiLmn9KELJdCIXop6Fkc6GT9gk7o8SPVfvdBLTQF3h/DpOtJTIUSjtTucIKDMg=="
|
||||||
|
},
|
||||||
"@vue/component-compiler-utils": {
|
"@vue/component-compiler-utils": {
|
||||||
"version": "2.2.0",
|
"version": "2.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.2.0.tgz",
|
||||||
|
@ -2787,6 +2792,14 @@
|
||||||
"esutils": "^2.0.2"
|
"esutils": "^2.0.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"dom7": {
|
||||||
|
"version": "2.1.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/dom7/-/dom7-2.1.2.tgz",
|
||||||
|
"integrity": "sha512-cGwWtpu7KY3JnbREGqG4EGC/u+1hyLfWVMqrqRjmwiO8d5i4B+0imLZAQ/cJbiXnjbs0pdIUzcUyeI9BbnyKNg==",
|
||||||
|
"requires": {
|
||||||
|
"ssr-window": "^1.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"domain-browser": {
|
"domain-browser": {
|
||||||
"version": "1.2.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
|
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
|
||||||
|
@ -5253,8 +5266,7 @@
|
||||||
"js-tokens": {
|
"js-tokens": {
|
||||||
"version": "3.0.2",
|
"version": "3.0.2",
|
||||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
|
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
|
||||||
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
|
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
|
||||||
"dev": true
|
|
||||||
},
|
},
|
||||||
"js-yaml": {
|
"js-yaml": {
|
||||||
"version": "3.12.0",
|
"version": "3.12.0",
|
||||||
|
@ -5490,7 +5502,6 @@
|
||||||
"version": "1.4.0",
|
"version": "1.4.0",
|
||||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||||
"dev": true,
|
|
||||||
"requires": {
|
"requires": {
|
||||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||||
}
|
}
|
||||||
|
@ -6769,6 +6780,15 @@
|
||||||
"integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
|
"integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
"prop-types": {
|
||||||
|
"version": "15.6.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.6.2.tgz",
|
||||||
|
"integrity": "sha512-3pboPvLiWD7dkI3qf3KbUe6hKFKa52w+AE0VCqECtf+QHAKgOL37tTaNCnuX1nAAQ4ZhyP+kYVKf8rLmJ/feDQ==",
|
||||||
|
"requires": {
|
||||||
|
"loose-envify": "^1.3.1",
|
||||||
|
"object-assign": "^4.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"proxy-addr": {
|
"proxy-addr": {
|
||||||
"version": "2.0.4",
|
"version": "2.0.4",
|
||||||
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
|
"resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.4.tgz",
|
||||||
|
@ -6933,6 +6953,28 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"react": {
|
||||||
|
"version": "16.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/react/-/react-16.5.2.tgz",
|
||||||
|
"integrity": "sha512-FDCSVd3DjVTmbEAjUNX6FgfAmQ+ypJfHUsqUJOYNCBUp1h8lqmtC+0mXJ+JjsWx4KAVTkk1vKd1hLQPvEviSuw==",
|
||||||
|
"requires": {
|
||||||
|
"loose-envify": "^1.1.0",
|
||||||
|
"object-assign": "^4.1.1",
|
||||||
|
"prop-types": "^15.6.2",
|
||||||
|
"schedule": "^0.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"react-dom": {
|
||||||
|
"version": "16.5.2",
|
||||||
|
"resolved": "https://registry.npmjs.org/react-dom/-/react-dom-16.5.2.tgz",
|
||||||
|
"integrity": "sha512-RC8LDw8feuZOHVgzEf7f+cxBr/DnKdqp56VU0lAs1f4UfKc4cU8wU4fTq/mgnvynLQo8OtlPC19NUFh/zjZPuA==",
|
||||||
|
"requires": {
|
||||||
|
"loose-envify": "^1.1.0",
|
||||||
|
"object-assign": "^4.1.1",
|
||||||
|
"prop-types": "^15.6.2",
|
||||||
|
"schedule": "^0.5.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"read-pkg": {
|
"read-pkg": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-1.1.0.tgz",
|
||||||
|
@ -7382,6 +7424,14 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"schedule": {
|
||||||
|
"version": "0.5.0",
|
||||||
|
"resolved": "https://registry.npmjs.org/schedule/-/schedule-0.5.0.tgz",
|
||||||
|
"integrity": "sha512-HUcJicG5Ou8xfR//c2rPT0lPIRR09vVvN81T9fqfVgBmhERUbDEQoYKjpBxbueJnCPpSu2ujXzOnRQt6x9o/jw==",
|
||||||
|
"requires": {
|
||||||
|
"object-assign": "^4.1.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"schema-utils": {
|
"schema-utils": {
|
||||||
"version": "0.4.5",
|
"version": "0.4.5",
|
||||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
|
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
|
||||||
|
@ -7929,6 +7979,11 @@
|
||||||
"tweetnacl": "~0.14.0"
|
"tweetnacl": "~0.14.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"ssr-window": {
|
||||||
|
"version": "1.0.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/ssr-window/-/ssr-window-1.0.1.tgz",
|
||||||
|
"integrity": "sha512-dgFqB+f00LJTEgb6UXhx0h+SrG50LJvti2yMKMqAgzfUmUXZrLSv2fjULF7AWGwK25EXu8+smLR3jYsJQChPsg=="
|
||||||
|
},
|
||||||
"ssri": {
|
"ssri": {
|
||||||
"version": "6.0.1",
|
"version": "6.0.1",
|
||||||
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
|
"resolved": "https://registry.npmjs.org/ssri/-/ssri-6.0.1.tgz",
|
||||||
|
@ -8113,6 +8168,15 @@
|
||||||
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
|
"resolved": "https://registry.npmjs.org/supports-color/-/supports-color-2.0.0.tgz",
|
||||||
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
|
"integrity": "sha1-U10EXOa2Nj+kARcIRimZXp3zJMc="
|
||||||
},
|
},
|
||||||
|
"swiper": {
|
||||||
|
"version": "4.4.1",
|
||||||
|
"resolved": "https://registry.npmjs.org/swiper/-/swiper-4.4.1.tgz",
|
||||||
|
"integrity": "sha512-SONgpB1mFh++eFiUDOCggwW2ZzsWMEf3+SEROcQ+qXPYUnyD423l3uDsk+0jdo/a4pXeOJmH0oN3XK5maMqQyQ==",
|
||||||
|
"requires": {
|
||||||
|
"dom7": "^2.1.2",
|
||||||
|
"ssr-window": "^1.0.1"
|
||||||
|
}
|
||||||
|
},
|
||||||
"t": {
|
"t": {
|
||||||
"version": "0.5.1",
|
"version": "0.5.1",
|
||||||
"resolved": "https://registry.npmjs.org/t/-/t-0.5.1.tgz",
|
"resolved": "https://registry.npmjs.org/t/-/t-0.5.1.tgz",
|
||||||
|
@ -8905,6 +8969,15 @@
|
||||||
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
|
"resolved": "https://registry.npmjs.org/vue/-/vue-2.5.17.tgz",
|
||||||
"integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
|
"integrity": "sha512-mFbcWoDIJi0w0Za4emyLiW72Jae0yjANHbCVquMKijcavBGypqlF7zHRgMa5k4sesdv7hv2rB4JPdZfR+TPfhQ=="
|
||||||
},
|
},
|
||||||
|
"vue-awesome-swiper": {
|
||||||
|
"version": "3.1.3",
|
||||||
|
"resolved": "https://registry.npmjs.org/vue-awesome-swiper/-/vue-awesome-swiper-3.1.3.tgz",
|
||||||
|
"integrity": "sha512-E7suzkyApO8vNZbgdEnjSmnpsmQZyRvSVXJ7sey3XYwKPOkLhH3+GnHroBw+5PZIQXvWBwdCeQsPG1xQ1r1Rhg==",
|
||||||
|
"requires": {
|
||||||
|
"object-assign": "^4.1.1",
|
||||||
|
"swiper": "^4.0.7"
|
||||||
|
}
|
||||||
|
},
|
||||||
"vue-custom-element": {
|
"vue-custom-element": {
|
||||||
"version": "3.2.5",
|
"version": "3.2.5",
|
||||||
"resolved": "https://registry.npmjs.org/vue-custom-element/-/vue-custom-element-3.2.5.tgz",
|
"resolved": "https://registry.npmjs.org/vue-custom-element/-/vue-custom-element-3.2.5.tgz",
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
"build": "cross-env NODE_ENV=development webpack --display-error-details --mode development --progress --hide-modules"
|
"build": "cross-env NODE_ENV=development webpack --display-error-details --mode development --progress --hide-modules"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@brainhubeu/react-carousel": "^1.10.1",
|
||||||
"axios": "^0.18.0",
|
"axios": "^0.18.0",
|
||||||
"buefy": "^0.6.7",
|
"buefy": "^0.6.7",
|
||||||
"bulma": "^0.7.1",
|
"bulma": "^0.7.1",
|
||||||
|
@ -14,6 +15,8 @@
|
||||||
"moment": "^2.22.2",
|
"moment": "^2.22.2",
|
||||||
"node-sass": "^4.9.3",
|
"node-sass": "^4.9.3",
|
||||||
"qs": "^6.5.2",
|
"qs": "^6.5.2",
|
||||||
|
"react": "^16.5.2",
|
||||||
|
"react-dom": "^16.5.2",
|
||||||
"t": "^0.5.1",
|
"t": "^0.5.1",
|
||||||
"v-tooltip": "^2.0.0-rc.33",
|
"v-tooltip": "^2.0.0-rc.33",
|
||||||
"vue": "^2.5.17",
|
"vue": "^2.5.17",
|
||||||
|
|
|
@ -15,4 +15,159 @@
|
||||||
.components-modal__frame {
|
.components-modal__frame {
|
||||||
width: 100%; }
|
width: 100%; }
|
||||||
|
|
||||||
|
.BrainhubCarousel {
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center; }
|
||||||
|
|
||||||
|
.BrainhubCarousel .BrainhubCarousel__trackContainer {
|
||||||
|
overflow: hidden; }
|
||||||
|
|
||||||
|
.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0; }
|
||||||
|
|
||||||
|
.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track.BrainhubCarousel__track--transition {
|
||||||
|
-webkit-transition: -webkit-transform;
|
||||||
|
transition: -webkit-transform;
|
||||||
|
transition: transform;
|
||||||
|
transition: transform, -webkit-transform; }
|
||||||
|
|
||||||
|
/* arrows */
|
||||||
|
.BrainhubCarousel__arrows {
|
||||||
|
cursor: pointer; }
|
||||||
|
|
||||||
|
/* variables */
|
||||||
|
.BrainhubCarousel__dots {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__dot {
|
||||||
|
outline: 0;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: none; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__dot.BrainhubCarousel__dot--selected {
|
||||||
|
opacity: 1 !important; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__dot:hover {
|
||||||
|
opacity: 1; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__dot:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
background: black; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail {
|
||||||
|
outline: 0;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: pointer; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail.BrainhubCarousel__thumbnail--selected {
|
||||||
|
opacity: 1 !important; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail:hover {
|
||||||
|
opacity: 1; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__thumbnail[type=button] {
|
||||||
|
-webkit-appearance: none; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrows {
|
||||||
|
position: relative;
|
||||||
|
padding: 21px;
|
||||||
|
border: none;
|
||||||
|
overflow: hidden;
|
||||||
|
outline: 0;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
background-color: white; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrows span {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #298596;
|
||||||
|
border-width: 3px 3px 0 0;
|
||||||
|
padding: 5px;
|
||||||
|
-webkit-transition: 0.3s;
|
||||||
|
transition: 0.3s;
|
||||||
|
font-size: 0; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrows:hover {
|
||||||
|
background-color: #298596; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrows:hover span {
|
||||||
|
border-color: #fff;
|
||||||
|
margin: 0; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrowLeft span {
|
||||||
|
-webkit-transform: translate(-50%, -50%) rotate(-135deg);
|
||||||
|
transform: translate(-50%, -50%) rotate(-135deg);
|
||||||
|
margin-left: 2.45px; }
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrowRight span {
|
||||||
|
-webkit-transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
margin-left: -2.45px; }
|
||||||
|
|
||||||
|
.BrainhubCarouselItem {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative; }
|
||||||
|
|
||||||
|
.BrainhubCarouselItem.BrainhubCarouselItem--clickable {
|
||||||
|
cursor: pointer; }
|
||||||
|
|
||||||
|
.BrainhubCarouselItem .debug-number {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 2em;
|
||||||
|
text-shadow: 0px 0px 9px white; }
|
||||||
|
|
||||||
/*# sourceMappingURL=tainacan-gutenberg-blocks-style.css.map */
|
/*# sourceMappingURL=tainacan-gutenberg-blocks-style.css.map */
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"version": 3,
|
"version": 3,
|
||||||
"mappings": "AAAA,uCAAwC;EACtC,UAAU,EAAE,KAAK;EAEjB,8FAAuD;IACrD,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAEhB,2JAA6D;MAC3D,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,UAAU;MACvB,aAAa,EAAE,KAAK;IAGtB,4JAA8D;MAC5D,OAAO,EAAE,IAAI;MACb,cAAc,EAAE,MAAM;MACtB,WAAW,EAAE,QAAQ;;AAK3B,wBAAyB;EACvB,KAAK,EAAE,IAAI",
|
"mappings": "AAAA,uCAAwC;EACtC,UAAU,EAAE,KAAK;EAEjB,8FAAuD;IACrD,OAAO,EAAE,IAAI;IACb,UAAU,EAAE,IAAI;IAEhB,2JAA6D;MAC3D,OAAO,EAAE,IAAI;MACb,WAAW,EAAE,UAAU;MACvB,aAAa,EAAE,KAAK;IAGtB,4JAA8D;MAC5D,OAAO,EAAE,IAAI;MACb,cAAc,EAAE,MAAM;MACtB,WAAW,EAAE,QAAQ;;AAK3B,wBAAyB;EACvB,KAAK,EAAE,IAAI;;AAGb,iBAAkB;EAChB,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,IAAI;EACb,iBAAiB,EAAE,MAAM;EACzB,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;;AAGrB,mDAAoD;EAClD,QAAQ,EAAE,MAAM;;AAGlB,4EAA6E;EAC3E,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,IAAI;EACb,QAAQ,EAAE,MAAM;EAChB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;;AAGZ,gHAAiH;EAC/G,kBAAkB,EAAE,iBAAiB;EACrC,UAAU,EAAE,iBAAiB;EAC7B,UAAU,EAAE,SAAS;EACrB,UAAU,EAAE,4BAA4B;;AAG1C,YAAY;AACZ,yBAA0B;EACxB,MAAM,EAAE,OAAO;;AAGjB,eAAe;AACf,uBAAwB;EACtB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,MAAM;EACxB,aAAa,EAAE,MAAM;EACrB,eAAe,EAAE,MAAM;EACvB,UAAU,EAAE,IAAI;EAChB,MAAM,EAAE,CAAC;EACT,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,CAAC;EACZ,WAAW,EAAE,CAAC;;AAGhB,8CAA+C;EAC7C,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,OAAO;EACf,kBAAkB,EAAE,IAAI;;AAG1B,8EAA+E;EAC7E,OAAO,EAAE,YAAY;;AAGvB,oDAAqD;EACnD,OAAO,EAAE,CAAC;;AAGZ,qDAAsD;EACpD,OAAO,EAAE,EAAE;EACX,OAAO,EAAE,KAAK;EACd,KAAK,EAAE,GAAG;EACV,MAAM,EAAE,GAAG;EACX,aAAa,EAAE,GAAG;EAClB,OAAO,EAAE,CAAC;EACV,MAAM,EAAE,IAAI;EACZ,UAAU,EAAE,KAAK;;AAGnB,oDAAqD;EACnD,OAAO,EAAE,CAAC;EACV,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,IAAI;EACZ,OAAO,EAAE,GAAG;EACZ,MAAM,EAAE,OAAO;;AAGjB,0FAA2F;EACzF,OAAO,EAAE,YAAY;;AAGvB,0DAA2D;EACzD,OAAO,EAAE,CAAC;;AAGZ,yCAA0C;EACxC,kBAAkB,EAAE,IAAI;;AAG1B,yBAA0B;EACxB,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,MAAM,EAAE,IAAI;EACZ,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,CAAC;EACV,SAAS,EAAE,CAAC;EACZ,WAAW,EAAE,CAAC;EACd,gBAAgB,EAAE,KAAK;;AAGzB,8BAA+B;EAC7B,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,GAAG;EACR,IAAI,EAAE,GAAG;EACT,YAAY,EAAE,KAAK;EACnB,YAAY,EAAE,OAAO;EACrB,YAAY,EAAE,WAAW;EACzB,OAAO,EAAE,GAAG;EACZ,kBAAkB,EAAE,IAAI;EACxB,UAAU,EAAE,IAAI;EAChB,SAAS,EAAE,CAAC;;AAGd,+BAAgC;EAC9B,gBAAgB,EAAE,OAAO;;AAG3B,oCAAqC;EACnC,YAAY,EAAE,IAAI;EAClB,MAAM,EAAE,CAAC;;AAGX,iCAAkC;EAChC,iBAAiB,EAAE,qCAAqC;EACxD,SAAS,EAAE,qCAAqC;EAChD,WAAW,EAAE,MAAM;;AAGrB,kCAAmC;EACjC,iBAAiB,EAAE,mCAAmC;EACtD,SAAS,EAAE,mCAAmC;EAC9C,WAAW,EAAE,OAAO;;AAGtB,qBAAsB;EACpB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,MAAM;EACxB,aAAa,EAAE,MAAM;EACrB,eAAe,EAAE,MAAM;EACvB,iBAAiB,EAAE,MAAM;EACzB,cAAc,EAAE,MAAM;EACtB,WAAW,EAAE,MAAM;EACnB,QAAQ,EAAE,QAAQ;;AAGpB,qDAAsD;EACpD,MAAM,EAAE,OAAO;;AAGjB,mCAAoC;EAClC,QAAQ,EAAE,QAAQ;EAClB,GAAG,EAAE,CAAC;EACN,MAAM,EAAE,CAAC;EACT,IAAI,EAAE,CAAC;EACP,KAAK,EAAE,CAAC;EACR,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,WAAW;EACpB,OAAO,EAAE,IAAI;EACb,gBAAgB,EAAE,MAAM;EACxB,aAAa,EAAE,MAAM;EACrB,eAAe,EAAE,MAAM;EACvB,SAAS,EAAE,GAAG;EACd,WAAW,EAAE,iBAAiB",
|
||||||
"sources": ["../../gutenberg-blocks/tainacan-collections/collections-carousel/collections-carousel.scss"],
|
"sources": ["../../gutenberg-blocks/tainacan-collections/collections-carousel/collections-carousel.scss"],
|
||||||
"names": [],
|
"names": [],
|
||||||
"file": "tainacan-gutenberg-blocks-style.css"
|
"file": "tainacan-gutenberg-blocks-style.css"
|
||||||
|
|
|
@ -24,6 +24,23 @@ class GutenbergBlock {
|
||||||
private function add_gutenberg_blocks_actions() {
|
private function add_gutenberg_blocks_actions() {
|
||||||
add_action('init', array($this, 'register_tainacan_collections_carousel'));
|
add_action('init', array($this, 'register_tainacan_collections_carousel'));
|
||||||
add_action('init', array($this, 'add_plugin_settings'));
|
add_action('init', array($this, 'add_plugin_settings'));
|
||||||
|
add_filter( 'block_categories', array($this, 'register_tainacan_block_categories'), 10, 2 );
|
||||||
|
}
|
||||||
|
|
||||||
|
public function register_tainacan_block_categories($categories, $post){
|
||||||
|
if ( $post->post_type !== 'post' ) {
|
||||||
|
return $categories;
|
||||||
|
}
|
||||||
|
|
||||||
|
return array_merge(
|
||||||
|
$categories,
|
||||||
|
array(
|
||||||
|
array(
|
||||||
|
'slug' => 'tainacan-blocks',
|
||||||
|
'title' => __( 'Tainacan', 'tainacan' ),
|
||||||
|
),
|
||||||
|
)
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
public function register_tainacan_collections_carousel(){
|
public function register_tainacan_collections_carousel(){
|
||||||
|
|
|
@ -21,4 +21,182 @@
|
||||||
|
|
||||||
.components-modal__frame {
|
.components-modal__frame {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel {
|
||||||
|
overflow: hidden;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel .BrainhubCarousel__trackContainer {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
overflow: hidden;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track.BrainhubCarousel__track--transition {
|
||||||
|
-webkit-transition: -webkit-transform;
|
||||||
|
transition: -webkit-transform;
|
||||||
|
transition: transform;
|
||||||
|
transition: transform, -webkit-transform;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* arrows */
|
||||||
|
.BrainhubCarousel__arrows {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* variables */
|
||||||
|
.BrainhubCarousel__dots {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
list-style: none;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__dot {
|
||||||
|
outline: 0;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: pointer;
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__dot.BrainhubCarousel__dot--selected {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__dot:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__dot:before {
|
||||||
|
content: '';
|
||||||
|
display: block;
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 0;
|
||||||
|
border: none;
|
||||||
|
background: black;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail {
|
||||||
|
outline: 0;
|
||||||
|
padding: 10px;
|
||||||
|
border: none;
|
||||||
|
opacity: 0.5;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail.BrainhubCarousel__thumbnail--selected {
|
||||||
|
opacity: 1 !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail:hover {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__thumbnail[type=button] {
|
||||||
|
-webkit-appearance: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrows {
|
||||||
|
position: relative;
|
||||||
|
padding: 21px;
|
||||||
|
border: none;
|
||||||
|
overflow: hidden;
|
||||||
|
outline: 0;
|
||||||
|
font-size: 0;
|
||||||
|
line-height: 0;
|
||||||
|
background-color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrows span {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
border-style: solid;
|
||||||
|
border-color: #298596;
|
||||||
|
border-width: 3px 3px 0 0;
|
||||||
|
padding: 5px;
|
||||||
|
-webkit-transition: 0.3s;
|
||||||
|
transition: 0.3s;
|
||||||
|
font-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrows:hover {
|
||||||
|
background-color: #298596;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrows:hover span {
|
||||||
|
border-color: #fff;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrowLeft span {
|
||||||
|
-webkit-transform: translate(-50%, -50%) rotate(-135deg);
|
||||||
|
transform: translate(-50%, -50%) rotate(-135deg);
|
||||||
|
margin-left: 2.45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarousel__arrowRight span {
|
||||||
|
-webkit-transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
transform: translate(-50%, -50%) rotate(45deg);
|
||||||
|
margin-left: -2.45px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarouselItem {
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
-webkit-box-align: center;
|
||||||
|
-ms-flex-align: center;
|
||||||
|
align-items: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarouselItem.BrainhubCarouselItem--clickable {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.BrainhubCarouselItem .debug-number {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
display: -webkit-box;
|
||||||
|
display: -ms-flexbox;
|
||||||
|
display: flex;
|
||||||
|
-webkit-box-pack: center;
|
||||||
|
-ms-flex-pack: center;
|
||||||
|
justify-content: center;
|
||||||
|
font-size: 2em;
|
||||||
|
text-shadow: 0px 0px 9px white;
|
||||||
}
|
}
|
|
@ -1,15 +1,19 @@
|
||||||
|
import Carousel, { Dots } from '@brainhubeu/react-carousel';
|
||||||
|
|
||||||
const { registerBlockType } = wp.blocks;
|
const { registerBlockType } = wp.blocks;
|
||||||
|
|
||||||
const { Modal, Button, Autocomplete } = wp.components;
|
const { Modal, Button, Autocomplete } = wp.components;
|
||||||
|
|
||||||
const { __ } = wp.i18n;
|
const { __ } = wp.i18n;
|
||||||
|
const createHTML = wp.element.createElement;
|
||||||
|
|
||||||
import tainacan from '../../api-client/axios.js';
|
import tainacan from '../../api-client/axios.js';
|
||||||
|
|
||||||
registerBlockType('tainacan/collections-carousel', {
|
registerBlockType('tainacan/collections-carousel', {
|
||||||
title: 'Tainacan Collections Carousel',
|
title: 'Tainacan Collections Carousel',
|
||||||
icon: 'images-alt',
|
icon: 'images-alt',
|
||||||
category: 'widgets',
|
category: 'tainacan-blocks',
|
||||||
|
supportHTML: false,
|
||||||
attributes: {
|
attributes: {
|
||||||
isOpen: {
|
isOpen: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
|
@ -31,20 +35,23 @@ registerBlockType('tainacan/collections-carousel', {
|
||||||
selector: 'div',
|
selector: 'div',
|
||||||
default: [],
|
default: [],
|
||||||
},
|
},
|
||||||
content: {
|
content1: {
|
||||||
type: 'array',
|
type: 'array',
|
||||||
source: 'html',
|
source: 'html',
|
||||||
selector: 'div',
|
selector: 'div',
|
||||||
default: [],
|
default: [],
|
||||||
|
},
|
||||||
|
content: {
|
||||||
|
type: 'array',
|
||||||
|
source: 'html',
|
||||||
|
selector: 'div',
|
||||||
|
default: []
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
supports: {
|
supports: {
|
||||||
align: ['left', 'full', 'right']
|
align: ['full']
|
||||||
},
|
},
|
||||||
edit({ attributes, setAttributes, className }) {
|
edit({ attributes, setAttributes, className }) {
|
||||||
console.log('Edit');
|
|
||||||
console.log(attributes);
|
|
||||||
|
|
||||||
function prepareCollection(collection) {
|
function prepareCollection(collection) {
|
||||||
return (<div key={ collection.id } data-value={collection}>{ collection.name }</div>);
|
return (<div key={ collection.id } data-value={collection}>{ collection.name }</div>);
|
||||||
}
|
}
|
||||||
|
@ -65,12 +72,12 @@ registerBlockType('tainacan/collections-carousel', {
|
||||||
|
|
||||||
function prepareContent(content, featuredItems, setAttributes, collection){
|
function prepareContent(content, featuredItems, setAttributes, collection){
|
||||||
content.push(
|
content.push(
|
||||||
<div style={ {display: 'flex', flexDirection: 'column', marginRight: '20px' } }>
|
<div style={{display: 'flex', flexDirection: 'column', marginRight: '20px'}}>
|
||||||
<div
|
<div
|
||||||
className={`${className}__carousel-item`}
|
className={`${className}__carousel-item`}
|
||||||
key={collection.id}>
|
key={collection.id}>
|
||||||
|
|
||||||
<div style={{marginRight: '20px'}} className={`${className}__carousel-item-first`}>
|
<div style={{width: '99px', marginRight: '3px'}} className={`${className}__carousel-item-first`}>
|
||||||
{featuredItems[0] ?
|
{featuredItems[0] ?
|
||||||
<picture>
|
<picture>
|
||||||
<img src={featuredItems[0].thumbnail.thumb} alt={featuredItems[0].title}/>
|
<img src={featuredItems[0].thumbnail.thumb} alt={featuredItems[0].title}/>
|
||||||
|
@ -80,23 +87,22 @@ registerBlockType('tainacan/collections-carousel', {
|
||||||
|
|
||||||
<div className={`${className}__carousel-item-others`}>
|
<div className={`${className}__carousel-item-others`}>
|
||||||
{featuredItems[1] ?
|
{featuredItems[1] ?
|
||||||
<picture style={{maxWidth: '64px', maxHeight: '64px', marginBottom: '3px'}}>
|
<picture style={{width: '42px', height: '42px', marginBottom: '3px'}}>
|
||||||
<img src={featuredItems[1].thumbnail.thumb} alt={featuredItems[1].title}/>
|
<img src={featuredItems[1].thumbnail.thumb} alt={featuredItems[1].title}/>
|
||||||
</picture> : null
|
</picture> : null
|
||||||
}
|
}
|
||||||
{featuredItems[2] ?
|
{featuredItems[2] ?
|
||||||
<picture style={{maxWidth: '64px', maxHeight: '64px'}}>
|
<picture style={{width: '42px', height: '42px'}}>
|
||||||
<img src={featuredItems[2].thumbnail.thumb} alt={featuredItems[2].title}/>
|
<img src={featuredItems[2].thumbnail.thumb} alt={featuredItems[2].title}/>
|
||||||
</picture> : null
|
</picture> : null
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
<small>{ collection.name }</small>
|
<small><b>{collection.name}</b></small>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
|
|
||||||
setAttributes({ content: content });
|
setAttributes({ content1: content });
|
||||||
}
|
}
|
||||||
|
|
||||||
const autoCompleters = [
|
const autoCompleters = [
|
||||||
|
@ -110,6 +116,7 @@ registerBlockType('tainacan/collections-carousel', {
|
||||||
|
|
||||||
return tainacan.get(`/collections?search=${keyword}`)
|
return tainacan.get(`/collections?search=${keyword}`)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
|
console.log(response);
|
||||||
return response.data;
|
return response.data;
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
|
@ -125,12 +132,14 @@ registerBlockType('tainacan/collections-carousel', {
|
||||||
return attributes.collectionsMatched;
|
return attributes.collectionsMatched;
|
||||||
},
|
},
|
||||||
getOptionCompletion(option) {
|
getOptionCompletion(option) {
|
||||||
|
console.log('foi');
|
||||||
|
|
||||||
attributes.selectedCollections.push(prepareCollection(option));
|
attributes.selectedCollections.push(prepareCollection(option));
|
||||||
|
|
||||||
getTop3ItemsOf(option).then((res) => {
|
getTop3ItemsOf(option).then((res) => {
|
||||||
attributes.featuredItems.push(res);
|
attributes.featuredItems.push(res);
|
||||||
|
|
||||||
prepareContent(attributes.content, res, setAttributes, option);
|
prepareContent(attributes.content1, res, setAttributes, option);
|
||||||
|
|
||||||
setAttributes({ featuredItems: attributes.featuredItems });
|
setAttributes({ featuredItems: attributes.featuredItems });
|
||||||
});
|
});
|
||||||
|
@ -163,7 +172,6 @@ registerBlockType('tainacan/collections-carousel', {
|
||||||
aria-expanded={ isExpanded }
|
aria-expanded={ isExpanded }
|
||||||
aria-owns={ listBoxId }
|
aria-owns={ listBoxId }
|
||||||
aria-activedescendant={ activeId }
|
aria-activedescendant={ activeId }
|
||||||
onautocomplete={ () => { console.log('completed') } }
|
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
) }
|
) }
|
||||||
|
@ -178,14 +186,25 @@ registerBlockType('tainacan/collections-carousel', {
|
||||||
: null
|
: null
|
||||||
}
|
}
|
||||||
|
|
||||||
<div style={ {display: 'flex'} }>{ attributes.content }</div>
|
<div>
|
||||||
|
<Carousel
|
||||||
|
slidesPerScroll={1}
|
||||||
|
slidesPerPage={attributes.content1.length >= 3 ? 3 : attributes.content1.length}
|
||||||
|
arrows
|
||||||
|
slides={attributes.content1}/>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
save({ attributes }) {
|
save({ attributes }) {
|
||||||
console.log('Save');
|
return (
|
||||||
console.log(attributes);
|
<div>
|
||||||
|
<Carousel
|
||||||
return <div style={ {display: 'flex'} }>{ attributes.content }</div>;
|
slidesPerScroll={1}
|
||||||
|
slidesPerPage={attributes.content1.length >= 3 ? 3 : attributes.content1.length}
|
||||||
|
arrows
|
||||||
|
slides={attributes.content1}/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
Loading…
Reference in New Issue