-
Notifications
You must be signed in to change notification settings - Fork 56
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat #113 (quantity selector): create new component
- Loading branch information
1 parent
aa669a3
commit 06e01aa
Showing
14 changed files
with
369 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,79 @@ | ||
| /** | ||
| * -------------------------------------------------------------------------- | ||
| * Boosted (v5.1.3): quantity-selector.js | ||
| * Licensed under MIT (https://github.com/Orange-OpenSource/Orange-Boosted-Bootstrap/blob/main/LICENSE) | ||
| * -------------------------------------------------------------------------- | ||
| */ | ||
|
|
||
| import { defineJQueryPlugin } from './util/index' | ||
| import EventHandler from './dom/event-handler' | ||
| import BaseComponent from './base-component' | ||
|
|
||
| /** | ||
| * Constants | ||
| */ | ||
|
|
||
| const NAME = 'quantityselector' | ||
| const DATA_KEY = 'bs.quantityselector' | ||
| const EVENT_KEY = `.${DATA_KEY}` | ||
| const DATA_API_KEY = '.data-api' | ||
| const EVENT_CLICK_DATA_API = `click${EVENT_KEY}${DATA_API_KEY}` | ||
| const SELECTOR_STEP_UP_BUTTON = '[data-bs-step="up"]' | ||
| const SELECTOR_STEP_DOWN_BUTTON = '[data-bs-step="down"]' | ||
| const SELECTOR_COUNTER_INPUT = '[data-bs-step="counter"]' | ||
| const SELECTOR_INPUT_GROUP = '.input-group' | ||
|
|
||
| /** | ||
| * Class definition | ||
| */ | ||
|
|
||
| class QuantitySelector extends BaseComponent { | ||
| // Getters | ||
| static get NAME() { | ||
| return NAME | ||
| } | ||
|
|
||
| // Public | ||
| static StepUp(event) { | ||
| event.preventDefault() | ||
| const PARENT = event.target.closest(SELECTOR_INPUT_GROUP) | ||
| const COUNTER_INPUT = PARENT.querySelector(SELECTOR_COUNTER_INPUT) | ||
|
|
||
| const MAX = COUNTER_INPUT.getAttribute('max') | ||
| const STEP = Number(COUNTER_INPUT.getAttribute('step')) | ||
| const ROUND = Number(COUNTER_INPUT.getAttribute('data-bs-round')) | ||
|
|
||
| if (Number(COUNTER_INPUT.value) < MAX) { | ||
| COUNTER_INPUT.value = (Number(COUNTER_INPUT.value) + STEP).toFixed(ROUND).toString() | ||
| } | ||
| } | ||
|
|
||
| static StepDown(event) { | ||
| event.preventDefault() | ||
| const PARENT = event.target.closest(SELECTOR_INPUT_GROUP) | ||
| const COUNTER_INPUT = PARENT.querySelector(SELECTOR_COUNTER_INPUT) | ||
|
|
||
| const MIN = COUNTER_INPUT.getAttribute('min') | ||
| const STEP = Number(COUNTER_INPUT.getAttribute('step')) | ||
| const ROUND = Number(COUNTER_INPUT.getAttribute('data-bs-round')) | ||
|
|
||
| if (Number(COUNTER_INPUT.value) > MIN) { | ||
| COUNTER_INPUT.value = (Number(COUNTER_INPUT.value) - STEP).toFixed(ROUND).toString() | ||
| } | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Data API implementation | ||
| */ | ||
|
|
||
| EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_STEP_UP_BUTTON, QuantitySelector.StepUp) | ||
| EventHandler.on(document, EVENT_CLICK_DATA_API, SELECTOR_STEP_DOWN_BUTTON, QuantitySelector.StepDown) | ||
|
|
||
| /** | ||
| * jQuery | ||
| */ | ||
|
|
||
| defineJQueryPlugin(QuantitySelector) | ||
|
|
||
| export default QuantitySelector |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,86 @@ | ||
| import QuantitySelector from '../../src/quantity-selector' | ||
| import { clearFixture, getFixture } from '../helpers/fixture' | ||
|
|
||
| describe('QuantitySelector', () => { | ||
| let fixtureEl | ||
|
|
||
| beforeAll(() => { | ||
| fixtureEl = getFixture() | ||
| }) | ||
|
|
||
| afterEach(() => { | ||
| clearFixture() | ||
| }) | ||
|
|
||
| describe('VERSION', () => { | ||
| it('should return plugin version', () => { | ||
| expect(QuantitySelector.VERSION).toEqual(jasmine.any(String)) | ||
| }) | ||
| }) | ||
|
|
||
| describe('Default', () => { | ||
| it('should return plugin default config', () => { | ||
| expect(QuantitySelector.Default).toEqual(jasmine.any(Object)) | ||
| }) | ||
| }) | ||
|
|
||
| describe('DefaultType', () => { | ||
| it('should return plugin default type config', () => { | ||
| expect(QuantitySelector.DefaultType).toEqual(jasmine.any(Object)) | ||
| }) | ||
| }) | ||
|
|
||
| describe('DATA_KEY', () => { | ||
| it('should return plugin data key', () => { | ||
| expect(QuantitySelector.DATA_KEY).toEqual('bs.quantityselector') | ||
| }) | ||
| }) | ||
|
|
||
| it('should take care of element either passed as a CSS selector or DOM element - Step Up button', () => { | ||
| fixtureEl.innerHTML = '<button data-bs-step="up"></button>' | ||
| const buttonEl = fixtureEl.querySelector('[data-bs-step="up"]') | ||
| const buttonBySelector = new QuantitySelector('[data-bs-step="up"]') | ||
| const buttonByElement = new QuantitySelector(buttonEl) | ||
|
|
||
| expect(buttonBySelector._element).toEqual(buttonEl) | ||
| expect(buttonByElement._element).toEqual(buttonEl) | ||
| }) | ||
|
|
||
| it('should take care of element either passed as a CSS selector or DOM element - Step Down button', () => { | ||
| fixtureEl.innerHTML = '<button data-bs-step="down"></button>' | ||
| const buttonEl = fixtureEl.querySelector('[data-bs-step="down"]') | ||
| const buttonBySelector = new QuantitySelector('[data-bs-step="down"]') | ||
| const buttonByElement = new QuantitySelector(buttonEl) | ||
|
|
||
| expect(buttonBySelector._element).toEqual(buttonEl) | ||
| expect(buttonByElement._element).toEqual(buttonEl) | ||
| }) | ||
|
|
||
| it('should increment by one step on click on StepUp button', () => { | ||
| fixtureEl.innerHTML = '<button data-bs-step="up"></button>' | ||
| const buttonEl = fixtureEl.querySelector('[data-bs-step="up"]') | ||
| fixtureEl.innerHTML = '<input data-bs-step="counter"></input>' | ||
| const inputEl = fixtureEl.querySelector('[data-bs-step="counter"]') | ||
| const counterStep = inputEl.getAttribute('step') | ||
| const counterMax = inputEl.getAttribute('max') | ||
| const counterValue = inputEl.value | ||
|
|
||
| buttonEl.click() | ||
|
|
||
| expect(inputEl.value === counterValue + counterStep || inputEl.value === counterMax) | ||
| }) | ||
|
|
||
| it('should decrement by one step on click on StepDown button', () => { | ||
| fixtureEl.innerHTML = '<button data-bs-step="down"></button>' | ||
| const buttonEl = fixtureEl.querySelector('[data-bs-step="down"]') | ||
| fixtureEl.innerHTML = '<input data-bs-step="counter"></input>' | ||
| const inputEl = fixtureEl.querySelector('[data-bs-step="counter"]') | ||
| const counterStep = inputEl.getAttribute('step') | ||
| const counterMin = inputEl.getAttribute('min') | ||
| const counterValue = inputEl.value | ||
|
|
||
| buttonEl.click() | ||
|
|
||
| expect(inputEl.value === counterValue - counterStep || inputEl.value === counterMin) | ||
| }) | ||
| }) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,64 @@ | ||
| .quantity-selector { | ||
| width: 7.5em; | ||
| $validation-messages: ""; | ||
|
|
||
| @each $state in map-keys($form-validation-states) { | ||
| $validation-messages: $validation-messages + ":not(." + unquote($state) + "-tooltip)" + ":not(." + unquote($state) + "-feedback)"; | ||
| } | ||
|
|
||
| > :not(:first-child):not(.dropdown-menu)#{$validation-messages} { | ||
| margin-left: 0; | ||
| } | ||
|
|
||
| .form-control { | ||
| max-width: $quantity-selector-input-width; | ||
| padding: 0; | ||
| font-size: $font-size-sm; | ||
| text-align: center; | ||
| transition: none; // stylelint-disable-line property-disallowed-list | ||
| appearance: textfield; | ||
|
|
||
| &:not(:focus) { | ||
| border-right: none; | ||
| border-left: none; | ||
| } | ||
|
|
||
| &::-webkit-inner-spin-button, | ||
| &::-webkit-outer-spin-button { | ||
| margin: 0; | ||
| appearance: none; | ||
| } | ||
| } | ||
|
|
||
| button { | ||
| border: $border-width solid $gray-500; | ||
|
|
||
| &:first-of-type { | ||
| @include button-icon($quantity-selector-icon-remove, $size: $quantity-selector-icon-width $quantity-selector-icon-remove-height, $pseudo: "after"); | ||
| order: -1; | ||
| border-right: none; | ||
|
|
||
| &.btn-sm { // stylelint-disable-line selector-no-qualifying-type | ||
| @include button-icon($quantity-selector-icon-remove, $width: 1rem, $height: 1rem, $size: $quantity-selector-icon-sm-width $quantity-selector-icon-sm-remove-height, $pseudo: "after"); | ||
| } | ||
| } | ||
|
|
||
| &:last-of-type { | ||
| @include button-icon($quantity-selector-icon-add, $size: $quantity-selector-icon-width $quantity-selector-icon-add-height, $pseudo: "after"); | ||
| border-left: none; | ||
|
|
||
| &.btn-sm { // stylelint-disable-line selector-no-qualifying-type | ||
| @include button-icon($quantity-selector-icon-add, $width: 1rem, $height: 1rem, $size: $quantity-selector-icon-sm-width $quantity-selector-icon-sm-add-height, $pseudo: "after"); | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| .quantity-selector-sm { | ||
| width: $quantity-selector-sm-width; | ||
|
|
||
| .form-control { | ||
| max-width: $quantity-selector-input-sm-width; | ||
| font-size: $font-size-base; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.