From 1c36b61e46565f13030a5af898f7094bc5e8852a Mon Sep 17 00:00:00 2001
From: Mahdi AICI <aici.mahdi@gmail.com>
Date: Tue, 25 Dec 2018 20:04:33 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8=20Add=20variable=20font=20dance?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/Dancer.js               |  3 +++
 src/dances/variable-font.js | 13 +++++++++++++
 2 files changed, 16 insertions(+)
 create mode 100644 src/dances/variable-font.js

diff --git a/src/Dancer.js b/src/Dancer.js
index ccef804..beff0f8 100644
--- a/src/Dancer.js
+++ b/src/Dancer.js
@@ -13,6 +13,7 @@ import swing, { reset as swingReset } from './dances/swing.js'
 import neon, { reset as neonReset } from './dances/neon.js'
 import kern, { reset as kernReset } from './dances/kern.js'
 import fontSize, { reset as fontSizeReset } from './dances/font-size.js'
+import variableFont, { reset as variableFontReset } from './dances/variable-font.js'
 import borderWidth, {
   reset as borderWidthReset,
 } from './dances/border-width.js'
@@ -37,6 +38,8 @@ class Dancer {
     this.registerDance('borderWidth', borderWidth, borderWidthReset)
     this.registerDance('fontSize', fontSize, fontSizeReset)
     this.registerDance('tilt', tilt, tiltReset)
+    this.registerDance('variableFont', variableFont, variableFontReset)
+    
   }
 
   registerDance(type, dance, reset = () => {}) {
diff --git a/src/dances/variable-font.js b/src/dances/variable-font.js
new file mode 100644
index 0000000..ff42094
--- /dev/null
+++ b/src/dances/variable-font.js
@@ -0,0 +1,13 @@
+const generateFontVariationSettings = (value, options) => Object.entries(options).reduce((fontVariationSettings,[key, { min, max }]) => {
+    const computedValue = ((max - min) * value + min)
+    return `${fontVariationSettings ? `${fontVariationSettings},` : ''} '${key}' ${computedValue}`
+}, null)
+
+export default (elem, value, options = {}) => {
+    elem.style.fontVariationSettings = generateFontVariationSettings(value, options)
+}
+  
+export const reset = elem => {
+    elem.style.fontVariationSettings = null
+}
+  
\ No newline at end of file