From 0d873983cb34dd4484fce8ecefff27f24c9f5fb3 Mon Sep 17 00:00:00 2001
From: yuanchuan <yuanchuan23@gmail.com>
Date: Thu, 1 Jun 2017 02:40:52 +0800
Subject: [PATCH] update code samples

---
 docs/index.html |  40 ++++++++++--------
 docs/main.js    | 105 +++++++++++++++++++++++++++++++++---------------
 docs/style.css  |  23 ++++++-----
 3 files changed, 107 insertions(+), 61 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index 37ba577..325e09a 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -7,7 +7,7 @@
   <meta name="description" content="A web component for drawing patterns with css">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <link rel="stylesheet" href="lib/codemirror/style.css">
-  <link rel="stylesheet" href="style.css?b0aa4878c23ec">
+  <link rel="stylesheet" href="style.css?c9e9b69256749">
   <script src="lib/css-doodle.min.js?b0aa4878c23ec"></script>
 </head>
 <body>
@@ -33,7 +33,14 @@
 
     <div class="wrap">
       <div class="playground">
-        <div class="doodle" front> <!-- insert dynamicly --> </div>
+          <div class="doodle" front>
+            <select>
+              <option value="leaves">Leaves</option>
+              <option value="flames">Flames</option>
+              <option value="fish">Fish</option>
+            </select>
+          <!-- insert dynamicly -->
+        </div>
         <div class="source"> <!-- insert dynamicly --> </div>
       </div>
     </div>
@@ -148,20 +155,19 @@
           </p>
 
           <p>
-       			The following formats of size are recognizable:
-      		</p>
-					<div class="list-items">
-						<ul>
-							<li><code>grid = "0"</code></li>
-							<li><code>grid = "5"</code></li>
-							<li><code>grid = "20"</code></li>
-							<li><code>grid = "5x7"</code></li>
-							<li><code>grid = "5 x 7"</code></li>
-							<li><code>grid = "5，7"</code></li>
-							<li><code>grid = "5,7"</code></li>
-						</ul>
-					</div>
-
+             The following formats of size are recognizable:
+          </p>
+          <div class="list-items">
+            <ul>
+              <li><code>grid = "0"</code></li>
+              <li><code>grid = "5"</code></li>
+              <li><code>grid = "20"</code></li>
+              <li><code>grid = "5x7"</code></li>
+              <li><code>grid = "5 x 7"</code></li>
+              <li><code>grid = "5，7"</code></li>
+              <li><code>grid = "5,7"</code></li>
+            </ul>
+          </div>
         </article>
 
         <div class="sep"></div>
@@ -678,7 +684,7 @@
 
   <script src="lib/codemirror/core.js"></script>
   <script src="lib/codemirror/lang/css.js"></script>
-  <script src="main.js?3683e0447f0e"></script>
+  <script src="main.js?c9e9b69256749"></script>
   <script>
     (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
     (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
diff --git a/docs/main.js b/docs/main.js
index 9a6a1c7..f129fed 100644
--- a/docs/main.js
+++ b/docs/main.js
@@ -41,53 +41,75 @@
     });
   });
 
-  var doodleStyle = indent(`
-    :doodle {
-      clip-path: @shape(circle);
-      background-color: #f6ffed;
-    }
-
-    transition: .2s ease @rand(.6s);
-
-    will-change: transform;
-    transform: scale(@rand(.25, 1.25));
-
-    border-radius: @pick(
-      100% 0, 0 100%
-    );
-
-    background: hsla(
-      calc(5 * @index()), 70%, 60%,@rand(.8)
-    );
-  `);
-
-  if (Math.random() < .5) {
-    doodleStyle = indent(`
+  var doodles = {
+    'leaves': indent(`
       :doodle {
         clip-path: @shape(circle);
         background-color: #f6ffed;
       }
 
-      clip-path: @shape(bicorn);
+      transition: .2s ease @rand(.6s);
 
-      transform:
-        rotate(@rand(360deg))
-        scale(@rand(.5, 2.4))
-        translate(
-          @rand(-50%, 50%),
-          @rand(-50%, 50%)
-        );
+      will-change: transform;
+      transform: scale(@rand(.25, 1.25));
+
+      border-radius: @pick(
+        100% 0, 0 100%
+      );
 
       background: hsla(
         calc(5 * @index()), 70%, 60%,@rand(.8)
       );
+    `),
+
+    fish: indent(`
+      :doodle {
+        clip-path: @shape(pear);
+        transform: rotate(90deg);
+        background-image: linear-gradient(
+          to left, #03a9f4,
+          rgba(156, 39, 176, .02)
+        );
+      }
+
+      clip-path: @shape(fish);
+      transition: .24s ease;
+      background: hsla(
+        calc(190 + 2 * @index()),
+        70%, 60%,@rand(.8)
+      );
+      transform:
+        scale(@rand(.3, 2))
+        rotate(-90deg)
+        translate(
+          @rand(-50%, 50%), @rand(-50%, 50%)
+        );
+    `),
+
+    flames: indent(`
+      clip-path: @shape(bicorn);
+
+      background: hsla(
+        calc(180 + 4 * @index()),
+        70%, 60%,
+        @rand(.8)
+      );
+
+      transform:
+        rotate(@rand(360deg))
+        scale(@rand(.5, 3))
+        translate(
+          @rand(-100%, 100%),
+          @rand(-100%, 100%)
+        );
     `)
   }
 
   var doodle = document.createElement('css-doodle');
+  doodle.title = 'Click to update';
   doodle.grid = '7, 7';
   if (doodle.update) {
-    doodle.update(doodleStyle);
+    doodle.update(doodles.leaves);
   }
 
   var playground = document.querySelector('.playground');
@@ -98,12 +120,14 @@
   container.addEventListener('click', function(e) {
     e.preventDefault();
     if (!toggled() || container.hasAttribute('front')) {
-      doodle.refresh();
+      if (e.target.matches('css-doodle')) {
+        doodle.refresh();
+      }
     }
   });
 
   var config = {
-    value: doodleStyle,
+    value: doodles.leaves,
     mode: 'css',
     insertSoftTab: true,
     theme: '3024-day',
@@ -155,6 +179,21 @@
     }
   });
 
+  var select = document.querySelector('.playground select');
+  select.addEventListener('change', function(e) {
+    var newStyle = doodles[e.target.value];
+    if (newStyle) {
+      doodle.style.display = 'none';
+      select.blur();
+      editor.setValue(newStyle);
+      doodle.style.display = '';
+    }
+  });
+
+  select.addEventListener('click', function(e) {
+    e.stopPropagation();
+  });
+
   var shapes = [
     { name: 'circle' },
     { name: 'triangle' },
diff --git a/docs/style.css b/docs/style.css
index 1caa89b..c5c8e71 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -206,23 +206,23 @@ textarea[code] {
   display: flex;
   align-items: center;
   box-shadow: 0 0 50px rgb(194, 199, 199);
-  height: 420px;
+  height: 440px;
 }
   .playground .doodle {
     overflow: hidden;
     position: relative;
-    cursor: pointer;
   }
-    .playground .doodle:before {
-      content: 'click to refresh';
+    .doodle select {
+      cursor: pointer;
       position: absolute;
-      right: 5px;
-      bottom: 5px;
-      padding: 2px 5px;
-      font-size: .8em;
-      background: rgba(1, 160, 228, 0.1);
-      color: rgba(1, 160, 228, 0.57);
-      z-index: 1;
+      left: 1em;
+      top: 1em;
+      background: #E5F5FC;
+      color: #00BCD4;
+      border: 0;
+      border-radius: 0;
+      font-size: .9em;
+      z-index: 2;
     }
   .playground .doodle,
   .playground .source {
@@ -240,6 +240,7 @@ textarea[code] {
   .playground css-doodle {
     width: 350px;
     height: 350px;
+    cursor: pointer;
   }
   .playground .source {
     background: #fafafa;
