etherpad-lite/src/templates/pad.html
muxator aa8204e5df pad.html: for each client plugin, add a class to #editorcontainerbox
This commit implements the following behaviour:

1. adds a function clientPluginNames() to hooks.js (mimicking what is done in
   static.js), which returns an array containing the list of currently installed
   client side plugins. The array is eventually empty.

2. calls that function in pad.html at rendering time (thus server-side) to
   populate a class attribute.

Example results:
- with no client-side plugins installed:
  <div id="editorcontainerbox" class="">

- with some client-side plugins installed:
  <div id="editorcontainerbox" class="ep_author_neat ep_adminpads">

Looking at the existing code (src/node/hooks/express/static.js#L39-L57), a
client-side plugin is defined as a plugin that implements at least a client side
hook.

NOTE: there is currently no support for notifying plugin removal/installation
      to the connected clients: for now, in order to get an updated class list,
      the clients will have to refresh the page.

Fixes #3488
2018-10-02 21:15:45 +02:00

428 lines
23 KiB
HTML

<%
var settings = require("ep_etherpad-lite/node/utils/Settings")
, hooks = require('ep_etherpad-lite/static/js/pluginfw/hooks')
, langs = require("ep_etherpad-lite/node/hooks/i18n").availableLangs
;
%>
<!doctype html>
<% e.begin_block("htmlHead"); %>
<html>
<% e.end_block(); %>
<title><%=settings.title%></title>
<script>
/*
|@licstart The following is the entire license notice for the
JavaScript code in this page.|
Copyright 2011 Peter Martischka, Primary Technology.
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.
|@licend The above is the entire license notice
for the JavaScript code in this page.|
*/
</script>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<meta name="referrer" content="no-referrer">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">
<link rel="shortcut icon" href="<%=settings.faviconPad%>">
<% e.begin_block("styles"); %>
<link href="../static/css/pad.css" rel="stylesheet">
<% e.begin_block("customStyles"); %>
<link href="../static/skins/<%=encodeURI(settings.skinName)%>/pad.css" rel="stylesheet">
<% e.end_block(); %>
<style title="dynamicsyntax"></style>
<% e.end_block(); %>
<link rel="localizations" type="application/l10n+json" href="../locales.json" />
<script type="text/javascript" src="../static/js/html10n.js"></script>
<script type="text/javascript" src="../static/js/l10n.js"></script>
<!-- head and body had been removed intentionally -->
<% e.begin_block("body"); %>
<div id="editbar" class="toolbar" title="Toolbar (Alt F9)">
<div id="overlay">
<div id="overlay-inner"></div>
</div>
<ul class="menu_left" role="toolbar">
<% e.begin_block("editbarMenuLeft"); %>
<%- toolbar.menu(settings.toolbar.left, isReadOnly) %>
<% e.end_block(); %>
</ul>
<ul class="menu_right" role="toolbar">
<% e.begin_block("editbarMenuRight"); %>
<%- toolbar.menu(settings.toolbar.right, isReadOnly) %>
<% e.end_block(); %>
</ul>
</div>
<% e.begin_block("afterEditbar"); %><% e.end_block(); %>
<div id="users">
<% e.begin_block("userlist"); %>
<div id="connectionstatus"></div>
<div id="myuser">
<div id="mycolorpicker">
<div id="colorpicker"></div>
<button id="mycolorpickersave" data-l10n-id="pad.colorpicker.save"></button>
<button id="mycolorpickercancel" data-l10n-id="pad.colorpicker.cancel"></button>
<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" data-l10n-id="pad.userlist.entername"></div>
<div id="mystatusform"><input type="text" id="mystatusedit" disabled="disabled"></div>
</div>
<div id="otherusers" aria-role="document">
<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>
<% e.end_block(); %>
</div>
<div id="editorcontainerbox" class="<%=hooks.clientPluginNames().join(' '); %>">
<div id="editorcontainer" class="editorcontainer"></div>
<div id="editorloadingbox">
<div id="passwordRequired">
<p data-l10n-id="pad.passwordRequired">You need a password to access this pad</p>
<form class='passForm' method='POST'>
<input id='passwordinput' type='password' name='password'><input type='submit' value='Submit'>
</form>
</div>
<div id="permissionDenied">
<p data-l10n-id="pad.permissionDenied">You do not have permission to access this pad</p>
</div>
<div id="wrongPassword">
<p data-l10n-id="pad.wrongPassword">Your password was wrong</p>
</div>
<div id="noCookie">
<p data-l10n-id="pad.noCookie">Cookie could not be found. Please allow cookies in your browser!</p>
</div>
<% e.begin_block("loading"); %>
<p data-l10n-id="pad.loading" id="loading">Loading...</p>
<% e.end_block(); %>
<noscript><strong>Sorry, you have to enable Javascript in order to use this.</strong></noscript>
</div>
</div>
<div id="settings" class="popup">
<h1 data-l10n-id="pad.settings.padSettings"></h1>
<div class="column">
<% e.begin_block("mySettings"); %>
<h2 data-l10n-id="pad.settings.myView"></h2>
<p>
<input type="checkbox" id="options-stickychat" onClick="chat.stickToScreen();">
<label for="options-stickychat" data-l10n-id="pad.settings.stickychat"></label>
</p>
<p>
<input type="checkbox" id="options-chatandusers" onClick="chat.chatAndUsers();">
<label for="options-chatandusers" data-l10n-id="pad.settings.chatandusers"></label>
</p>
<p>
<input type="checkbox" id="options-colorscheck">
<label for="options-colorscheck" data-l10n-id="pad.settings.colorcheck"></label>
</p>
<p>
<input type="checkbox" id="options-linenoscheck" checked>
<label for="options-linenoscheck" data-l10n-id="pad.settings.linenocheck"></label>
</p>
<p>
<input type="checkbox" id="options-rtlcheck">
<label for="options-rtlcheck" data-l10n-id="pad.settings.rtlcheck"></label>
</p>
<% e.end_block(); %>
<table>
<% e.begin_block("mySettings.dropdowns"); %>
<tr>
<td>
<label for="viewfontmenu" data-l10n-id="pad.settings.fontType">Font type:</label>
</td>
<td>
<select id="viewfontmenu">
<option value="normal" data-l10n-id="pad.settings.fontType.normal"></option>
<option value="monospace" data-l10n-id="pad.settings.fontType.monospaced"></option>
<option value="montserrat" data-l10n-id="pad.settings.fontType.montserrat"></option>
<option value="opendyslexic" data-l10n-id="pad.settings.fontType.opendyslexic"></option>
<option value="comicsans" data-l10n-id="pad.settings.fontType.comicsans"></option>
<option value="georgia" data-l10n-id="pad.settings.fontType.georgia"></option>
<option value="impact" data-l10n-id="pad.settings.fontType.impact"></option>
<option value="lucida" data-l10n-id="pad.settings.fontType.lucida"></option>
<option value="lucidasans" data-l10n-id="pad.settings.fontType.lucidasans"></option>
<option value="palatino" data-l10n-id="pad.settings.fontType.palatino"></option>
<option value="robotomono" data-l10n-id="pad.settings.fontType.robotomono"></option>
<option value="tahoma" data-l10n-id="pad.settings.fontType.tahoma"></option>
<option value="timesnewroman" data-l10n-id="pad.settings.fontType.timesnewroman"></option>
<option value="trebuchet" data-l10n-id="pad.settings.fontType.trebuchet"></option>
<option value="verdana" data-l10n-id="pad.settings.fontType.verdana"></option>
<option value="symbol" data-l10n-id="pad.settings.fontType.symbol"></option>
<option value="webdings" data-l10n-id="pad.settings.fontType.webdings"></option>
<option value="wingdings" data-l10n-id="pad.settings.fontType.wingdings"></option>
<option value="sansserif" data-l10n-id="pad.settings.fontType.sansserif"></option>
<option value="serif" data-l10n-id="pad.settings.fontType.serif"></option>
</select>
</td>
</tr>
<tr>
<td>
<label for="languagemenu" data-l10n-id="pad.settings.language">Language:</label>
</td>
<td>
<select id="languagemenu">
<% for (lang in langs) { %>
<option value="<%=lang%>"><%=langs[lang].nativeName%></option>
<% } %>
</select>
</td>
</tr>
<% e.end_block(); %>
</table>
</div>
<div class="column">
<% e.begin_block("globalSettings"); %>
<h2 data-l10n-id="pad.settings.globalView"></h2>
<% e.end_block(); %>
</div>
</div>
<div id="import_export" class="popup">
<h1 data-l10n-id="pad.importExport.import_export"></h1>
<div class="column acl-write">
<% e.begin_block("importColumn"); %>
<h2 data-l10n-id="pad.importExport.import"></h2>
<div class="importmessage" id="importmessageabiword" data-l10n-id="pad.importExport.abiword.innerHTML"></div><br>
<form id="importform" method="post" action="" target="importiframe" enctype="multipart/form-data">
<div class="importformdiv" id="importformfilediv">
<input type="file" name="file" size="10" id="importfileinput">
<div class="importmessage" id="importmessagefail"></div>
</div>
<div id="import"></div>
<div class="importmessage" id="importmessagesuccess" data-l10n-id="pad.importExport.importSuccessful"></div>
<div class="importformdiv" id="importformsubmitdiv">
<span class="nowrap">
<input type="submit" name="submit" value="Import Now" disabled="disabled" id="importsubmitinput">
<div alt="" id="importstatusball" class="loadingAnimation" align="top"></div>
</span>
</div>
</form>
<% e.end_block(); %>
</div>
<div class="column" id="exportColumn">
<h2 data-l10n-id="pad.importExport.export"></h2>
<% e.begin_block("exportColumn"); %>
<a id="exportetherpada" target="_blank" class="exportlink"><div class="exporttype" id="exportetherpad" data-l10n-id="pad.importExport.exportetherpad"></div></a>
<a id="exporthtmla" target="_blank" class="exportlink"><div class="exporttype" id="exporthtml" data-l10n-id="pad.importExport.exporthtml"></div></a>
<a id="exportplaina" target="_blank" class="exportlink"><div class="exporttype" id="exportplain" data-l10n-id="pad.importExport.exportplain"></div></a>
<a id="exportworda" target="_blank" class="exportlink"><div class="exporttype" id="exportword" data-l10n-id="pad.importExport.exportword"></div></a>
<a id="exportpdfa" target="_blank" class="exportlink"><div class="exporttype" id="exportpdf" data-l10n-id="pad.importExport.exportpdf"></div></a>
<a id="exportopena" target="_blank" class="exportlink"><div class="exporttype" id="exportopen" data-l10n-id="pad.importExport.exportopen"></div></a>
<% e.end_block(); %>
</div>
</div>
<div id="connectivity" class="popup">
<% e.begin_block("modals"); %>
<div class="connected visible">
<h2 data-l10n-id="pad.modals.connected"></h2>
</div>
<div class="reconnecting">
<h1 data-l10n-id="pad.modals.reconnecting"></h1>
<p class='loadingAnimation'></p>
</div>
<div class="userdup">
<h1 data-l10n-id="pad.modals.userdup"></h1>
<h2 data-l10n-id="pad.modals.userdup.explanation"></h2>
<p id="defaulttext" data-l10n-id="pad.modals.userdup.advice"></p>
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
</div>
<div class="unauth">
<h1 data-l10n-id="pad.modals.unauth"></h1>
<p id="defaulttext" data-l10n-id="pad.modals.unauth.explanation"></p>
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
</div>
<div class="looping">
<h1 data-l10n-id="pad.modals.disconnected"></h1>
<h2 data-l10n-id="pad.modals.looping.explanation"></h2>
<p data-l10n-id="pad.modals.looping.cause"></p>
</div>
<div class="initsocketfail">
<h1 data-l10n-id="pad.modals.initsocketfail"></h1>
<h2 data-l10n-id="pad.modals.initsocketfail.explanation"></h2>
<p data-l10n-id="pad.modals.initsocketfail.cause"></p>
</div>
<div class="slowcommit with_reconnect_timer">
<h1 data-l10n-id="pad.modals.disconnected"></h1>
<h2 data-l10n-id="pad.modals.slowcommit.explanation"></h2>
<p id="defaulttext" data-l10n-id="pad.modals.slowcommit.cause"></p>
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
</div>
<div class="badChangeset with_reconnect_timer">
<h1 data-l10n-id="pad.modals.disconnected"></h1>
<h2 data-l10n-id="pad.modals.badChangeset.explanation"></h2>
<p id="defaulttext" data-l10n-id="pad.modals.badChangeset.cause"></p>
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
</div>
<div class="corruptPad">
<h1 data-l10n-id="pad.modals.disconnected"></h1>
<h2 data-l10n-id="pad.modals.corruptPad.explanation"></h2>
<p data-l10n-id="pad.modals.corruptPad.cause"></p>
</div>
<div class="deleted">
<h1 data-l10n-id="pad.modals.deleted"></h1>
<p data-l10n-id="pad.modals.deleted.explanation"></p>
</div>
<div class="disconnected with_reconnect_timer">
<% e.begin_block("disconnected"); %>
<h1 data-l10n-id="pad.modals.disconnected"></h1>
<h2 data-l10n-id="pad.modals.disconnected.explanation"></h2>
<p id="defaulttext" data-l10n-id="pad.modals.disconnected.cause"></p>
<button id="forcereconnect" data-l10n-id="pad.modals.forcereconnect"></button>
<% e.end_block(); %>
</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>
<% e.end_block(); %>
</div>
<div id="embed" class="popup">
<% e.begin_block("embedPopup"); %>
<div id="embedreadonly" class="right acl-write">
<input type="checkbox" id="readonlyinput">
<label for="readonlyinput" data-l10n-id="pad.share.readonly"></label>
</div>
<h1 data-l10n-id="pad.share"></h1>
<div id="linkcode">
<h2 data-l10n-id="pad.share.link"></h2>
<input id="linkinput" type="text" value="" onclick="this.select()">
</div>
<br>
<div id="embedcode">
<h2 data-l10n-id="pad.share.emebdcode"></h2>
<input id="embedinput" type="text" value="" onclick="this.select()">
</div>
<% e.end_block(); %>
</div>
<div id="chaticon" onclick="chat.show();return false;" title="Chat (Alt C)">
<span id="chatlabel" data-l10n-id="pad.chat"></span>
<span class="buttonicon buttonicon-chat"></span>
<span id="chatcounter">0</span>
</div>
<div id="chatbox">
<div id="titlebar"><span id ="titlelabel" data-l10n-id="pad.chat"></span>
<a id="titlecross" onClick="chat.hide();return false;">-&nbsp;</a>
<a id="titlesticky" onClick="chat.stickToScreen(true);$('#options-stickychat').prop('checked', true);return false;" title="Stick chat to screen">&nbsp;&nbsp;</a>
</div>
<div id="chattext" class="authorColors" aria-live="polite" aria-relevant="additions removals text" role="log" aria-atomic="false">
<div alt="loading.." id="chatloadmessagesball" class="chatloadmessages loadingAnimation" align="top"></div>
<button id="chatloadmessagesbutton" class="chatloadmessages" data-l10n-id="pad.chat.loadmessages"></button>
</div>
<div id="chatinputbox">
<form>
<input id="chatinput" type="text" maxlength="999">
</form>
</div>
</div>
<div id="focusprotector">&nbsp;</div>
<% e.end_block(); %>
<% e.begin_block("scripts"); %>
<script type="text/javascript">
// @license magnet:?xt=urn:btih:8e4f440f4c65981c5bf93c76d35135ba5064d8b7&dn=apache-2.0.txt
(function() {
// Display errors on page load to the user
// (Gets overridden by padutils.setupGlobalExceptionHandler)
var originalHandler = window.onerror;
window.onerror = function(msg, url, line) {
var box = document.getElementById('editorloadingbox');
box.innerHTML = '<p><b>An error occurred while loading the pad</b></p>'
+ '<p><b>'+msg+'</b> '
+ '<small>in '+ url +' (line '+ line +')</small></p>';
// call original error handler
if(typeof(originalHandler) == 'function') originalHandler.call(null, arguments);
};
})();
// @license-end
</script>
<script type="text/javascript" src="../static/js/require-kernel.js"></script>
<script type="text/javascript" src="../socket.io/socket.io.js"></script>
<!-- Include base packages manually (this help with debugging) -->
<script type="text/javascript" src="../javascripts/lib/ep_etherpad-lite/static/js/pad.js?callback=require.define"></script>
<script type="text/javascript" src="../javascripts/lib/ep_etherpad-lite/static/js/ace2_common.js?callback=require.define"></script>
<% e.begin_block("customScripts"); %>
<script type="text/javascript" src="../static/skins/<%=encodeURI(settings.skinName)%>/pad.js"></script>
<% e.end_block(); %>
<!-- Bootstrap page -->
<script type="text/javascript">
// @license magnet:?xt=urn:btih:8e4f440f4c65981c5bf93c76d35135ba5064d8b7&dn=apache-2.0.txt
var clientVars = {};
(function () {
var pathComponents = location.pathname.split('/');
// Strip 'p' and the padname from the pathname and set as baseURL
var baseURL = pathComponents.slice(0,pathComponents.length-2).join('/') + '/';
require.setRootURI(baseURL + "javascripts/src");
require.setLibraryURI(baseURL + "javascripts/lib");
require.setGlobalKeyPath("require");
$ = jQuery = require('ep_etherpad-lite/static/js/rjquery').jQuery; // Expose jQuery #HACK
browser = require('ep_etherpad-lite/static/js/browser');
var plugins = require('ep_etherpad-lite/static/js/pluginfw/client_plugins');
var hooks = require('ep_etherpad-lite/static/js/pluginfw/hooks');
plugins.baseURL = baseURL;
plugins.update(function () {
hooks.plugins = plugins;
// Call documentReady hook
$(function() {
hooks.aCallAll('documentReady');
});
var pad = require('ep_etherpad-lite/static/js/pad');
pad.baseURL = baseURL;
pad.init();
});
/* TODO: These globals shouldn't exist. */
pad = require('ep_etherpad-lite/static/js/pad').pad;
chat = require('ep_etherpad-lite/static/js/chat').chat;
padeditbar = require('ep_etherpad-lite/static/js/pad_editbar').padeditbar;
padimpexp = require('ep_etherpad-lite/static/js/pad_impexp').padimpexp;
}());
// @license-end
</script>
<div style="display:none"><a href="/javascript" data-jslicense="1">JavaScript license information</a></div>
<% e.end_block(); %>
</html>