From 2f9245e580802ae6befe1ca0885b7df9919cc1a7 Mon Sep 17 00:00:00 2001
From: Armin Ronacher <armin.ronacher@active-4.com>
Date: Wed, 23 May 2018 23:47:00 +0200
Subject: [PATCH] Added feature box

---
 layouts/index.html           | 23 +++++++++++------------
 layouts/partials/footer.html |  1 +
 static/css/actix.css         | 22 ++++++++++++++++++++++
 static/js/actix.js           | 32 ++++++++++++++++++++++++++++++++
 4 files changed, 66 insertions(+), 12 deletions(-)

diff --git a/layouts/index.html b/layouts/index.html
index b47a215..4a1d6c6 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -59,10 +59,9 @@ fn main() {
       </div>
     </div>
   </div>
-  <div class="row actix-showcase">
-    <div class="col-md-8">
-      <input type="radio" name="feature" id="responders" checked>
-      <div class="feature">
+  <div class="actix-showcase">
+    <div class="col-md-9">
+      <div class="actix-feature" id="responders">
         <h2>Flexible Responders</h2>
         <p>
           Handler functions in actix can return a wide range of objects that
@@ -82,8 +81,7 @@ fn current_temperature(_req: HttpRequest) -> impl Responder {
     Json(Measurement { temperature: 42.3 })
 }` "rust" "" }}
       </div>
-      <input type="radio" name="feature" id="extractors">
-      <div class="feature">
+      <div class="actix-feature" id="extractors">
         <h2>Powerful Extractors</h2>
         <p>
           Actix comes with a powerful extractor system that extracts data
@@ -104,8 +102,7 @@ fn capture_event(evt: Json<Event>) -> impl Responder {
     format!("got event {}", id)
 }` "rust" "" }}
       </div>
-      <input type="radio" name="feature" id="forms">
-      <div class="feature">
+      <div class="actix-feature" id="forms">
         <h2>Easy Form Handling</h2>
         <p>
           Handling multipart/urlencoded form data is easy.  Just define
@@ -123,10 +120,12 @@ fn register(data: Form<Register>) -> impl Responder {
 }` "rust" "" }}
       </div>
     </div>
-    <div class="col-md-4">
-      <label for="responders">flexible responders</label>
-      <label for="extractors">powerful extractors</label>
-      <label for="forms">easy form handling</label>
+    <div class="col-md-3 actix-feature-selectors">
+      <ul>
+        <li class="actix-feature-selector"><a href="#responders">flexible responders</label>
+        <li class="actix-feature-selector"><a href="#extractors">powerful extractors</label>
+        <li class="actix-feature-selector"><a href="#forms">easy form handling</label>
+      </ul>
     </div>
   </div>
 </div>
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index dd7011b..6593ca4 100644
--- a/layouts/partials/footer.html
+++ b/layouts/partials/footer.html
@@ -13,6 +13,7 @@
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js" integrity="sha384-3ceskX3iaEnIogmQchP8opvBy3Mi7Ce34nWjpBIwVTHfGYWQS9jwHDVRnpKKHJg7" crossorigin="anonymous"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.3.7/js/tether.min.js" integrity="sha384-XTs3FgkjiBgo8qjEjBk0tGmf3wPrWtA6coPfQDfFEY8AnYJwjalXCiosYRBIBZX8" crossorigin="anonymous"></script>
     <script src="/js/bootstrap.min.js"></script>
+    <script src="/js/actix.js"></script>
     {{ template "_internal/google_analytics.html" . }}
   </body>
 </html>
diff --git a/static/css/actix.css b/static/css/actix.css
index f642cd3..cb6989e 100644
--- a/static/css/actix.css
+++ b/static/css/actix.css
@@ -283,8 +283,11 @@ img {
 }
 
 .actix-showcase {
+  overflow: hidden;
   margin-top: 2rem;
   margin-bottom: 2rem;
+  padding: 2rem 1rem 0 1rem;
+  background: #dceaea;
 }
 
 .actix-showcase ul {
@@ -332,6 +335,25 @@ img {
   font-size: 1rem;
 }
 
+.actix-feature-selectors {
+  padding-bottom: 2rem;
+}
+
+.actix-feature-selector {
+  text-align: center;
+  padding: 0.5rem 1rem;
+  font-weight: bold;
+}
+
+.actix-feature-selector.active {
+  background: white;
+}
+
+.actix-feature-selector.active a {
+  color: #333!important;
+  text-decoration: none;
+}
+
 .final-pitch {
   text-align: center;
 }
diff --git a/static/js/actix.js b/static/js/actix.js
index e69de29..15a6990 100644
--- a/static/js/actix.js
+++ b/static/js/actix.js
@@ -0,0 +1,32 @@
+(function() {
+  function activateFeature(sel) {
+    $('div.actix-feature').hide();
+    $(sel).show();
+    $('li.actix-feature-selector').removeClass('active');
+    $('li.actix-feature-selector > a').each(function() {
+      if (this.getAttribute('href') === sel) {
+        $(this).parent().addClass('active');
+      }
+    });
+  }
+
+  function initFeatureSelector() {
+    $('div.actix-feature').hide();
+    var active = $(window.location.hash);
+    if (active.is('div.actix-feature')) {
+      activateFeature(window.location.hash);
+    } else {
+      activateFeature('#' + $('div.actix-feature')[0].id);
+    }
+
+    $('ul li.actix-feature-selector a').on('click', function(evt) {
+      evt.preventDefault();
+      history.replaceState({}, '', evt.target.href);
+      activateFeature(this.getAttribute('href'));
+    });
+  }
+
+  $(function() {
+    initFeatureSelector();
+  });
+})();