From 32f8abbb165a897c486a20fdcfe5511871b14903 Mon Sep 17 00:00:00 2001 From: Connor Brough Date: Thu, 14 Feb 2019 17:20:12 +0000 Subject: [PATCH 1/5] initial logo slide - editor view not finished. --- block-languages/benenson-blocks.pot | 117 +++++--- src/scripts/app.js | 2 + src/scripts/blocks.js | 1 + .../blocks/logo-slider/DisplayComponent.js | 272 ++++++++++++++++++ src/scripts/blocks/logo-slider/index.js | 68 +++++ src/scripts/modules/logo-slider.js | 35 +++ .../components/logo-slider/_editor.scss | 36 +++ src/styles/components/logo-slider/_main.scss | 68 +++++ src/styles/style-editor.scss | 2 + src/styles/style.scss | 1 + 10 files changed, 560 insertions(+), 42 deletions(-) create mode 100644 src/scripts/blocks/logo-slider/DisplayComponent.js create mode 100644 src/scripts/blocks/logo-slider/index.js create mode 100644 src/scripts/modules/logo-slider.js create mode 100644 src/styles/components/logo-slider/_editor.scss create mode 100644 src/styles/components/logo-slider/_main.scss diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot index 00e5518..0403d19 100644 --- a/block-languages/benenson-blocks.pot +++ b/block-languages/benenson-blocks.pot @@ -848,6 +848,81 @@ msgstr "" msgid "Add a repeatable logo block" msgstr "" +#: src/scripts/blocks/logo-slider/DisplayComponent.js:128 +msgid "Are you sure you want to delete this logo from the slider?" +msgstr "" + +#: src/scripts/blocks/logo-slider/DisplayComponent.js:183 +#: src/scripts/blocks/slider/DisplayComponent.js:217 +msgid "Show Arrows" +msgstr "" + +#: src/scripts/blocks/logo-slider/DisplayComponent.js:188 +#: src/scripts/blocks/slider/DisplayComponent.js:238 +msgid "Slide Options" +msgstr "" + +#: src/scripts/blocks/logo-slider/DisplayComponent.js:195 +msgid "Open link in new tab" +msgstr "" + +#: src/scripts/blocks/logo-slider/DisplayComponent.js:222 +msgid "Add a logo below." +msgstr "" + +#: src/scripts/blocks/logo-slider/DisplayComponent.js:223 +msgid "Add Logo" +msgstr "" + +#: src/scripts/blocks/logo-slider/DisplayComponent.js:244 +#: src/scripts/blocks/logo-slider/DisplayComponent.js:247 +#: src/scripts/blocks/slider/DisplayComponent.js:273 +msgid "Remove Slide" +msgstr "" + +#: src/scripts/blocks/logo-slider/DisplayComponent.js:245 +#: src/scripts/blocks/logo-slider/DisplayComponent.js:248 +#: src/scripts/blocks/slider/DisplayComponent.js:384 +msgid "Add Slide" +msgstr "" + +#: src/scripts/blocks/logo-slider/DisplayComponent.js:261 +#: src/scripts/blocks/logo-slider/DisplayComponent.js:264 +#: src/scripts/blocks/slider/DisplayComponent.js:379 +msgid "(No Title)" +msgstr "" + +#: src/scripts/blocks/logo-slider/index.js:23 +msgid "Logo slider" +msgstr "" + +#: src/scripts/blocks/logo-slider/index.js:27 +#: src/scripts/blocks/slider/index.js:38 +msgid "Slider" +msgstr "" + +#: src/scripts/blocks/logo-slider/index.js:28 +#: src/scripts/blocks/slider/index.js:39 +msgid "Carousel" +msgstr "" + +#: src/scripts/blocks/logo-slider/index.js:29 +#: src/scripts/blocks/slider/index.js:40 +msgid "Scroller" +msgstr "" + +#: src/scripts/blocks/logo-slider/index.js:61 +#: src/scripts/blocks/slider/DisplayComponent.js:287 +#: src/scripts/blocks/slider/index.js:59 +msgid "Next" +msgstr "" + +#: src/scripts/blocks/logo-slider/index.js:62 +#: src/scripts/blocks/slider/DisplayComponent.js:288 +#: src/scripts/blocks/slider/index.js:60 +msgid "Previous" +msgstr "" + #: src/scripts/blocks/media-aside/DisplayComponent.js:103 msgid "(Insert Link text)" msgstr "" @@ -1060,10 +1135,6 @@ msgstr "" msgid "Do you wish to delete this slide? This action is irreversible" msgstr "" -#: src/scripts/blocks/slider/DisplayComponent.js:217 -msgid "Show Arrows" -msgstr "" - #: src/scripts/blocks/slider/DisplayComponent.js:223 msgid "Has Content" msgstr "" @@ -1085,10 +1156,6 @@ msgid "" "you to navigate through each slide." msgstr "" -#: src/scripts/blocks/slider/DisplayComponent.js:238 -msgid "Slide Options" -msgstr "" - #: src/scripts/blocks/slider/DisplayComponent.js:240 msgid "Slide Title" msgstr "" @@ -1108,24 +1175,10 @@ msgid "" "field." msgstr "" -#: src/scripts/blocks/slider/DisplayComponent.js:273 -msgid "Remove Slide" -msgstr "" - #: src/scripts/blocks/slider/DisplayComponent.js:274 msgid "This is irreversible." msgstr "" -#: src/scripts/blocks/slider/DisplayComponent.js:287 -#: src/scripts/blocks/slider/index.js:59 -msgid "Next" -msgstr "" - -#: src/scripts/blocks/slider/DisplayComponent.js:288 -#: src/scripts/blocks/slider/index.js:60 -msgid "Previous" -msgstr "" - #: src/scripts/blocks/slider/DisplayComponent.js:294 msgid "Add a slide below." msgstr "" @@ -1134,14 +1187,6 @@ msgstr "" msgid "(Sub-Heading)" msgstr "" -#: src/scripts/blocks/slider/DisplayComponent.js:379 -msgid "(No Title)" -msgstr "" - -#: src/scripts/blocks/slider/DisplayComponent.js:384 -msgid "Add Slide" -msgstr "" - #: src/scripts/blocks/slider/DisplayComponent.js:49 msgid "Opaque" msgstr "" @@ -1162,18 +1207,6 @@ msgstr "" msgid "Toggle Content" msgstr "" -#: src/scripts/blocks/slider/index.js:38 -msgid "Slider" -msgstr "" - -#: src/scripts/blocks/slider/index.js:39 -msgid "Carousel" -msgstr "" - -#: src/scripts/blocks/slider/index.js:40 -msgid "Scroller" -msgstr "" - #: src/scripts/blocks/tweet/index.js:109 msgid "(Action Title)" msgstr "" diff --git a/src/scripts/app.js b/src/scripts/app.js index 22a140f..66f29dc 100755 --- a/src/scripts/app.js +++ b/src/scripts/app.js @@ -11,6 +11,7 @@ import categorySlider from './modules/category-slider'; import modalEmbed from './modules/modal-embed'; import inlineEmbed from './modules/inline-embed'; import sliderBlock from './modules/slider-block'; +import logoSlider from './modules/logo-slider'; import subcatDrops from './modules/subcategory-dropdown'; import categoryExpander from './modules/category-expander'; import fluidText from './modules/fluid-text'; @@ -31,6 +32,7 @@ const App = () => { modalEmbed(); inlineEmbed(); sliderBlock(); + logoSlider(); subcatDrops(); categoryExpander(); scrollTo(); diff --git a/src/scripts/blocks.js b/src/scripts/blocks.js index a99adc8..0b32e10 100755 --- a/src/scripts/blocks.js +++ b/src/scripts/blocks.js @@ -26,6 +26,7 @@ import './blocks/download'; import './blocks/key-facts'; import './blocks/category-list'; import './blocks/logo-list'; +import './blocks/logo-slider'; import './blocks/link'; import './blocks/media-aside'; diff --git a/src/scripts/blocks/logo-slider/DisplayComponent.js b/src/scripts/blocks/logo-slider/DisplayComponent.js new file mode 100644 index 0000000..44d9d48 --- /dev/null +++ b/src/scripts/blocks/logo-slider/DisplayComponent.js @@ -0,0 +1,272 @@ +import classnames from 'classnames'; + +const randId = () => Math.random().toString(36).replace(/[^a-z]+/g, '').substr(2, 10); + +const { __ } = wp.i18n; +const { Component, Fragment } = wp.element; +const { applyFilters } = wp.hooks; +const { + PanelBody, Button, TextControl, ToggleControl, SelectControl, +} = wp.components; +const { + InspectorControls, RichText, BlockIcon, URLInputButton, +} = wp.editor; +const { PostMediaSelector } = benenson.components; + +class DisplayComponent extends Component { + static emptySlide = { + id: '', + title: '', + imageId: '', + imageUrl: '', + imageLink: '', + newTab: false, + }; + + constructor(...props) { + super(...props); + + this.state = { + selectedSlide: 0, + }; + } + + componentDidMount() { + const { attributes, setAttributes } = this.props; + + if (!attributes.sliderId) { + setAttributes({ + sliderId: randId(), + }); + } + } + + /** + * Higher order component that takes the attribute key, + * this then returns a function which takes a value, + * when called it updates the attribute with the key. + * @param key + * @returns {function(*): *} + */ + createUpdateAttribute = key => value => this.props.setAttributes({ [key]: value }); + + createUpdateSlideAttribute = + index => + key => + value => + this.props.setAttributes({ + slides: [ + ...this.props.attributes.slides + .slice(0, Math.max(0, index)), + { + ...this.props.attributes.slides[index], + [key]: value, + }, + ...this.props.attributes + .slides.slice(index + 1, this.props.attributes.slides.length), + ], + }); + + createUpdateImage = + index => + ({ + id: imageId = false, + source_url: imageUrl = false, + media_details: { + sizes, + } = {}, + } = {}) => { + this.props.setAttributes({ + slides: [ + ...this.props.attributes.slides + .slice(0, Math.max(0, index)), + { + ...this.props.attributes.slides[index], + imageId, + imageUrl, + sizes, + }, + ...this.props.attributes + .slides.slice(index + 1, this.props.attributes.slides.length), + ], + }); + }; + + addSlide = () => { + const { attributes, setAttributes } = this.props; + + setAttributes({ + slides: [...attributes.slides, { + ...DisplayComponent.emptySlide, + id: randId(), + }], + }); + + this.setState({ + selectedSlide: attributes.slides.length, + }); + }; + + deleteSlide = (index) => { + const { attributes, setAttributes } = this.props; + + if (index === attributes.slides.length - 1) { + this.setState({ + selectedSlide: index - 1, + }); + } + + this.props.setAttributes({ + slides: [ + ...attributes.slides.slice(0, Math.max(0, index)), + ...attributes.slides.slice(index + 1, attributes.slides.length), + ], + }); + }; + + initiateDelete = () => { + if (confirm(__('Are you sure you want to delete this logo from the slider?'))) { // eslint-disable-line no-restricted-globals, no-alert + this.deleteSlide(this.state.selectedSlide); + } + }; + + selectSlide = index => this.setState({ + selectedSlide: index, + }); + + createSelectSlide = index => () => this.selectSlide(index); + + movePrev = () => { + const { selectedSlide } = this.state; + + const slideOrder = [...this.props.attributes.slides]; + const temp = slideOrder[selectedSlide]; + slideOrder[selectedSlide] = slideOrder[selectedSlide - 1]; + slideOrder[selectedSlide - 1] = temp; + + this.props.setAttributes({ + slides: slideOrder, + }); + + this.setState({ + selectedSlide: selectedSlide - 1, + }); + }; + + moveNext = () => { + const { selectedSlide } = this.state; + + const slideOrder = [...this.props.attributes.slides]; + const temp = slideOrder[selectedSlide]; + slideOrder[selectedSlide] = slideOrder[selectedSlide + 1]; + slideOrder[selectedSlide + 1] = temp; + + this.props.setAttributes({ + slides: slideOrder, + }); + + this.setState({ + selectedSlide: selectedSlide + 1, + }); + }; + + render() { + const { attributes, setAttributes } = this.props; + const { selectedSlide } = this.state; + + const currentSlide = attributes.slides[selectedSlide]; + const updateSlide = this.createUpdateSlideAttribute(selectedSlide); + + const controls = ( + + + { currentSlide && ( + + + + { attributes.slides.length >= 2 && ( +

Change milestone position:

+ )} + { selectedSlide !== 0 && ( + + )} + { selectedSlide < attributes.slides.length - 1 && ( + + )} + + ) } + + ); + + return ( + + { controls } +
+
+
+ { attributes.slides.length === 0 && ( +
+
+

{ __('Add a logo below.', 'benenson') }

+ +
+
+ ) } + { currentSlide && ( +
+ + +
+ ) } +
+
+ +
+ + ); + } +} + +export default DisplayComponent; diff --git a/src/scripts/blocks/logo-slider/index.js b/src/scripts/blocks/logo-slider/index.js new file mode 100644 index 0000000..5d57b68 --- /dev/null +++ b/src/scripts/blocks/logo-slider/index.js @@ -0,0 +1,68 @@ +import classnames from 'classnames'; +import DisplayComponent from './DisplayComponent'; + +const { __ } = wp.i18n; +const { registerBlockType } = wp.blocks; +const { RichText } = wp.editor; + +const blockAttributes = { + sliderId: { + type: 'string', + }, + slides: { + type: 'array', + default: [], + }, + hasArrows: { + type: 'boolean', + default: true, + }, +}; + +registerBlockType('benenson/block-logo-slider', { + title: __('Logo slider', 'benenson'), + icon: 'welcome-widgets-menus', + category: 'benenson', + keywords: [ + __('Slider', 'benenson'), + __('Carousel', 'benenson'), + __('Scroller', 'benenson'), + ], + attributes: blockAttributes, + + edit: DisplayComponent, + + save: ({ attributes, className }) => { + const { slides, logoSliderId } = attributes; + + if (slides.length < 1) { + return null; + } + + return ( +
+
+
+ { slides.map((slide, index) => ( +
+
+ { slide.imageLink !== '' ? + + + + : + + } +
+
+ )) } +
+ { attributes.hasArrows && [ + , + , + ] } +
+
+ ); + }, +}); diff --git a/src/scripts/modules/logo-slider.js b/src/scripts/modules/logo-slider.js new file mode 100644 index 0000000..22d8d24 --- /dev/null +++ b/src/scripts/modules/logo-slider.js @@ -0,0 +1,35 @@ +import Flickity from 'flickity'; +import 'flickity-as-nav-for'; +import { debounce } from 'lodash-es'; + +const createSlider = (slider) => { + const slides = slider.querySelector('.logoSlides'); + + if (!slides) { + return; + } + + const isRightToLeft = document.documentElement.getAttribute('dir') === 'rtl'; + + const prevArrow = slider.querySelector('.logoSlider-arrow--previous'); + const nextArrow = slider.querySelector('.logoSlider-arrow--next'); + + const slidesInstance = new Flickity(slides, { + rightToLeft: isRightToLeft, + prevNextButtons: false, + pageDots: false, + contain: true, + }); + + if (nextArrow && prevArrow) { + prevArrow.addEventListener('click', () => slidesInstance.previous()); + nextArrow.addEventListener('click', () => slidesInstance.next()); + } +}; + +const init = () => { + const sliders = Array.from(document.querySelectorAll('.logoSlider')); + sliders.forEach(createSlider); +}; + +export default init; diff --git a/src/styles/components/logo-slider/_editor.scss b/src/styles/components/logo-slider/_editor.scss new file mode 100644 index 0000000..cfb4feb --- /dev/null +++ b/src/styles/components/logo-slider/_editor.scss @@ -0,0 +1,36 @@ +.logoSlider { + width: 100%; +} + +.logoSlider-nav { + display: flex; + flex-wrap: wrap; + margin-top: 20px; +} + +.logoSlider-nav div, +.logoSlider-nav button { + flex-grow: 1; + + & + * { + margin-left: 1px; + } +} + +.logoSlider-nav button { + margin-bottom: 1px; +} + +.logoSlider-nav .logoSlider-navActions { + flex-grow: 1; + width: 100%; + flex-basis: 100%; +} + +.logoSlider-nav .logoSlider-navActions .logoSlider-navButton { + width: calc(50% - .5px); +} + +.logoSlider-nav .is-active { + @extend .btn--white; +} diff --git a/src/styles/components/logo-slider/_main.scss b/src/styles/components/logo-slider/_main.scss new file mode 100644 index 0000000..f3d0259 --- /dev/null +++ b/src/styles/components/logo-slider/_main.scss @@ -0,0 +1,68 @@ +.logoSlides-container { + position: relative; +} + +.logoSlide-contentContainer { + width: 110px; +} + +.logoSlide + .logoSlide { + margin-left: 30px; +} + +.logoSlider-arrow { + position: absolute; + top: 50%; + left: 0; + background-color: $color-white; + width: 50px; + height: 50px; + overflow: hidden; + text-indent: -1000vw; + border: none; + transform: translateY(-50%); + z-index: 10; + cursor: pointer; +} + +.logoSlider-arrow::after { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); +} + +.logoSlider-arrow--next { + right: 0; + left: initial; + + .rtl & { + right: initial; + left: 0; + } +} + +.rtl .logoSlider-arrow--previous { + right: 0; + left: initial; +} + +.logoSlider-arrow--next::after { + @include icon_svg(30px, 30px, "black", "arrow-ios-forward-outline" ); + content: ""; + display: block; + + .rtl & { + @include icon_svg(30px, 30px, "black", "arrow-ios-back-outline" ); + } +} + +.logoSlider-arrow--previous::after { + @include icon_svg(30px, 30px, "black", "arrow-ios-back-outline" ); + content: ""; + display: block; + + .rtl & { + @include icon_svg(30px, 30px, "black", "arrow-ios-forward-outline" ); + } +} diff --git a/src/styles/style-editor.scss b/src/styles/style-editor.scss index c7c9282..4bdadb6 100755 --- a/src/styles/style-editor.scss +++ b/src/styles/style-editor.scss @@ -81,6 +81,8 @@ @import "components/header/editor"; @import "components/logo-list/main"; @import "components/logo-list/editor"; +@import "components/logo-slider/main"; +@import "components/logo-slider/editor"; @import "components/post-grid/main"; @import "components/post-grid/editor"; @import "components/split-grid/editor"; diff --git a/src/styles/style.scss b/src/styles/style.scss index 5294582..60c091d 100755 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -97,6 +97,7 @@ @import "components/header/main"; @import "components/category-list/main"; @import "components/logo-list/main"; +@import "components/logo-slider/main"; @import "components/post-grid/main"; @import "components/media-aside/main"; From e1a1c8df8859e9b9724ce9d34679d7b2c935e70f Mon Sep 17 00:00:00 2001 From: Connor Brough Date: Fri, 15 Feb 2019 17:56:12 +0000 Subject: [PATCH 2/5] Reworked editor experience and some frontend tweaks. --- block-languages/benenson-blocks.pot | 64 ++++++----- .../blocks/logo-slider/DisplayComponent.js | 101 +++++++++++------- src/scripts/blocks/logo-slider/index.js | 10 +- .../components/logo-slider/_editor.scss | 63 ++++++++--- src/styles/components/logo-slider/_main.scss | 11 +- 5 files changed, 166 insertions(+), 83 deletions(-) diff --git a/block-languages/benenson-blocks.pot b/block-languages/benenson-blocks.pot index 0403d19..4932362 100644 --- a/block-languages/benenson-blocks.pot +++ b/block-languages/benenson-blocks.pot @@ -848,76 +848,78 @@ msgstr "" msgid "Add a repeatable logo block" msgstr "" -#: src/scripts/blocks/logo-slider/DisplayComponent.js:128 +#: src/scripts/blocks/logo-slider/DisplayComponent.js:131 msgid "Are you sure you want to delete this logo from the slider?" msgstr "" -#: src/scripts/blocks/logo-slider/DisplayComponent.js:183 +#: src/scripts/blocks/logo-slider/DisplayComponent.js:194 #: src/scripts/blocks/slider/DisplayComponent.js:217 msgid "Show Arrows" msgstr "" -#: src/scripts/blocks/logo-slider/DisplayComponent.js:188 +#: src/scripts/blocks/logo-slider/DisplayComponent.js:199 +msgid "Number of logos to show per slide" +msgstr "" + +#: src/scripts/blocks/logo-slider/DisplayComponent.js:206 #: src/scripts/blocks/slider/DisplayComponent.js:238 msgid "Slide Options" msgstr "" -#: src/scripts/blocks/logo-slider/DisplayComponent.js:195 +#: src/scripts/blocks/logo-slider/DisplayComponent.js:213 msgid "Open link in new tab" msgstr "" -#: src/scripts/blocks/logo-slider/DisplayComponent.js:222 +#: src/scripts/blocks/logo-slider/DisplayComponent.js:245 msgid "Add a logo below." msgstr "" -#: src/scripts/blocks/logo-slider/DisplayComponent.js:223 -msgid "Add Logo" +#: src/scripts/blocks/logo-slider/DisplayComponent.js:259 +msgid "Delete Logo" msgstr "" -#: src/scripts/blocks/logo-slider/DisplayComponent.js:244 -#: src/scripts/blocks/logo-slider/DisplayComponent.js:247 -#: src/scripts/blocks/slider/DisplayComponent.js:273 -msgid "Remove Slide" +#: src/scripts/blocks/logo-slider/DisplayComponent.js:260 +msgid "Logo settings" msgstr "" -#: src/scripts/blocks/logo-slider/DisplayComponent.js:245 -#: src/scripts/blocks/logo-slider/DisplayComponent.js:248 -#: src/scripts/blocks/slider/DisplayComponent.js:384 -msgid "Add Slide" +#: src/scripts/blocks/logo-slider/DisplayComponent.js:279 +msgid "Pevious Logo" msgstr "" -#: src/scripts/blocks/logo-slider/DisplayComponent.js:261 -#: src/scripts/blocks/logo-slider/DisplayComponent.js:264 -#: src/scripts/blocks/slider/DisplayComponent.js:379 -msgid "(No Title)" +#: src/scripts/blocks/logo-slider/DisplayComponent.js:281 +msgid "Add Logo" msgstr "" -#: src/scripts/blocks/logo-slider/index.js:23 -msgid "Logo slider" +#: src/scripts/blocks/logo-slider/DisplayComponent.js:283 +msgid "Next Logo" msgstr "" #: src/scripts/blocks/logo-slider/index.js:27 +msgid "Logo slider" +msgstr "" + +#: src/scripts/blocks/logo-slider/index.js:31 #: src/scripts/blocks/slider/index.js:38 msgid "Slider" msgstr "" -#: src/scripts/blocks/logo-slider/index.js:28 +#: src/scripts/blocks/logo-slider/index.js:32 #: src/scripts/blocks/slider/index.js:39 msgid "Carousel" msgstr "" -#: src/scripts/blocks/logo-slider/index.js:29 +#: src/scripts/blocks/logo-slider/index.js:33 #: src/scripts/blocks/slider/index.js:40 msgid "Scroller" msgstr "" -#: src/scripts/blocks/logo-slider/index.js:61 +#: src/scripts/blocks/logo-slider/index.js:69 #: src/scripts/blocks/slider/DisplayComponent.js:287 #: src/scripts/blocks/slider/index.js:59 msgid "Next" msgstr "" -#: src/scripts/blocks/logo-slider/index.js:62 +#: src/scripts/blocks/logo-slider/index.js:70 #: src/scripts/blocks/slider/DisplayComponent.js:288 #: src/scripts/blocks/slider/index.js:60 msgid "Previous" @@ -1175,6 +1177,10 @@ msgid "" "field." msgstr "" +#: src/scripts/blocks/slider/DisplayComponent.js:273 +msgid "Remove Slide" +msgstr "" + #: src/scripts/blocks/slider/DisplayComponent.js:274 msgid "This is irreversible." msgstr "" @@ -1187,6 +1193,14 @@ msgstr "" msgid "(Sub-Heading)" msgstr "" +#: src/scripts/blocks/slider/DisplayComponent.js:379 +msgid "(No Title)" +msgstr "" + +#: src/scripts/blocks/slider/DisplayComponent.js:384 +msgid "Add Slide" +msgstr "" + #: src/scripts/blocks/slider/DisplayComponent.js:49 msgid "Opaque" msgstr "" diff --git a/src/scripts/blocks/logo-slider/DisplayComponent.js b/src/scripts/blocks/logo-slider/DisplayComponent.js index 44d9d48..53a0727 100644 --- a/src/scripts/blocks/logo-slider/DisplayComponent.js +++ b/src/scripts/blocks/logo-slider/DisplayComponent.js @@ -6,7 +6,7 @@ const { __ } = wp.i18n; const { Component, Fragment } = wp.element; const { applyFilters } = wp.hooks; const { - PanelBody, Button, TextControl, ToggleControl, SelectControl, + PanelBody, Button, TextControl, ToggleControl, RangeControl, } = wp.components; const { InspectorControls, RichText, BlockIcon, URLInputButton, @@ -28,6 +28,7 @@ class DisplayComponent extends Component { this.state = { selectedSlide: 0, + group: this.props.attributes.perSlide, }; } @@ -104,6 +105,7 @@ class DisplayComponent extends Component { this.setState({ selectedSlide: attributes.slides.length, + group: attributes.slides.length + 1, }); }; @@ -113,6 +115,7 @@ class DisplayComponent extends Component { if (index === attributes.slides.length - 1) { this.setState({ selectedSlide: index - 1, + group: (index - 1) > attributes.perSlide ? attributes.slides.length : attributes.perSlide, }); } @@ -132,12 +135,13 @@ class DisplayComponent extends Component { selectSlide = index => this.setState({ selectedSlide: index, + group: index > this.props.attributes.perSlide ? this.props.attributes.slides.length : this.props.attributes.perSlide, }); createSelectSlide = index => () => this.selectSlide(index); movePrev = () => { - const { selectedSlide } = this.state; + const { selectedSlide, group } = this.state; const slideOrder = [...this.props.attributes.slides]; const temp = slideOrder[selectedSlide]; @@ -150,11 +154,12 @@ class DisplayComponent extends Component { this.setState({ selectedSlide: selectedSlide - 1, + group: group - 1, }); }; moveNext = () => { - const { selectedSlide } = this.state; + const { selectedSlide, group } = this.state; const slideOrder = [...this.props.attributes.slides]; const temp = slideOrder[selectedSlide]; @@ -167,16 +172,22 @@ class DisplayComponent extends Component { this.setState({ selectedSlide: selectedSlide + 1, + group: group + 1, }); }; render() { const { attributes, setAttributes } = this.props; - const { selectedSlide } = this.state; + const { selectedSlide, group } = this.state; const currentSlide = attributes.slides[selectedSlide]; const updateSlide = this.createUpdateSlideAttribute(selectedSlide); + const quantityOptions = applyFilters('benenson.block.logoSlider.quantityOptions', { + min: 1, + max: 10, + }); + const controls = ( + { currentSlide && ( ); + const sliderClasses = classnames( + 'logoSlider', + `logoSlider-${attributes.perSlide}perSlide`, + ); + return ( { controls } -
+
{ attributes.slides.length === 0 && ( @@ -224,44 +247,40 @@ class DisplayComponent extends Component {
) } - { currentSlide && ( -
- - -
- ) } + { attributes.slides.length > 0 && attributes.slides.map((slide, index) => { + if (index >= group - attributes.perSlide && index <= group - 1) { + const classes = classnames('logoSlide', { + 'is-active': index === selectedSlide, + }); + + return ( +
+
+ + +
+ + +
+ ); + } + + return null; + }) }
-