Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/igorpreston/ember-typed
Autotyping strings for Ember.js apps.
https://github.com/igorpreston/ember-typed
ember ember-cli ember-cli-addon typed-js
Last synced: 2 months ago
JSON representation
Autotyping strings for Ember.js apps.
- Host: GitHub
- URL: https://github.com/igorpreston/ember-typed
- Owner: igorpreston
- License: mit
- Created: 2016-03-10T10:58:41.000Z (almost 9 years ago)
- Default Branch: master
- Last Pushed: 2017-06-02T14:41:04.000Z (over 7 years ago)
- Last Synced: 2024-11-16T17:40:17.987Z (2 months ago)
- Topics: ember, ember-cli, ember-cli-addon, typed-js
- Language: JavaScript
- Homepage:
- Size: 17.6 KB
- Stars: 9
- Watchers: 2
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ember-typed
This addon is a go-to solution for integration of [Typed.js](https://github.com/mattboldt/typed.js/) library into Ember.js as component.
## Installation
```
ember install ember-typed
```## How to use
```
{{typed-string}}
```To correctly pass array of strings, you will need to define the property on your Ember.Controller first:
```
export default Ember.Controller.extend({
typedStrings: ["first sentence", "second sentence"]
});
```
Then pass it to component:
```
{{typed-string strings=typedStrings}}
```### Available properties
```
// Array of strings for auto-typing
strings: ["First sentence.", "Second sentence."],
// Optionally use an HTML element to grab strings from (must wrap each string in a)
stringsElement: null,
// typing speed
typeSpeed: 0,
// time before typing starts
startDelay: 0,
// backspacing speed
backSpeed: 0,
// time before backspacing
backDelay: 500,
// loop
loop: false,
// false = infinite
loopCount: false,
// show cursor
showCursor: true,
// character for cursor
cursorChar: "|",
// attribute to type (null == text)
attr: null,
// either html or text
contentType: 'html',
// call when done callback function
callback: function() {},
// starting callback function before each string
preStringTyped: function() {},
//callback for every typed string
onStringTyped: function() {},
// callback for reset
resetCallback: function() {}
```### If you want blinking cursor...
Add this CSS to your app styles.
```
.typed-cursor {
opacity: 1;
-webkit-animation: blink 0.7s infinite;
-moz-animation: blink 0.7s infinite;
animation: blink 0.7s infinite;
}@keyframes blink {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}@-webkit-keyframes blink {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}@-moz-keyframes blink {
0% { opacity:1; }
50% { opacity:0; }
100% { opacity:1; }
}
```## Anything else?
Please refer to the [Typed.js](https://github.com/mattboldt/typed.js/) library for docs on advanced features.## Running
* `ember server`
* Visit your app at http://localhost:4200.## Running Tests
* `npm test` (Runs `ember try:testall` to test your addon against multiple Ember versions)
* `ember test`
* `ember test --server`## Building
* `ember build`
For more information on using ember-cli, visit [http://www.ember-cli.com/](http://www.ember-cli.com/).
## Credits
Thanks to [mattboldt](https://github.com/mattboldt) for such awesome library!