marquee - npm Package Compare versions

Comparing version 0.1.1 to 0.2.0

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 @@

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": {},

README.md

@@ -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
+});
 ```

No alert changes

Improved metrics

Total package byte prevSize

7334

increased by50.69%

Lines of code

149

increased by55.21%

Number of lines in readme file

34

increased by36%

Worsened metrics

Dependency count

3

increased by200%

Dependency changes

• + Addedcrel@1.0.x

• + Addedstylar@0.2.x

• + Addedcrel@1.0.0(transitive)

• + Addedstylar@0.2.2(transitive)