scroll viewport

apps/web/priv/static/doc/Kakaranet-Scene.sketch/metadata

@@ -15,7 +15,7 @@
 		<string>LucidaGrande-Bold</string>
 	</array>
 	<key>length</key>
-	<integer>2669156</integer>
+	<integer>2668970</integer>
 	<key>version</key>
 	<integer>36</integer>
 </dict>

apps/web/priv/static/doc/Kakaranet-Scene.svg

@@ -3,7 +3,9 @@
     <!-- Generator: Sketch 3.0.2 (7799) - http://www.bohemiancoding.com/sketch -->
     <title>Kakaranet-Scene</title>
     <description>Created with Sketch.</description>
-    <defs></defs>
+    <defs>
+    <clipPath id="myClip"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path" x="0" y="0" width="216" height="200"/></clipPath>
+    </defs>
     <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" sketch:type="MSPage">
         <g id="Kakaranet-12-maxim" sketch:type="MSLayerGroup">
             <rect id="Sky" fill="#EDF9FF" sketch:type="MSShapeGroup" x="0" y="0" width="1070.148" height="453"></rect>
@@ -755,48 +757,48 @@
             </g>
             <rect id="Chat-Input" stroke="#979797" fill="#FFFFFF" sketch:type="MSShapeGroup" x="8" y="194" width="196" height="61"></rect>
         </g>
-        <g id="Online-List" sketch:type="MSLayerGroup" transform="translate(1.000000, 95.000000)">
-            <g id="Online-Scroll">
-                <g id="Online-Maxim">
-                    <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
-                    <rect id="Rectangle-84" stroke="#48AF5E" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="7" y="7" width="60" height="60"></rect>
-                    <text id="Максим-Сохацкий" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
-                        <tspan x="72" y="25">Максим </tspan>
-                        <tspan x="72" y="43">Сохацкий</tspan>
-                    </text>
-                </g>
-                <g id="Online-Sinan" transform="translate(0.000000, 74.000000)">
-                    <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
-                    <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
-                    <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
-                        <tspan x="75.685446" y="24">Синан</tspan>
-                        <tspan x="75.685446" y="42">Устел</tspan>
-                    </text>
-                </g>
-                <g id="Online-Sinan-2" transform="translate(0.000000, 148.000000)">
-                    <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
-                    <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
-                    <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
-                        <tspan x="75.685446" y="24">Синан</tspan>
-                        <tspan x="75.685446" y="42">Устел</tspan>
-                    </text>
-                </g>
-                <g id="Online-Sinan-3" transform="translate(0.000000, 222.000000)">
-                    <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
-                    <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
-                    <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
-                        <tspan x="75.685446" y="24">Синан</tspan>
-                        <tspan x="75.685446" y="42">Устел</tspan>
-                    </text>
-                </g>
-                <g id="Online-Sinan-4" transform="translate(0.000000, 296.000000)">
-                    <rect id="Rect" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
-                    <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
-                    <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
-                        <tspan x="75.685446" y="24">Синан</tspan>
-                        <tspan x="75.685446" y="42">Устел</tspan>
-                    </text>
-                </g>
+        <g id="Online-List" sketch:type="MSLayerGroup" y="0" clip-path="url(#myClip)" transform="translate(1.000000, 95.000000)">
+          <g id="Online-Scroll" clip-path="url(#myClip)">
+            <g id="Online-Maxim">
+                <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
+                <rect id="Rectangle-84" stroke="#48AF5E" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="7" y="7" width="60" height="60"></rect>
+                <text id="Максим-Сохацкий" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
+                    <tspan x="72" y="25">Максим </tspan>
+                    <tspan x="72" y="43">Сохацкий</tspan>
+                </text>
+            </g>
+            <g id="Online-Sinan" transform="translate(0.000000, 74.000000)">
+                <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
+                <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
+                <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
+                    <tspan x="75.685446" y="24">Синан</tspan>
+                    <tspan x="75.685446" y="42">Устел</tspan>
+                </text>
+            </g>
+            <g id="Online-Sinan-2" transform="translate(0.000000, 148.000000)">
+                <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
+                <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
+                <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
+                    <tspan x="75.685446" y="24">Синан</tspan>
+                    <tspan x="75.685446" y="42">Устел</tspan>
+                </text>
+            </g>
+            <g id="Online-Sinan-3" transform="translate(0.000000, 222.000000)">
+                <rect id="Rectangle-83" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
+                <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
+                <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
+                    <tspan x="75.685446" y="24">Синан</tspan>
+                    <tspan x="75.685446" y="42">Устел</tspan>
+                </text>
+            </g>
+            <g id="Online-Sinan-4" transform="translate(0.000000, 296.000000)">
+                <rect id="Rect" stroke="#979797" fill="#DBEBED" sketch:type="MSShapeGroup" x="0" y="0" width="215" height="74"></rect>
+                <rect id="Rectangle-84" stroke="#E5BC7B" stroke-width="3" fill="#D8D8D8" sketch:type="MSShapeGroup" x="8" y="6.59994507" width="60.5633803" height="60"></rect>
+                <text id="Синан" sketch:type="MSTextLayer" font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18" fill="#3B5998">
+                    <tspan x="75.685446" y="24">Синан</tspan>
+                    <tspan x="75.685446" y="42">Устел</tspan>
+                </text>
+            </g>
             </g>
         </g>
         <g id="Player-Statistics" sketch:type="MSLayerGroup" transform="translate(209.000000, 87.000000)">

apps/web/priv/static/doc/svg.js

@@ -226,9 +226,9 @@ loadFile('templates/Card.svg', function() {
         
         document.getElementById('Page-1').addEventListener("mousewheel", mouseWheelHandler, false);
         
-        var clipPath = svg('<clipPath clipPathUnits="objectBoundingBox" id="myClip"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path" x="0" y="200" width="216" height="200"/></clipPath>');
+        var clipPath = svg('<clipPath id="myClip"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path" x="0" y="0" width="216" height="200"/></clipPath>');
         document.getElementsByTagName('defs').item(0).appendChild(clipPath);
-        document.getElementById("Online-Scroll").setAttribute("clip-path","url(#myClip)");
+        document.getElementById("Online-List").setAttribute("clip-path","url(#myClip)");
         document.getElementById('Player-Statistics').style.display = 'none';
         
         
@@ -279,15 +279,15 @@ function drawSampleCards() {
     slotName = slotNameDef; }
 
 var scrollSensitivity = 0.2;
+var scroll = 0.0;
 
 function mouseWheelHandler(e) {
     var evt = window.event || e;
-    var scroll = evt.detail ? evt.detail * scrollSensitivity : evt.wheelDelta * scrollSensitivity;
-    var ori = document.getElementById("Clip-Path").getAttribute("y");
-    ori = parseFloat(scroll) + parseFloat(ori);
-    document.getElementById("Clip-Path").setAttribute("y",parseFloat(ori));
-    document.getElementById("Online-Scroll").setAttribute("transform", "translate(0,"+(parseFloat(ori))+")");
-    document.getElementById("Online-Scroll").setAttribute("y", -parseFloat(ori));
+    var scroll_dy = evt.detail ? evt.detail * scrollSensitivity : evt.wheelDelta * scrollSensitivity;
+    var ori = scroll;
+    scroll = parseFloat(scroll_dy) + parseFloat(ori);
+    document.getElementById("Clip-Path").setAttribute("transform", "translate(0,"+parseFloat(scroll)+")");
+    document.getElementById("Online-List").setAttribute("transform", "translate(0,"+(parseFloat(95-scroll))+")");
     console.log(ori);
     return true; 
 }