From ba02553c60c0bff748ff8e24cb44f839bef4ae58 Mon Sep 17 00:00:00 2001 From: Dan Nelson Date: Wed, 1 Mar 2017 22:53:57 -0700 Subject: [PATCH] #1 Alpha.1 ready. Need to beef up tests. Too tired to do today. Demo website available. --- .codeclimate.yml | 27 +++ README.md | 202 +++++++++++++++++- addon/components/input-text.js | 7 + addon/mixins/ctrl-enter-submits-form.js | 50 +++++ addon/mixins/escape-key-clears.js | 41 ++++ addon/mixins/focus-selects-text.js | 21 ++ addon/mixins/trigger-focus.js | 15 ++ app/components/input-text.js | 1 + blueprints/.jshintrc | 6 + .../ember-cli-text-field-mixins/index.js | 11 + bower.json | 6 +- circle.yml | 11 + config/deploy.js | 33 +++ index.js | 6 +- package.json | 28 ++- tests/dummy/app/index.html | 34 +-- tests/dummy/app/routes/application.js | 3 + tests/dummy/app/routes/index.js | 3 + tests/dummy/app/styles/app.css | 0 tests/dummy/app/styles/app.scss | 14 ++ tests/dummy/app/templates/application.hbs | 90 ++++++++ tests/dummy/app/templates/index.hbs | 56 +++++ .../integration/components/input-text-test.js | 11 + .../mixins/ctrl-enter-submits-form-test.js | 12 ++ tests/unit/mixins/escape-key-clears-test.js | 12 ++ tests/unit/mixins/focus-selects-text-test.js | 12 ++ tests/unit/mixins/trigger-focus-test.js | 12 ++ 27 files changed, 689 insertions(+), 35 deletions(-) create mode 100644 .codeclimate.yml create mode 100644 addon/components/input-text.js create mode 100644 addon/mixins/ctrl-enter-submits-form.js create mode 100644 addon/mixins/escape-key-clears.js create mode 100644 addon/mixins/focus-selects-text.js create mode 100644 addon/mixins/trigger-focus.js create mode 100644 app/components/input-text.js create mode 100644 blueprints/.jshintrc create mode 100644 blueprints/ember-cli-text-field-mixins/index.js create mode 100644 circle.yml create mode 100644 config/deploy.js create mode 100644 tests/dummy/app/routes/application.js create mode 100644 tests/dummy/app/routes/index.js delete mode 100644 tests/dummy/app/styles/app.css create mode 100644 tests/dummy/app/styles/app.scss create mode 100644 tests/dummy/app/templates/application.hbs create mode 100644 tests/dummy/app/templates/index.hbs create mode 100644 tests/integration/components/input-text-test.js create mode 100644 tests/unit/mixins/ctrl-enter-submits-form-test.js create mode 100644 tests/unit/mixins/escape-key-clears-test.js create mode 100644 tests/unit/mixins/focus-selects-text-test.js create mode 100644 tests/unit/mixins/trigger-focus-test.js diff --git a/.codeclimate.yml b/.codeclimate.yml new file mode 100644 index 0000000..57b9e47 --- /dev/null +++ b/.codeclimate.yml @@ -0,0 +1,27 @@ +--- +engines: + duplication: + enabled: true + config: + languages: + - ruby + - javascript + - python + - php + eslint: + enabled: true + fixme: + enabled: true +ratings: + paths: + - "**.inc" + - "**.js" + - "**.jsx" + - "**.module" + - "**.php" + - "**.py" + - "**.rb" +exclude_paths: +- config/ +- tests/ +- vendor/ diff --git a/README.md b/README.md index 3c391a2..f4e501a 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,209 @@ -# Ember-cli-text-field-mixins +# ember-cli-text-field-mixins [![GitHub version](http://badge.fury.io/gh/cybertoothca%2Fember-cli-text-field-mixins.svg)](http://badge.fury.io/gh/cybertoothca%2Fember-cli-text-field-mixins) ![](https://embadge.io/v1/badge.svg?start=1.13.0) -This README outlines the details of collaborating on this Ember addon. +[![npm version](http://badge.fury.io/js/ember-cli-text-field-mixins.svg)](http://badge.fury.io/js/ember-cli-text-field-mixins) [![CircleCI](http://circleci.com/gh/cybertoothca/ember-cli-text-field-mixins.svg?style=shield)](http://circleci.com/gh/cybertoothca/ember-cli-text-field-mixins) [![Code Climate](http://codeclimate.com/github/cybertoothca/ember-cli-text-field-mixins/badges/gpa.svg)](http://codeclimate.com/github/cybertoothca/ember-cli-text-field-mixins) ![Dependencies](http://david-dm.org/cybertoothca/ember-cli-text-field-mixins.svg) [![ember-observer-badge](http://emberobserver.com/badges/ember-cli-text-field-mixins.svg)](http://emberobserver.com/addons/ember-cli-text-field-mixins) [![License](http://img.shields.io/npm/l/ember-cli-text-field-mixins.svg)](LICENSE.md) + +A textbox that will guess the date you want and assign it to your model or query-params. + +## Demo + +The demonstration web application can be found here: +[http://ember-cli-text-field-mixins.cybertooth.io/](http://ember-cli-text-field-mixins.cybertooth.io/). + +## What Does This Addon Do? + +This addon supplies the following _components_: + +* `input-date` - a basic HTML textbox that will take your input and try to parse it to a date. If the parse succeeds, +the date will be formatted according to your preference. Ideal for binding to your model's date fields (e.g. +`DS.attr('date')`) or to your component or controller's properties. +* `input-iso8601` - another basic HTML textbox that will once again take your input, parse it to a date, and then +store the [ISO8601](https://en.wikipedia.org/wiki/ISO_8601) representation of the date. This is a +great way for binding your date to Ember's query parameters. + +_Further information about these items can be found in the Usage section below and in the +[demo (dummy) application](http://ember-cli-text-field-mixins.cybertooth.io/)._ + +### Some Bootstrap Love... + +If the supplied value can't be parsed to a date, we add the `has-error` style class to the `.form-group` that the +`{{input-date}}` and/or `{{input-iso8601}}` belongs to. This visualizes that the date parse was rejected. + +## Requirements + +* Ember >= 1.13.0 +* Ember CLI + +### Bower Dependencies + +The following Bower dependencies are automatically installed into your Ember product: + +* `datejs-parse-plus` - https://github.com/cybertoothca/Datejs - A fork of the original Datejs +(https://github.com/datejs/Datejs) library that is careful to not override the `Date`'s `parse(...)` function. +* `moment` - https://github.com/moment/moment +* `moment-timezone` - https://github.com/moment/moment-timezone ## Installation -* `git clone ` this repository -* `cd ember-cli-text-field-mixins` +The following will install this addon: + + $ ember install ember-cli-text-field-mixins + +### Upgrading + +When working through the Ember upgrade process, I recommend +invoking the `ember install ember-cli-text-field-mixins` command once +you are done to get the latest version of the addon. + +This will likely update the bower dependencies listed above. + +## Usage + +As mentioned above there are several examples on the demonstration site: +[http://ember-cli-text-field-mixins.cybertooth.io/](http://ember-cli-text-field-mixins.cybertooth.io/) + +### Components + +#### `{{input-date}}` + +This component makes a textbox. It takes in user input in the form of a date that is swiftly parsed and formatted. +The parsed date object is assigned to the component's `date` property. + +##### Arguments + +* `date` - **REQUIRED**. Rather than binding to the `value` property, this textbox input will be binding to +the `date` attribute. +* `value` - **DO NOT USE**. I mention the `value` property because you shouldn't bind anything to it. Users +type in the textbox, the date they settle on will be formatted in the textbox which is assigned to the `value` +property. In addition...if you supply a valid `date` attribute to this textbox, it will be formatted for you. Don't +go being all clever trying to do things that are already taken care of for you. +* `valueFormat` - OPTIONAL, DEFAULT `LL`. Formatting is done using moment.js. The default format of your dates is the localized +`LL`. You can change this however you want. See the demo. +* `startOfDay` - **COMING SOON** OPTIONAL, DEFAULT `false`. When parsing dates, always set them to the start +of the day. If set to `true`, this will take precedence over the `endOfDay` property. +* `endOfDay` - **COMING SOON** OPTIONAL, DEFAULT `false`.. When parsing dates, always set them to the last +second of the day. +* `zone` - **COMING SOON** OPTIONAL, DEFAULT `moment.tz.guess()`. Dates will be parsed and formatted in the specified +timezone. +* _All the standard input attributes that apply to text boxes._ + +#### Examples + + {{input-date date=myModel.createdOn valueFormat="llll"}} + + {{input-date date=someComponentProperty}} + +
+ + {{input-date classNames="form-control" elementId="js-updated-on" date=anotherModel.updatedOn}} +

Use with bootstrap!

+
+ +([Check out the demo...](http://ember-cli-text-field-mixins.cybertooth.io/)) + +#### `{{input-iso8601}}` + +What's iso8601? Go read: https://en.wikipedia.org/wiki/ISO_8601 + +Just like `{{input-date}}`, `{{input-iso8601}}` also makes a simple textbox. It takes in user input +in the form of a date that is swiftly parsed and formatted. + +##### Arguments + +* `iso8601` - **REQUIRED & MUST BE A STRING**. Like the `{{input-date}}` component we do not use the textbox's +`value` property and instead bind to the `iso8601` attribute. This `iso8601` attribute expects a String and it +should be in ISO format (e.g. `yyyy-MM-ddTHH:mm:ssZ`). +* `value` - **DO NOT USE**. I mention the `value` property because you shouldn't bind anything to it. Users +type in the textbox, the date they settle on will be formatted in the textbox which is assigned to the `value` +property. In addition...if you supply a valid `date` attribute to this textbox, it will be formatted for you. Don't +go being all clever trying to do things that are already taken care of for you. +* `valueFormat` - OPTIONAL, DEFAULT `LL`. Formatting is done using moment.js. The default format of your dates is the localized +`LL`. You can change this however you want. See the demo. +* `startOfDay` - **COMING SOON** OPTIONAL, DEFAULT `false`. When parsing dates, always set them to the start +of the day. If set to `true`, this will take precedence over the `endOfDay` property. +* `endOfDay` - **COMING SOON** OPTIONAL, DEFAULT `false`.. When parsing dates, always set them to the last +second of the day. +* `zone` - **COMING SOON** OPTIONAL, DEFAULT `moment.tz.guess()`. Dates will be parsed and formatted in the specified +timezone. +* _All the standard input attributes that apply to text boxes._ + +#### Examples + + {{input-iso8601 iso8601=myControllerProperty valueFormat="llll"}} + +
+ + {{input-iso8601 classNames="form-control" elementId="js-from" iso8601=anotherControllerProperty}} +

Use with bootstrap!

+
+ +([Check out the demo...](http://ember-cli-text-field-mixins.cybertooth.io/)) + +### Troubleshooting And Tips + +_None...at least that I can think of._ + +--- + +# Ember Addon Building And Testing + +## Setup + +* `git clone git@github.com:cybertoothca/ember-cli-text-field-mixins.git` * `npm install` * `bower install` -## Running +## Running The Dummy Application -* `ember serve` -* Visit your app at [http://localhost:4200](http://localhost:4200). +* `ember server` +* Visit your app at http://localhost:4200. -## Running Tests +## Running Addon Tests -* `npm test` (Runs `ember try:each` to test your addon against multiple Ember versions) +* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions) * `ember test` * `ember test --server` -## Building +## Building The Addon * `ember build` For more information on using ember-cli, visit [http://ember-cli.com/](http://ember-cli.com/). + +# Linking This Addon For Local Testing + +## Linking + +1. From the command line at the root of __this__ project run the +`npm link` command to _link_ this addon within your local +node repository. +1. From the _other_ Ember project that you wish to test this addon +in, execute the following command: +`npm link ember-cli-text-field-mixins`. +1. Now in that same _other_ Ember project, you should go into the +`package.json` and add the ember addon with the version _*_. It will +look something like this: `"ember-cli-text-field-mixins": "*"`. Now +when/if you execute `npm install` on this _other_ project it +will know to look for the linked addon rather than fetch it from +the central repository. + +## Unlinking + +1. Remove the addon from your local node repository with the following +command (that can be run anywhere): +`npm uninstall -g ember-cli-text-field-mixins` +1. Remove the reference to the `ember-cli-text-field-mixins` +in your _other_ project's `package.json`. +1. Run an `npm prune` and `bower prune` from the root of your _other_ project's command line. + +# Deploying The Dummy Application + +Make sure your `~/.aws/credentials` file has a profile named _cybertooth_ +with a valid key and secret, + + [cybertooth] + aws_access_key_id = + 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-field-mixins.cybertooth.io/ diff --git a/addon/components/input-text.js b/addon/components/input-text.js new file mode 100644 index 0000000..7496ebc --- /dev/null +++ b/addon/components/input-text.js @@ -0,0 +1,7 @@ +import Ember from 'ember'; +import CtrlEnterSubmitsForm from '../mixins/ctrl-enter-submits-form'; +import EscapeKeyClears from '../mixins/escape-key-clears'; +import FocusSelectsText from '../mixins/focus-selects-text'; +import TriggerFocus from '../mixins/trigger-focus'; + +export default Ember.TextField.extend(CtrlEnterSubmitsForm, EscapeKeyClears, FocusSelectsText, TriggerFocus, {}); diff --git a/addon/mixins/ctrl-enter-submits-form.js b/addon/mixins/ctrl-enter-submits-form.js new file mode 100644 index 0000000..6b30b61 --- /dev/null +++ b/addon/mixins/ctrl-enter-submits-form.js @@ -0,0 +1,50 @@ +/* global KeyEvent */ +import Ember from 'ember'; + +/** + * 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. + */ +export default Ember.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`. + */ + afterSubmitAction: undefined, + /** + * 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`. + */ + beforeSubmitAction: undefined, + /** + * When set to `true`, CTRL+ENTER will attempt to submit the nearest form. Set this to `false` if you do not + * want this behaviour. Default value is `false`. + */ + '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 + */ + keyDown(event) { + this._super(...arguments); + if (this.get('ctrlEnterSubmitsForm?') && + (event.ctrlKey && (event.keyCode === KeyEvent.DOM_VK_ENTER || event.keyCode === KeyEvent.DOM_VK_RETURN))) { + event.preventDefault(); + const $form = this.$().closest('form'); // this.form does not work because component is wrapped + if (Ember.isPresent($form)) { + // fire the before-submit action + if (Ember.isPresent(this.get('beforeSubmitAction'))) { + this.get('beforeSubmitAction')(event, this, $form); + } + $form.trigger('submit'); + // fire the after-submit action + if (Ember.isPresent(this.get('afterSubmitAction'))) { + this.get('afterSubmitAction')(event, this, $form); + } + } + } + } +}); diff --git a/addon/mixins/escape-key-clears.js b/addon/mixins/escape-key-clears.js new file mode 100644 index 0000000..1b97b70 --- /dev/null +++ b/addon/mixins/escape-key-clears.js @@ -0,0 +1,41 @@ +import Ember from 'ember'; + +/** + * When the escape key is pressed, the `value` proper will be cleared. + */ +export default Ember.Mixin.create({ + /** + * Pass in a closure function to fire after the value is cleared. + * The function will receive two parameters: the first is the DOM event, and the second is + * `this` component. + */ + afterClearAction: undefined, + /** + * Pass in a closure function to fire before the value is cleared. + * The function will receive two parameters: the first is the DOM event, and the second is + * `this` component. + */ + beforeClearAction: undefined, + /** + * By default, pressing the ESC key will clear this' `value` property. Set this to `false` if you do not + * want this behaviour. + */ + 'escapeKeyClears?': true, + /** + * If you override make sure to `this._super(...arguments)` to preserve this behaviour. + */ + cancel(event) { + this._super(...arguments); + if (this.get('escapeKeyClears?')) { + // fire the before-clear action + if (Ember.isPresent(this.get('beforeClearAction'))) { + this.get('beforeClearAction')(event, this); + } + this.$().val(''); + // fire the after-clear action + if (Ember.isPresent(this.get('afterClearAction'))) { + this.get('afterClearAction')(event, this); + } + } + } +}); diff --git a/addon/mixins/focus-selects-text.js b/addon/mixins/focus-selects-text.js new file mode 100644 index 0000000..f658613 --- /dev/null +++ b/addon/mixins/focus-selects-text.js @@ -0,0 +1,21 @@ +import Ember from 'ember'; + +/** + * When focus is placed in a `input[:text]` or `textarea` the text within is selected. + */ +export default Ember.Mixin.create({ + /** + * If you override make sure to `this._super(...arguments)` to preserve this behaviour. + */ + focusIn(/*event*/) { + this._super(...arguments); + if (this.get('focusSelectsText?') && this.$().is(':text, textarea')) { + this.$().trigger('select'); + } + }, + /** + * By default, focus on `this` input/textarea will select the text within. Set this to `false` if you do not + * want this behaviour. + */ + 'focusSelectsText?': true +}); diff --git a/addon/mixins/trigger-focus.js b/addon/mixins/trigger-focus.js new file mode 100644 index 0000000..bb0b8b6 --- /dev/null +++ b/addon/mixins/trigger-focus.js @@ -0,0 +1,15 @@ +import Ember from 'ember'; + +/** + * 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 + * seem to trigger. + * This fixes that. + */ +export default Ember.Mixin.create({ + _triggerFocus: Ember.on('didInsertElement', function () { + if (this.get('autofocus')) { + this.$().trigger('focus'); + } + }) +}); diff --git a/app/components/input-text.js b/app/components/input-text.js new file mode 100644 index 0000000..f17921c --- /dev/null +++ b/app/components/input-text.js @@ -0,0 +1 @@ +export { default } from 'ember-cli-text-field-mixins/components/input-text'; \ No newline at end of file diff --git a/blueprints/.jshintrc b/blueprints/.jshintrc new file mode 100644 index 0000000..33f4f6f --- /dev/null +++ b/blueprints/.jshintrc @@ -0,0 +1,6 @@ +{ + "predef": [ + "console" + ], + "strict": false +} diff --git a/blueprints/ember-cli-text-field-mixins/index.js b/blueprints/ember-cli-text-field-mixins/index.js new file mode 100644 index 0000000..dd76366 --- /dev/null +++ b/blueprints/ember-cli-text-field-mixins/index.js @@ -0,0 +1,11 @@ +/*jshint node:true*/ +module.exports = { + name: 'ember-cli-text-field-mixins', + description: '', + normalizeEntityName: function () { + }, + afterInstall: function (/*options*/) { + return this.addBowerPackagesToProject([{name: 'keyevent'}]); + } + +}; diff --git a/bower.json b/bower.json index f823681..61ee3b6 100644 --- a/bower.json +++ b/bower.json @@ -2,6 +2,10 @@ "name": "ember-cli-text-field-mixins", "dependencies": { "ember": "~2.9.0", - "ember-cli-shims": "0.1.3" + "ember-cli-shims": "0.1.3", + "keyevent": "^1.0.0", + "bootstrap-sass": "^3.3.7", + "font-awesome": "^4.7.0", + "bootswatch": "^3.3.7" } } diff --git a/circle.yml b/circle.yml new file mode 100644 index 0000000..5828f4f --- /dev/null +++ b/circle.yml @@ -0,0 +1,11 @@ +machine: + node: + version: 6 + +dependencies: + pre: + - npm config set spin false + post: + - npm install -g bower + - npm install phantomjs-prebuilt + - bower install diff --git a/config/deploy.js b/config/deploy.js new file mode 100644 index 0000000..7de333d --- /dev/null +++ b/config/deploy.js @@ -0,0 +1,33 @@ +/* jshint node: true */ + +module.exports = function(deployTarget) { + var ENV = { + build: {}, + s3: { + bucket: 'ember-cli-text-field-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' + } + }; + + 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 + } + + // Note: if you need to build some configuration asynchronously, you can return + // a promise that resolves with the ENV object instead of returning the + // ENV object synchronously. + return ENV; +}; diff --git a/index.js b/index.js index 798da49..6676584 100644 --- a/index.js +++ b/index.js @@ -2,5 +2,9 @@ 'use strict'; module.exports = { - name: 'ember-cli-text-field-mixins' + name: 'ember-cli-text-field-mixins', + included: function (app) { + this._super.included(app); + app.import(app.bowerDirectory + '/keyevent/src/keyevent.js'); + } }; diff --git a/package.json b/package.json index c993784..01d72f4 100644 --- a/package.json +++ b/package.json @@ -11,24 +11,39 @@ "start": "ember server", "test": "ember try:each" }, - "repository": "", + "repository": { + "type": "git", + "url": "https://github.com/cybertoothca/ember-cli-text-field-mixins.git" + }, "engines": { "node": ">= 0.12.0" }, - "author": "", + "author": "Cybertooth.io", + "contributors": [ + { + "name": "Dan Nelson", + "email": "dnelson@cybertooth.ca", + "url": "https://github.com/nadnoslen" + } + ], "license": "MIT", "devDependencies": { "broccoli-asset-rev": "^2.4.5", "ember-ajax": "^2.4.1", "ember-cli": "2.9.1", "ember-cli-app-version": "^2.0.0", + "ember-cli-bootstrap3-sass": "1.0.6", "ember-cli-dependency-checker": "^1.3.0", - "ember-cli-htmlbars": "^1.0.10", - "ember-cli-htmlbars-inline-precompile": "^0.3.3", + "ember-cli-deploy": "1.0.0", + "ember-cli-deploy-build": "0.1.1", + "ember-cli-deploy-gzip": "0.2.4", + "ember-cli-deploy-s3": "0.4.0", + "ember-cli-font-awesome-sass": "1.0.4", "ember-cli-inject-live-reload": "^1.4.1", "ember-cli-jshint": "^1.0.4", "ember-cli-qunit": "^3.0.1", "ember-cli-release": "^0.2.9", + "ember-cli-sass": "6.1.1", "ember-cli-sri": "^2.1.0", "ember-cli-test-loader": "^1.1.0", "ember-cli-uglify": "^1.2.0", @@ -37,14 +52,15 @@ "ember-export-application-global": "^1.0.5", "ember-load-initializers": "^0.5.1", "ember-resolver": "^2.0.3", - "ember-welcome-page": "^1.0.3", "loader.js": "^4.0.10" }, "keywords": [ "ember-addon" ], "dependencies": { - "ember-cli-babel": "^5.1.7" + "ember-cli-babel": "^5.1.7", + "ember-cli-htmlbars": "^1.0.10", + "ember-cli-htmlbars-inline-precompile": "^0.3.3" }, "ember-addon": { "configPath": "tests/dummy/config" diff --git a/tests/dummy/app/index.html b/tests/dummy/app/index.html index 5120bd7..2c02724 100644 --- a/tests/dummy/app/index.html +++ b/tests/dummy/app/index.html @@ -1,25 +1,25 @@ - - - - Dummy - - + + + + ember-cli-text-field-mixins + + - {{content-for "head"}} + {{content-for "head"}} - - + + - {{content-for "head-footer"}} - - - {{content-for "body"}} + {{content-for "head-footer"}} + + +{{content-for "body"}} - - + + - {{content-for "body-footer"}} - +{{content-for "body-footer"}} + diff --git a/tests/dummy/app/routes/application.js b/tests/dummy/app/routes/application.js new file mode 100644 index 0000000..096e3c5 --- /dev/null +++ b/tests/dummy/app/routes/application.js @@ -0,0 +1,3 @@ +import Ember from 'ember'; + +export default Ember.Route.extend({}); diff --git a/tests/dummy/app/routes/index.js b/tests/dummy/app/routes/index.js new file mode 100644 index 0000000..096e3c5 --- /dev/null +++ b/tests/dummy/app/routes/index.js @@ -0,0 +1,3 @@ +import Ember from 'ember'; + +export default Ember.Route.extend({}); diff --git a/tests/dummy/app/styles/app.css b/tests/dummy/app/styles/app.css deleted file mode 100644 index e69de29..0000000 diff --git a/tests/dummy/app/styles/app.scss b/tests/dummy/app/styles/app.scss new file mode 100644 index 0000000..e71f446 --- /dev/null +++ b/tests/dummy/app/styles/app.scss @@ -0,0 +1,14 @@ +@import "../../../../bower_components/bootswatch/spacelab/variables"; +//noinspection CssUnknownTarget +@import 'ember-cli-bootstrap3-variables.scss'; +//noinspection CssUnknownTarget +@import 'ember-cli-bootstrap3-sass'; +@import "../../../../bower_components/bootswatch/spacelab/bootswatch"; +//noinspection CssUnknownTarget +@import "ember-cli-font-awesome-sass"; + +body { + padding-top: 50px; + margin-bottom: 50%; +} + diff --git a/tests/dummy/app/templates/application.hbs b/tests/dummy/app/templates/application.hbs new file mode 100644 index 0000000..c2cf54a --- /dev/null +++ b/tests/dummy/app/templates/application.hbs @@ -0,0 +1,90 @@ + + +{{outlet}} diff --git a/tests/dummy/app/templates/index.hbs b/tests/dummy/app/templates/index.hbs new file mode 100644 index 0000000..e1f04dd --- /dev/null +++ b/tests/dummy/app/templates/index.hbs @@ -0,0 +1,56 @@ +
+
+

Demo

+
+

\{{input-text}}

+

+ By default, the \{{input-text}} will: clear its contents when the Escape key is pressed, + select any text when the input takes focus, and will autofocus will work across transitions and + re-rendering of the template. +

+

The following properties can be used to toggle the aforementioned behaviours.

+
    +
  • escapeKeyClears? defaults to true, set to false if you don't want this behaviour. +
    • +
  • focusSelectsText? defaults to true, set to false if you don't want this behaviour. +
    • +
+
+
+
+ Autofocus +
+ + {{input-text autofocus=true class="form-control" id="js-autofocus" escapeKeyClears?=false focusSelectsText?=false + placeholder="Autofocus Works Across Re-Renders" value="This textbox is focused..."}} +
+ 
\{{input-text autofocus=true class="form-control" escapeKeyClears?=false
+      focusSelectsText?=false placeholder="..." value="..."}}
+
+
+
+
+ Focus Selects Text +
+ + {{input-text class="form-control" escapeKeyClears?=false + placeholder="Autofocus Works Across Re-Renders" + value="Tab to or click into textbox to focus and select"}} +
+ 
\{{input-text class="form-control" escapeKeyClears?=false
+      placeholder="..." value="..."}}
+
+
+
+
+ Escape Press Clears +
+ + {{input-text class="form-control" id="js-escape-key-clears" placeholder="Escape Press Clears" + value="Press the escape key to clear the text..."}} +

+ +

+
+
+
\ No newline at end of file diff --git a/tests/integration/components/input-text-test.js b/tests/integration/components/input-text-test.js new file mode 100644 index 0000000..ffab892 --- /dev/null +++ b/tests/integration/components/input-text-test.js @@ -0,0 +1,11 @@ +import { moduleForComponent, test } from 'ember-qunit'; +import hbs from 'htmlbars-inline-precompile'; + +moduleForComponent('input-text', 'Integration | Component | input text', { + integration: true +}); + +test('it renders', function (assert) { + this.render(hbs`{{input-text}}`); + assert.equal(this.$().text().trim(), ''); +}); diff --git a/tests/unit/mixins/ctrl-enter-submits-form-test.js b/tests/unit/mixins/ctrl-enter-submits-form-test.js new file mode 100644 index 0000000..d5c4855 --- /dev/null +++ b/tests/unit/mixins/ctrl-enter-submits-form-test.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; +import CtrlEnterSubmitsFormMixin from 'ember-cli-text-field-mixins/mixins/ctrl-enter-submits-form'; +import { module, test } from 'qunit'; + +module('Unit | Mixin | ctrl enter submits form'); + +// Replace this with your real tests. +test('it works', function (assert) { + let CtrlEnterSubmitsFormObject = Ember.Object.extend(CtrlEnterSubmitsFormMixin); + let subject = CtrlEnterSubmitsFormObject.create(); + assert.ok(subject); +}); diff --git a/tests/unit/mixins/escape-key-clears-test.js b/tests/unit/mixins/escape-key-clears-test.js new file mode 100644 index 0000000..2b579a0 --- /dev/null +++ b/tests/unit/mixins/escape-key-clears-test.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; +import EscapeKeyClearsMixin from 'ember-cli-text-field-mixins/mixins/escape-key-clears'; +import { module, test } from 'qunit'; + +module('Unit | Mixin | escape key clears'); + +// Replace this with your real tests. +test('it works', function (assert) { + let EscapeKeyClearsObject = Ember.Object.extend(EscapeKeyClearsMixin); + let subject = EscapeKeyClearsObject.create(); + assert.ok(subject); +}); diff --git a/tests/unit/mixins/focus-selects-text-test.js b/tests/unit/mixins/focus-selects-text-test.js new file mode 100644 index 0000000..54d3212 --- /dev/null +++ b/tests/unit/mixins/focus-selects-text-test.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; +import FocusSelectsTextMixin from 'ember-cli-text-field-mixins/mixins/focus-selects-text'; +import { module, test } from 'qunit'; + +module('Unit | Mixin | focus selects text'); + +// Replace this with your real tests. +test('it works', function (assert) { + let FocusSelectsTextObject = Ember.Object.extend(FocusSelectsTextMixin); + let subject = FocusSelectsTextObject.create(); + assert.ok(subject); +}); diff --git a/tests/unit/mixins/trigger-focus-test.js b/tests/unit/mixins/trigger-focus-test.js new file mode 100644 index 0000000..5757b06 --- /dev/null +++ b/tests/unit/mixins/trigger-focus-test.js @@ -0,0 +1,12 @@ +import Ember from 'ember'; +import TriggerFocusMixin from 'ember-cli-text-field-mixins/mixins/trigger-focus'; +import { module, test } from 'qunit'; + +module('Unit | Mixin | trigger focus'); + +// Replace this with your real tests. +test('it works', function (assert) { + let TriggerFocusObject = Ember.Object.extend(TriggerFocusMixin); + let subject = TriggerFocusObject.create(); + assert.ok(subject); +});