-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
#1 Alpha.1 ready. Need to beef up tests. Too tired to do today. Demo …
…website available.
- Loading branch information
Showing
27 changed files
with
689 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 <repository-url>` 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}} | ||
|
||
<div class="form-group"> | ||
<label for="js-updated-on" class="control-label">Updated</label> | ||
{{input-date classNames="form-control" elementId="js-updated-on" date=anotherModel.updatedOn}} | ||
<p class="help-block">Use with bootstrap!</p> | ||
</div> | ||
|
||
([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"}} | ||
|
||
<div class="form-group"> | ||
<label for="js-from" class="control-label">Date From</label> | ||
{{input-iso8601 classNames="form-control" elementId="js-from" iso8601=anotherControllerProperty}} | ||
<p class="help-block">Use with bootstrap!</p> | ||
</div> | ||
|
||
([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 [email protected]: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 = <KEY> | ||
aws_secret_access_key = <SECRET> | ||
|
||
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/ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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, {}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
} | ||
} | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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); | ||
} | ||
} | ||
} | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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 | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'); | ||
} | ||
}) | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { default } from 'ember-cli-text-field-mixins/components/input-text'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,6 @@ | ||
{ | ||
"predef": [ | ||
"console" | ||
], | ||
"strict": false | ||
} |
Oops, something went wrong.