Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse code

Fake mockup of visual code folding

  • Loading branch information...
commit 6e08050d967897fc2b58c77d77be574f98342ad0 0 parents
Narciso Jaramillo njx authored
4 README.md
Source Rendered
... ... @@ -0,0 +1,4 @@
  1 +Totally faked mockup of what it might look like to use a CSS custom filter to actually
  2 +visually "fold" folded code. Only runs in Chrome Canary.
  3 +
  4 +Just click anywhere to see it fold and unfold.
BIN  below-flat.png
BIN  below.png
BIN  collapsed.png
BIN  ellipses.png
BIN  expanded.png
BIN  folder-flat.png
BIN  folder.png
43 index.html
... ... @@ -0,0 +1,43 @@
  1 +<!doctype html>
  2 +<html>
  3 +<head>
  4 + <title>Folding mockup</title>
  5 + <link rel="stylesheet" href="styles.css"/>
  6 +</head>
  7 +
  8 +<body>
  9 + <div id="outer"></div>
  10 + <div id="folder"></div>
  11 + <div id="below"></div>
  12 +
  13 + <div id="tri"></div>
  14 + <div id="ellipses"></div>
  15 + <div id="sep"></div>
  16 +
  17 + <script>
  18 + var folded = false,
  19 + tri = document.getElementById("tri"),
  20 + ellipses = document.getElementById("ellipses"),
  21 + sep = document.getElementById("sep");
  22 +
  23 + function handleAnimEnd() {
  24 + ellipses.style.display = sep.style.display = "block";
  25 + }
  26 +
  27 + document.body.onclick = function (e) {
  28 + document.getElementById("folder").className = folded ? "doUnfold" : "doFold";
  29 + document.getElementById("below").className = folded ? "doBelowUnfold" : "doBelowFold";
  30 + tri.className = folded ? "expand" : "collapse";
  31 +
  32 + if (folded) {
  33 + tri.removeEventListener("webkitAnimationEnd", handleAnimEnd);
  34 + ellipses.style.display = sep.style.display = "none";
  35 + } else {
  36 + tri.addEventListener("webkitAnimationEnd", handleAnimEnd);
  37 + }
  38 +
  39 + folded = !folded;
  40 + };
  41 + </script>
  42 +</body>
  43 +</html>
BIN  outer-flat.png
BIN  outer.png
37 shader.fs
... ... @@ -0,0 +1,37 @@
  1 +/*
  2 + * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
  3 + *
  4 + * Licensed under the Apache License, Version 2.0 (the "License");
  5 + * you may not use this file except in compliance with the License.
  6 + * You may obtain a copy of the License at
  7 + *
  8 + * http://www.apache.org/licenses/LICENSE-2.0
  9 + *
  10 + * Unless required by applicable law or agreed to in writing, software
  11 + * distributed under the License is distributed on an "AS IS" BASIS,
  12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 + * See the License for the specific language governing permissions and
  14 + * limitations under the License.
  15 + */
  16 +
  17 +precision mediump float;
  18 +
  19 +// Uniforms passed in from CSS
  20 +
  21 +uniform vec4 backColor;
  22 +uniform float useColoredBack;
  23 +
  24 +// Varyings
  25 +
  26 +varying float v_lighting;
  27 +
  28 +// Main
  29 +
  30 +void main()
  31 +{
  32 + if (!gl_FrontFacing && useColoredBack >= 0.5)
  33 + css_MixColor = v_lighting * backColor;
  34 + else
  35 + css_MixColor = vec4(v_lighting);
  36 + css_MixColor.a = 1.0;
  37 +}
67 shader.vs
... ... @@ -0,0 +1,67 @@
  1 +/*
  2 + * Copyright (c) 2012 Adobe Systems Incorporated. All rights reserved.
  3 + *
  4 + * Licensed under the Apache License, Version 2.0 (the "License");
  5 + * you may not use this file except in compliance with the License.
  6 + * You may obtain a copy of the License at
  7 + *
  8 + * http://www.apache.org/licenses/LICENSE-2.0
  9 + *
  10 + * Unless required by applicable law or agreed to in writing, software
  11 + * distributed under the License is distributed on an "AS IS" BASIS,
  12 + * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13 + * See the License for the specific language governing permissions and
  14 + * limitations under the License.
  15 + */
  16 +
  17 +precision mediump float;
  18 +
  19 +// Built-in attributes.
  20 +
  21 +attribute vec4 a_position;
  22 +attribute vec2 a_texCoord;
  23 +attribute vec2 a_meshCoord;
  24 +
  25 +// Built-in uniforms.
  26 +
  27 +uniform mat4 u_projectionMatrix;
  28 +uniform vec2 u_textureSize;
  29 +
  30 +// Uniforms passed-in from CSS
  31 +
  32 +uniform mat4 transform;
  33 +
  34 +uniform float direction;
  35 +
  36 +uniform float mapDepth;
  37 +
  38 +uniform float t;
  39 +uniform float shadow;
  40 +
  41 +// Varyings
  42 +
  43 +varying float v_lighting;
  44 +
  45 +// Constants
  46 +
  47 +const float PI = 3.1415629;
  48 +
  49 +// Main
  50 +
  51 +void main()
  52 +{
  53 + vec4 pos = a_position;
  54 + float ramp = a_meshCoord.y;
  55 + if (ramp > 0.5) {
  56 + ramp = 1.0 - ramp;
  57 + }
  58 + float zOffset = ramp * -50.0;
  59 + float adjT = t * 0.999; // don't get to the end to avoid overlap
  60 +
  61 + pos.z = zOffset * mapDepth * adjT - mapDepth * adjT / 2.0;
  62 + pos.y = (pos.y + 0.5) * (1.0 - adjT) - 0.5;
  63 +
  64 + v_lighting = 1.0 - (ramp * adjT * 1.5);
  65 +
  66 + gl_Position = u_projectionMatrix * transform * pos;
  67 +}
158 styles.css
... ... @@ -0,0 +1,158 @@
  1 +#outer {
  2 + position: absolute;
  3 + background: url(outer-flat.png);
  4 + left: 0;
  5 + top: 0;
  6 + width: 1035px;
  7 + height: 817px;
  8 +}
  9 +
  10 +#folder {
  11 + position: absolute;
  12 + background: url(folder-flat.png);
  13 + left: 57px;
  14 + top: 181px;
  15 + width: 921px;
  16 + height: 301px;
  17 + -webkit-transform: translateZ(0);
  18 +}
  19 +
  20 +#below {
  21 + position: absolute;
  22 + background: url(below-flat.png);
  23 + left: 57px;
  24 + top: 481px;
  25 + width: 921px;
  26 + height: 256px;
  27 + -webkit-transform: translateZ(0);
  28 +}
  29 +
  30 +.doFold {
  31 + -webkit-animation-duration: 0.15s;
  32 + -webkit-animation-name: fold;
  33 + -webkit-animation-fill-mode: forwards;
  34 + -webkit-animation-timing-function: linear;
  35 +}
  36 +
  37 +.doUnfold {
  38 + -webkit-animation-duration: 0.15s;
  39 + -webkit-animation-name: unfold;
  40 + -webkit-animation-fill-mode: forwards;
  41 + -webkit-animation-timing-function: linear;
  42 +}
  43 +
  44 +@-webkit-keyframes fold {
  45 + from {
  46 + -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 0, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
  47 + }
  48 + to {
  49 + -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 1, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
  50 + }
  51 +}
  52 +
  53 +@-webkit-keyframes unfold {
  54 + from {
  55 + -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 1, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
  56 + }
  57 + to {
  58 + -webkit-filter: custom(url(shader.vs) mix(url(shader.fs) multiply source-atop), 4 4 border-box, transform perspective(1000) scale(1) rotateX(0deg) rotateY(0deg) rotateZ(0deg), t 0, mapDepth 10, useColoredBack 1, backColor 1 1 1 1, direction 0, shadow 0);
  59 + }
  60 +}
  61 +
  62 +.doBelowFold {
  63 + -webkit-animation-duration: 0.15s;
  64 + -webkit-animation-name: slideUp;
  65 + -webkit-animation-fill-mode: forwards;
  66 + -webkit-animation-timing-function: linear;
  67 +}
  68 +
  69 +.doBelowUnfold {
  70 + -webkit-animation-duration: 0.15s;
  71 + -webkit-animation-name: slideDown;
  72 + -webkit-animation-fill-mode: forwards;
  73 + -webkit-animation-timing-function: linear;
  74 +}
  75 +
  76 +@-webkit-keyframes slideUp {
  77 + from {
  78 + top: 481px;
  79 + height: 256px;
  80 + }
  81 + to {
  82 + top: 181px;
  83 + height: 556px;
  84 + }
  85 +}
  86 +
  87 +@-webkit-keyframes slideDown {
  88 + from {
  89 + top: 181px;
  90 + height: 556px;
  91 + }
  92 + to {
  93 + top: 481px;
  94 + height: 256px;
  95 + }
  96 +}
  97 +
  98 +#tri {
  99 + position: absolute;
  100 + background: url(expanded.png);
  101 + left: 115px;
  102 + top: 165px;
  103 + width: 16px;
  104 + height: 16px;
  105 +}
  106 +
  107 +.collapse {
  108 + -webkit-animation-duration: 0.15s;
  109 + -webkit-animation-name: collapse;
  110 + -webkit-animation-fill-mode: forwards;
  111 + -webkit-animation-timing-function: linear;
  112 +}
  113 +
  114 +.expand {
  115 + -webkit-animation-duration: 0.15s;
  116 + -webkit-animation-name: expand;
  117 + -webkit-animation-fill-mode: forwards;
  118 + -webkit-animation-timing-function: linear;
  119 +}
  120 +
  121 +@-webkit-keyframes collapse {
  122 + from {
  123 + -webkit-transform: rotateZ(0deg);
  124 + }
  125 + to {
  126 + -webkit-transform: rotateZ(-90deg);
  127 + }
  128 +}
  129 +
  130 +@-webkit-keyframes expand {
  131 + from {
  132 + -webkit-transform: rotateZ(-90deg);
  133 + }
  134 + to {
  135 + -webkit-transform: rotateZ(0deg);
  136 + }
  137 +}
  138 +
  139 +#ellipses {
  140 + position: absolute;
  141 + display: none;
  142 + background: url(ellipses.png);
  143 + left: 429px;
  144 + top: 167px;
  145 + width: 37px;
  146 + height: 15px;
  147 +}
  148 +
  149 +#sep {
  150 + position: absolute;
  151 + display: none;
  152 + border-top: 1px solid #ccc;
  153 + border-bottom: 1px solid #eee;
  154 + width: 921px;
  155 + height: 0px;
  156 + left: 57px;
  157 + top: 181px;
  158 +}

0 comments on commit 6e08050

Please sign in to comment.
Something went wrong with that request. Please try again.