Add searchable icons

Author: jlukic

server/documents/elements/icon.html.eco

@@ -21,6 +21,14 @@ themes      : ['Default']
 
   <div class="ui active tab" data-tab="icon">
 
+    <iconSearch class="ui search">
+      <div class="ui icon input">
+        <input class="prompt" type="text" placeholder="Search icons...">
+        <i class="search icon"></i>
+      </div>
+      <div class="results"></div>
+    </iconSearch>
+
     <h2 class="ui header">Icon Set</h2>
     <p>An icon set contains an arbitrary number of glyphs</p>
     <div class="ui ignored warning message">
@@ -3718,4 +3726,4 @@ themes      : ['Default']
 
   </div>
 
-</div>
+</div>

server/files/javascript/icon.js

@@ -7,7 +7,77 @@ semantic.icon.ready = function() {
   var
     $grid         = $('.ui.five.column.doubling.grid'),
     // alias
-    handler
+    handler = {
+      getIconList: function() {
+        var
+          $examples = $('.icon .example')
+          icons = []
+        ;
+        $examples.each(function() {
+          var
+            $header  = $(this).children('.ui.header'),
+            $icons   = $(this).find('.grid > .column'),
+            category = $header.text()
+          ;
+          $icons.each(function() {
+            var
+              $icon = $(this).find('.icon'),
+              icon  = $icon.attr('class').replace(' icon', '')
+              title = '<i class="' + icon +' icon"></i> ' + icon
+            ;
+            icons.push({
+              category : category,
+              title    : title,
+              icon     : icon
+            })
+          });
+        });
+        return icons;
+      }
+    }
+  ;
+
+  $('iconSearch.ui.search')
+    .search({
+      type          : 'category',
+      minCharacters : 1,
+      maxResults    : 10,
+      source        : handler.getIconList(),
+      onResults     : function(result) {
+        setTimeout(function() {
+          var
+            $results = $('iconSearch.ui.search .result')
+          ;
+          $results.each(function() {
+            var
+              $result = $(this)
+            ;
+            new Clipboard(this, {
+              text: function() {
+                var
+                  iconHTML = $result.find('i').get(0).outerHTML
+                ;
+                return iconHTML;
+              }
+          });
+          });
+        }, 0);
+      },
+      onSelect: function() {
+        var
+          $search = $('iconSearch .input > input')
+        ;
+        $search.blur();
+        setTimeout(function() {
+          $('iconSearch').transition('bounce');
+          $search.val('HTML Copied to clipboard!');
+        }, 50)
+        setTimeout(function() {
+          $search.val('');
+        }, 1500)
+        return false;
+      }
+    })
   ;
 
 
@@ -17,4 +87,4 @@ semantic.icon.ready = function() {
 // attach ready event
 $(document)
   .ready(semantic.icon.ready)
-;
+;

server/files/stylesheets/docs.css

@@ -1484,6 +1484,20 @@ body.progress.animated .ui.progress .bar {
       Icon
 ---------------*/
 
+#example iconSearch.ui.search {
+  float: right;
+  position: relative;
+  z-index: 3;
+}
+#example iconSearch .result i.icon {
+  font-size: 20px;
+  float: right;
+  margin-top: -5px;
+  margin-left: 11px;
+  color: #000000;
+}
+
+
 #example .icon.example .grid {
   text-align: left;
 }