path: root/etherpad/src/templates/pad/pad_content.ejs

<% /* Copyright 2009 Google Inc.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

     http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS-IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License. */ %><%
 function checkboxPref(name, label) {
   var r = ['<div class="prefcheckbox" id="checkpref', name, '">'];
   r.push('<table cellspacing="0" cellpadding="0" border="0">');
   r.push('<tr>');
   r.push('<td class="checkboxcell" valign="middle"><input type="checkbox" /></td>');
   r.push('<td class="labelcell" valign="middle">', label, '</td>');
   r.push('</tr>');
   r.push('</table>');
   r.push('</div>');
   return r.join('');
 }

 function exportOption(type, label, requiresOffice, url, title) {
 	 url = url || '/ep/pad/export/'+padId+'/latest?format='+type;
	 var classes = [ "exportlink", "exporthref"+type ];
	 if (requiresOffice && !hasOffice) {
	   classes.push("disabledexport");
	 } else if (requiresOffice) {
	   classes.push("requiresoffice");
	 }
   var aStartArr = ['<a '];
   if (classes.length > 0) {
     aStartArr.push(' class="'+classes.join(' ')+'"');
   }
	 aStartArr.push(' target="_blank" href="', url, '">');
	 var aStart = aStartArr.join('');
   var r = ['<div class="exportlink" id="export', type, '"'];
 	 if (title) {
		 r.push(' title="'+title+'"');
	 }
	 r.push('>');
   r.push('<table cellspacing="0" cellpadding="0" border="0">');
   r.push('<tr>');
   r.push('<td class="exportpic" valign="middle">');
   r.push(aStart, '<img alt="" src="/static/img/may09/'+type+'.gif" />', '</a>');
   r.push('</td>');
   r.push('<td class="labelcell" valign="middle">');
   r.push(aStart, label, '</a>');
	 if (title) {
		 r.push('<sup>?</sup>')
	 }
   r.push('</td>');
   if (requiresOffice) {
     r.push('<td class="exportspinner" ');
     r.push('id="exportspinner', type, '"');
     r.push(' valign="middle"><img alt="" src="/static/img/misc/status-ball.gif" /></td>');
   }	 
   r.push('</tr>');
   r.push('</table>');
   r.push('</div>');
   return r.join('');
 }
%>

<div id="servermsg" class="topmsg hidden">
  <p><b>Server Notice (<span id="servermsgdate"></span>)</b></p>
  <br/>
  <a id="hidetopmsg" href="javascript: void pad.hideTopMsg('server')">hide</a>
  <p id="servermsgtext"></p>
</div>

<div id="bigtoperror_wrap" class="topmsg hidden">

  <div class="bigtoperror" id="disconnected_looping">
    <p><b>We're having trouble establishing a connection with an
    EtherPad synchronization server.</b>  You may be connecting through an incompatible firewall or
    proxy server.</p>
  </div>

  <div class="bigtoperror" 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 class="bigtoperror" id="disconnected_slowcommit">
    <p><b>We're having difficulties talking to the EtherPad
    synchronization server.</b>  This may be due to network connectivity issues or high load on the server.</p>
  </div>

  <div class="bigtoperror" id="disconnected_initsocketfail">
    <p><b>We were unable to establish the initial connection with
    the EtherPad synchronization server.</b>  This may be due to an incompatibility with your web
    browser or internet connection.</p>
  </div>

  <div class="bigtoperror" id="disconnected_unknown">
    <p><b>Lost connection with the EtherPad synchronization
    server.</b>  This may be due to a loss of network connectivity.</p>
  </div>

  <div class="bigtoperror" id="reconnect_advise">
    <p>If this continues to happen, please <a target="_blank" href="/ep/support">let us know</a>
      (opens in new window).</p>
  </div>

  <div id="reconnect_form">
    <p><button class="forcereconnect">Reconnect
	Now</button></p>
  </div>

</div>

<div id="padtablediv">
<table id="padtable"
       border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td id="topbar">
      <div id="connectionstatus"
	   class="connecting">Connecting...</div>
      <div id="topbarmsg">&nbsp;</div>
      <a class="showhide" id="showsidebar" href="javascript:void pad.showSideBar();">
	&laquo; show side bar
      </a>
    </td>
    <td id="sidebartop">
      <a class="showhide" id="hidesidebar" href="javascript:void pad.hideSideBar();">
	hide &raquo;
      </a>
    </td>
  </tr>

  <tr id="sizedcontent">
    <td id="editorcell" class="editorcell_loading" width="100%" valign="top">
      <div id="editorcellinner">
        <div id="loadingbox">
          Loading...
        </div>
        <div id="toptoolbar" class="disabledtoolbar">
          <a href="javascript:void pad.toolbarClick('bold');" class="toptoolbarbutton bold" title="Bold (ctrl-B)">&nbsp;</a>
          <a href="javascript:void pad.toolbarClick('italic');" class="toptoolbarbutton italic" title="Italics (ctrl-I)">&nbsp;</a>
          <a href="javascript:void pad.toolbarClick('underline');" class="toptoolbarbutton underline" title="Underline (ctrl-U)">&nbsp;</a>
          <a href="javascript:void pad.toolbarClick('undo');" class="toptoolbarbutton undo" title="Undo (ctrl-Z)">&nbsp;</a>
          <a href="javascript:void pad.toolbarClick('redo');" class="toptoolbarbutton redo" title="Redo (ctrl-Y)">&nbsp;</a>
          <form id="padtitle" action="/"><input type="text" id="padtitleedit"/><span class="padtitlepad">Pad:</span> <span id="padtitletitle">&nbsp;</span> &nbsp;<span class="editlink">(<a href="javascript:void pad.editTitle();">rename</a>)</span><span class="oklink"><a href="javascript:void pad.submitTitle(true);">OK</a></span></form>
          <a href="javascript:void pad.passwordClick();" id="passwordlock" title="" class="passwordhidden">&nbsp;</a>
        </div>
        <div id="editorcontainer"><!-- --></div>
	<div id="bottoolbar" class="disabledtoolbar">
          <div id="viewzoom">View Zoom: <select id="viewzoommenu"><option value="z85">85%</option><option value="z100">100%</option><option value="z115">115%</option><option value="z150">150%</option><option value="z200">200%</option><option value="z300">300%</option></select></div>
          <div id="viewfont">View Font: <select id="viewfontmenu"><option value="normal">Normal</option><option value="code">Code</option></select></div>
	</div>
      </div>
    </td>
    <td id="sidebarcell" valign="top">
      <div id="sidebar" class="sidebar_loading">
	<div id="headuserlistwrap" class="sideheadwrap sh_uncollapsed"><p class="sidehead">Connected Users</p></div>
	<div id="userlistwrap" class="sidebox">
	  <div id="userlist"><!-- setbyjs --></div>
	  <div id="invitemore">
	    <a class="small_link" id="invitemorelink" href="javascript:void pad.invitemoreShow();">invite more people...</a>
	    <div id="inviteinstructions" style="display:none;">
	      <p>To invite someone to this pad, just copy and paste them the URL to this page.</p>
	      <p id="emailinviteleadin">Or we can send them an invitation for you:</p>
	      <p>
		Email:&nbsp;<input id="invite_email" type="text" name="email" value="" />
		<input type="submit" id="invite_email_submit" value="Send" />
	      </p>
	      <p id="invite_email_status"><!-- --></p>
	      <p id="hideinstructions"><a class="small_link" href="javascript:void pad.invitemoreHide();">hide</a></p>
	    </div>
	  </div>
	</div>
	<div id="headchatbox" class="sideheadwrap sh_collapsed"><p id="chatheadname" class="sidehead">Chat</p></div>
	<div class="sidebox hidden" id="chatbox">
	  <div id="chatmessages"><!-- --></div>
	  <div>
	    <table id="chatsaytable" border="0" cellspacing="0" cellpadding="0">
	      <tr>
		<td width="5" valign="middle">Say:</td>
		<td><input type="text" id="chatinput" /></td>
	      </tr>
	    </table>
	  </div>
	</div>
	<div id="headimportexport" class="sideheadwrap sh_collapsed"><p class="sidehead">Import/Export</p></div>
	<div class="sidebox hidden" id="importexport">
		<div id="exportsection">
		  <p id="headexport"><strong>Download</strong> as:</p>
      <table>
				<tr>
					<td class="firsttd"><%= exportOption('html', 'HTML', false) %></td>
				</tr>
				<tr>
					<td class="firsttd"><%= exportOption('txt', 'Plain text', false) %></td>
				</tr>
				<tr>
					<td class="firsttd"><%= exportOption('link', 'Bookmark file', false,
																							 '/ep/pad/linkfile?padId='+padId,
						'This will save a file that, when opened, takes you to this pad.') %></td>
				</tr>
			</table>
			<div id="exportmessage"></div>
		</div>
		<div id="importsection">
  	  <p id="headimport"><strong>Import</strong> text from file:</p>
 	  	<form id="importform" method="post" action="/ep/pad/impexp/import" target="importiframe" enctype="multipart/form-data">
				<div class="importformdiv" id="importformfilediv">
					<input type="file" name="file" size="20" id="importfileinput" />
					<div class="importmessage" id="importmessagefail"></div>
				</div>
				<div class="importmessage" id="importmessagesuccess"></div>
				<div class="importformdiv" id="importformsubmitdiv">
 					<input type="hidden" name="padId" value="<%= encodeURIComponent(padId) %>" />
 					<span class="nowrap">
						<input type="submit" name="submit" value="Import Now" disabled="disabled" id="importsubmitinput" />
						<img alt="" id="importstatusball" src="/static/img/misc/status-ball.gif" align="bottom" />
						<img alt="" id="importarrow" src="/static/img/may09/leftarrow.gif" align="bottom" />
					</span>
				</div>
 	  	</form>
		</div>
	</div>
	<div id="headrevisions" class="sideheadwrap sh_collapsed"><p class="sidehead">Saved Revisions</p></div>
	<div class="sidebox hidden" id="revisions">
	  <div id="nosaveprivs">
	    Sorry, you have exceeded the maximum allowable
	    number of saved revisions.
	  </div>
	  <input id="savenow" type="submit" value="Save Now" />
	  <div id="revisionlist">
	  </div>
	</div>
	<div id="headprefs" class="sideheadwrap sh_collapsed"><p class="sidehead">Options</p></div>
	<div class="sidebox hidden" id="prefs">
	  <%= checkboxPref("showcolors", "Highlight who typed what.") %>
	  <%= checkboxPref("wrap", "Wrap long lines.") %>
	  <%= checkboxPref("linenums", "Show line numbers.") %>
	  <%= checkboxPref("fullwidth", "Use full window width.") %>
	  <%= checkboxPref("jshighlight", "Highlight JavaScript syntax.") %>
	</div>
	<div id="headfeedback" class="sideheadwrap sh_collapsed"><p class="sidehead">Feedback</p></div>
	<div class="sidebox hidden sidebox_last" id="feedback">
	  <div id="feedbackbox">
	    <p style="text-align: center;">Tell us what you
	    think of EtherPad!<br/>(Include your email if you want a response)</p>
	    <div id="formbox">
	      <textarea rows="5" cols="10" id="feedbackarea" name="feedbackarea"></textarea>
	      <input id="feedbacksubmit" type="submit"
		     value="Send to EtherPad Team" />
	    </div>
	  </div>
	  <div id="feedbackresult">
	    <p>Thanks for the feedback!  Keep it coming.</p>
	    <p>You can also send feedback by email to
	    <span id="feedbackemail"
		  style="white-space: nowrap;">feedback@e***rp**d.com</span> to receive a personal
	      response.</p>
	  </div>
	</div>
      </div>
    </td>
  </tr>
</table>
</div><!-- #padtablediv -->

<div style="clear: both;"><!-- --></div>

<% if (request.params.djs) { %>
  <div id="djs">&nbsp;</div>
<% } %>

<div id="appjetfooter">
  Powered by <a target="_blank" href="/ep/about/appjet">AppJet</a>
  <img id="plane" src="/static/img/tinyplane.gif" alt="AppJet" />
</div><!-- /appjetfooter -->

<form id="reconnect"
      method="post"
      action="/ep/pad/reconnect"
      accept-charset="UTF-8"
      style="display: none;">
  <input type="hidden" id="padId" name="padId" />
  <input type="hidden" id="diagnosticInfo"
	 name="diagnosticInfo" />
  <input type="hidden" id="missedChanges" name="missedChanges" />
</form>

<form id="newpad"
      name="newpad"
      action="/ep/pad/newpad"
      target="_blank"
      style="display: none;">
</form>