flex-text - npm Package Compare versions

Comparing version 1.0.7 to 1.1.0

demo/main.js

 'use strict';
-var size = document.querySelector('#size');
+var width = document.querySelector('#width');
 var dollar = document.querySelector('#dollar');
@@ -7,5 +7,6 @@ var spacing = document.querySelector('#spacing');
 
-var sizeVal = document.querySelector('#size-val');
+var widthVal = document.querySelector('#width-val');
 var dollarVal = document.querySelector('#dollar-val');
 var spacingVal = document.querySelector('#spacing-val');
+var ratioVal = document.querySelector('#ratio-val');
 
@@ -18,3 +19,2 @@ var intPart = document.querySelector('.integer');
     container: container,
-    styles: { fontFamily: 'Helvetica, Arial, "Hiragino Sans GB", "Microsoft YaHei", "WenQuan Yi Micro Hei", sans-serif' },
     items: [
@@ -50,2 +50,16 @@ {
 
+function map(arr, fn) {
+    if (typeof arr.map === 'function') {
+        return arr.map(fn);
+    }
+
+    var res = [];
+
+    for (var i = 0, max = arr.length; i < max; i++) {
+        res.push(fn(arr[i], i, arr));
+    }
+
+    return res;
+}
+
 function attachEvent(elem, type, handler) {
@@ -63,6 +77,6 @@ if (typeof elem.addEventListener === 'function') {
 ], function (type) {
-    attachEvent(size, type, function () {
-        var value = size.value;
+    attachEvent(width, type, function () {
+        var value = width.value;
         container.style.width = value + 'px';
-        sizeVal.textContent = sizeVal.innerText = value;
+        widthVal.textContent = widthVal.innerText = value;
         flexText.update();
@@ -73,3 +87,3 @@ });
         spacingVal.textContent = spacingVal.innerText = value;
-        flexText.extendStyles({ spacing: value });
+        flexText.setSpacing(value);
         flexText.update();
@@ -81,4 +95,4 @@ });
         dollarVal.textContent = dollarVal.innerText = value;
-        intPart.textContent = intPart.innerText = p[0];
-        floatPart.textContent = floatPart.innerText = p[1];
+        intPart.textContent = intPart.innerText = p[0] || '';
+        floatPart.textContent = floatPart.innerText = p[1] || '';
         dotPart.textContent = dotPart.innerText = p[1] ? '.' : '';
@@ -88,1 +102,22 @@ flexText.update();
 });
+
+var ratios = document.querySelectorAll('.flex-ratio');
+
+forEach(ratios, function (el) {
+    forEach([
+        'input',
+        'change',
+    ], function (type) {
+        attachEvent(el, type, function () {
+            var vals = map(ratios, function (e, i) {
+                flexText.items[i].flex = parseFloat(e.value);
+
+                return e.value;
+            });
+
+            ratioVal.textContent = ratioVal.innerText = vals.join(':');
+
+            flexText.update();
+        });
+    });
+});

index.js

@@ -26,7 +26,2 @@ (function (root, factory) {
     var BASE_FONT_SIZE = 100;
-    var DEFAULT_STYLES = {
-        fontFamily: 'sans-serif',
-        fontWeight: 'normal',
-        spacing: 0,
-    };
 
@@ -49,22 +44,12 @@ function async(fn) {
 
-    function extend() {
-        if (typeof Object.assign === 'function') {
-            return Object.assign.apply(Object, arguments);
+    function getStyle(el, prop) {
+        if (typeof window.getComputedStyle === 'function') {
+            return getComputedStyle(el)[prop];
         }
 
-        var dest = arguments[0];
+        prop = prop.replace(/-(\w)/g, function (m, $1) {
+            return $1.toUpperCase();
+        });
 
-        for (var i = 1, max = arguments.length; i < max; i++) {
-            var src = arguments[i];
-
-            if (!src) {
-                continue;
-            }
-
-            for (var prop in src) {
-                dest[prop] = src[prop];
-            }
-        }
-
-        return dest;
+        return el.currentStyle[prop];
     }
@@ -100,8 +85,4 @@
         this.items = [];
-        this.styles = extend({}, DEFAULT_STYLES);
+        this.spacing = options.spacing || 0;
 
-        if (options.styles) {
-            this.extendStyles(options.styles);
-        }
-
         if (options.items && options.items.length) {
@@ -120,11 +101,2 @@ var self = this;
 
-    FlexText.setDefaultStyles = function setDefaultStyles(styles) {
-        return extend(DEFAULT_STYLES, styles);
-    };
-
-    FlexText.prototype.extendStyles = function extendStyles(styles) {
-        extend(this.styles, styles);
-        return extend({}, this.styles);
-    };
-
     FlexText.prototype.attachTo = function attachTo(container) {
@@ -137,2 +109,6 @@ checkElem(container, 'container');
 
+    FlexText.prototype.setSpacing = function setSpacing(val) {
+        this.spacing = parseFloat(val) || 0;
+    };
+
     FlexText.prototype.addItem = function addItem(item) {
@@ -147,3 +123,6 @@ if (!item) return;
 
-        this.items.push(extend({}, item));
+        this.items.push({
+            elem: item.elem,
+            flex: item.flex,
+        });
     };
@@ -154,7 +133,9 @@
 
-        forEach(this.items, function (v, i, a) {
-            if (elem === v.elem) {
-                a.splice(i, 1);
+        var items = this.items;
+
+        for (var i = 0, max = items.length; i < max; i++) {
+            if (elem === items[i].elem) {
+                return items.splice(i, 1);
             }
-        });
+        }
     };
@@ -164,3 +145,3 @@
         var items = this.items;
-        var styles = this.styles;
+        var spacing = this.spacing;
         var container = this.container;
@@ -175,5 +156,2 @@
 
-        span.style.fontWeight = styles.fontWeight;
-        span.style.fontFamily = styles.fontFamily;
-
         forEach(items, function (item) {
@@ -190,5 +168,8 @@ var elem = item.elem;
 
-            span.textContent = span.innerText = text;
+            span.style.fontWeight = getStyle(elem, 'font-weight');
+            span.style.fontFamily = getStyle(elem, 'font-family');
             span.style.fontSize = fontSize + 'px';
 
+            span.textContent = span.innerText = text;
+
             var width = span.clientWidth;
@@ -200,3 +181,3 @@
 
-        totalSpace -= parseFloat(styles.spacing) * whiteSpaceCount;
+        totalSpace -= parseFloat(spacing) * whiteSpaceCount;
 
@@ -214,4 +195,3 @@ return map(widths, function (w, i) {
     FlexText.prototype.render = function render() {
-        var spacing = this.styles.spacing;
-        var fontFamily = this.styles.fontFamily;
+        var spacing = this.spacing;
 
@@ -223,3 +203,2 @@ var result = this.alloc();
 
-            elem.style.fontFamily = fontFamily;
             elem.style.fontSize = Math.floor(result[idx]) + 'px';
@@ -226,0 +205,0 @@

package.json

 {
   "name": "flex-text",
-  "version": "1.0.7",
+  "version": "1.1.0",
   "description": "Mastering font-size like flexbox!",
@@ -5,0 +5,0 @@ "main": "index.js",

README.md

@@ -28,7 +28,3 @@ # flex-text
     container: document.querySelector('.container'),
-    styles: {
-        fontFamily: 'Arial, sans-serif',
-        fontWeight: 'bold',
-        spacing: 0,
-    },
+    spacing: 0,
     items: [{
@@ -76,16 +72,8 @@ elem: document.querySelector('.first'),
 
-#### styles: object
+#### spacing: number
 
-Basic styles for text rendering:
+White space between each item.
 
-```javascript
-{
-    fontFamily: string,  // css font-family string
-    fontWeight: string,  // css font-weight string
-    spacing: number,     // spacing around each flex item
-}
-```
+You can also modify spacing by calling `instance#setSpacing()`.
 
-You can also extend styles by calling `instance#extendStyles()`.
-
 #### items: array
@@ -104,18 +92,10 @@
 
-### FlexText.setDefaultStyles(styles: object)
+### instance#update()
 
-Extend the default styles which is:
+Update DOM layout at next frame.
 
-```javascript
-{
-    fontFamily: 'sans-serif',
-    fontWeight: 'normal',
-    spacing: 0,
-}
-```
+### instance#setSpacing(value: number)
 
-### instance#extendStyles(styles: object)
+Change white space between items.
 
-Extend styles on current instance.
-
 ### instance#addItem(item: object)
@@ -125,2 +105,6 @@
 
+### instance#remove(elem: element)
+
+Remove item from list by giving `item.elem`.
+
 ### instance#alloc()
@@ -134,8 +118,4 @@
 
-### instance#update()
-
-Update DOM layout at next frame.
-
 ## License
 
 MIT.

No alert changes

Improved metrics

Total package byte prevSize

1027869

increased by56%

Lines of code

290

increased by3.57%

Worsened metrics

Number of lines in readme file

117

decreased by-14.6%

No dependency changes