Updated layout + readme, added demo page

DJWassink · DJWassink · commit c1a43bc5ab9c · 2015-03-25T17:17:19.000+01:00
diff --git a/README.md b/README.md
@@ -4,6 +4,9 @@ A floating round material button that has animations between states.
 ## Screenshot animation
 ![Animation](screenshot.gif)
 
+## Demo
+[Click here](http://button.dirkjanwassink.nl)
+
 ## States
 Currently the following icons/states are supported:
 * equals
@@ -22,7 +25,7 @@ Currently the following icons/states are supported:
 * arrow-up
 
 ## Usage
-Be sure to first run a `npm bower install` to get the required libraries. Now simply use the following snippit:
+Be sure to first run a `npm bower install` to get the required libraries. Now simply use the following snippet:
 
 ```
 <div class="icon-container" data-ripple-color="#ffffff">
@@ -34,7 +37,7 @@ Be sure to first run a `npm bower install` to get the required libraries. Now si
 </div>
 ```
 
-Change the class `equals` to any class you want to use (see States);
+Change the class `equals` to any class you want to use (see [States](#states))
 
 ## Issues
 Play and pause button are a bit funky. Need to find a way to display them without border attributes.
diff --git a/index.html b/index.html
@@ -9,11 +9,13 @@
 
 <body>
 
+    <div id="controls">
     <label>
         Scale:
         <input id="icon-size" type="number" value="6">
     </label>
-    <span id="toggle-icon">Toggle</sapn>
+    <button type="text" id="toggle-icon">Toggle visibility</button>
+    </div>
     
     <div class="icon-container" data-ripple-color="#ffffff">
         <div class="icon-holder equals">
diff --git a/javascripts/main.js b/javascripts/main.js
@@ -1,5 +1,17 @@
 $(document).ready(function () {
+    var animations = ['equals', 'pause', 'check', 'arrow-left', 'min', 'stop', 'cross', 'arrow-right', 'close', 'arrow-down', 'hamburger', 'search', 'play', 'arrow-up'];
     var animationIndex = 1;
+
+    animations.forEach(function(animation) {
+        $('#controls').append('<button class="icon-switcher" data-icon="' + animation + '">' + animation + '</button>');
+    });
+
+    $(document).on('click','.icon-switcher', function() {
+        var animation = $(this).data('icon');
+        console.log(animation);
+        $('.icon-holder').removeClass().addClass('icon-holder ' + animation);
+    });
+
     $('.icon-container').on('click', function (e) {
         e.preventDefault();
         e.stopPropagation();
@@ -10,7 +22,6 @@ $(document).ready(function () {
 
         $holder.removeClass().addClass('icon-holder');
 
-        var animations = ['equals', 'pause', 'check', 'arrow-left', 'min', 'stop', 'cross', 'arrow-right', 'close', 'arrow-down', 'hamburger', 'search', 'play', 'arrow-up'];
 
         $holder.addClass(animations[animationIndex]);
         animationIndex++;
diff --git a/stylesheets/style.css b/stylesheets/style.css
@@ -3,7 +3,28 @@ html, body {
     padding: 0;
     width: 100%;
     height: 100%;
+    font-family:'verdana';
+    background: #B6B6B6;
+}
+#controls {
+    background: #BBDEFB;
+    padding: 15px;
+}
+button {
+    border:none;
+    border-radius: 2px;
+    padding: 8px 10px;
+    margin: 2px;
+    background: #1976D2;
+    color: white;
+    transition: all .35s ease;
+}
+button:hover {
+    cursor: pointer;
+    background:#03A9F4;
 }
+
+
 .icon-container {
     top: .2em;
     left: .2em;
@@ -243,6 +264,19 @@ html, body {
 .equals>.bar3 {
     margin: 1.3em 0 0 0;
 }
+/**
+ * Min
+ */
+.min>.bar1 {
+
+}
+.min>.bar2 {
+    opacity: 0;
+}
+.min>.bar3 {
+    opacity: 0;
+}
+
 /**
  * Closing animation
  */
