added headers and sections

refactored build functions
mousemke · Dec 17, 2015 · f2358de · f2358de
1 parent 8c00d1c
commit f2358de
Show file tree

Hide file tree

Showing 18 changed files with 841 additions and 336 deletions.
diff --git a/README.md b/README.md
@@ -117,24 +117,45 @@ selectbox data must be passed as an array of objects
         description : 'a longer description of this element', // optional, string
         extraClass  : 'extra--classname',                   // optional, string
         disabled    : false                                 // optional, boolean
-    }
+    },
+    ...
 ]
 ```
 
-or an array.
+or a simple array of strings. The passed text will be both the text and the value.  There would be no description in this case
 
 ```
 [
     'value 1',
     'value 2',
-    'value 3'
+    'value 3',
+    ...
 ]
 ```
 
-in the case of an array, the passed text will be both the text and the value.  There would be no description in this case
+or, if you want section headers.  You can even add uncatagorized things intermingled
+
+```
+[
+    {
+        header : header1,
+        data : [ option1, option2, ... ]
+    },
+    {
+        text        : 'probably the string you want to see',
+        value       : 'return value',
+        description : 'a longer description of this element'
+    },
+    {
+        header : header2,
+        data : [ option1, option2, ... ]
+    },
+    ...
+]
 
+```
 
-all extra properties passed that are not shown here will be added as data attributes for the sake of reference later.  The data can be accessed in the init (before building) as this.data if they need reformatting or filtering.
+all extra properties passed in an option that are not shown here will be added as data attributes for the sake of reference later.  The data can be accessed in the init (before building) as this.data if they need reformatting or filtering.
 
 
 API
@@ -297,6 +318,8 @@ Change Log
 + programmatically setting value or index no longer triggers onSelect
 + changed rebuildOptions to rebuildSelect for clarity
 + changed this.options to this.data for clarity
++ added the ability to build sections with headers
++ refactored some build functions
 
 
 0.2.1

diff --git a/demo/demo.js b/demo/demo.js
@@ -5,13 +5,13 @@ import Flounder                 from '../src/core/flounder.jsx';
 
 window.Flounder = Flounder;
 
-var _slice = Array.prototype.slice;
+let _slice = Array.prototype.slice;
 /**
  * example data object
  *
  * @type {Array}
  */
-var data = [
+let data = [
     {
         cssClass    : 'select-filters',
         id          : 'All',
@@ -45,22 +45,40 @@ var data = [
 new Flounder( '.vanilla--input--tags', {
     placeholder          : 'placeholders!',
 
-    onInit               : function()
+    onInit : function()
     {
-        var res = [];
-        data.forEach( function( dataObj )
+        let res = [];
+
+        let top = {
+            header : 'top',
+            data    : []
+        };
+
+        let bottom = {
+            header : 'bottom',
+            data    : []
+        };
+
+        data.forEach( function( dataObj, i )
         {
-            res.push( {
+            res = {
                 text        : dataObj.text,
                 value       : dataObj.id,
                 extraClass  : 'vantar' + Math.ceil( Math.random() * 10 )
-            } );
-        } );
+            };
 
-        this.data = res;
-    },
+            if ( i % 2 === 0 )
+            {
+                top.data.push( res );
+            }
+            else
+            {
+                bottom.data.push( res );
+            }
+        } );
 
-    multiple            : true
+        this.data = [ top, bottom ];
+    }
 } );
 
 
@@ -72,7 +90,7 @@ new Flounder( document.getElementById( 'vanilla--input' ), {
 
     onInit               : function()
     {
-        var res     = [];
+        let res     = [];
         data.forEach( function( dataObj, i )
         {
             res.push( {
@@ -91,24 +109,24 @@ new Flounder( document.getElementById( 'vanilla--input' ), {
 
     onSelect            : function( e )
     {
-        var selected    = _slice.call( this.refs.select.selectedOptions );
+        let selected    = _slice.call( this.refs.select.selectedOptions );
         selected        = selected.map( el => el.index );
 
-        var rand = function( dataObj, i )
+        let rand = function( dataObj, i )
         {
             if ( selected.indexOf( i ) !== -1 )
             {
                 return dataObj;
             }
             else
             {
-                var value = Math.ceil( Math.random() * 10 );
+                let value = Math.ceil( Math.random() * 10 );
                 return { text : value, value : value, index : i };
             }
         };
 
         let _o       = this.data.map( rand );
-        console.log( _o );
+
         this.data    = _o;
         this.rebuildSelect( _o );
     }
@@ -140,7 +158,7 @@ ReactDOM.render( React.createElement( FlounderReact, {
 
     onInit              : function()
     {
-        var res = [];
+        let res = [];
         data.forEach( function( dataObj )
         {
             res.push( {
@@ -155,24 +173,25 @@ ReactDOM.render( React.createElement( FlounderReact, {
 
 
 /**
- * react multi-Flounder without tags attached to an div
+ * react Flounder attached to an div
  */
 ReactDOM.render( React.createElement( FlounderReact, {
     defaultValue        : 'tag',
 
     onInit              : function()
     {
-        var res = [];
+        let res = [];
         data.forEach( function( dataObj )
         {
             res.push( {
                 text        : dataObj.text,
-                value       : dataObj.id
+                value       : dataObj.id,
+                description : dataObj.text + ' - ' + dataObj.text
             } );
         } );
 
         this.data = res;
-    } } ), document.getElementById( 'react--multiple' )
+    } } ), document.getElementById( 'react--span' )
 );
 
 
@@ -188,7 +207,7 @@ ReactDOM.render( React.createElement( FlounderReact, {
 
     onInit              : function()
     {
-        var res = [];
+        let res = [];
         data.forEach( function( dataObj, i )
         {
             res.push( {
@@ -220,7 +239,7 @@ requirejs( [ 'flounder' ], function( Flounder )
 
         onInit               : function()
         {
-            var res = [];
+            let res = [];
             data.forEach( function( dataObj )
             {
                 res.push( {