diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md deleted file mode 120000 index 5cfe75c8..00000000 --- a/CONTRIBUTING.md +++ /dev/null @@ -1 +0,0 @@ -./addon/CONTRIBUTING.md \ No newline at end of file diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md new file mode 100644 index 00000000..4a36356f --- /dev/null +++ b/CONTRIBUTING.md @@ -0,0 +1,25 @@ +# How To Contribute + +## Installation + +* `git clone ` +* `cd ember-mobile-menu` +* `pnpm install` + +## Linting + +* `pnpm lint` +* `pnpm lint:fix` + +## Running tests + +* `ember test` – Runs the test suite on the current Ember version +* `ember test --server` – Runs the test suite in "watch mode" +* `ember try:each` – Runs the test suite against multiple Ember versions + +## Running the dummy application + +* `ember serve` +* Visit the dummy application at [http://localhost:4200](http://localhost:4200). + +For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/). diff --git a/LICENSE.md b/LICENSE.md deleted file mode 120000 index 2998bb3d..00000000 --- a/LICENSE.md +++ /dev/null @@ -1 +0,0 @@ -./addon/LICENSE.md \ No newline at end of file diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 00000000..7b6573f5 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,9 @@ +The MIT License (MIT) + +Copyright (c) 2020 + +Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/README.md b/README.md deleted file mode 120000 index ed86626f..00000000 --- a/README.md +++ /dev/null @@ -1 +0,0 @@ -./addon/README.md \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 00000000..f2e7d75f --- /dev/null +++ b/README.md @@ -0,0 +1,40 @@ +ember-mobile-menu +============================================================================== + +[![Build Status](https://travis-ci.org/nickschot/ember-mobile-menu.svg?branch=master)](https://travis-ci.org/nickschot/ember-mobile-menu) [![Ember Observer Score](https://emberobserver.com/badges/ember-mobile-menu.svg)](https://emberobserver.com/addons/ember-mobile-menu) + +An [ember-cli](http://www.ember-cli.com) addon providing a draggable sidebar specifically tailored to mobile devices. + +Both a left and a right menu are supported. Dragging is supported through touch events as supported by any modern (mobile) browser. The sidebar provides an empty canvas suitable for any content. + +Requirements +------------------------------------------------------------------------------ +* Ember.js v4.0 or above +* Ember CLI v3.12 or above +* Node.js v18 or above +* ember-cli-babel v7.23 or above +* ember-concurrency v2.x +* ember-auto-import v2.x + +**NOTE:** This addon utilizes ResizeObservers. If you require support for older browser you can install a ResizeObserver polyfill like [ember-resize-observer-polyfill](https://github.com/PrecisionNutrition/ember-resize-observer-polyfill). + +Installation +------------------------------------------------------------------------------ + +From your application directory run: + +`ember install ember-mobile-menu` + +Documentation +------------------------------------------------------------------------------ +https://nickschot.github.io/ember-mobile-menu + +Contributing +------------------------------------------------------------------------------ + +See the [Contributing](CONTRIBUTING.md) guide for details. + +Copyright and license +------------------------------------------------------------------------------ + +Code and documentation copyright 2018 Nick Schot. The code is released under [the MIT license](LICENSE.md). diff --git a/addon/.eslintignore b/addon/.eslintignore deleted file mode 100644 index d474a40b..00000000 --- a/addon/.eslintignore +++ /dev/null @@ -1,25 +0,0 @@ -# unconventional js -/blueprints/*/files/ -/vendor/ - -# compiled output -/dist/ -/tmp/ - -# dependencies -/bower_components/ -/node_modules/ - -# misc -/coverage/ -!.* -.*/ -.eslintcache - -# ember-try -/.node_modules.ember-try/ -/bower.json.ember-try -/npm-shrinkwrap.json.ember-try -/package.json.ember-try -/package-lock.json.ember-try -/yarn.lock.ember-try diff --git a/addon/.eslintrc.js b/addon/.eslintrc.js deleted file mode 100644 index aa037495..00000000 --- a/addon/.eslintrc.js +++ /dev/null @@ -1,51 +0,0 @@ -'use strict'; - -module.exports = { - root: true, - parser: '@babel/eslint-parser', - parserOptions: { - ecmaVersion: 2020, - sourceType: 'module', - requireConfigFile: false, - babelOptions: { - plugins: [ - ['@babel/plugin-proposal-decorators', { decoratorsBeforeExport: true }], - ], - }, - }, - plugins: ['ember'], - extends: [ - 'eslint:recommended', - 'plugin:ember/recommended', - 'plugin:prettier/recommended', - ], - env: { - browser: true, - }, - rules: {}, - overrides: [ - // node files - { - files: [ - './.eslintrc.js', - './.prettierrc.js', - './.template-lintrc.js', - './ember-cli-build.js', - './index.js', - './testem.js', - './blueprints/*/index.js', - './config/**/*.js', - './compile-css.js', - ], - parserOptions: { - sourceType: 'script', - }, - env: { - browser: false, - node: true, - }, - plugins: ['node'], - extends: ['plugin:node/recommended'], - }, - ], -}; diff --git a/addon/.gitignore b/addon/.gitignore deleted file mode 100644 index a5a0ef76..00000000 --- a/addon/.gitignore +++ /dev/null @@ -1,32 +0,0 @@ -# See https://help.github.com/ignore-files/ for more about ignoring files. - -# compiled output -/dist/ -/tmp/ - -# dependencies -/bower_components/ -/node_modules/ - -# misc -/.env* -/.pnp* -/.sass-cache -/.eslintcache -/connect.lock -/coverage/ -/libpeerconnection.log -/npm-debug.log* -/testem.log -/yarn-error.log - -# ember-try -/.node_modules.ember-try/ -/bower.json.ember-try -/npm-shrinkwrap.json.ember-try -/package.json.ember-try -/package-lock.json.ember-try -/yarn.lock.ember-try - -/.idea/ -/vendor/ember-mobile-menu.css diff --git a/addon/.npmignore b/addon/.npmignore deleted file mode 100644 index b0a56f38..00000000 --- a/addon/.npmignore +++ /dev/null @@ -1,17 +0,0 @@ -# compiled output -/dist/ - -# misc -/.env* -/.eslintcache -/.eslintignore -/.eslintrc.js -/.git/ -/.gitignore -/.prettierignore -/.pnpm-debug.log -/.prettierrc.js -/.template-lintrc.js -/yarn-error.log -/yarn.lock -.gitkeep diff --git a/addon/.prettierignore b/addon/.prettierignore deleted file mode 100644 index 4178fd57..00000000 --- a/addon/.prettierignore +++ /dev/null @@ -1,25 +0,0 @@ -# unconventional js -/blueprints/*/files/ -/vendor/ - -# compiled output -/dist/ -/tmp/ - -# dependencies -/bower_components/ -/node_modules/ - -# misc -/coverage/ -!.* -.eslintcache -.lint-todo/ - -# ember-try -/.node_modules.ember-try/ -/bower.json.ember-try -/npm-shrinkwrap.json.ember-try -/package.json.ember-try -/package-lock.json.ember-try -/yarn.lock.ember-try diff --git a/addon/.prettierrc.js b/addon/.prettierrc.js deleted file mode 100644 index 534e6d35..00000000 --- a/addon/.prettierrc.js +++ /dev/null @@ -1,5 +0,0 @@ -'use strict'; - -module.exports = { - singleQuote: true, -}; diff --git a/addon/.template-lintrc.js b/addon/.template-lintrc.js deleted file mode 100644 index f35f61c7..00000000 --- a/addon/.template-lintrc.js +++ /dev/null @@ -1,5 +0,0 @@ -'use strict'; - -module.exports = { - extends: 'recommended', -}; diff --git a/addon/CONTRIBUTING.md b/addon/CONTRIBUTING.md deleted file mode 100644 index 4a36356f..00000000 --- a/addon/CONTRIBUTING.md +++ /dev/null @@ -1,25 +0,0 @@ -# How To Contribute - -## Installation - -* `git clone ` -* `cd ember-mobile-menu` -* `pnpm install` - -## Linting - -* `pnpm lint` -* `pnpm lint:fix` - -## Running tests - -* `ember test` – Runs the test suite on the current Ember version -* `ember test --server` – Runs the test suite in "watch mode" -* `ember try:each` – Runs the test suite against multiple Ember versions - -## Running the dummy application - -* `ember serve` -* Visit the dummy application at [http://localhost:4200](http://localhost:4200). - -For more information on using ember-cli, visit [https://ember-cli.com/](https://ember-cli.com/). diff --git a/addon/LICENSE.md b/addon/LICENSE.md deleted file mode 100644 index 7b6573f5..00000000 --- a/addon/LICENSE.md +++ /dev/null @@ -1,9 +0,0 @@ -The MIT License (MIT) - -Copyright (c) 2020 - -Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE. diff --git a/addon/README.md b/addon/README.md deleted file mode 100644 index f2e7d75f..00000000 --- a/addon/README.md +++ /dev/null @@ -1,40 +0,0 @@ -ember-mobile-menu -============================================================================== - -[![Build Status](https://travis-ci.org/nickschot/ember-mobile-menu.svg?branch=master)](https://travis-ci.org/nickschot/ember-mobile-menu) [![Ember Observer Score](https://emberobserver.com/badges/ember-mobile-menu.svg)](https://emberobserver.com/addons/ember-mobile-menu) - -An [ember-cli](http://www.ember-cli.com) addon providing a draggable sidebar specifically tailored to mobile devices. - -Both a left and a right menu are supported. Dragging is supported through touch events as supported by any modern (mobile) browser. The sidebar provides an empty canvas suitable for any content. - -Requirements ------------------------------------------------------------------------------- -* Ember.js v4.0 or above -* Ember CLI v3.12 or above -* Node.js v18 or above -* ember-cli-babel v7.23 or above -* ember-concurrency v2.x -* ember-auto-import v2.x - -**NOTE:** This addon utilizes ResizeObservers. If you require support for older browser you can install a ResizeObserver polyfill like [ember-resize-observer-polyfill](https://github.com/PrecisionNutrition/ember-resize-observer-polyfill). - -Installation ------------------------------------------------------------------------------- - -From your application directory run: - -`ember install ember-mobile-menu` - -Documentation ------------------------------------------------------------------------------- -https://nickschot.github.io/ember-mobile-menu - -Contributing ------------------------------------------------------------------------------- - -See the [Contributing](CONTRIBUTING.md) guide for details. - -Copyright and license ------------------------------------------------------------------------------- - -Code and documentation copyright 2018 Nick Schot. The code is released under [the MIT license](LICENSE.md). diff --git a/addon/addon/.gitkeep b/addon/addon/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/addon/addon/components/mobile-menu-toggle.hbs b/addon/addon/components/mobile-menu-toggle.hbs deleted file mode 100644 index 72ff4c41..00000000 --- a/addon/addon/components/mobile-menu-toggle.hbs +++ /dev/null @@ -1,8 +0,0 @@ - \ No newline at end of file diff --git a/addon/addon/components/mobile-menu-toggle.js b/addon/addon/components/mobile-menu-toggle.js deleted file mode 100644 index bec40f84..00000000 --- a/addon/addon/components/mobile-menu-toggle.js +++ /dev/null @@ -1,28 +0,0 @@ -import Component from '@glimmer/component'; - -const _fn = () => {}; - -/** - * A toggle component to open or close a menu. - * - * @class MobileMenuToggle - * @public - */ -export default class MobileMenuToggle extends Component { - /** - * Target menu for the toggle - * - * @argument target - * @type String 'left' or 'right' - */ - - /** - * Hook fired when the toggle is clicked. You can pass in an action. - * - * @argument onClick - * @type function - */ - get onClick() { - return () => this.args.onClick(this.args.target) ?? _fn; - } -} diff --git a/addon/addon/components/mobile-menu-wrapper.hbs b/addon/addon/components/mobile-menu-wrapper.hbs deleted file mode 100644 index ee14a7d6..00000000 --- a/addon/addon/components/mobile-menu-wrapper.hbs +++ /dev/null @@ -1,57 +0,0 @@ -{{#if this.preventBodyScroll}} - {{set-body-class "mobile-menu--prevent-scroll"}} -{{/if}} - -
- {{yield - (hash - MobileMenu=(component "mobile-menu" - isDragging=this.dragging - position=this.position - embed=this.embed - parentBoundingClientRect=this.boundingClientRect - parent=this - register=this.registerChild - unregister=this.unregisterChild - - onClose=this.close - onOpen=this.open - - onPanStart=this.didPanStart - onPan=this.didPan - onPanEnd=this.didPanEnd - capture=this.capture - preventScroll=this.preventScroll - ) - Toggle=(component "mobile-menu-toggle" - onClick=this.toggle - ) - Content=(component "mobile-menu-wrapper/content" - shadowEnabled=this.contentShadowEnabled - position=this.position - mode=this.mode - isOpen=this.activeMenu - maskEnabled=this.activeMenu.maskEnabled - - onPanStart=this.didPanStart - onPan=this.didPan - onPanEnd=this.didPanEnd - capture=this.capture - preventScroll=this.preventScroll - - onClose=this.close - ) - position=this.position - relativePosition=this.relativePosition - actions=(hash - toggle=this.toggle - close=this.close - ) - ) - }} -
\ No newline at end of file diff --git a/addon/addon/components/mobile-menu-wrapper.js b/addon/addon/components/mobile-menu-wrapper.js deleted file mode 100644 index c029fbe0..00000000 --- a/addon/addon/components/mobile-menu-wrapper.js +++ /dev/null @@ -1,439 +0,0 @@ -import Component from '@glimmer/component'; -import { tracked } from '@glimmer/tracking'; - -import { action } from '@ember/object'; -import { TrackedSet } from 'tracked-built-ins'; - -import MobileMenu from 'ember-mobile-menu/components/mobile-menu'; -import normalizeCoordinates from '../utils/normalize-coordinates'; - -import { getOwner } from '@ember/application'; -import { assert } from '@ember/debug'; -import { waitFor } from '@ember/test-waiters'; -import { task } from 'ember-concurrency'; -import Spring from '../spring'; - -const isIOSDevice = - typeof window !== 'undefined' && - window.navigator?.platform && - (/iP(ad|hone|od)/.test(window.navigator.platform) || - (window.navigator.platform === 'MacIntel' && - window.navigator.maxTouchPoints > 1)); - -/** - * Wrapper component for menu's. Provides pan recognition and management. - * - * @class MobileMenuWrapper - * @yield {Hash} wrapper - * @yield {MobileMenu component} wrapper.MobileMenu - * @yield {Content component} wrapper.Content - * @yield {MobileMenuToggle component} wrapper.Toggle - * @yield {Hash} wrapper.actions - * @yield {number} position Current position of the active menu in px. - * @yield {number} relativePosition Current position of the active menu between 0 and 1. - * @yield {Action} wrapper.actions.toggle - * @yield {Action} wrapper.actions.close - * @public - */ -export default class MobileMenuWrapper extends Component { - get fastboot() { - return getOwner(this).lookup('service:fastboot'); - } - get isFastBoot() { - return !!this.fastboot?.isFastBoot; - } - - /** - * Current BoundingClientRect of the mobile menu wrapper root element - * - * @property boundingClientRect - * @type {DOMRect} - * @default null - * @private - */ - @tracked boundingClientRect = null; - - @tracked children = new TrackedSet(); - @tracked position = 0; - @tracked dragging = false; - fromPosition = 0; - fromOpen = false; - defaultMenuDx = 0; - preservedVelocity = 0; - _activeMenu = null; // used only in case a menu is set to open in a fastboot environment - - /** - * Horizontal width of the detection zone in pixels. Set to -1 to use full width. - * - * @argument openDetectionWidth - * @type Number - * @default 15 - */ - get openDetectionWidth() { - return this.args.openDetectionWidth ?? 15; - } - - /** - * If true the capture phase will be used for the event, giving it precedence over events in the (default) - * bubble phase. This is handy for menus as they are usually defined high in the dom, are opened with edge gestures - * and thus must take precedence over deeper nested elements by using the capture phase. - * - * See for more details. - * - * @argument capture - * @type Boolean - * @default true - */ - get capture() { - return this.args.capture ?? true; - } - - /** - * If true, the component tries to prevent scroll when a menu is open - * - * @argument preventScroll - * @type Boolean - * @default false - */ - get preventScroll() { - return this.args.preventScroll ?? true; - } - - /** - * @argument embed - * @type Boolean - * @default false - */ - get embed() { - return this.args.embed ?? false; - } - - get triggerVelocity() { - return this.args.triggerVelocity ?? 0.3; - } - - /** - * The currently active menu component. - * - * @property activeMenu - * @type MobileMenu - * @default null - * @private - */ - get activeMenu() { - if (this.isFastBoot && !this.children.length && this._activeMenu) { - return this._activeMenu; - } - - if (this.leftMenu && this.position > 0) { - return this.leftMenu; - } else if (this.rightMenu && this.position < 0) { - return this.rightMenu; - } else { - return null; - } - } - - get isOpen() { - return !!this.activeMenu?.state.open; - } - - get isNotClosed() { - return this.activeMenu && !this.activeMenu.state.closed; - } - - get mode() { - return this.activeMenu?.mode; - } - - get contentShadowEnabled() { - return ( - this.activeMenu?.shadowEnabled && - ['reveal', 'ios', 'squeeze-reveal'].includes(this.mode) - ); - } - - get requiresUpdatedPosition() { - return this.mode !== 'default'; - } - - @action - registerChild(component) { - assert( - 'component was already registered as a child', - !this.children.has(component), - ); - - this.children.add(component); - } - - @action - unregisterChild(component) { - this.children.delete(component); - } - - get childMenus() { - return [...this.children].filter((view) => view instanceof MobileMenu); - } - - get leftMenu() { - return this.childMenus.find((menu) => menu.isLeft); - } - - get rightMenu() { - return this.childMenus.find((menu) => menu.isRight); - } - - get preventBodyScroll() { - return ( - this.preventScroll && - !this.embed && - this.isNotClosed && - this.activeMenu?.maskEnabled - ); - } - - get relativePosition() { - return this.activeMenu - ? Math.abs(this.position) / this.activeMenu._width - : 0; - } - - @action - toggle(target) { - let targetMenu = this.leftMenu; - - if (target === 'right') { - targetMenu = this.rightMenu; - } else if (target === 'left') { - targetMenu = this.leftMenu; - } else if (this.rightMenu && !this.leftMenu) { - targetMenu = this.rightMenu; - } - - if (targetMenu) { - this.close(); - if (this.activeMenu !== targetMenu) { - this.open(targetMenu); - } - } - } - - @action - updatePosition(pan) { - const { - initial: { x: initialX }, - current: { distanceX }, - } = pan; - - let distance = distanceX + this.fromPosition; - if (this.dragging && this.fromOpen) { - const menu = this.fromMenu; - - // default menu dx correction - if (this.mode === 'default') { - if (menu.isLeft && initialX > menu._width) { - this.defaultMenuDx = initialX - menu._width; - if (initialX + distanceX > menu._width) { - return; - } - } else if ( - menu.isRight && - initialX < this.boundingClientRect.width - menu._width - ) { - this.defaultMenuDx = - initialX - (this.boundingClientRect.width - menu._width); - if ( - initialX + distanceX < - this.boundingClientRect.width - menu._width - ) { - return; - } - } else { - this.defaultMenuDx = 0; - } - - distance += this.defaultMenuDx; - } - - if (menu.isLeft) { - this.position = Math.min(Math.max(distance, 0), menu._width); - } else { - this.position = Math.max(Math.min(distance, 0), -1 * menu._width); - } - } else if ( - this.dragging && - ((this.leftMenu && distance > 0) || (this.rightMenu && distance < 0)) - ) { - const menu = distance > 0 ? this.leftMenu : this.rightMenu; - this.position = - Math.min(Math.max(Math.abs(distance), 0), menu._width) * - (distance > 0 ? 1 : -1); - } else if (this.position !== 0) { - this.position = 0; - } - } - - @action - didPanStart(e) { - if (this.finishTransitionTask.isRunning) { - this.finishTransitionTask.cancelAll(); - this.preservedVelocity = 0; - } - - // don't conflict with iOS browser's drag to go back/forward functionality - if ( - this._isIOSbrowser && - (e.initial.x < 15 || e.initial.x > this._windowWidth - 15) - ) { - return; - } - - const fromOpen = this.isOpen; - const pan = normalizeCoordinates(e, this.boundingClientRect); - - if ( - fromOpen || - this.openDetectionWidth < 0 || - (this.leftMenu && pan.initial.x <= this.openDetectionWidth) || - (this.rightMenu && - pan.initial.x >= - this.boundingClientRect.width - this.openDetectionWidth) - ) { - this.fromOpen = fromOpen; - this.fromMenu = this.activeMenu; - this.fromPosition = this.position; - this.dragging = true; - this.updatePosition(pan); - } - } - - @action - didPan(e) { - if (this.dragging) { - this.updatePosition(normalizeCoordinates(e, this.boundingClientRect)); - } - } - - @action - didPanEnd(e) { - if (this.dragging) { - this.dragging = false; - const pan = normalizeCoordinates(e, this.boundingClientRect); - const menu = this.activeMenu; - - if (menu) { - const { - current: { distanceX, velocityX }, - } = pan; - - const isLeft = menu.isLeft; - const width = menu._width; - - const condition = - (isLeft && !this.fromOpen) || (this.fromOpen && !isLeft); - const vx = condition ? velocityX : -velocityX; - let dx = condition ? distanceX : -distanceX; - - // default menu dx correction - if (this.fromOpen && this.mode === 'default') { - if (isLeft) { - dx -= this.defaultMenuDx; - } else { - dx += this.defaultMenuDx; - } - } - - // the pan action is over, cleanup and set the correct final menu position - if (!this.fromOpen) { - if (vx > this.triggerVelocity || dx > width / 2) { - this.open(menu, velocityX); - } else { - this.close(menu, velocityX); - } - } else { - if ( - this.mode === 'default' - ? (vx > this.triggerVelocity && dx > 0) || dx > width / 2 - : vx > this.triggerVelocity || dx > width / 2 - ) { - this.close(menu, velocityX); - } else { - this.open(menu, velocityX); - } - } - } - } - } - - @task({ restartable: true }) - @waitFor - *finishTransitionTask( - menu, - targetPosition = 'open', - currentVelocity = 0, - animate = true, - ) { - const fromValue = this.position; - const toValue = - targetPosition === 'close' ? 0 : (menu.isLeft ? 1 : -1) * menu._width; - - if (fromValue !== toValue && animate) { - const spring = new Spring((s) => (this.position = s.currentValue), { - stiffness: 1000, - mass: 3, - damping: 500, - overshootClamping: true, - - fromValue, - toValue, - initialVelocity: this.preservedVelocity || currentVelocity, - }); - - try { - yield spring.start(); - } finally { - spring.stop(); - this.preservedVelocity = spring.currentVelocity; - } - } else { - this.position = toValue; - this.preservedVelocity = 0; - } - } - - @action - open(menu = this.activeMenu, currentVelocity, animate) { - this.finishTransitionTask.perform(menu, 'open', currentVelocity, animate); - } - - @action - close(menu = this.activeMenu, currentVelocity, animate) { - this.finishTransitionTask.perform(menu, 'close', currentVelocity, animate); - } - - @action - onInsert(element) { - this.boundingClientRect = element.getBoundingClientRect(); - } - - @action - onResize({ target }) { - this.boundingClientRect = target.getBoundingClientRect(); - } - - /** - * Detect if the user is using the app from a browser on iOS - * - * @method _isIOSbrowser - * @return {Boolean} Returns true when the user is using iOS and is inside a browser - * @private - */ - get _isIOSbrowser() { - return isIOSDevice && !window.navigator.standalone; - } - - get _windowWidth() { - return window.innerWidth; - } -} diff --git a/addon/addon/components/mobile-menu-wrapper/content.hbs b/addon/addon/components/mobile-menu-wrapper/content.hbs deleted file mode 100644 index 60dff87c..00000000 --- a/addon/addon/components/mobile-menu-wrapper/content.hbs +++ /dev/null @@ -1,21 +0,0 @@ -
- {{yield}} - - {{#if this.mask}} - - {{/if}} -
\ No newline at end of file diff --git a/addon/addon/components/mobile-menu-wrapper/content.js b/addon/addon/components/mobile-menu-wrapper/content.js deleted file mode 100644 index 172d341d..00000000 --- a/addon/addon/components/mobile-menu-wrapper/content.js +++ /dev/null @@ -1,41 +0,0 @@ -import Component from '@glimmer/component'; -import { htmlSafe } from '@ember/template'; - -const MODES = new Map([ - ['default', () => ''], - ['push', (p) => `transform: translateX(${p}px);`], - ['reveal', (p) => `transform: translateX(${p}px);`], - ['ios', (p) => `transform: translateX(${p}px);`], - ['squeeze', (p, side) => `margin-${side}: ${Math.abs(p)}px;`], - ['squeeze-reveal', (p, side) => `margin-${side}: ${Math.abs(p)}px;`], -]); - -/** - * @class ContentComponent - * @private - */ -export default class ContentComponent extends Component { - /** - * @argument mode - * @type string - * @protected - */ - get mode() { - return this.args.mode ?? 'default'; - } - - get style() { - let styles = ''; - if (this.args.position > 0) { - styles = MODES.get(this.mode)(this.args.position, 'left'); - } else if (this.args.position < 0) { - styles = MODES.get(this.mode)(this.args.position, 'right'); - } - - return htmlSafe(styles); - } - - get mask() { - return ['reveal', 'ios'].includes(this.mode); - } -} diff --git a/addon/addon/components/mobile-menu.hbs b/addon/addon/components/mobile-menu.hbs deleted file mode 100644 index b15a020e..00000000 --- a/addon/addon/components/mobile-menu.hbs +++ /dev/null @@ -1,54 +0,0 @@ -{{#if this.renderMenu}} -
- {{#if this.maskEnabled}} - - {{/if}} - - - {{yield - (hash - LinkTo=(component "mobile-menu/link-to" onClick=this.closeFromLinkTo) - actions=(hash - open=this.open - close=this.close - ) - ) - }} - -
-{{/if}} \ No newline at end of file diff --git a/addon/addon/components/mobile-menu.js b/addon/addon/components/mobile-menu.js deleted file mode 100644 index d4ca53e7..00000000 --- a/addon/addon/components/mobile-menu.js +++ /dev/null @@ -1,315 +0,0 @@ -import Component from '@glimmer/component'; -import { action } from '@ember/object'; -import { assert } from '@ember/debug'; -import { htmlSafe } from '@ember/template'; -import { use, Resource } from 'ember-could-get-used-to-this'; -import { next } from '@ember/runloop'; - -const _fn = function () {}; -class StateResource extends Resource { - open = false; - closed = true; - dragging = false; - transitioning = false; - - get value() { - return { - open: this.open, - closed: this.closed, - dragging: this.dragging, - transitioning: this.transitioning, - }; - } - - setup() { - this.setState(...this.args.positional); - } - - update() { - this.setState(...this.args.positional); - } - - teardown() {} - - setState(position, isDragging, width, onToggle) { - this.dragging = position !== 0 && isDragging; - let open = !this.dragging && Math.abs(position) === width; - let closed = !this.dragging && position === 0; - this.maybeToggle(open, closed, onToggle); - this.transitioning = !this.dragging && !this.open && !this.closed; - } - - maybeToggle(open, closed, onToggle) { - if (this.open !== open) { - this.open = open; - if (open) { - next(() => onToggle(true)); - } - } else if (this.closed !== closed) { - this.closed = closed; - if (closed) { - next(() => onToggle(false)); - } - } - } -} - -/** - * Menu component - * - * @class MobileMenu - * @public - */ -export default class MobileMenu extends Component { - @use state = new StateResource(() => [ - this.position, - this.args.isDragging, - this._width, - this.onToggle, - ]); - - /** - * The type of menu. Currently 'left' and 'right' are supported. - * - * @argument type - * @type String - * @default 'left' - */ - get type() { - return this.args.type ?? 'left'; - } - - /** - * Sets the mode of the menu. Currently 'default', 'push', 'ios', 'reveal', 'squeeze' and 'squeeze-reveal' are supported. - * - * @argument mode - * @type string - * @default 'default' - */ - get mode() { - return this.args.mode ?? 'default'; - } - - /** - * The percentage of the screen the menu will take when opened. - * - * @argument width - * @type Number [0-100] - * @default 85 - */ - get width() { - return this.args.width ?? 85; - } - - /** - * The maximum width of the menu in pixels. Set to -1 to disable; - * - * @argument maxWidth - * @type Number - * @default 300 - */ - get maxWidth() { - return this.args.maxWidth ?? 300; - } - - /** - * Whether or not a mask is added when the menu is opened. - * - * @argument maskEnabled - * @type Boolean - * @default true - */ - get maskEnabled() { - return this.args.maskEnabled ?? true; - } - - /** - * Whether or not a shadow is added to the menu. - * - * @argument shadowEnabled - * @type Boolean - * @default true - */ - get shadowEnabled() { - return this.args.shadowEnabled ?? true; - } - - /** - * The default swipe velocity needed to fully open the menu. - * - * @argument triggerVelocity - * @type Number - * @default 0.3 - */ - get triggerVelocity() { - return this.args.triggerVelocity ?? 0.3; - } - - /** - * @argument isOpen - * @type boolean - * @default false - */ - - /** - * Hook which is called after the transition with the new menu isOpen state. - * - * @argument onToggle - * @type Function - */ - get onToggle() { - return this.args.onToggle ?? _fn; - } - - /** - * @argument embed - * @type boolean - * @default false - * @protected - */ - get embed() { - return this.args.embed ?? false; - } - - /** - * Hook fired when the menu is opened. You can pass in an action. The menu instance will be passed to the action. - * - * @argument onOpen - * @type Function - * @protected - */ - get onOpen() { - return this.args.onOpen ?? _fn; - } - - /** - * Hook fired when the menu is closed. You can pass in an action. The menu instance will be passed to the action. - * - * @argument onClose - * @type Action - * @protected - */ - get onClose() { - return this.args.onClose ?? _fn; - } - - /** - * @argument position - * @type number - * @protected - */ - get position() { - return (this.isLeft && this.args.position > 0) || - (this.isRight && this.args.position < 0) - ? this.args.position - : 0; - } - - /** - * @argument isDragging - * @type boolean - * @protected - */ - - constructor() { - super(...arguments); - - assert( - 'register function argument not passed. You should not be using directly.', - typeof this.args.register === 'function', - ); - assert( - 'unregister function argument not passed. You should not be using directly.', - typeof this.args.unregister === 'function', - ); - - if (this.args.parent?.isFastBoot && this.args.isOpen) { - this.args.parent._activeMenu = this; - this.open(false); - } - } - - willDestroy() { - this.args.unregister(this); - super.willDestroy(...arguments); - } - - get renderMenu() { - return this.args.parent?.isFastBoot || this.args.parentBoundingClientRect; - } - - get classNames() { - let classes = `mobile-menu mobile-menu--${this.mode}`; - if (this.isLeft) classes += ' mobile-menu--left'; - if (this.isRight) classes += ' mobile-menu--right'; - if (this.state.dragging) classes += ' mobile-menu--dragging'; - if (this.state.open) classes += ' mobile-menu--open'; - if (this.state.transitioning) classes += ' mobile-menu--transitioning'; - return classes; - } - - get isLeft() { - return this.type === 'left'; - } - - get isRight() { - return this.type === 'right'; - } - - get relativePosition() { - return Math.abs(this.position) / this._width; - } - - get invertOpacity() { - return ['ios', 'reveal', 'squeeze-reveal'].includes(this.args.mode); - } - - /** - * Current menu width in px - * - * @property _width - * @return {Boolean} - * @private - */ - get _width() { - const width = this.args.parentBoundingClientRect - ? (this.width / 100) * this.args.parentBoundingClientRect.width - : this.maxWidth; - - return this.maxWidth === -1 ? width : Math.min(width, this.maxWidth); - } - - get style() { - let styles = ''; - if (!this.maskEnabled && this.state.open) { - styles = `width: ${this._width}px;`; - } - return htmlSafe(styles); - } - - @action - open(animate) { - this.onOpen(this, 0, animate); - } - - @action - close(animate) { - this.onClose(this, 0, animate); - } - - @action - openOrClose(open, animate = true) { - if (open) { - this.open(animate); - } else { - this.close(animate); - } - } - - @action - closeFromLinkTo() { - if (!['squeeze', 'squeeze-reveal'].includes(this.mode)) { - this.close(); - } - } -} diff --git a/addon/addon/components/mobile-menu/link-to.js b/addon/addon/components/mobile-menu/link-to.js deleted file mode 100644 index 09ffc8f9..00000000 --- a/addon/addon/components/mobile-menu/link-to.js +++ /dev/null @@ -1,29 +0,0 @@ -/* eslint-disable ember/no-classic-classes, ember/no-component-lifecycle-hooks */ -import { LinkComponent } from '@ember/legacy-built-in-components'; - -/** - * An extended LinkTo component which provides an onClick hook. - * - * @class LinkTo - * @public - */ -export default LinkComponent.extend({ - didReceiveAttrs() { - this._super(...arguments); - - this.set('current-when', this.qualifiedRouteName); - }, - - /** - * Hook called when the link is clicked. - * - * @argument onClick - * @type function - * @default function(){} - */ - onClick() {}, - - click() { - this.onClick(); - }, -}); diff --git a/addon/addon/components/mobile-menu/mask.hbs b/addon/addon/components/mobile-menu/mask.hbs deleted file mode 100644 index 526b128b..00000000 --- a/addon/addon/components/mobile-menu/mask.hbs +++ /dev/null @@ -1,15 +0,0 @@ - \ No newline at end of file diff --git a/addon/addon/components/mobile-menu/mask.js b/addon/addon/components/mobile-menu/mask.js deleted file mode 100644 index 249b735e..00000000 --- a/addon/addon/components/mobile-menu/mask.js +++ /dev/null @@ -1,90 +0,0 @@ -import Component from '@glimmer/component'; -import { htmlSafe } from '@ember/template'; - -const _fn = () => {}; - -/** - * A mask component. - * - * You usually do not need to use this component yourself. Whether or not a mask is present can be set by passing an - * argument to the MobileMenu component. - * - * @class Mask - * @private - */ -export default class MaskComponent extends Component { - /** - * Offset (or "deadzone") used when calculating what opacity the mask should - * currently be. - * - * Example: the default value is 0.1. This means the mask will only become - * visible after the position is over 10% of the screen width. - * - * @argument maskOpacityOffset - * @type number - * @default 0.1 - */ - get maskOpacityOffset() { - return this.args.maskOpacityOffset ?? 0.1; - } - - /** - * @argument invertOpacity - * @type boolean - * @default undefined - * @protected - */ - - /** - * @argument isOpen - * @type boolean - * @default false - * @protected - */ - get isOpen() { - return this.args.isOpen ?? false; - } - - /** - * @argument position - * @type number - * @default 0 - * @protected - */ - get position() { - return this.args.position ?? 0; - } - - /** - * @argument onClick - * @type function - * @default function(){} - * @protected - */ - get onClick() { - return this.args.onClick ?? _fn; - } - - get style() { - let style = ''; - - style += - !this.isOpen && this.position === 0 - ? 'visibility: hidden;' - : 'visibility: visible;'; - - let opacity = - this.position > this.maskOpacityOffset - ? (this.position - this.maskOpacityOffset) / - (1 - this.maskOpacityOffset) - : 0; - - if (this.args.invertOpacity) { - opacity = 1 - opacity; - } - - style += `opacity: ${opacity};`; - - return htmlSafe(style); - } -} diff --git a/addon/addon/components/mobile-menu/tray.hbs b/addon/addon/components/mobile-menu/tray.hbs deleted file mode 100644 index 9cb0984c..00000000 --- a/addon/addon/components/mobile-menu/tray.hbs +++ /dev/null @@ -1,16 +0,0 @@ -
- {{yield}} -
\ No newline at end of file diff --git a/addon/addon/components/mobile-menu/tray.js b/addon/addon/components/mobile-menu/tray.js deleted file mode 100644 index a28b59e1..00000000 --- a/addon/addon/components/mobile-menu/tray.js +++ /dev/null @@ -1,94 +0,0 @@ -import Component from '@glimmer/component'; -import { htmlSafe } from '@ember/template'; -import { action } from '@ember/object'; -import { disableBodyScroll, enableBodyScroll } from 'body-scroll-lock'; - -/** - * The tray that resides within the menu. Menu content is placed in here. - * - * You usually do not need to use this component yourself. - * - * @class Tray - * @private - * @hide - */ -export default class TrayComponent extends Component { - /** - * Width of the menu in px. - * - * @property width - * @type Number - * @default 300 - * @private - */ - get width() { - return this.args.width ?? 300; - } - - /** - * Whether the menu is a left menu (otherwise it's a right menu) - * - * @property isLeft - * @type Boolean - * @default true - * @private - */ - get isLeft() { - return this.args.isLeft ?? true; - } - - /** - * Current relative position of the menu in px. - * - * @property position - * @type Number - * @default 0 - * @private - */ - get position() { - return this.args.position ?? 0; - } - - get progress() { - return Math.abs(this.position) / this.width; - } - - get style() { - let style = `width: ${this.width}px;`; - - let offset = this.width; - let translation = this.position; - if (this.args.mode === 'ios') { - offset /= 3; - translation /= 3; - } else if (['reveal', 'squeeze-reveal'].includes(this.args.mode)) { - offset = 0; - translation = 0; - } - - style += this.isLeft - ? `left: -${offset}px; transform: translateX(${translation}px);` - : `right: -${offset}px; transform: translateX(${translation}px);`; - - if ( - this.args.shadowEnabled && - ['default', 'push', 'squeeze'].includes(this.args.mode) && - this.progress > 0 - ) { - style += `box-shadow: 0 0 10px rgba(0,0,0,${0.3 * this.progress});`; - } - - return htmlSafe(style); - } - - @action - toggleBodyScroll(target, [isClosed]) { - if (this.args.preventScroll && !this.args.embed) { - if (isClosed) { - enableBodyScroll(target); - } else { - disableBodyScroll(target); - } - } - } -} diff --git a/addon/addon/spring.js b/addon/addon/spring.js deleted file mode 100644 index f25e64dd..00000000 --- a/addon/addon/spring.js +++ /dev/null @@ -1,61 +0,0 @@ -import { Spring as Wobble } from 'wobble'; - -/** - * A thin wrapper around the `wobble` package which provides spring physics (damped harmonic oscillator). - * - * @class Spring - * @private - */ -export default class Spring { - spring; - - /** - * @method constructor - * @param {function} callback Called whenever the spring updates - * @param {object} options See: https://github.com/skevy/wobble#api - */ - constructor(callback = () => {}, options = {}) { - const { onStop = () => {}, ..._options } = options; - - const config = { - stiffness: 100, - damping: 10, - mass: 1, - restVelocityThreshold: 0.01, - restDisplacementThreshold: 0.01, - ..._options, - }; - - this.spring = new Wobble(config); - this.spring.onUpdate(callback); - this.spring.onStop(() => { - this.promise.resolve(); - onStop(); - }); - } - - start() { - this.promise = null; - - return new Promise((resolve) => { - this.promise = { resolve }; - - const { fromValue, toValue, initialVelocity } = this.spring._config; - - // This is the same check as is done in wobble itself. It's needed to ensure our promise always resolves. - if (fromValue !== toValue || initialVelocity !== 0) { - this.spring.start(); - } else { - this.promise.resolve(); - } - }); - } - - stop() { - this.spring.stop(); - } - - get currentVelocity() { - return this.spring.currentVelocity; - } -} diff --git a/addon/addon/utils/normalize-coordinates.js b/addon/addon/utils/normalize-coordinates.js deleted file mode 100644 index 8beae240..00000000 --- a/addon/addon/utils/normalize-coordinates.js +++ /dev/null @@ -1,24 +0,0 @@ -/** - * Normalizes coordinates in the passed TouchData to the BoundingClientRect of the passed element - * - * @function normalizeCoordinates - * @param e {Object} TouchData as generated by ember-mobile-core - * @param bcr {DOMRect} The DOMRect of the element to which the coordinates need to be normalized. - * @return {Object} Returns a TouchData object - * @private - */ -export default function normalizeCoordinates(e, bcr) { - return { - ...e, - initial: { - ...e.initial, - x: e.initial.x - bcr.x, - y: e.initial.x - bcr.x, - }, - current: { - ...e.current, - x: e.current.x - bcr.x, - y: e.current.x - bcr.x, - }, - }; -} diff --git a/addon/app/.gitkeep b/addon/app/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/addon/app/components/mobile-menu-toggle.js b/addon/app/components/mobile-menu-toggle.js deleted file mode 100644 index 9bc727cc..00000000 --- a/addon/app/components/mobile-menu-toggle.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-mobile-menu/components/mobile-menu-toggle'; diff --git a/addon/app/components/mobile-menu-wrapper.js b/addon/app/components/mobile-menu-wrapper.js deleted file mode 100644 index 007989de..00000000 --- a/addon/app/components/mobile-menu-wrapper.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-mobile-menu/components/mobile-menu-wrapper'; diff --git a/addon/app/components/mobile-menu-wrapper/content.js b/addon/app/components/mobile-menu-wrapper/content.js deleted file mode 100644 index f16ec7f8..00000000 --- a/addon/app/components/mobile-menu-wrapper/content.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-mobile-menu/components/mobile-menu-wrapper/content'; diff --git a/addon/app/components/mobile-menu.js b/addon/app/components/mobile-menu.js deleted file mode 100644 index 12f2ae04..00000000 --- a/addon/app/components/mobile-menu.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-mobile-menu/components/mobile-menu'; diff --git a/addon/app/components/mobile-menu/link-to.js b/addon/app/components/mobile-menu/link-to.js deleted file mode 100644 index 431712bc..00000000 --- a/addon/app/components/mobile-menu/link-to.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-mobile-menu/components/mobile-menu/link-to'; diff --git a/addon/app/components/mobile-menu/mask.js b/addon/app/components/mobile-menu/mask.js deleted file mode 100644 index 324c2a40..00000000 --- a/addon/app/components/mobile-menu/mask.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-mobile-menu/components/mobile-menu/mask'; diff --git a/addon/app/components/mobile-menu/tray.js b/addon/app/components/mobile-menu/tray.js deleted file mode 100644 index f444fabd..00000000 --- a/addon/app/components/mobile-menu/tray.js +++ /dev/null @@ -1 +0,0 @@ -export { default } from 'ember-mobile-menu/components/mobile-menu/tray'; diff --git a/addon/app/styles/ember-mobile-menu.scss b/addon/app/styles/ember-mobile-menu.scss deleted file mode 100644 index af0830b5..00000000 --- a/addon/app/styles/ember-mobile-menu.scss +++ /dev/null @@ -1,159 +0,0 @@ -@import "ember-mobile-menu/variables"; - -// global ------------------------------------------------------------------- // -body.mobile-menu--prevent-scroll { - overflow: hidden; -} - -// toggler ------------------------------------------------------------------ // -.mobile-menu__toggle { - cursor: pointer; -} - -// pan recognizer ----------------------------------------------------------- // -.mobile-menu-wrapper { - overflow: hidden; - width: $mobile-menu-wrapper-width; - min-height: $mobile-menu-wrapper-min-height; - /* Avoid Chrome to see Safari hack */ - @supports (-webkit-touch-callout: none) { - /* The hack for Safari */ - min-height: -webkit-fill-available; - } - - &--embedded { - position: relative; - min-height: 100%; - min-width: 100%; - overflow: hidden; - - .mobile-menu-wrapper__content { - min-height: 100%; - } - } - - &__content { - min-height: $mobile-menu-wrapper-min-height; - position: relative; - background: #FFF; - will-change: transform, margin-left, margin-right; // TODO: optimize per mode - z-index: 1; - touch-action: pan-y; - - &--shadow { - box-shadow: 0 0 10px rgba(0,0,0,0.3); - } - - &--ios, &--reveal, &--squeeze-reveal { - z-index: 2; - } - } -} - -// mobile menu -------------------------------------------------------------- // -.mobile-menu { - position: fixed; - top: 0; - width: 0; - - .mobile-menu__tray { - position: absolute; - top: 0; - - height: $mobile-menu-height; - /* Avoid Chrome to see Safari hack */ - @supports (-webkit-touch-callout: none) { - /* The hack for Safari */ - height: -webkit-fill-available; - } - - overflow-y: auto; - touch-action: pan-y; - - background: #FFF; - - will-change: transform; - } - - &.mobile-menu--left { - left: 0; - } - &.mobile-menu--right { - right: 0; - } - - &__mask { - position: absolute; - top: 0; - left: 0; - - border: none; - border-radius: 0; - margin: 0; - padding: 0; - - width: 100vw; - height: 100vh; - /* Avoid Chrome to see Safari hack */ - @supports (-webkit-touch-callout: none) { - /* The hack for Safari */ - height: -webkit-fill-available; - } - - background: rgba(0,0,0,0.3); - opacity: 0; - transition: none; - touch-action: pan-y; - - will-change: opacity; - visibility: hidden; - outline: none; - -webkit-tap-highlight-color: transparent; - } - - // mode specific modifications ------------------------------------------- // - &--default { - z-index: $mobile-menu-z-index; - } - - &--squeeze, &--push { - z-index: 2; - } - - &--ios, &--reveal, &--squeeze-reveal { - display: none; - z-index: -1; - - &.mobile-menu--dragging, - &.mobile-menu--transitioning, - &.mobile-menu--open { - display: block; - z-index: unset; - } - - .mobile-menu__mask { - z-index: 1; - } - - &.mobile-menu--open .mobile-menu__mask { - display: none; - } - } -} - -.mobile-menu-wrapper--embedded .mobile-menu { - position: absolute; - - &__mask, - &.mobile-menu--open, - &.mobile-menu--transitioning, - &.mobile-menu--dragging { - width: 100%; - } - - &, - &__mask, - .mobile-menu__tray { - height: 100%; - } -} diff --git a/addon/app/styles/ember-mobile-menu/themes/android.scss b/addon/app/styles/ember-mobile-menu/themes/android.scss deleted file mode 100644 index 6c80176f..00000000 --- a/addon/app/styles/ember-mobile-menu/themes/android.scss +++ /dev/null @@ -1,51 +0,0 @@ -@import "../variables"; - -.mobile-menu__tray { - .mobile-menu__header { - min-height: 150px; - background: $mobile-menu-header-bg; - color: #FFF; - margin-bottom: 8px; - - .header__text { - padding: 16px; - } - - .header__btn { - padding: 16px; - color: #FFF; - text-decoration: none; - } - } - - .mobile-menu__nav { - list-style: none; - padding: 0; - margin: 0; - - .mobile-menu__nav-item a { - display: block; - font-size: 12px; - font-weight: bold; - color: $mobile-menu-item-color; - line-height: 1.5; - text-decoration: none!important; - - padding: 12px; - - &.mobile-menu__nav-link.disabled { - color: $mobile-menu-item-link-disabled-color; - } - - &.active { - background: $mobile-menu-item-active-bg; - } - } - - .mobile-menu__nav-divider { - margin: 8px 0; - height: 0; - border-bottom: 1px solid $mobile-menu-item-active-bg; - } - } -} diff --git a/addon/app/styles/ember-mobile-menu/variables.scss b/addon/app/styles/ember-mobile-menu/variables.scss deleted file mode 100644 index 6e4e1d4d..00000000 --- a/addon/app/styles/ember-mobile-menu/variables.scss +++ /dev/null @@ -1,16 +0,0 @@ -// variables ---------------------------------------------------------------- // -$mobile-menu-wrapper-width: 100% !default; -$mobile-menu-wrapper-min-height: 100vh !default; - -$mobile-menu-transition-duration: 0.3s !default; -$mobile-menu-height: 100vh !default; -$mobile-menu-z-index: 2000 !default; - -// themes ------------------------------------------------------------------- // - -// - android ---------------------------------------------------------------- // -$mobile-menu-header-bg: #E04E39 !default; - -$mobile-menu-item-color: #333 !default; -$mobile-menu-item-active-bg: #EEE !default; -$mobile-menu-item-link-disabled-color: #6c757d !default; diff --git a/addon/blueprints/ember-mobile-menu/index.js b/addon/blueprints/ember-mobile-menu/index.js deleted file mode 100644 index 29102c5e..00000000 --- a/addon/blueprints/ember-mobile-menu/index.js +++ /dev/null @@ -1,35 +0,0 @@ -/* eslint-env node */ - -const path = require('path'); -const fs = require('fs'); - -module.exports = { - description: 'Adds style imports for the ember-mobile-menu addon.', - - normalizeEntityName() { - // this prevents an error when the entityName is - // not specified (since that doesn't actually matter - // to us - }, - - afterInstall() { - let dependencies = this.project.dependencies(); - let importStatement = '\n@import "ember-mobile-menu";\n'; - - if ('ember-cli-sass' in dependencies) { - let stylePath = path.join('app', 'styles'); - let file = path.join(stylePath, `app.scss`); - - if (!fs.existsSync(stylePath)) { - fs.mkdirSync(stylePath); - } - if (fs.existsSync(file)) { - this.ui.writeLine(`Added import statement to ${file}`); - return this.insertIntoFile(file, importStatement, {}); - } else { - fs.writeFileSync(file, importStatement); - this.ui.writeLine(`Created ${file}`); - } - } - }, -}; diff --git a/addon/compile-css.js b/addon/compile-css.js deleted file mode 100644 index e823c0b5..00000000 --- a/addon/compile-css.js +++ /dev/null @@ -1,21 +0,0 @@ -'use strict'; - -const sass = require('sass'); // eslint-disable-line node/no-unpublished-require -const fs = require('fs'); -const path = require('path'); - -const inputFile = path.join( - __dirname, - 'app', - 'styles', - 'ember-mobile-menu.scss', -); -const outputFile = path.join(__dirname, 'vendor', 'ember-mobile-menu.css'); - -// Compile main file -var result = sass.renderSync({ - data: fs.readFileSync(inputFile, 'utf8'), - includePaths: ['app/styles'], -}); - -fs.writeFileSync(outputFile, result.css); diff --git a/addon/config/environment.js b/addon/config/environment.js deleted file mode 100644 index 331ab30d..00000000 --- a/addon/config/environment.js +++ /dev/null @@ -1,5 +0,0 @@ -'use strict'; - -module.exports = function (/* environment, appConfig */) { - return {}; -}; diff --git a/addon/index.js b/addon/index.js deleted file mode 100644 index 200d6a9c..00000000 --- a/addon/index.js +++ /dev/null @@ -1,24 +0,0 @@ -'use strict'; - -module.exports = { - name: require('./package').name, - - included() { - let app = this._findHost(); - if (!app.__emberMobileMenuIncludedInvoked) { - app.__emberMobileMenuIncludedInvoked = true; - - this._super.included.apply(this, arguments); - - let hasSass = !!( - app.registry.availablePlugins?.['ember-cli-sass'] || - app.registry.registry?.css?.find((i) => i.name === 'ember-cli-sass') - ); - - // Don't include the precompiled css file if the user uses a supported CSS preprocessor - if (!hasSass) { - app.import('vendor/ember-mobile-menu.css'); - } - } - }, -}; diff --git a/addon/package.json b/addon/package.json deleted file mode 100644 index df52fd65..00000000 --- a/addon/package.json +++ /dev/null @@ -1,78 +0,0 @@ -{ - "name": "ember-mobile-menu", - "version": "4.0.0", - "description": "A draggable sidebar menu for Ember.", - "keywords": [ - "ember-addon", - "mobile", - "menu", - "sidebar", - "hamburger-menu" - ], - "repository": { - "type": "git", - "url": "https://github.com/nickschot/ember-mobile-menu" - }, - "license": "MIT", - "author": "Nick Schot ", - "directories": { - "doc": "doc", - "test": "tests" - }, - "scripts": { - "lint": "npm-run-all --aggregate-output --continue-on-error --parallel \"lint:!(fix)\"", - "lint:fix": "npm-run-all --aggregate-output --continue-on-error --parallel lint:*:fix", - "lint:hbs": "ember-template-lint .", - "lint:hbs:fix": "ember-template-lint . --fix", - "lint:js": "eslint . --cache", - "lint:js:fix": "eslint . --fix", - "prepare": "node ./compile-css.js" - }, - "dependencies": { - "@ember/legacy-built-in-components": "^0.5.0", - "@ember/render-modifiers": "^2.0.0", - "@ember/test-waiters": "^3.0.0", - "@glimmer/component": "^1.0.4", - "@glimmer/tracking": "^1.0.4", - "body-scroll-lock": "^3.0.1", - "ember-auto-import": "^2.2.4", - "ember-cli-babel": "^7.26.11 || ^8.0.0", - "ember-cli-htmlbars": "^6.0.1", - "ember-concurrency": "^2.1.0 || ^3.0.0", - "ember-could-get-used-to-this": "^1.0.0", - "ember-gesture-modifiers": "^5.0.0", - "ember-on-resize-modifier": "^2.0.0", - "ember-set-body-class": "^1.0.1", - "tracked-built-ins": "^3.0.0", - "wobble": "^1.5.1" - }, - "devDependencies": { - "@babel/eslint-parser": "7.23.3", - "ember-source": "5.4.0", - "ember-template-lint": "5.12.0", - "eslint": "8.53.0", - "eslint-config-prettier": "9.0.0", - "eslint-plugin-ember": "11.11.1", - "eslint-plugin-node": "11.1.0", - "eslint-plugin-prettier": "5.0.1", - "eslint-plugin-qunit": "8.0.1", - "npm-run-all": "4.1.5", - "prettier": "3.1.0", - "sass": "1.69.5", - "webpack": "5.89.0" - }, - "peerDependencies": { - "ember-source": ">=4.0.0" - }, - "engines": { - "node": "18.* || >= 20" - }, - "ember": { - "edition": "octane" - }, - "ember-addon": {}, - "homepage": "https://nickschot.github.io/ember-mobile-menu", - "volta": { - "extends": "../package.json" - } -} diff --git a/addon/vendor/.gitkeep b/addon/vendor/.gitkeep deleted file mode 100644 index e69de29b..00000000 diff --git a/package.json b/package.json index 94624786..7debba41 100644 --- a/package.json +++ b/package.json @@ -19,6 +19,7 @@ "start": "concurrently 'npm:start:*' --restart-after 5000 --prefix-colors cyan,white,yellow", "start:addon": "pnpm --filter ember-mobile-menu start --no-watch.clearScreen", "start:test-app": "pnpm --filter test-app start", + "start:docs": "pnpm --filter docs start", "test": "pnpm --filter '*' test", "test:ember": "pnpm --filter '*' test:ember" },