From 8cca2d3686b4e6655fe89febef7140acc2c7f98d Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Thu, 17 Nov 2022 21:18:56 +0100 Subject: [PATCH 01/24] Add necessary packages --- package-lock.json | 26 ++++++++++++++++++++++++++ package.json | 2 ++ 2 files changed, 28 insertions(+) diff --git a/package-lock.json b/package-lock.json index 63bdb21a0..b6639b214 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1888,6 +1888,19 @@ } } }, + "@floating-ui/core": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.0.1.tgz", + "integrity": "sha512-bO37brCPfteXQfFY0DyNDGB3+IMe4j150KFQcgJ5aBP295p9nBGeHEs/p0czrRbtlHq4Px/yoPXO/+dOCcF4uA==" + }, + "@floating-ui/dom": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.0.4.tgz", + "integrity": "sha512-maYJRv+sAXTy4K9mzdv0JPyNW5YPVHrqtY90tEdI6XNpuLOP26Ci2pfwPsKBA/Wh4Z3FX5sUrtUFTdMYj9v+ug==", + "requires": { + "@floating-ui/core": "^1.0.1" + } + }, "@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -21796,6 +21809,11 @@ "get-intrinsic": "^1.1.1" } }, + "is-what": { + "version": "4.1.7", + "resolved": "https://registry.npmjs.org/is-what/-/is-what-4.1.7.tgz", + "integrity": "sha512-DBVOQNiPKnGMxRMLIYSwERAS5MVY1B7xYiGnpgctsOFvVDz9f9PFXXxMcTOHuoqYp4NK9qFYQaIC1NRRxLMpBQ==" + }, "is-whitespace-character": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz", @@ -23423,6 +23441,14 @@ } } }, + "merge-anything": { + "version": "5.1.3", + "resolved": "https://registry.npmjs.org/merge-anything/-/merge-anything-5.1.3.tgz", + "integrity": "sha512-pMb85+QShjqye+99Dkrg9m6EbTjDXwZFQbPysx/lNkuwjT+UJZlQvpnOy0P8kgGXzUx8iWSoNQel5QJjoyWHmQ==", + "requires": { + "is-what": "^4.1.7" + } + }, "merge-descriptors": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz", diff --git a/package.json b/package.json index 2efd16edc..230ae9821 100644 --- a/package.json +++ b/package.json @@ -51,6 +51,7 @@ "dependencies": { "@duetds/date-picker": "^1.4.0", "@embroider/macros": "^1.9.0", + "@floating-ui/dom": "^1.0.4", "@glimmer/component": "^1.1.2", "@glimmer/tracking": "^1.1.2", "@zestia/ember-auto-focus": "^4.2.0", @@ -65,6 +66,7 @@ "ember-modifier": "^3.2.7", "ember-named-blocks-polyfill": "^0.2.5", "ember-test-selectors": "^6.0.0", + "merge-anything": "^5.1.3", "tracked-toolbox": "^1.2.3" }, "devDependencies": { From 3ff840bcfdfd509abd5469713ca909d2a8f0c30c Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Thu, 17 Nov 2022 21:20:22 +0100 Subject: [PATCH 02/24] Add floating-ui modifier --- addon/modifiers/au-floating-ui.js | 158 ++++++++++++++++++ app/modifiers/au-floating-ui.js | 1 + .../modifiers/au-floating-ui-test.js | 15 ++ 3 files changed, 174 insertions(+) create mode 100644 addon/modifiers/au-floating-ui.js create mode 100644 app/modifiers/au-floating-ui.js create mode 100644 tests/integration/modifiers/au-floating-ui-test.js diff --git a/addon/modifiers/au-floating-ui.js b/addon/modifiers/au-floating-ui.js new file mode 100644 index 000000000..75a7777d8 --- /dev/null +++ b/addon/modifiers/au-floating-ui.js @@ -0,0 +1,158 @@ +import Modifier from 'ember-modifier'; +import { assert } from '@ember/debug'; +import { registerDestructor } from '@ember/destroyable'; + +import { + autoUpdate, + computePosition, + flip, + hide, + offset, + arrow, +} from '@floating-ui/dom'; + +import { merge } from 'merge-anything'; + +export default class AuFloatingUiModifier extends Modifier { + modify( + floatingElement, + [_referenceElement, _arrowElement], + { defaultPlacement = 'bottom-start', options = {}, middleware = [] } + ) { + const referenceElement = + typeof _referenceElement === 'string' + ? document.querySelector(_referenceElement) + : _referenceElement; + + const arrowElement = + typeof _arrowElement === 'string' + ? document.querySelector(_arrowElement) + : _arrowElement; + + const defaultOptions = { + floater: { + offset: 0, + }, + arrow: { + offset: 4, + padding: 3, + position: 'min(15%, 12px)', + }, + }; + options = merge(defaultOptions, options); + + assert( + `AuFloatingUI (modifier): No reference element was defined.`, + referenceElement instanceof HTMLElement + ); + + assert( + `AuFloatingUI (modifier): No floating element was defined.`, + floatingElement instanceof HTMLElement + ); + + assert( + `AuFloatingUI (modifier): The reference and floating elements cannot be the same element.`, + floatingElement !== _referenceElement + ); + + assert( + `AuFloatingUI (modifier): @placement must start with either 'bottom' or 'top'.`, + defaultPlacement.startsWith('bottom') || + defaultPlacement.startsWith('top') + ); + + assert( + `AuFloatingUI (modifier): @middleware must be an array of one or more objects.`, + Array.isArray(middleware) + ); + + Object.assign(floatingElement.style, { + position: 'fixed', + top: '0', + left: '0', + }); + + let update = async () => { + let { x, y, placement, middlewareData } = await computePosition( + referenceElement, + floatingElement, + { + middleware: [ + offset(6), + flip(), + ...middleware, + hide({ strategy: 'referenceHidden' }), + hide({ strategy: 'escaped' }), + arrow({ + element: arrowElement, + padding: options.arrow.padding, + }), + ], + placement: defaultPlacement, + } + ); + + Object.assign(floatingElement.style, { + transform: `translate3d(${Math.round(x)}px, ${Math.round(y)}px, 0)`, + visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible', + }); + + if (middlewareData.arrow) { + const { x, y } = middlewareData.arrow; + const [side, alignment] = placement.split('-'); + const isAligned = alignment != null; + + const unsetSides = { + top: '', + bottom: '', + left: '', + right: '', + }; + + const mainSide = { + top: 'bottom', + bottom: 'top', + }[side]; + + const rotation = { + top: '180deg', + bottom: '0deg', + }[side]; + + const crossSide = { + 'top-start': 'left', + 'top-end': 'right', + 'bottom-start': 'left', + 'bottom-end': 'right', + }[placement]; + + Object.assign(arrowElement.style, { + ...unsetSides, + transform: `rotate(${rotation})`, + }); + + if (isAligned) { + Object.assign(arrowElement.style, { + [crossSide]: + typeof options.arrow.position === 'string' + ? options.arrow.position + : `${options.arrow.position}px`, + }); + } else { + Object.assign(arrowElement.style, { + left: x != null ? `${x}px` : '', + }); + } + + Object.assign(arrowElement.style, { + [mainSide]: `-${options.arrow.offset}px`, + }); + } + }; + + let cleanup = autoUpdate(referenceElement, floatingElement, update); + + registerDestructor(this, cleanup); + } +} diff --git a/app/modifiers/au-floating-ui.js b/app/modifiers/au-floating-ui.js new file mode 100644 index 000000000..646bceae8 --- /dev/null +++ b/app/modifiers/au-floating-ui.js @@ -0,0 +1 @@ +export { default } from '@appuniversum/ember-appuniversum/modifiers/au-floating-ui'; diff --git a/tests/integration/modifiers/au-floating-ui-test.js b/tests/integration/modifiers/au-floating-ui-test.js new file mode 100644 index 000000000..fff90c340 --- /dev/null +++ b/tests/integration/modifiers/au-floating-ui-test.js @@ -0,0 +1,15 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Modifier | au-floating-ui', function (hooks) { + setupRenderingTest(hooks); + + // Replace this with your real tests. + test('it renders', async function (assert) { + await render(hbs`
`); + + assert.ok(true); + }); +}); From 885d8430d2ae07ff084be0c8764c319195569a5f Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Thu, 17 Nov 2022 21:20:46 +0100 Subject: [PATCH 03/24] Add floating-ui component --- addon/components/au-floating-ui.hbs | 13 ++++++++++ addon/components/au-floating-ui.js | 26 +++++++++++++++++++ app/components/au-floating-ui.js | 1 + .../components/au-floating-ui-test.js | 26 +++++++++++++++++++ 4 files changed, 66 insertions(+) create mode 100644 addon/components/au-floating-ui.hbs create mode 100644 addon/components/au-floating-ui.js create mode 100644 app/components/au-floating-ui.js create mode 100644 tests/integration/components/au-floating-ui-test.js diff --git a/addon/components/au-floating-ui.hbs b/addon/components/au-floating-ui.hbs new file mode 100644 index 000000000..91f147328 --- /dev/null +++ b/addon/components/au-floating-ui.hbs @@ -0,0 +1,13 @@ +{{yield (hash + reference=this.referenceModifier + arrow=this.arrowModifier + floater=(if this.reference ( + modifier + this.floaterModifier + this.reference + this.arrow + defaultPlacement=@defaultPlacement + options=@options + middleware=@middleware + )) +)}} \ No newline at end of file diff --git a/addon/components/au-floating-ui.js b/addon/components/au-floating-ui.js new file mode 100644 index 000000000..5c3df7038 --- /dev/null +++ b/addon/components/au-floating-ui.js @@ -0,0 +1,26 @@ +import Component from '@glimmer/component'; +import { tracked } from '@glimmer/tracking'; + +import { modifier } from 'ember-modifier'; +import AuFloatingUiModifier from '../modifiers/au-floating-ui'; + +export default class AuFloatingUiComponent extends Component { + @tracked reference = undefined; + @tracked arrow = undefined; + + referenceModifier = modifier( + (element) => { + this.reference = element; + }, + { eager: false } + ); + + arrowModifier = modifier( + (element) => { + this.arrow = element; + }, + { eager: false } + ); + + floaterModifier = AuFloatingUiModifier; +} diff --git a/app/components/au-floating-ui.js b/app/components/au-floating-ui.js new file mode 100644 index 000000000..0635653bf --- /dev/null +++ b/app/components/au-floating-ui.js @@ -0,0 +1 @@ +export { default } from '@appuniversum/ember-appuniversum/components/au-floating-ui'; diff --git a/tests/integration/components/au-floating-ui-test.js b/tests/integration/components/au-floating-ui-test.js new file mode 100644 index 000000000..274d6425d --- /dev/null +++ b/tests/integration/components/au-floating-ui-test.js @@ -0,0 +1,26 @@ +import { module, test } from 'qunit'; +import { setupRenderingTest } from 'ember-qunit'; +import { render } from '@ember/test-helpers'; +import { hbs } from 'ember-cli-htmlbars'; + +module('Integration | Component | au-floating-ui', function (hooks) { + setupRenderingTest(hooks); + + test('it renders', async function (assert) { + // Set any properties with this.set('myProperty', 'value'); + // Handle any actions with this.set('myAction', function(val) { ... }); + + await render(hbs``); + + assert.dom(this.element).hasText(''); + + // Template block usage: + await render(hbs` + + template block text + + `); + + assert.dom(this.element).hasText('template block text'); + }); +}); From b0b7b5697ace68042b5011ef6e514cbabae27580 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Thu, 17 Nov 2022 21:21:04 +0100 Subject: [PATCH 04/24] Add floating-ui story (Storybook) --- .../Helpers/AuFloatingUi.stories.js | 59 +++++++++++++++++++ 1 file changed, 59 insertions(+) create mode 100644 stories/5-components/Helpers/AuFloatingUi.stories.js diff --git a/stories/5-components/Helpers/AuFloatingUi.stories.js b/stories/5-components/Helpers/AuFloatingUi.stories.js new file mode 100644 index 000000000..d6799425c --- /dev/null +++ b/stories/5-components/Helpers/AuFloatingUi.stories.js @@ -0,0 +1,59 @@ +import { hbs } from 'ember-cli-htmlbars'; + +export default { + title: 'Components/Helpers/AuFloatingUI', + argTypes: { + defaultPlacement: { + control: 'select', + options: [ + 'bottom-start', + 'bottom', + 'bottom-end', + 'top-start', + 'top', + 'top-end', + ], + description: 'Set the default placement of the floater', + }, + options: { + control: 'object', + description: 'Set general options of the floater & arrow', + }, + }, + parameters: { + layout: 'padded', + }, +}; + +const Template = (args) => ({ + template: hbs` +
+
+ + + Reference + +
+
+
+ Floater
+ Lorem ipsum dolor sit amet +
+
+ +
+
`, + context: args, +}); + +export const Component = Template.bind(); From d431fe7e2ec55e2fb9677e1a7aec83e080410b40 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Thu, 17 Nov 2022 21:21:38 +0100 Subject: [PATCH 05/24] Add exemplary styling for floating-ui component --- .storybook/preview-body.html | 40 ++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 2c37f0b26..3ade978a6 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -51,6 +51,46 @@ .innerZoomElementWrapper > div > div > div { min-height: 300px !important; } + + .sb-decorator-example-scroller { + position: absolute; + width: calc(100% - 4rem); + height: calc(100% - 4rem); + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + place-content: center; + overflow: auto; + border: solid .1rem rgba(0,0,0,.05); + border-right: none; + border-bottom: none + } + + .sb-decorator-example-scroller-spacer { + width: 250%; + height: 250%; + display: grid; + place-content: center; + } + + .sb-story-example-floater { + background-color: var(--au-gray-1000); + border-radius: var(--au-radius); + } + + .sb-story-example-floater-arrow { + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-width: 0 4px 4px 4px; + border-color: transparent transparent var(--au-gray-1000) transparent; + } + + .sb-story-example-floater-content { + padding: .8rem 1.2rem; + color: var(--au-white); + }
From 86590423474416de8a137a2c6e5a7c1e4949cfea Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Thu, 17 Nov 2022 21:24:29 +0100 Subject: [PATCH 06/24] Fix static floater offset & unused variable --- addon/modifiers/au-floating-ui.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/addon/modifiers/au-floating-ui.js b/addon/modifiers/au-floating-ui.js index 75a7777d8..bd628e2f9 100644 --- a/addon/modifiers/au-floating-ui.js +++ b/addon/modifiers/au-floating-ui.js @@ -31,7 +31,7 @@ export default class AuFloatingUiModifier extends Modifier { const defaultOptions = { floater: { - offset: 0, + offset: 6, }, arrow: { offset: 4, @@ -79,7 +79,7 @@ export default class AuFloatingUiModifier extends Modifier { floatingElement, { middleware: [ - offset(6), + offset(options.floater.offset), flip(), ...middleware, hide({ strategy: 'referenceHidden' }), @@ -99,7 +99,7 @@ export default class AuFloatingUiModifier extends Modifier { }); if (middlewareData.arrow) { - const { x, y } = middlewareData.arrow; + const { x } = middlewareData.arrow; const [side, alignment] = placement.split('-'); const isAligned = alignment != null; From ddd25f2b1386718e562c12076d496e79b07bf108 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Fri, 18 Nov 2022 11:35:30 +0100 Subject: [PATCH 07/24] Reorder middleware options --- addon/modifiers/au-floating-ui.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/addon/modifiers/au-floating-ui.js b/addon/modifiers/au-floating-ui.js index bd628e2f9..c961c795a 100644 --- a/addon/modifiers/au-floating-ui.js +++ b/addon/modifiers/au-floating-ui.js @@ -81,13 +81,13 @@ export default class AuFloatingUiModifier extends Modifier { middleware: [ offset(options.floater.offset), flip(), - ...middleware, - hide({ strategy: 'referenceHidden' }), - hide({ strategy: 'escaped' }), arrow({ element: arrowElement, padding: options.arrow.padding, }), + ...middleware, + hide({ strategy: 'referenceHidden' }), + hide({ strategy: 'escaped' }), ], placement: defaultPlacement, } From 73fb7540ea6bbde958a8c7735625188dd6c2d9d7 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Fri, 18 Nov 2022 11:35:51 +0100 Subject: [PATCH 08/24] Add middleware control & enable default values --- stories/5-components/Helpers/AuFloatingUi.stories.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/stories/5-components/Helpers/AuFloatingUi.stories.js b/stories/5-components/Helpers/AuFloatingUi.stories.js index d6799425c..2166fd405 100644 --- a/stories/5-components/Helpers/AuFloatingUi.stories.js +++ b/stories/5-components/Helpers/AuFloatingUi.stories.js @@ -18,6 +18,12 @@ export default { options: { control: 'object', description: 'Set general options of the floater & arrow', + defaultValue: {}, + }, + middleware: { + control: 'object', + description: 'Set specific floating-ui options', + defaultValue: [], }, }, parameters: { From 9d70b06e0df2378a86b490e4bc65b415f637a878 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Mon, 21 Nov 2022 21:38:34 +0100 Subject: [PATCH 09/24] Remove middleware argument & restructure middleware settings (bugfix) --- addon/components/au-floating-ui.hbs | 1 - addon/modifiers/au-floating-ui.js | 35 ++++++++++--------- .../Helpers/AuFloatingUi.stories.js | 5 --- 3 files changed, 18 insertions(+), 23 deletions(-) diff --git a/addon/components/au-floating-ui.hbs b/addon/components/au-floating-ui.hbs index 91f147328..e757780f3 100644 --- a/addon/components/au-floating-ui.hbs +++ b/addon/components/au-floating-ui.hbs @@ -8,6 +8,5 @@ this.arrow defaultPlacement=@defaultPlacement options=@options - middleware=@middleware )) )}} \ No newline at end of file diff --git a/addon/modifiers/au-floating-ui.js b/addon/modifiers/au-floating-ui.js index c961c795a..6cee3f029 100644 --- a/addon/modifiers/au-floating-ui.js +++ b/addon/modifiers/au-floating-ui.js @@ -17,7 +17,7 @@ export default class AuFloatingUiModifier extends Modifier { modify( floatingElement, [_referenceElement, _arrowElement], - { defaultPlacement = 'bottom-start', options = {}, middleware = [] } + { defaultPlacement = 'bottom-start', options = {} } ) { const referenceElement = typeof _referenceElement === 'string' @@ -62,33 +62,34 @@ export default class AuFloatingUiModifier extends Modifier { defaultPlacement.startsWith('top') ); - assert( - `AuFloatingUI (modifier): @middleware must be an array of one or more objects.`, - Array.isArray(middleware) - ); - Object.assign(floatingElement.style, { position: 'fixed', top: '0', left: '0', }); + let middleware = [ + offset(options.floater.offset), + flip(), + hide({ strategy: 'referenceHidden' }), + hide({ strategy: 'escaped' }), + ]; + + if (arrowElement) { + middleware.push( + arrow({ + element: arrowElement, + padding: options.arrow.padding, + }) + ); + } + let update = async () => { let { x, y, placement, middlewareData } = await computePosition( referenceElement, floatingElement, { - middleware: [ - offset(options.floater.offset), - flip(), - arrow({ - element: arrowElement, - padding: options.arrow.padding, - }), - ...middleware, - hide({ strategy: 'referenceHidden' }), - hide({ strategy: 'escaped' }), - ], + middleware, placement: defaultPlacement, } ); diff --git a/stories/5-components/Helpers/AuFloatingUi.stories.js b/stories/5-components/Helpers/AuFloatingUi.stories.js index 2166fd405..ad7ee1955 100644 --- a/stories/5-components/Helpers/AuFloatingUi.stories.js +++ b/stories/5-components/Helpers/AuFloatingUi.stories.js @@ -20,11 +20,6 @@ export default { description: 'Set general options of the floater & arrow', defaultValue: {}, }, - middleware: { - control: 'object', - description: 'Set specific floating-ui options', - defaultValue: [], - }, }, parameters: { layout: 'padded', From d13af70a68329be4b2d41b23a86e2153763b4d99 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Mon, 21 Nov 2022 21:39:08 +0100 Subject: [PATCH 10/24] Fix floating-ui story (missing argument) --- stories/5-components/Helpers/AuFloatingUi.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/5-components/Helpers/AuFloatingUi.stories.js b/stories/5-components/Helpers/AuFloatingUi.stories.js index ad7ee1955..23f6aa439 100644 --- a/stories/5-components/Helpers/AuFloatingUi.stories.js +++ b/stories/5-components/Helpers/AuFloatingUi.stories.js @@ -30,7 +30,7 @@ const Template = (args) => ({ template: hbs`
- + Date: Mon, 21 Nov 2022 21:40:00 +0100 Subject: [PATCH 11/24] Add test coverage for floating-ui modifier & component --- .../components/au-floating-ui-test.js | 22 +++++++++---------- .../modifiers/au-floating-ui-test.js | 12 +++++++--- 2 files changed, 20 insertions(+), 14 deletions(-) diff --git a/tests/integration/components/au-floating-ui-test.js b/tests/integration/components/au-floating-ui-test.js index 274d6425d..2e4a33b80 100644 --- a/tests/integration/components/au-floating-ui-test.js +++ b/tests/integration/components/au-floating-ui-test.js @@ -7,20 +7,20 @@ module('Integration | Component | au-floating-ui', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { - // Set any properties with this.set('myProperty', 'value'); - // Handle any actions with this.set('myAction', function(val) { ... }); - - await render(hbs``); - - assert.dom(this.element).hasText(''); - - // Template block usage: await render(hbs` - - template block text + + +
+
+ Floater +
`); - assert.dom(this.element).hasText('template block text'); + assert.dom('[data-floater]').hasStyle({ + position: 'fixed', + top: '0px', + left: '0px', + }); }); }); diff --git a/tests/integration/modifiers/au-floating-ui-test.js b/tests/integration/modifiers/au-floating-ui-test.js index fff90c340..6cd8c7196 100644 --- a/tests/integration/modifiers/au-floating-ui-test.js +++ b/tests/integration/modifiers/au-floating-ui-test.js @@ -6,10 +6,16 @@ import { hbs } from 'ember-cli-htmlbars'; module('Integration | Modifier | au-floating-ui', function (hooks) { setupRenderingTest(hooks); - // Replace this with your real tests. test('it renders', async function (assert) { - await render(hbs`
`); + await render(hbs` + +
Floater
+ `); - assert.ok(true); + assert.dom('[data-floater]').hasStyle({ + position: 'fixed', + top: '0px', + left: '0px', + }); }); }); From ac5f4298a7797fbd3c114e5bb8c7e2132ee7c0dd Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Mon, 21 Nov 2022 22:05:42 +0100 Subject: [PATCH 12/24] Relocate example scroller/floater structure & styling to dummy component --- .storybook/preview-body.html | 40 ---------------- .../Helpers/AuFloatingUi.stories.js | 46 +++++++++---------- .../app/components/au-example-scroller.hbs | 5 ++ .../app/components/au-example-scroller.js | 3 ++ .../dummy/app/styles/_d-example-floater.scss | 18 ++++++++ .../dummy/app/styles/_d-example-scroller.scss | 20 ++++++++ tests/dummy/app/styles/app.scss | 12 +++-- 7 files changed, 75 insertions(+), 69 deletions(-) create mode 100644 tests/dummy/app/components/au-example-scroller.hbs create mode 100644 tests/dummy/app/components/au-example-scroller.js create mode 100644 tests/dummy/app/styles/_d-example-floater.scss create mode 100644 tests/dummy/app/styles/_d-example-scroller.scss diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html index 3ade978a6..2c37f0b26 100644 --- a/.storybook/preview-body.html +++ b/.storybook/preview-body.html @@ -51,46 +51,6 @@ .innerZoomElementWrapper > div > div > div { min-height: 300px !important; } - - .sb-decorator-example-scroller { - position: absolute; - width: calc(100% - 4rem); - height: calc(100% - 4rem); - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr; - place-content: center; - overflow: auto; - border: solid .1rem rgba(0,0,0,.05); - border-right: none; - border-bottom: none - } - - .sb-decorator-example-scroller-spacer { - width: 250%; - height: 250%; - display: grid; - place-content: center; - } - - .sb-story-example-floater { - background-color: var(--au-gray-1000); - border-radius: var(--au-radius); - } - - .sb-story-example-floater-arrow { - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 0 4px 4px 4px; - border-color: transparent transparent var(--au-gray-1000) transparent; - } - - .sb-story-example-floater-content { - padding: .8rem 1.2rem; - color: var(--au-white); - }
diff --git a/stories/5-components/Helpers/AuFloatingUi.stories.js b/stories/5-components/Helpers/AuFloatingUi.stories.js index 23f6aa439..5b7b57e8f 100644 --- a/stories/5-components/Helpers/AuFloatingUi.stories.js +++ b/stories/5-components/Helpers/AuFloatingUi.stories.js @@ -28,32 +28,30 @@ export default { const Template = (args) => ({ template: hbs` -
-
- - - Reference - + + + + Reference + +
-
-
- Floater
- Lorem ipsum dolor sit amet -
+ {{floatingUI.arrow}} + class="au-d-example-floater-arrow" + >
+
+ Floater
+ Lorem ipsum dolor sit amet
- -
-
`, +
+ + `, context: args, }); diff --git a/tests/dummy/app/components/au-example-scroller.hbs b/tests/dummy/app/components/au-example-scroller.hbs new file mode 100644 index 000000000..7d98a0e63 --- /dev/null +++ b/tests/dummy/app/components/au-example-scroller.hbs @@ -0,0 +1,5 @@ +
+
+ {{yield}} +
+
\ No newline at end of file diff --git a/tests/dummy/app/components/au-example-scroller.js b/tests/dummy/app/components/au-example-scroller.js new file mode 100644 index 000000000..0a82b6ea0 --- /dev/null +++ b/tests/dummy/app/components/au-example-scroller.js @@ -0,0 +1,3 @@ +import Component from '@glimmer/component'; + +export default class AuExampleScroller extends Component {} diff --git a/tests/dummy/app/styles/_d-example-floater.scss b/tests/dummy/app/styles/_d-example-floater.scss new file mode 100644 index 000000000..db0b6be3b --- /dev/null +++ b/tests/dummy/app/styles/_d-example-floater.scss @@ -0,0 +1,18 @@ +.au-d-example-floater { + background-color: var(--au-gray-1000); + border-radius: var(--au-radius); +} + +.au-d-example-floater-arrow { + position: absolute; + width: 0; + height: 0; + border-style: solid; + border-width: 0 4px 4px 4px; + border-color: transparent transparent var(--au-gray-1000) transparent; +} + +.au-d-example-floater-content { + padding: .8rem 1.2rem; + color: var(--au-white); +} diff --git a/tests/dummy/app/styles/_d-example-scroller.scss b/tests/dummy/app/styles/_d-example-scroller.scss new file mode 100644 index 000000000..c45015b13 --- /dev/null +++ b/tests/dummy/app/styles/_d-example-scroller.scss @@ -0,0 +1,20 @@ +.au-d-example-scroller { + position: absolute; + width: calc(100% - 4rem); + height: calc(100% - 4rem); + display: grid; + grid-template-columns: 1fr; + grid-template-rows: 1fr; + place-content: center; + overflow: auto; + border: solid .1rem rgba(0,0,0,.05); + border-right: none; + border-bottom: none +} + +.au-d-example-scroller-spacer { + width: 250%; + height: 250%; + display: grid; + place-content: center; +} diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index 85727b29e..42ac90262 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -2,10 +2,12 @@ @import 'app/styles/ember-appuniversum.scss'; // DUMMY STYLES -@import "d-component"; -@import "d-swatch"; -@import "d-editor-chrome"; -@import "d-editor-mockup"; +@import 'd-component'; +@import 'd-swatch'; +@import 'd-editor-chrome'; +@import 'd-editor-mockup'; +@import 'd-example-scroller'; +@import 'd-example-floater'; // QUICK FIXES AND HACKS -@import "shame"; +@import 'shame'; From 33b7bf63a030cedbe30ef218c70454fa8afe497e Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Tue, 22 Nov 2022 10:46:53 +0100 Subject: [PATCH 13/24] Disable linting error for a moment (before extending functionality) --- tests/dummy/app/components/au-example-scroller.js | 1 + 1 file changed, 1 insertion(+) diff --git a/tests/dummy/app/components/au-example-scroller.js b/tests/dummy/app/components/au-example-scroller.js index 0a82b6ea0..414893270 100644 --- a/tests/dummy/app/components/au-example-scroller.js +++ b/tests/dummy/app/components/au-example-scroller.js @@ -1,3 +1,4 @@ import Component from '@glimmer/component'; +// eslint-disable-next-line ember/no-empty-glimmer-component-classes export default class AuExampleScroller extends Component {} From 86f7306aa5f0edf9a7d7675bb62eb687361717c0 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Fri, 2 Dec 2022 18:11:28 +0100 Subject: [PATCH 14/24] Add functionality for the example scroller component --- .../app/components/au-example-scroller.hbs | 2 +- .../app/components/au-example-scroller.js | 31 +++++++++++++++++-- 2 files changed, 30 insertions(+), 3 deletions(-) diff --git a/tests/dummy/app/components/au-example-scroller.hbs b/tests/dummy/app/components/au-example-scroller.hbs index 7d98a0e63..76d7f529c 100644 --- a/tests/dummy/app/components/au-example-scroller.hbs +++ b/tests/dummy/app/components/au-example-scroller.hbs @@ -1,4 +1,4 @@ -
+
{{yield}}
diff --git a/tests/dummy/app/components/au-example-scroller.js b/tests/dummy/app/components/au-example-scroller.js index 414893270..4a607021b 100644 --- a/tests/dummy/app/components/au-example-scroller.js +++ b/tests/dummy/app/components/au-example-scroller.js @@ -1,4 +1,31 @@ import Component from '@glimmer/component'; +import { modifier } from 'ember-modifier'; -// eslint-disable-next-line ember/no-empty-glimmer-component-classes -export default class AuExampleScroller extends Component {} +export default class AuExampleScroller extends Component { + exampleScrollerModifier = modifier( + (element) => { + const child = element.children[0]; + + const scrollerDimensions = { + width: element.offsetWidth, + height: element.offsetHeight, + }; + + const childDimensions = { + width: child.offsetWidth, + height: child.offsetHeight, + }; + + if (childDimensions.width > scrollerDimensions.width) { + element.scrollLeft = + (childDimensions.width - scrollerDimensions.width) / 2; + } + + if (childDimensions.height > scrollerDimensions.height) { + element.scrollTop = + (childDimensions.height - scrollerDimensions.height) / 2; + } + }, + { eager: false } + ); +} From 1438f26a9fc9dafe9625b39210ebbcc28fc0de10 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Mon, 5 Dec 2022 20:56:24 +0100 Subject: [PATCH 15/24] Enable use of both negative & positive offset values for the arrow --- addon/modifiers/au-floating-ui.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/addon/modifiers/au-floating-ui.js b/addon/modifiers/au-floating-ui.js index 6cee3f029..6a4bb8632 100644 --- a/addon/modifiers/au-floating-ui.js +++ b/addon/modifiers/au-floating-ui.js @@ -147,7 +147,7 @@ export default class AuFloatingUiModifier extends Modifier { } Object.assign(arrowElement.style, { - [mainSide]: `-${options.arrow.offset}px`, + [mainSide]: `${-options.arrow.offset}px`, }); } }; From 0526e4b4c230acb88000c64f57361b273adf715c Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Thu, 15 Dec 2022 14:39:40 +0100 Subject: [PATCH 16/24] Convert floating-ui modifier to function-based modifier --- addon/modifiers/au-floating-ui.js | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/addon/modifiers/au-floating-ui.js b/addon/modifiers/au-floating-ui.js index 6a4bb8632..88de1eda0 100644 --- a/addon/modifiers/au-floating-ui.js +++ b/addon/modifiers/au-floating-ui.js @@ -1,6 +1,5 @@ -import Modifier from 'ember-modifier'; +import { modifier } from 'ember-modifier'; import { assert } from '@ember/debug'; -import { registerDestructor } from '@ember/destroyable'; import { autoUpdate, @@ -13,12 +12,12 @@ import { import { merge } from 'merge-anything'; -export default class AuFloatingUiModifier extends Modifier { - modify( +export default modifier( + ( floatingElement, [_referenceElement, _arrowElement], { defaultPlacement = 'bottom-start', options = {} } - ) { + ) => { const referenceElement = typeof _referenceElement === 'string' ? document.querySelector(_referenceElement) @@ -154,6 +153,9 @@ export default class AuFloatingUiModifier extends Modifier { let cleanup = autoUpdate(referenceElement, floatingElement, update); - registerDestructor(this, cleanup); - } -} + return () => { + cleanup(); + }; + }, + { eager: false } +); From 8ef07c7bc7a876cb4d7bdad58aa1fda3f939d114 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Wed, 4 Jan 2023 17:09:25 +0100 Subject: [PATCH 17/24] Remove component version of floating-ui helper --- addon/components/au-floating-ui.hbs | 12 --------- addon/components/au-floating-ui.js | 26 ------------------- app/components/au-floating-ui.js | 1 - .../components/au-floating-ui-test.js | 26 ------------------- 4 files changed, 65 deletions(-) delete mode 100644 addon/components/au-floating-ui.hbs delete mode 100644 addon/components/au-floating-ui.js delete mode 100644 app/components/au-floating-ui.js delete mode 100644 tests/integration/components/au-floating-ui-test.js diff --git a/addon/components/au-floating-ui.hbs b/addon/components/au-floating-ui.hbs deleted file mode 100644 index e757780f3..000000000 --- a/addon/components/au-floating-ui.hbs +++ /dev/null @@ -1,12 +0,0 @@ -{{yield (hash - reference=this.referenceModifier - arrow=this.arrowModifier - floater=(if this.reference ( - modifier - this.floaterModifier - this.reference - this.arrow - defaultPlacement=@defaultPlacement - options=@options - )) -)}} \ No newline at end of file diff --git a/addon/components/au-floating-ui.js b/addon/components/au-floating-ui.js deleted file mode 100644 index 5c3df7038..000000000 --- a/addon/components/au-floating-ui.js +++ /dev/null @@ -1,26 +0,0 @@ -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; - -import { modifier } from 'ember-modifier'; -import AuFloatingUiModifier from '../modifiers/au-floating-ui'; - -export default class AuFloatingUiComponent extends Component { - @tracked reference = undefined; - @tracked arrow = undefined; - - referenceModifier = modifier( - (element) => { - this.reference = element; - }, - { eager: false } - ); - - arrowModifier = modifier( - (element) => { - this.arrow = element; - }, - { eager: false } - ); - - floaterModifier = AuFloatingUiModifier; -} diff --git a/app/components/au-floating-ui.js b/app/components/au-floating-ui.js deleted file mode 100644 index 0635653bf..000000000 --- a/app/components/au-floating-ui.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@appuniversum/ember-appuniversum/components/au-floating-ui'; diff --git a/tests/integration/components/au-floating-ui-test.js b/tests/integration/components/au-floating-ui-test.js deleted file mode 100644 index 2e4a33b80..000000000 --- a/tests/integration/components/au-floating-ui-test.js +++ /dev/null @@ -1,26 +0,0 @@ -import { module, test } from 'qunit'; -import { setupRenderingTest } from 'ember-qunit'; -import { render } from '@ember/test-helpers'; -import { hbs } from 'ember-cli-htmlbars'; - -module('Integration | Component | au-floating-ui', function (hooks) { - setupRenderingTest(hooks); - - test('it renders', async function (assert) { - await render(hbs` - - -
-
- Floater -
- - `); - - assert.dom('[data-floater]').hasStyle({ - position: 'fixed', - top: '0px', - left: '0px', - }); - }); -}); From 8c7390cd608f590c92486d1c873c85f1ce5b9147 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Wed, 4 Jan 2023 17:14:56 +0100 Subject: [PATCH 18/24] Remove floating-ui Storybook story --- .../Helpers/AuFloatingUi.stories.js | 58 ------------------- 1 file changed, 58 deletions(-) delete mode 100644 stories/5-components/Helpers/AuFloatingUi.stories.js diff --git a/stories/5-components/Helpers/AuFloatingUi.stories.js b/stories/5-components/Helpers/AuFloatingUi.stories.js deleted file mode 100644 index 5b7b57e8f..000000000 --- a/stories/5-components/Helpers/AuFloatingUi.stories.js +++ /dev/null @@ -1,58 +0,0 @@ -import { hbs } from 'ember-cli-htmlbars'; - -export default { - title: 'Components/Helpers/AuFloatingUI', - argTypes: { - defaultPlacement: { - control: 'select', - options: [ - 'bottom-start', - 'bottom', - 'bottom-end', - 'top-start', - 'top', - 'top-end', - ], - description: 'Set the default placement of the floater', - }, - options: { - control: 'object', - description: 'Set general options of the floater & arrow', - defaultValue: {}, - }, - }, - parameters: { - layout: 'padded', - }, -}; - -const Template = (args) => ({ - template: hbs` - - - - Reference - -
-
-
- Floater
- Lorem ipsum dolor sit amet -
-
- - `, - context: args, -}); - -export const Component = Template.bind(); From 827fb0745bdb2b1d288ced518018083b0dcf6068 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Wed, 4 Jan 2023 21:48:07 +0100 Subject: [PATCH 19/24] Delete re-export of floating-ui modifier --- app/modifiers/au-floating-ui.js | 1 - 1 file changed, 1 deletion(-) delete mode 100644 app/modifiers/au-floating-ui.js diff --git a/app/modifiers/au-floating-ui.js b/app/modifiers/au-floating-ui.js deleted file mode 100644 index 646bceae8..000000000 --- a/app/modifiers/au-floating-ui.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from '@appuniversum/ember-appuniversum/modifiers/au-floating-ui'; From 062f607725d5d8d1d481b59a4825cb662a3ce03b Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Wed, 4 Jan 2023 22:19:13 +0100 Subject: [PATCH 20/24] Move floating-ui modifier to private folder & rename identifier --- .../modifiers/floating-ui.js} | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) rename addon/{modifiers/au-floating-ui.js => private/modifiers/floating-ui.js} (91%) diff --git a/addon/modifiers/au-floating-ui.js b/addon/private/modifiers/floating-ui.js similarity index 91% rename from addon/modifiers/au-floating-ui.js rename to addon/private/modifiers/floating-ui.js index 88de1eda0..5a8a0068e 100644 --- a/addon/modifiers/au-floating-ui.js +++ b/addon/private/modifiers/floating-ui.js @@ -41,22 +41,22 @@ export default modifier( options = merge(defaultOptions, options); assert( - `AuFloatingUI (modifier): No reference element was defined.`, + `FloatingUI (modifier): No reference element was defined.`, referenceElement instanceof HTMLElement ); assert( - `AuFloatingUI (modifier): No floating element was defined.`, + `FloatingUI (modifier): No floating element was defined.`, floatingElement instanceof HTMLElement ); assert( - `AuFloatingUI (modifier): The reference and floating elements cannot be the same element.`, + `FloatingUI (modifier): The reference and floating elements cannot be the same element.`, floatingElement !== _referenceElement ); assert( - `AuFloatingUI (modifier): @placement must start with either 'bottom' or 'top'.`, + `FloatingUI (modifier): @placement must start with either 'bottom' or 'top'.`, defaultPlacement.startsWith('bottom') || defaultPlacement.startsWith('top') ); From 170fbabed42152da2f00da1afc2d2c49f3079142 Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Wed, 4 Jan 2023 22:22:29 +0100 Subject: [PATCH 21/24] Adjust floating-ui modifier assertions --- addon/private/modifiers/floating-ui.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/addon/private/modifiers/floating-ui.js b/addon/private/modifiers/floating-ui.js index 5a8a0068e..11966811f 100644 --- a/addon/private/modifiers/floating-ui.js +++ b/addon/private/modifiers/floating-ui.js @@ -45,14 +45,9 @@ export default modifier( referenceElement instanceof HTMLElement ); - assert( - `FloatingUI (modifier): No floating element was defined.`, - floatingElement instanceof HTMLElement - ); - assert( `FloatingUI (modifier): The reference and floating elements cannot be the same element.`, - floatingElement !== _referenceElement + floatingElement !== referenceElement ); assert( From 9d5ced4c1db4c4742633b9e73f6d6e3ec79a6c2b Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Wed, 4 Jan 2023 22:42:05 +0100 Subject: [PATCH 22/24] Move floating-ui modifier test to private folder, rename identifier & rework import --- .../modifiers/floating-ui-test.js} | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) rename tests/integration/{modifiers/au-floating-ui-test.js => private/modifiers/floating-ui-test.js} (61%) diff --git a/tests/integration/modifiers/au-floating-ui-test.js b/tests/integration/private/modifiers/floating-ui-test.js similarity index 61% rename from tests/integration/modifiers/au-floating-ui-test.js rename to tests/integration/private/modifiers/floating-ui-test.js index 6cd8c7196..44e0b3ca9 100644 --- a/tests/integration/modifiers/au-floating-ui-test.js +++ b/tests/integration/private/modifiers/floating-ui-test.js @@ -3,13 +3,17 @@ import { setupRenderingTest } from 'ember-qunit'; import { render } from '@ember/test-helpers'; import { hbs } from 'ember-cli-htmlbars'; -module('Integration | Modifier | au-floating-ui', function (hooks) { +import FloatingUiModifier from '@appuniversum/ember-appuniversum/private/modifiers/floating-ui'; + +module('Integration | Private Modifier | floating-ui', function (hooks) { setupRenderingTest(hooks); test('it renders', async function (assert) { + this.set('floatingUi', FloatingUiModifier); + await render(hbs` -
Floater
+
Floater
`); assert.dom('[data-floater]').hasStyle({ From 740b87eb1bad9d44172b00f96e9a5d11360bcfab Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Wed, 4 Jan 2023 22:45:20 +0100 Subject: [PATCH 23/24] Remove dummy floater styling (not needed anymore) --- tests/dummy/app/styles/_d-example-floater.scss | 18 ------------------ tests/dummy/app/styles/app.scss | 1 - 2 files changed, 19 deletions(-) delete mode 100644 tests/dummy/app/styles/_d-example-floater.scss diff --git a/tests/dummy/app/styles/_d-example-floater.scss b/tests/dummy/app/styles/_d-example-floater.scss deleted file mode 100644 index db0b6be3b..000000000 --- a/tests/dummy/app/styles/_d-example-floater.scss +++ /dev/null @@ -1,18 +0,0 @@ -.au-d-example-floater { - background-color: var(--au-gray-1000); - border-radius: var(--au-radius); -} - -.au-d-example-floater-arrow { - position: absolute; - width: 0; - height: 0; - border-style: solid; - border-width: 0 4px 4px 4px; - border-color: transparent transparent var(--au-gray-1000) transparent; -} - -.au-d-example-floater-content { - padding: .8rem 1.2rem; - color: var(--au-white); -} diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index 42ac90262..765f2c547 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -7,7 +7,6 @@ @import 'd-editor-chrome'; @import 'd-editor-mockup'; @import 'd-example-scroller'; -@import 'd-example-floater'; // QUICK FIXES AND HACKS @import 'shame'; From 8842d20cddcc8cf0573de8ed8f7d6a08b618f03a Mon Sep 17 00:00:00 2001 From: Karel Persoons Date: Thu, 5 Jan 2023 10:23:45 +0100 Subject: [PATCH 24/24] Remove example scroller component & styling --- .../app/components/au-example-scroller.hbs | 5 --- .../app/components/au-example-scroller.js | 31 ------------------- .../dummy/app/styles/_d-example-scroller.scss | 20 ------------ tests/dummy/app/styles/app.scss | 1 - 4 files changed, 57 deletions(-) delete mode 100644 tests/dummy/app/components/au-example-scroller.hbs delete mode 100644 tests/dummy/app/components/au-example-scroller.js delete mode 100644 tests/dummy/app/styles/_d-example-scroller.scss diff --git a/tests/dummy/app/components/au-example-scroller.hbs b/tests/dummy/app/components/au-example-scroller.hbs deleted file mode 100644 index 76d7f529c..000000000 --- a/tests/dummy/app/components/au-example-scroller.hbs +++ /dev/null @@ -1,5 +0,0 @@ -
-
- {{yield}} -
-
\ No newline at end of file diff --git a/tests/dummy/app/components/au-example-scroller.js b/tests/dummy/app/components/au-example-scroller.js deleted file mode 100644 index 4a607021b..000000000 --- a/tests/dummy/app/components/au-example-scroller.js +++ /dev/null @@ -1,31 +0,0 @@ -import Component from '@glimmer/component'; -import { modifier } from 'ember-modifier'; - -export default class AuExampleScroller extends Component { - exampleScrollerModifier = modifier( - (element) => { - const child = element.children[0]; - - const scrollerDimensions = { - width: element.offsetWidth, - height: element.offsetHeight, - }; - - const childDimensions = { - width: child.offsetWidth, - height: child.offsetHeight, - }; - - if (childDimensions.width > scrollerDimensions.width) { - element.scrollLeft = - (childDimensions.width - scrollerDimensions.width) / 2; - } - - if (childDimensions.height > scrollerDimensions.height) { - element.scrollTop = - (childDimensions.height - scrollerDimensions.height) / 2; - } - }, - { eager: false } - ); -} diff --git a/tests/dummy/app/styles/_d-example-scroller.scss b/tests/dummy/app/styles/_d-example-scroller.scss deleted file mode 100644 index c45015b13..000000000 --- a/tests/dummy/app/styles/_d-example-scroller.scss +++ /dev/null @@ -1,20 +0,0 @@ -.au-d-example-scroller { - position: absolute; - width: calc(100% - 4rem); - height: calc(100% - 4rem); - display: grid; - grid-template-columns: 1fr; - grid-template-rows: 1fr; - place-content: center; - overflow: auto; - border: solid .1rem rgba(0,0,0,.05); - border-right: none; - border-bottom: none -} - -.au-d-example-scroller-spacer { - width: 250%; - height: 250%; - display: grid; - place-content: center; -} diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss index 765f2c547..fdd904cc3 100644 --- a/tests/dummy/app/styles/app.scss +++ b/tests/dummy/app/styles/app.scss @@ -6,7 +6,6 @@ @import 'd-swatch'; @import 'd-editor-chrome'; @import 'd-editor-mockup'; -@import 'd-example-scroller'; // QUICK FIXES AND HACKS @import 'shame';