Needlessly Provoking Marsupials

    ember-cli-textarea-autosize

    1.1.1 • Public • Published

    ember-cli-textarea-autosize GitHub version

    npm version downloads CircleCI Code Climate Dependencies ember-observer-badge License

    An Ember addon that provides a textarea component that adjusts its height according to the supplied text. Included are also several mixins that can be used to ensure autofocus works properly, focused text inputs have their text selected, and ctrl+enter will submit the nearest form.

    This addon installs from bower and uses the autosize.js library from Jack Moore: https://github.com/jackmoore/autosize.

    Tested Against

    ember-lts-2.4 ember-lts-2.8 ember-lts-2.12

    ember-release ember-beta ember-canary

    Demo

    The demonstration web application can be found here: http://ember-cli-textarea-autosize.cybertooth.io/.

    What Does This Addon Do?

    This addon gives you access to the following component:

    • textarea-autosize - an extension of the Ember.TextArea that produces a <textarea> that grows in height to fit the supplied content.

    Mixins Moved To ember-cli-text-support-mixins Add-On

    Before 1.1 the TriggerFocus, FocusSelectsText, and CtrlEnterSubmitsForm mixins were available in this add-on. They are no longer here, and if you were using them your code breaks.

    You should be able to easily move your code over to the ember-cli-text-support-mixins variation:

    // import TriggerFocus from 'ember-cli-textarea-autosize/mixins/trigger-focus'
    // ...now becomes ...
    import TriggerFocus from 'ember-cli-text-support-mixins/mixins/trigger-focus';
     
    // import FocusSelectsTextMixin from 'ember-cli-textarea-autosize/mixins/focus-selects-text';
    // ... now becomes ...
    import FocusSelectsText from 'ember-cli-text-support-mixins/mixins/focus-selects-text';
     
    // import CtrlEnterSubmitsFormMixin from 'ember-cli-textarea-autosize/mixins/ctrl-enter-submits-form';
    // ... now becomes ...
    import CtrlEnterSubmitsForm from 'ember-cli-text-support-mixins/mixins/ctrl-enter-submits-form';

    Head over here for the mixin documentation.

    Requirements

    • Ember >= 1.13.0
    • Ember CLI

    Installation

    Like most other Ember addons:

    ember install ember-cli-textarea-autosize
    

    Upgrading

    When working through the Ember upgrade process, I recommend invoking the ember install ember-cli-textarea-autosize command once you are done to get the latest version of the addon.

    Usage

    This textarea component extends the ember-cli-text-support-mixins add-on's text-area component. This text area does not accept a block, instead always pass your value to the value attribute.

    {{textarea-autosize value=someModel.largeTextAttribute}}

    Minimum Height (default is 2 rows)

    If you need to set the minimum height of the <textarea>, set the rows property:

    {{textarea-autosize rows=6 ...}}

    ...or you can specify the min-height property

    {{textarea-autosize min-height="200px" ...}}

    Maximum Height (when to start scrolling)

    The <textarea> will continue to grow indefinitely unless you set the max-height property:

    {{textarea-autosize max-height="500px" ...}}

    For additional information about the Ember.TextArea:

    Extras

    The {{textarea-autosize}} automatically:

    1. Incorporates a mixin that corrects a quirk in Ember where the autofocus=true feature works across template transitions.
    2. Includes a mixin that will select any text when the textarea is focused.
    3. Will attempt to submit the nearest form when CTRL+ENTER is pressed.

    Check out these extra mixins at ember-cli-text-support-mixins.


    Ember Addon Building And Testing

    Setup

    Checkout

    git clone git@github.com:cybertoothca/ember-cli-textarea-autosize.git
    

    With NPM

    npm install
    

    With Yarn

    yarn
    

    Running The Dummy Application

    Running Addon Tests

    • npm test (Runs ember try:testall to test your addon against multiple Ember versions)
    • ember test
    • ember test --server

    Building The Addon

    • ember build

    For more information on using ember-cli, visit 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.
    2. From the other Ember project that you wish to test this addon in, execute the following command: npm link ember-cli-textarea-autosize.
    3. 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-textarea-autosize": "*". 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.
    4. Lastly, in the other Ember project run the blueprint for the ember-cli-textarea-autosize addon by executing: ember g ember-cli-textarea-autosize. This will install the appropriate Ember Addons and Bower dependencies.

    Unlinking

    1. Remove the addon from your local node repository with the following command (that can be run anywhere): npm uninstall -g ember-cli-textarea-autosize
    2. Remove the reference to the ember-cli-textarea-autosize in your other project's package.json.
    3. 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-textarea-autosize.cybertooth.io/

    Releasing & Publishing To NPM

    npm version x.y.z-sub.#
    git push
    git push --tags
    npm publish
    

    Install

    npm i ember-cli-textarea-autosize

    DownloadsWeekly Downloads

    211

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    310 kB

    Total Files

    37

    Last publish

    Collaborators

    • nadnoslen