Merge pull request #23 from votum/option-dynamic-base

Option _dynamicBase for an additional option type: 'function'

README.md

@@ -15,6 +15,38 @@ You can also define multiple baselines for different breakpoints. Perfect for re
 $('.content img').baseline({ '0px': 24, '700px': 30 }); // Apply a 24px baseline for all widths, 30px for widths above 700px
 ```
 
+Or you can pass a function that must return a number which is used as the grid size.
+
+```javascript
+$('.content img').baseline(function() {
+  // Get the current font-size from the HTML tag – the root font-size `rem` –
+  // which may change through to some CSS media queries
+  return parseFloat(getComputedStyle(document.documentElement, null).getPropertyValue('font-size'));
+});
+```
+
+The used CSS may look like:
+
+```css
+html   { font-size: 12px; }
+@media (min-width: 480px) {
+  html { font-size: 13px; }
+}
+@media (min-width: 720px) {
+  html { font-size: 14px; }
+}
+@media (min-width: 1024px) {
+  html { font-size: 15px; }
+}
+
+body {
+  /* This one is a computed value based on the given root em
+   * and is used as the final font-size for body copy. */
+  font-size: 1.2rem;
+}
+```
+
+
 ## Vanilla JS
 
 Baseline.js is also available without jQuery or Zepto.

baseline.js

@@ -1,11 +1,11 @@
 /*!
-* Baseline.js 1.0
+* Baseline.js 1.1
 *
 * Copyright 2013, Daniel Eden http://daneden.me
 * Released under the WTFPL license
 * http://sam.zoy.org/wtfpl/
 *
-* Date: Sat August 04 23:47:00 2013 GMT
+* Date: 2014-06-20
 */
 
 (function (window, $) {
@@ -21,7 +21,8 @@
      */
 
     var _base = 0,
-        _breakpoints = {};
+        _breakpoints = {},
+        _dynamicBase;
 
     /**
      * @name     _setBase
@@ -38,19 +39,33 @@
       var height = element.offsetHeight,
           current, old;
 
-      /**
-       * In this step we loop through all the breakpoints, if any were given.
-       * If the baseline call received a number from the beginning, this loop
-       * is simply ignored.
-       */
+      if( _dynamicBase ) {
 
-      for (var key in _breakpoints) {
-        current = key;
+          /**
+           * Compute the _base through a user defined function on each execution.
+           * This could be used to get the current grid size for different breakpoints
+           * from an actual element property instead of defining those breakpoints in the options.
+           */
+          _base = _dynamicBase();
+
+      }
+      else {
 
-        if (document.body.clientWidth > current && current >= old) {
-          _base = _breakpoints[key];
-          old = current;
+        /**
+         * In this step we loop through all the breakpoints, if any were given.
+         * If the baseline call received a number from the beginning, this loop
+         * is simply ignored.
+         */
+
+        for (var key in _breakpoints) {
+          current = key;
+
+          if (document.body.clientWidth > current && current >= old) {
+            _base = _breakpoints[key];
+            old = current;
+          }
         }
+
       }
 
       /**
@@ -102,12 +117,14 @@
           len = targets.length;
 
       /**
-       * Decide whether to set the `_breakpoints` variable or not. This will be
-       * relevant in the `_setBase()` function.
+       * Decide whether to set the `_breakpoints` or `_dynamicBase` variables or not.
+       * This will be relevant in the `_setBase()` function.
        */
 
       if (typeof options === 'number') {
         _base = parseInt(options, 10);
+      } else if (typeof options === 'function') {
+          _dynamicBase = options;
       } else if (typeof options === 'object') {
         var em = parseInt(getComputedStyle(document.body, null).getPropertyValue('font-size'), 10);