From e891592026b30f06f4725cb8838719635e00438b Mon Sep 17 00:00:00 2001
From: Alex Mackey <alexjmackey@gmail.com>
Date: Sun, 24 Mar 2013 13:47:19 +1100
Subject: [PATCH] Added initial implementation of rotating panel

---
 .../Controllers/DashboardController.cs        |   5 +
 src/dashing.net/Jobs/dashing.net.jobs.dll     | Bin 18944 -> 18944 bytes
 .../Views/Dashboard/Rotating.cshtml           | 110 ++++++++++++++++++
 src/dashing.net/dashing.net.csproj            |   1 +
 4 files changed, 116 insertions(+)
 create mode 100644 src/dashing.net/Views/Dashboard/Rotating.cshtml

diff --git a/src/dashing.net/Controllers/DashboardController.cs b/src/dashing.net/Controllers/DashboardController.cs
index 6e01a64..2e59514 100644
--- a/src/dashing.net/Controllers/DashboardController.cs
+++ b/src/dashing.net/Controllers/DashboardController.cs
@@ -18,5 +18,10 @@ public ActionResult Sample()
         {
             return View();
         }
+
+        public ActionResult Rotating()
+        {
+            return View();
+        }
     }
 }
diff --git a/src/dashing.net/Jobs/dashing.net.jobs.dll b/src/dashing.net/Jobs/dashing.net.jobs.dll
index ac03fe16d23b0e06e18aed5671ecd10060636391..d967d7472f4c50ca97053b9aad8747952413ceb7 100644
GIT binary patch
delta 93
zcmZpe!q_l{aY6?(Z>ZnK?unKHmdfW8?mf)$n|-nMM3jNX#?3lb4jdra$@xx_s@ZuO
w0gQYxu3cg0m;B$A#>mLPz>sbgQ(j(Pl%HP`lb%_UQJOS)k<;hR3!D?!0B6u6VE_OC

delta 85
zcmZpe!q_l{aY6_4Gk>p*-4iVZ!mWR&>h~P>+3)L-t@7F0ZL^M*0|!WUa=w$KRNP7X
p@HDlTZVTVA#pa(Ye9O+jz>s1Ulb%^Jd9Bmui3Z%87dR)d0RX_bA<X~)

diff --git a/src/dashing.net/Views/Dashboard/Rotating.cshtml b/src/dashing.net/Views/Dashboard/Rotating.cshtml
new file mode 100644
index 0000000..6d66e29
--- /dev/null
+++ b/src/dashing.net/Views/Dashboard/Rotating.cshtml
@@ -0,0 +1,110 @@
+<style media="screen">
+    /* Transforms based on article at: http://desandro.github.com/3dtransforms/examples/card-01.html */
+
+        #card {
+            -webkit-transition: -webkit-transform 2s;
+            -moz-transition: -moz-transform 1s;
+            -o-transition: -o-transform 1s;
+            transition: transform 1s;
+            -webkit-transform-style: preserve-3d;
+            -moz-transform-style: preserve-3d;
+            -o-transform-style: preserve-3d;
+            transform-style: preserve-3d;
+        }
+
+        #card.flipped {
+            -webkit-transform: rotateY( 180deg );
+            -moz-transform: rotateY( 180deg );
+            -o-transform: rotateY( 180deg );
+            transform: rotateY( 180deg );
+        }
+
+        #card figure {
+            display: block;
+            position: absolute;
+            -webkit-backface-visibility: hidden;
+            -moz-backface-visibility: hidden;
+            -o-backface-visibility: hidden;
+            backface-visibility: hidden;
+        }
+        
+        #card .back {
+            -webkit-transform: rotateY( 180deg );
+            -moz-transform: rotateY( 180deg );
+            -o-transform: rotateY( 180deg );
+            transform: rotateY( 180deg );
+        }
+
+        .hidden {
+            visibility: hidden;
+        }
+
+        figure > div.widget {
+            width: 370px;
+        }
+</style>
+
+
+<div id="card" class="">
+    
+    <figure id="card1" class="front">
+        <div data-view="Image" data-image="/logo.png"></div>
+        <div data-id="synergy" data-view="Meter" data-title="Synergy" data-min="0" data-max="100"></div>
+        <div data-id="karma" data-view="Number" data-title="Karma" style="background-color: #96bf48;"></div>
+        <div data-view="Clock"></div>
+        <div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office"></div>
+
+    </figure>
+    <figure id="card2" class="hidden">
+        <div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office"></div>
+        <div data-view="Image" data-image="/logo.png"></div>
+        <div data-id="synergy" data-view="Meter" data-title="Synergy" data-min="0" data-max="100"></div>
+        <div data-id="karma" data-view="Number" data-title="Karma" style="background-color: #96bf48;"></div>
+        <div data-id="karma" data-view="Number" data-title="Karma" style="background-color: #96bf48;"></div>
+
+    </figure>
+    <figure id="card3" class="hidden">
+        <div data-view="Clock"></div>
+        <div data-view="Image" data-image="/logo.png"></div>
+        <div data-id="synergy" data-view="Meter" data-title="Synergy" data-min="0" data-max="100"></div>
+        <div data-id="synergy" data-view="Meter" data-title="Synergy" data-min="0" data-max="100"></div>
+
+        <div data-id="buzzwords" data-view="List" data-unordered="true" data-title="Buzzwords" data-moreinfo="# of times said around the office"></div>
+    </figure>
+
+</div>
+
+
+<script>
+
+    //TODO move to scripts dir
+    (function () {
+
+        "use strict";
+
+        var currentIndex = 1,
+            nextCardIndex = currentIndex + 1,
+            maxIndex = 3,
+            previousIndex = maxIndex,
+            currentClass = "front",
+            flipInterval = 5000;
+
+        function flipPanel() {
+
+            nextCardIndex = (currentIndex + 1) > maxIndex ? 1 : currentIndex + 1;
+            previousIndex = currentIndex === 1 ? maxIndex : currentIndex - 1;
+            currentClass = currentClass == "front" ? "back" : "front";
+
+            $("#card" + nextCardIndex).removeClass("hidden").addClass(currentClass);
+            $("#card" + previousIndex).removeClass("front back").addClass("hidden");
+
+            $('#card').toggleClass('flipped');
+
+            currentIndex = currentIndex === maxIndex ? 1 : currentIndex + 1;
+        }
+
+        setInterval(flipPanel, flipInterval);
+
+    })();
+
+</script>
diff --git a/src/dashing.net/dashing.net.csproj b/src/dashing.net/dashing.net.csproj
index 89b8834..ea0e011 100644
--- a/src/dashing.net/dashing.net.csproj
+++ b/src/dashing.net/dashing.net.csproj
@@ -229,6 +229,7 @@
     <Content Include="Widgets\text\text.coffee" />
     <Content Include="Widgets\text\text.scss" />
     <Content Include="Views\Error\Index.cshtml" />
+    <Content Include="Views\Dashboard\Rotating.cshtml" />
   </ItemGroup>
   <ItemGroup>
     <Folder Include="App_Data\" />