Skip to content

Commit

Permalink
#1 Alpha.1 ready. Need to beef up tests. Too tired to do today. Demo …
Browse files Browse the repository at this point in the history
…website available.
  • Loading branch information
nadnoslen committed Mar 2, 2017
1 parent 920092c commit ba02553
Show file tree
Hide file tree
Showing 27 changed files with 689 additions and 35 deletions.
27 changes: 27 additions & 0 deletions .codeclimate.yml
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/
202 changes: 192 additions & 10 deletions README.md
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/
7 changes: 7 additions & 0 deletions addon/components/input-text.js
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, {});
50 changes: 50 additions & 0 deletions addon/mixins/ctrl-enter-submits-form.js
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);
}
}
}
}
});
41 changes: 41 additions & 0 deletions addon/mixins/escape-key-clears.js
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);
}
}
}
});
21 changes: 21 additions & 0 deletions addon/mixins/focus-selects-text.js
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
});
15 changes: 15 additions & 0 deletions addon/mixins/trigger-focus.js
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');
}
})
});
1 change: 1 addition & 0 deletions app/components/input-text.js
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export { default } from 'ember-cli-text-field-mixins/components/input-text';
6 changes: 6 additions & 0 deletions blueprints/.jshintrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
{
"predef": [
"console"
],
"strict": false
}
Loading

0 comments on commit ba02553

Please sign in to comment.