add styletags

diff --git a/CHANGELOG.md b/CHANGELOG.md
index fd8efd6ae7fbaa8a22b1b0572bd4fe78eb96cd49..1f9c07d70fd0489277354317b02d5636baa4086e 100644 (file)
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -22,6 +22,7 @@ The document follows the conventions described in [“Keep a CHANGELOG”](http:
 - added `npm build:dev` to let you develop without getting too annoyed
 - added `beziere()` and `steps()` to generate easing functions
 - added `insertAfter()` and `insertBefore`
+- added `SVG.Style` which can be created with `style()` or `fontface()`
 
 ### Removed
 - removed `SVG.Array.split()` function

diff --git a/dist/svg.js b/dist/svg.js
index 05e29891902c0272ed8db18eefc978e98ea30a86..bf77e3a3ac8ecb56dbd93d167f3d0286a5900924 100644 (file)
--- a/dist/svg.js
+++ b/dist/svg.js
@@ -6,7 +6,7 @@
 * @copyright Wout Fierens <wout@mick-wout.com>
 * @license MIT
 *
-* BUILT: Thu Nov 08 2018 11:10:36 GMT+0100 (GMT+01:00)
+* BUILT: Thu Nov 08 2018 11:29:15 GMT+0100 (GMT+01:00)
 */;
 var SVG = (function () {
   'use strict';
@@ -255,6 +255,12 @@ var SVG = (function () {
     return s.toLowerCase().replace(/-(.)/g, function (m, g) {
       return g.toUpperCase();
     });
+  } // Convert camel cased string to string seperated
+
+  function unCamelCase(s) {
+    return s.replace(/([A-Z])/g, function (m, g) {
+      return '-' + g.toLowerCase();
+    });
   } // Capitalize first letter of a string
 
   function capitalize(s) {
@@ -6636,6 +6642,63 @@ var SVG = (function () {
   });
   register(Mask);
 
+  function cssRule(selector, rule) {
+    if (!selector) return '';
+    if (!rule) return selector;
+    var ret = selector + '{';
+
+    for (var i in rule) {
+      ret += unCamelCase(i) + ':' + rule[i] + ';';
+    }
+
+    ret += '}';
+    return ret;
+  }
+
+  var Style =
+  /*#__PURE__*/
+  function (_Element) {
+    _inherits(Style, _Element);
+
+    function Style(node) {
+      _classCallCheck(this, Style);
+
+      return _possibleConstructorReturn(this, _getPrototypeOf(Style).call(this, nodeOrNew('style', node), Style));
+    }
+
+    _createClass(Style, [{
+      key: "words",
+      value: function words(w) {
+        this.node.textContent += w || '';
+        return this;
+      }
+    }, {
+      key: "font",
+      value: function font(name, src) {
+        var params = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+        return this.rule('@font-face', _objectSpread({
+          fontFamily: name,
+          src: src
+        }, params));
+      }
+    }, {
+      key: "rule",
+      value: function rule(selector, obj) {
+        return this.words(cssRule(selector, obj));
+      }
+    }]);
+
+    return Style;
+  }(Element);
+  registerMethods('Element', {
+    style: function style(selector, obj) {
+      return this.put(new Style()).rule(selector, obj);
+    },
+    fontface: function fontface(name, src, params) {
+      return this.put(new Style()).font(name, src, params);
+    }
+  });
+
   var _Symbol =
   /*#__PURE__*/
   function (_Container) {
@@ -6847,6 +6910,7 @@ var SVG = (function () {
     Rect: Rect,
     Shape: Shape,
     Stop: Stop,
+    Style: Style,
     Symbol: _Symbol,
     Text: Text,
     TextPath: TextPath,
@@ -6857,6 +6921,7 @@ var SVG = (function () {
     radians: radians,
     degrees: degrees,
     camelCase: camelCase,
+    unCamelCase: unCamelCase,
     capitalize: capitalize,
     proportionalSize: proportionalSize,
     getOrigin: getOrigin,

diff --git a/src/elements/Style.js b/src/elements/Style.js
new file mode 100644 (file)
index 0000000..5c25893
--- /dev/null
+++ b/src/elements/Style.js
@@ -0,0 +1,51 @@
+import { nodeOrNew } from '../utils/adopter.js'
+import { registerMethods } from '../utils/methods.js'
+import { unCamelCase } from '../utils/utils.js'
+import Element from './Element.js'
+
+function cssRule (selector, rule) {
+  if (!selector) return ''
+  if (!rule) return selector
+
+  var ret = selector + '{'
+
+  for (var i in rule) {
+    ret += unCamelCase(i) + ':' + rule[i] + ';'
+  }
+
+  ret += '}'
+
+  return ret
+}
+
+export default class Style extends Element {
+  constructor (node) {
+    super(nodeOrNew('style', node), Style)
+  }
+
+  words (w) {
+    this.node.textContent += (w || '')
+    return this
+  }
+
+  font (name, src, params = {}) {
+    return this.rule('@font-face', {
+      fontFamily: name,
+      src: src,
+      ...params
+    })
+  }
+
+  rule (selector, obj) {
+    return this.words(cssRule(selector, obj))
+  }
+}
+
+registerMethods('Element', {
+  style (selector, obj) {
+    return this.put(new Style()).rule(selector, obj)
+  },
+  fontface (name, src, params) {
+    return this.put(new Style()).font(name, src, params)
+  }
+})

diff --git a/src/main.js b/src/main.js
index 278e8fd8e647175e8137e8d03c8d417ea41bc125..8a7fd9648d561485b521527bc4a072a122f76f6b 100644 (file)
--- a/src/main.js
+++ b/src/main.js
@@ -105,6 +105,7 @@ export { default as Polyline } from './elements/Polyline.js'
 export { default as Rect } from './elements/Rect.js'
 export { default as Shape } from './elements/Shape.js'
 export { default as Stop } from './elements/Stop.js'
+export { default as Style } from './elements/Style.js'
 export { default as Symbol } from './elements/Symbol.js'
 export { default as Text } from './elements/Text.js'
 export { default as TextPath } from './elements/TextPath.js'

diff --git a/src/utils/utils.js b/src/utils/utils.js
index e3c911110ca84706fddb9b4dfdd65e1307e3d355..64c0eed8e3e0583ea545e2fe513a60d0f4a64303 100644 (file)
--- a/src/utils/utils.js
+++ b/src/utils/utils.js
@@ -41,6 +41,13 @@ export function camelCase (s) {
   })
 }
 
+// Convert camel cased string to string seperated
+export function unCamelCase (s) {
+  return s.replace(/([A-Z])/g, function (m, g) {
+    return '-' + g.toLowerCase()
+  })
+}
+
 // Capitalize first letter of a string
 export function capitalize (s) {
   return s.charAt(0).toUpperCase() + s.slice(1)

diff --git a/todo.md b/todo.md
index db0ee660659b2e2eeb033a13146247351a6ef019..c4536baf669c5b20b15003ea28f97da4bfd47f7d 100644 (file)
--- a/todo.md
+++ b/todo.md
@@ -9,6 +9,7 @@
 - Element.js
   - svg
 - attr.js
+- Style.js