From 11c23c29ea6925bf59fa933fc2866d255eac59e2 Mon Sep 17 00:00:00 2001 From: weryques Date: Mon, 15 Oct 2018 16:46:24 -0300 Subject: [PATCH] Create Tainacan Blocks category, add a carousel, adjusts carousel styles (#136) --- package-lock.json | 79 +++++++- package.json | 3 + .../css/tainacan-gutenberg-blocks-style.css | 155 +++++++++++++++ .../tainacan-gutenberg-blocks-style.css.map | 2 +- .../class-tainacan-gutenberg-block.php | 17 ++ .../collections-carousel.scss | 178 ++++++++++++++++++ .../collections-carousel/index.js | 59 ++++-- 7 files changed, 469 insertions(+), 24 deletions(-) diff --git a/package-lock.json b/package-lock.json index 067a1f118..d4fdfd83a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -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", diff --git a/package.json b/package.json index 014c3f158..296a1df4d 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/src/assets/css/tainacan-gutenberg-blocks-style.css b/src/assets/css/tainacan-gutenberg-blocks-style.css index 5c4482342..1bb090457 100644 --- a/src/assets/css/tainacan-gutenberg-blocks-style.css +++ b/src/assets/css/tainacan-gutenberg-blocks-style.css @@ -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 */ diff --git a/src/assets/css/tainacan-gutenberg-blocks-style.css.map b/src/assets/css/tainacan-gutenberg-blocks-style.css.map index 4f36c3813..95190c6e0 100644 --- a/src/assets/css/tainacan-gutenberg-blocks-style.css.map +++ b/src/assets/css/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" diff --git a/src/gutenberg-blocks/class-tainacan-gutenberg-block.php b/src/gutenberg-blocks/class-tainacan-gutenberg-block.php index 2a64f5ec2..ef6d54394 100644 --- a/src/gutenberg-blocks/class-tainacan-gutenberg-block.php +++ b/src/gutenberg-blocks/class-tainacan-gutenberg-block.php @@ -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(){ diff --git a/src/gutenberg-blocks/tainacan-collections/collections-carousel/collections-carousel.scss b/src/gutenberg-blocks/tainacan-collections/collections-carousel/collections-carousel.scss index 8d1a1ee0d..a8a416353 100644 --- a/src/gutenberg-blocks/tainacan-collections/collections-carousel/collections-carousel.scss +++ b/src/gutenberg-blocks/tainacan-collections/collections-carousel/collections-carousel.scss @@ -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; } \ No newline at end of file diff --git a/src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js b/src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js index 6e7d0ac05..e2941725f 100644 --- a/src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js +++ b/src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js @@ -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 (
{ collection.name }
); } @@ -65,12 +72,12 @@ registerBlockType('tainacan/collections-carousel', { function prepareContent(content, featuredItems, setAttributes, collection){ content.push( -
+
-
+
{featuredItems[0] ? {featuredItems[0].title}/ @@ -80,23 +87,22 @@ registerBlockType('tainacan/collections-carousel', {
{featuredItems[1] ? - + {featuredItems[1].title}/ : null } {featuredItems[2] ? - + {featuredItems[2].title}/ : null }
-
- { collection.name } + {collection.name}
); - 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') } } >
) } @@ -178,14 +186,25 @@ registerBlockType('tainacan/collections-carousel', { : null } -
{ attributes.content }
+
+ = 3 ? 3 : attributes.content1.length} + arrows + slides={attributes.content1}/> +
); }, save({ attributes }) { - console.log('Save'); - console.log(attributes); - - return
{ attributes.content }
; + return ( +
+ = 3 ? 3 : attributes.content1.length} + arrows + slides={attributes.content1}/> +
+ ); }, }); \ No newline at end of file