A (stupid) AngularJS component for tickers.
Here.
Note: A copy of the demo code is inside the demo folder of this
repository.
<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.
<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.
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);
});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.
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']);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