Make the border-width dance (Resolve #64)

README.md

@@ -1,4 +1,4 @@
-<♫/> Rythm.js - v2.2.2
+<♫/> Rythm.js - v2.2.3
 ========
 
 [![Build Status](https://travis-ci.org/Okazari/Rythm.js.svg?branch=master)](https://travis-ci.org/Okazari/Rythm.js)
@@ -190,6 +190,9 @@ Here are the build in dances and their options
 + Neon
   + from : Array of integer between 0 and 255 corresponding to a RGB color. Default: `[0,0,0]`
   + to : Array of integer between 0 and 255 corresponding to a RGB color. Default: `[255,255,255]`
++ borderWidth
+  + min : Minimum value given to `border-width`. Default: `0`
+  + max : Maximum value given to `borderr-width`. Default: `5`
 
 To see each visual effect, you can go to the [Demo](https://okazari.github.io/Rythm.js/)
 

demo/example.js

@@ -51,6 +51,8 @@ window.onload = function() {
     from: [255, 255, 0],
     to: [255, 0, 0],
   })
+  rythm.addRythm('borderWidth1', 'borderWidth', 0, 2)
+  rythm.addRythm('borderWidth2', 'borderWidth', 0, 2, { min: 2, max: 10 })
   rythm.addRythm('radius1', 'radius', 0, 10, { min: 0, max: 30 })
   rythm.addRythm('radius2', 'radius', 0, 10, { reverse: true, min: 0, max: 30 })
   rythm.addRythm('blur1', 'blur', 0, 10)

demo/rythm.css

@@ -232,11 +232,19 @@ section:last-child {
 .radius2,
 .borderColor1,
 .borderColor2,
-.borderColor3 {
+.borderColor3,
+.borderWidth1,
+.borderWidth2 {
   border: 2px solid white;
   padding: 1px;
 }
 
+.borderWidth1,
+.borderWidth2 {
+  min-width: 15px;
+  min-height: 15px;
+}
+
 /* Pretty printing styles. Used with prettify.js. */
 /* Vim sunburst theme by David Leibovic */
 

index.html

@@ -9,7 +9,7 @@
     <!-- <audio id="audio" src="samples/rythmC" autoplay=""></audio> -->
     <div class="container">
       <h1 class="shake3">
-        Rythm.js - v2.2.2
+        Rythm.js - v2.2.3
       </h1>
       <h2>
         A javascript library that makes your page dance.
@@ -52,6 +52,33 @@ <h3>
             use css class 'rythm-high'
           </pre>
         </div>
+      </section>
+	  <h1>
+        Added in v2.2.3
+      </h1>
+	  <section>
+        <h3>
+          Border-Width
+        </h3>
+        <div class="demo">
+          <div class="rythm">
+            <div class="borderWidth1"></div>
+          </div>
+          <pre class="prettyprint">
+            rythm.addRythm('borderWidth1', 'borderWidth', 0, 2)
+          </pre>
+        </div>
+        <div class="demo">
+          <div class="rythm">
+            <div class="borderWidth2"></div>
+          </div>
+          <pre class="prettyprint">
+            rythm.addRythm('borderWidth2', 'borderWidth', 0, 2, {
+              min: 2,
+              max: 10
+            })
+          </pre>
+        </div>
       </section>
       <h1>
         Added in v2.2.2

rythm.js

@@ -440,6 +440,20 @@
     elem.style.letterSpacing = ''
   }
 
+  var borderWidth = function(elem, value) {
+    var options =
+      arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {}
+
+    var max = !isNaN(options.max) ? options.max : 5
+    var min = !isNaN(options.min) ? options.min : 0
+    var borderWidth = (max - min) * value + min
+    elem.style.borderWidth = borderWidth + 'px'
+  }
+
+  var reset$12 = function reset(elem) {
+    elem.style.borderWidth = ''
+  }
+
   var Dancer = (function() {
     function Dancer() {
       classCallCheck(this, Dancer)
@@ -459,6 +473,7 @@
       this.registerDance('swing', swing, reset$9)
       this.registerDance('neon', neon, reset$10)
       this.registerDance('kern', kern, reset$11)
+      this.registerDance('borderWidth', borderWidth, reset$12)
     }
 
     createClass(Dancer, [
@@ -609,4 +624,3 @@
 
   return Rythm$1
 })
-//# sourceMappingURL=rythm.js.map

src/Dancer.js

@@ -12,6 +12,9 @@ import blur, { reset as blurReset } from './dances/blur.js'
 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 borderWidth, {
+  reset as borderWidthReset,
+} from './dances/border-width.js'
 
 class Dancer {
   constructor() {
@@ -30,6 +33,7 @@ class Dancer {
     this.registerDance('swing', swing, swingReset)
     this.registerDance('neon', neon, neonReset)
     this.registerDance('kern', kern, kernReset)
+    this.registerDance('borderWidth', borderWidth, borderWidthReset)
   }
 
   registerDance(type, dance, reset = () => {}) {

src/dances/border-width.js

@@ -0,0 +1,10 @@
+export default (elem, value, options = {}) => {
+  const max = !isNaN(options.max) ? options.max : 5
+  const min = !isNaN(options.min) ? options.min : 0
+  const borderWidth = (max - min) * value + min
+  elem.style.borderWidth = `${borderWidth}px`
+}
+
+export const reset = elem => {
+  elem.style.borderWidth = ''
+}