libretic/etherpad-lite
6
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

Merge pull request #362 from 0ip/nf

Browse source 
reworked pad.html, added settings menu, sticky chat, ...  Some minor bugs I will sort later tonight..  mostly UI stuff.  Merging for now to allow people to start building other items into settings menu
This commit is contained in:
John McLear 2012-01-26 14:20:03 -08:00
commit 7a726f86ec
8 changed files with 371 additions and 421 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
node/utils/tar.json
View file

@ -1,6 +1,7 @@
{ {
"pad.js": [ "pad.js": [
"jquery.js" "jquery.js"
, "ace2_common.js"
, "pad_utils.js" , "pad_utils.js"
, "plugins.js" , "plugins.js"
, "undo-xpopup.js" , "undo-xpopup.js"
@ -29,6 +30,7 @@
, "json2.js" , "json2.js"
, "colorutils.js" , "colorutils.js"
, "draggable.js" , "draggable.js"
, "ace2_common.js"
, "pad_utils.js" , "pad_utils.js"
, "pad_cookie.js" , "pad_cookie.js"
, "pad_editor.js" , "pad_editor.js"

87
static/css/pad.css
View file

@ -1,13 +1,13 @@
*,html,body,p{ margin: 0; padding: 0; } *,html,body,p{ margin: 0; padding: 0; }
.clear { clear: both; } .clear { clear: both; }
html { font-size: 62.5%; } html { font-size: 62.5%; width: 100%; }
body, textarea { font-family: Helvetica, Arial, sans-serif; } body, textarea { font-family: Helvetica, Arial, sans-serif; }
iframe {position:absolute;} iframe {position:absolute;}
#users #users
{ {
position: absolute; position: absolute;
z-index: 10; z-index:500;
background-color: #000; background-color: #000;
background-color: rgba(0,0,0,0.7); background-color: rgba(0,0,0,0.7);
width: 160px; width: 160px;
@ -560,28 +560,6 @@ table#otheruserstable { display: none; }
display: none; z-index: 55; } display: none; z-index: 55; }
#revision-notifier .label { color: #777; font-weight: bold; } #revision-notifier .label { color: #777; font-weight: bold; }
/* We don't ever actually hide the wrapper, even when the panel is
cloased, so that its contents can always be manipulated accurately. */
#padoptions { position: absolute; top: 0; left: 0; font-size: 1.2em;
color: #444; height: 100%; width: 100%; line-height: 15px; }
#options-viewhead { font-weight: bold; position: absolute; top: 10px; left: 15px;
width: auto; height: auto; }
#padoptions label { display: block; }
#padoptions input { padding: 0; margin: 0; }
#options-colorscheck { position: absolute; left: 15px; top: 34px; width: 15px; height: 15px; }
#options-colorslabel { position: absolute; left: 35px; top: 34px; }
#options-linenoscheck { position: absolute; left: 15px; top: 57px; width: 15px; height: 15px; }
#options-linenoslabel { position: absolute; left: 35px; top: 57px; }
#options-fontlabel { position: absolute; left: 15px; top: 82px; }
#viewfontmenu { position: absolute; top: 80px; left: 90px; width: 110px; }
#options-viewexplain { position: absolute; left: 215px; top: 15px; width: 100px; height: 70px; font-size: .7em;
padding-left: 10px; padding-top: 10px; border-left: 1px solid #ccc;
line-height: 20px; font-weight: bold; color: #999; }
#options-close { display: block; position: absolute; right: 7px; bottom: 8px;
width: auto; height: auto; font-size: 85%; color: #444; }
#mainmodals { z-index: 600; /* higher than the modals themselves #mainmodals { z-index: 600; /* higher than the modals themselves
so that modals are on top in IE */ } so that modals are on top in IE */ }
.modalfield { font-size: 1.2em; padding: 1px; border: 1px solid #bbb;} .modalfield { font-size: 1.2em; padding: 1px; border: 1px solid #bbb;}
@ -763,7 +741,26 @@ a#topbarmaximize {
width: 100%; width: 100%;
} }
#embed, #readonly { #settingsmenu {
position:absolute;
top:40px;
right:20px;
width:400px;
z-index:500;
padding:10px;
border-radius:6px;
background:black;
background:rgba(0, 0, 0, 0.7);
color: #fff;
font-size:14px;
display:none;
}
#settingsmenu p {
margin: 5px 0;
}
#embed {
display:none; display:none;
position:absolute; position:absolute;
top:40px; top:40px;
@ -780,20 +777,17 @@ padding: 10px;
border-radius: 6px; border-radius: 6px;
} }
#embedreadonly { .right {
float:right; float:right;
} }
#embedcode, #readonlyUrl, #linkcode { #embed input[type=text] {
margin-left:10px; width: 100%;
} padding: 5px;
box-sizing: border-box;
#embedinput, #readonlyInput, #linkinput { -moz-box-sizing: border-box;
width:375px; display:block;
height:24px;
display:inline;
margin-top: 10px; margin-top: 10px;
padding-left:4px;
} }
ul#colorpickerswatches ul#colorpickerswatches
@ -850,6 +844,7 @@ ul#colorpickerswatches li:hover
left:0px; left:0px;
top:25px; top:25px;
bottom:25px; bottom:25px;
z-index:1002;
} }
#chattext p #chattext p
@ -1006,7 +1001,7 @@ position: relative;
#import{ #import{
position:absolute; position:absolute;
width:250px; width:240px;
left:10px; left:10px;
line-height:20px; line-height:20px;
} }
@ -1019,7 +1014,7 @@ position: relative;
} }
.exporttype{ .exporttype{
line-height:20px; margin-top: 2px;
background-repeat:no-repeat; background-repeat:no-repeat;
padding-left:25px; padding-left:25px;
background-image: url("../../static/img/etherpad_lite_icons.png"); background-image: url("../../static/img/etherpad_lite_icons.png");
@ -1028,8 +1023,8 @@ position: relative;
} }
#importexportline{ #importexportline{
border: dotted 1px; border-left: 1px solid #fff;
height: 185px; height: 190px;
position:absolute; position:absolute;
width:0px; width:0px;
left:260px; left:260px;
@ -1149,14 +1144,22 @@ label[for=readonlyinput] {
margin: 0 10px 0 2px; margin: 0 10px 0 2px;
} }
#qr_center { #qr_center {
margin: 10px 10px auto 0; margin: 10px 10px auto 0;
text-align: center; text-align: center;
} }
#qrcode{ #embedreadonlyqr {
margin-left:10px; box-shadow: 0 0 10px #000;
border-radius: 3px;
-webkit-transition: all .2s ease-in-out;
-moz-transition: all .2s ease-in-out;
}
#embedreadonlyqr:hover {
cursor: none;
-moz-transform: scale(1.5);
-webkit-transform: scale(1.5);
} }
@media screen and (max-width: 960px) { @media screen and (max-width: 960px) {

11
static/index.html
View file

@ -1,8 +1,11 @@
<!doctype html> <!doctype html>
<html> <html>
<title>Etherpad Lite</title> <title>Etherpad Lite</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<style> <style>
*{ margin:0;padding:0; } *{ margin:0;padding:0; }
body { body {
@ -108,15 +111,18 @@
} }
} }
</style> </style>
<link href="static/custom/index.css" rel="stylesheet"> <link href="static/custom/index.css" rel="stylesheet">
<script src="static/custom/index.js"></script> <script src="static/custom/index.js"></script>
<div id="container"> <div id="container">
<div id="button" onclick="go2Random()" class="translate">New Pad</div><br><div id="label" class="translate">or create/open a Pad with the name</div> <div id="button" onclick="go2Random()" class="translate">New Pad</div><br><div id="label" class="translate">or create/open a Pad with the name</div>
<form action="#" onsubmit="go2Name();return false;"> <form action="#" onsubmit="go2Name();return false;">
<input type="text" id="padname" autofocus> <input type="text" id="padname" autofocus x-webkit-speech>
<input type="submit" value="OK"> <input type="submit" value="OK">
</form> </form>
</div> </div>
<script> <script>
function go2Name() function go2Name()
{ {
@ -145,4 +151,5 @@
//start the costum js //start the costum js
if(typeof costumStart == "function") costumStart(); if(typeof costumStart == "function") costumStart();
</script> </script>
</html> </html>

31
static/js/chat.js
View file

@ -21,18 +21,17 @@
*/ */
var padutils = require('/pad_utils').padutils; var padutils = require('/pad_utils').padutils;
var browser = require('/ace2_common').browser;
var chat = (function() var chat = (function()
{ {
var isStuck = false; var isStuck = false;
var bottomMargin = "0px";
var sDuration = 500; var sDuration = 500;
var hDuration = 750; var hDuration = 750;
var chatMentions = 0; var chatMentions = 0;
var title = document.title; var title = document.title;
if ($.browser.mobile){ if (browser.mobile){
sDuration = 0; sDuration = hDuration = 0;
hDuration = 0;
} }
var self = { var self = {
show: function () show: function ()
@ -57,10 +56,11 @@ var chat = (function()
{ {
$("#focusprotector").hide(); $("#focusprotector").hide();
if($.browser.mobile) if(browser.mobile) {
bottommargin = "32px"; $("#chatbox").css({right: "0px", bottom: "32px", left: "", top: ""});
} else {
$("#chatbox").css({right: "20px", bottom: bottomMargin, left: "", top: ""}); $("#chatbox").css({right: "20px", bottom: "0px", left: "", top: ""});
}
self.scrollDown(); self.scrollDown();
} }
@ -73,18 +73,18 @@ var chat = (function()
{ {
console.log(isStuck); console.log(isStuck);
chat.show(); chat.show();
if(!isStuck){ // Stick it to if(!isStuck) { // Stick it to
$('#chatbox').css({"right":"0px", "top":"35px", "border-radius":"0px", "height":"auto"}); $('#chatbox').css({"right":"0px", "top":"36px", "border-radius":"0px", "height":"auto", "border-right":"none", "border-left":"1px solid #ccc", "border-top":"none", "background-color":"#f1f1f1"});
$('#chattext').css({"top":"0px"});
$('#editorcontainer').css({"right":"170px", "width":"auto"}); $('#editorcontainer').css({"right":"170px", "width":"auto"});
isStuck = true; isStuck = true;
} } else { // Unstick it
else{ // Unstick it $('#chatbox').css({"right":"20px", "top":"auto", "border-top-left-radius":"5px", "border-top-right-radius":"5px", "border-right":"1px solid #999", "height":"200px", "border-top":"1px solid #999", "background-color":"#f7f7f7"});
$('#chatbox').css({"right":"20px", "top":"auto", "border-top-left-radius":"5px", "border-top-right-radius":"5px", "height":"200px"}); $('#chattext').css({"top":"25px"});
$('#editorcontainer').css({"right":"0px", "width":"100%"}); $('#editorcontainer').css({"right":"0px", "width":"100%"});
isStuck = false; isStuck = false;
} }
} },
,
hide: function () hide: function ()
{ {
$("#chatcounter").text("0"); $("#chatcounter").text("0");
@ -194,3 +194,4 @@ var chat = (function()
}()); }());
exports.chat = chat; exports.chat = chat;

9
static/js/pad_editbar.js
View file

@ -108,17 +108,20 @@ var padeditbar = (function()
{ {
self.toogleDropDown("users"); self.toogleDropDown("users");
} }
else if (cmd == 'settings')
{
self.toogleDropDown("settingsmenu");
}
else if (cmd == 'embed') else if (cmd == 'embed')
{ {
self.setEmbedLinks(); self.setEmbedLinks();
$('#embedinput').focus().select(); $('#linkinput').focus().select();
self.toogleDropDown("embed"); self.toogleDropDown("embed");
} }
else if (cmd == 'import_export') else if (cmd == 'import_export')
{ {
self.toogleDropDown("importexport"); self.toogleDropDown("importexport");
} }
else if (cmd == 'save') else if (cmd == 'save')
{ {
padsavedrevs.saveNow(); padsavedrevs.saveNow();
@ -165,7 +168,7 @@ var padeditbar = (function()
}, },
toogleDropDown: function(moduleName) toogleDropDown: function(moduleName)
{ {
var modules = ["embed", "users", "readonly", "importexport"]; var modules = ["embed", "users", "readonly", "importexport", "settingsmenu"];
//hide all modules //hide all modules
if(moduleName == "none") if(moduleName == "none")

9
static/js/pad_editor.js
View file

@ -87,6 +87,11 @@ var padeditor = (function()
if (value == "false") return false; if (value == "false") return false;
return defaultValue; return defaultValue;
} }
self.ace.setProperty("showsauthorcolors", settings.noColors);
self.ace.setProperty("rtlIsTrue", settings.rtlIsTrue);
var v; var v;
v = getOption('showLineNumbers', true); v = getOption('showLineNumbers', true);
@ -100,10 +105,6 @@ var padeditor = (function()
v = getOption('useMonospaceFont', false); v = getOption('useMonospaceFont', false);
self.ace.setProperty("textface", (v ? "monospace" : "Arial, sans-serif")); self.ace.setProperty("textface", (v ? "monospace" : "Arial, sans-serif"));
$("#viewfontmenu").val(v ? "monospace" : "normal"); $("#viewfontmenu").val(v ? "monospace" : "normal");
self.ace.setProperty("showsauthorcolors", settings.noColors);
self.ace.setProperty("rtlIsTrue", settings.rtlIsTrue);
}, },
initViewZoom: function() initViewZoom: function()
{ {

20
static/js/pad_utils.js
View file

@ -110,24 +110,6 @@ var padutils = {
var x = ua.split(' ')[0]; var x = ua.split(' ')[0];
return clean(x); return clean(x);
}, },
// "func" is a function over 0..(numItems-1) that is monotonically
// "increasing" with index (false, then true). Finds the boundary
// between false and true, a number between 0 and numItems inclusive.
binarySearch: function(numItems, func)
{
if (numItems < 1) return 0;
if (func(0)) return 0;
if (!func(numItems - 1)) return numItems;
var low = 0; // func(low) is always false
var high = numItems - 1; // func(high) is always true
while ((high - low) > 1)
{
var x = Math.floor((low + high) / 2); // x != low, x != high
if (func(x)) high = x;
else low = x;
}
return high;
},
// e.g. "Thu Jun 18 2009 13:09" // e.g. "Thu Jun 18 2009 13:09"
simpleDateTime: function(date) simpleDateTime: function(date)
{ {
@ -489,4 +471,6 @@ window.onerror = function test (msg, url, linenumber)
return false; return false;
}; };
padutils.binarySearch = require('/ace2_common').binarySearch;
exports.padutils = padutils; exports.padutils = padutils;

607
static/pad.html
View file

@ -1,350 +1,299 @@
<!doctype html> <!doctype html>
<html lang="en"> <html>
<head>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<title>Etherpad Lite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<!-- CSS -->
<link href="../static/css/pad.css" rel="stylesheet">
<!-- javascript -->
<script type="text/javascript">
// <![CDATA[
var clientVars = {};
// ]]>
</script>
<script src="../static/js/require-kernel.js"></script>
<script src="../socket.io/socket.io.js"></script>
<script src="../minified/pad.js"></script>
<link href="../static/custom/pad.css" rel="stylesheet">
<script src="../static/custom/pad.js"></script>
<style type="text/css" title="dynamicsyntax"></style>
</head>
<body> <title>Etherpad Lite</title>
<div id="editbar"> <meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<ul id="menu_left"> <link href="../static/css/pad.css" rel="stylesheet">
<li onClick="window.pad&amp;&amp;pad.editbarClick('bold');return false" > <link href="../static/custom/pad.css" rel="stylesheet">
<a title="Bold (ctrl-B)"> <style title="dynamicsyntax"></style>
<div class="buttonicon" style="background-position:0px -116px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('italic'); return false;" >
<a title="Italics (ctrl-I)">
<div class="buttonicon" style="background-position:0px 0px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('underline');return false;" >
<a title="Underline (ctrl-U)">
<div class="buttonicon" style="background-position:0px -236px;margin-top:1px;"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('strikethrough');return false;" >
<a title="Strikethrough">
<div class="buttonicon" style="background-position:0px -200px"></div>
</a>
</li>
<li class="separator"></li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('insertorderedlist');return false;" >
<a title="Toggle Ordered List">
<div class="buttonicon" style="background-position:0px -477px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('insertunorderedlist');return false;" >
<a title="Toggle Bullet List">
<div class="buttonicon" style="background-position:0px -34px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('indent');return false;" >
<a title="Indent">
<div class="buttonicon" style="background-position:0px -52px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('outdent');return false;" >
<a title="Unindent">
<div class="buttonicon" style="background-position:0px -134px"></div>
</a>
</li>
<li class="separator"></li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('undo');return false;" >
<a title="Undo (ctrl-Z)">
<div class="buttonicon" style="background-position:0px -255px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('redo');return false;" >
<a title="Redo (ctrl-Y)">
<div class="buttonicon" style="background-position:0px -166px"></div>
</a>
</li>
<li class="separator"></li>
<li id="clearAuthorship" onClick="window.pad&amp;&amp;pad.editbarClick('clearauthorship');return false;" >
<a title="Clear Authorship Colors">
<div class="buttonicon" style="background-position:0px -86px"></div>
</a>
</li>
</ul>
<ul id="menu_right"> <script>
var clientVars = {};
</script>
<script src="../static/js/require-kernel.js"></script>
<script src="../socket.io/socket.io.js"></script>
<script src="../minified/pad.js"></script>
<script src="../static/custom/pad.js"></script>
<li onClick="window.pad&amp;&amp;pad.editbarClick('import_export');return false;"> <div id="editbar">
<a id="exportlink" title="Import/Export from/to different document formats"> <ul id="menu_left">
<div class="buttonicon" style="background-position:0px -68px"></div> <li onClick="window.pad&amp;&amp;pad.editbarClick('bold');return false" >
</a> <a title="Bold (ctrl-B)">
</li> <div class="buttonicon" style="background-position:0px -116px"></div>
<li onClick="window.pad&amp;&amp;pad.editbarClick('embed');return false;" > </a>
<a id="embedlink" title="Share and Embed this pad"> </li>
<div class="buttonicon" style="background-position:0px -18px"></div> <li onClick="window.pad&amp;&amp;pad.editbarClick('italic'); return false;" >
</a> <a title="Italics (ctrl-I)">
</li> <div class="buttonicon" style="background-position:0px 0px"></div>
<li class="separator"></li> </a>
<li id="timesliderlink" onClick="document.location = document.location.pathname+ '/timeslider'"> </li>
<a title="Show the history of this pad"> <li onClick="window.pad&amp;&amp;pad.editbarClick('underline');return false;" >
<div class="buttonicon" style="background-position:0px -218px"></div> <a title="Underline (ctrl-U)">
</a> <div class="buttonicon" style="background-position:0px -236px;margin-top:1px;"></div>
</li> </a>
<li id="usericon" onClick="window.pad&amp;&amp;pad.editbarClick('showusers');return false;" > </li>
<a title="Show connected users"> <li onClick="window.pad&amp;&amp;pad.editbarClick('strikethrough');return false;" >
<div class="buttonicon" id="usericonback" style="background-position:0px -183px;display:inline-block;"></div> <a title="Strikethrough">
<span id="online_count">1</span> <div class="buttonicon" style="background-position:0px -200px"></div>
</a> </a>
</li> </li>
</ul> <li class="separator"></li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('insertorderedlist');return false;" >
<a title="Toggle Ordered List">
<div class="buttonicon" style="background-position:0px -477px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('insertunorderedlist');return false;" >
<a title="Toggle Bullet List">
<div class="buttonicon" style="background-position:0px -34px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('indent');return false;" >
<a title="Indent">
<div class="buttonicon" style="background-position:0px -52px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('outdent');return false;" >
<a title="Unindent">
<div class="buttonicon" style="background-position:0px -134px"></div>
</a>
</li>
<li class="separator"></li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('undo');return false;" >
<a title="Undo (ctrl-Z)">
<div class="buttonicon" style="background-position:0px -255px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('redo');return false;" >
<a title="Redo (ctrl-Y)">
<div class="buttonicon" style="background-position:0px -166px"></div>
</a>
</li>
<li class="separator"></li>
<li id="clearAuthorship" onClick="window.pad&amp;&amp;pad.editbarClick('clearauthorship');return false;" >
<a title="Clear Authorship Colors">
<div class="buttonicon" style="background-position:0px -86px"></div>
</a>
</li>
</ul>
<ul id="menu_right">
<li onClick="window.pad&amp;&amp;pad.editbarClick('settings');return false;">
<a id="settingslink" title="Settings of this pad">
<div class="buttonicon" style="background-position:0px -436px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('import_export');return false;">
<a id="exportlink" title="Import/Export from/to different document formats">
<div class="buttonicon" style="background-position:0px -68px"></div>
</a>
</li>
<li onClick="window.pad&amp;&amp;pad.editbarClick('embed');return false;" >
<a id="embedlink" title="Share and Embed this pad">
<div class="buttonicon" style="background-position:0px -18px"></div>
</a>
</li>
<li class="separator"></li>
<li id="timesliderlink" onClick="document.location = document.location.pathname+ '/timeslider'">
<a title="Show the history of this pad">
<div class="buttonicon" style="background-position:0px -218px"></div>
</a>
</li>
<li id="usericon" onClick="window.pad&amp;&amp;pad.editbarClick('showusers');return false;" >
<a title="Show connected users">
<div class="buttonicon" id="usericonback" style="background-position:0px -183px;display:inline-block;"></div>
<span id="online_count">1</span>
</a>
</li>
</ul>
</div>
</div> <div id="users">
<div id="connectionstatus"></div>
<div id="myuser">
<div id="mycolorpicker">
<div id="colorpicker"></div>
<span id="mycolorpickersave"><a onclick="closeColorPicker()">Save</a></span>
<span id="mycolorpickercancel"><a onclick="closeColorPicker()">Cancel</a></span>
<span id="mycolorpickerpreview" class="myswatchboxhoverable"></span>
</div>
<div id="myswatchbox"><div id="myswatch"></div></div>
<div id="myusernameform"><input type="text" id="myusernameedit" disabled="disabled"></div>
<div id="mystatusform"><input type="text" id="mystatusedit" disabled="disabled"></div>
</div>
<div id="otherusers">
<div id="guestprompts"></div>
<table id="otheruserstable" cellspacing="0" cellpadding="0" border="0">
<tr><td></td></tr>
</table>
<div id="nootherusers"></div>
</div>
<div id="userlistbuttonarea"></div>
</div>
<div id="users"> <div id="editorcontainerbox">
<div id="connectionstatus"> <div id="editorcontainer"></div>
<!-- --> <div id="editorloadingbox">Loading...</div>
</div> </div>
<div id="myuser"> <div id="settingsmenu">
<h3>Pad settings</h3>
<h4>Global</h4>
<p>These options affect everyone viewing this pad. [BETA]</p>
<p>
<input type="checkbox" id="options-colorscheck" checked> Authorship colors
</p>
<p>
<input type="checkbox" id="options-linenoscheck" checked> Line numbers
</p>
<p>
Used font for this pad:
<select id="viewfontmenu">
<option value="normal">Normal</option>
<option value="monospace">Monospaced</option>
</select>
</p>
<h4>Local</h4>
<p>
<input type="checkbox" id="options-stickychat" onClick="chat.stickToScreen();"> Sticky chat
</p>
</div>
<div id="mycolorpicker"> <div id="importexport">
<div id="colorpicker"></div> <div id="import">
<!-- <h3>Import/Export</h3>
<ul id="colorpickerswatches"> Import from text file, HTML, PDF, Word, ODT or RTF:
</ul> <br><br>
--> <form id="importform" method="post" action="" target="importiframe" enctype="multipart/form-data">
<span id="mycolorpickersave"> <div class="importformdiv" id="importformfilediv">
<a onclick="closeColorPicker()">Save</a> <input type="file" name="file" size="15" id="importfileinput">
</span> <div class="importmessage" id="importmessagefail"></div>
<span id="mycolorpickercancel"> </div>
<a onclick="closeColorPicker()">Cancel</a> <div class="importmessage" id="importmessagesuccess">Successful!</div>
</span> <div class="importformdiv" id="importformsubmitdiv">
<span id="mycolorpickerpreview" class="myswatchboxhoverable"></span> <input type="hidden" name="padId" value="blpmaXT35R">
</div> <span class="nowrap">
<input type="submit" name="submit" value="Import Now" disabled="disabled" id="importsubmitinput">
<img alt="" id="importstatusball" src="../static/img/loading.gif" align="top">
<img alt="" id="importarrow" src="../static/img/leftarrow.png" align="top">
</span>
</div>
</form>
</div>
<div id="importexportline"></div>
<div id="export">
Export current pad as:
<a id="exporthtmla" target="_blank" class="exportlink"><div class="exporttype" id="exporthtml">HTML</div></a>
<a id="exportplaina" target="_blank" class="exportlink"><div class="exporttype" id="exportplain">Plain text</div></a>
<a id="exportworda" target="_blank" class="exportlink"><div class="exporttype" id="exportword">Microsoft Word</div></a>
<a id="exportpdfa" target="_blank" class="exportlink"><div class="exporttype" id="exportpdf">PDF</div></a>
<a id="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen">OpenDocument</div></a>
<a id="exportdokuwikia" target="_blank" class="exportlink"><div class="exporttype" id="exportdokuwiki">DokuWiki text</div></a>
<a id="exportwordlea" target="_blank" onClick="padimpexp.export2Wordle();return false;" class="exportlink"><div class="exporttype" id="exportwordle">Wordle</div></a>
</div>
</div>
<div id="myswatchbox"><div id="myswatch"><!-- --></div></div> <div id="embed">
<div id="myusernameform"><input type="text" id="myusernameedit" disabled="disabled" /></div> <div id="embedreadonly" class="right">
<div id="mystatusform"><input type="text" id="mystatusedit" disabled="disabled" /></div> <input type="checkbox" id="readonlyinput" onClick="padeditbar.setEmbedLinks();"> Read only
</div> </div>
<h3>Share this pad</h3>
<div id="linkcode">
<label for="linkinput">Link</label><input id="linkinput" type="text" value="">
</div>
<br>
<div id="embedcode">
<label for="embedinput">Embed URL</label><input id="embedinput" type="text" value="">
</div>
<br>
<div id="qrcode">
<label for="embedreadonlyqr">QR code</label><br/>
<div id="qr_center"><img id="embedreadonlyqr"></div>
</div>
</div>
<div id="otherusers"> <div id="chatthrob"></div>
<div id="guestprompts"><!-- --></div>
<table id="otheruserstable" cellspacing="0" cellpadding="0" border="0"> <div id="chaticon">
<tr> <a onClick="chat.show();return false;" title="Open the chat for this pad">
<td> <span id="chatlabel">Chat</span>
</td> <div class="buttonicon" style="background-position:0px -102px;display:inline-block;"></div>
</tr> </a>
</table> <span id="chatcounter">0</span>
</div>
<div id="nootherusers"> <div id="chatbox">
</div> <div id="titlebar"><span id ="titlelabel">Chat</span><a id="titlecross" onClick="chat.hide();return false;">-&nbsp;</a></div>
</div> <div id="chattext" class="authorColors"></div>
<div id="chatinputbox">
<form>
<input id="chatinput" type="text" maxlength="140">
</form>
</div>
</div>
<div id="userlistbuttonarea"> <div id="focusprotector">&nbsp;</div>
<!--<a href="javascript:void(0)" id="sharebutton">Share</a>-->
</div>
</div> <div id="modaloverlay">
<!-- /padusers --> <div id="modaloverlay-inner"></div>
</div>
<div id="mainmodals">
<div id="connectionbox" class="modaldialog">
<div id="connectionboxinner" class="modaldialog-inner">
<div class="connecting">Connecting...</div>
<div class="reconnecting">Reestablishing connection...</div>
<div class="disconnected">
<h2 class="h2_disconnect">Disconnected.</h2>
<h2 class="h2_userdup">Opened in another window.</h2>
<h2 class="h2_unauth">No Authorization.</h2>
<div id="disconnected_looping">
<p><b>We're having trouble talking to the EtherPad lite synchronization server.</b> You may be connecting through an incompatible firewall or proxy server.</p>
</div>
<div id="disconnected_initsocketfail">
<p><b>We were unable to connect to the EtherPad lite synchronization server.</b> This may be due to an incompatibility with your web browser or internet connection.</p>
</div>
<div id="disconnected_userdup">
<p><b>You seem to have opened this pad in another browser window.</b> If you'd like to use this window instead, you can reconnect.</p>
</div>
<div id="disconnected_unknown">
<p><b>Lost connection with the EtherPad lite synchronization server.</b> This may be due to a loss of network connectivity.</p>
</div>
<div id="disconnected_slowcommit">
<p><b>Server not responding.</b> This may be due to network connectivity issues or high load on the server.</p>
</div>
<div id="disconnected_unauth">
<p>Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.</p>
</div>
<div id="disconnected_deleted">
<p>This pad was deleted.</p>
</div>
<div id="reconnect_advise">
<p>If this continues to happen, please let us know</p>
</div>
<div id="reconnect_form">
<button id="forcereconnect">Reconnect Now</button>
</div>
</div>
</div>
<form id="reconnectform" method="post" action="/ep/pad/reconnect" accept-charset="UTF-8" style="display: none;">
<input type="hidden" class="padId" name="padId">
<input type="hidden" class="diagnosticInfo" name="diagnosticInfo">
<input type="hidden" class="missedChanges" name="missedChanges">
</form>
</div>
<!--<div id="users"> </div>
<!-- some example code so I can make the css --*> <script>
/* TODO: These globals shouldn't exist. */
pad = require('/pad2').pad;
chat = require('/chat').chat;
padeditbar = require('/pad_editbar').padeditbar;
padimpexp = require('/pad_impexp').padimpexp;
</script>
</div>-->
<div id="editorcontainerbox">
<div id="editorcontainer">
<!-- -->
</div>
<div id="editorloadingbox">
Loading...
</div>
</div>
<!-- import export code -->
<div id="importexport">
<div id="import">
Import from text file, HTML, PDF, Word, ODT or RTF:<br/><br/>
<form id="importform" method="post" action="" target="importiframe" enctype="multipart/form-data">
<div class="importformdiv" id="importformfilediv">
<input type="file" name="file" size="15" id="importfileinput" />
<div class="importmessage" id="importmessagefail"></div>
</div>
<div class="importmessage" id="importmessagesuccess">Successful!</div>
<div class="importformdiv" id="importformsubmitdiv">
<input type="hidden" name="padId" value="blpmaXT35R" />
<span class="nowrap">
<input type="submit" name="submit" value="Import Now" disabled="disabled" id="importsubmitinput" />
<img alt="" id="importstatusball" src="../static/img/loading.gif" align="top" />
<img alt="" id="importarrow" src="../static/img/leftarrow.png" align="top" />
</span>
</div>
</form>
</div>
<div id="importexportline"></div>
<div id="export">
Export current pad as:
<a id="exporthtmla" target="_blank" class="exportlink"><div class="exporttype" id="exporthtml">HTML</div></a>
<a id="exportplaina" target="_blank" class="exportlink"><div class="exporttype" id="exportplain">Plain text</div></a>
<a id="exportworda" target="_blank" class="exportlink"><div class="exporttype" id="exportword">Microsoft Word</div></a>
<a id="exportpdfa" target="_blank" class="exportlink"><div class="exporttype" id="exportpdf">PDF</div></a>
<a id="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen">OpenDocument</div></a>
<a id="exportdokuwikia" target="_blank" class="exportlink"><div class="exporttype" id="exportdokuwiki">DokuWiki text</div></a>
<a id="exportwordlea" target="_blank" onClick="padimpexp.export2Wordle();return false;" class="exportlink"><div class="exporttype" id="exportwordle">Wordle</div></a>
<form id="wordlepost" name="wall" action="http://wordle.net/advanced" method="POST" style="margin-left:0px;">
<div id="hidetext" style=""><textarea id="text" name="text" style="display:none;">Coming soon!</textarea></div>
</form>
</div>
</div>
<!-- the embed code -->
<div id="embed">
<div id="embedreadonly">
<input type="checkbox" id="readonlyinput" onClick="padeditbar.setEmbedLinks();"/><label for="readonlyinput">Read only</label>
</div>
Share:
<br/>
<div id="linkcode">
<label for="linkinput">Link:</label><input id="linkinput" type="text" value="">
</div><br/>
<div id="embedcode">
<label for="embedinput">Embed code:</label><input id="embedinput" type="text" value="">
</div><br/>
<div id="qrcode">
<label for="embedreadonlyqr">QR code:</label><br/>
<div id="qr_center"><img id="embedreadonlyqr"></div>
</div>
</div>
<div id="chatthrob">
</div>
<div id="chaticon">
<a onClick="chat.show();return false;"
title="Open the chat for this pad">
<span id="chatlabel">Chat</span>
<div class="buttonicon" style="background-position:0px -102px;display:inline-block;"></div>
</a>
<span id="chatcounter">0</span>
</div>
<div id="chatbox">
<div id="titlebar"><span id ="titlelabel">Chat</span><a id="titlecross" onClick="chat.hide();return false;">-&nbsp;</a></div>
<div id="chattext" class="authorColors"></div>
<div id="chatinputbox">
<form>
<input id="chatinput" type="text" maxlength="140"/>
</form>
</div>
</div>
<div id="focusprotector">&nbsp;</div>
<!-- /padeditor -->
<div id="modaloverlay">
<div id="modaloverlay-inner">
<!-- -->
</div>
</div>
<div id="mainmodals">
<div id="connectionbox" class="modaldialog">
<div id="connectionboxinner" class="modaldialog-inner">
<div class="connecting">
Connecting...
</div>
<div class="reconnecting">
Reestablishing connection...
</div>
<div class="disconnected">
<h2 class="h2_disconnect">Disconnected.</h2>
<h2 class="h2_userdup">Opened in another window.</h2>
<h2 class="h2_unauth">No Authorization.</h2>
<div id="disconnected_looping">
<p>
<b>We're having trouble talking to the EtherPad lite synchronization server.</b>
You may be connecting through an incompatible firewall or proxy server.
</p>
</div>
<div id="disconnected_initsocketfail">
<p>
<b>We were unable to connect to the EtherPad lite synchronization server.</b>
This may be due to an incompatibility with your web browser or internet connection.
</p>
</div>
<div id="disconnected_userdup">
<p>
<b>You seem to have opened this pad in another browser window.</b>
If you'd like to use this window instead, you can reconnect.
</p>
</div>
<div id="disconnected_unknown">
<p>
<b>Lost connection with the EtherPad lite synchronization server.</b> This may be due to a loss of network connectivity.
</p>
</div>
<div id="disconnected_slowcommit">
<p>
<b>Server not responding.</b> This may be due to network connectivity issues or high load on the server.
</p>
</div>
<div id="disconnected_unauth">
<p>
Your browser's credentials or permissions have changed while viewing this pad. Try reconnecting.
</p>
</div>
<div id="disconnected_deleted">
<p>
This pad was deleted.
</p>
</div>
<div id="reconnect_advise">
<p>
If this continues to happen, please let us know
</p>
</div>
<div id="reconnect_form">
<button id="forcereconnect">Reconnect Now</button>
</div>
</div>
</div>
<form id="reconnectform" method="post" action="/ep/pad/reconnect" accept-charset="UTF-8" style="display: none;">
<input type="hidden" class="padId" name="padId"/>
<input type="hidden" class="diagnosticInfo" name="diagnosticInfo"/>
<input type="hidden" class="missedChanges" name="missedChanges"/>
</form>
<script>
/* TODO: These globals shouldn't exist. */
pad = require('/pad2').pad;
chat = require('/chat').chat;
padeditbar = require('/pad_editbar').padeditbar;
padimpexp = require('/pad_impexp').padimpexp;
</script>
</body>
</html> </html>