Skip to content

Commit

Permalink
#30 Using all of the ct-emberjs-bling
Browse files Browse the repository at this point in the history
  • Loading branch information
@nadnoslen
nadnoslen committed Nov 12, 2018
1 parent 3b3f607 commit 66df229
Show file tree
Hide file tree
Showing 5 changed files with 170 additions and 201 deletions.
4 changes: 2 additions & 2 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,8 +47,8 @@
"@fortawesome/free-solid-svg-icons": "^5.5.0",
"bootstrap": "^4.1.0",
"broccoli-asset-rev": "^2.4.5",
"clipboard": "^1.7.1",
"ct-emberjs-bling": "^0.0.1-rc.2",
"clipboard": "^2.0.2",
"ct-emberjs-bling": "^0.0.1-rc.4",
"ember-ajax": "^3.0.0",
"ember-auto-import": "^1.2.15",
"ember-cli": "~2.18.2",
Expand Down
15 changes: 3 additions & 12 deletions tests/dummy/app/templates/application.hbs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,18 +16,9 @@

<section class="my-3">
<div class="container">
<a href="https://badge.fury.io/js/ember-cli-text-support-mixins" target="_blank">
<img alt="npm version" class="shadow" src="https://badge.fury.io/js/ember-cli-text-support-mixins.svg"></a>
<a href="https://circleci.com/gh/cybertoothca/ember-cli-text-support-mixins" target="_blank">
<img alt="built with ember-cli-2.18" class="shadow"
src="https://img.shields.io/badge/Built_With_ember--cli-2.18.2-orange.svg"></a>
{{#copy-install-to-clipboard}}
<img
alt="click to copy install command"
class="shadow"
src="https://img.shields.io/badge/Install-ember_install_ember--cli--text--support--mixins-lightgray.svg"
title="Click to copy the intall command to your clipboard.">
{{/copy-install-to-clipboard}}
{{badge-fury-io appName=(read-config "APP.name")}}
{{badge-built-with appName=(read-config "APP.name") emberCliVersion="2.18.2"}}
{{badge-install-command appName=(read-config "APP.name") version=(app-version versionOnly=true)}}
</div>
</section>

Expand Down
95 changes: 43 additions & 52 deletions tests/dummy/app/templates/demo.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,56 +1,47 @@
<section class="my-3">
<div class="container">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4 col-xl-3">
<div class="list-group">

<div class="list-group-item list-group-item-dark">
<div class="d-flex w-100 justify-content-between">
<h4 class="mb-1">Textbox</h4>
<code class="small">\{{input-text}}</code>
</div>
</div>

{{#link-to "demo.index" class="list-group-item list-group-item-action"}}
Autofocus
{{/link-to}}
{{#link-to "demo.input-text-select-text" class="list-group-item list-group-item-action"}}
Select Text
{{/link-to}}
{{#link-to "demo.input-text-escape-clears" class="list-group-item list-group-item-action"}}
<kbd class="shadow">ESC</kbd> Clears
{{/link-to}}
{{#link-to "demo.input-text-enter-submits" class="list-group-item list-group-item-action"}}
<kbd class="shadow">ENTER</kbd> Submits
{{/link-to}}
{{#link-to "demo.input-text-ctrl-enter-submits" class="list-group-item list-group-item-action"}}
<kbd class="shadow">CTRL+ENTER</kbd> Submits
{{/link-to}}
{{#section-demo class="my-3" as |section|}}
{{#section.list-group}}
<div class="list-group-item list-group-item-dark">
<div class="d-flex w-100 justify-content-between">
<h4 class="mb-1">Textbox</h4>
<code class="small">\{{input-text}}</code>
</div>
</div>

<div class="list-group-item list-group-item-dark">
<div class="d-flex w-100 justify-content-between">
<h4 class="mb-1">Textarea</h4>
<code class="small">\{{text-area}}</code>
</div>
</div>
{{#link-to "demo.index" class="list-group-item list-group-item-action"}}
Autofocus
{{/link-to}}
{{#link-to "demo.input-text-select-text" class="list-group-item list-group-item-action"}}
Select Text
{{/link-to}}
{{#link-to "demo.input-text-escape-clears" class="list-group-item list-group-item-action"}}
<kbd class="shadow">ESC</kbd> Clears
{{/link-to}}
{{#link-to "demo.input-text-enter-submits" class="list-group-item list-group-item-action"}}
<kbd class="shadow">ENTER</kbd> Submits
{{/link-to}}
{{#link-to "demo.input-text-ctrl-enter-submits" class="list-group-item list-group-item-action"}}
<kbd class="shadow">CTRL+ENTER</kbd> Submits
{{/link-to}}

{{#link-to "demo.text-area-autofocus" class="list-group-item list-group-item-action"}}
Autofocus
{{/link-to}}
{{#link-to "demo.text-area-select-text" class="list-group-item list-group-item-action"}}
Select Text
{{/link-to}}
{{#link-to "demo.text-area-escape-clears" class="list-group-item list-group-item-action"}}
<kbd class="shadow">ESC</kbd> Clears
{{/link-to}}
{{#link-to "demo.text-area-ctrl-enter-submits" class="list-group-item list-group-item-action"}}
<kbd class="shadow">CTRL+ENTER</kbd> Submits
{{/link-to}}
</div>
</div>
<div class="col-sm-6 col-md-7 col-lg-8 col-xl-9">
{{outlet}}
<div class="list-group-item list-group-item-dark">
<div class="d-flex w-100 justify-content-between">
<h4 class="mb-1">Textarea</h4>
<code class="small">\{{text-area}}</code>
</div>
</div>
</div>
</section>

{{#link-to "demo.text-area-autofocus" class="list-group-item list-group-item-action"}}
Autofocus
{{/link-to}}
{{#link-to "demo.text-area-select-text" class="list-group-item list-group-item-action"}}
Select Text
{{/link-to}}
{{#link-to "demo.text-area-escape-clears" class="list-group-item list-group-item-action"}}
<kbd class="shadow">ESC</kbd> Clears
{{/link-to}}
{{#link-to "demo.text-area-ctrl-enter-submits" class="list-group-item list-group-item-action"}}
<kbd class="shadow">CTRL+ENTER</kbd> Submits
{{/link-to}}
{{/section.list-group}}
{{#section.outlet}}{{outlet}}{{/section.outlet}}
{{/section-demo}}
243 changes: 114 additions & 129 deletions tests/dummy/app/templates/index.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,134 +1,119 @@
<section>
<div class="container">
<h2 class="mt-3">Demo</h2>
<p>
{{#link-to "demo.index"}}Check out the the components and features in action.{{/link-to}}
</p>
{{#section-index demoRoute="demo.index"}}
<h3 class="mt-3"><code>\{{input-text ...}}</code></h3>

<h2 class="mt-3">Install</h2>
<p>
An <code>{{fa-icon "angle-left"}}input{{fa-icon "angle-right"}}</code> element for TEXT types that supports:
</p>
<ul>
<li>
<em>Working</em> autofocus between transitions: <code>autofocus=true</code>
</li>
<li>
Selecting input text on focus: <code>focusSelectsText?=true</code>
</li>
<li>
<kbd>ESC</kbd> clearing of text input contents: <code>escapeKeyClears?</code>
</li>
<li>
Enabling/disabling <em>closest</em> form submission with the pressing of <kbd>ENTER</kbd> or
<kbd>CTRL+ENTER</kbd>: <code>enterSubmitsForm?=true</code> and/or <code>ctrlEnterSubmitsForm?=true</code>
</li>
</ul>

<p>
<code>ember install ember-cli-text-support-mixins@^{{app-version versionOnly=true}}</code>
</p>
<h3 class="mt-3"><code>\{{text-area ...}}</code></h3>

<h2 class="mt-3">Synopsis</h2>
<p>
An <code>{{fa-icon "angle-left"}}textarea{{fa-icon "angle-right"}}</code> element that supports:
</p>
<ul>
<li>
<em>Working</em> autofocus between transitions: <code>autofocus=true</code>
</li>
<li>
Selecting input text on focus: <code>focusSelectsText?=true</code>
</li>
<li>
<kbd>ESC</kbd> clearing of text input contents: <code>escapeKeyClears?</code>
</li>
<li>
Enabling/disabling <em>closest</em> form submission with the pressing of <kbd>CTRL+ENTER</kbd>:
<code>ctrlEnterSubmitsForm?=true</code>
</li>
</ul>

<h3 class="mt-3"><code>\{{input-text ...}}</code></h3>
<h3 class="mt-3">Mixins</h3>
<p>Here's a list of tested mixins that you can mix into your components:</p>
<ul>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/aria-attributes.js"
target="_blank">
<code>import AriaAttributes from "ember-cli-text-support-mixins/mixins/aria-attributes";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/closest-form.js"
target="_blank">
<code>import ClosestForm from "ember-cli-text-support-mixins/mixins/closest-form";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/ctrl-enter-submits-form.js"
target="_blank">
<code>import CtrlEnterSubmitsForm from "ember-cli-text-support-mixins/mixins/ctrl-enter-submits-form";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/enter-submits-form.js"
target="_blank">
<code>import EnterSubmitsForm from "ember-cli-text-support-mixins/mixins/enter-submits-form";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/escape-key-clears.js"
target="_blank">
<code>import EscapeKeyClears from "ember-cli-text-support-mixins/mixins/escape-key-clears";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/focus-selects-text.js"
target="_blank">
<code>import FocusSelectsText from "ember-cli-text-support-mixins/mixins/focus-selects-text";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/form-submission-utils.js"
target="_blank">
<code>import FormSubmissionUtils from "ember-cli-text-support-mixins/mixins/form-submission-utils";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/trigger-focus.js"
target="_blank">
<code>import TriggerFocus from "ember-cli-text-support-mixins/mixins/trigger-focus";</code>
</a>
</li>
</ul>

<p>
An <code>{{fa-icon "angle-left"}}input{{fa-icon "angle-right"}}</code> element for TEXT types that supports:
</p>
<ul>
<li>
<em>Working</em> autofocus between transitions: <code>autofocus=true</code>
</li>
<li>
Selecting input text on focus: <code>focusSelectsText?=true</code>
</li>
<li>
<kbd>ESC</kbd> clearing of text input contents: <code>escapeKeyClears?</code>
</li>
<li>
Enabling/disabling <em>closest</em> form submission with the pressing of <kbd>ENTER</kbd> or
<kbd>CTRL+ENTER</kbd>: <code>enterSubmitsForm?=true</code> and/or <code>ctrlEnterSubmitsForm?=true</code>
</li>
</ul>

<h3 class="mt-3"><code>\{{text-area ...}}</code></h3>

<p>
An <code>{{fa-icon "angle-left"}}textarea{{fa-icon "angle-right"}}</code> element that supports:
</p>
<ul>
<li>
<em>Working</em> autofocus between transitions: <code>autofocus=true</code>
</li>
<li>
Selecting input text on focus: <code>focusSelectsText?=true</code>
</li>
<li>
<kbd>ESC</kbd> clearing of text input contents: <code>escapeKeyClears?</code>
</li>
<li>
Enabling/disabling <em>closest</em> form submission with the pressing of <kbd>CTRL+ENTER</kbd>:
<code>ctrlEnterSubmitsForm?=true</code>
</li>
</ul>

<h3 class="mt-3">Mixins</h3>
<p>Here's a list of tested mixins that you can mix into your components:</p>
<ul>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/aria-attributes.js"
target="_blank">
<code>import AriaAttributes from "ember-cli-text-support-mixins/mixins/aria-attributes";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/closest-form.js"
target="_blank">
<code>import ClosestForm from "ember-cli-text-support-mixins/mixins/closest-form";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/ctrl-enter-submits-form.js"
target="_blank">
<code>import CtrlEnterSubmitsForm from "ember-cli-text-support-mixins/mixins/ctrl-enter-submits-form";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/enter-submits-form.js"
target="_blank">
<code>import EnterSubmitsForm from "ember-cli-text-support-mixins/mixins/enter-submits-form";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/escape-key-clears.js"
target="_blank">
<code>import EscapeKeyClears from "ember-cli-text-support-mixins/mixins/escape-key-clears";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/focus-selects-text.js"
target="_blank">
<code>import FocusSelectsText from "ember-cli-text-support-mixins/mixins/focus-selects-text";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/form-submission-utils.js"
target="_blank">
<code>import FormSubmissionUtils from "ember-cli-text-support-mixins/mixins/form-submission-utils";</code>
</a>
</li>
<li>
<a
href="https://github.com/cybertoothca/ember-cli-text-support-mixins/blob/master/addon/mixins/trigger-focus.js"
target="_blank">
<code>import TriggerFocus from "ember-cli-text-support-mixins/mixins/trigger-focus";</code>
</a>
</li>
</ul>

<h3 class="mt-3">Included With</h3>
<p>This add-on has been included with the following projects/add-ons:</p>
<ul>
<li>
<a href="http://ember-cli-date-textbox.cybertooth.io/" target="_blank">
Date Textbox
</a>
</li>
<li>
<a href="http://ember-cli-textarea-autosize.cybertooth.io/" target="_blank">
Textarea Autosize
</a>
</li>
</ul>
</div>
</section>
<h3 class="mt-3">Included With</h3>
<p>This add-on has been included with the following projects/add-ons:</p>
<ul>
<li>
<a href="http://ember-cli-date-textbox.cybertooth.io/" target="_blank">
Date Textbox
</a>
</li>
<li>
<a href="http://ember-cli-textarea-autosize.cybertooth.io/" target="_blank">
Textarea Autosize
</a>
</li>
</ul>
{{/section-index}}
Loading

0 comments on commit 66df229

Please sign in to comment.