updated with animation for open/close

markhuot · Feb 3, 2012 · 3d243db · 3d243db
1 parent 30a7dd1
commit 3d243db
Show file tree

Hide file tree

Showing 3 changed files with 84 additions and 59 deletions.
diff --git a/test7/css/style.css b/test7/css/style.css
@@ -113,13 +113,13 @@ body {
   padding: 0 0 10px;
 }
 
-@-webkit-keyframes FLIP-FRONT {
+@-webkit-keyframes FLIP-GUTTER {
   0%   { -webkit-transform: translateZ(0) rotateY(0); }
   50%  { -webkit-transform: translateZ(-400px) rotateY(90deg); }
   100% { -webkit-transform: translateZ(0) rotateY(180deg); }
 }
 
-@-webkit-keyframes FLIP-BACK {
+@-webkit-keyframes FLIP-FIELD {
   0%   { -webkit-transform: translateZ(0) rotateY(-180); }
   50%  { -webkit-transform: translateZ(-400px) rotateY(-90deg); }
   100% { -webkit-transform: translateZ(0) rotateY(0deg); }
@@ -133,33 +133,35 @@ body {
 .field .front,
 .field .back {
   border: 1px solid #ccc;
-  background: whiteSmoke;
 }
 
 .field .front {
-  position: relative;
   padding-left: 40px;
-  -webkit-transform: translateZ(0) rotateY(0deg);
-  -webkit-transform-style: preserve-3d;
-  -webkit-backface-visibility: hidden;
 }
 
-.field .back {
-  -webkit-transform: translateZ(0) rotateY(-180deg);
-  -webkit-transform-style: preserve-3d;
-  -webkit-backface-visibility: hidden;
+.chooser {
+  border: 1px solid #ccc;
+  border-width: 1px 0 1px 1px;
+  background: whiteSmoke;
+  -webkit-transition: all 0.5s;
+  -webkit-transform-origin: right center;
 }
 
-.field.flip .front {
-  -webkit-animation-duration: 3s;
-  -webkit-animation-name: FLIP-FRONT;
-  -webkit-animation-timing-function: linear;
+.field.flip .chooser {
+  -webkit-transform: rotateY(70deg);
+  left: -30px;
+}
+
+.field .front table {
+  -webkit-transition: all 0.5s;
+  position: relative;
+  left: 0;
+  box-shadow: 0 0 30px rgba(0,0,0,0);
 }
 
-.field.flip .back {
-  -webkit-animation-duration: 3s;
-  -webkit-animation-name: FLIP-BACK;
-  -webkit-animation-timing-function: linear;
+.field.flip .front table {
+  margin-left: 200px;
+  box-shadow: 0 0 30px rgba(0,0,0,1);
 }
 
 .field .front {
@@ -168,6 +170,9 @@ body {
 }
 
 .field .back {
+  background: #444;
+  color: #fff;
+  padding: 10px 20px;
   position: absolute;
   top: 0;
   left: 0;
@@ -176,6 +181,10 @@ body {
   z-index: 100;
 }
 
+.field-contents {
+  overflow: hidden;
+}
+
 table {
   width: 100%;
   background: #fff;
@@ -201,16 +210,20 @@ td.cell {
   font-family: Pictos;
 }
 
-.chooser .icon {
+.chooser {
   width: 40px;
-  padding: 10px 0;
   text-align: center;
   position: absolute;
-  top: 0;
-  left: 0;
+  top: -1px;
+  left: -1px;
+  height: 100%;
   color: #999;
 }
 
+.chooser .icon {
+  padding: 13px 0;
+}
+
 .chooser select {
   display: none;
 }

diff --git a/test7/index.html b/test7/index.html
@@ -44,11 +44,13 @@ <h1 class="title">Body</h1>
                   </select>
                 </div>
               </div>
-              <table>
-                <tr class="row">
-                  <td class="cell"><div><textarea rows="1" cols="80" placeholder="Heading..."></textarea></div></td>
-                </tr>
-              </table>
+              <div class="field-contents">
+                <table>
+                  <tr class="row">
+                    <td class="cell"><div><textarea rows="1" cols="80" placeholder="Heading..."></textarea></div></td>
+                  </tr>
+                </table>
+              </div>
             </div>
             <div class="back">
               <p>the back</p>
@@ -67,11 +69,13 @@ <h1 class="title">Body</h1>
                   </select>
                 </div>
               </div>
-              <table>
-                <tr class="row">
-                  <td class="cell"><div><textarea rows="20" cols="80" placeholder="..."></textarea></div></td>
-                </tr>
-              </table>
+              <div class="field-contents">
+                <table>
+                  <tr class="row">
+                    <td class="cell"><div><textarea rows="20" cols="80" placeholder="..."></textarea></div></td>
+                  </tr>
+                </table>
+              </div>
             </div>
             <div class="back">
               <p>the back</p>
@@ -90,12 +94,14 @@ <h1 class="title">Body</h1>
                   </select>
                 </div>
               </div>
-              <table>
-                <tr class="row">
-                  <td class="cell"><div><textarea data-name="quote" rows="1" cols="80" placeholder="Quote..."></textarea></div></td>
-                  <td class="cell"><div><textarea data-name="author" rows="1" cols="80" placeholder="Author..."></textarea></div></td>
-                </tr>
-              </table>
+              <div class="field-contents">
+                <table>
+                  <tr class="row">
+                    <td class="cell"><div><textarea data-name="quote" rows="1" cols="80" placeholder="Quote..."></textarea></div></td>
+                    <td class="cell"><div><textarea data-name="author" rows="1" cols="80" placeholder="Author..."></textarea></div></td>
+                  </tr>
+                </table>
+              </div>
             </div>
             <div class="back">
               <p>the back</p>
@@ -114,18 +120,20 @@ <h1 class="title">Body</h1>
                   </select>
                 </div>
               </div>
-              <table>
-                  <tr class="row">
-                    <td class="cell"><div><textarea rows="1" cols="80"></textarea></div></td>
-                  </tr>
-                  <tr class="row">
-                    <td class="cell"><div><textarea rows="1" cols="80"></textarea></div></td>
-                  </tr>
-                  <tr class="row">
-                    <td class="cell"><div><textarea placeholder="Add item..." rows="1" cols="80"></textarea></div></td>
-                  </tr>
-                </tbody>
-              </table>
+              <div class="field-contents">
+                <table>
+                    <tr class="row">
+                      <td class="cell"><div><textarea rows="1" cols="80"></textarea></div></td>
+                    </tr>
+                    <tr class="row">
+                      <td class="cell"><div><textarea rows="1" cols="80"></textarea></div></td>
+                    </tr>
+                    <tr class="row">
+                      <td class="cell"><div><textarea placeholder="Add item..." rows="1" cols="80"></textarea></div></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
             <div class="back">
               <p>the back</p>
@@ -144,12 +152,14 @@ <h1 class="title">Body</h1>
                   </select>
                 </div>
               </div>
-              <table>
-                  <tr class="row">
-                    <td class="cell"><div><textarea disabled rows="1" cols="80"></textarea></div></td>
-                  </tr>
-                </tbody>
-              </table>
+              <div class="field-contents">
+                <table>
+                    <tr class="row">
+                      <td class="cell"><div><textarea disabled rows="1" cols="80"></textarea></div></td>
+                    </tr>
+                  </tbody>
+                </table>
+              </div>
             </div>
             <a href="#" class="anchor"><span>+ Add Block</span></a>
           </div>

diff --git a/test7/js/script.js b/test7/js/script.js
@@ -37,14 +37,16 @@ $(document).delegate('.add a', 'click', function(e) {
 $(function() {
 	$('.fields').sortable({
 		"axis": "y",
+		"handle": ".chooser",
 		"change": function(e, ui) {
 			ui.item.parents('.field-container').trigger('update');
 		}
-	});
+	}).enableSelection();
 });
 
-$(document).on('click', '.icon', function(e) {
+$(document).on('click', '.chooser', function(e) {
 	$(this).parents('.field').eq(0).toggleClass('flip');
+	$('*:focus').blur();
 });
 
 $(document).on('change', '.chooser select', function(e) {