From 1271348834d6c2fe62e729fbd0a02607a8efeae1 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Mon, 28 Jan 2019 17:06:39 -0200 Subject: [PATCH 01/18] Playing around with Gutenberg blocks to achieve a taxonomy terms list. First experiments. --- .../class-tainacan-gutenberg-block.php | 25 ++ .../tainacan-terms/terms-list/index.js | 357 ++++++++++++++++++ .../tainacan-terms/terms-list/terms-list.scss | 3 + webpack.config.js | 1 + 4 files changed, 386 insertions(+) create mode 100644 src/gutenberg-blocks/tainacan-terms/terms-list/index.js create mode 100644 src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss diff --git a/src/gutenberg-blocks/class-tainacan-gutenberg-block.php b/src/gutenberg-blocks/class-tainacan-gutenberg-block.php index 7f62e262d..83a69fafd 100644 --- a/src/gutenberg-blocks/class-tainacan-gutenberg-block.php +++ b/src/gutenberg-blocks/class-tainacan-gutenberg-block.php @@ -26,6 +26,7 @@ class GutenbergBlock { private function add_gutenberg_blocks_actions() { //add_action('init', array($this, 'register_tainacan_collections_carousel')); add_action('init', array($this, 'register_tainacan_items_grid')); + add_action('init', array($this, 'register_tainacan_terms_list')); add_action('init', array($this, 'add_plugin_settings')); @@ -104,6 +105,29 @@ class GutenbergBlock { } } + public function register_tainacan_terms_list(){ + global $TAINACAN_BASE_URL; + + wp_register_script( + 'terms-list', + $TAINACAN_BASE_URL . '/assets/gutenberg_terms_list-components.js', + array('wp-blocks', 'wp-element', 'wp-components', 'wp-editor', 'underscore') + ); + + wp_register_style( + 'terms-list', + $TAINACAN_BASE_URL . '/assets/css/tainacan-gutenberg-blocks-style.css', + array('wp-edit-blocks') + ); + + if(function_exists('register_block_type')) { + register_block_type( 'tainacan/terms-list', array( + 'editor_script' => 'terms-list', + 'style' => 'terms-list' + ) ); + } + } + public function get_plugin_js_settings(){ global $TAINACAN_BASE_URL; @@ -122,5 +146,6 @@ class GutenbergBlock { //wp_localize_script( 'collections-carousel', 'tainacan_plugin', $settings ); wp_localize_script( 'items-grid', 'tainacan_plugin', $settings ); + wp_localize_script( 'terms-list', 'tainacan_plugin', $settings ); } } \ No newline at end of file diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js new file mode 100644 index 000000000..3f9bf2996 --- /dev/null +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js @@ -0,0 +1,357 @@ +const { registerBlockType } = wp.blocks; + +const { __ } = wp.i18n; + +const { Button, Modal, Autocomplete, TextareaControl, QueryControls, Placeholder, CheckboxControl } = wp.components; + +const { InspectorControls } = wp.editor; + +import tainacan from '../../api-client/axios.js'; +import qs from 'qs'; + +registerBlockType('tainacan/terms-list', { + title: __('Tainacan Terms List', 'tainacan'), + icon: 'list-view', + category: 'tainacan-blocks', + attributes: { + terms2: { + type: Array, + default: [] + }, + terms: { + type: 'array', + source: 'query', + selector: 'li>a', + query: { + url: { + type: 'string', + source: 'children', + selector: 'a', + attribute: 'href' + }, + name: { + type: 'string', + source: 'text' + }, + }, + default: [] + }, + isOpen: { + type: Boolean, + default: false + }, + content: { + type: 'array', + source: 'children', + selector: 'div' + }, + termsPerPage: { + type: Number, + default: 12 + }, + query: { + type: Object, + default: {} + }, + URLTaxonomyID: { + type: String, + default: '' + }, + tainacanURL: { + type: String, + default: '' + }, + showItemsCount: { + type: Boolean, + default: false + }, + }, + supports: { + html: false + }, + edit({ attributes, setAttributes, className, isSelected }){ + let { terms, terms2, isOpen, content, termsPerPage, query, URLTaxonomyID, tainacanURL, showItemsCount } = attributes; + + function prepareTerm(term) { + return ( +
  • + + { term.name ? term.name : '' } + +
    • + ); + } + + function getTerms(taxonomyID, query) { + if(taxonomyID) { + return tainacan.get( + `/taxonomy/${taxonomyID}/terms` + // `/collection/${collectionID}/items?${query}` + ) + .then(response => { + return response.data; + }) + .catch(error => { + console.error(error); + }); + } else { + return tainacan.get(`/items?${query}`) + .then(response => { + return response.data; + }) + .catch(error => { + console.error(error); + }); + } + } + + function setContent(terms){ + setAttributes({ + content: ( +
    + +
    + ) + }); + } + + function updateQuery(query) { + let queryString = qs.stringify(query); + + getTerms(URLTaxonomyID, queryString).then(data => { + terms = []; + + data.map((term) => { + terms.push(prepareTerm(term)); + }); + + setAttributes({terms: terms}); + setAttributes({terms2: data}); + setContent(terms); + }); + } + + function parseURL(tainacanURLP) { + tainacanURL = tainacanURLP; + setAttributes({tainacanURL: tainacanURLP}); + + if (!tainacanURLP || !tainacanURLP.includes('tainacan_admin')){ + setAttributes({query: ''}); + setAttributes({URLTaxonomyID: ''}); + setAttributes({termsPerPage: 0}); + setAttributes({terms: []}); + setAttributes({terms2: []}); + + setContent([]); + + return true; + } + + let tainacanURLSplited = tainacanURL.split('?'); + + let rawQuery = tainacanURLSplited[2]; + let rawURL = tainacanURLSplited[1]; + + let parsedQuery = qs.parse(rawQuery); + + if(parsedQuery.fetch_only && !parsedQuery.fetch_only.includes('title')){ + parsedQuery.fetch_only += ',title'; + } + + let URLTaxID = rawURL.match(/\/(\d+)\/?/); + URLTaxonomyID = URLTaxID != undefined ? URLTaxID[1]: URLTaxID; + console.log(URLTaxonomyID) + getTerms(URLTaxonomyID, qs.stringify(parsedQuery)).then(data => { + terms = []; + setAttributes({terms: terms}); + + data.map((term) => { + terms.push(prepareTerm(term)); + }); + + setAttributes({query: parsedQuery}); + setAttributes({URLTaxonomyID: URLTaxonomyID}); + setAttributes({termsPerPage: Number(parsedQuery.perpage)}); + setAttributes({terms: terms}); + setAttributes({terms2: data}); + setContent(terms); + }); + } + + function mountBlock(termsA) { + let termsP = []; + + for (const term of termsA){ + termsP.push(prepareTerm(term)); + } + + terms = termsP; + setAttributes({terms: termsP}); + setContent(termsP); + } + + if(content && content.length && content[0].type){ + mountBlock(terms); + } + + // function fetchTaxonomies(query) { + // console.log(query) + // return ['1', '2', '3']; + // } + + // const completers = [{ + // name: 'taxonomy-list-autocomplete', + // triggerPrefix: '/', + // options: query => fetchTaxonomies(query), + // getOptionLabel: option => ( + // { option } + // ) + // }] + + return ( +
    + +
    + +
    + { + showItemsCount = isChecked; + + mountBlock(terms2); + + setAttributes({showItemsCount: isChecked}); + } } + /> +
    +     +
    + + { isSelected ? ( +
    + +
    + ) : null + } + + { !terms.length ? ( + + )} + />) : null + } + + {/* + { ( { isExpanded, listBoxId, activeId } ) => ( +
    +
    + ) } +     */} + + { isOpen ? + setAttributes({isOpen: false}) }> + +
    + parseURL( tainacanURL ) } + /> +
    + + { Object.keys(query).length && query.perpage && tainacanURL ? ( +
    + { + query.perpage = !numberOfItems ? 1 : numberOfItems; + termsPerPage = query.perpage; + + setAttributes({termsPerPage: termsPerPage}); + + _.debounce(updateQuery(query), 300); + } + } + /> +
    + ) : null + } + +
    + +
    +     : null } + +
    +
      + { terms } +
    +
    +
    + ); + }, + save({ attributes }){ + const { content } = attributes; + + return
    { content }
    + } +}); \ No newline at end of file diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss b/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss new file mode 100644 index 000000000..35c09197d --- /dev/null +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss @@ -0,0 +1,3 @@ +.wp-block-tainacan-terms-list { + +} \ No newline at end of file diff --git a/webpack.config.js b/webpack.config.js index bf5bb3b5a..07c64bda8 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -9,6 +9,7 @@ module.exports = { user_admin: './src/admin/js/main.js', //gutenberg_collections_carousel: './src/gutenberg-blocks/tainacan-collections/collections-carousel/index.js', gutenberg_items_grid: './src/gutenberg-blocks/tainacan-items/items-grid/index.js', + gutenberg_terms_list: './src/gutenberg-blocks/tainacan-terms/terms-list/index.js', }, output: { path: path.resolve(__dirname, './src/assets/'), From 29634a4275187d08efe14bfdd4ff888a240cdef4 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Tue, 29 Jan 2019 17:21:50 -0200 Subject: [PATCH 02/18] Adds select to choose taxonomy and several improvements. --- .../css/tainacan-gutenberg-blocks-style.css | 35 ++- .../tainacan-gutenberg-blocks-style.css.map | 4 +- .../gutenberg-blocks-style.scss | 3 +- .../tainacan-terms/terms-list/index.js | 267 ++++++------------ .../tainacan-terms/terms-list/terms-list.scss | 43 +++ 5 files changed, 160 insertions(+), 192 deletions(-) diff --git a/src/assets/css/tainacan-gutenberg-blocks-style.css b/src/assets/css/tainacan-gutenberg-blocks-style.css index b534edeb9..1c2812de2 100644 --- a/src/assets/css/tainacan-gutenberg-blocks-style.css +++ b/src/assets/css/tainacan-gutenberg-blocks-style.css @@ -1,3 +1,36 @@ - +.wp-block-tainacan-terms-list { + margin: 1rem 0px; } + .wp-block-tainacan-terms-list ul.terms-list { + -moz-column-count: 4; + -moz-column-gap: 7rem; + -moz-column-rule: none; + -webkit-column-ount: 4; + -webkit-column-gap: 7rem; + -webkit-column-rule: none; + column-count: 4; + column-gap: 7rem; + column-rule: none; } + @media only screen and (max-width: 768px) { + .wp-block-tainacan-terms-list ul.terms-list { + -moz-column-count: 3; + -moz-column-gap: 0; + -moz-column-rule: none; + -webkit-column-count: 3; + -webkit-column-gap: 0; + -webkit-column-rule: none; + column-count: 3; + column-gap: 4rem; + column-rule: none; } } + @media only screen and (max-width: 490px) { + .wp-block-tainacan-terms-list ul.terms-list { + -moz-column-count: 2; + -moz-column-gap: 0; + -moz-column-rule: none; + -webkit-column-count: 2; + -webkit-column-gap: 0; + -webkit-column-rule: none; + column-count: 2; + column-gap: 2rem; + column-rule: none; } } /*# 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 054f9ced2..027df4a5b 100644 --- a/src/assets/css/tainacan-gutenberg-blocks-style.css.map +++ b/src/assets/css/tainacan-gutenberg-blocks-style.css.map @@ -1,7 +1,7 @@ { "version": 3, -"mappings": "", -"sources": [], +"mappings": "AAAA,6BAA8B;EAE1B,MAAM,EAAE,QAAQ;EAEhB,2CAAc;IACV,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,CAAC;MAClB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,CAAC;MACrB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAIzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,CAAC;MAClB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,CAAC;MACrB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI", +"sources": ["../../gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss"], "names": [], "file": "tainacan-gutenberg-blocks-style.css" } diff --git a/src/gutenberg-blocks/gutenberg-blocks-style.scss b/src/gutenberg-blocks/gutenberg-blocks-style.scss index c265d31c3..fcf09d5dc 100644 --- a/src/gutenberg-blocks/gutenberg-blocks-style.scss +++ b/src/gutenberg-blocks/gutenberg-blocks-style.scss @@ -1,2 +1,3 @@ //@import 'tainacan-collections/collections-carousel/collections-carousel'; -@import 'tainacan-items/items-grid/items-grid'; \ No newline at end of file +@import 'tainacan-items/items-grid/items-grid'; +@import 'tainacan-terms/terms-list/terms-list'; \ No newline at end of file diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js index 3f9bf2996..47b7c3834 100644 --- a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js @@ -2,7 +2,7 @@ const { registerBlockType } = wp.blocks; const { __ } = wp.i18n; -const { Button, Modal, Autocomplete, TextareaControl, QueryControls, Placeholder, CheckboxControl } = wp.components; +const { Autocomplete, SelectControl, Spinner, QueryControls, Placeholder } = wp.components; const { InspectorControls } = wp.editor; @@ -13,11 +13,8 @@ registerBlockType('tainacan/terms-list', { title: __('Tainacan Terms List', 'tainacan'), icon: 'list-view', category: 'tainacan-blocks', + keywords: [ __( 'Tainacan', 'tainacan' ), __( 'terms', 'tainacan' ), __( 'taxonomy', 'tainacan' ) ], attributes: { - terms2: { - type: Array, - default: [] - }, terms: { type: 'array', source: 'query', @@ -25,8 +22,7 @@ registerBlockType('tainacan/terms-list', { query: { url: { type: 'string', - source: 'children', - selector: 'a', + source: 'attribute', attribute: 'href' }, name: { @@ -36,10 +32,6 @@ registerBlockType('tainacan/terms-list', { }, default: [] }, - isOpen: { - type: Boolean, - default: false - }, content: { type: 'array', source: 'children', @@ -57,20 +49,21 @@ registerBlockType('tainacan/terms-list', { type: String, default: '' }, - tainacanURL: { - type: String, - default: '' - }, - showItemsCount: { + isLoadingTaxonomies: { type: Boolean, default: false }, + taxonomies: { + type: Array, + default: null + } }, supports: { html: false }, edit({ attributes, setAttributes, className, isSelected }){ - let { terms, terms2, isOpen, content, termsPerPage, query, URLTaxonomyID, tainacanURL, showItemsCount } = attributes; + let { terms, content, termsPerPage, query, URLTaxonomyID, isLoadingTaxonomies, taxonomies } = attributes; + console.log("Editando..."); function prepareTerm(term) { return ( @@ -82,7 +75,7 @@ registerBlockType('tainacan/terms-list', { style={{ // TODO }} - href={term.url} target="_blank"> + href={ term.url } target="_blank"> { term.name ? term.name : '' } @@ -91,51 +84,28 @@ registerBlockType('tainacan/terms-list', { function getTerms(taxonomyID, query) { if(taxonomyID) { - return tainacan.get( - `/taxonomy/${taxonomyID}/terms` - // `/collection/${collectionID}/items?${query}` - ) + return tainacan.get(`/taxonomy/${taxonomyID}/terms?${query}`) .then(response => { return response.data; }) .catch(error => { console.error(error); + return []; }); } else { - return tainacan.get(`/items?${query}`) - .then(response => { - return response.data; - }) - .catch(error => { - console.error(error); - }); + return []; } } function setContent(terms){ setAttributes({ content: ( -
    -
      - { terms } -
    -
    + ) }); } - function updateQuery(query) { + function updateTermsQuery(query) { let queryString = qs.stringify(query); getTerms(URLTaxonomyID, queryString).then(data => { @@ -145,79 +115,49 @@ registerBlockType('tainacan/terms-list', { terms.push(prepareTerm(term)); }); - setAttributes({terms: terms}); - setAttributes({terms2: data}); - setContent(terms); - }); - } - - function parseURL(tainacanURLP) { - tainacanURL = tainacanURLP; - setAttributes({tainacanURL: tainacanURLP}); - - if (!tainacanURLP || !tainacanURLP.includes('tainacan_admin')){ - setAttributes({query: ''}); - setAttributes({URLTaxonomyID: ''}); - setAttributes({termsPerPage: 0}); - setAttributes({terms: []}); - setAttributes({terms2: []}); - - setContent([]); - - return true; - } - - let tainacanURLSplited = tainacanURL.split('?'); - - let rawQuery = tainacanURLSplited[2]; - let rawURL = tainacanURLSplited[1]; - - let parsedQuery = qs.parse(rawQuery); - - if(parsedQuery.fetch_only && !parsedQuery.fetch_only.includes('title')){ - parsedQuery.fetch_only += ',title'; - } - - let URLTaxID = rawURL.match(/\/(\d+)\/?/); - URLTaxonomyID = URLTaxID != undefined ? URLTaxID[1]: URLTaxID; - console.log(URLTaxonomyID) - getTerms(URLTaxonomyID, qs.stringify(parsedQuery)).then(data => { - terms = []; - setAttributes({terms: terms}); - - data.map((term) => { - terms.push(prepareTerm(term)); + setAttributes({ + terms: terms, + URLTaxonomyID: URLTaxonomyID }); - - setAttributes({query: parsedQuery}); - setAttributes({URLTaxonomyID: URLTaxonomyID}); - setAttributes({termsPerPage: Number(parsedQuery.perpage)}); - setAttributes({terms: terms}); - setAttributes({terms2: data}); setContent(terms); }); } - function mountBlock(termsA) { - let termsP = []; + function mountBlock(termsFromHTML) { + let termsOnComponent = []; - for (const term of termsA){ - termsP.push(prepareTerm(term)); + for (const term of termsFromHTML){ + termsOnComponent.push(prepareTerm(term)); } - terms = termsP; - setAttributes({terms: termsP}); - setContent(termsP); + terms = termsOnComponent; + setAttributes({ terms: termsOnComponent }); + setContent(termsOnComponent); } - if(content && content.length && content[0].type){ - mountBlock(terms); + function fetchTaxonomies() { + isLoadingTaxonomies = true; + taxonomies = []; + + tainacan.get(`/taxonomies/?nopaging=1`) + .then(response => { + setAttributes({ + isLoadingTaxonomies: false, + taxonomies: response.data + }); + + return response.data; + }) + .catch(error => { + console.error(error); + }); } - // function fetchTaxonomies(query) { - // console.log(query) - // return ['1', '2', '3']; - // } + function setTaxonomyID( { selectedTaxonomyID } ) { + URLTaxonomyID = selectedTaxonomyID; + query.number = !termsPerPage ? 1 : termsPerPage; + updateTermsQuery(query); + } // const completers = [{ // name: 'taxonomy-list-autocomplete', @@ -228,36 +168,46 @@ registerBlockType('tainacan/terms-list', { // ) // }] + if (taxonomies == null) + fetchTaxonomies(); + + if(content && content.length && content[0].type) + mountBlock(terms); + return (
    - { - showItemsCount = isChecked; + { + query.number = !numberOfItems ? 1 : numberOfItems; + termsPerPage = query.number; - mountBlock(terms2); + setAttributes({ termsPerPage: termsPerPage }); - setAttributes({showItemsCount: isChecked}); - } } - /> + _.debounce(updateTermsQuery(query), 300); + } + } + />
    - { isSelected ? ( -
    - -
    + { isSelected ? + ( isLoadingTaxonomies == true ? + + : + ( + ({ label: taxonomy.name, value: taxonomy.id })) } + onChange={ ( selectedTaxonomyID ) => { setTaxonomyID( { selectedTaxonomyID } ) } }/> + ) ) : null } @@ -265,13 +215,13 @@ registerBlockType('tainacan/terms-list', { )} />) : null } - + {/* { ( { isExpanded, listBoxId, activeId } ) => (
    */} - { isOpen ? - setAttributes({isOpen: false}) }> - -
    - parseURL( tainacanURL ) } - /> -
    - - { Object.keys(query).length && query.perpage && tainacanURL ? ( -
    - { - query.perpage = !numberOfItems ? 1 : numberOfItems; - termsPerPage = query.perpage; - - setAttributes({termsPerPage: termsPerPage}); - - _.debounce(updateQuery(query), 300); - } - } - /> -
    - ) : null - } - -
    - -
    -     : null } - -
    -
      - { terms } -
    -
    +
      { terms }
    ); }, save({ attributes }){ const { content } = attributes; - + console.log("Salvando...") return
    { content }
    } }); \ No newline at end of file diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss b/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss index 35c09197d..b101ebb8f 100644 --- a/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss @@ -1,3 +1,46 @@ .wp-block-tainacan-terms-list { + + margin: 1rem 0px; + ul.terms-list { + -moz-column-count: 4; + -moz-column-gap: 7rem; + -moz-column-rule: none; + -webkit-column-ount: 4; + -webkit-column-gap: 7rem; + -webkit-column-rule: none; + column-count: 4; + column-gap: 7rem; + column-rule: none; + } + + @media only screen and (max-width: 768px) { + + ul.terms-list { + -moz-column-count: 3; + -moz-column-gap: 0; + -moz-column-rule: none; + -webkit-column-count: 3; + -webkit-column-gap: 0; + -webkit-column-rule: none; + column-count: 3; + column-gap: 4rem; + column-rule: none; + } + } + + @media only screen and (max-width: 490px) { + + ul.terms-list { + -moz-column-count: 2; + -moz-column-gap: 0; + -moz-column-rule: none; + -webkit-column-count: 2; + -webkit-column-gap: 0; + -webkit-column-rule: none; + column-count: 2; + column-gap: 2rem; + column-rule: none; + } + } } \ No newline at end of file From 1758a2d861466b24b0fb15951dab354b68bda823 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Wed, 30 Jan 2019 12:14:32 -0200 Subject: [PATCH 03/18] Better styling for editor version of block. --- .../css/tainacan-gutenberg-blocks-style.css | 57 ++++++++++++--- .../tainacan-gutenberg-blocks-style.css.map | 2 +- .../tainacan-terms/terms-list/index.js | 4 +- .../tainacan-terms/terms-list/terms-list.scss | 71 ++++++++++++++++--- 4 files changed, 114 insertions(+), 20 deletions(-) diff --git a/src/assets/css/tainacan-gutenberg-blocks-style.css b/src/assets/css/tainacan-gutenberg-blocks-style.css index 1c2812de2..38cafc9f6 100644 --- a/src/assets/css/tainacan-gutenberg-blocks-style.css +++ b/src/assets/css/tainacan-gutenberg-blocks-style.css @@ -10,27 +10,68 @@ column-count: 4; column-gap: 7rem; column-rule: none; } - @media only screen and (max-width: 768px) { + .wp-block-tainacan-terms-list ul.terms-list-edit { + -moz-column-count: 3; + -moz-column-gap: 4rem; + -moz-column-rule: none; + -webkit-column-ount: 3; + -webkit-column-gap: 4rem; + -webkit-column-rule: none; + column-count: 3; + column-gap: 4rem; + column-rule: none; } + @media only screen and (max-width: 1024px) { .wp-block-tainacan-terms-list ul.terms-list { -moz-column-count: 3; - -moz-column-gap: 0; + -moz-column-gap: 4rem; -moz-column-rule: none; -webkit-column-count: 3; - -webkit-column-gap: 0; + -webkit-column-gap: 4rem; -webkit-column-rule: none; column-count: 3; column-gap: 4rem; - column-rule: none; } } - @media only screen and (max-width: 490px) { - .wp-block-tainacan-terms-list ul.terms-list { + column-rule: none; } + .wp-block-tainacan-terms-list ul.terms-list-edit { -moz-column-count: 2; - -moz-column-gap: 0; + -moz-column-gap: 2rem; -moz-column-rule: none; -webkit-column-count: 2; - -webkit-column-gap: 0; + -webkit-column-gap: 2rem; -webkit-column-rule: none; column-count: 2; column-gap: 2rem; column-rule: none; } } + @media only screen and (max-width: 768px) { + .wp-block-tainacan-terms-list ul.terms-list { + -moz-column-count: 2; + -moz-column-gap: 2rem; + -moz-column-rule: none; + -webkit-column-count: 2; + -webkit-column-gap: 2rem; + -webkit-column-rule: none; + column-count: 2; + column-gap: 2rem; + column-rule: none; } + .wp-block-tainacan-terms-list ul.terms-list-edit { + -moz-column-count: 1; + -moz-column-gap: 1rem; + -moz-column-rule: none; + -webkit-column-count: 1; + -webkit-column-gap: 1rem; + -webkit-column-rule: none; + column-count: 1; + column-gap: 1rem; + column-rule: none; } } + @media only screen and (max-width: 490px) { + .wp-block-tainacan-terms-list ul.terms-list { + -moz-column-count: 1; + -moz-column-gap: 1rem; + -moz-column-rule: none; + -webkit-column-count: 1; + -webkit-column-gap: 1rem; + -webkit-column-rule: none; + column-count: 1; + column-gap: 1rem; + column-rule: none; } } /*# 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 027df4a5b..27ebd28fa 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,6BAA8B;EAE1B,MAAM,EAAE,QAAQ;EAEhB,2CAAc;IACV,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,CAAC;MAClB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,CAAC;MACrB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAIzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,CAAC;MAClB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,CAAC;MACrB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI", +"mappings": "AAAA,6BAA8B;EAE1B,MAAM,EAAE,QAAQ;EAEhB,2CAAc;IACV,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,gDAAmB;IACf,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,0CAA2C;IAEvC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;IAGrB,gDAAmB;MACf,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAIzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;IAGrB,gDAAmB;MACf,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAKzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI", "sources": ["../../gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss"], "names": [], "file": "tainacan-gutenberg-blocks-style.css" diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js index 47b7c3834..80fb4c126 100644 --- a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js @@ -216,7 +216,7 @@ registerBlockType('tainacan/terms-list', { icon={( Tainacan Logo )} />) : null @@ -236,7 +236,7 @@ registerBlockType('tainacan/terms-list', { ) }     */} -
      { terms }
    +
      { terms }
    ); }, diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss b/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss index b101ebb8f..8d32fbc4f 100644 --- a/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss @@ -14,33 +14,86 @@ column-rule: none; } - @media only screen and (max-width: 768px) { + ul.terms-list-edit { + -moz-column-count: 3; + -moz-column-gap: 4rem; + -moz-column-rule: none; + -webkit-column-ount: 3; + -webkit-column-gap: 4rem; + -webkit-column-rule: none; + column-count: 3; + column-gap: 4rem; + column-rule: none; + } + + @media only screen and (max-width: 1024px) { ul.terms-list { -moz-column-count: 3; - -moz-column-gap: 0; + -moz-column-gap: 4rem; -moz-column-rule: none; -webkit-column-count: 3; - -webkit-column-gap: 0; + -webkit-column-gap: 4rem; -webkit-column-rule: none; column-count: 3; column-gap: 4rem; column-rule: none; } - } - @media only screen and (max-width: 490px) { - - ul.terms-list { + ul.terms-list-edit { -moz-column-count: 2; - -moz-column-gap: 0; + -moz-column-gap: 2rem; -moz-column-rule: none; -webkit-column-count: 2; - -webkit-column-gap: 0; + -webkit-column-gap: 2rem; -webkit-column-rule: none; column-count: 2; column-gap: 2rem; column-rule: none; } } + + @media only screen and (max-width: 768px) { + + ul.terms-list { + -moz-column-count: 2; + -moz-column-gap: 2rem; + -moz-column-rule: none; + -webkit-column-count: 2; + -webkit-column-gap: 2rem; + -webkit-column-rule: none; + column-count: 2; + column-gap: 2rem; + column-rule: none; + } + + ul.terms-list-edit { + -moz-column-count: 1; + -moz-column-gap: 1rem; + -moz-column-rule: none; + -webkit-column-count: 1; + -webkit-column-gap: 1rem; + -webkit-column-rule: none; + column-count: 1; + column-gap: 1rem; + column-rule: none; + } + + } + + @media only screen and (max-width: 490px) { + + ul.terms-list { + -moz-column-count: 1; + -moz-column-gap: 1rem; + -moz-column-rule: none; + -webkit-column-count: 1; + -webkit-column-gap: 1rem; + -webkit-column-rule: none; + column-count: 1; + column-gap: 1rem; + column-rule: none; + } + } + } \ No newline at end of file From 4d991c015c8867f6dc622d7fa96a8773434291a7 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Wed, 30 Jan 2019 13:45:57 -0200 Subject: [PATCH 04/18] Uses className instead of class. --- src/gutenberg-blocks/tainacan-terms/terms-list/index.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js index 80fb4c126..a1658c8c2 100644 --- a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js @@ -100,7 +100,7 @@ registerBlockType('tainacan/terms-list', { function setContent(terms){ setAttributes({ content: ( -
      { terms }
    +
      { terms }
    ) }); } @@ -236,7 +236,7 @@ registerBlockType('tainacan/terms-list', { ) } */} -
      { terms }
    +
      { terms }
    ); }, From e1f065f6f9a18c84a27915b4c0a115a4779edc0a Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Fri, 8 Feb 2019 09:45:56 -0200 Subject: [PATCH 05/18] Adds react-autocomplete. Begins most logic of static items grid. --- package.json | 1 + .../css/tainacan-gutenberg-blocks-style.css | 39 +++ .../tainacan-gutenberg-blocks-style.css.map | 2 +- .../tainacan-terms/terms-list/index.js | 296 ++++++++++++------ .../terms-list/simple-autocomplete.js | 63 ---- .../tainacan-terms/terms-list/terms-list.scss | 58 ++++ 6 files changed, 302 insertions(+), 157 deletions(-) delete mode 100644 src/gutenberg-blocks/tainacan-terms/terms-list/simple-autocomplete.js diff --git a/package.json b/package.json index f94cac79c..243590140 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "node-sass": "^4.9.4", "qs": "^6.5.2", "react": "^16.5.2", + "react-autocomplete": "^1.8.1", "react-dom": "^16.5.2", "t": "^0.5.1", "v-tooltip": "^2.0.0-rc.33", diff --git a/src/assets/css/tainacan-gutenberg-blocks-style.css b/src/assets/css/tainacan-gutenberg-blocks-style.css index 38cafc9f6..4b59c1d46 100644 --- a/src/assets/css/tainacan-gutenberg-blocks-style.css +++ b/src/assets/css/tainacan-gutenberg-blocks-style.css @@ -1,5 +1,44 @@ .wp-block-tainacan-terms-list { margin: 1rem 0px; } + .wp-block-tainacan-terms-list .block-control { + display: flex; + flex-direction: row; } + .wp-block-tainacan-terms-list .block-control .block-control-item { + width: 100%; } + .wp-block-tainacan-terms-list .block-control .block-control-item.disabled { + cursor: none; } + .wp-block-tainacan-terms-list .block-control .block-control-item.disabled label.autocomplete-label { + color: #cbcbcb; } + .wp-block-tainacan-terms-list .block-control .block-control-item.disabled input { + background-color: #f2f2f2; } + .wp-block-tainacan-terms-list label.autocomplete-label { + display: block; + font-weight: 600; + font-size: 14px; } + .wp-block-tainacan-terms-list .react-autocomplete { + margin: 0 12px 12px 0; + position: relative; + display: inline-block; } + .wp-block-tainacan-terms-list .react-autocomplete input { + margin: 4px 12px 0px 0px; + border: 1px solid #dbdbdb; + padding: 4px 10px; } + .wp-block-tainacan-terms-list .react-autocomplete input:focus, .wp-block-tainacan-terms-list .react-autocomplete input:active { + border: 1px solid #555758; } + .wp-block-tainacan-terms-list .react-autocomplete .menu { + position: absolute; + background-color: white; + width: 100%; + padding: 0; + border: 1px solid #cbcbcb; + z-index: 999; + height: auto; + transition: height ease 0.2s, display ease 0.2s, visibility ease 0.2s; } + .wp-block-tainacan-terms-list .react-autocomplete .menu .item { + padding: 4px 12px; + font-size: 14px; } + .wp-block-tainacan-terms-list .react-autocomplete .menu .item.item-highlighted { + background-color: #e6f6f8; } .wp-block-tainacan-terms-list ul.terms-list { -moz-column-count: 4; -moz-column-gap: 7rem; diff --git a/src/assets/css/tainacan-gutenberg-blocks-style.css.map b/src/assets/css/tainacan-gutenberg-blocks-style.css.map index 27ebd28fa..9f8bba27f 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,6BAA8B;EAE1B,MAAM,EAAE,QAAQ;EAEhB,2CAAc;IACV,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,gDAAmB;IACf,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,0CAA2C;IAEvC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;IAGrB,gDAAmB;MACf,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAIzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;IAGrB,gDAAmB;MACf,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAKzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI", +"mappings": "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", "sources": ["../../gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss"], "names": [], "file": "tainacan-gutenberg-blocks-style.css" diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js index 883f028e9..16cc481fc 100644 --- a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js @@ -2,11 +2,11 @@ const { registerBlockType } = wp.blocks; const { __ } = wp.i18n; -const { Autocomplete, SelectControl, Spinner, QueryControls, Placeholder } = wp.components; +const { IconButton, Spinner, QueryControls, Placeholder } = wp.components; const { InspectorControls } = wp.editor; -import SimpleAutocomplete from './simple-autocomplete.js'; +import Autocomplete from 'react-autocomplete'; import tainacan from '../../api-client/axios.js'; import qs from 'qs'; @@ -17,7 +17,7 @@ registerBlockType('tainacan/terms-list', { category: 'tainacan-blocks', keywords: [ __( 'Tainacan', 'tainacan' ), __( 'terms', 'tainacan' ), __( 'taxonomy', 'tainacan' ) ], attributes: { - terms: { + selectedTerms: { type: 'array', source: 'query', selector: 'li>a', @@ -47,7 +47,11 @@ registerBlockType('tainacan/terms-list', { type: Object, default: {} }, - URLTaxonomyID: { + taxonomyId: { + type: String, + default: '' + }, + taxonomyName: { type: String, default: '' }, @@ -55,16 +59,28 @@ registerBlockType('tainacan/terms-list', { type: Boolean, default: false }, + isLoadingTerms: { + type: Boolean, + default: false + }, taxonomies: { type: Array, - default: null + default: [] + }, + terms: { + type: Array, + default: [] + }, + currentTermName: { + type: String, + default: '' } }, supports: { html: false }, edit({ attributes, setAttributes, className, isSelected }){ - let { terms, content, termsPerPage, query, URLTaxonomyID, isLoadingTaxonomies, taxonomies } = attributes; + let { selectedTerms, terms, content, currentTermName, taxonomyId, taxonomyName, isLoadingTerms, isLoadingTaxonomies, taxonomies } = attributes; console.log("Editando..."); @@ -81,48 +97,38 @@ registerBlockType('tainacan/terms-list', { href={ term.url } target="_blank"> { term.name ? term.name : '' } + ); } - function getTerms(taxonomyID, query) { - if(taxonomyID) { - return tainacan.get(`/taxonomy/${taxonomyID}/terms?${query}`) - .then(response => { - return response.data; - }) - .catch(error => { - console.error(error); - return []; - }); - } else { - return []; - } - } - - function setContent(terms){ + function setContent(selectedTerms){ setAttributes({ content: ( -
      { terms }
    +
      { selectedTerms }
    ) }); } - - function updateTermsQuery(query) { - let queryString = qs.stringify(query); - getTerms(URLTaxonomyID, queryString).then(data => { - terms = []; + function selectTerm(term) { + + let existingTermIndex = selectedTerms.findIndex((existingTerm) => existingTerm.id == term.id); + if (existingTermIndex < 0) + selectedTerms.push(prepareTerm(term)); - data.map((term) => { - terms.push(prepareTerm(term)); - }); + setAttributes({ + selectedTerms: selectedTerms + }); + } - setAttributes({ - terms: terms, - URLTaxonomyID: URLTaxonomyID - }); - setContent(terms); + function removeTermAtIndex(index) { + + selectedTerms.splice(index, 1); + + setAttributes({ + selectedTerms: selectedTerms }); } @@ -133,33 +139,80 @@ registerBlockType('tainacan/terms-list', { termsOnComponent.push(prepareTerm(term)); } - terms = termsOnComponent; - setAttributes({ terms: termsOnComponent }); + selectedTerms = termsOnComponent; + setAttributes({ selectedTerms: termsOnComponent }); setContent(termsOnComponent); } - function fetchTaxonomies() { + function fetchTaxonomies(name) { isLoadingTaxonomies = true; taxonomies = []; - tainacan.get(`/taxonomies/?nopaging=1`) - .then(response => { - setAttributes({ - isLoadingTaxonomies: false, - taxonomies: response.data - }); + setAttributes({ + isLoadingTaxonomies: isLoadingTaxonomies, + taxonomies: taxonomies + }); - return response.data; + let endpoint = '/taxonomies/?perpage=12'; + if (name != undefined && name != '') + endpoint += '&search=' + name; + + tainacan.get(endpoint) + .then(response => { + taxonomies = response.data.map((taxonomy) => ({ name: taxonomy.name, value: taxonomy.id + "" })); + isLoadingTaxonomies = false; + + setAttributes({ + isLoadingTaxonomies: isLoadingTaxonomies, + taxonomies: taxonomies + }); + + return taxonomies; }) .catch(error => { - console.error(error); + console.log('Error trying to fetch taxonomies: ' + error); }); } - function setTaxonomyID( { selectedTaxonomyID } ) { - URLTaxonomyID = selectedTaxonomyID; - query.number = !termsPerPage ? 1 : termsPerPage; - updateTermsQuery(query); + function fetchTerms(name) { + isLoadingTerms = true; + terms = []; + + setAttributes({ + isLoadingTerms: isLoadingTerms, + terms: terms + }); + + let endpoint = '/taxonomy/'+ taxonomyId + '/terms/?number=12'; + + if (name != undefined && name != '') + endpoint += '&searchterm=' + name; + + tainacan.get(endpoint) + .then(response => { + terms = response.data.map((term) => ({ name: term.name, value: term.id + "" })); + isLoadingTerms = false; + + setAttributes({ + isLoadingTerms: isLoadingTerms, + terms: terms + }); + + return terms; + }) + .catch(error => { + console.log('Error trying to fetch terms: ' + error); + }); + } + + function fetchTaxonomy() { + tainacan.get('/taxonomies/' + taxonomyId) + .then((response) => { + taxonomyName = response.data.name; + setAttributes({ taxonomyName: taxonomyName }); + }).catch(error => { + console.log('Error trying to fetch taxonomy: ' + error); + }); } // const completers = [{ @@ -171,57 +224,114 @@ registerBlockType('tainacan/terms-list', { // ) // }] - if (taxonomies == null) - fetchTaxonomies(); + if (taxonomyId != null && taxonomyId != '') + fetchTaxonomy(); if(content && content.length && content[0].type) - mountBlock(terms); + mountBlock(selectedTerms); return (
    -
    - -
    - { - query.number = !numberOfItems ? 1 : numberOfItems; - termsPerPage = query.number; - - setAttributes({ termsPerPage: termsPerPage }); - - _.debounce(updateTermsQuery(query), 300); - } - } - /> -
    -     -
    - { isSelected ? - ( isLoadingTaxonomies == true ? - - : - ( - // ({ label: taxonomy.name, value: taxonomy.id })) } - // onChange={ ( selectedTaxonomyID ) => { setTaxonomyID( { selectedTaxonomyID } ) } }/> - ({ label: taxonomy.name, value: taxonomy.id })) } - onChange={ ( selectedTaxonomyID ) => { setTaxonomyID( { selectedTaxonomyID } ) } }/> + + (
    +
    + + { isLoadingTaxonomies ? : null } + +
    + + + { + taxonomyId = value; + taxonomyName = item.name; + setAttributes({ taxonomyId: taxonomyId, taxonomyName: taxonomyName, taxonomies: [ item ] }); + } + } + getItemValue={(taxonomy) => taxonomy.value } + onChange={(event, value) => { + taxonomyId = null; + taxonomyName = value; + setAttributes({ taxonomyId: taxonomyId, taxonomyName: taxonomyName }); + fetchTaxonomies(value); + } + } + renderMenu={ children => ( + children.length > 0 ? ( +
    + { children } +
    + ) : + )} + renderItem={(item, isHighlighted) => ( +
    + {item.name} +
    + )}/> +
    +
    - ) - ) : null + + + { + currentTermName = ''; + setAttributes({ currentTermName: currentTermName }); + selectTerm(item); + } + } + getItemValue={(term) => term.value } + onChange={(event, value) => { + currentTermName = value; + setAttributes({ currentTermName: currentTermName }); + fetchTerms(value); + } + } + renderMenu={ children => ( + children.length > 0 ? ( +
    + { children } +
    + ) : + )} + renderItem={(item, isHighlighted) => ( +
    + {item.name} +
    + )}/> +
    +
    +
    +
    + ) : null } - { !terms.length ? ( + { !selectedTerms.length ? ( */} -
      { terms }
    +
      { selectedTerms }
    ); }, diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/simple-autocomplete.js b/src/gutenberg-blocks/tainacan-terms/terms-list/simple-autocomplete.js deleted file mode 100644 index 0fb599e2e..000000000 --- a/src/gutenberg-blocks/tainacan-terms/terms-list/simple-autocomplete.js +++ /dev/null @@ -1,63 +0,0 @@ -/** - * A very simple autocomplete component - * - * This is to replace the OOTB Gutenberg Autocomplete component because it is - * currently broken as of v4.5.1. - * - * See Github issue: https://github.com/WordPress/gutenberg/issues/10542 - * - * Note: The options array should be an array of objects containing labels and values; i.e.: - * [ - * { value: 'first', label: 'First' }, - * { value: 'second', label: 'Second' } - * ] - */ - -// Load external dependency. -import { isEmpty } from 'lodash'; - -function SimpleAutocomplete( { - label, - id, - value, - onChange, - options = [], -} ) { - // Construct a unique ID for this block. - const blockId = `simple-autocomplete-${ id }`; - - // Function to handle the onChange event. - const onChangeValue = ( event ) => { - console.log("onChangeValue") - onChange( event.target.value ); - }; - - // Return the block, but only if options were passed in. - return ! isEmpty( options ) && ( -
    - { /* Label for the block. */ } - - - { /* Input field. */ } - - - { /* List of all of the autocomplete options. */ } - - { options.map( ( option, index ) => - -
    - ); -} - -export default SimpleAutocomplete; diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss b/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss index 8d32fbc4f..18f10733b 100644 --- a/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss @@ -2,6 +2,64 @@ margin: 1rem 0px; + .block-control { + display: flex; + flex-direction: row; + + .block-control-item { + width: 100%; + } + + .block-control-item.disabled { + cursor: none; + label.autocomplete-label { + color: #cbcbcb; + } + input { + background-color: #f2f2f2; + } + } + } + + label.autocomplete-label { + display: block; + font-weight: 600; + font-size: 14px; + } + + .react-autocomplete { + margin: 0 12px 12px 0; + position: relative; + display: inline-block; + + input { + margin: 4px 12px 0px 0px; + border: 1px solid #dbdbdb; + padding: 4px 10px; + &:focus, &:active { + border: 1px solid #555758; + } + } + .menu { + position: absolute; + background-color: white; + width: 100%; + padding: 0; + border: 1px solid #cbcbcb; + z-index: 999; + height: auto; + transition: height ease 0.2s, display ease 0.2s, visibility ease 0.2s; + + .item { + padding: 4px 12px; + font-size: 14px; + } + .item.item-highlighted { + background-color: #e6f6f8; + } + } + } + ul.terms-list { -moz-column-count: 4; -moz-column-gap: 7rem; From 32ded24df0e1545aa460cf4fcaaee76991d4d043 Mon Sep 17 00:00:00 2001 From: Mateus Machado Luna Date: Fri, 8 Feb 2019 11:44:27 -0200 Subject: [PATCH 06/18] Adds button to close term from list. --- .../css/tainacan-gutenberg-blocks-style.css | 18 +++++ .../tainacan-gutenberg-blocks-style.css.map | 2 +- .../tainacan-terms/terms-list/index.js | 77 ++++++++----------- .../tainacan-terms/terms-list/terms-list.scss | 24 ++++++ 4 files changed, 76 insertions(+), 45 deletions(-) diff --git a/src/assets/css/tainacan-gutenberg-blocks-style.css b/src/assets/css/tainacan-gutenberg-blocks-style.css index 4b59c1d46..19c04b829 100644 --- a/src/assets/css/tainacan-gutenberg-blocks-style.css +++ b/src/assets/css/tainacan-gutenberg-blocks-style.css @@ -59,6 +59,24 @@ column-count: 3; column-gap: 4rem; column-rule: none; } + .wp-block-tainacan-terms-list ul.terms-list-edit li.term-list-item { + display: flex; + align-items: flex-start; + line-height: 22px; + justify-content: space-between; + margin-bottom: 12px; } + .wp-block-tainacan-terms-list ul.terms-list-edit li.term-list-item button { + padding: 2px; + margin-left: 5px; + visibility: hidden; + position: relative; + opacity: 0; + left: -24px; } + .wp-block-tainacan-terms-list ul.terms-list-edit li.term-list-item:hover button { + visibility: visible; + opacity: 1; + left: 0px; + transition: opacity linear 0.2s, left linear 0.2s; } @media only screen and (max-width: 1024px) { .wp-block-tainacan-terms-list ul.terms-list { -moz-column-count: 3; diff --git a/src/assets/css/tainacan-gutenberg-blocks-style.css.map b/src/assets/css/tainacan-gutenberg-blocks-style.css.map index 9f8bba27f..f1e4a6f02 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,6BAA8B;EAE1B,MAAM,EAAE,QAAQ;EAEhB,4CAAe;IACX,OAAO,EAAE,IAAI;IACb,cAAc,EAAE,GAAG;IAEnB,gEAAoB;MAChB,KAAK,EAAE,IAAI;IAGf,yEAA6B;MACzB,MAAM,EAAE,IAAI;MACZ,kGAAyB;QACrB,KAAK,EAAE,OAAO;MAElB,+EAAM;QACF,gBAAgB,EAAE,OAAO;EAKrC,sDAAyB;IACrB,OAAO,EAAE,KAAK;IACd,WAAW,EAAE,GAAG;IAChB,SAAS,EAAE,IAAI;EAGnB,iDAAoB;IAChB,MAAM,EAAE,aAAa;IACrB,QAAQ,EAAE,QAAQ;IAClB,OAAO,EAAE,YAAY;IAErB,uDAAM;MACF,MAAM,EAAE,gBAAgB;MACxB,MAAM,EAAE,iBAAiB;MACzB,OAAO,EAAE,QAAQ;MACjB,6HAAkB;QACd,MAAM,EAAE,iBAAiB;IAGjC,uDAAM;MACF,QAAQ,EAAE,QAAQ;MAClB,gBAAgB,EAAE,KAAK;MACvB,KAAK,EAAE,IAAI;MACX,OAAO,EAAE,CAAC;MACV,MAAM,EAAE,iBAAiB;MACzB,OAAO,EAAE,GAAG;MACZ,MAAM,EAAE,IAAI;MACZ,UAAU,EAAE,yDAAyD;MAErE,6DAAM;QACF,OAAO,EAAE,QAAQ;QACjB,SAAS,EAAE,IAAI;MAEnB,8EAAuB;QACnB,gBAAgB,EAAE,OAAO;EAKrC,2CAAc;IACV,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,gDAAmB;IACf,iBAAiB,EAAE,CAAC;IACpB,eAAe,EAAE,IAAI;IACrB,gBAAgB,EAAE,IAAI;IACtB,mBAAmB,EAAE,CAAC;IACtB,kBAAkB,EAAE,IAAI;IACxB,mBAAmB,EAAE,IAAI;IACzB,YAAY,EAAE,CAAC;IACf,UAAU,EAAE,IAAI;IAChB,WAAW,EAAE,IAAI;EAGrB,0CAA2C;IAEvC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;IAGrB,gDAAmB;MACf,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAIzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;IAGrB,gDAAmB;MACf,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI;EAKzB,yCAA0C;IAEtC,2CAAc;MACV,iBAAiB,EAAE,CAAC;MACpB,eAAe,EAAE,IAAI;MACrB,gBAAgB,EAAE,IAAI;MACtB,oBAAoB,EAAE,CAAC;MACvB,kBAAkB,EAAE,IAAI;MACxB,mBAAmB,EAAE,IAAI;MACzB,YAAY,EAAE,CAAC;MACf,UAAU,EAAE,IAAI;MAChB,WAAW,EAAE,IAAI", +"mappings": "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", "sources": ["../../gutenberg-blocks/tainacan-terms/terms-list/terms-list.scss"], "names": [], "file": "tainacan-gutenberg-blocks-style.css" diff --git a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js index 16cc481fc..7271d425d 100644 --- a/src/gutenberg-blocks/tainacan-terms/terms-list/index.js +++ b/src/gutenberg-blocks/tainacan-terms/terms-list/index.js @@ -84,21 +84,17 @@ registerBlockType('tainacan/terms-list', { console.log("Editando..."); - function prepareTerm(term) { + function prepareTerm(term, index) { return ( -
  • - +
  • + { term.name ? term.name : '' }
    • ); @@ -112,31 +108,11 @@ registerBlockType('tainacan/terms-list', { }); } - function selectTerm(term) { - - let existingTermIndex = selectedTerms.findIndex((existingTerm) => existingTerm.id == term.id); - if (existingTermIndex < 0) - selectedTerms.push(prepareTerm(term)); - - setAttributes({ - selectedTerms: selectedTerms - }); - } - - function removeTermAtIndex(index) { - - selectedTerms.splice(index, 1); - - setAttributes({ - selectedTerms: selectedTerms - }); - } - function mountBlock(termsFromHTML) { let termsOnComponent = []; - for (const term of termsFromHTML){ - termsOnComponent.push(prepareTerm(term)); + for (let i = 0; i < termsFromHTML.length; i++){ + termsOnComponent.push(prepareTerm(termsFromHTML[i], i)); } selectedTerms = termsOnComponent; @@ -190,7 +166,7 @@ registerBlockType('tainacan/terms-list', { tainacan.get(endpoint) .then(response => { - terms = response.data.map((term) => ({ name: term.name, value: term.id + "" })); + terms = response.data.map((term) => ({ name: term.name, value: term.id + "", id: term.id })); isLoadingTerms = false; setAttributes({ @@ -215,15 +191,28 @@ registerBlockType('tainacan/terms-list', { }); } - // const completers = [{ - // name: 'taxonomy-list-autocomplete', - // triggerPrefix: '/', - // options: query => fetchTaxonomies(query), - // getOptionLabel: option => ( - // { option } - // ) - // }] + function selectTerm(term) { + let existingTermIndex = selectedTerms.findIndex((existingTerm) => existingTerm.key == term.id); + if (existingTermIndex < 0) + selectedTerms.push(prepareTerm(term, selectedTerms.length)); + setAttributes({ + selectedTerms: selectedTerms + }); + setContent(selectedTerms); + } + + function removeTermAtIndex(index) { + + selectedTerms.splice(index, 1); + + setAttributes({ + selectedTerms: selectedTerms + }); + setContent(selectedTerms); + } + + // Executed every time Edit function runs if (taxonomyId != null && taxonomyId != '') fetchTaxonomy(); @@ -236,10 +225,10 @@ registerBlockType('tainacan/terms-list', { { isSelected ? (
    + { isLoadingTaxonomies ? : null } +
    - { isLoadingTaxonomies ? : null } -