[widgets/GlyphTable] Make glyph order/selection customizable. Fixes #26

lib/widgets/GlyphTable.js

@@ -20,12 +20,15 @@ define([
      *
      * `loadAtOnce`: The number of glyphs to render per iteration, default 50
      * `loadSerial`: render all glyphs at once, default false
+     * `glyphOrderFunc`: return the glyph indexes to render, see the issue
+     *                   https://github.com/graphicore/specimenTools/issues/26
      */
 
     var svgns = 'http://www.w3.org/2000/svg';
 
-    function GlyphTable(doc, font, options) {
+    function GlyphTable(doc, font, options, dataAttributes) {
         Parent.call(this, options);
+        this._dataAttributes = dataAttributes;
         this._element = doc.createElement('div');
         this._font = font;
         this._setDimensions = null;
@@ -38,11 +41,20 @@ define([
     var _p = GlyphTable.prototype = Object.create(Parent.prototype);
     _p.constructor = GlyphTable;
 
+    function defaultGlyphOrder() {
+        //jshint validthis:true
+        var glyphOrder = [], i, l;
+        for(i=0,l=this._font.glyphNames.names.length;i<l;i++)
+            glyphOrder.push(i);
+        return glyphOrder;
+    }
+
     GlyphTable.defaultOptions = {
         glyphClass: 'glyph'
       , loadAtOnce: 50
       , loadSerial: false
       , glyphActiveClass: 'active'
+      , glyphOrderFunc: defaultGlyphOrder
     };
 
     Object.defineProperty(_p, 'element', {
@@ -171,13 +183,28 @@ define([
         this._element.appendChild(element);
     };
 
+    Object.defineProperty(_p, 'glyphOrder', {
+        get: function() {
+            if(!this._glyphOrder){
+                var func = this._options.glyphOrderFunc;
+                this._glyphOrder = func.call(this);
+            }
+            return this._glyphOrder;
+        }
+    });
+
+
     _p._initCells = function() {
-        var i = this._loadProgress[0]
-          , l = this._font.glyphNames.names.length
+        var glyphOrder = this.glyphOrder
+          , i = this._loadProgress[0]
+          , l = glyphOrder.length
           , loadAtOnce = this._options.loadAtOnce
+          , index
           ;
-        for(;i<l && loadAtOnce>0;i++,loadAtOnce--)
-            this._initCell(this._font.glyphNames[i], i);
+        for(;i<l && loadAtOnce>0;i++,loadAtOnce--) {
+            index = glyphOrder[i];
+            this._initCell(this._font.glyphNames[index], index);
+        }
 
         this._loadProgress[0] = i;
         this._loadProgress[1] = null;
@@ -186,11 +213,15 @@ define([
     };
 
     _p._initCellsSerial = function() {
-        var i=0
-          , l= this._font.glyphNames.names.length
+        var glyphOrder = this.glyphOrder
+          , i = 0
+          , l = glyphOrder.length
+          , index
           ;
-        for(;i<l;i++)
-            this._initCell(this._font.glyphNames[i], i);
+        for(;i<l;i++) {
+            index = glyphOrder[i];
+            this._initCell(this._font.glyphNames[index], index);
+        }
         this._loadProgress[0] = l;
     };
 

lib/widgets/GlyphTables.js

@@ -52,8 +52,27 @@ define([
         glyphTable: {}
     };
 
+    _p._getTableAttributes = function() {
+        var prefix = 'data-glyphtable-'
+          , data = Object.create(null)
+          , attributes = this._container.attributes
+          , i, l, attr, name
+          ;
+
+        for(i=0,l=attributes.length;i<l;i++) {
+            attr = attributes.item(i);
+            name = attr.localName;
+            if (name.indexOf(prefix) === 0)
+                data[name.slice(prefix.length)] = attr.value;
+        }
+
+        return data;
+    };
+
     _p._onLoadFont = function (i, fontFileName, font) {
-        var gt = new GlyphTable(this._tablesContainer.ownerDocument, font, this._options.glyphTable);
+        var dataAttributes = this._getTableAttributes()
+          , gt = new GlyphTable(this._tablesContainer.ownerDocument
+                        , font, this._options.glyphTable, dataAttributes);
         this._tables[i] = gt;
     };