add favorites, #11

app/App.js

@@ -9,6 +9,8 @@ var Modal = require('./Modal/Modal.js');
 
 module.exports = React.createClass({
   getInitialState: function() {
+    var stars = localStorage.getItem('stars');
+
     return {
       search: '',
       category: 'all',
@@ -18,12 +20,17 @@ module.exports = React.createClass({
       text: 'The quick brown fox jumps over the lazy dog.',
       data: [],
       font: {family: '', variants: [], subsets: []},
+      stars: stars ? JSON.parse(stars) : [],
       groupSize: 900
     };
   },
   getSetting: function(setting) {
     this.setState(setting);
   },
+  setStars: function(stars) {
+    this.setState(stars);
+    localStorage.setItem('stars', JSON.stringify(stars));
+  },
   setModal: function(font) {
     var that = this;
     var fonts = [];
@@ -50,14 +57,15 @@ module.exports = React.createClass({
           filterType: this.state.filterType,
           sort: this.state.sort,
           text: this.state.text,
-          groupSize: this.state.groupSize
+          groupSize: this.state.groupSize,
+          stars: this.state.stars
         };
 
     return (
       <div id="app">
         <Settings onChange={this.getSetting} />
-        <Fonts setModal={this.setModal} settings={settings} />
-        <Modal font={this.state.font} />
+        <Fonts setModal={this.setModal} settings={settings} stars={this.state.stars} onChange={this.setStars} />
+        <Modal font={this.state.font} stars={this.state.stars} onChange={this.setStars} />
       </div>
     );
   }

app/Fonts/Batch.js

@@ -8,16 +8,20 @@ module.exports = React.createClass({
   modal: function(value) {
     this.props.setModal(value);
   },
+  setStars: function(value) {
+    this.props.onChange(value);
+  },
   render: function() {
     var text = $('.text input').val();
     var start = this.props.start;
     var end = this.props.end;
     var fonts = this.props.data.slice(start, end);
     var children = [];
+    var stars = this.props.stars;
 
     while (fonts.length > 0) {
       var font = fonts.shift();
-      children.push(<Font setModal={this.modal} key={fonts.length} font={font} text={text} />);
+      children.push(<Font setModal={this.modal} key={fonts.length} font={font} text={text} stars={stars} onChange={this.setStars} />);
     }
 
     return (

app/Fonts/Font.js

@@ -8,13 +8,36 @@ module.exports = React.createClass({
   modal: function() {
     this.props.setModal(this.props.font);
   },
+  setStar: function(e) {
+    e.stopPropagation();
+
+    var target = $(e.target);
+    var stars = this.props.stars;
+    var family = this.props.font.family;
+
+    var index = stars.indexOf(family);
+
+    if (index < 0) {
+      stars.push(family);
+      target.addClass('fa-star').removeClass('fa-star-o');
+    } else {
+      stars.splice(index, 1);
+      target.addClass('fa-star-o').removeClass('fa-star');
+    }
+
+    this.props.onChange(stars);
+  },
   render: function() {
+    var font = this.props.font;
     var text = this.props.text;
+    var stars = this.props.stars;
+    var starred = stars.includes(font.family) ? 'fa star fa-star' : 'fa star fa-star-o';
 
     return (
       <div className="font">
         <div className="content" onClick={this.modal} >
           <Preview font={this.props.font} text={text} />
+          <span onClick={this.setStar} className={starred}></span>
           <Meta font={this.props.font} num={this.props.num} />
         </div>
       </div>

app/Fonts/Fonts.js

@@ -89,7 +89,10 @@ module.exports = React.createClass({
       return true;
     }
 
-    if (filterType === 'category') {
+    if (category === 'stars') {
+      var stars = this.props.stars;
+      return ($.inArray(font.family, stars) > -1);
+    } else if (filterType === 'category') {
       return (font.category == category);
     } else if (filterType === 'suggestion') {
       var suggestions = this.state.suggestions[category];
@@ -101,6 +104,9 @@ module.exports = React.createClass({
   setModal: function(value) {
     this.props.setModal(value);
   },
+  setStars: function(value) {
+    this.props.onChange(value);
+  },
   buildElements: function(start, end) {
     var elements = [];
 
@@ -115,6 +121,7 @@ module.exports = React.createClass({
     var text = this.props.settings.text;
     var search = $.trim(this.props.settings.search.toLowerCase())
     var data = this.state.data[sort];
+    var stars = this.props.stars;
     var that = this;
 
     if ((category !== "all") || search.length > 0) {
@@ -167,7 +174,7 @@ module.exports = React.createClass({
         }
       });
 
-      elements.push(<Batch setModal={this.setModal} key={start} start={start} end={end} data={data} text={text} />)
+      elements.push(<Batch setModal={this.setModal} key={start} start={start} end={end} data={data} text={text} stars={stars} onChange={this.setStars} />)
     }
 
     return elements;

app/Modal/Modal.js

@@ -45,13 +45,32 @@ module.exports = React.createClass({
 
     this.setState({'subsets': subsets.join(',')});
   },
+  setStar: function(e) {
+    var target = $(e.target);
+    var stars = this.props.stars;
+    var family = this.props.font.family;
+
+    var index = stars.indexOf(family);
+
+    if (index < 0) {
+      stars.push(family);
+      target.addClass('fa-star').removeClass('fa-star-o');
+    } else {
+      stars.splice(index, 1);
+      target.addClass('fa-star-o').removeClass('fa-star');
+    }
+
+    this.props.onChange(stars);
+  },
 
   render: function() {
     var that = this;
     var font = this.props.font;
     var family = font.family.replace(/ /g, '+');
     var url = 'https://fonts.googleapis.com/css?family=' + family;
     var category = font.category;
+    var stars = this.props.stars;
+    var starred = stars.includes(font.family) ? 'fa star fa-star' : 'fa star fa-star-o';
 
     if (category == 'display' || category == 'handwriting') {
       category = 'cursive';
@@ -120,7 +139,7 @@ module.exports = React.createClass({
       <div className="modal" onClick={this.fade} >
         <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans" />
         <div className="modal-inner">
-          <h1 style={title}><a target="_blank" href={google}>{font.family}</a></h1>
+          <h1 style={title}><a target="_blank" href={google}>{font.family}</a><span onClick={this.setStar} className={starred}></span></h1>
           <div>
             <p>
               <ClipboardButton data-clipboard-text={html}>

app/Settings/Categories.js

@@ -34,6 +34,7 @@ module.exports = React.createClass({
           <span onClick={this.setCategory} className="btn" data-type="category" data-val="display">Display</span>
           <span onClick={this.setCategory} className="btn" data-type="category" data-val="handwriting">Handwriting</span>
           <span onClick={this.setCategory} className="btn" data-type="category" data-val="monospace">Monospace</span>
+          <span onClick={this.setCategory} className="btn" data-type="category" data-val="stars"><i className="fa fa-star"></i></span>
         </div>
         <div>
           <h2>Suggestions</h2>

css/style.css

@@ -346,6 +346,16 @@ body:not(.row) .font .content:hover .preview span {
   text-overflow: ellipsis;
 }
 
+.font .star {
+  position: absolute;
+  right: 6px;
+  top: 6px;
+  font-size: 16px;
+  color: #888;
+  cursor: pointer;
+  z-index: 110;
+}
+
 .modal {
   position: fixed;
   z-index: 300;
@@ -455,6 +465,12 @@ body:not(.row) .font .content:hover .preview span {
   background-color: #A1A9AE;
 }
 
+.modal .star {
+  float: right;
+  font-size: 2rem;
+  cursor: pointer;
+}
+
 @-webkit-keyframes fadeIn {
   0% {opacity: 0;}
   50% {opacity: 0;}