fixedBar mode

apps/web/priv/static/app/js/bootloader.js

@@ -397,17 +397,20 @@ function relayout()
         shiftX = (innerWidth - realX) / 2;
 
         globalShiftX = shiftX - 10;
+        
+        var barwidth = scope.fixedChatBars ? 0 : globalShiftX;
+        var rightPosition = svgWidth+globalShiftX-(barwidth+216);
 
-        $("#Chat").attr({width:globalShiftX+206});
-        $("#Right-Bar").attr({width:215+globalShiftX});
-        $("#Clip-Path-Right").attr({width:globalShiftX+206});
+        $("#Chat").attr({width:barwidth+206});
+        $("#Right-Bar").attr({x:0,transform:"translate("+(rightPosition)+" 0)",width:barwidth+215});
+        $("#Clip-Path-Right").attr({width:barwidth+206});
 
         $("#Online-Users").attr({transform:"translate("+(-globalShiftX+10)+" 20)"});
-        $("#Facebook-Login").attr({transform:"translate("+(parseInt($("#Right-Bar")[0].getAttribute("x"))+206+globalShiftX-140)+" 20)"});
+        $("#Facebook-Login").attr({transform:"translate("+(rightPosition+(barwidth+216)-150)+" 20)"});
 
-        $("#Online-List").attr({x:0,transform:"translate("+(-globalShiftX)+" 100)",width:globalShiftX+206});
-        $("#Left-Bar").attr({x:0,transform:"translate("+(-globalShiftX)+" 0)",width:215+globalShiftX});
-        $("#Clip-Path-Left").attr({x:0,transform:"translate("+(-globalShiftX)+" 100)",width:globalShiftX+206});
+        $("#Online-List").attr({x:0,transform:"translate("+(-globalShiftX)+" 100)",width:barwidth+206});
+        $("#Left-Bar").attr({x:0,transform:"translate("+(-globalShiftX)+" 0)",width:barwidth+215});
+        $("#Clip-Path-Left").attr({x:0,transform:"translate("+(-globalShiftX)+" 100)",width:barwidth+206});
 
         onlineHover();
         mouseWheelHandler({'detail':0,'wheelDelta':0});

apps/web/priv/static/app/js/chat.js

@@ -262,43 +262,32 @@ function initChat()
     page.insertBefore(svg(onlineList),settings);
     page.insertBefore(svg(onlineChat),settings);
 
-    var clipPath1 = svg('<clipPath id="myClip1"><rect xmlns="http://www.w3.org/2000/svg" id="Clip-Path-Left" x="0" y="0" width="'+216+globalShiftX+'" 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+globalShiftX+'" 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+globalShiftX+'" 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("Right-Bar").setAttribute("fill","lightblue");
-    document.getElementById("Right-Bar").setAttribute("xmlns:data","Right-Bar");
-    document.getElementById("Left-Bar").setAttribute("fill","lightblue");
-    document.getElementById("Left-Bar").setAttribute("xmlns:data","Left-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;
+    $("#Right-Bar").attr("fill","lightblue");
+    $("#Right-Bar").attr("xmlns:data","Right-Bar");
+    $("#Left-Bar").attr("fill","lightblue");
+    $("#Left-Bar").attr("xmlns:data","Left-Bar");
+
+    $("#Right-Bar").on("mouseover", barHover);
+    $("#Right-Bar").on("mouseout", barHoverOut);
+    $("#Left-Bar").on("mouseover", onlineHover);
+    $("#Left-Bar").on("mouseout", onlineHoverOut);
+
 try {
-    document.getElementById('onlineChatEdit').setAttribute("contentEditable","true");
-    document.getElementById('onlineChatEdit').onkeydown = chatEditor;
-    document.getElementById('onlineChatEdit').onfocus = chatEditorClearContent;
-    document.getElementById("onlineChatEdit").style.display = 'none';
 
-    document.getElementById('edit').setAttribute("contentEditable","true");
-    document.getElementById('edit').onkeydown = chatEditor;
-    document.getElementById('edit').onfocus = chatEditorClearContent;
-    document.getElementById("edit").style.display = '';
+    $('#onlineChatEdit').attr("contentEditable","true");
+    $('#onlineChatEdit').on("keydown", chatEditor);
+    $('#onlineChatEdit').on("focus", chatEditorClearContent);
+    $("#onlineChatEdit").hide();
+
+    $('#edit').attr("contentEditable","true");
+    $('#edit').on("keydown",chatEditor);
+    $('#edit').on("focus",chatEditorClearContent);
+    $("#edit").show();
+
 } catch (e) { console.log("foreignObjects missing from SVG.txt"); }
-    document.getElementById('Page-1').addEventListener(mousewheelevt, mouseWheelHandler, false);
+
+    document.getElementById('Page-1').addEventListener(mousewheelevt,
+        mouseWheelHandler, false);
 
 }
 

apps/web/priv/static/app/js/selector.js

@@ -15,6 +15,7 @@ var scope = {
     MALE_SKINS: [ "Gabrielo", "Mustafa" ],
     FEMALE_SKINS: [ "Alina" ],
     paused: false,
+    fixedChatBars: true,
     version: 2306201401
 };