fix bars

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

@@ -9,6 +9,7 @@
     <defs>
     <clipPath id="myClip1"><rect id="Clip-Path-Left" x="0" y="0" width="216" height="400"/></clipPath>
     <clipPath id="myClip2"><rect id="Clip-Path-Right" x="0" y="0" width="216" height="400"/></clipPath>
+    <clipPath id="myClip3"><rect id="Clip-Path-Left-Chat" x="0" y="0" width="216" height="400"/></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">
@@ -84,18 +85,18 @@
                     <tspan x="13" y="24">Login with</tspan>
                 </text>
             </g>
-            <g id="Online-Users" transform="translate(18.000000, 13.000000)" sketch:type="MSShapeGroup">
+            <g id="Online-Users" cursor="pointer" transform="translate(18.000000, 13.000000)" sketch:type="MSShapeGroup">
                 <rect id="Online-Users-Pad" fill="#FFFFFF" x="0" y="0" width="196.066" height="43" rx="5"></rect>
                 <g id="Online-Logo" transform="translate(5.000000, 6.000000)">
                     <path d="M-0.065,15.891 C-0.065,7.39 6.851,0.474 15.352,0.474 C23.853,0.474 30.769,7.39 30.769,15.891 C30.769,24.392 23.853,31.308 15.352,31.308 C6.852,31.308 -0.065,24.392 -0.065,15.891 Z" id="Shape" fill="#517ECE"></path>
                     <path d="M23.89,14.8977927 C24.135,14.6127927 24.272,14.2607927 24.272,13.8257927 L24.272,13.2507927 C24.448,13.2537927 24.568,13.1357927 24.568,12.9897927 L24.568,12.4017927 C24.597,12.3997927 24.625,12.3967927 24.654,12.3947927 C26.186,9.84879271 23,7.91179271 21.701,9.99579271 C20.682,9.86379271 19.539,10.6517927 20.389,12.4267927 C20.442,12.5367927 20.497,12.6357927 20.554,12.7217927 L20.56,12.9907927 C20.56,13.1367927 20.68,13.2547927 20.827,13.2547927 C20.83,13.2547927 20.836,13.8257927 20.836,13.8257927 C20.836,14.2247927 20.971,14.5597927 21.19,14.8377927 L21.158,15.1027927 C19.997,15.1027927 19.014,15.7417927 18.502,16.6717927 C18.138,16.5727927 17.756,16.5157927 17.359,16.5157927 L17.26,16.5157927 L17.218,16.2207927 C17.571,15.8117927 17.765,15.3067927 17.765,14.6817927 L17.765,13.8587927 C18.019,13.8627927 18.19,13.6937927 18.19,13.4857927 L18.19,12.6407927 C18.233,12.6377927 18.271,12.6337927 18.313,12.6307927 C20.511,8.97679271 15.806,6.31579271 14.112,7.15579271 C14.013,7.20979271 14.049,7.28279271 14.113,7.28579271 C14.266,7.28879271 14.372,7.31679271 14.462,7.44979271 C14.488,7.50379271 14.667,8.01779271 13.803,8.23279271 C12.722,8.48279271 10.973,10.1307927 12.194,12.6777927 C12.27,12.8357927 12.35,12.9777927 12.43,13.1007927 C12.433,13.1007927 12.439,13.4857927 12.439,13.4857927 C12.439,13.6937927 12.609,13.8627927 12.821,13.8627927 L12.833,14.6837927 C12.833,15.2557927 13.025,15.7367927 13.343,16.1357927 L13.296,16.5167927 C13.039,16.5167927 12.809,16.5397927 12.585,16.5767927 C12.102,15.5647927 11.069,14.8587927 9.864,14.8587927 L9.765,14.6527927 C10.011,14.3677927 10.146,14.0167927 10.146,13.5807927 L10.146,13.0067927 C10.323,13.0097927 10.444,12.8927927 10.444,12.7467927 L10.444,12.1577927 C10.473,12.1557927 10.499,12.1537927 10.53,12.1507927 C11.364,10.7627927 10.551,9.64279271 10.149,8.26779271 C9.342,9.50879271 8.139,8.06879271 7.602,8.33479271 C7.572,8.35079271 7.148,9.41979271 6.074,9.02179271 C6.522,10.0417927 5.782,11.1747927 6.265,12.1837927 C6.318,12.2937927 6.373,12.3927927 6.43,12.4787927 L6.435,12.7487927 C6.435,12.8947927 6.554,13.0117927 6.702,13.0117927 L6.71,13.5837927 C6.71,13.9827927 6.845,14.3177927 7.065,14.5957927 L7.032,14.8607927 C5.35,14.8607927 4,16.1977927 4,17.8457927 C4,17.8457927 4.369,20.0787927 8.507,20.0747927 C8.687,20.0747927 8.851,20.0647927 9.016,20.0567927 C8.973,20.2997927 8.946,20.5467927 8.946,20.8027927 C8.946,20.8027927 9.475,24.0077927 15.413,24.0017927 C21.208,23.9947927 21.684,20.8027927 21.684,20.8027927 C21.684,20.6217927 21.668,20.4447927 21.646,20.2687927 C21.951,20.2987927 22.272,20.3207927 22.63,20.3197927 C26.668,20.3157927 27,18.0907927 27,18.0907927 C27.001,16.4407927 25.651,15.1037927 23.987,15.1037927 L23.89,14.8977927 Z" id="Path" fill="#FFFFFF"></path>
                 </g>
             </g>
-            <text id="722" fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20" font-weight="bold">
+            <text id="722" fill="#517ECE" cursor="pointer" sketch:type="MSTextLayer" font-family="Exo 2" font-size="20" font-weight="bold">
                 <tspan id="723" x="59" y="41">722</tspan>
             </text>
-            <text id="users-online" fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo 2" font-size="17" font-weight="normal">
-                <tspan id="users-online-text" x="99" y="40">users online</tspan>
+            <text id="users-online"  fill="#517ECE" sketch:type="MSTextLayer" font-family="Exo 2" font-size="17" font-weight="normal">
+                <tspan id="users-online-text" cursor="pointer" x="99" y="40">users online</tspan>
             </text>
             <rect id="Back-5" fill="#D6E8EA" sketch:type="MSShapeGroup" x="0" y="453" width="1070" height="206.792"></rect>
             <path d="M1071,660 L1,660 L1,600.976 L850.979,600.976 L1071,600.976 L1071,660 L1071,660 Z" id="Back-4" fill="#A8CACC" sketch:type="MSShapeGroup"></path>
@@ -737,11 +738,11 @@
         <path d="M680.82681,16 L661.143994,16 C658.854843,16 657,17.8548426 657,20.1430683 L657,50.1835548 C657,52.4717805 658.854843,54.3266231 661.143994,54.3266231 L680.82681,54.3266231 C683.115036,54.3266231 684.969878,52.4717805 684.969878,50.1835548 L684.969878,20.1430683 C684.968952,17.8548426 683.115036,16 680.82681,16 L680.82681,16 L680.82681,16 Z M670.985865,41.0399123 C667.737344,41.0399123 665.108338,38.4072025 665.108338,35.1623855 C665.108338,31.9147904 667.737344,29.2848588 670.985865,29.2848588 C674.230682,29.2848588 676.863392,31.9147904 676.863392,35.1623855 C676.863392,38.4090546 674.230682,41.0399123 670.985865,41.0399123 L670.985865,41.0399123 L670.985865,41.0399123 Z" id="Okey-Tash-Logo-2" fill="#517ECE" sketch:type="MSShapeGroup"></path>
         <path d="M717.82681,16 L698.143994,16 C695.854843,16 694,17.8548426 694,20.1430683 L694,50.1835548 C694,52.4717805 695.854843,54.3266231 698.143994,54.3266231 L717.82681,54.3266231 C720.115036,54.3266231 721.969878,52.4717805 721.969878,50.1835548 L721.969878,20.1430683 C721.968952,17.8548426 720.115036,16 717.82681,16 L717.82681,16 L717.82681,16 Z M707.985865,41.0399123 C704.737344,41.0399123 702.108338,38.4072025 702.108338,35.1623855 C702.108338,31.9147904 704.737344,29.2848588 707.985865,29.2848588 C711.230682,29.2848588 713.863392,31.9147904 713.863392,35.1623855 C713.863392,38.4090546 711.230682,41.0399123 707.985865,41.0399123 L707.985865,41.0399123 L707.985865,41.0399123 Z" id="Okey-Tash-Logo-3" fill="#F6A623" sketch:type="MSShapeGroup"></path>
         <path d="M754.82681,16 L735.143994,16 C732.854843,16 731,17.8548426 731,20.1430683 L731,50.1835548 C731,52.4717805 732.854843,54.3266231 735.143994,54.3266231 L754.82681,54.3266231 C757.115036,54.3266231 758.969878,52.4717805 758.969878,50.1835548 L758.969878,20.1430683 C758.968952,17.8548426 757.115036,16 754.82681,16 L754.82681,16 L754.82681,16 Z M744.985865,41.0399123 C741.737344,41.0399123 739.108338,38.4072025 739.108338,35.1623855 C739.108338,31.9147904 741.737344,29.2848588 744.985865,29.2848588 C748.230682,29.2848588 750.863392,31.9147904 750.863392,35.1623855 C750.863392,38.4090546 748.230682,41.0399123 744.985865,41.0399123 L744.985865,41.0399123 L744.985865,41.0399123 Z" id="Okey-Tash-Logo-4" fill="#517ECE" sketch:type="MSShapeGroup"></path>
-        <g id="Chat" sketch:type="MSLayerGroup" y="0" clip-path="url(#myClip)" transform="translate(857.000000, 107.000000)">
+        <g id="Chat" sketch:type="MSLayerGroup" y="0" clip-path="url(#myClip2)" transform="translate(857.000000, 107.000000)">
         </g>
-        <g id="Online-List" sketch:type="MSLayerGroup" y="0" clip-path="url(#myClip)" transform="translate(1.000000, 107.000000)">
+        <g id="Online-List" sketch:type="MSLayerGroup" y="0" clip-path="url(#myClip1)" transform="translate(1.000000, 107.000000)">
         </g>
-        <g id="Online-Chat" sketch:type="MSLayerGroup" y="0" clip-path="url(#myClip)" transform="translate(1.000000, 107.000000)">
+        <g id="Online-Chat" sketch:type="MSLayerGroup" y="0" clip-path="url(#myClip3)" transform="translate(1.000000, 107.000000)">
         </g>
         <g id="Player-Statistics" sketch:type="MSLayerGroup" transform="translate(209.000000, 87.000000)">
             <g id="Dialog-2" sketch:type="MSShapeGroup">
@@ -781,9 +782,16 @@
         </g>
     </g>
 
-    <foreignObject x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt)">
-        <div id="edit" 
+    <foreignObject x="864" y="504" width="198" height="120" onmouseover="barHover(evt);" onmouseout="barHoverOut(evt);">
+        <div xmlns:data="Chat" id="edit"
           style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
         contentEditable="true" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
     </foreignObject>
+
+    <foreignObject x="10" y="504" width="198" height="120" onmouseover="onlineHover(evt);" onmouseout="onlineHoverOut(evt);">
+        <div xmlns:data="Chat+xxx" id="onlineChatEdit"
+          style="padding:4px;background-color:#FFF687;color:#3B5998;font-family:'Exo 2';font-size:16px;"
+        contentEditable="true" xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div>
+    </foreignObject>
+
 </svg>

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

@@ -275,38 +275,51 @@ loadFile('templates/Card.svg', function() {
         document.getElementById("Player-Statistics").setAttribute('onclick', 'onPlayerInfoClose(evt)');
 
         for (var i=1;i<16;i++) { empty_card(i,2); empty_card(i,1); }
-        
+
         document.getElementById('Page-1').addEventListener("mousewheel", mouseWheelHandler, false);
-        
+
+        // Setup Clipping ViewPorts
+
         var clipPath1 = svg('<clipPath id="myClip1"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left" x="0" y="0" width="216" height="400"/></clipPath>');
         var clipPath2 = svg('<clipPath id="myClip2"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Right" x="0" y="0" width="216" height="400"/></clipPath>');
+        var clipPath3 = svg('<clipPath id="myClip3"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left-Chat" x="0" y="0" width="216" height="400"/></clipPath>');
         document.getElementsByTagName('defs').item(0).appendChild(clipPath1);
         document.getElementsByTagName('defs').item(0).appendChild(clipPath2);
+        document.getElementsByTagName('defs').item(0).appendChild(clipPath3);
         document.getElementById("Online-List").setAttribute("clip-path","url(#myClip1)");
         document.getElementById("Chat").setAttribute("clip-path","url(#myClip2)");
+        document.getElementById("Online-Chat").setAttribute("clip-path","url(#myClip1)");
         document.getElementById("Clip-Path-Left").setAttribute("transform", "translate(0,0)");
         document.getElementById("Clip-Path-Right").setAttribute("transform", "translate(0,0)");
+        document.getElementById("Clip-Path-Left-Chat").setAttribute("transform", "translate(0,0)");
+
         document.getElementById('Player-Statistics').style.display = 'none';
         document.getElementById("Right-Bar").setAttribute("fill","skyblue");
         document.getElementById("Right-Bar").setAttribute("xmlns:data","Right-Bar");
+
         document.getElementById("Right-Bar").onmouseover = barHover;
         document.getElementById("Right-Bar").onmouseout = barHoverOut;
         document.getElementById("Left-Bar").onmouseover = onlineHover;
         document.getElementById("Left-Bar").onmouseout = onlineHoverOut;
+
+        // HTML editors
+
+        document.getElementById('onlineChatEdit').setAttribute("contentEditable","true");
+        document.getElementById('onlineChatEdit').onkeydown = chatEditor;
+        document.getElementById("onlineChatEdit").style.display = 'none';
+
         document.getElementById('edit').setAttribute("contentEditable","true");
         document.getElementById('edit').onkeydown = chatEditor;
-//        document.getElementById("Online-List").style.display = 'none';
-        document.getElementById("Online-Users").onclick = showOnlineList;
-        document.getElementById("Online-Users-Pad").onclick = showOnlineList;
-        document.getElementById("Online-Logo").onclick = showOnlineList;
-        document.getElementById("722").onclick = showOnlineList;
-        document.getElementById("723").onclick = showOnlineList;
-        document.getElementById("users-online").onclick = showOnlineList;
-        document.getElementById("users-online-text").onclick = showOnlineList;
-
-        
-        
-        
+        document.getElementById('edit').setAttribute("xmlns:data","Chat");
+        document.getElementById("edit").style.display = '';
+
+        // showOnlineList ctor
+
+        var onlineListOnClick = ["Online-Users","Online-Users-Pad","Online-Logo",
+            "722","723","users-online","users-online-text"];
+        onlineListOnClick.map(
+            function(x) { document.getElementById(x).onclick = showOnlineList; });
+
         onRightMenuDown();
 
 
@@ -316,10 +329,7 @@ loadFile('templates/Card.svg', function() {
 
 
 
-var removeChilds = function (node) {
-    var last;
-    while (last = node.lastChild) node.removeChild(last);
-};
+var removeChilds = function (e) { var last; while (last = e.lastChild) e.removeChild(last); };
 
 function onPlayerInfo(evt) {
     ws.send(enc(tuple(atom('client'),
@@ -328,7 +338,7 @@ function onPlayerInfo(evt) {
 
 function onPlayerInfoClose(evt) {
     document.getElementById('Player-Statistics').style.display = 'none';
-    }
+}
 
 function onRightMenu(evt) {
     localStorage.clear();
@@ -348,6 +358,7 @@ function drawSampleCards() {
 
 var scrollSensitivity = 0.2;
 var scroll_left = 5;
+var scroll_left_chat = 5;
 var scroll_right = -10000;
 
 function chatMessage(chatName, id, me, string) {
@@ -414,11 +425,11 @@ function mouseWheelHandler(e) {
 
     var evt = e;
     var scroll_dy = evt.detail ? evt.detail * scrollSensitivity : evt.wheelDelta * scrollSensitivity;
-    var ori = leftActive ? scroll_left : scroll_right;
+    var ori = leftActive ? (currentChat == null ? scroll_left : scroll_left ) : scroll_right;
     var scroll = parseFloat(scroll_dy) + parseFloat(ori);
-    var selectedBar = leftActive ? "Online-List" : "Chat";
-    var selectedClip = leftActive ? "Clip-Path-Left" : "Clip-Path-Right";
-    var selectedBarShift = leftActive ? 0 : 857;
+    var selectedBar = leftActive ? (currentChat == null ? "Online-List" : currentChat) : "Chat";
+    var selectedClip = leftActive ? (currentChat == null ? "Clip-Path-Left" : "Clip-Path-Left-Chat") : "Clip-Path-Right";
+    var selectedBarShift = leftActive ? 2 : 857;
     var limit = parseFloat(document.getElementById(selectedBar).getBBox().height) - 400;
     if (scroll > 5) scroll = 5;
     if (scroll < -limit) scroll = -limit;
@@ -467,12 +478,8 @@ function create_multiline(target) {
     }
 }
 
-function barHover(evt) { 
-    var container = evt.target.getAttribute("xmlns:data");
-    document.getElementById(container).setAttribute("fill","skyblue"); }
-function barHoverOut(evt) { 
-    var container = evt.target.getAttribute("xmlns:data");
-    document.getElementById(container).setAttribute("fill","lightblue"); }
+function barHover(evt) { document.getElementById("Right-Bar").setAttribute("fill","skyblue"); }
+function barHoverOut(evt) { document.getElementById("Right-Bar").setAttribute("fill","lightblue"); }
 function onlineHover(evt) { document.getElementById("Left-Bar").setAttribute("fill","skyblue"); }
 function onlineHoverOut(evt) { document.getElementById("Left-Bar").setAttribute("fill","lightblue"); }
 function onlineHoverColor(evt) {
@@ -487,16 +494,18 @@ function onlineHoverOutColor(evt) {
 }
 
 function chatEditor(evt) {
+    var chatContainer = evt.target.getAttribute("xmlns:data");
     if (evt.keyCode == 13 && evt.metaKey == false) {
-        var e = document.getElementById('edit');
+        var e = evt.target; //document.getElementById('edit');
         if (e.innerText.trim() != ""){
-            chatMessage("Chat","100","Maxim",e.innerText.trim().encodeHTML());
+            chatMessage(chatContainer,"100","Maxim",e.innerText.trim().encodeHTML());
             e.innerHTML = '';
         }
     } else if (evt.keyCode == 13 && evt.metaKey == true) {
         document.execCommand('insertText',false, '\n');
     }
     var scroll = -1000000;
+    if (null != currentChat) left_scroll = scroll;
     mouseWheelHandler({'detail':scroll,'wheelDelta':scroll});
 }
 
@@ -522,17 +531,25 @@ function removeOnlineUser(name) {
 
 function openChat(evt) {
     document.getElementById("Online-List").style.display = 'none';
+    document.getElementById("onlineChatEdit").style.display = '';
     var name = evt.target.getAttribute("xmlns:data");
     currentChat = "Chat+"+name;
     var chatElement = document.getElementById(currentChat);
     if (null == chatElement) {
-        var html = '<g xmlns="http://www.w3.org/2000/svg" id="'+currentChat+'" y="0" clip-path="url(#myClip)" transform="translate(1.000000, 107.000000)"></g>';
+        // read from local KVS
+        var html = '<g xmlns="http://www.w3.org/2000/svg" id="'+currentChat+'" y="0" clip-path="url(#myClip3)" transform="translate(1.000000, 107.000000)"></g>';
         document.getElementById("Page-1").appendChild(svg(html));
-        chatMessage(currentChat,"1","Maxim2",name+":\nHello There!".encodeHTML());
-        chatMessage(currentChat,"1","Maxim2",name+":\nHello There!".encodeHTML());
+        chatMessage(currentChat,"1","System","You can chat with\n"+name);
     } else {
         document.getElementById(currentChat).style.display = '';
     }
+    document.getElementById("onlineChatEdit").setAttribute("xmlns:data",currentChat);
+    scroll_left = -1000000;
+
+    onlineHover();
+    mouseWheelHandler({'detail':-100000,'wheelDelta':-100000});
+    onlineHoverOut();
+
 //    document.getElementById("users-online-text").textContent = currentChat;
 }
 
@@ -542,12 +559,25 @@ function showOnlineList(evt) {
     mouseWheelHandler({'detail':5,'wheelDelta':5});
     onlineHoverOut();
 
+    document.getElementById("onlineChatEdit").style.display = 'none';
+    if (null != currentChat) document.getElementById(currentChat).style.display = 'none';
     document.getElementById("Online-List").style.display = '';
-    document.getElementById(currentChat).style.display = 'none';
+    currentChat = null;
 }
 
 var currentChat = null;
 
+function editorControl(id,left) {
+    var x = left == "left" ? 0 : 864;
+    var events = ' onmouseover="barHover(evt);" onmouseout="barHoverOut(evt)" ';
+    var html = '<foreignObject  xmlns="http://www.w3.org/2000/svg" x="'+x+'" y="504" width="198" height="120" ' + events + '>' +
+        '<div id="'+id+'" style="padding:4px;background-color:#FFF687;color:#3B5998;'+
+        'font-family:"Exo 2";font-size:16px;contentEditable="true" '+
+        'xmlns="http://www.w3.org/1999/xhtml">Write here some text.</div></foreignObject>';
+    var element = svg(html);
+    return element;
+}
+
 function addOnlineUser(name,full_name,insertMode) {
     var listElement = document.getElementById("Online-List");
     var clickEvent = ' onclick="openChat(evt);" '; 
@@ -557,9 +587,9 @@ function addOnlineUser(name,full_name,insertMode) {
     var y = (insertMode == "insertTop") ? "0" : listElement.getBBox().height;
     var html = '<g xmlns="http://www.w3.org/2000/svg" height="60" transform="translate(0, '+y+')">' +
             '<g xmlns:data="'+name+'" fill="#DBEBED" '+eventsColor+'>' +
-            '    <rect xmlns:data="'+name+'" fill="#DBEBED" id="'+name+'" x="10" y="0" width="196" height="48" ' +'></rect></g>' +
+            '    <rect cursor="pointer" xmlns:data="'+name+'" fill="#DBEBED" id="'+name+'" x="10" y="0" width="196" height="48" ' +'></rect></g>' +
             '<text xmlns:data="'+name+'" '+eventsColor+' '+
-            'font-family="Exo 2" font-size="18" font-weight="normal" line-spacing="18"'+
+            'font-family="Exo 2" font-size="18" cursor="pointer" font-weight="normal" line-spacing="18"'+
             ' fill="#3B5998">' +
                 '<tspan xmlns:data="'+name+'" font-weight="normal" fill="'+color+'" x="19" y="22">'+full_name+'</tspan>' + 
                 '<tspan xmlns:data="'+name+'" font-size="14" x="19" y="40">Score: 1043 Pos: 13</tspan></text>'+