An AngularJS component for tickers.
npm install angular-tickerA (stupid) AngularJS component for tickers.
* Demo
* Usage
* How to put it in your app
* API
* Disclaimer
Here.
Note: A copy of the demo code is inside the demo folder of this
repository.
``html`
length="'7'"
period="'250'">
Note that:
* text is the text to displaylength
* is the number of cells for the tickerperiod
* is the time interval after which a character moves to the next cell
(measured in milliseconds)
Also, keep in mind that styling is up to you. See the Styling
section.
`html`
length="your_length"
period="your_period">
...provided that your_text, your_length, your_period are suitable values
available inside the enclosing scope.
Parameters are all optional, i.e. you can even write something like this:
`html`
When parameters are omitted default values from the MslTickerDefaults serviceTEXT
are used. This service is actually a plain JS object with a , LENGTH andPERIOD properties representing the default values:
`javascript`
angular.module('testDefaults', ['msl.ticker']).
controller('TestDefaultsCtrl' function (MslTickerDefaults) {
console.log(MslTickerDefaults.TEXT); // 'Talk is cheap. Show me the code!'
console.log(MslTickerDefaults.LENGTH); // 7
console.log(MslTickerDefaults.PERIOD); // 250
});
If you don't like these defaults, you can change them inside a config block:
`javascript`
angular.module('testDefaults', ['msl.ticker']).
config(function (MslTickerDefaultsProvider) {
MslTickerDefaultsProvider.text(':-D');
MslTickerDefaultsProvider.length(5);
MslTickerDefaultsProvider.period(500);
});
The HTML template for the ticker is just a sequence of divs (withdisplay: inline-block;), e.g.:
`html`
F
O
O
B
A
R
Use the msl-ticker > div selector for further customization. A nice example
is inside the demo folder.
Keep in mind that the purpose of the ticker is to move characters from cell to
cell: how a cell can be styled is not (completely) part of the API.
The ticker component is available inside an npm package
called angular-ticker:
`bash`
npm install angular-ticker
Once installed, remember to load the code:
`html`
...and to declare msl.ticker as a dependency:
`javascript``
var your_app = angular.module('yourApp', ['msl.ticker']);
Here is a more detailed, official description of what the ticker does
and what you should (and should not) do when using the ticker.
Any behavior not explicitly documented there is to be intended as
implementation-specific and should not be relied on.
While nicely written and documented, this code was developed just for fun and
is not tested (not in an automated fashion, at least). That being said, it
seems to me that is working well :D
Also note that this code is MIT-licensed.
You have read all this document?! Thank you. Here is a little gift: the demo
website of this repo supports text, length and period customization through
query parameters. You can use this feature to send funny messages to your
friends, e.g.:
https://marcoliceti.github.io/angular-ticker/demo/#!?text=eat%20my%20shorts