diff --git a/.editorconfig b/.editorconfig
deleted file mode 100644
index c35a0024..00000000
--- a/.editorconfig
+++ /dev/null
@@ -1,19 +0,0 @@
-# EditorConfig helps developers define and maintain consistent
-# coding styles between different editors and IDEs
-# editorconfig.org
-
-root = true
-
-[*]
-end_of_line = lf
-charset = utf-8
-trim_trailing_whitespace = true
-insert_final_newline = true
-indent_style = space
-indent_size = 2
-
-[*.hbs]
-insert_final_newline = false
-
-[*.{diff,md}]
-trim_trailing_whitespace = false
diff --git a/.gitignore b/.gitignore
index 9bab45af..6c88a9e2 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,29 +1,4 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+node_modules
-# 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
+yarn-error.log
+.DS_Store
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 4b5ba4f1..65e55318 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -24,10 +24,10 @@ When running unit tests on components that use ember-modal-dialog, modals will b
attached to the `#ember-testing` div.
-## Running the Dummy Application
+## Running the Test Apps
-* `ember serve`
-* Visit the dummy application at [http://localhost:4200](http://localhost:4200).
+* `cd test-app && ember serve`
+* Visit the test-app application at [http://localhost:4200](http://localhost:4200).
For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
diff --git a/README.md b/README.md
index e6d11905..9efb107b 100644
--- a/README.md
+++ b/README.md
@@ -8,30 +8,32 @@ Unlike some other modal libraries for Ember, ember-modal-dialog uses solutions l
-- [Live Demo and Test Examples](#live-demo-and-test-examples)
-- [Including In An Ember Application](#including-in-an-ember-application)
-- [Upgrading](#upgrading)
-- [Controller-bound Usage](#controller-bound-usage)
-- [Routable Usage](#routable-usage)
-- [Configurable Properties](#configurable-properties)
- * [modal-dialog](#modal-dialog)
- + [Tethering](#tethering)
- + [Animation](#animation)
- * [Optional Dependencies](#optional-dependencies)
-- [Which Component Should I Use?](#which-component-should-i-use)
-- [Positioning](#positioning)
- + [Caveats](#caveats)
-- [Wormholes](#wormholes)
-- [Configuring the Modal Root Element Id](#configuring-the-modal-root-element-id)
-- [Configuring Styles](#configuring-styles)
-- [Keyboard shortcuts](#keyboard-shortcuts)
-- [iOS](#ios)
-- [Custom Modals](#custom-modals)
-- [Using as a nested addon](#using-as-a-nested-addon)
-- [Dependencies](#dependencies)
-- [Additional Resources](#additional-resources)
-- [Contributing](#contributing)
-- [Credits](#credits)
+- [Ember Modal Dialog  [](http://emberobserver.com/addons/ember-modal-dialog)](#ember-modal-dialog--)
+ - [Table of Contents](#table-of-contents)
+ - [Live Demo and Test Examples](#live-demo-and-test-examples)
+ - [Including In An Ember Application](#including-in-an-ember-application)
+ - [Upgrading](#upgrading)
+ - [Controller-bound Usage](#controller-bound-usage)
+ - [Routable Usage](#routable-usage)
+ - [Configurable Properties](#configurable-properties)
+ - [modal-dialog](#modal-dialog)
+ - [Tethering](#tethering)
+ - [Animation](#animation)
+ - [Optional Dependencies](#optional-dependencies)
+ - [Which Component Should I Use?](#which-component-should-i-use)
+ - [Positioning](#positioning)
+ - [Caveats](#caveats)
+ - [Wormholes](#wormholes)
+ - [Configuring the Modal Root Element Id](#configuring-the-modal-root-element-id)
+ - [Configuring Styles](#configuring-styles)
+ - [Keyboard shortcuts](#keyboard-shortcuts)
+ - [iOS](#ios)
+ - [Custom Modals](#custom-modals)
+ - [Using as a nested addon](#using-as-a-nested-addon)
+ - [Dependencies](#dependencies)
+ - [Additional Resources](#additional-resources)
+ - [Contributing](#contributing)
+ - [Credits](#credits)
@@ -39,7 +41,7 @@ Unlike some other modal libraries for Ember, ember-modal-dialog uses solutions l
View a live demo here: [http://yapplabs.github.io/ember-modal-dialog/](http://yapplabs.github.io/ember-modal-dialog/)
-Test examples are located in `tests/dummy/app/templates/application.hbs` and can be run locally by following the instructions in the "Installation" and "Running" sections below.
+Test examples are located in `test-app/app/templates/application.hbs` and can be run locally by following the instructions in the "Installation" and "Running" sections below.
[](https://vimeo.com/157192323)
@@ -68,7 +70,7 @@ If you’re using SASS then just import the CSS slightly differently
```
**application.hbs**
-```htmlbars
+```hbs
{{#modal-dialog}}
Oh hai there!
{{/modal-dialog}}
@@ -88,17 +90,17 @@ Here is a more useful example of how to conditionally display a modal based on a
**Template**
-```htmlbars
-
+```hbs
+
-{{#if isShowingModal}}
- {{#modal-dialog
- onClose=(action "toggleModal")
- targetAttachment="center"
- translucentOverlay=true
- }}
+{{#if this.isShowingModal}}
+
Oh hai there!
- {{/modal-dialog}}
+
{{/if}}
```
@@ -106,24 +108,23 @@ Here is a more useful example of how to conditionally display a modal based on a
```javascript
import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
-export default Controller.extend({
- isShowingModal: false,
- actions: {
- toggleModal() {
- this.toggleProperty('isShowingModal');
- }
+export default class extends Controller {
+ @tracked isShowingModal = false;
+ @action toggleModal() {
+ this.isShowingModal = !this.isShowingModal;
}
-});
+}
```
## Routable Usage
-To have a modal open for a specific route, just drop the `{{modal-dialog}}` into that route's template. Don't forget to have an `{{outlet}}` on the parent route.
+To have a modal open for a specific route, just drop the `` into that route's template. Don't forget to have an `{{outlet}}` on the parent route.
## Configurable Properties
-### modal-dialog
+### <ModalDialog>
The modal-dialog component supports the following properties:
@@ -171,7 +172,7 @@ Property | Purpose
This component supports animation when certain addons are present (liquid-wormhole, liquid-tether).
-Detection is be automatic. To opt out of using animatable features when you have these `liquid-*` addons installed, pass `animatable=false`.
+Detection is be automatic. To opt out of using animatable features when you have these `liquid-*` addons installed, pass `animatable={{false}}`.
When in an animatable scenario, you may also pass the following properties, which are passed through to liquid-wormhole or liquid-tether:
@@ -191,17 +192,17 @@ Dependency | Documentation
## Which Component Should I Use?
-Various modal use cases are best supported by different DOM structures. Ember Modal Dialog's `modal-dialog` component provides the following capabilities:
+Various modal use cases are best supported by different DOM structures. Ember Modal Dialog's `ModalDialog` component provides the following capabilities:
-- modal-dialog without passing a `tetherTarget`: Uses ember-wormhole to append the following parent divs to the destination element: wrapper div > overlay div > container div
+- ModalDialog without passing a `tetherTarget`: Uses ember-wormhole to append the following parent divs to the destination element: wrapper div > overlay div > container div
- 
+ 
This can be customized (see `overlayPosition`).
- modal-dialog, with a `tetherTarget` provided: Uses ember-tether to display modal container div. Uses ember-wormhole to append optional overlay div to the destination element. Requires separate installation of [ember-tether](//github.com/yapplabs/ember-tether) dependency.
- 
+ 
## Positioning
@@ -217,14 +218,14 @@ To enable this behavior, install ember-tether as a dependency of **your ember ap
Then pass a selector as `tetherTarget` for the modal you wish to position this way:
-```htmlbars
-{{#modal-dialog
- tetherTarget='#target-element-id'
- targetAttachment='middle right'
- attachment='middle left'
-}}
+```hbs
+
I am a modal that will remain tethered to the right of the element with id 'target-element-id'
-{{/modal-dialog}}
+
```
#### Caveats
@@ -354,13 +355,13 @@ export default ModalDialog.extend({
});
```
-By subclassing `modal-dialog` your component will use the default modal dialog template. Therefore, you do not need to create a `app/templates/components/full-screen-modal.hbs` file.
+By subclassing `ModalDialog` your component will use the default modal dialog template. Therefore, you do not need to create a `app/templates/components/full-screen-modal.hbs` file.
Your component can then be used like so:
-```htmlbars
-{{#full-screen-modal}}
+```hbs
+
Custom modal contents
-{{/full-screen-modal}}
+
```
## Using as a nested addon
diff --git a/addon/.eslintignore b/addon/.eslintignore
new file mode 100644
index 00000000..b0aa7750
--- /dev/null
+++ b/addon/.eslintignore
@@ -0,0 +1,11 @@
+# compiled output
+/dist/
+
+# dependencies
+/node_modules/
+
+# misc
+/coverage/
+!.*
+.*/
+.eslintcache
\ No newline at end of file
diff --git a/addon/.gitignore b/addon/.gitignore
new file mode 100644
index 00000000..8642e969
--- /dev/null
+++ b/addon/.gitignore
@@ -0,0 +1,27 @@
+# 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
+/package.json.ember-try
+/yarn.lock.ember-try
diff --git a/.prettierignore b/addon/.prettierignore
similarity index 93%
rename from .prettierignore
rename to addon/.prettierignore
index 4178fd57..35854123 100644
--- a/.prettierignore
+++ b/addon/.prettierignore
@@ -22,4 +22,4 @@
/npm-shrinkwrap.json.ember-try
/package.json.ember-try
/package-lock.json.ember-try
-/yarn.lock.ember-try
+/yarn.lock.ember-try
\ No newline at end of file
diff --git a/.prettierrc.js b/addon/.prettierrc.js
similarity index 100%
rename from .prettierrc.js
rename to addon/.prettierrc.js
diff --git a/.template-lintrc.js b/addon/.template-lintrc.js
similarity index 100%
rename from .template-lintrc.js
rename to addon/.template-lintrc.js
diff --git a/addon/addon-main.js b/addon/addon-main.js
new file mode 100644
index 00000000..3cde686e
--- /dev/null
+++ b/addon/addon-main.js
@@ -0,0 +1,3 @@
+const { addonV1Shim } = require('@embroider/addon-shim');
+
+module.exports = addonV1Shim(__dirname);
diff --git a/app/instance-initializers/add-modals-container.js b/addon/app/instance-initializers/add-modals-container.js
similarity index 100%
rename from app/instance-initializers/add-modals-container.js
rename to addon/app/instance-initializers/add-modals-container.js
diff --git a/app/styles/ember-modal-dialog/ember-modal-appearance.css b/addon/app/styles/ember-modal-dialog/ember-modal-appearance.css
similarity index 100%
rename from app/styles/ember-modal-dialog/ember-modal-appearance.css
rename to addon/app/styles/ember-modal-dialog/ember-modal-appearance.css
diff --git a/app/styles/ember-modal-dialog/ember-modal-structure.css b/addon/app/styles/ember-modal-dialog/ember-modal-structure.css
similarity index 100%
rename from app/styles/ember-modal-dialog/ember-modal-structure.css
rename to addon/app/styles/ember-modal-dialog/ember-modal-structure.css
diff --git a/addon/babel.config.json b/addon/babel.config.json
new file mode 100644
index 00000000..47975004
--- /dev/null
+++ b/addon/babel.config.json
@@ -0,0 +1,7 @@
+{
+ "plugins": [
+ "@embroider/addon-dev/template-colocation-plugin",
+ ["@babel/plugin-proposal-decorators", { "legacy": true }],
+ "@babel/plugin-proposal-class-properties"
+ ]
+}
\ No newline at end of file
diff --git a/addon/config/environment.js b/addon/config/environment.js
new file mode 100644
index 00000000..18aeb6e4
--- /dev/null
+++ b/addon/config/environment.js
@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = function (environment) {};
diff --git a/index.js b/addon/index.js
similarity index 100%
rename from index.js
rename to addon/index.js
diff --git a/addon/package.json b/addon/package.json
new file mode 100644
index 00000000..946c5a16
--- /dev/null
+++ b/addon/package.json
@@ -0,0 +1,134 @@
+{
+ "name": "ember-modal-dialog",
+ "version": "4.0.1",
+ "description": "An ember-cli addon for implementing modal dialogs",
+ "keywords": [
+ "ember-addon"
+ ],
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/yapplabs/ember-modal-dialog.git",
+ "directory": "addon"
+ },
+ "license": "MIT",
+ "author": "Yapp Labs and friends",
+ "exports": {
+ ".": "./dist/index.js",
+ "./*": "./dist/*",
+ "./addon-main.js": "./addon-main.js"
+ },
+ "files": [
+ "addon-main.js",
+ "dist"
+ ],
+ "scripts": {
+ "build": "rollup --config",
+ "lint": "eslint . --cache",
+ "lint:fix": "eslint . --fix",
+ "lint:js": "eslint . --cache",
+ "lint:js:fix": "eslint . --fix",
+ "prepublishOnly": "rollup --config",
+ "start": "rollup --config --watch"
+ },
+ "dependencies": {
+ "@embroider/addon-shim": "^1.5.0",
+ "@embroider/macros": "^1.0.0",
+ "@embroider/util": "^1.0.0",
+ "ember-cli-babel": "^7.26.8",
+ "ember-cli-htmlbars": "^6.0.1",
+ "ember-decorators": "^6.1.1",
+ "ember-wormhole": "^0.6.0"
+ },
+ "devDependencies": {
+ "@babel/core": "^7.17.7",
+ "@babel/eslint-parser": "^7.17.0",
+ "@babel/plugin-proposal-class-properties": "^7.16.7",
+ "@babel/plugin-proposal-decorators": "^7.17.2",
+ "@embroider/addon-dev": "^1.5.0",
+ "@rollup/plugin-babel": "^5.3.1",
+ "ember-template-lint": "^4.3.0",
+ "eslint": "^8.11.0",
+ "eslint-config-prettier": "^8.5.0",
+ "eslint-plugin-ember": "^10.5.9",
+ "eslint-plugin-node": "^11.1.0",
+ "eslint-plugin-prettier": "^4.0.0",
+ "eslint-plugin-qunit": "^7.2.0",
+ "prettier": "^2.6.0",
+ "rollup": "^2.70.1"
+ },
+ "peerDependencies": {
+ "@ember/test-helpers": "^2.6.0",
+ "ember-tether": "^2.0.1",
+ "liquid-fire": "^0.34.0",
+ "liquid-tether": "pzuraq/liquid-tether#7c140024787c3c1b266e89a2ef528eaea898c78e",
+ "liquid-wormhole": "pzuraq/liquid-wormhole#efa7e5ca518de7c1d6c52666b70bbc0671fcf380"
+ },
+ "peerDependenciesMeta": {
+ "@ember/test-helpers": {
+ "optional": true
+ },
+ "ember-tether": {
+ "optional": true
+ },
+ "liquid-fire": {
+ "optional": true
+ },
+ "liquid-tether": {
+ "optional": true
+ },
+ "liquid-wormhole": {
+ "optional": true
+ }
+ },
+ "resolutions": {
+ "**/@embroider/macros": "^1.0.0",
+ "**/@embroider/util": "^1.0.0"
+ },
+ "engines": {
+ "node": "12.* || 14.* || >= 16"
+ },
+ "publishConfig": {
+ "registry": "https://registry.npmjs.org"
+ },
+ "ember": {
+ "edition": "octane"
+ },
+ "ember-addon": {
+ "demoURL": "https://yapplabs.github.io/ember-modal-dialog/",
+ "main": "addon-main.js",
+ "type": "addon",
+ "version": 2,
+ "versionCompatibility": {
+ "ember": "3.8 || 3.12 || 3.16 || 3.20 || 3.24 || 3.28 || >=4.0"
+ },
+ "app-js": {
+ "./components/basic-dialog/index.js": "./dist/_app_/components/basic-dialog/index.js",
+ "./components/ember-modal-dialog-positioned-container/index.js": "./dist/_app_/components/ember-modal-dialog-positioned-container/index.js",
+ "./components/in-place-dialog/index.js": "./dist/_app_/components/in-place-dialog/index.js",
+ "./components/liquid-dialog/index.js": "./dist/_app_/components/liquid-dialog/index.js",
+ "./components/liquid-tether-dialog/index.js": "./dist/_app_/components/liquid-tether-dialog/index.js",
+ "./components/modal-dialog/index.js": "./dist/_app_/components/modal-dialog/index.js",
+ "./components/tether-dialog/index.js": "./dist/_app_/components/tether-dialog/index.js",
+ "./helpers/ignore-children.js": "./dist/_app_/helpers/ignore-children.js",
+ "./services/modal-dialog.js": "./dist/_app_/services/modal-dialog.js"
+ }
+ },
+ "release-it": {
+ "plugins": {
+ "release-it-lerna-changelog": {
+ "infile": "CHANGELOG.md",
+ "launchEditor": false
+ }
+ },
+ "git": {
+ "tagName": "v${version}"
+ },
+ "github": {
+ "release": true,
+ "tokenRef": "GITHUB_AUTH"
+ }
+ },
+ "volta": {
+ "extends": "../package.json"
+ }
+}
diff --git a/addon/rollup.config.js b/addon/rollup.config.js
new file mode 100644
index 00000000..80356d38
--- /dev/null
+++ b/addon/rollup.config.js
@@ -0,0 +1,60 @@
+import babel from '@rollup/plugin-babel';
+import { Addon } from '@embroider/addon-dev/rollup';
+
+const addon = new Addon({
+ srcDir: 'src',
+ destDir: 'dist',
+});
+
+export default {
+ // This provides defaults that work well alongside `publicEntrypoints` below.
+ // You can augment this if you need to.
+ output: addon.output(),
+
+ plugins: [
+ // These are the modules that users should be able to import from your
+ // addon. Anything not listed here may get optimized away.
+ addon.publicEntrypoints([
+ 'components/**/*.js',
+ 'decorators/**/*.js',
+ 'helpers/**/*.js',
+ 'services/**/*.js',
+ 'utils/**/*.js',
+ 'index.js',
+ ]),
+
+ // These are the modules that should get reexported into the traditional
+ // "app" tree. Things in here should also be in publicEntrypoints above, but
+ // not everything in publicEntrypoints necessarily needs to go here.
+ addon.appReexports([
+ 'components/**/*.js',
+ 'helpers/**/*.js',
+ 'services/**/*.js',
+ ]),
+
+ // This babel config should *not* apply presets or compile away ES modules.
+ // It exists only to provide development niceties for you, like automatic
+ // template colocation.
+ //
+ // By default, this will load the actual babel config from the file
+ // babel.config.json.
+ babel({
+ babelHelpers: 'bundled',
+ }),
+
+ // Follow the V2 Addon rules about dependencies. Your code can import from
+ // `dependencies` and `peerDependencies` as well as standard Ember-provided
+ // package names.
+ addon.dependencies(),
+
+ // Ensure that standalone .hbs files are properly integrated as Javascript.
+ addon.hbs(),
+
+ // addons are allowed to contain imports of .css files, which we want rollup
+ // to leave alone and keep in the published output.
+ addon.keepAssets(['**/*.css']),
+
+ // Remove leftover build artifacts when starting a new build.
+ addon.clean(),
+ ],
+};
diff --git a/addon/templates/components/basic-dialog.hbs b/addon/src/components/basic-dialog/index.hbs
similarity index 100%
rename from addon/templates/components/basic-dialog.hbs
rename to addon/src/components/basic-dialog/index.hbs
diff --git a/addon/components/basic-dialog.js b/addon/src/components/basic-dialog/index.js
similarity index 96%
rename from addon/components/basic-dialog.js
rename to addon/src/components/basic-dialog/index.js
index af975aec..e52ac814 100644
--- a/addon/components/basic-dialog.js
+++ b/addon/src/components/basic-dialog/index.js
@@ -1,13 +1,11 @@
-import { tagName, layout as templateLayout } from '@ember-decorators/component';
+import { tagName } from '@ember-decorators/component';
import { computed, set } from '@ember/object';
import { inject as service } from '@ember/service';
import Component from '@ember/component';
import { isEmpty } from '@ember/utils';
-import layout from '../templates/components/basic-dialog';
import { dasherize } from '@ember/string';
@tagName('')
-@templateLayout(layout)
export default class BasicDialog extends Component {
containerClassNames = null;
overlayClassNames = null;
diff --git a/addon/components/positioned-container.js b/addon/src/components/ember-modal-dialog-positioned-container/index.js
similarity index 100%
rename from addon/components/positioned-container.js
rename to addon/src/components/ember-modal-dialog-positioned-container/index.js
diff --git a/addon/templates/components/in-place-dialog.hbs b/addon/src/components/in-place-dialog/index.hbs
similarity index 100%
rename from addon/templates/components/in-place-dialog.hbs
rename to addon/src/components/in-place-dialog/index.hbs
diff --git a/addon/components/in-place-dialog.js b/addon/src/components/in-place-dialog/index.js
similarity index 76%
rename from addon/components/in-place-dialog.js
rename to addon/src/components/in-place-dialog/index.js
index ee43edd4..58ece24d 100644
--- a/addon/components/in-place-dialog.js
+++ b/addon/src/components/in-place-dialog/index.js
@@ -1,9 +1,7 @@
-import { tagName, layout as templateLayout } from '@ember-decorators/component';
+import { tagName } from '@ember-decorators/component';
import Component from '@ember/component';
-import layout from '../templates/components/in-place-dialog';
@tagName('')
-@templateLayout(layout)
export default class InPlaceDialog extends Component {
containerClass = null; // passed in
diff --git a/addon/templates/components/liquid-dialog.hbs b/addon/src/components/liquid-dialog/index.hbs
similarity index 100%
rename from addon/templates/components/liquid-dialog.hbs
rename to addon/src/components/liquid-dialog/index.hbs
diff --git a/addon/components/liquid-dialog.js b/addon/src/components/liquid-dialog/index.js
similarity index 52%
rename from addon/components/liquid-dialog.js
rename to addon/src/components/liquid-dialog/index.js
index b25b86e9..12608bea 100644
--- a/addon/components/liquid-dialog.js
+++ b/addon/src/components/liquid-dialog/index.js
@@ -1,8 +1,5 @@
-import { layout as templateLayout } from '@ember-decorators/component';
-import BasicDialog from './basic-dialog';
-import layout from '../templates/components/liquid-dialog';
+import BasicDialog from '../basic-dialog/index';
-@templateLayout(layout)
export default class LiquidDialog extends BasicDialog {
hasOverlay = true;
variantWrapperClass = 'emd-animatable';
diff --git a/addon/templates/components/liquid-tether-dialog.hbs b/addon/src/components/liquid-tether-dialog/index.hbs
similarity index 100%
rename from addon/templates/components/liquid-tether-dialog.hbs
rename to addon/src/components/liquid-tether-dialog/index.hbs
diff --git a/addon/components/liquid-tether-dialog.js b/addon/src/components/liquid-tether-dialog/index.js
similarity index 86%
rename from addon/components/liquid-tether-dialog.js
rename to addon/src/components/liquid-tether-dialog/index.js
index 502abe84..43504881 100644
--- a/addon/components/liquid-tether-dialog.js
+++ b/addon/src/components/liquid-tether-dialog/index.js
@@ -1,11 +1,8 @@
/* eslint-disable ember/no-computed-properties-in-native-classes */
-import { layout as templateLayout } from '@ember-decorators/component';
import { computed, set } from '@ember/object';
import { dasherize } from '@ember/string';
-import BasicDialog from './basic-dialog';
-import layout from '../templates/components/liquid-tether-dialog';
+import BasicDialog from '../basic-dialog/index';
-@templateLayout(layout)
export default class LiquidTetherDialog extends BasicDialog {
@computed('targetAttachment')
get targetAttachmentClass() {
diff --git a/addon/templates/components/modal-dialog.hbs b/addon/src/components/modal-dialog/index.hbs
similarity index 100%
rename from addon/templates/components/modal-dialog.hbs
rename to addon/src/components/modal-dialog/index.hbs
diff --git a/addon/components/modal-dialog.js b/addon/src/components/modal-dialog/index.js
similarity index 96%
rename from addon/components/modal-dialog.js
rename to addon/src/components/modal-dialog/index.js
index 7d0ef80d..193d8238 100644
--- a/addon/components/modal-dialog.js
+++ b/addon/src/components/modal-dialog/index.js
@@ -1,11 +1,10 @@
-import { tagName, layout as templateLayout } from '@ember-decorators/component';
+import { tagName } from '@ember-decorators/component';
import { action, computed, set } from '@ember/object';
import { inject as service } from '@ember/service';
import { readOnly, oneWay } from '@ember/object/computed';
import Component from '@ember/component';
import { dasherize } from '@ember/string';
import { isEmpty, typeOf, isNone } from '@ember/utils';
-import layout from '../templates/components/modal-dialog';
import { assert, warn } from '@ember/debug';
import { DEBUG } from '@glimmer/env';
import { importSync } from '@embroider/macros';
@@ -14,7 +13,6 @@ import { ensureSafeComponent } from '@embroider/util';
const VALID_OVERLAY_POSITIONS = ['parent', 'sibling'];
@tagName('')
-@templateLayout(layout)
export default class ModalDialog extends Component {
@service('modal-dialog')
modalService;
diff --git a/addon/templates/components/tether-dialog.hbs b/addon/src/components/tether-dialog/index.hbs
similarity index 100%
rename from addon/templates/components/tether-dialog.hbs
rename to addon/src/components/tether-dialog/index.hbs
diff --git a/addon/components/tether-dialog.js b/addon/src/components/tether-dialog/index.js
similarity index 87%
rename from addon/components/tether-dialog.js
rename to addon/src/components/tether-dialog/index.js
index 7744e78e..556a824a 100644
--- a/addon/components/tether-dialog.js
+++ b/addon/src/components/tether-dialog/index.js
@@ -1,10 +1,7 @@
-import { layout as templateLayout } from '@ember-decorators/component';
import { computed, set } from '@ember/object';
import { dasherize } from '@ember/string';
-import BasicDialog from './basic-dialog';
-import layout from '../templates/components/tether-dialog';
+import BasicDialog from '../basic-dialog/index';
-@templateLayout(layout)
export default class TetherDialog extends BasicDialog {
init() {
super.init(...arguments);
diff --git a/addon/helpers/ignore-children.js b/addon/src/helpers/ignore-children.js
similarity index 100%
rename from addon/helpers/ignore-children.js
rename to addon/src/helpers/ignore-children.js
diff --git a/addon/instance-initializers/add-modals-container.js b/addon/src/instance-initializers/add-modals-container.js
similarity index 100%
rename from addon/instance-initializers/add-modals-container.js
rename to addon/src/instance-initializers/add-modals-container.js
diff --git a/addon/src/services/modal-dialog.js b/addon/src/services/modal-dialog.js
new file mode 100644
index 00000000..4b325ebe
--- /dev/null
+++ b/addon/src/services/modal-dialog.js
@@ -0,0 +1,26 @@
+import Service from '@ember/service';
+import { getDestinationElementIdFromConfig } from 'ember-modal-dialog/utils/config-utils';
+import { macroCondition, dependencySatisfies } from '@embroider/macros';
+import { getOwner } from '@ember/application';
+
+export default class extends Service {
+ hasEmberTether = false;
+ hasLiquidWormhole = false;
+ hasLiquidTether = false;
+ constructor() {
+ super(...arguments);
+ if (macroCondition(dependencySatisfies('ember-tether', '*'))) {
+ this.hasEmberTether = true;
+ }
+ if (macroCondition(dependencySatisfies('liquid-wormhole', '*'))) {
+ this.hasLiquidWormhole = true;
+ }
+ if (macroCondition(dependencySatisfies('liquid-wormhole', '*'))) {
+ this.hasLiquidTether = true;
+ }
+ }
+ get destinationElementId() {
+ const ENV = getOwner(this).resolveRegistration('config:environment')
+ return getDestinationElementIdFromConfig(ENV);
+ }
+}
diff --git a/addon/utils/config-utils.js b/addon/src/utils/config-utils.js
similarity index 100%
rename from addon/utils/config-utils.js
rename to addon/src/utils/config-utils.js
diff --git a/app/components/ember-modal-dialog-positioned-container.js b/app/components/ember-modal-dialog-positioned-container.js
deleted file mode 100644
index 31a125e0..00000000
--- a/app/components/ember-modal-dialog-positioned-container.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'ember-modal-dialog/components/positioned-container';
diff --git a/app/components/ember-modal-dialog/-basic-dialog.js b/app/components/ember-modal-dialog/-basic-dialog.js
deleted file mode 100644
index 761adce0..00000000
--- a/app/components/ember-modal-dialog/-basic-dialog.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'ember-modal-dialog/components/basic-dialog';
diff --git a/app/components/ember-modal-dialog/-in-place-dialog.js b/app/components/ember-modal-dialog/-in-place-dialog.js
deleted file mode 100644
index bb11e8ef..00000000
--- a/app/components/ember-modal-dialog/-in-place-dialog.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'ember-modal-dialog/components/in-place-dialog';
diff --git a/app/components/ember-modal-dialog/-liquid-dialog.js b/app/components/ember-modal-dialog/-liquid-dialog.js
deleted file mode 100644
index b1e18462..00000000
--- a/app/components/ember-modal-dialog/-liquid-dialog.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'ember-modal-dialog/components/liquid-dialog';
diff --git a/app/components/ember-modal-dialog/-liquid-tether-dialog.js b/app/components/ember-modal-dialog/-liquid-tether-dialog.js
deleted file mode 100644
index 8fa26867..00000000
--- a/app/components/ember-modal-dialog/-liquid-tether-dialog.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'ember-modal-dialog/components/liquid-tether-dialog';
diff --git a/app/components/ember-modal-dialog/-tether-dialog.js b/app/components/ember-modal-dialog/-tether-dialog.js
deleted file mode 100644
index 9e5e401c..00000000
--- a/app/components/ember-modal-dialog/-tether-dialog.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'ember-modal-dialog/components/tether-dialog';
diff --git a/app/components/modal-dialog.js b/app/components/modal-dialog.js
deleted file mode 100644
index b17443d3..00000000
--- a/app/components/modal-dialog.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'ember-modal-dialog/components/modal-dialog';
diff --git a/app/helpers/ignore-children.js b/app/helpers/ignore-children.js
deleted file mode 100644
index 3f2071e9..00000000
--- a/app/helpers/ignore-children.js
+++ /dev/null
@@ -1 +0,0 @@
-export { default } from 'ember-modal-dialog/helpers/ignore-children';
diff --git a/app/services/modal-dialog.js b/app/services/modal-dialog.js
deleted file mode 100644
index d54352a4..00000000
--- a/app/services/modal-dialog.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import { computed } from '@ember/object';
-import Service from '@ember/service';
-import ENV from '../config/environment';
-import { getDestinationElementIdFromConfig } from 'ember-modal-dialog/utils/config-utils';
-
-function computedFromConfig(prop) {
- return computed(function () {
- return ENV['ember-modal-dialog'] && ENV['ember-modal-dialog'][prop];
- });
-}
-
-export default Service.extend({
- hasEmberTether: computedFromConfig('hasEmberTether'),
- hasLiquidWormhole: computedFromConfig('hasLiquidWormhole'),
- hasLiquidTether: computedFromConfig('hasLiquidTether'),
- destinationElementId: computed(function () {
- return getDestinationElementIdFromConfig(ENV);
- }),
-});
diff --git a/config/environment.js b/config/environment.js
deleted file mode 100644
index ded8ad8e..00000000
--- a/config/environment.js
+++ /dev/null
@@ -1,18 +0,0 @@
-'use strict';
-
-var VersionChecker = require('ember-cli-version-checker');
-
-module.exports = function (environment, appConfig, addon) {
- appConfig['ember-modal-dialog'] = appConfig['ember-modal-dialog'] || {};
-
- var checker = new VersionChecker(addon);
- var hasLiquidWormhole = checker.for('liquid-wormhole', 'npm').version;
- var hasLiquidTether = checker.for('liquid-tether', 'npm').version;
- var hasEmberTether = checker.for('ember-tether', 'npm').version;
-
- appConfig['ember-modal-dialog']['hasLiquidWormhole'] = hasLiquidWormhole;
- appConfig['ember-modal-dialog']['hasLiquidTether'] = hasLiquidTether;
- appConfig['ember-modal-dialog']['hasEmberTether'] = hasEmberTether;
-
- return appConfig;
-};
diff --git a/ember-cli-build.js b/ember-cli-build.js
deleted file mode 100644
index 15bf9e91..00000000
--- a/ember-cli-build.js
+++ /dev/null
@@ -1,25 +0,0 @@
-'use strict';
-
-const EmberAddon = require('ember-cli/lib/broccoli/ember-addon');
-
-module.exports = function (defaults) {
- let app = new EmberAddon(defaults, {
- snippetSearchPaths: ['tests/dummy/app'],
- });
-
- /*
- This build file specifies the options for the dummy test app of this
- addon, located in `/tests/dummy`
- This build file does *not* influence how the addon or the app using it
- behave. You most likely want to be modifying `./index.js` or app's build file
- */
-
- const { maybeEmbroider } = require('@embroider/test-setup');
- return maybeEmbroider(app, {
- skipBabel: [
- {
- package: 'qunit',
- },
- ],
- });
-};
diff --git a/jsconfig.json b/jsconfig.json
new file mode 100644
index 00000000..7e14a498
--- /dev/null
+++ b/jsconfig.json
@@ -0,0 +1,14 @@
+{
+ "compilerOptions": {
+ "target": "es6",
+ "experimentalDecorators": true
+ },
+ "exclude": [
+ "node_modules",
+ "bower_components",
+ "tmp",
+ "vendor",
+ ".git",
+ "dist"
+ ]
+}
\ No newline at end of file
diff --git a/package.json b/package.json
index 0215c582..446b5733 100644
--- a/package.json
+++ b/package.json
@@ -1,120 +1,46 @@
{
- "name": "ember-modal-dialog",
- "version": "4.0.0",
- "description": "An ember-cli addon for implementing modal dialogs",
- "keywords": [
- "ember-addon"
+ "private": true,
+ "version": "4.0.1",
+ "workspaces": [
+ "addon",
+ "test-app"
],
- "repository": "https://github.com/yapplabs/ember-modal-dialog",
- "license": "MIT",
- "author": "Yapp Labs and friends",
- "directories": {
- "doc": "doc",
- "test": "tests"
+ "repository": {
+ "type": "git",
+ "url": "https://github.com/yapplabs/ember-modal-dialog.git"
},
"scripts": {
- "build": "ember build --environment=production",
- "deploy": "ember github-pages:commit --message \"Deploy gh-pages from commit $(git rev-parse HEAD)\"; git push; git checkout -",
- "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": "cd addon && yarn build",
"release": "release-it",
- "start": "ember serve",
- "test": "npm-run-all lint test:*",
- "test:ember": "ember test",
- "test:ember-compatibility": "ember try:each"
- },
- "dependencies": {
- "@embroider/macros": "^1.0.0",
- "@embroider/util": "^1.0.0",
- "ember-cli-babel": "^7.26.8",
- "ember-cli-htmlbars": "^6.0.1",
- "ember-cli-version-checker": "^2.1.0",
- "ember-decorators": "^6.1.1",
- "ember-wormhole": "^0.6.0"
+ "test": "cd test-app && yarn test"
},
"devDependencies": {
- "@ember/jquery": "^2.0.0",
- "@ember/optional-features": "^2.0.0",
- "@ember/test-helpers": "^2.6.0",
- "@embroider/test-setup": "^1.0.0",
- "@glimmer/component": "^1.0.4",
- "@glimmer/tracking": "^1.0.4",
- "babel-eslint": "^10.1.0",
- "broccoli-asset-rev": "^3.0.0",
- "ember-auto-import": "^2.4.0",
- "ember-cli": "~4.0.1",
- "ember-cli-dependency-checker": "^3.2.0",
- "ember-cli-deprecation-workflow": "^2.1.0",
- "ember-cli-github-pages": "^0.2.2",
- "ember-cli-inject-live-reload": "^2.1.0",
- "ember-cli-terser": "^4.0.2",
- "ember-code-snippet": "^2.4.0",
- "ember-disable-prototype-extensions": "^1.1.3",
- "ember-export-application-global": "^2.0.1",
- "ember-load-initializers": "^2.1.2",
- "ember-qunit": "^5.1.5",
- "ember-resolver": "^8.0.3",
- "ember-source": "~3.28.8",
- "ember-source-channel-url": "^3.0.0",
- "ember-template-lint": "^3.15.0",
- "ember-tether": "^2.0.1",
- "ember-truth-helpers": "^3.0.0",
- "ember-try": "^2.0.0",
- "eslint": "^7.32.0",
- "eslint-config-prettier": "^8.3.0",
- "eslint-plugin-ember": "^10.5.8",
- "eslint-plugin-node": "^11.1.0",
- "eslint-plugin-prettier": "^4.0.0",
- "eslint-plugin-qunit": "^7.2.0",
- "liquid-fire": "^0.34.0",
- "liquid-tether": "pzuraq/liquid-tether#7c140024787c3c1b266e89a2ef528eaea898c78e",
- "liquid-wormhole": "pzuraq/liquid-wormhole#efa7e5ca518de7c1d6c52666b70bbc0671fcf380",
- "loader.js": "^4.7.0",
- "npm-run-all": "^4.1.5",
- "prettier": "^2.5.1",
- "qunit": "^2.17.2",
- "qunit-dom": "^2.0.0",
- "release-it": "^13.6.5",
- "release-it-lerna-changelog": "^2.3.0",
- "webpack": "^5.67.0"
- },
- "peerDependencies": {
- "ember-tether": "^2.0.1"
- },
- "peerDependenciesMeta": {
- "ember-tether": {
- "optional": true
- }
- },
- "resolutions": {
- "**/@embroider/macros": "^1.0.0",
- "**/@embroider/util": "^1.0.0"
- },
- "engines": {
- "node": "12.* || 14.* || >= 16"
+ "release-it": "^14.12.5",
+ "release-it-lerna-changelog": "^4.0.1",
+ "release-it-yarn-workspaces": "^2.0.1"
},
"publishConfig": {
"registry": "https://registry.npmjs.org"
},
- "ember": {
- "edition": "octane"
- },
- "ember-addon": {
- "configPath": "tests/dummy/config",
- "demoURL": "http://yapplabs.github.io/ember-modal-dialog/",
- "versionCompatibility": {
- "ember": "~3.20.0 || ~3.24.0 || >= 3.25.0"
- }
- },
"release-it": {
"plugins": {
"release-it-lerna-changelog": {
"infile": "CHANGELOG.md",
- "launchEditor": false
+ "launchEditor": true
+ }
+ },
+ "release-it-yarn-workspaces": {
+ "workspaces": [
+ "addon"
+ ],
+ "additionalManifests": {
+ "dependencyUpdates": [
+ "test-app/package.json"
+ ],
+ "versionUpdates": [
+ "package.json",
+ "test-app/package.json"
+ ]
}
},
"git": {
@@ -123,10 +49,11 @@
"github": {
"release": true,
"tokenRef": "GITHUB_AUTH"
- }
+ },
+ "npm": false
},
"volta": {
"node": "12.22.1",
- "yarn": "1.22.10"
+ "yarn": "1.22.18"
}
-}
+}
\ No newline at end of file
diff --git a/.ember-cli b/test-app/.ember-cli
similarity index 100%
rename from .ember-cli
rename to test-app/.ember-cli
diff --git a/test-app/.eslintignore b/test-app/.eslintignore
new file mode 100644
index 00000000..48d55025
--- /dev/null
+++ b/test-app/.eslintignore
@@ -0,0 +1,23 @@
+# 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
+/package.json.ember-try
+/yarn.lock.ember-try
diff --git a/.eslintrc.js b/test-app/.eslintrc.js
similarity index 54%
rename from .eslintrc.js
rename to test-app/.eslintrc.js
index c5ab0058..e0b7ef5a 100644
--- a/.eslintrc.js
+++ b/test-app/.eslintrc.js
@@ -2,13 +2,17 @@
module.exports = {
root: true,
- parser: 'babel-eslint',
+ parser: '@babel/eslint-parser',
parserOptions: {
- ecmaVersion: 2020,
+ ecmaVersion: 2021,
sourceType: 'module',
ecmaFeatures: {
legacyDecorators: true,
},
+ requireConfigFile: false,
+ babelOptions: {
+ plugins: [['@babel/plugin-proposal-decorators', { legacy: true }]],
+ },
},
plugins: ['ember'],
extends: [
@@ -19,21 +23,7 @@ module.exports = {
env: {
browser: true,
},
- rules: {
- 'no-setter-return': 'off',
- 'ember/classic-decorator-no-classic-methods': 'warn',
- 'ember/classic-decorator-hooks': 'warn',
- 'ember/no-actions-hash': 'warn',
- 'ember/no-classic-classes': 'warn',
- 'ember/no-classic-components': 'warn',
- 'ember/no-component-lifecycle-hooks': 'warn',
- 'ember/no-computed-properties-in-native-classes': 'warn',
- 'ember/no-get': 'warn',
- 'ember/no-observers': 'warn',
- 'ember/require-computed-macros': 'warn',
- 'ember/require-tagless-components': 'warn',
- 'ember/no-jquery': 'error',
- },
+ rules: {},
overrides: [
// node files
{
@@ -42,11 +32,8 @@ module.exports = {
'./.prettierrc.js',
'./.template-lintrc.js',
'./ember-cli-build.js',
- './index.js',
'./testem.js',
- './blueprints/*/index.js',
'./config/**/*.js',
- './tests/dummy/config/**/*.js',
],
parserOptions: {
sourceType: 'script',
@@ -59,7 +46,7 @@ module.exports = {
extends: ['plugin:node/recommended'],
},
{
- // test files
+ // Test files:
files: ['tests/**/*-test.{js,ts}'],
extends: ['plugin:qunit/recommended'],
},
diff --git a/test-app/.gitignore b/test-app/.gitignore
new file mode 100644
index 00000000..9bab45af
--- /dev/null
+++ b/test-app/.gitignore
@@ -0,0 +1,29 @@
+# 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
diff --git a/.npmignore b/test-app/.npmignore
similarity index 87%
rename from .npmignore
rename to test-app/.npmignore
index 3aac2443..2ca54cec 100644
--- a/.npmignore
+++ b/test-app/.npmignore
@@ -19,7 +19,6 @@
/.prettierignore
/.prettierrc.js
/.template-lintrc.js
-/.travis.yml
/.watchmanconfig
/bower.json
/config/ember-try.js
@@ -34,7 +33,9 @@
# 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
+
+# custom
+/jsconfig.json
+/RELEASE.md
diff --git a/.eslintignore b/test-app/.prettierignore
similarity index 90%
rename from .eslintignore
rename to test-app/.prettierignore
index d474a40b..35854123 100644
--- a/.eslintignore
+++ b/test-app/.prettierignore
@@ -13,8 +13,8 @@
# misc
/coverage/
!.*
-.*/
.eslintcache
+.lint-todo/
# ember-try
/.node_modules.ember-try/
@@ -22,4 +22,4 @@
/npm-shrinkwrap.json.ember-try
/package.json.ember-try
/package-lock.json.ember-try
-/yarn.lock.ember-try
+/yarn.lock.ember-try
\ No newline at end of file
diff --git a/test-app/.prettierrc.js b/test-app/.prettierrc.js
new file mode 100644
index 00000000..534e6d35
--- /dev/null
+++ b/test-app/.prettierrc.js
@@ -0,0 +1,5 @@
+'use strict';
+
+module.exports = {
+ singleQuote: true,
+};
diff --git a/test-app/.template-lintrc.js b/test-app/.template-lintrc.js
new file mode 100644
index 00000000..db6664a2
--- /dev/null
+++ b/test-app/.template-lintrc.js
@@ -0,0 +1,10 @@
+'use strict';
+
+module.exports = {
+ extends: 'recommended',
+ rules: {
+ 'no-action': false,
+ 'no-curly-component-invocation': false,
+ 'require-button-type': false,
+ },
+};
diff --git a/.watchmanconfig b/test-app/.watchmanconfig
similarity index 94%
rename from .watchmanconfig
rename to test-app/.watchmanconfig
index e7834e3e..477b5785 100644
--- a/.watchmanconfig
+++ b/test-app/.watchmanconfig
@@ -1,3 +1,3 @@
{
"ignore_dirs": ["tmp", "dist"]
-}
+}
\ No newline at end of file
diff --git a/tests/dummy/app/app.js b/test-app/app/app.js
similarity index 87%
rename from tests/dummy/app/app.js
rename to test-app/app/app.js
index 523bad60..1ba93424 100644
--- a/tests/dummy/app/app.js
+++ b/test-app/app/app.js
@@ -1,7 +1,7 @@
import Application from '@ember/application';
import Resolver from 'ember-resolver';
import loadInitializers from 'ember-load-initializers';
-import config from 'dummy/config/environment';
+import config from 'test-app/config/environment';
export default class App extends Application {
modulePrefix = config.modulePrefix;
diff --git a/tests/dummy/app/components/component-that-uses-modal-dialog.js b/test-app/app/components/component-that-uses-modal-dialog.js
similarity index 77%
rename from tests/dummy/app/components/component-that-uses-modal-dialog.js
rename to test-app/app/components/component-that-uses-modal-dialog.js
index 65daa6fe..e89e94a9 100644
--- a/tests/dummy/app/components/component-that-uses-modal-dialog.js
+++ b/test-app/app/components/component-that-uses-modal-dialog.js
@@ -1,3 +1,5 @@
+/* eslint-disable ember/require-tagless-components */
+/* eslint-disable ember/no-classic-components */
import Component from '@ember/component';
import { action, set } from '@ember/object';
diff --git a/tests/dummy/app/components/my-cool-modal-dialog-two.js b/test-app/app/components/my-cool-modal-dialog-two.js
similarity index 100%
rename from tests/dummy/app/components/my-cool-modal-dialog-two.js
rename to test-app/app/components/my-cool-modal-dialog-two.js
diff --git a/tests/dummy/app/components/my-cool-modal-dialog.js b/test-app/app/components/my-cool-modal-dialog.js
similarity index 100%
rename from tests/dummy/app/components/my-cool-modal-dialog.js
rename to test-app/app/components/my-cool-modal-dialog.js
diff --git a/tests/dummy/app/controllers/animatable.js b/test-app/app/controllers/animatable.js
similarity index 56%
rename from tests/dummy/app/controllers/animatable.js
rename to test-app/app/controllers/animatable.js
index 4eb1c9b5..632c4341 100644
--- a/tests/dummy/app/controllers/animatable.js
+++ b/test-app/app/controllers/animatable.js
@@ -1,16 +1,17 @@
import Controller from '@ember/controller';
import { set, action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
export default class AnimatableController extends Controller {
- isShowingBasic = false;
- isShowingTranslucent = false;
- isShowingTranslucentWithCallback = false;
- isShowingWithoutOverlay = false;
- isShowingWithoutOverlayClickOutsideToClose = false;
- isShowingWithoutOverlayClickOutsideToCloseAnotherOne = false;
- isShowingSubclassed = false;
- isShowingCenteredScrolling = false;
- isShowingElementCenterModal = false;
+ @tracked isShowingBasic = false;
+ @tracked isShowingTranslucent = false;
+ @tracked isShowingTranslucentWithCallback = false;
+ @tracked isShowingWithoutOverlay = false;
+ @tracked isShowingWithoutOverlayClickOutsideToClose = false;
+ @tracked isShowingWithoutOverlayClickOutsideToCloseAnotherOne = false;
+ @tracked isShowingSubclassed = false;
+ @tracked isShowingCenteredScrolling = false;
+ @tracked isShowingElementCenterModal = false;
nextAttachment(val) {
switch (val) {
@@ -37,42 +38,45 @@ export default class AnimatableController extends Controller {
@action
toggleBasic() {
- this.toggleProperty('isShowingBasic');
+ this.isShowingBasic = !this.isShowingBasic;
}
@action
toggleTranslucent() {
- this.toggleProperty('isShowingTranslucent');
+ this.isShowingTranslucent = !this.isShowingTranslucent;
}
@action
toggleTranslucentWithCallback() {
- this.toggleProperty('isShowingTranslucentWithCallback');
+ this.isShowingTranslucentWithCallback =
+ !this.isShowingTranslucentWithCallback;
}
@action
toggleWithoutOverlay() {
- this.toggleProperty('isShowingWithoutOverlay');
+ this.isShowingWithoutOverlay = !this.isShowingWithoutOverlay;
}
@action
toggleWithoutOverlayClickOutsideToClose() {
- this.toggleProperty('isShowingWithoutOverlayClickOutsideToClose');
+ this.isShowingWithoutOverlayClickOutsideToClose =
+ !this.isShowingWithoutOverlayClickOutsideToClose;
}
@action
toggleWithoutOverlayClickOutsideToCloseAnotherOne() {
- this.toggleProperty('isShowingWithoutOverlayClickOutsideToCloseAnotherOne');
+ this.isShowingWithoutOverlayClickOutsideToCloseAnotherOne =
+ !this.isShowingWithoutOverlayClickOutsideToCloseAnotherOne;
}
@action
toggleSubclassed() {
- this.toggleProperty('isShowingSubclassed');
+ this.isShowingSubclassed = !this.isShowingSubclassed;
}
@action
toggleCenteredScrolling() {
- this.toggleProperty('isShowingCenteredScrolling');
+ this.isShowingCenteredScrolling = !this.isShowingCenteredScrolling;
if (this.isShowingCenteredScrolling) {
document.querySelector('#modal-overlays').classList.add('active');
diff --git a/tests/dummy/app/controllers/index.js b/test-app/app/controllers/index.js
similarity index 50%
rename from tests/dummy/app/controllers/index.js
rename to test-app/app/controllers/index.js
index c462e772..42a98df2 100644
--- a/tests/dummy/app/controllers/index.js
+++ b/test-app/app/controllers/index.js
@@ -1,24 +1,25 @@
-import { action, set } from '@ember/object';
+import { action } from '@ember/object';
import Controller from '@ember/controller';
+import { tracked } from '@glimmer/tracking';
export default class IndexController extends Controller {
- isShowingBasic = false;
- isShowingTranslucent = false;
- isShowingTranslucentWithCallback = false;
- isShowingWithoutOverlay = false;
- isShowingWithoutOverlayClickOutsideToClose = false;
- isShowingWithoutOverlayClickOutsideToCloseAnotherOne = false;
- isShowingCustomStyles = false;
- isShowingTargetSelector = false;
- isShowingTargetElement = false;
- isShowingSubclassed = false;
- isShowingSubclassed2 = false;
- isShowingInPlace = false;
- isShowingCenteredScrolling = false;
- isShowingElementCenterModal = false;
- exampleTargetAttachment = 'middle left';
- exampleAttachment = 'middle right';
- customContainerClassNames = 'custom-styles-modal-container';
+ @tracked isShowingBasic = false;
+ @tracked isShowingTranslucent = false;
+ @tracked isShowingTranslucentWithCallback = false;
+ @tracked isShowingWithoutOverlay = false;
+ @tracked isShowingWithoutOverlayClickOutsideToClose = false;
+ @tracked isShowingWithoutOverlayClickOutsideToCloseAnotherOne = false;
+ @tracked isShowingCustomStyles = false;
+ @tracked isShowingTargetSelector = false;
+ @tracked isShowingTargetElement = false;
+ @tracked isShowingSubclassed = false;
+ @tracked isShowingSubclassed2 = false;
+ @tracked isShowingInPlace = false;
+ @tracked isShowingCenteredScrolling = false;
+ @tracked isShowingElementCenterModal = false;
+ @tracked exampleTargetAttachment = 'middle left';
+ @tracked exampleAttachment = 'middle right';
+ @tracked customContainerClassNames = 'custom-styles-modal-container';
nextAttachment(val) {
switch (val) {
@@ -41,13 +42,13 @@ export default class IndexController extends Controller {
this.exampleTargetAttachment
);
let newAttachment = this.nextAttachment(this.exampleAttachment);
- set(this, 'exampleTargetAttachment', newTargetAttachment);
- set(this, 'exampleAttachment', newAttachment);
+ this.exampleTargetAttachment = newTargetAttachment;
+ this.exampleAttachment = newAttachment;
if (newTargetAttachment !== 'middle left') {
return;
}
}
- this.toggleProperty('isShowingTargetSelector');
+ this.isShowingTargetSelector = !this.isShowingTargetSelector;
}
@action
@@ -57,18 +58,18 @@ export default class IndexController extends Controller {
this.exampleTargetAttachment
);
let newAttachment = this.nextAttachment(this.exampleAttachment);
- set(this, 'exampleTargetAttachment', newTargetAttachment);
- set(this, 'exampleAttachment', newAttachment);
+ this.exampleTargetAttachment = newTargetAttachment;
+ this.exampleAttachment = newAttachment;
if (newTargetAttachment !== 'middle left') {
return;
}
}
- this.toggleProperty('isShowingTargetElement');
+ this.isShowingTargetElement = !this.isShowingTargetElement;
}
@action
toggleCenteredScrolling() {
- this.toggleProperty('isShowingCenteredScrolling');
+ this.isShowingCenteredScrolling = !this.isShowingCenteredScrolling;
if (this.isShowingCenteredScrolling) {
document.querySelector('#modal-overlays').classList.add('active');
@@ -81,16 +82,16 @@ export default class IndexController extends Controller {
@action
closeTargetSelector() {
- set(this, 'isShowingTargetSelector', false);
- set(this, 'exampleTargetAttachment', 'middle left');
- set(this, 'exampleAttachment', 'middle right');
+ this.isShowingTargetSelector = false;
+ this.exampleTargetAttachment = 'middle left';
+ this.exampleAttachment = 'middle right';
}
@action
closeTargetElement() {
- set(this, 'isShowingTargetElement', false);
- set(this, 'exampleTargetAttachment', 'middle left');
- set(this, 'exampleAttachment', 'middle right');
+ this.isShowingTargetElement = false;
+ this.exampleTargetAttachment = 'middle left';
+ this.exampleAttachment = 'middle right';
}
@action
diff --git a/test-app/app/controllers/tethered-animatable.js b/test-app/app/controllers/tethered-animatable.js
new file mode 100644
index 00000000..514d73b3
--- /dev/null
+++ b/test-app/app/controllers/tethered-animatable.js
@@ -0,0 +1,154 @@
+import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
+
+export default class TetheredAnimatableController extends Controller {
+ @tracked isShowingBasic = false;
+ @tracked isShowingTranslucent = false;
+ @tracked isShowingTranslucentWithCallback = false;
+ @tracked isShowingWithoutOverlay = false;
+ @tracked isShowingWithoutOverlayClickOutsideToClose = false;
+ @tracked isShowingWithoutOverlayClickOutsideToCloseAnotherOne = false;
+ @tracked isShowingTargetSelector = false;
+ @tracked isShowingTargetElement = false;
+ @tracked isShowingSubclassed = false;
+ @tracked isShowingCenteredScrolling = false;
+ @tracked isShowingElementCenterModal = false;
+ @tracked exampleTargetAttachment = 'middle left';
+ @tracked exampleAttachment = 'middle right';
+
+ nextAttachment(val) {
+ switch (val) {
+ case 'middle right':
+ return 'bottom center';
+ case 'bottom center':
+ return 'middle left';
+ case 'middle left':
+ return 'top center';
+ case 'top center':
+ return 'middle right';
+ }
+ return false;
+ }
+
+ @action
+ toggleActiveComponent() {
+ if (this.activeComponent === 'modal-dialog') {
+ this.activeComponent = 'tether-dialog';
+ } else {
+ this.activeComponent = 'modal-dialog';
+ }
+ }
+
+ @action
+ toggleBasic() {
+ this.isShowingBasic = !this.isShowingBasic;
+ }
+
+ @action
+ toggleTranslucent() {
+ this.isShowingTranslucent = !this.isShowingTranslucent;
+ }
+
+ @action
+ toggleTranslucentWithCallback() {
+ this.isShowingTranslucentWithCallback =
+ !this.isShowingTranslucentWithCallback;
+ }
+
+ @action
+ toggleWithoutOverlay() {
+ this.isShowingWithoutOverlay = !this.isShowingWithoutOverlay;
+ }
+
+ @action
+ toggleWithoutOverlayClickOutsideToClose() {
+ this.isShowingWithoutOverlayClickOutsideToClose =
+ !this.isShowingWithoutOverlayClickOutsideToClose;
+ }
+
+ @action
+ toggleWithoutOverlayClickOutsideToCloseAnotherOne() {
+ this.isShowingWithoutOverlayClickOutsideToCloseAnotherOne =
+ !this.isShowingWithoutOverlayClickOutsideToCloseAnotherOne;
+ }
+
+ @action
+ toggleTargetSelector() {
+ if (this.isShowingTargetSelector) {
+ let newTargetAttachment = this.nextAttachment(
+ this.exampleTargetAttachment
+ );
+ let newAttachment = this.nextAttachment(this.exampleAttachment);
+ this.exampleTargetAttachment = newTargetAttachment;
+ this.exampleAttachment = newAttachment;
+ if (newTargetAttachment !== 'middle left') {
+ return;
+ }
+ }
+ this.isShowingTargetSelector = !this.isShowingTargetSelector;
+ }
+
+ @action
+ toggleTargetElement() {
+ if (this.isShowingTargetElement) {
+ let newTargetAttachment = this.nextAttachment(
+ this.exampleTargetAttachment
+ );
+ let newAttachment = this.nextAttachment(this.exampleAttachment);
+ this.exampleTargetAttachment = newTargetAttachment;
+ this.exampleAttachment = newAttachment;
+ if (newTargetAttachment !== 'middle left') {
+ return;
+ }
+ }
+ this.isShowingTargetElement = !this.isShowingTargetElement;
+ }
+
+ @action
+ toggleSubclassed() {
+ this.isShowingSubclassed = !this.isShowingSubclassed;
+ }
+
+ @action
+ toggleCenteredScrolling() {
+ this.isShowingCenteredScrolling = !this.isShowingCenteredScrolling;
+
+ if (this.isShowingCenteredScrolling) {
+ document.querySelector('#modal-overlays').classList.add('active');
+ document.body.classList.add('centered-modal-showing');
+ } else {
+ document.querySelector('#modal-overlays').classList.remove('active');
+ document.body.classList.remove('centered-modal-showing');
+ }
+ }
+
+ @action
+ toggleElementCenterModal() {
+ this.isShowingElementCenterModal = !this.isShowingElementCenterModal;
+ if (this.isShowingElementCenterModal) {
+ this.targetAttachment = 'elementCenter';
+ this.exampleTargetAttachment = 'elementCenter';
+ this.exampleAttachment = 'elementCenter';
+ }
+ }
+
+ @action
+ closeTargetSelector() {
+ this.isShowingTargetSelector = false;
+ this.exampleTargetAttachment = 'middle left';
+ this.exampleAttachment = 'middle right';
+ }
+
+ @action
+ closeTargetElement() {
+ this.isShowingTargetElement = false;
+ this.exampleTargetAttachment = 'middle left';
+ this.exampleAttachment = 'middle right';
+ }
+
+ @action
+ clickedTranslucentOverlay() {
+ window.onClickOverlayCallbackCalled = true;
+ }
+}
diff --git a/tests/dummy/app/controllers/tethered.js b/test-app/app/controllers/tethered.js
similarity index 55%
rename from tests/dummy/app/controllers/tethered.js
rename to test-app/app/controllers/tethered.js
index 548c775a..1e54ce61 100644
--- a/tests/dummy/app/controllers/tethered.js
+++ b/test-app/app/controllers/tethered.js
@@ -1,12 +1,13 @@
-import { action, set } from '@ember/object';
import Controller from '@ember/controller';
+import { action } from '@ember/object';
+import { tracked } from '@glimmer/tracking';
export default class TetheredController extends Controller {
- isShowingTargetSelector = false;
- isShowingTargetElement = false;
- isShowingElementCenterModal = false;
- exampleTargetAttachment = 'middle left';
- exampleAttachment = 'middle right';
+ @tracked isShowingTargetSelector = false;
+ @tracked isShowingTargetElement = false;
+ @tracked isShowingElementCenterModal = false;
+ @tracked exampleTargetAttachment = 'middle left';
+ @tracked exampleAttachment = 'middle right';
nextAttachment(val) {
switch (val) {
@@ -29,13 +30,13 @@ export default class TetheredController extends Controller {
this.exampleTargetAttachment
);
let newAttachment = this.nextAttachment(this.exampleAttachment);
- set(this, 'exampleTargetAttachment', newTargetAttachment);
- set(this, 'exampleAttachment', newAttachment);
+ this.exampleTargetAttachment = newTargetAttachment;
+ this.exampleAttachment = newAttachment;
if (newTargetAttachment !== 'middle left') {
return;
}
}
- this.toggleProperty('isShowingTargetSelector');
+ this.isShowingTargetSelector = !this.isShowingTargetSelector;
}
@action
@@ -45,26 +46,26 @@ export default class TetheredController extends Controller {
this.exampleTargetAttachment
);
let newAttachment = this.nextAttachment(this.exampleAttachment);
- set(this, 'exampleTargetAttachment', newTargetAttachment);
- set(this, 'exampleAttachment', newAttachment);
+ this.exampleTargetAttachment = newTargetAttachment;
+ this.exampleAttachment = newAttachment;
if (newTargetAttachment !== 'middle left') {
return;
}
}
- this.toggleProperty('isShowingTargetElement');
+ this.isShowingTargetElement = !this.isShowingTargetElement;
}
@action
closeTargetSelector() {
- set(this, 'isShowingTargetSelector', false);
- set(this, 'exampleTargetAttachment', 'middle left');
- set(this, 'exampleAttachment', 'middle right');
+ this.isShowingTargetSelector = false;
+ this.exampleTargetAttachment = 'middle left';
+ this.exampleAttachment = 'middle right';
}
@action
closeTargetElement() {
- set(this, 'isShowingTargetElement', false);
- set(this, 'exampleTargetAttachment', 'middle left');
- set(this, 'exampleAttachment', 'middle right');
+ this.isShowingTargetElement = false;
+ this.exampleTargetAttachment = 'middle left';
+ this.exampleAttachment = 'middle right';
}
}
diff --git a/tests/dummy/app/helpers/lorem-ipsum.js b/test-app/app/helpers/lorem-ipsum.js
similarity index 100%
rename from tests/dummy/app/helpers/lorem-ipsum.js
rename to test-app/app/helpers/lorem-ipsum.js
diff --git a/tests/dummy/app/index.html b/test-app/app/index.html
similarity index 89%
rename from tests/dummy/app/index.html
rename to test-app/app/index.html
index 80801d7f..8213c8a3 100644
--- a/tests/dummy/app/index.html
+++ b/test-app/app/index.html
@@ -10,7 +10,7 @@
{{content-for "head"}}
-
+
{{content-for "head-footer"}}
@@ -18,7 +18,7 @@
{{content-for "body"}}
-
+
{{content-for "body-footer"}}
diff --git a/tests/dummy/app/router.js b/test-app/app/router.js
similarity index 85%
rename from tests/dummy/app/router.js
rename to test-app/app/router.js
index f7f2792f..9e4c1a31 100644
--- a/tests/dummy/app/router.js
+++ b/test-app/app/router.js
@@ -1,5 +1,5 @@
import EmberRouter from '@ember/routing/router';
-import config from 'dummy/config/environment';
+import config from 'test-app/config/environment';
export default class Router extends EmberRouter {
location = config.locationType;
diff --git a/tests/dummy/app/styles/_tomorrow-night-eighties.css b/test-app/app/styles/_tomorrow-night-eighties.css
similarity index 100%
rename from tests/dummy/app/styles/_tomorrow-night-eighties.css
rename to test-app/app/styles/_tomorrow-night-eighties.css
diff --git a/tests/dummy/app/styles/app.css b/test-app/app/styles/app.css
similarity index 100%
rename from tests/dummy/app/styles/app.css
rename to test-app/app/styles/app.css
diff --git a/tests/dummy/app/templates/animatable.hbs b/test-app/app/templates/animatable.hbs
similarity index 69%
rename from tests/dummy/app/templates/animatable.hbs
rename to test-app/app/templates/animatable.hbs
index 49b0baa8..3b11e2e1 100644
--- a/tests/dummy/app/templates/animatable.hbs
+++ b/test-app/app/templates/animatable.hbs
@@ -13,14 +13,14 @@