Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@ebay/ebayui-core
Advanced tools
@ebay/ebayui-core - npm Package Compare versions
Comparing version 0.4.0 to 0.5.0-0
@@ -5,2 +5,5 @@ 'use strict'; | ||
| var _require = require('../event-utils'), | ||
| resizeUtil = _require.resizeUtil; | ||
| var previousPosition = void 0; | ||
@@ -10,74 +13,84 @@ var previousStyles = void 0; | ||
| module.exports = { | ||
| /** | ||
| * Prevents the `<body>` element from scrolling. | ||
| * | ||
| * This is done by forcing the body to be `fixed` and setting it's height/width inline. | ||
| * The body is then translated the reverse of the scroll position using negative margins. | ||
| * | ||
| * This approach was chosen over the more common just `overflow:hidden` to address some | ||
| * issues with iOS and Android browsers. | ||
| * | ||
| * Finally the scroll position is also stored so that it can be reapplied after restoring | ||
| * scrolling. | ||
| */ | ||
| prevent: function prevent() { | ||
| var _document = document, | ||
| body = _document.body; | ||
| var _window = window, | ||
| scrollX = _window.scrollX, | ||
| scrollY = _window.scrollY; | ||
| module.exports = { prevent: prevent, restore: restore }; | ||
| var _getComputedStyle = getComputedStyle(body), | ||
| width = _getComputedStyle.width, | ||
| height = _getComputedStyle.height, | ||
| marginTop = _getComputedStyle.marginTop, | ||
| marginLeft = _getComputedStyle.marginLeft; | ||
| /** | ||
| * Prevents the `<body>` element from scrolling. | ||
| * | ||
| * This is done by forcing the body to be `fixed` and setting it's height/width inline. | ||
| * The body is then translated the reverse of the scroll position using negative margins. | ||
| * | ||
| * This approach was chosen over the more common just `overflow:hidden` to address some | ||
| * issues with iOS and Android browsers. | ||
| * | ||
| * Finally the scroll position is also stored so that it can be reapplied after restoring | ||
| * scrolling. | ||
| */ | ||
| function prevent() { | ||
| var _document = document, | ||
| body = _document.body; | ||
| var _window = window, | ||
| pageXOffset = _window.pageXOffset, | ||
| pageYOffset = _window.pageYOffset; | ||
| var styleText = 'position:fixed;overflow:hidden;'; | ||
| previousPosition = [scrollX, scrollY]; | ||
| previousStyles = body.getAttribute('style'); | ||
| styleText += 'height:' + height + ';'; | ||
| styleText += 'width:' + width + ';'; | ||
| var _getComputedStyle = getComputedStyle(body), | ||
| width = _getComputedStyle.width, | ||
| height = _getComputedStyle.height, | ||
| marginTop = _getComputedStyle.marginTop, | ||
| marginLeft = _getComputedStyle.marginLeft; | ||
| if (scrollY) { | ||
| styleText += 'margin-top:' + -1 * (scrollY - parseInt(marginTop, 10)) + 'px;'; | ||
| } | ||
| var styleText = 'position:fixed;overflow:hidden;'; | ||
| previousPosition = [pageXOffset, pageYOffset]; | ||
| previousStyles = body.getAttribute('style'); | ||
| styleText += 'height:' + height + ';'; | ||
| styleText += 'width:' + width + ';'; | ||
| if (scrollX) { | ||
| styleText += 'margin-left:' + -1 * (scrollX - parseInt(marginLeft, 10)) + 'px'; | ||
| } | ||
| if (pageYOffset) { | ||
| styleText += 'margin-top:' + -1 * (pageYOffset - parseInt(marginTop, 10)) + 'px;'; | ||
| } | ||
| if (previousStyles) { | ||
| styleText = previousStyles + ';' + styleText; | ||
| } | ||
| if (pageXOffset) { | ||
| styleText += 'margin-left:' + -1 * (pageXOffset - parseInt(marginLeft, 10)) + 'px'; | ||
| } | ||
| body.setAttribute('style', styleText); | ||
| isPrevented = true; | ||
| }, | ||
| if (previousStyles) { | ||
| styleText = previousStyles + ';' + styleText; | ||
| } | ||
| /** | ||
| * Restores scrolling of the `<body>` element. | ||
| * | ||
| * This will also restore the scroll position, and inline body styles from before the body | ||
| * scroll was prevented. You should not call this function without first preventing the | ||
| * body scroll. | ||
| */ | ||
| restore: function restore() { | ||
| if (isPrevented) { | ||
| var _window2; | ||
| body.setAttribute('style', styleText); | ||
| resizeUtil.addEventListener('', recalculate); | ||
| isPrevented = true; | ||
| } | ||
| var _document2 = document, | ||
| body = _document2.body; | ||
| /** | ||
| * Restores scrolling of the `<body>` element. | ||
| * | ||
| * This will also restore the scroll position, and inline body styles from before the body | ||
| * scroll was prevented. You should not call this function without first preventing the | ||
| * body scroll. | ||
| */ | ||
| function restore() { | ||
| if (isPrevented) { | ||
| var _window2; | ||
| if (previousStyles) { | ||
| body.setAttribute('style', previousStyles); | ||
| } else { | ||
| body.removeAttribute('style'); | ||
| } | ||
| var _document2 = document, | ||
| body = _document2.body; | ||
| (_window2 = window).scrollTo.apply(_window2, _toConsumableArray(previousPosition)); | ||
| isPrevented = false; | ||
| if (previousStyles) { | ||
| body.setAttribute('style', previousStyles); | ||
| } else { | ||
| body.removeAttribute('style'); | ||
| } | ||
| (_window2 = window).scrollTo.apply(_window2, _toConsumableArray(previousPosition)); | ||
| resizeUtil.removeEventListener('', recalculate); | ||
| isPrevented = false; | ||
| } | ||
| }; | ||
| } | ||
| /** | ||
| * Called during "resize" events to recalculate generated body widths and margins. | ||
| */ | ||
| function recalculate() { | ||
| restore(); | ||
| prevent(); | ||
| } |
| 'use strict'; | ||
| var expect = require('chai').expect; | ||
| /** | ||
@@ -16,4 +18,13 @@ * Trigger generic DOM event | ||
| /** | ||
| * Check that the spy was called with an originalEvent | ||
| * @param {Object} spy | ||
| */ | ||
| function testOriginalEvent(spy) { | ||
| expect(spy.getCall(0).args[0].originalEvent instanceof Event).to.equal(true); | ||
| } | ||
| module.exports = { | ||
| triggerEvent: triggerEvent | ||
| triggerEvent: triggerEvent, | ||
| testOriginalEvent: testOriginalEvent | ||
| }; |
@@ -9,3 +9,18 @@ 'use strict'; | ||
| var expect = require('chai').expect; | ||
| var prettyPrint = require('marko-prettyprint').prettyPrintAST; | ||
| var markoCompiler = require('marko/compiler'); | ||
| var CompileContext = void 0; | ||
| var Builder = void 0; | ||
| try { | ||
| // v3 paths | ||
| CompileContext = require('marko/compiler/CompileContext'); | ||
| Builder = require('marko/compiler/Builder'); | ||
| } catch (e) { | ||
| // v4 paths | ||
| var target = require('marko/env').isDebug ? 'src' : 'dist'; | ||
| CompileContext = require('marko/' + target + '/compiler/CompileContext'); | ||
| Builder = require('marko/' + target + '/compiler/Builder'); | ||
| } | ||
| /** | ||
@@ -55,6 +70,32 @@ * Get Cheerio instance based on output object from rendering | ||
| function getTransformerData(srcString, componentPath) { | ||
| var templateAST = markoCompiler.parseRaw(srcString, componentPath); | ||
| var context = new CompileContext(srcString, componentPath, Builder.DEFAULT_BUILDER); | ||
| return { context: context, templateAST: templateAST }; | ||
| } | ||
| function getTransformedTemplate(transformer, srcString, componentPath) { | ||
| var _getTransformerData = getTransformerData(srcString, componentPath), | ||
| context = _getTransformerData.context, | ||
| templateAST = _getTransformerData.templateAST; | ||
| transformer(templateAST.body.array[0], context); | ||
| return prettyPrint(templateAST).replace(/\n/g, '').replace(/\s{4}/g, ''); | ||
| } | ||
| function runTransformer(transformer, srcString, componentPath) { | ||
| var _getTransformerData2 = getTransformerData(srcString, componentPath), | ||
| context = _getTransformerData2.context, | ||
| templateAST = _getTransformerData2.templateAST; | ||
| return transformer(templateAST.body.array[0], context); | ||
| } | ||
| module.exports = { | ||
| getCheerio: getCheerio, | ||
| testCustomClass: testCustomClass, | ||
| testHtmlAttributes: testHtmlAttributes | ||
| testHtmlAttributes: testHtmlAttributes, | ||
| getTransformedTemplate: getTransformedTemplate, | ||
| runTransformer: runTransformer | ||
| }; |
@@ -52,5 +52,5 @@ 'use strict'; | ||
| function handleClick(event) { | ||
| eventUtils.preventDefaultIfHijax(event, this.state.hijax); | ||
| emitAndFire(this, 'breadcrumb-select', { el: event.target }); | ||
| function handleClick(originalEvent) { | ||
| eventUtils.preventDefaultIfHijax(originalEvent, this.state.hijax); | ||
| emitAndFire(this, 'breadcrumb-select', { originalEvent: originalEvent, el: originalEvent.target }); | ||
| } | ||
@@ -57,0 +57,0 @@ |
@@ -25,3 +25,3 @@ # ebay-breadcrumb | ||
| --- | --- | ||
| `breadcrumb-select` | click breadcrumb items | `{ event, el: event.target }` | ||
| `breadcrumb-select` | click breadcrumb items | `{ originalEvent, el }` | ||
@@ -28,0 +28,0 @@ ## ebay-breadcrumb-item Attributes |
| { | ||
| "dependencies": [ | ||
| "require: marko-widgets", | ||
| "require-run: nodelist-foreach-polyfill", | ||
| "require: ./index.js", | ||
| "../../../dist/components/ebay-icon", | ||
| { | ||
@@ -11,4 +15,2 @@ "if-not-flag": "ebayui-no-skin", | ||
| }, | ||
| "require-run: nodelist-foreach-polyfill", | ||
| "require: ./index.js", | ||
| "./style.less", | ||
@@ -15,0 +17,0 @@ { |
@@ -43,4 +43,2 @@ 'use strict'; | ||
| index: parseInt(input.index) || 0, | ||
| firstVisibleIndex: 0, | ||
| lastVisibleIndex: 0, | ||
| type: type, | ||
@@ -82,2 +80,4 @@ isContinuous: type === constants.types.continuous, | ||
| this.lastIndex = this.itemEls.length - 1; | ||
| this.firstVisibleIndex = 0; | ||
| this.lastVisibleIndex = 0; | ||
@@ -96,5 +96,12 @@ var containerEl = this.el.querySelector('.carousel__container'); | ||
| this.refresh(); | ||
| this.refresh(); // FIXME: currently needs a second call in v4 | ||
| } | ||
| function onUpdate() { | ||
| this.processIndexChange(); | ||
| } | ||
| function onDestroy() { | ||
| cancelAnimationFrame(this.processMovementFrame); | ||
| } | ||
| function refresh() { | ||
@@ -104,105 +111,83 @@ this.calculateWidths(true); | ||
| this.simulateDotClick(this.state.slide); | ||
| } else if (this.state.isContinuous) { | ||
| this.performSlide(); | ||
| } | ||
| this.processMovement(); | ||
| } | ||
| function update_index() { | ||
| // eslint-disable-line camelcase | ||
| this.performSlide(); | ||
| } | ||
| /** | ||
| * High level function called for movement upon changing index (via UI and API) | ||
| * Exits early if there was no actual change to index | ||
| */ | ||
| function processIndexChange() { | ||
| // TODO: API manipulation is disabled in native scroll case | ||
| if (this.usesNativeScroll) { | ||
| return; | ||
| } | ||
| function handleNext() { | ||
| if (!this.state.nextControlDisabled) { | ||
| if (this.state.isDiscrete) { | ||
| this.simulateDotClick(this.state.slide + 1); | ||
| } else if (this.state.isContinuous) { | ||
| this.setState('index', this.calculateNextIndex()); | ||
| } | ||
| emitAndFire(this, 'carousel-next'); | ||
| if (this.state.index > this.lastIndex) { | ||
| this.setState('index', this.lastIndex); | ||
| } | ||
| } | ||
| function handlePrev() { | ||
| if (!this.state.prevControlDisabled) { | ||
| if (this.state.isDiscrete) { | ||
| this.simulateDotClick(this.state.slide - 1); | ||
| } else if (this.state.isContinuous) { | ||
| this.setState('index', this.calculatePrevIndex()); | ||
| } | ||
| emitAndFire(this, 'carousel-prev'); | ||
| if (this.containerWidth >= this.allItemsWidth || this.state.index < 0) { | ||
| this.setState('index', 0); | ||
| } | ||
| } | ||
| // TODO: add carousel-dot event and remove simulated dot clicks | ||
| function handleDotClick(e) { | ||
| var newSlide = parseInt(e.target.getAttribute('data-slide')); | ||
| emitAndFire(this, 'carousel-slide', { slide: newSlide }); | ||
| this.setState('slide', newSlide); | ||
| this.setState('index', this.state.itemsPerSlide * (newSlide - 1)); | ||
| this.update_index(); // FIXME: why isn't this called from this.setState('index')? | ||
| } | ||
| function simulateDotClick(slide) { | ||
| if (slide >= 1 && slide <= this.state.totalSlides) { | ||
| this.el.querySelector('[data-slide="' + slide + '"]').click(); | ||
| if (this.state.index === this.activeIndex) { | ||
| return; | ||
| } | ||
| } | ||
| function updateDots() { | ||
| this.setState('activeDot', (this.state.lastVisibleIndex + 1) / this.state.itemsPerSlide); | ||
| this.activeIndex = this.state.index; | ||
| this.processMovement(); | ||
| } | ||
| /** | ||
| * High level slide called for initialization and data change to index (via UI and API) | ||
| * @param {Integer} index | ||
| * Handle movement to current state.index | ||
| */ | ||
| function performSlide() { | ||
| function processMovement() { | ||
| var _this2 = this; | ||
| // FIXME: API manipulation is disabled in native scroll case | ||
| if (this.state.index >= 0 && this.state.index <= this.lastIndex && !this.usesNativeScroll) { | ||
| var oldFirstVisibleIndex = this.state.firstVisibleIndex; | ||
| var oldLastVisibleIndex = this.state.lastVisibleIndex; | ||
| this.moveToIndex(this.state.index); | ||
| this.setState('lastVisibleIndex', this.calculateLastVisibleIndex()); | ||
| this.setState('prevControlDisabled', this.state.index === 0); | ||
| this.setState('nextControlDisabled', this.state.lastVisibleIndex === this.lastIndex); | ||
| this.setState('bothControlsDisabled', this.state.prevControlDisabled && this.state.nextControlDisabled); | ||
| cancelAnimationFrame(this.processMovementFrame); | ||
| this.processMovementFrame = requestAnimationFrame(function () { | ||
| var oldFirstVisibleIndex = _this2.firstVisibleIndex; | ||
| var oldLastVisibleIndex = _this2.lastVisibleIndex; | ||
| _this2.moveToIndex(_this2.state.index); | ||
| _this2.lastVisibleIndex = _this2.calculateLastVisibleIndex(); | ||
| _this2.setState('prevControlDisabled', _this2.state.index === 0); | ||
| _this2.setState('nextControlDisabled', _this2.lastVisibleIndex === _this2.lastIndex); | ||
| _this2.setState('bothControlsDisabled', _this2.state.prevControlDisabled && _this2.state.nextControlDisabled); | ||
| // must calculate firstVisibleIndex after nextControlDisabled is set | ||
| this.setState('firstVisibleIndex', this.calculateFirstVisibleIndex()); | ||
| _this2.firstVisibleIndex = _this2.calculateFirstVisibleIndex(); | ||
| if (this.state.firstVisibleIndex !== oldFirstVisibleIndex || this.state.lastVisibleIndex !== oldLastVisibleIndex) { | ||
| if (_this2.state.isDiscrete) { | ||
| _this2.setState('activeDot', (_this2.lastVisibleIndex + 1) / _this2.state.itemsPerSlide); | ||
| } | ||
| if (_this2.firstVisibleIndex !== oldFirstVisibleIndex || _this2.lastVisibleIndex !== oldLastVisibleIndex) { | ||
| var visibleIndexes = []; | ||
| for (var i = this.state.firstVisibleIndex; i <= this.state.lastVisibleIndex; i++) { | ||
| for (var i = _this2.firstVisibleIndex; i <= _this2.lastVisibleIndex; i++) { | ||
| visibleIndexes.push(i); | ||
| } | ||
| emitAndFire(this, 'carousel-update', { visibleIndexes: visibleIndexes }); | ||
| emitAndFire(_this2, 'carousel-update', { visibleIndexes: visibleIndexes }); | ||
| } | ||
| this.state.items.forEach(function (item, i) { | ||
| item.hidden = i < _this2.state.firstVisibleIndex || i > _this2.state.lastVisibleIndex; | ||
| _this2.state.items.forEach(function (item, i) { | ||
| item.hidden = i < _this2.firstVisibleIndex || i > _this2.lastVisibleIndex; | ||
| }); | ||
| this.setStateDirty('items'); | ||
| _this2.setStateDirty('items'); | ||
| if (this.state.isDiscrete) { | ||
| this.updateDots(); | ||
| } | ||
| this.update(); // FIXME: why won't it rerender on its own? | ||
| } | ||
| // update nested focusable elements via DOM (we don't control this content) | ||
| // TODO: patch makeup-focusables to support more customized selectors? | ||
| var hiddenItems = this.el.querySelectorAll('.carousel__list > li[aria-hidden="true"]') || []; | ||
| var visibleItems = this.el.querySelectorAll('.carousel__list > li[aria-hidden="false"]') || []; | ||
| hiddenItems.forEach(function (hiddenItem) { | ||
| focusables(hiddenItem).forEach(function (focusable) { | ||
| return focusable.setAttribute('tabindex', '-1'); | ||
| // update nested focusable elements via DOM (we don't control this content) | ||
| // TODO: patch makeup-focusables to support more customized selectors? | ||
| var hiddenItems = _this2.el.querySelectorAll('.carousel__list > li[aria-hidden="true"]') || []; | ||
| var visibleItems = _this2.el.querySelectorAll('.carousel__list > li[aria-hidden="false"]') || []; | ||
| hiddenItems.forEach(function (hiddenItem) { | ||
| focusables(hiddenItem).forEach(function (focusable) { | ||
| return focusable.setAttribute('tabindex', '-1'); | ||
| }); | ||
| }); | ||
| }); | ||
| visibleItems.forEach(function (visibleItem) { | ||
| focusables(visibleItem).forEach(function (focusable) { | ||
| return focusable.removeAttribute('tabindex'); | ||
| visibleItems.forEach(function (visibleItem) { | ||
| focusables(visibleItem).forEach(function (focusable) { | ||
| return focusable.removeAttribute('tabindex'); | ||
| }); | ||
| }); | ||
@@ -214,6 +199,5 @@ }); | ||
| * Move carousel position to an index | ||
| * @param {Integer} index | ||
| */ | ||
| function moveToIndex(index) { | ||
| var translation = -1 * this.getWidthBetweenIndexes(0, index); | ||
| function moveToIndex() { | ||
| var translation = -1 * this.getWidthBetweenIndexes(0, this.state.index); | ||
| var maxTranslation = -1 * (this.allItemsWidth - this.containerWidth); | ||
@@ -327,15 +311,48 @@ if (translation !== 0 && translation < maxTranslation) { | ||
| function handleNext(originalEvent) { | ||
| if (!this.state.nextControlDisabled) { | ||
| if (this.state.isDiscrete) { | ||
| this.simulateDotClick(this.state.slide + 1); | ||
| } else if (this.state.isContinuous) { | ||
| this.setState('index', this.calculateNextIndex()); | ||
| } | ||
| emitAndFire(this, 'carousel-next', { originalEvent: originalEvent }); | ||
| } | ||
| } | ||
| function handlePrev(originalEvent) { | ||
| if (!this.state.prevControlDisabled) { | ||
| if (this.state.isDiscrete) { | ||
| this.simulateDotClick(this.state.slide - 1); | ||
| } else if (this.state.isContinuous) { | ||
| this.setState('index', this.calculatePrevIndex()); | ||
| } | ||
| emitAndFire(this, 'carousel-prev', { originalEvent: originalEvent }); | ||
| } | ||
| } | ||
| // TODO: add carousel-dot event and remove simulated dot clicks | ||
| function handleDotClick(e) { | ||
| var newSlide = parseInt(e.target.getAttribute('data-slide')); | ||
| emitAndFire(this, 'carousel-slide', { slide: newSlide }); | ||
| this.setState('slide', newSlide); | ||
| this.setState('index', this.state.itemsPerSlide * (newSlide - 1)); | ||
| } | ||
| function simulateDotClick(slide) { | ||
| if (slide >= 1 && slide <= this.state.totalSlides) { | ||
| this.el.querySelector('[data-slide="' + slide + '"]').click(); | ||
| } | ||
| } | ||
| module.exports = require('marko-widgets').defineComponent({ | ||
| template: template, | ||
| init: init, | ||
| getInitialState: getInitialState, | ||
| getTemplateData: getTemplateData, | ||
| update_index: update_index, | ||
| init: init, | ||
| onUpdate: onUpdate, | ||
| onDestroy: onDestroy, | ||
| refresh: refresh, | ||
| handleNext: handleNext, | ||
| handlePrev: handlePrev, | ||
| handleDotClick: handleDotClick, | ||
| simulateDotClick: simulateDotClick, | ||
| performSlide: performSlide, | ||
| updateDots: updateDots, | ||
| processIndexChange: processIndexChange, | ||
| processMovement: processMovement, | ||
| calculateNextIndex: calculateNextIndex, | ||
@@ -349,5 +366,9 @@ calculatePrevIndex: calculatePrevIndex, | ||
| calculateWidths: calculateWidths, | ||
| getItemWidth: getItemWidth | ||
| getItemWidth: getItemWidth, | ||
| handleNext: handleNext, | ||
| handlePrev: handlePrev, | ||
| handleDotClick: handleDotClick, | ||
| simulateDotClick: simulateDotClick | ||
| }); | ||
| module.exports.privates = { constants: constants }; |
@@ -15,6 +15,6 @@ # ebay-carousel | ||
| Use `touch` for touch devices, and `no-touch` for non-touch devices. Without flags, `no-touch` is assumed. | ||
| Currently, the `touch` carousel with type="continuous" will use native scrolling, which has more limited functionality. | ||
| [//]: # (TODO: `touch` should ideally be default, but currently the js behavior doesn't execute with native scrolling) | ||
| Note: The `touch` carousel with type="continuous" will use native scrolling. This behavior is used instead of our controlled movement, so some functionality is limited. In this case, the carousel will not respond to `index` changes, and will not emit events. | ||
| ## ebay-carousel Attributes | ||
@@ -46,4 +46,4 @@ Name | Type | Stateful | Description | ||
| `carousel-move` | | start of carousel content movement animation | ||
| `carousel-next` | | click next control | ||
| `carousel-prev` | | click previous control | ||
| `carousel-next` | { originalEvent } | click next control | ||
| `carousel-prev` | { originalEvent } | click previous control | ||
@@ -50,0 +50,0 @@ ### Additional Events for type="discrete" |
| { | ||
| "dependencies": [ | ||
| "require: marko-widgets", | ||
| "require: ./index.js", | ||
| "../../../dist/components/ebay-icon", | ||
| { | ||
| "if-not-flag": "ebayui-no-skin", | ||
| "path": "@ebay/skin/dialog" | ||
| }, | ||
| "require: marko-widgets", | ||
| "require: ./index.js" | ||
| } | ||
| ] | ||
| } |
@@ -180,8 +180,28 @@ 'use strict'; | ||
| function close(ev) { | ||
| if (ev && this.bodyEl.contains(ev.target)) { | ||
| return; | ||
| function close() { | ||
| this.setState('open', false); | ||
| } | ||
| function handleDialogClick(_ref) { | ||
| var target = _ref.target, | ||
| clientY = _ref.clientY; | ||
| var closeEl = this.closeEl, | ||
| windowEl = this.windowEl; | ||
| // Checks if we clicked inside the white panel of the dialog. | ||
| if (!closeEl.contains(target) && windowEl.contains(target)) { | ||
| var _windowEl$getBounding = windowEl.getBoundingClientRect(), | ||
| bottom = _windowEl$getBounding.bottom; | ||
| var _getComputedStyle = getComputedStyle(windowEl), | ||
| paddingBottom = _getComputedStyle.paddingBottom; | ||
| var windowBottom = bottom - parseInt(paddingBottom, 10); | ||
| if (clientY < windowBottom) { | ||
| return; | ||
| } | ||
| } | ||
| this.setState('open', false); | ||
| this.close(); | ||
| } | ||
@@ -209,4 +229,6 @@ | ||
| onBeforeDestroy: destroy, | ||
| handleDialogClick: handleDialogClick, | ||
| handleCloseButtonClick: close, | ||
| show: show, | ||
| close: close | ||
| }); |
@@ -106,18 +106,19 @@ 'use strict'; | ||
| */ | ||
| function handlePageClick(event) { | ||
| eventUtils.preventDefaultIfHijax(event, this.state.hijax); | ||
| emitAndFire(this, 'pagination-select', { el: event.target, value: event.target.innerText }); | ||
| function handlePageClick(originalEvent) { | ||
| var target = originalEvent.target; | ||
| eventUtils.preventDefaultIfHijax(originalEvent, this.state.hijax); | ||
| emitAndFire(this, 'pagination-select', { originalEvent: originalEvent, el: target, value: target.innerText }); | ||
| } | ||
| function handleNextPage(event) { | ||
| function handleNextPage(originalEvent) { | ||
| if (!this.state.nextItem.disabled) { | ||
| eventUtils.preventDefaultIfHijax(event, this.state.hijax); | ||
| emitAndFire(this, 'pagination-next', { el: this.nextPageEl }); | ||
| eventUtils.preventDefaultIfHijax(originalEvent, this.state.hijax); | ||
| emitAndFire(this, 'pagination-next', { originalEvent: originalEvent, el: this.nextPageEl }); | ||
| } | ||
| } | ||
| function handlePreviousPage(event) { | ||
| function handlePreviousPage(originalEvent) { | ||
| if (!this.state.prevItem.disabled) { | ||
| eventUtils.preventDefaultIfHijax(event, this.state.hijax); | ||
| emitAndFire(this, 'pagination-previous', { el: this.previousPageEl }); | ||
| eventUtils.preventDefaultIfHijax(originalEvent, this.state.hijax); | ||
| emitAndFire(this, 'pagination-previous', { originalEvent: originalEvent, el: this.previousPageEl }); | ||
| } | ||
@@ -124,0 +125,0 @@ } |
@@ -33,5 +33,5 @@ # ebay-pagination | ||
| --- | --- | --- | ||
| `pagination-previous` | `{ event, el: event.target }`| clicked previous arrow button | ||
| `pagination-next` | `{ event, el: event.target }` | clicked next arrow button | ||
| `pagination-select` | `{ event, el: event.target , value: "Selected page" }` | page selected clicked | ||
| `pagination-previous` | `{ originalEvent, el }`| clicked previous arrow button | ||
| `pagination-next` | `{ originalEvent, el }` | clicked next arrow button | ||
| `pagination-select` | `{ originalEvent, el, value }` | page selected clicked | ||
@@ -38,0 +38,0 @@ ## ebay-pagination-item Tag |
@@ -1,1 +0,1 @@ | ||
| {"<ebay-button>":{"renderer":"./dist/components/ebay-button/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@disabled":"boolean","@partially-disabled":"boolean","@href":"string","@priority":"string","@size":"size","@fluid":"boolean"},"<ebay-carousel>":{"renderer":"./dist/components/ebay-carousel/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@index":"string","@type":"string","@slide":"string","@items-per-slide":"string","@accessibility-prev":"string","@accessibility-next":"string","@accessibility-status":"string","@accessibility-current":"string","@accessibility-other":"string","@items <item>[]":{"@*":"expression","@html-attributes":"expression"}},"<ebay-carousel-item>":{},"<ebay-dialog>":{"renderer":"./dist/components/ebay-dialog/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@open":"boolean","@type":"string","@focus":"string","@aria-label-close":"string"},"<ebay-select>":{"renderer":"./dist/components/ebay-select/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@name":"string","@grow":"boolean","@borderless":"boolean","@options <option>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@value":"string","@label":"string","@selected":"boolean"}},"<ebay-select-option>":{},"<ebay-menu>":{"renderer":"./dist/components/ebay-menu/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@label":"string","@expanded":"boolean","@reverse":"boolean","@fix-width":"boolean","@borderless":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@href":"string","@type":"string","@checked":"boolean","@current":"boolean"}},"<ebay-menu-item>":{},"<ebay-notice>":{"renderer":"./dist/components/ebay-notice/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@heading-level":"string","@status":"string","@hidden":"boolean","@aria-text":"string","@aria-label-close":"string","@dismissible":"boolean"},"<ebay-breadcrumb>":{"renderer":"./dist/components/ebay-breadcrumb/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@heading-text":"string","@heading-level":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@href":"string"}},"<ebay-breadcrumb-item>":{},"<ebay-pagination>":{"renderer":"./dist/components/ebay-pagination/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@accessibility-prev":"string","@accessibility-next":"string","@accessibility-current":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@current":"boolean","@disabled":"boolean","@href":"string","@type":"string","@role":"string"}},"<ebay-pagination-item>":{}} | ||
| {"<ebay-button>":{"renderer":"./dist/components/ebay-button/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@disabled":"boolean","@partially-disabled":"boolean","@href":"string","@priority":"string","@size":"size","@fluid":"boolean"},"<ebay-carousel>":{"renderer":"./dist/components/ebay-carousel/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@index":"string","@type":"string","@slide":"string","@items-per-slide":"string","@accessibility-prev":"string","@accessibility-next":"string","@accessibility-status":"string","@accessibility-current":"string","@accessibility-other":"string","@items <item>[]":{"@*":"expression","@html-attributes":"expression"}},"<ebay-carousel-item>":{},"<ebay-dialog>":{"renderer":"./dist/components/ebay-dialog/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@open":"boolean","@type":"string","@focus":"string","@aria-label-close":"string"},"<ebay-select>":{"renderer":"./dist/components/ebay-select/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@name":"string","@grow":"boolean","@borderless":"boolean","@options <option>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@value":"string","@label":"string","@selected":"boolean"}},"<ebay-select-option>":{},"<ebay-menu>":{"renderer":"./dist/components/ebay-menu/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@label":"string","@expanded":"boolean","@reverse":"boolean","@fix-width":"boolean","@borderless":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@href":"string","@type":"string","@checked":"boolean","@current":"boolean"}},"<ebay-menu-item>":{},"<ebay-notice>":{"renderer":"./dist/components/ebay-notice/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@heading-level":"string","@status":"string","@hidden":"boolean","@aria-text":"string","@aria-label-close":"string","@dismissible":"boolean"},"<ebay-breadcrumb>":{"renderer":"./dist/components/ebay-breadcrumb/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@heading-text":"string","@heading-level":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@href":"string"}},"<ebay-breadcrumb-item>":{},"<ebay-pagination>":{"renderer":"./dist/components/ebay-pagination/index.js","transformer":"./dist/common/transformer/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@accessibility-prev":"string","@accessibility-next":"string","@accessibility-current":"string","@hijax":"boolean","@items <item>[]":{"@*":"expression","@html-attributes":"expression","@class":"string","@current":"boolean","@disabled":"boolean","@href":"string","@type":"string","@role":"string"}},"<ebay-pagination-item>":{},"<body>":{"transformer":"./dist/components/ebay-icon/stamper/transformer.js"},"<ebay-icon-stamper>":{"renderer":"./dist/components/ebay-icon/stamper/index.js"},"<ebay-icon>":{"renderer":"./dist/components/ebay-icon/index.js","transformer":"./dist/components/ebay-icon/transformer.js","@*":"expression","@html-attributes":"expression","@class":"string","@type":"string","@name":"string","@accessibility-text":"string"},"<ebay-radio>":{"renderer":"./dist/components/ebay-radio/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@disabled":"boolean"},"<ebay-checkbox>":{"renderer":"./dist/components/ebay-checkbox/index.js","@*":"expression","@html-attributes":"expression","@class":"string","@disabled":"boolean"}} |
| { | ||
| "name": "@ebay/ebayui-core", | ||
| "version": "0.4.0", | ||
| "version": "0.5.0-0", | ||
| "scripts": { | ||
@@ -5,0 +5,0 @@ "installMarkoV3": "yarn add marko@^3 marko-widgets@^6 -D", |
@@ -19,3 +19,5 @@ # eBayUI Core | ||
| *NOTE: Marko v3 also requires [Marko Widgets](https://github.com/marko-js/marko-widgets).* | ||
| *Note:\ | ||
| Marko v3 requires [Marko Widgets v6](https://github.com/marko-js/marko-widgets)\ | ||
| Marko v4 requires [Marko Widgets v7](https://github.com/marko-js/marko-widgets/tree/v7)* | ||
@@ -26,2 +28,3 @@ ### Components | ||
| * [`ebay-carousel`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-carousel) | ||
| * [`ebay-checkbox`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-checkbox) | ||
| * [`ebay-dialog`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-dialog) | ||
@@ -28,0 +31,0 @@ * [`ebay-menu`](https://github.com/eBay/ebayui-core/tree/master/src/components/ebay-menu) |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Dynamic require
Supply chain riskDynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.
Found 1 instance in 1 package
Filesystem access
Supply chain riskAccesses the file system, and could potentially read sensitive data.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by10.12%
501775
- Number of package files
- increased by65.49%
187
- Lines of code
- increased by15.22%
2415
- Number of lines in readme file
- increased by1.75%
174
Worsened metrics
- Number of low supply chain risk alerts
- increased byInfinity%
3
No dependency changes