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": {
|
||||
"version": "2.2.0",
|
||||
"resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-2.2.0.tgz",
|
||||
|
@ -2787,6 +2792,14 @@
|
|||
"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": {
|
||||
"version": "1.2.0",
|
||||
"resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz",
|
||||
|
@ -5253,8 +5266,7 @@
|
|||
"js-tokens": {
|
||||
"version": "3.0.2",
|
||||
"resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-3.0.2.tgz",
|
||||
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls=",
|
||||
"dev": true
|
||||
"integrity": "sha1-mGbfOVECEw449/mWvOtlRDIJwls="
|
||||
},
|
||||
"js-yaml": {
|
||||
"version": "3.12.0",
|
||||
|
@ -5490,7 +5502,6 @@
|
|||
"version": "1.4.0",
|
||||
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
|
||||
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"js-tokens": "^3.0.0 || ^4.0.0"
|
||||
}
|
||||
|
@ -6769,6 +6780,15 @@
|
|||
"integrity": "sha1-mEcocL8igTL8vdhoEputEsPAKeM=",
|
||||
"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": {
|
||||
"version": "2.0.4",
|
||||
"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": {
|
||||
"version": "1.1.0",
|
||||
"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": {
|
||||
"version": "0.4.5",
|
||||
"resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-0.4.5.tgz",
|
||||
|
@ -7929,6 +7979,11 @@
|
|||
"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": {
|
||||
"version": "6.0.1",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "0.5.1",
|
||||
"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",
|
||||
"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": {
|
||||
"version": "3.2.5",
|
||||
"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"
|
||||
},
|
||||
"dependencies": {
|
||||
"@brainhubeu/react-carousel": "^1.10.1",
|
||||
"axios": "^0.18.0",
|
||||
"buefy": "^0.6.7",
|
||||
"bulma": "^0.7.1",
|
||||
|
@ -14,6 +15,8 @@
|
|||
"moment": "^2.22.2",
|
||||
"node-sass": "^4.9.3",
|
||||
"qs": "^6.5.2",
|
||||
"react": "^16.5.2",
|
||||
"react-dom": "^16.5.2",
|
||||
"t": "^0.5.1",
|
||||
"v-tooltip": "^2.0.0-rc.33",
|
||||
"vue": "^2.5.17",
|
||||
|
|
|
@ -15,4 +15,159 @@
|
|||
.components-modal__frame {
|
||||
width: 100%; }
|
||||
|
||||
.BrainhubCarousel {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center; }
|
||||
|
||||
.BrainhubCarousel .BrainhubCarousel__trackContainer {
|
||||
overflow: hidden; }
|
||||
|
||||
.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0; }
|
||||
|
||||
.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track.BrainhubCarousel__track--transition {
|
||||
-webkit-transition: -webkit-transform;
|
||||
transition: -webkit-transform;
|
||||
transition: transform;
|
||||
transition: transform, -webkit-transform; }
|
||||
|
||||
/* arrows */
|
||||
.BrainhubCarousel__arrows {
|
||||
cursor: pointer; }
|
||||
|
||||
/* variables */
|
||||
.BrainhubCarousel__dots {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
line-height: 0; }
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot {
|
||||
outline: 0;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none; }
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot.BrainhubCarousel__dot--selected {
|
||||
opacity: 1 !important; }
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot:hover {
|
||||
opacity: 1; }
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: black; }
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail {
|
||||
outline: 0;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
opacity: 0.5;
|
||||
cursor: pointer; }
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail.BrainhubCarousel__thumbnail--selected {
|
||||
opacity: 1 !important; }
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail:hover {
|
||||
opacity: 1; }
|
||||
|
||||
.BrainhubCarousel__thumbnail[type=button] {
|
||||
-webkit-appearance: none; }
|
||||
|
||||
.BrainhubCarousel__arrows {
|
||||
position: relative;
|
||||
padding: 21px;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
background-color: white; }
|
||||
|
||||
.BrainhubCarousel__arrows span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-style: solid;
|
||||
border-color: #298596;
|
||||
border-width: 3px 3px 0 0;
|
||||
padding: 5px;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
font-size: 0; }
|
||||
|
||||
.BrainhubCarousel__arrows:hover {
|
||||
background-color: #298596; }
|
||||
|
||||
.BrainhubCarousel__arrows:hover span {
|
||||
border-color: #fff;
|
||||
margin: 0; }
|
||||
|
||||
.BrainhubCarousel__arrowLeft span {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(-135deg);
|
||||
transform: translate(-50%, -50%) rotate(-135deg);
|
||||
margin-left: 2.45px; }
|
||||
|
||||
.BrainhubCarousel__arrowRight span {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(45deg);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
margin-left: -2.45px; }
|
||||
|
||||
.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 */
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
{
|
||||
"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": "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",
|
||||
"sources": ["../../gutenberg-blocks/tainacan-collections/collections-carousel/collections-carousel.scss"],
|
||||
"names": [],
|
||||
"file": "tainacan-gutenberg-blocks-style.css"
|
||||
|
|
|
@ -24,6 +24,23 @@ class GutenbergBlock {
|
|||
private function add_gutenberg_blocks_actions() {
|
||||
add_action('init', array($this, 'register_tainacan_collections_carousel'));
|
||||
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(){
|
||||
|
|
|
@ -21,4 +21,182 @@
|
|||
|
||||
.components-modal__frame {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.BrainhubCarousel {
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.BrainhubCarousel .BrainhubCarousel__trackContainer {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.BrainhubCarousel .BrainhubCarousel__trackContainer .BrainhubCarousel__track.BrainhubCarousel__track--transition {
|
||||
-webkit-transition: -webkit-transform;
|
||||
transition: -webkit-transform;
|
||||
transition: transform;
|
||||
transition: transform, -webkit-transform;
|
||||
}
|
||||
|
||||
/* arrows */
|
||||
.BrainhubCarousel__arrows {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* variables */
|
||||
.BrainhubCarousel__dots {
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: center;
|
||||
-ms-flex-pack: center;
|
||||
justify-content: center;
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot {
|
||||
outline: 0;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot.BrainhubCarousel__dot--selected {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__dot:before {
|
||||
content: '';
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: black;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail {
|
||||
outline: 0;
|
||||
padding: 10px;
|
||||
border: none;
|
||||
opacity: 0.5;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail.BrainhubCarousel__thumbnail--selected {
|
||||
opacity: 1 !important;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__dots .BrainhubCarousel__thumbnail:hover {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__thumbnail[type=button] {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrows {
|
||||
position: relative;
|
||||
padding: 21px;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
outline: 0;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
background-color: white;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrows span {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
border-style: solid;
|
||||
border-color: #298596;
|
||||
border-width: 3px 3px 0 0;
|
||||
padding: 5px;
|
||||
-webkit-transition: 0.3s;
|
||||
transition: 0.3s;
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrows:hover {
|
||||
background-color: #298596;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrows:hover span {
|
||||
border-color: #fff;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrowLeft span {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(-135deg);
|
||||
transform: translate(-50%, -50%) rotate(-135deg);
|
||||
margin-left: 2.45px;
|
||||
}
|
||||
|
||||
.BrainhubCarousel__arrowRight span {
|
||||
-webkit-transform: translate(-50%, -50%) rotate(45deg);
|
||||
transform: translate(-50%, -50%) rotate(45deg);
|
||||
margin-left: -2.45px;
|
||||
}
|
||||
|
||||
.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 { Modal, Button, Autocomplete } = wp.components;
|
||||
|
||||
const { __ } = wp.i18n;
|
||||
const createHTML = wp.element.createElement;
|
||||
|
||||
import tainacan from '../../api-client/axios.js';
|
||||
|
||||
registerBlockType('tainacan/collections-carousel', {
|
||||
title: 'Tainacan Collections Carousel',
|
||||
icon: 'images-alt',
|
||||
category: 'widgets',
|
||||
category: 'tainacan-blocks',
|
||||
supportHTML: false,
|
||||
attributes: {
|
||||
isOpen: {
|
||||
type: Boolean,
|
||||
|
@ -31,20 +35,23 @@ registerBlockType('tainacan/collections-carousel', {
|
|||
selector: 'div',
|
||||
default: [],
|
||||
},
|
||||
content: {
|
||||
content1: {
|
||||
type: 'array',
|
||||
source: 'html',
|
||||
selector: 'div',
|
||||
default: [],
|
||||
},
|
||||
content: {
|
||||
type: 'array',
|
||||
source: 'html',
|
||||
selector: 'div',
|
||||
default: []
|
||||
}
|
||||
},
|
||||
supports: {
|
||||
align: ['left', 'full', 'right']
|
||||
align: ['full']
|
||||
},
|
||||
edit({ attributes, setAttributes, className }) {
|
||||
console.log('Edit');
|
||||
console.log(attributes);
|
||||
|
||||
function prepareCollection(collection) {
|
||||
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){
|
||||
content.push(
|
||||
<div style={ {display: 'flex', flexDirection: 'column', marginRight: '20px' } }>
|
||||
<div style={{display: 'flex', flexDirection: 'column', marginRight: '20px'}}>
|
||||
<div
|
||||
className={`${className}__carousel-item`}
|
||||
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] ?
|
||||
<picture>
|
||||
<img src={featuredItems[0].thumbnail.thumb} alt={featuredItems[0].title}/>
|
||||
|
@ -80,23 +87,22 @@ registerBlockType('tainacan/collections-carousel', {
|
|||
|
||||
<div className={`${className}__carousel-item-others`}>
|
||||
{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}/>
|
||||
</picture> : null
|
||||
}
|
||||
{featuredItems[2] ?
|
||||
<picture style={{maxWidth: '64px', maxHeight: '64px'}}>
|
||||
<picture style={{width: '42px', height: '42px'}}>
|
||||
<img src={featuredItems[2].thumbnail.thumb} alt={featuredItems[2].title}/>
|
||||
</picture> : null
|
||||
}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<small>{ collection.name }</small>
|
||||
<small><b>{collection.name}</b></small>
|
||||
</div>
|
||||
);
|
||||
|
||||
setAttributes({ content: content });
|
||||
setAttributes({ content1: content });
|
||||
}
|
||||
|
||||
const autoCompleters = [
|
||||
|
@ -110,6 +116,7 @@ registerBlockType('tainacan/collections-carousel', {
|
|||
|
||||
return tainacan.get(`/collections?search=${keyword}`)
|
||||
.then(response => {
|
||||
console.log(response);
|
||||
return response.data;
|
||||
})
|
||||
.catch(error => {
|
||||
|
@ -125,12 +132,14 @@ registerBlockType('tainacan/collections-carousel', {
|
|||
return attributes.collectionsMatched;
|
||||
},
|
||||
getOptionCompletion(option) {
|
||||
console.log('foi');
|
||||
|
||||
attributes.selectedCollections.push(prepareCollection(option));
|
||||
|
||||
getTop3ItemsOf(option).then((res) => {
|
||||
attributes.featuredItems.push(res);
|
||||
|
||||
prepareContent(attributes.content, res, setAttributes, option);
|
||||
prepareContent(attributes.content1, res, setAttributes, option);
|
||||
|
||||
setAttributes({ featuredItems: attributes.featuredItems });
|
||||
});
|
||||
|
@ -163,7 +172,6 @@ registerBlockType('tainacan/collections-carousel', {
|
|||
aria-expanded={ isExpanded }
|
||||
aria-owns={ listBoxId }
|
||||
aria-activedescendant={ activeId }
|
||||
onautocomplete={ () => { console.log('completed') } }
|
||||
>
|
||||
</div>
|
||||
) }
|
||||
|
@ -178,14 +186,25 @@ registerBlockType('tainacan/collections-carousel', {
|
|||
: 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>
|
||||
);
|
||||
},
|
||||
save({ attributes }) {
|
||||
console.log('Save');
|
||||
console.log(attributes);
|
||||
|
||||
return <div style={ {display: 'flex'} }>{ attributes.content }</div>;
|
||||
return (
|
||||
<div>
|
||||
<Carousel
|
||||
slidesPerScroll={1}
|
||||
slidesPerPage={attributes.content1.length >= 3 ? 3 : attributes.content1.length}
|
||||
arrows
|
||||
slides={attributes.content1}/>
|
||||
</div>
|
||||
);
|
||||
},
|
||||
});
|
Loading…
Reference in New Issue