Socket
Socket
Sign inDemoInstall

marquee

Package Overview
Dependencies
3
Maintainers
1
Versions
4
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

Comparing version 0.1.1 to 0.2.0

77

index.js
(function (root, factory) {
if (typeof exports === 'object') {
module.exports = factory(require('animator'));
module.exports = factory(require('animator'), require('crel'), require('stylar'));
} else if (typeof define === 'function' && define.amd) {
define(['animator'], factory);
define(['animator', 'crel', 'stylar'], factory);
} else {
root.marquee = factory(root.animator);
root.marquee = factory(root.animator, root.crel, root.stylar);
}
}(this, function(animator){
}(this, function(animator, crel, stylar){

@@ -15,2 +15,66 @@ function manifestUnicorn(el, options) {

css = getComputedStyle(el),
container = crel('div', { class: el.className }),
width = parseFloat(css.width),
textElements,
propName, propValue,
xPos = 0,
nextIncrementTick = 0,
speed = (opts.speed || 1000) / 1000;
// extract the properties that need to be set
for (propName in css) {
propValue = css.getPropertyCSSValue(propName);
if (propValue) {
container.style[propName] = propValue.cssText;
}
}
container.style.position = 'relative';
container._original = el;
textElements = [
crel('span', el.innerText),
crel('span', el.innerText)
];
// initialise the text elements
textElements.forEach(function(text, index) {
text.style.font = [
css.fontVariant,
css.fontWeight,
css.fontSize,
css.fontFamily
].join(' ');
text.style.position = 'absolute';
text.style.left = '0px';
text.style.top = '0px';
text.style.width = width + 'px';
container.appendChild(text);
});
container._animation = animator(function(tick) {
// update the xposition of the text
stylar(textElements[0], 'transform', 'translateX(' + xPos + 'px) translateZ(0)');
stylar(textElements[1], 'transform', 'translateX(' + (xPos + width) + 'px) translateZ(0)');
// increment the xpos
if (tick > nextIncrementTick) {
xPos -= speed;
}
if (xPos < -width) {
xPos = 0;
// if we have a freeze time then wait
if (opts.freezeDelay) {
nextIncrementTick = tick + opts.freezeDelay;
}
}
});
/*
newEl = crel(css.display.slice(0, 6) === 'inline' ? 'span' : 'div'),
canvas = document.createElement('canvas'),

@@ -70,5 +134,6 @@ context = canvas.getContext('2d'),

});
*/
// add the canvas
el.parentNode.insertBefore(canvas, el);
el.parentNode.insertBefore(container, el);

@@ -78,3 +143,3 @@ // remove the element from the dom

return canvas;
return container;
}

@@ -81,0 +146,0 @@

6

package.json

@@ -9,5 +9,7 @@ {

],
"version": "0.1.1",
"version": "0.2.0",
"dependencies": {
"animator": "0.2.x"
"animator": "0.2.x",
"crel": "1.0.x",
"stylar": "0.2.x"
},

@@ -14,0 +16,0 @@ "devDependencies": {},

@@ -25,2 +25,11 @@ # marquee

});
```
Also, `marquee` can detect whether the text fits in it's container using the [measureText](http://www.w3.org/TR/2dcontext/#dom-context-2d-measuretext) for the canvas 2D context:
```js
// only make a marquee if the text overflows
marque('h1', {
checkOverflow: true
});
```

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc