diff --git a/.gitignore b/.gitignore
index 30a36fe..e8468a3 100644
--- a/.gitignore
+++ b/.gitignore
@@ -21,4 +21,9 @@ testem.log
.node_modules.ember-try/
bower.json.ember-try
package.json.ember-try
+
+# npm package-lock.json can get stale because we use yarn; someone might commit a npm installed `package-lock.json`
+package-lock.json
+
+# git time metric
/.gtm/
diff --git a/README.md b/README.md
index 5046f7e..d6d7746 100644
--- a/README.md
+++ b/README.md
@@ -22,6 +22,11 @@ Ember.TextSupport enhancements including a `{{input-text}}` and `{{text-area}}`
[](https://circleci.com/gh/cybertoothca/ember-cli-text-support-mixins)
[](https://circleci.com/gh/cybertoothca/ember-cli-text-support-mixins)
+## Demo & Documentation
+
+The demonstration web application can be found here:
+[https://ember-cli-text-support-mixins.cybertooth.io/](https://ember-cli-text-support-mixins.cybertooth.io/).
+
## Installation
The following command will install this add-on:
@@ -46,177 +51,22 @@ This add-on no longer depends on JQuery.
### Dependencies
-#### `keyevent`
-
-The constants from [`keyevent`](https://github.com/cybertoothca/keyevent) are installed
-by yarn and `ember-cli-node-assets`.
-
-## Demo
-
-The demonstration web application can be found here:
-[http://ember-cli-text-support-mixins.cybertooth.io/](http://ember-cli-text-support-mixins.cybertooth.io/).
-
-## What Does This Add-on Do?
-
-This add-on supplies the following _components_:
-
-* `input-text` - a simple extension of the Ember text component that includes the following mixins:
-`ctrl-enter-submits-form.js` (**disabled** by default), `enter-submits-form.js` (**enabled** by default),
-`escape-key-clears.js` (**enabled** by default), `focus-selects-text.js` (**enabled** by default), and
-`trigger-focus.js` (always on).
-* `text-area` - a simple extension of the Ember text component that includes the following mixins:
-`ctrl-enter-submits-form.js` (**disabled** by default), `escape-key-clears.js` (**enabled** by default),
-`focus-selects-text.js` (**enabled** by default), and `trigger-focus.js` (always on).
-
-Also available are the following _mixins_. You can incorporate their behaviours into your components:
-
-* `ctrl-enter-submits-form.js` - the `CTRL+ENTER` keypress combination will try to submit the nearest form element.
-* `enter-submits-form.js` - pressing `ENTER` in a text input will try to submit the nearest form element.
-* `escape-key-clears.js` - pressing the `ESCAPE` key while focused in a text input or textarea will clear all text.
-* `focus-selects-text.js` - triggers to select the text components text when focus is placed into the input.
-* `trigger-focus.js` - fixes the quirk in Ember where html5 `autofocus` does not work after template re-renders.
-
-_Further information about these items can be found in the Usage section below and in the
-[demo (dummy) application](http://ember-cli-text-support-mixins.cybertooth.io/)._
-
-## Usage
-
-As mentioned above there are several examples on the demonstration site:
-[http://ember-cli-text-support-mixins.cybertooth.io/](http://ember-cli-text-support-mixins.cybertooth.io/)
-
-### Components
-
-#### `{{input-text}}`
-
-Generates a text-type input: `` that includes clear on Escape press,
-submit on Enter, submit on CTRL+Enter, select text when focused and autofocus when the templated is loaded
-(and reloaded).
+#### `ember-cli-element-closest-polyfill`
-##### Arguments
+Polyfill terrible M$ browsers with the `Element.closest()` & `Element.matches()` using
+[`ember-cli-element-closest-polyfill`](https://github.com/miguelcobain/ember-cli-element-closest-polyfill).
-* `afterClearAction` (defaults to `undefined`) - assign a closure function to this property
-to invoke any type of behaviour after clearing the text.
-* `afterCtrlEnterSubmitAction` (defaults to `undefined`) - assign a closure function to this
-property to invoke any type of behaviour after CTRL+ENTER submitting the form.
-* `beforeClearAction` (defaults to `undefined`) - assign a closure function to this property to
-invoke any type of behaviour prior to clearing the text.
-* `beforeCtrlEnterSubmitAction` (defaults to `undefined`) - assign a closure function to this property
-to invoke any type of behaviour prior to CTRL+ENTER submitting the form.
-* `ctrlEnterSubmitsForm?` (defaults to `false`) - enable or disable `CTRL`+`ENTER` submitting the nearest form.
-* `enterWillSubmitForm?` (defaults to `true`) - enable or disable `ENTER` submitting the nearest form.
-* `escapeKeyClears?` (defaults to `true`) - enable or disable the `ESCAPE` key clearing input/textarea text.
-* `focusSelectsText?` (defaults to `true`) - enable or disable the selecting of input/textarea text when taking focus.
-* _All the standard input attributes that apply to text boxes._
-
-#### Examples
-
-```
- {{input-text value=model.someField}}
-```
-
-([Check out the demo...](http://ember-cli-text-support-mixins.cybertooth.io/))
-
-#### `{{text-area}}`
-
-Generates a textarea: `` that includes clear on Escape press, submit on CTRL+Enter,
-select text when focused and autofocus when the templated is loaded (and reloaded).
-
-##### Arguments
-
-* `afterClearAction` (defaults to `undefined`) - assign a closure function to this property
-to invoke any type of behaviour after clearing the text.
-* `afterCtrlEnterSubmitAction` (defaults to `undefined`) - assign a closure function to this
-property to invoke any type of behaviour after CTRL+ENTER submitting the form.
-* `beforeClearAction` (defaults to `undefined`) - assign a closure function to this property to
-invoke any type of behaviour prior to clearing the text.
-* `beforeCtrlEnterSubmitAction` (defaults to `undefined`) - assign a closure function to this property
-to invoke any type of behaviour prior to CTRL+ENTER submitting the form.
-* `ctrlEnterSubmitsForm?` (defaults to `false`) - enable or disable `CTRL`+`ENTER` submitting the nearest form.
-* `escapeKeyClears?` (defaults to `true`) - enable or disable the `ESCAPE` key clearing input/textarea text.
-* `focusSelectsText?` (defaults to `true`) - enable or disable the selecting of input/textarea text when taking focus.
-* _All the standard input attributes that apply to text boxes._
-
-#### Examples
-
-```
-{{text-area value=model.someOtherField}}
-```
-
-([Check out the demo...](http://ember-cli-text-support-mixins.cybertooth.io/))
-
-### Mixins
-
-#### `ctrl-enter-submits-form.js`
-
-`CTRL+ENTER` keypress combination will try to submit the nearest form element.
-
-Include in your component's js:
-
-```
-import CtrlEnterSubmitsForm from 'ember-cli-text-support-mixins/mixins/ctrl-enter-submits-form';
-```
-
-#### `enter-submits-form.js`
-
-Pressing `ENTER` in a text input will try to submit the nearest form element.
-
-Include in your component's js:
-
-```
-import EnterSubmitsForm from 'ember-cli-text-support-mixins/mixins/enter-submits-form';
-```
-
-#### `escape-key-clears.js`
-
-Pressing the `ESCAPE` key while focused in a text input or textarea will clear all text.
-
-Include in your component's js:
-
-```
-import EscapeKeyClears from 'ember-cli-text-support-mixins/mixins/escape-key-clears';
-```
-
-#### `focus-selects-text.js`
-
-Selects the text components text when focus is placed into the input.
-
-Include in your component's js:
-
-```
-import FocusSelectsText from 'ember-cli-text-support-mixins/mixins/focus-selects-text';
-```
-
-#### `trigger-focus.js`
-
-Fixes the quirk in Ember where html5 `autofocus` does not work after template re-renders.
-
-Include in your component's js:
-
-```
-import TriggerFocus from 'ember-cli-text-support-mixins/mixins/trigger-focus';
-```
-
-### Troubleshooting And Tips
-
-_None...at least that I can think of._
+#### `keyevent`
----
+The constants from [`keyevent`](https://github.com/cybertoothca/keyevent) are installed
+by yarn and `ember-cli-node-assets`.
-# Ember Add-on Building And Testing
+# Contributing
## Setup
-### Checkout
-
-```
-git clone git@github.com:cybertoothca/ember-cli-text-support-mixins.git
-```
-
-### With Yarn
-
-```
-yarn
-```
+* `git clone git@github.com:cybertoothca/ember-cli-text-support-mixins.git`
+* `yarn`
## Running The Dummy Application
@@ -264,7 +114,7 @@ $ yarn unlink
Make sure your `~/.aws/credentials` file has a profile named _cybertooth_
with a valid key and secret,
-```
+```text
[cybertooth]
aws_access_key_id =
aws_secret_access_key =
@@ -272,13 +122,17 @@ aws_secret_access_key =
Deploy by invoking the following command: `ember deploy production`
-Confirm your changes are showing up in our S3 container: http://ember-cli-text-support-mixins.cybertooth.io/
+Confirm your changes are showing up at: https://ember-cli-text-support-mixins.cybertooth.io/
+
+You may need to go into AWS CloudFront to expire the index.html file before the site
+changes are picked up (see [issue](https://github.com/cybertoothca/ember-cli-text-support-mixins/issues/29)).
# Releasing & Publishing To NPM
-```
-npm version x.y.z-sub.#
-git push
-git push --tags
-npm publish
+```bash
+$ yarn version --new-version x.y.z-sub.#
+$ git push
+$ git push --tags
+$ git checkout vx.y.z-sub.#
+$ yarn publish
```
diff --git a/_config.yml b/_config.yml
deleted file mode 100644
index e69de29..0000000
diff --git a/addon/components/input-text.js b/addon/components/input-text.js
index 8142e07..6dd4d87 100644
--- a/addon/components/input-text.js
+++ b/addon/components/input-text.js
@@ -1,11 +1,12 @@
-import TextField from '@ember/component/text-field';
+import AriaAttributes from '../mixins/aria-attributes';
import CtrlEnterSubmitsForm from '../mixins/ctrl-enter-submits-form';
import EnterSubmitsForm from '../mixins/enter-submits-form';
import EscapeKeyClears from '../mixins/escape-key-clears';
import FocusSelectsText from '../mixins/focus-selects-text';
+import TextField from '@ember/component/text-field';
import TriggerFocus from '../mixins/trigger-focus';
-export default TextField.extend(CtrlEnterSubmitsForm, EnterSubmitsForm, EscapeKeyClears, FocusSelectsText,
- TriggerFocus, {
+export default TextField.extend(AriaAttributes, CtrlEnterSubmitsForm, EnterSubmitsForm, EscapeKeyClears,
+ FocusSelectsText, TriggerFocus, {
classNames: ['input-text']
});
diff --git a/addon/components/text-area.js b/addon/components/text-area.js
index b126e27..af2b90a 100644
--- a/addon/components/text-area.js
+++ b/addon/components/text-area.js
@@ -1,9 +1,10 @@
-import TextArea from '@ember/component/text-area';
+import AriaAttributes from '../mixins/aria-attributes';
import CtrlEnterSubmitsForm from '../mixins/ctrl-enter-submits-form';
import EscapeKeyClears from '../mixins/escape-key-clears';
import FocusSelectsText from '../mixins/focus-selects-text';
+import TextArea from '@ember/component/text-area';
import TriggerFocus from '../mixins/trigger-focus';
-export default TextArea.extend(CtrlEnterSubmitsForm, EscapeKeyClears, FocusSelectsText, TriggerFocus, {
+export default TextArea.extend(AriaAttributes, CtrlEnterSubmitsForm, EscapeKeyClears, FocusSelectsText, TriggerFocus, {
classNames: ['text-area']
});
diff --git a/addon/mixins/aria-attributes.js b/addon/mixins/aria-attributes.js
new file mode 100644
index 0000000..3352f55
--- /dev/null
+++ b/addon/mixins/aria-attributes.js
@@ -0,0 +1,12 @@
+import Mixin from '@ember/object/mixin';
+
+/**
+ * Adding a few of the common aria-attributes used on text inputs and textareas.
+ */
+export default Mixin.create({
+ attributeBindings: [
+ 'aria-describedby',
+ 'aria-label',
+ 'aria-labelledby'
+ ]
+});
diff --git a/addon/mixins/closest-form.js b/addon/mixins/closest-form.js
index 51d38ff..f744be6 100644
--- a/addon/mixins/closest-form.js
+++ b/addon/mixins/closest-form.js
@@ -3,11 +3,13 @@ import Mixin from '@ember/object/mixin';
/**
* Simply use the component's `element` to find it's `closest('form')`.
+ *
+ * Leveraging some polyfill from `ember-cli-element-closest-polyfill`.
*/
export default Mixin.create({
/**
- * Grab the nearest form. Normally you can just ask an input for it's `this.form`, however that doesn't
- * seem to work with Ember wrapped TextSupport components? Using a jQuery find of the closest form instead.
+ * Grab the nearest form.
+ * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/closest
* @private
*/
_form: computed(function () {
diff --git a/addon/mixins/ctrl-enter-submits-form.js b/addon/mixins/ctrl-enter-submits-form.js
index 9066f54..7c12e45 100644
--- a/addon/mixins/ctrl-enter-submits-form.js
+++ b/addon/mixins/ctrl-enter-submits-form.js
@@ -1,31 +1,35 @@
/* global KeyEvent */
-import { isPresent } from '@ember/utils';
+import { once } from '@ember/runloop';
+import { deprecatingAlias } from '@ember/object/computed';
+import ClosestForm from './closest-form';
+import FormSubmissionUtils from './form-submission-utils';
import Mixin from '@ember/object/mixin';
-import ClosestFormMixin from './closest-form';
/**
- * When the CTRL+ENTER is pressed the nearest form up the dom is triggered for submit. By default this behaviour
- * is not activated. See `ctrlEnterSubmitsForm?` for more information.
+ * When the CTRL+ENTER is pressed the nearest form up the DOM is triggered for submit.
+ *
+ * By default this behaviour is not activated. Set `ctrlEnterSubmitsForm?` boolean to enable/disable.
*/
-export default Mixin.create(ClosestFormMixin, {
-
+export default Mixin.create(ClosestForm, FormSubmissionUtils, {
/**
* Pass in a closure function to fire after the form submit is triggered.
* The function will receive three parameters: the first is the DOM event, the second is
* `this` component, and the third is the jQuery wrapped `$form`.
*/
- afterCtrlEnterSubmitAction() {
- // override accordingly
- },
+ afterCtrlEnterSubmitAction: deprecatingAlias('afterSubmit', {
+ id: 'mixin.ctrl-enter-submits-form.deprecate-after-ctrl-enter-submit-action',
+ until: '2.1.0'
+ }),
/**
* Pass in a closure function to fire before the form submit is triggered.
* The function will receive three parameters: the first is the DOM event, the second is
* `this` component, and the third is the jQuery wrapped `$form`.
*/
- beforeCtrlEnterSubmitAction() {
- // override accordingly
- },
+ beforeCtrlEnterSubmitAction: deprecatingAlias('afterSubmit', {
+ id: 'mixin.ctrl-enter-submits-form.deprecate-after-ctrl-enter-submit-action',
+ until: '2.1.0'
+ }),
/**
* When set to `true`, CTRL+ENTER will attempt to submit the nearest form. Set this to `false` if you do not
@@ -34,30 +38,28 @@ export default Mixin.create(ClosestFormMixin, {
'ctrlEnterSubmitsForm?': false,
/**
- * The keyDown event is determining whether CTRL+ENTER was pressed.
- * If you override make sure to `this._super(...arguments)` to preserve this behaviour.
- * @param event
+ * Immediately prevent this ENTER/RETURN key from bubbling.
+ * @param event the keyboard event.
*/
- keyDown(event) {
+ insertNewline(event) {
this._super(...arguments);
+
+ if (this.get('ctrlEnterSubmitsForm?') && event.ctrlKey) {
+ once(this, this._triggerFormSubmission, this.get('afterAction'), this.get('beforeAction'), event, this.get('_form'))
+ }
+ },
+
+ /**
+ * If the ENTER or RETURN key is pressed cancel the action via `event.preventDefault()`.
+ * Stopping bubbling at this level will prevent the DEFAULT submission of a form as per the HTML spec.
+ * This matters, because we want to use `enterSubmitsForm?` to potentially stop the enter key from submitting.
+ * @param event the keyboard event.
+ */
+ keyPress(event) {
+ this._super(...arguments);
+
if (event.ctrlKey && (event.keyCode === KeyEvent.DOM_VK_ENTER || event.keyCode === KeyEvent.DOM_VK_RETURN)) {
event.preventDefault();
- if (this.get('ctrlEnterSubmitsForm?')) {
- const form = this.get('_form');
- if (isPresent(form)) {
- // fire the before-submit action
- if (isPresent(this.get('beforeCtrlEnterSubmitAction'))) {
- this.get('beforeCtrlEnterSubmitAction')(event, this, form);
- }
- form.onsubmit();
- // fire the after-submit action
- if (isPresent(this.get('afterCtrlEnterSubmitAction'))) {
- this.get('afterCtrlEnterSubmitAction')(event, this, form);
- }
- }
- }
- return false;
}
- return true;
}
});
diff --git a/addon/mixins/enter-submits-form.js b/addon/mixins/enter-submits-form.js
index 1f36d05..ce68e47 100644
--- a/addon/mixins/enter-submits-form.js
+++ b/addon/mixins/enter-submits-form.js
@@ -1,40 +1,53 @@
/* global KeyEvent */
-import { isPresent } from '@ember/utils';
+import { once } from '@ember/runloop';
+import { deprecatingAlias } from '@ember/object/computed';
+import ClosestForm from './closest-form';
+import FormSubmissionUtils from './form-submission-utils';
import Mixin from '@ember/object/mixin';
-import ClosestFormMixin from './closest-form';
-export default Mixin.create(ClosestFormMixin, {
- 'enterWillSubmitForm?': true,
+/**
+ * When the ENTER is pressed the nearest form up the DOM is triggered for submit.
+ *
+ * By default this behaviour is activated. Set `enterSubmitsForm?` boolean to enable/disable.
+ */
+export default Mixin.create(ClosestForm, FormSubmissionUtils, {
- keyDown(event) {
- this._super(...arguments);
- if (this._notAltCtrlMetaShift(event) && this._isEnterOrReturnKey(event)) {
- event.preventDefault();
- const form = this.get('_form');
- if (isPresent(form) && this.get('enterWillSubmitForm?')) {
- // TODO: trigger before and after?
- form.onsubmit();
- }
- return false;
- }
- return true;
- },
+ /**
+ * The version 1.x property for pressing enter. Deprecated in favour of `enterSubmitsForm?`.
+ * @deprecated
+ */
+ 'enterWillSubmitForm?': deprecatingAlias('enterSubmitsForm?', {
+ id: 'mixin.enter-submits-form.deprecate-enter-will-submit-form?',
+ until: '2.1.0'
+ }),
/**
- * @param event the event to test
- * @return {boolean} true if the enter OR the return key was pressed, false otherwise
- * @private
+ * Defaults to `true`. By default, a text-based input should submit when just the enter key is pressed.
*/
- _isEnterOrReturnKey(event) {
- return event.keyCode === KeyEvent.DOM_VK_ENTER || event.keyCode === KeyEvent.DOM_VK_RETURN;
+ 'enterSubmitsForm?': true,
+
+ /**
+ * Immediately prevent this ENTER/RETURN key from bubbling.
+ * @param event the keyboard event.
+ */
+ insertNewline(event) {
+ this._super(...arguments);
+
+ if (this.get('enterSubmitsForm?') && !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey) {
+ once(this, this._triggerFormSubmission, this.get('afterAction'), this.get('beforeAction'), event, this.get('_form'))
+ }
},
/**
- * @param event the event to test
- * @return {boolean} true if none of the modifier keys are pressed (alt, ctrl, meta, and shift), false otherwise
- * @private
+ * If the ENTER or RETURN key is pressed cancel the action via `event.preventDefault()`.
+ * Stopping bubbling at this level will prevent the DEFAULT submission of a form as per the HTML spec.
+ * This matters, because we want to use `enterSubmitsForm?` to potentially stop the enter key from submitting.
+ * @param event the keyboard event.
*/
- _notAltCtrlMetaShift(event) {
- return !event.altKey && !event.ctrlKey && !event.metaKey && !event.shiftKey;
+ keyPress(event) {
+ this._super(...arguments);
+ if (event.keyCode === KeyEvent.DOM_VK_ENTER || event.keyCode === KeyEvent.DOM_VK_RETURN) {
+ event.preventDefault();
+ }
}
});
diff --git a/addon/mixins/escape-key-clears.js b/addon/mixins/escape-key-clears.js
index c4f5077..8d9c221 100644
--- a/addon/mixins/escape-key-clears.js
+++ b/addon/mixins/escape-key-clears.js
@@ -3,7 +3,9 @@ import { trySet } from '@ember/object';
import Mixin from '@ember/object/mixin';
/**
- * When the escape key is pressed, the `value` proper will be cleared.
+ * When the escape key is pressed, the `value` of the text `input`/`textarea` will be cleared.
+ *
+ * Note, this does not register the clearing with the undo-stack of browsers.
*/
export default Mixin.create({
diff --git a/addon/mixins/focus-selects-text.js b/addon/mixins/focus-selects-text.js
index 0de2d1f..9700d48 100644
--- a/addon/mixins/focus-selects-text.js
+++ b/addon/mixins/focus-selects-text.js
@@ -2,7 +2,7 @@ import { later } from '@ember/runloop';
import Mixin from '@ember/object/mixin';
/**
- * When focus is placed in a `input[:text]` or `textarea` the text within is selected.
+ * When focus is placed in an `input[:text]` or `textarea` the text within is selected.
*/
export default Mixin.create({
diff --git a/addon/mixins/form-submission-utils.js b/addon/mixins/form-submission-utils.js
new file mode 100644
index 0000000..9fc093c
--- /dev/null
+++ b/addon/mixins/form-submission-utils.js
@@ -0,0 +1,55 @@
+import { isPresent } from '@ember/utils';
+import Mixin from '@ember/object/mixin';
+
+/**
+ * A mixin used by the `ctrl-enter-submits-form` and `enter-submits-form` mixins
+ */
+export default Mixin.create({
+ /**
+ * Pass in a closure function to fire after the form submit is triggered.
+ * The function will receive three parameters: the first is the DOM event, the second is
+ * `this` component, and the third is the jQuery wrapped `$form`.
+ */
+ afterSubmit() {
+ // override accordingly
+ },
+
+ /**
+ * Pass in a closure function to fire before the form submit is triggered.
+ * The function will receive three parameters: the first is the DOM event, the second is
+ * `this` component, and the third is the jQuery wrapped `$form`.
+ */
+ beforeSubmit() {
+ // override accordingly
+ },
+
+ /**
+ *
+ * @param form
+ * @private
+ */
+ _submitForm(form) {
+ const submitButton = document.createElement('button');
+ submitButton.style.display = 'none';
+ submitButton.type = 'submit';
+ try {
+ form.appendChild(submitButton);
+ submitButton.click();
+ } finally {
+ submitButton.remove();
+ }
+ },
+
+ _triggerFormSubmission(afterSubmitFunction, beforeSubmitFunction, event, form) {
+ // fire the before-submit action
+ if (isPresent(beforeSubmitFunction)) {
+ beforeSubmitFunction(event, this, form);
+ }
+ // submit the form
+ this._submitForm(form);
+ // fire the after-submit action
+ if (isPresent(afterSubmitFunction)) {
+ afterSubmitFunction(event, this, form);
+ }
+ }
+});
diff --git a/addon/mixins/trigger-focus.js b/addon/mixins/trigger-focus.js
index 40e1880..1ab8f45 100644
--- a/addon/mixins/trigger-focus.js
+++ b/addon/mixins/trigger-focus.js
@@ -1,13 +1,16 @@
-import { on } from '@ember/object/evented';
import Mixin from '@ember/object/mixin';
/**
- * This ensures that focus is placed into an input or textarea should the autofocus property exist.
- * Why? Because when Ember RETURNS to a template for a second or more time, the element with autofocus does not
+ * This ensures that focus is placed into a text-based-input or `textarea` should when the `autofocus`
+ * property is set.
+ *
+ * Why? Because when Ember TRANSITIONS between the same template, the element with `autofocus` does not
* seem to trigger.
- * This fixes that.
*
- * This mixin assumes that it is being assigned to a component that will respond to the `focus` event.
+ * This fixes that using the `didInsertElement()` hook.
+ *
+ * This mixin assumes that it is being assigned to a component that will respond to the invocation of
+ * the `focus()` event.
*/
export default Mixin.create({
@@ -16,12 +19,11 @@ export default Mixin.create({
*/
autofocus: false,
- /**
- * When the element is inserted, trigger the focus event using jQuery.
- */
- _triggerFocus: on('didInsertElement', function () {
+ didInsertElement() {
+ this._super(...arguments);
+
if (this.get('autofocus')) {
this.element.focus();
}
- })
+ }
});
diff --git a/app/styles/app.scss b/app/styles/app.scss
new file mode 100644
index 0000000..4c1d677
--- /dev/null
+++ b/app/styles/app.scss
@@ -0,0 +1,2 @@
+//noinspection CssUnknownTarget
+@import "ember-cli-bootstrap-4/bootstrap";
diff --git a/blueprints/ember-cli-text-support-mixins/index.js b/blueprints/ember-cli-text-support-mixins/index.js
index e7c7a83..2e3ded7 100644
--- a/blueprints/ember-cli-text-support-mixins/index.js
+++ b/blueprints/ember-cli-text-support-mixins/index.js
@@ -5,6 +5,12 @@ module.exports = {
normalizeEntityName: function () {
},
afterInstall: function (/*options*/) {
- return this.addPackagesToProject([{name: 'keyevent'}]);
+ return this.addAddonsToProject({
+ packages: [
+ { name: 'ember-cli-element-closest-polyfill' }
+ ]
+ }).then(() => {
+ return this.addPackagesToProject([{ name: 'keyevent' }]);
+ });
}
};
diff --git a/config/deploy.js b/config/deploy.js
index 24df00c..f90a905 100644
--- a/config/deploy.js
+++ b/config/deploy.js
@@ -1,26 +1,26 @@
/* eslint-env node */
'use strict';
-module.exports = function (deployTarget) {
+module.exports = function (/*deployTarget*/) {
let ENV = {
- build: {}
- // include other plugin configuration that applies to all deploy targets here
+ build: {
+ environment: 'production'
+ },
+ s3: {
+ bucket: 'ember-cli-text-support-mixins.cybertooth.io',
+ filePattern: '**/*.{js,css,png,gif,ico,jpg,map,xml,txt,svg,swf,eot,ttf,woff,woff2,otf,html}',
+ profile: 'cybertooth',
+ region: 'us-west-2'
+ },
+ slack: {
+ webhookURL: 'https://hooks.slack.com/services/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'
+ }
};
- if (deployTarget === 'development') {
- ENV.build.environment = 'development';
- // configure other plugins for development deploy target here
- }
-
- if (deployTarget === 'staging') {
- ENV.build.environment = 'production';
- // configure other plugins for staging deploy target here
- }
-
- if (deployTarget === 'production') {
- ENV.build.environment = 'production';
- // configure other plugins for production deploy target here
- }
+ // if (deployTarget === 'production') {
+ // ENV.build.environment = 'production';
+ // configure other plugins for production deploy target here
+ // }
// Note: if you need to build some configuration asynchronously, you can return
// a promise that resolves with the ENV object instead of returning the
diff --git a/install_ember_addons.sh b/install_ember_addons.sh
index 7af9deb..4027df9 100755
--- a/install_ember_addons.sh
+++ b/install_ember_addons.sh
@@ -1,14 +1,26 @@
#!/bin/sh
-ember install ember-cli-bootstrap3-sass
-ember install ember-cli-code-coverage
+yarn add --dev clipboard@^1.7.1
+
+ember install @fortawesome/ember-fontawesome
+yarn add @fortawesome/free-solid-svg-icons --dev
+yarn add @fortawesome/free-brands-svg-icons --dev
+
+ember install ember-auto-import
+
+ember install ember-cli-app-version
+
+ember install ember-cli-bootstrap-4
+
ember install ember-cli-deploy
ember install ember-cli-deploy-build
ember install ember-cli-deploy-gzip
ember install ember-cli-deploy-s3
-ember install ember-cli-font-awesome-sass
+ember install ember-cli-deploy-slack
+
+ember install ember-cli-element-closest-polyfill
+
ember install ember-route-action-helper
-yarn add bootswatch@3.3 --dev
yarn add keyevent --dev
yarn add ember-cli-node-assets # this must go into "dependencies" NOT "devDependencies"
diff --git a/package.json b/package.json
index a482b65..f1a16d8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "ember-cli-text-support-mixins",
- "version": "2.0.1",
+ "version": "2.0.2",
"description": "Ember.TextSupport enhancements including a {{input-text}} and {{text-area}} component.",
"keywords": [
"Autofocus",
@@ -42,24 +42,31 @@
"ember-cli-node-assets": "^0.2.2"
},
"devDependencies": {
- "bootswatch": "3.3",
+ "@fortawesome/ember-fontawesome": "^0.1.8",
+ "@fortawesome/free-brands-svg-icons": "^5.5.0",
+ "@fortawesome/free-solid-svg-icons": "^5.5.0",
+ "bootstrap": "^4.1.0",
"broccoli-asset-rev": "^2.4.5",
+ "clipboard": "^1.7.1",
"ember-ajax": "^3.0.0",
+ "ember-auto-import": "^1.2.15",
"ember-cli": "~2.18.2",
- "ember-cli-bootstrap3-sass": "^1.0.6",
- "ember-cli-code-coverage": "^0.4.2",
+ "ember-cli-app-version": "^3.2.0",
+ "ember-cli-bootstrap-4": "^0.7.0",
"ember-cli-dependency-checker": "^2.0.0",
"ember-cli-deploy": "^1.0.2",
"ember-cli-deploy-build": "^1.1.1",
"ember-cli-deploy-gzip": "^1.0.1",
"ember-cli-deploy-s3": "^1.4.0",
+ "ember-cli-deploy-slack": "^1.0.1",
+ "ember-cli-element-closest-polyfill": "^0.0.1",
"ember-cli-eslint": "^4.2.1",
"ember-cli-font-awesome-sass": "^1.0.4",
"ember-cli-htmlbars": "^2.0.1",
"ember-cli-htmlbars-inline-precompile": "^1.0.0",
"ember-cli-inject-live-reload": "^1.4.1",
"ember-cli-qunit": "^4.1.1",
- "ember-cli-sass": "^8.0.1",
+ "ember-cli-sass": "^7.2.0",
"ember-cli-shims": "^1.2.0",
"ember-cli-sri": "^2.1.0",
"ember-cli-uglify": "^2.0.0",
@@ -74,12 +81,14 @@
"eslint-plugin-node": "^5.2.1",
"keyevent": "^1.1.0",
"loader.js": "^4.2.3",
+ "popper.js": "^1.14.0",
"sass": "^1.14.3"
},
"engines": {
"node": "^4.5 || 6.* || >= 7.*"
},
"ember-addon": {
- "configPath": "tests/dummy/config"
+ "configPath": "tests/dummy/config",
+ "demoURL": "http://ember-cli-text-support-mixins.cybertooth.io/"
}
}
diff --git a/tests/dummy/app/components/copy-install-to-clipboard.js b/tests/dummy/app/components/copy-install-to-clipboard.js
new file mode 100644
index 0000000..30fc0d4
--- /dev/null
+++ b/tests/dummy/app/components/copy-install-to-clipboard.js
@@ -0,0 +1,31 @@
+import { get } from '@ember/object';
+import config from '../config/environment';
+import Clipboard from 'clipboard'
+import Component from '@ember/component';
+import layout from '../templates/components/copy-install-to-clipboard';
+
+export default Component.extend({
+ attributeBindings: ['data-clipboard-text', 'href'],
+
+ 'data-clipboard-text': '',
+
+ willDestroyElement() {
+ this.get('clipboard').destroy();
+ },
+
+ didInsertElement() {
+ this._super(...arguments);
+
+ const installCommand = `ember install ${get(config, 'APP.name')}@^${get(config, 'APP.version').split('-')[0]}`;
+ this.set('data-clipboard-text', installCommand);
+
+ this.set('clipboard', new Clipboard(this.element));
+ this.get('clipboard').on('success', () => alert(`'${installCommand}' command copied to your clipboard.`))
+ },
+
+ href: 'javascript:void(0)',
+
+ layout,
+
+ tagName: 'a'
+});
diff --git a/tests/dummy/app/controllers/demo/input-text-ctrl-enter-submits.js b/tests/dummy/app/controllers/demo/input-text-ctrl-enter-submits.js
new file mode 100644
index 0000000..c498fd9
--- /dev/null
+++ b/tests/dummy/app/controllers/demo/input-text-ctrl-enter-submits.js
@@ -0,0 +1,3 @@
+import InputTextEnterSubmits from './input-text-enter-submits';
+
+export default InputTextEnterSubmits.extend({});
diff --git a/tests/dummy/app/controllers/demo/input-text-enter-submits.js b/tests/dummy/app/controllers/demo/input-text-enter-submits.js
new file mode 100644
index 0000000..5410b49
--- /dev/null
+++ b/tests/dummy/app/controllers/demo/input-text-enter-submits.js
@@ -0,0 +1,15 @@
+import Controller from '@ember/controller';
+
+export default Controller.extend({
+ actions: {
+ withSubmit(/*event*/) {
+ window.alert('