angular-ticker
v1.0.0
Published
An AngularJS component for tickers.
Downloads
9
Readme
angular-ticker
A (stupid) AngularJS component for tickers.
Table of contents
Demo
Here.
Note: A copy of the demo code is inside the demo folder of this
repository.
Usage
Basic
<msl-ticker
text="'Talk is cheap. Show me the code!'"
length="'7'"
period="'250'">
</msl-ticker>Note that:
textis the text to displaylengthis the number of cells for the tickerperiodis 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.
Dynamic
<msl-ticker
text="your_text"
length="your_length"
period="your_period">
</msl-ticker>...provided that your_text, your_length, your_period are suitable values
available inside the enclosing scope.
Defaults
Parameters are all optional, i.e. you can even write something like this:
<msl-ticker></msl-ticker>When parameters are omitted default values from the MslTickerDefaults service
are used. This service is actually a plain JS object with a TEXT, LENGTH and
PERIOD properties representing the default values:
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:
angular.module('testDefaults', ['msl.ticker']).
config(function (MslTickerDefaultsProvider) {
MslTickerDefaultsProvider.text(':-D');
MslTickerDefaultsProvider.length(5);
MslTickerDefaultsProvider.period(500);
});Styling
The HTML template for the ticker is just a sequence of divs (with
display: inline-block;), e.g.:
<msl-ticker>
<div> </div>
<div> </div>
<div>F</div>
<div>O</div>
<div>O</div>
<div> </div>
<div>B</div>
<div>A</div>
<div>R</div>
</msl-ticker>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.
How to put it in your app
The ticker component is available inside an npm package
called angular-ticker:
npm install angular-tickerOnce installed, remember to load the code:
<html>
<head></head>
<body>
<script src="node_modules/angular-ticker/ticker.js"></script>
</body>
</html>...and to declare msl.ticker as a dependency:
var your_app = angular.module('yourApp', ['msl.ticker']);API
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.
Disclaimer
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.
Surprise!
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