From 25ef0c018fa8b9dd82c8c7c44e41578fd27bd86d Mon Sep 17 00:00:00 2001
From: Gil Barbara <gilbarbara@gmail.com>
Date: Wed, 22 Jul 2015 00:35:19 -0300
Subject: [PATCH] initial categories

---
 app/logos.json                     |  97 +++++++++++++------------
 app/scripts/components/Header.jsx  | 111 +++++++++++++++++++++--------
 app/scripts/config.js              |   1 +
 app/styles/components/_header.scss |  56 +++++++++++++++
 4 files changed, 190 insertions(+), 75 deletions(-)

diff --git a/app/logos.json b/app/logos.json
index ad5c824..169b3bd 100644
--- a/app/logos.json
+++ b/app/logos.json
@@ -13,7 +13,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -46,7 +46,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -76,7 +76,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -106,7 +106,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -136,7 +136,7 @@
         "hardware"
       ],
       "categories": [
-        "developers"
+        "hackers"
       ]
     },
     {
@@ -150,7 +150,7 @@
         "team collaboration"
       ],
       "categories": [
-        "developers"
+        "teams"
       ]
     },
     {
@@ -227,7 +227,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -350,7 +350,7 @@
         "layout"
       ],
       "categories": [
-        "developers"
+        "designers"
       ],
       "converted": true
     },
@@ -550,7 +550,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -596,7 +596,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -661,7 +661,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -675,7 +675,7 @@
         "browser"
       ],
       "categories": [
-        "developers"
+        "everybody"
       ]
     },
     {
@@ -1062,7 +1062,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -1125,7 +1125,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -1157,7 +1157,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -1310,7 +1310,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -1386,7 +1386,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ],
       "converted": true
     },
@@ -1463,7 +1463,7 @@
         "browser"
       ],
       "categories": [
-        "developers"
+        "everybody"
       ]
     },
     {
@@ -1686,7 +1686,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -1932,7 +1932,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -1963,7 +1963,7 @@
         "team collaboration"
       ],
       "categories": [
-        "developers"
+        "teams"
       ]
     },
     {
@@ -2386,7 +2386,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -2416,7 +2416,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ],
       "converted": true
     },
@@ -2507,8 +2507,7 @@
         "load testing"
       ],
       "categories": [
-        "devOps",
-        "services"
+        "DevOps"
       ]
     },
     {
@@ -2539,7 +2538,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -2930,7 +2929,7 @@
       "shortname": "nativescript",
       "url": "https://www.nativescript.org/",
       "tags": [
-        
+
       ],
       "categories": [
         "developers"
@@ -3010,7 +3009,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -3040,7 +3039,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -3178,7 +3177,7 @@
         "association"
       ],
       "categories": [
-        "hardware"
+        "hackers"
       ]
     },
     {
@@ -3225,7 +3224,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ],
       "converted": true
     },
@@ -3241,7 +3240,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -3285,7 +3284,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -3512,7 +3511,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -3557,7 +3556,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -3617,7 +3616,7 @@
         "hardware"
       ],
       "categories": [
-        "hardware"
+        "hackers"
       ]
     },
     {
@@ -3724,7 +3723,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -3785,7 +3784,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -3830,7 +3829,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -3904,7 +3903,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -3948,7 +3947,7 @@
         "team collaboration"
       ],
       "categories": [
-        "developers"
+        "teams"
       ]
     },
     {
@@ -4054,7 +4053,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ],
       "converted": true
     },
@@ -4238,7 +4237,7 @@
         "project manager"
       ],
       "categories": [
-        "developers"
+        "teams"
       ]
     },
     {
@@ -4327,7 +4326,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -4393,7 +4392,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ],
       "converted": true
     },
@@ -4547,7 +4546,7 @@
       ],
       "categories": [
         "developers",
-        "devOps"
+        "DevOps"
       ]
     },
     {
@@ -4652,7 +4651,11 @@
         "project manager",
         "agile",
         "kanban"
+      ],
+      "categories": [
+        "developers",
+        "teams"
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/app/scripts/components/Header.jsx b/app/scripts/components/Header.jsx
index 0caa4e1..df038bb 100644
--- a/app/scripts/components/Header.jsx
+++ b/app/scripts/components/Header.jsx
@@ -14,14 +14,35 @@ var Header = React.createClass({
         onClickTag: React.PropTypes.func.isRequired
     },
 
-    componentWillMount () {
-        let tags   = {},
-            fScale = {
+    getInitialState () {
+        return {
+            category: 'developers',
+            ready: false
+        };
+    },
+
+    componentDidMount () {
+        let tags       = {},
+            categories = {},
+            fScale     = {
                 min: 1,
                 max: 0,
                 unit: 'rem'
             };
 
+        if (config.features.categories) {
+            this.props.logos.forEach(function (d) {
+                d.categories.forEach(function (t) {
+                    if (!categories.hasOwnProperty(t)) {
+                        categories[t] = 0;
+                    }
+                    categories[t]++;
+                });
+            });
+
+            categories = this._sortObject(categories, 'value');
+        }
+
         if (config.features.tags) {
             this.props.logos.forEach(function (d) {
                 d.tags.forEach(function (t) {
@@ -41,14 +62,16 @@ var Header = React.createClass({
                     fScale.max = t.value;
                 }
             });
-
-            this.setState({
-                tags: tags,
-                fontScale: new ScaleLog(fScale),
-                colorScale: new ScaleLog({ minSize: 12, min: fScale.min, maxSize: 70, max: fScale.max }),
-                color: new Colors('#ffced3')
-            });
         }
+
+        this.setState({
+            categories,
+            tags,
+            ready: true,
+            fontScale: new ScaleLog(fScale),
+            colorScale: new ScaleLog({ minSize: 12, min: fScale.min, maxSize: 70, max: fScale.max }),
+            color: new Colors('#ffced3')
+        });
     },
 
     _sortObject (obj, attr) {
@@ -75,36 +98,68 @@ var Header = React.createClass({
         return arr;
     },
 
+    _onClickShowCategories (e) {
+        e.preventDefault();
+
+        var el = e.currentTarget;
+        console.log(el);
+    },
+
+    _onClickSelectCategory (e) {
+        e.preventDefault();
+
+        var el = e.currentTarget;
+        console.log(el);
+    },
+
     render () {
         var props = this.props,
             state = this.state,
+            categories = state.category,
             tags,
             style;
 
-        if (config.features.tags) {
-            tags = (
-                <div className="tag-cloud">
-                    {state.tags.map((d, i) => {
-                        style = {
-                            backgroundColor: state.color.hsl2hex({
-                                h: state.color.hue(),
-                                s: state.color.saturation(),
-                                l: state.color.lightness() - +state.colorScale.value(d.value)
-                            }),
-                            fontSize: state.fontScale.value(d.value)
-                        };
-                        return (<a key={i} href="#" data-tag={d.key} onClick={this.props.onClickTag} style={style}>{d.key + ' (' + d.value + ')'}</a>
-                        );
-                    })}
-                </div>
-            );
+        if (state.ready) {
+            if (config.features.tags) {
+                tags = (
+                    <div className="tag-cloud">
+                        {state.tags.map((d, i) => {
+                            style = {
+                                backgroundColor: state.color.hsl2hex({
+                                    h: state.color.hue(),
+                                    s: state.color.saturation(),
+                                    l: state.color.lightness() - +state.colorScale.value(d.value)
+                                }),
+                                fontSize: state.fontScale.value(d.value)
+                            };
+                            return (<a key={i} href="#" data-tag={d.key} onClick={this.props.onClickTag}
+                                       style={style}>{d.key + ' (' + d.value + ')'}</a>
+                            );
+                        })}
+                    </div>
+                );
+            }
+
+            if (config.features.categories) {
+                categories = (
+                    <span className="categories">
+                    <a href="#" className="categories__toggle" onClick={this._onClickShowCategories}>{state.category}</a>
+                    <ul className="categories__menu">
+                        {state.categories.map((d, i) => {
+                            return (<li key={i} data-value={d.value}><a href="#" onClick={this._onClickSelectCategory}>{d.key}</a></li>);
+                        })}
+                    </ul>
+                </span>
+                );
+            }
         }
 
         return (
             <header>
                 <img src="media/svg-porn.svg" className="logo"/>
 
-                <h3>A collection of svg logos for developers</h3>
+                <h3>A collection of svg logos for {categories}</h3>
+
                 <ul className="menu">
                     <li><span className="title">Columns</span>
 
diff --git a/app/scripts/config.js b/app/scripts/config.js
index d88825f..a652352 100644
--- a/app/scripts/config.js
+++ b/app/scripts/config.js
@@ -1,5 +1,6 @@
 module.exports = {
     features: {
+        categories: false,
         menu: false,
         tags: false
     }
diff --git a/app/styles/components/_header.scss b/app/styles/components/_header.scss
index cc384d8..ed502ea 100644
--- a/app/styles/components/_header.scss
+++ b/app/styles/components/_header.scss
@@ -39,6 +39,62 @@ header {
     }
   }
 
+  .categories {
+    display: inline-block;
+    position: relative;
+    width: 165px;
+
+    &__toggle {
+      padding: 0 26px 0 8px;
+      position: relative;
+      text-decoration: none;
+
+      &:before {
+        border-top: 1px dashed $link-color;
+        bottom: -5px;
+        content: '';
+        height: 2px;
+        left: 0;
+        position: absolute;
+        width: 100%;
+      }
+
+      &:after {
+        border-color: $link-color transparent transparent;
+        border-radius: 3px;
+        border-style: solid;
+        border-width: 12px 8px 0;
+        content: '';
+        position: absolute;
+        right: 3px;
+        top: 10px;
+      }
+
+    }
+
+    &__menu {
+      left: 0;
+      list-style: none;
+      margin: 0;
+      padding: 0;
+      position: absolute;
+      right: 0;
+      top: -4px;
+      width: 100%;
+      z-index: 100;
+
+      > li {
+        a {
+          background-color: rgba($link-color, 0.5);
+          color: #fff;
+          display: block;
+          padding: 5px 8px;
+          text-align: left;
+        }
+      }
+    }
+  }
+
   .menu {
     display: flex;
     justify-content: space-around;