infra
/
cryptpad
2
1
Fork 0
Code Issues Pull Requests Projects Releases 1 Activity

Merge branch 'css' into soon

pull/1/head
yflory 2016-10-13 14:26:43 +02:00
parent 0fe62f8c75 39bbf8a6c1
commit 4378df25b8
20 changed files with 813 additions and 385 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
customize.dist/DecorateToolbar.js
View File

@ -13,7 +13,7 @@ define([
$.ajax({
url: isHtml ? '/customize/BottomBar.html' : '/customize/Header.html',
success: function (ret) {
$('iframe').height('96%');
//:$('iframe').height('96%');
$('body').append(ret);
LS.main();
Messages._applyTranslation();

8
customize.dist/Header.html
View File

@ -8,14 +8,16 @@
<option value="fr">Français</option>
</select>
</span>
<p data-localization="header_france">
<p data-localization="header_france" class="big">
</p>
</div>
<div class="bottom-bar-center">
<p><a id="cryptpad-logo" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
<p><a id="cryptpad-logo" class="big" href="/" data-localization-title="header_logoTitle">CryptPad</a></p>
<p><a id="cryptpad-logo" class="small" href="/" data-localization-title="header_logoTitle"><img src="/customize/cryptofist_mini.png" alt="Cryptpad" class="cryptofist" /></a></p>
</div>
<div class="bottom-bar-right">
<p data-localization="header_support">
<p data-localization="header_xwiki" class="small">
<p data-localization="header_support" class="big">
</p>
</div>
</div>

BIN
customize.dist/cryptofist_mini.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

29
customize.dist/main.css
View File

@ -146,6 +146,7 @@ tr {
.buttons {
margin-bottom: 50px;
margin-top: 20px;
line-height: 2.5em;
}
.button {
padding: 4px 12px 4px 12px;
@ -242,6 +243,34 @@ tbody td:last-child {
margin-right: 4px;
position: relative;
}
@media screen and (max-width: 800px) {
.top-bar .big,
.bottom-bar .big {
display: none;
}
}
@media screen and (min-width: 801px) {
.top-bar .big,
.bottom-bar .big {
display: inline-block;
}
}
@media screen and (max-width: 800px) {
.top-bar .small,
.bottom-bar .small {
display: inline-block;
}
}
@media screen and (min-width: 801px) {
.top-bar .small,
.bottom-bar .small {
display: none;
}
}
.top-bar .small img,
.bottom-bar .small img {
height: 1.25em;
}
.bottom-bar {
bottom: 0px;
right: 0px;

22
customize.dist/src/cryptpad.less
View File

@ -175,6 +175,7 @@ p, pre, td, a, table, tr {
.buttons {
margin-bottom: 50px;
margin-top: 20px;
line-height: 2.5em;
}
.button {
@ -278,6 +279,27 @@ tbody {
margin-right: 4px;
position: relative;
}
.big {
@media screen and (max-width: 800px) {
display: none;
}
@media screen and (min-width: 801px) {
display: inline-block;
}
}
.small {
@media screen and (max-width: 800px) {
display: inline-block;
}
@media screen and (min-width: 801px) {
display: none;
}
img {
height: 1.25em;
}
}
}
.bottom-bar {
bottom: 0px;

118
customize.dist/src/toolbar.less
View File

@ -16,8 +16,6 @@
color: #666;
font-weight: bold;
height: 30px;
margin-bottom: -3px;
display: inline-block;
width: 100%;
z-index: 9001;
@ -27,32 +25,58 @@
}
div {
padding: 0 3px;
height: 1.5em;
line-height: 25px;
height: 100%;
white-space: normal;
&.cryptpad-back {
padding: 0;
font-weight: bold;
cursor: pointer;
color: #000;
}
&.cryptpad-lag {
float: right;
line-height: 26px;
margin: 2px 0px 2px 4px;
}
}
button, .rightside-element {
height: 26px;
padding-right: 5px;
padding-left: 5px;
margin: 2px;
}
button {
height: 26px;
background-color: inherit;
background-image: linear-gradient(to bottom,#fff,#e4e4e4);
border: 1px solid #A6A6A6;
border-bottom-color: #979797;
border-radius: 3px;
margin-right: 5px;
padding-right: 5px;
padding-left: 5px;
&:hover {
background-image:linear-gradient(to bottom,#f2f2f2,#ccc);
}
&.userlist {
@media screen and (max-width: 800px) {
display: none;
}
@media screen and (min-width: 801px) {
display: inline-block;
}
&.small {
@media screen and (max-width: 800px) {
display: inline-block;
}
@media screen and (min-width: 801px) {
display: none;
}
}
}
}
.cryptpad-state {
line-height: 30px; /* equivalent to 26px + 2*2px margin used for buttons */
}
.rightside-button {
float: right;
cursor: pointer;
@ -63,30 +87,89 @@
float: left;
}
.rightside-element {
vertical-align: middle;
white-space: nowrap;
&.float {
float: right;
}
}
select {
border: 0px;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
border: 1px solid #A6A6A6;
border-bottom-color: #979797;
}
}
.cryptpad-toolbar-leftside {
float: left;
div {
float: left;
margin-bottom: -1px;
.cryptpad-dropdown-container {
position: relative;
display: inline-block;
padding: 0px;
.cryptpad-dropdown {
z-index:1000;
display:none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
height: auto;
padding: 5px;
white-space: normal;
p {
width: 210px;
padding: 0;
margin: 0;
white-space: normal;
&.cryptpad-dropdown-users {
text-align:baseline;
.yourself {
font-style: italic;
}
.anonymous {
font-style: italic;
}
}
h2 {
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
}
}
button {
margin: 2px 0px;
}
}
}
button {
margin: 2px 4px 2px 0px;
}
.cryptpad-userbuttons-container {
display: none;
}
}
.cryptpad-toolbar-rightside {
text-align: right;
margin-right: 30px;
//float: right;
}
.cryptpad-lag {
float: right;
}
.cryptpad-spinner {
float: left;
display: inline-block;
height: 26px;
margin: 2px;
line-height: 26px;
font-size: 20px;
}
.cryptpad-readonly {
margin-right: 20px;
@ -94,13 +177,12 @@
text-transform: uppercase;
}
.cryptpad-toolbar-username {
font-style: italic;
}
.lag {
display: inline-block;
vertical-align: middle;
padding: 0 !important;
margin: 0 !important;
margin: 0 5px !important;
height: 15px !important;
width: 15px !important;
border-radius: 50%;

121
customize.dist/toolbar.css
View File

@ -16,8 +16,6 @@
user-select: none;
color: #666;
font-weight: bold;
height: 30px;
margin-bottom: -3px;
display: inline-block;
width: 100%;
z-index: 9001;
@ -26,10 +24,7 @@
float: right;
}
.cryptpad-toolbar div {
padding: 0 3px;
height: 1.5em;
line-height: 25px;
height: 100%;
white-space: normal;
}
.cryptpad-toolbar div.cryptpad-back {
padding: 0;
@ -37,20 +32,52 @@
cursor: pointer;
color: #000;
}
.cryptpad-toolbar button {
.cryptpad-toolbar div.cryptpad-lag {
float: right;
line-height: 26px;
margin: 2px 0px 2px 4px;
}
.cryptpad-toolbar button,
.cryptpad-toolbar .rightside-element {
height: 26px;
padding-right: 5px;
padding-left: 5px;
margin: 2px;
}
.cryptpad-toolbar button {
background-color: inherit;
background-image: linear-gradient(to bottom, #fff, #e4e4e4);
border: 1px solid #A6A6A6;
border-bottom-color: #979797;
border-radius: 3px;
margin-right: 5px;
padding-right: 5px;
padding-left: 5px;
}
.cryptpad-toolbar button:hover {
background-image: linear-gradient(to bottom, #f2f2f2, #ccc);
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar button.userlist {
display: none;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar button.userlist {
display: inline-block;
}
}
@media screen and (max-width: 800px) {
.cryptpad-toolbar button.userlist.small {
display: inline-block;
}
}
@media screen and (min-width: 801px) {
.cryptpad-toolbar button.userlist.small {
display: none;
}
}
.cryptpad-toolbar .cryptpad-state {
line-height: 30px;
/* equivalent to 26px + 2*2px margin used for buttons */
}
.cryptpad-toolbar .rightside-button {
float: right;
cursor: pointer;
@ -59,40 +86,96 @@
cursor: pointer;
float: left;
}
.cryptpad-toolbar .rightside-element {
vertical-align: middle;
white-space: nowrap;
}
.cryptpad-toolbar .rightside-element.float {
float: right;
}
.cryptpad-toolbar select {
border: 0px;
margin-left: 5px;
margin-right: 5px;
padding-left: 5px;
border: 1px solid #A6A6A6;
border-bottom-color: #979797;
}
.cryptpad-toolbar-leftside {
float: left;
margin-bottom: -1px;
}
.cryptpad-toolbar-leftside div {
float: left;
.cryptpad-toolbar-leftside .cryptpad-dropdown-container {
position: relative;
display: inline-block;
padding: 0px;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown {
z-index: 1000;
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
overflow: auto;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
height: auto;
padding: 5px;
white-space: normal;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p {
width: 210px;
padding: 0;
margin: 0;
white-space: normal;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users {
text-align: baseline;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .yourself {
font-style: italic;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p.cryptpad-dropdown-users .anonymous {
font-style: italic;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown p h2 {
font-weight: bold;
text-align: center;
background-color: #EEEEEE;
padding: 5px 0px;
margin: 5px 0px;
font-size: 16px;
}
.cryptpad-toolbar-leftside .cryptpad-dropdown-container .cryptpad-dropdown button {
margin: 2px 0px;
}
.cryptpad-toolbar-leftside button {
margin: 2px 4px 2px 0px;
}
.cryptpad-toolbar-leftside .cryptpad-userbuttons-container {
display: none;
}
.cryptpad-toolbar-rightside {
text-align: right;
}
.cryptpad-lag {
float: right;
margin-right: 30px;
}
.cryptpad-spinner {
float: left;
display: inline-block;
height: 26px;
margin: 2px;
line-height: 26px;
font-size: 20px;
}
.cryptpad-readonly {
margin-right: 20px;
font-weight: bold;
text-transform: uppercase;
}
.cryptpad-toolbar-username {
font-style: italic;
}
.lag {
display: inline-block;
vertical-align: middle;
padding: 0 !important;
margin: 0 !important;
margin: 0 5px !important;
height: 15px !important;
width: 15px !important;
border-radius: 50%;

26
customize.dist/translations/messages.fr.js
View File

@ -17,21 +17,17 @@ define(function () {
out.common_connectionLost = 'Connexion au serveur perdue';
out.editingAlone = 'Pas d\'autre participant';
out.editingWithOneOtherPerson = 'Édition avec une autre personne';
out.editingWith = 'Édition avec';
out.otherPeople = 'autres personnes';
out.disconnected = 'Déconnecté';
out.synchronizing = 'Synchronisation';
out.reconnecting = 'Reconnexion...';
out.lag = 'Latence';
out.readonly = 'Lecture seule';
out.nobodyIsEditing = "Personne n'édite le document";
out.onePersonIsEditing = 'Une personne édite le document';
out.peopleAreEditing = '{0} personnes éditent le document';
out.oneViewer = '1 lecteur';
out.viewers = '{0} lecteurs';
out.anonymous = "Vous êtes actuellement anonyme";
out.anonymous = "Anonyme";
out.yourself = "Vous-même";
out.anonymousUsers = "utilisateurs anonymes";
out.anonymousUser = "utilisateur anonyme";
out.share = "Partage";
out.users = "Utilisateurs";
out.greenLight = "Tout fonctionne bien";
out.orangeLight = "Votre connexion est lente, ce qui réduit la qualité de l'éditeur";
@ -82,7 +78,14 @@ define(function () {
out.readonlyUrl = 'Document en lecture seule';
out.copyReadOnly = "Copier l'URL dans le presse-papiers";
out.openReadOnly = "Ouvrir dans un nouvel onglet";
out.editing = "en édition";
out.viewing = "en lecture";
out.editShare = "Partager l'URL";
out.editShareTitle = "Copier l'URL d'édition dans le presse-papiers";
out.viewShare = "Partager l'URL de lecture";
out.viewShareTitle = "Copier l'URL d'accès en lecture seule dans le presse-papiers";
out.viewOpen = "Voir dans un nouvel onglet";
out.viewOpenTitle = "Ouvrir le document en lecture seule dans un nouvel onglet";
out.disconnectAlert = 'Perte de la connexion au réseau !';
@ -199,6 +202,7 @@ define(function () {
// Header.html
out.header_france = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer">Fait avec <img class="bottom-bar-heart" src="/customize/heart.png" /> en <img class="bottom-bar-fr" title="France" alt="France" src="/customize/fr.png" /> par <img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_xwiki = '<a href="http://www.xwiki.com/fr" target="_blank" rel="noopener noreferrer"><img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
out.header_logoTitle = "Aller vers la page d'accueil";

25
customize.dist/translations/messages.js
View File

@ -17,21 +17,17 @@ define(function () {
out.common_connectionLost = 'Server Connection Lost';
out.editingAlone = 'Editing alone';
out.editingWithOneOtherPerson = 'Editing with one other person';
out.editingWith = 'Editing with';
out.otherPeople = 'other people';
out.disconnected = 'Disconnected';
out.synchronizing = 'Synchronizing';
out.reconnecting = 'Reconnecting...';
out.lag = 'Lag';
out.readonly = 'Read only';
out.nobodyIsEditing = 'Nobody is editing';
out.onePersonIsEditing = 'One person is editing';
out.peopleAreEditing = '{0} people are editing';
out.oneViewer = '1 viewer';
out.viewers = '{0} viewers';
out.anonymous = "You are currently anonymous";
out.anonymous = "Anonymous";
out.yourself = "Yourself";
out.anonymousUsers = "anonymous users";
out.anonymousUser = "anonymous user";
out.share = "Share";
out.users = "Users";
out.greenLight = "Everything is working fine";
out.orangeLight = "Your slow connection may impact your experience";
@ -83,6 +79,14 @@ define(function () {
out.readonlyUrl = 'Read only document';
out.copyReadOnly = "Copy URL to clipboard";
out.openReadOnly = "Open in a new tab";
out.editing = "editing";
out.viewing = "viewing";
out.editShare = "Share";
out.editShareTitle = "Copy the edit URL to clipboard";
out.viewShare = "Share view URL";
out.viewShareTitle = "Copy the read-only URL to clipboard";
out.viewOpen = "View in new tab";
out.viewOpenTitle = "Open the document in read-only mode in a new tab";
out.disconnectAlert = 'Network connection lost!';
@ -200,6 +204,7 @@ define(function () {
// Header.html
out.header_france = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer">With <img class="bottom-bar-heart" src="/customize/heart.png" /> from <img class="bottom-bar-fr" src="/customize/fr.png" title="France" alt="France"/> by <img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_xwiki = '<a href="http://www.xwiki.com/" target="_blank" rel="noopener noreferrer"><img src="/customize/logo-xwiki.png" alt="XWiki SAS" class="bottom-bar-xwiki"/></a>';
out.header_support = '<a href="http://ng.open-paas.org/" title="OpenPaaS::ng" target="_blank" rel="noopener noreferrer"> <img src="/customize/openpaasng.png" alt="OpenPaaS-ng" class="bottom-bar-openpaas" /></a>';
out.header_logoTitle = 'Go to the main page';

24
www/code/index.html
View File

@ -19,23 +19,35 @@
html, body {
overflow-y: hidden;
}
#iframe-container {
position: fixed;
top: 2.6em;
bottom: 0px;
right: 0px;
left: 0px;
padding: 0px;
}
#pad-iframe {
position:fixed;
top:2.5em;
left:0px;
bottom:0px;
right:0px;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
box-sizing: border-box;
}
/* We use !important here to override the 96% set to the element in DecorateToolbar.js
when we enter fullscreen mode. It allows us to avoid changing the iframe's size in JS */
#pad-iframe.fullscreen {
top: 0px;
height: 100% !important;
}
</style>
</head>
<body>
<iframe id="pad-iframe" src="inner.html"></iframe>
<div id="iframe-container">
<iframe id="pad-iframe" src="inner.html"></iframe>
</div>
</body>
</html>

28
www/code/inner.html
View File

@ -31,24 +31,30 @@
<script src="/bower_components/codemirror/addon/fold/markdown-fold.js"></script>
<script src="/bower_components/codemirror/addon/fold/comment-fold.js"></script>
<style>
html {
height: 100%;
html, body{
height: 100%;
width: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
box-sizing: border-box;
position: relative;
}
body {
height: 100%;
margin: 0px;
display: flex;
flex-flow: column;
}
.CodeMirror {
position: absolute;
top: 25px;
bottom: 0px;
left: 0px;
right: 0px;
height: auto;
height: 100%;
}
.cryptpad-toolbar {
padding: 0px 6px;
}
#cme_toolbox div.cryptpad-lag {
line-height: 24px;
}
#cme_toolbox {
font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
height: 25px;
background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, #DDDDDD); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, #DDDDDD); /* For Firefox 3.6 to 15 */

23
www/code/main.js
View File

@ -303,12 +303,16 @@ define([
toolbarList = info.userList;
var config = {
userData: userList,
readOnly: readOnly
readOnly: readOnly,
ifrw: ifrw
};
if (readOnly) {delete config.changeNameID; }
toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
var $userBlock = $bar.find('.' + Toolbar.constants.username);
var $editShare = $bar.find('.' + Toolbar.constants.editShare);
var $viewShare = $bar.find('.' + Toolbar.constants.viewShare);
var editHash;
var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
@ -322,8 +326,8 @@ define([
var usernameCb = function (newName) {
setName (newName);
};
var $username = Cryptpad.createButton('username', true, {lastName: lastName}, usernameCb);
$rightside.append($username);
var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb);
$userBlock.append($username).hide();
});
/* add an export button */
@ -353,10 +357,15 @@ define([
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad);
if (!readOnly && viewHash) {
if (!readOnly) {
$editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
}
if (viewHash) {
/* add a 'links' button */
var $links = Cryptpad.createButton('readonly', true, {viewHash: viewHash});
$rightside.append($links);
$viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash}));
if (!readOnly) {
$viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash}));
}
}
var configureLanguage = function (cb) {
@ -366,6 +375,7 @@ define([
var $language = module.$language = $('<select>', {
title: 'syntax highlighting',
id: 'language-mode',
'class': 'rightside-element'
}).on('change', function () {
setMode($language.val());
onLocal();
@ -390,6 +400,7 @@ define([
var $themeDropdown = $('<select>', {
title: 'color theme',
id: 'display-theme',
'class': 'rightside-element'
});
Themes.forEach(function (o) {
$themeDropdown.append($('<option>', {

84
www/common/cryptpad-common.js
View File

@ -716,10 +716,8 @@ define([
break;
case 'username':
button = $('<button>', {
title: Messages.userButton + '\n' + Messages.userButtonTitle,
'class': "fa fa-user",
style: 'font:'+size+' FontAwesome'
});
title: Messages.userButton + '\n' + Messages.userButtonTitle
}).html('<span class="fa fa-user" style="font-family:FontAwesome;"></span>');
if (data && typeof data.lastName !== "undefined" && callback) {
var lastName = data.lastName;
button.click(function() {
@ -729,42 +727,54 @@ define([
});
}
break;
case 'readonly':
case 'editshare':
button = $('<button>', {
title: Messages.getViewButton + '\n' + Messages.getViewButtonTitle,
'class': "fa fa-eye",
style: 'font:'+size+' FontAwesome'
});
if (data && data.viewHash) {
var viewHash = data.viewHash;
button.click(function() {
title: Messages.editShareTitle,
'class': "button action"
}).text(Messages.editShare);
if (data && data.editHash) {
var editHash = data.editHash;
button.click(function () {
var baseUrl = window.location.origin + window.location.pathname + '#';
var url = baseUrl + viewHash;
var $content = $('<div>').text(Messages.readonlyUrl);
var $copy = $('<button>', {
id: "cryptpad-readonly-copy",
'class': "button action"
}).text(Messages.copyReadOnly);
var $open = $('<button>', {
id: "cryptpad-readonly-open",
'class': "button action"
}).text(Messages.openReadOnly);
$content.append('<br>').append($copy).append($open);
common.alert($content.html());
$("#cryptpad-readonly-copy").click(function() {
var success = Clipboard.copy(url);
if (success) {
common.log(Messages.shareSuccess);
common.findOKButton().click();
return;
}
});
$("#cryptpad-readonly-open").click(function() {
var url = baseUrl + editHash;
var success = Clipboard.copy(url);
if (success) {
common.log(Messages.shareSuccess);
common.findOKButton().click();
window.open(url);
});
if (callback) { callback(); }
return;
}
});
}
break;
case 'viewshare':
button = $('<button>', {
title: Messages.viewShareTitle,
'class': "button action"
}).text(Messages.viewShare);
if (data && data.viewHash) {
button.click(function () {
var baseUrl = window.location.origin + window.location.pathname + '#';
var url = baseUrl + data.viewHash;
var success = Clipboard.copy(url);
if (success) {
common.log(Messages.shareSuccess);
common.findOKButton().click();
return;
}
});
}
break;
case 'viewopen':
button = $('<button>', {
title: Messages.viewOpenTitle,
'class': "button action"
}).text(Messages.viewOpen);
if (data && data.viewHash) {
button.click(function () {
var baseUrl = window.location.origin + window.location.pathname + '#';
var url = baseUrl + data.viewHash;
common.findOKButton().click();
window.open(url);
});
}
break;

199
www/common/toolbar.js
View File

@ -1,6 +1,7 @@
define([
'/customize/messages.js',
'/bower_components/jquery/dist/jquery.min.js',
'/bower_components/bootstrap/js/dropdown.js',
], function (Messages) {
var $ = window.jQuery;
@ -22,9 +23,19 @@ define([
var SPINNER_CLS = Bar.constants.spinner = 'cryptpad-spinner';
var STATE_CLS = Bar.constants.state = 'cryptpad-state';
var USERNAME_CLS = Bar.constants.username = 'cryptpad-toolbar-username';
var READONLY_CLS = Bar.constants.readonly = 'cryptpad-readonly';
var USERBUTTONS_CONTAINER_CLS = Bar.constants.userButtonsContainer = "cryptpad-userbuttons-container";
var USERLIST_CLS = Bar.constants.userlist = "cryptpad-dropdown-users";
var EDITSHARE_CLS = Bar.constants.editShare = "cryptpad-dropdown-editShare";
var VIEWSHARE_CLS = Bar.constants.viewShare = "cryptpad-dropdown-viewShare";
var DROPDOWN_CONTAINER_CLS = Bar.constants.dropdownContainer = "cryptpad-dropdown-container";
var DROPDOWN_CLS = Bar.constants.dropdown = "cryptpad-dropdown";
/** Key in the localStore which indicates realtime activity should be disallowed. */
// TODO remove? will never be used in cryptpad
var LOCALSTORAGE_DISALLOW = Bar.constants.localstorageDisallow = 'cryptpad-disallow';
@ -84,30 +95,91 @@ define([
}, SPINNER_DISAPPEAR_TIME);
};
var createUserList = function ($container) {
var createUserButtons = function ($userlistElement, readOnly) {
var $listElement = $('<span>', {
id: 'userButtons',
'class': USERBUTTONS_CONTAINER_CLS
}).appendTo($userlistElement);
var $editIcon = $('<button>', {
'class': 'userlist dropbtn edit',
});
var $editIconSmall = $editIcon.clone().addClass('small');
var $viewIcon = $('<button>', {
'class': 'userlist dropbtn view',
});
var $viewIconSmall = $viewIcon.clone().addClass('small');
var $shareTitle = $('<h2>').text(Messages.share);
var $dropdownEditUsers = $('<p>', {'class': USERLIST_CLS});
var $dropdownEditShare = $('<p>', {'class': EDITSHARE_CLS});
if (readOnly !== 1) {
$dropdownEditShare.append($shareTitle);
}
var $dropdownEditContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
var $dropdownEdit = $('<div>', {
id: "cryptpad-dropdown-edit",
'class': DROPDOWN_CLS
}).append($dropdownEditUsers).append($dropdownEditShare);
var $dropdownViewShare = $('<p>', {'class': VIEWSHARE_CLS}).append($shareTitle.clone());
var $dropdownViewContainer = $('<div>', {'class': DROPDOWN_CONTAINER_CLS});
var $dropdownView = $('<div>', {
id: "cryptpad-dropdown-view",
'class': DROPDOWN_CLS
}).append($dropdownViewShare);
var createHandler = function ($elmt) {
return function () {
if ($elmt.is(':visible')) {
$elmt.hide();
return;
}
$userlistElement.find('.' + DROPDOWN_CLS).hide();
$elmt.show();
};
};
$editIcon.click(createHandler($dropdownEdit));
$editIconSmall.click(createHandler($dropdownEdit));
$viewIcon.click(createHandler($dropdownView));
$viewIconSmall.click(createHandler($dropdownView));
$dropdownEditContainer.append($editIcon).append($editIconSmall).append($dropdownEdit);
$dropdownViewContainer.append($viewIcon).append($viewIconSmall).append($dropdownView);
$listElement.append($dropdownEditContainer);
if (readOnly !== -1) {
$listElement.append($dropdownViewContainer);
}
};
var createUserList = function ($container, readOnly) {
var $state = $('<span>', {'class': STATE_CLS}).text(Messages.synchronizing);
var $usernameElement = $('<span>', {'class': USERNAME_CLS});
var $userlist = $('<div>', {
'class': USER_LIST_CLS,
id: uid(),
});
}).append($state).append($usernameElement);
createUserButtons($userlist, readOnly);
$container.append($userlist);
return $userlist[0];
};
var getOtherUsers = function(myUserName, userList, userData) {
var i = 0;
var list = '';
var list = [];
userList.forEach(function(user) {
if(user !== myUserName) {
var data = (userData) ? (userData[user] || null) : null;
var userName = (data) ? data.name : null;
if(userName) {
if(i === 0) { list = ' : '; }
list += userName + ', ';
i++;
list.push(userName);
}
}
});
return (i > 0) ? list.slice(0, -2) : list;
return list;
};
var arrayIntersect = function(a, b) {
@ -121,46 +193,74 @@ define([
if (n === 1) { return '; + ' + Messages.oneViewer; }
return '; + ' + Messages._getKey('viewers', [n]);
};
var updateUserList = function (myUserName, listElement, userList, userData, readOnly) {
var updateUserList = function (myUserName, userlistElement, userList, userData, readOnly, $stateElement) {
var meIdx = userList.indexOf(myUserName);
if (meIdx === -1) {
listElement.textContent = Messages.synchronizing;
$stateElement.text(Messages.synchronizing);
return;
}
$stateElement.text('');
// Make sure the user block elements are displayed
var $userButtons = $(userlistElement).find("#userButtons");
$userButtons.show();
var $userElement = $(userlistElement).find('.' + USERNAME_CLS);
$userElement.show();
var numberOfUsers = userList.length;
// If we are using old pads (readonly unavailable), only editing users are in userList.
// With new pads, we also have readonly users in userList, so we have to intersect with
// the userData to have only the editing users. We can't use userData directly since it
// contains data about users that have already left the channel.
userList = readOnly === -1 ? userList : arrayIntersect(userList, Object.keys(userData));
var innerHTML;
var numberOfViewUsers = numberOfUsers - userList.length;
// Names of editing users
var editUsersNames = getOtherUsers(myUserName, userList, userData);
// Number of anonymous editing users
var anonymous = numberOfUsers - editUsersNames.length;
// Update the userlist
var editUsersList = '';
if (readOnly !== 1) {
editUsersNames.unshift('<span class="yourself">' + Messages.yourself + '</span>');
anonymous--;
}
if (anonymous > 0) {
var text = anonymous === 1 ? Messages.anonymousUser : Messages.anonymousUsers;
editUsersNames.push('<span class="anonymous">' + anonymous + ' ' + text + '</span>');
}
if (editUsersNames.length > 0) {
editUsersList += editUsersNames.join('<br>');
}
var $usersTitle = $('<h2>').text(Messages.users);
var $editUsers = $userButtons.find('.' + USERLIST_CLS);
$editUsers.html('').append($usersTitle).append(editUsersList);
// Update the buttons
var fa_caretdown = '<span class="fa fa-caret-down" style="font-family:FontAwesome;"></span>';
var fa_editusers = '<span class="fa fa-users" style="font-family:FontAwesome;"></span>';
var fa_viewusers = '<span class="fa fa-eye" style="font-family:FontAwesome;"></span>';
$userButtons.find('.userlist.edit').html(fa_editusers + ' ' + userList.length + ' ' + Messages.editing + ' ' + fa_caretdown);
$userButtons.find('.userlist.edit.small').html(fa_editusers + ' ' + userList.length + ' ' + fa_caretdown);
$userButtons.find('.userlist.view').html(fa_viewusers + ' ' + numberOfViewUsers + ' ' + Messages.viewing + ' ' + fa_caretdown);
$userButtons.find('.userlist.view.small').html(fa_viewusers + ' ' + numberOfViewUsers + ' ' + fa_caretdown);
if (readOnly === 1) {
innerHTML = '<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>';
if (userList.length === 0) {
innerHTML += Messages.nobodyIsEditing;
} else if (userList.length === 1) {
innerHTML += Messages.onePersonIsEditing + getOtherUsers(myUserName, userList, userData);
} else {
innerHTML += Messages._getKey('peopleAreEditing', [userList.length]) + getOtherUsers(myUserName, userList, userData);
}
// Remove the current user
numberOfViewUsers--;
// TODO
$userElement.html('<span class="' + READONLY_CLS + '">' + Messages.readonly + '</span>');
}
else {
if (userList.length === 1) {
innerHTML = Messages.editingAlone;
} else if (userList.length === 2) {
innerHTML = Messages.editingWithOneOtherPerson + getOtherUsers(myUserName, userList, userData);
} else {
innerHTML = Messages.editingWith + ' ' + (userList.length - 1) + ' ' + Messages.otherPeople + getOtherUsers(myUserName, userList, userData);
}
}
innerHTML += getViewers(numberOfViewUsers);
if (userData[myUserName]) {
var name = userData[myUserName].name;
else {
var name = userData[myUserName] && userData[myUserName].name;
var icon = '<span class="fa fa-user" style="font-family:FontAwesome;"></span>';
if (!name) {
name = '<span title="' + Messages.anonymous + '" class="fa fa-user-secret" style="font-family:FontAwesome"></span>';
name = Messages.anonymous;
}
innerHTML = '<span class="' + USERNAME_CLS + '">' + name + '</span> | ' + innerHTML;
$userElement.find("button").html(icon + ' ' + name);
}
listElement.innerHTML = innerHTML;
};
var createLagElement = function ($container) {
@ -168,7 +268,7 @@ define([
'class': LAG_ELEM_CLS,
id: uid(),
});
$container.append($lag);
$container.before($lag);
return $lag[0];
};
@ -202,18 +302,35 @@ define([
};
var create = Bar.create = function ($container, myUserName, realtime, getLag, userList, config) {
var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1;
var toolbar = createRealtimeToolbar($container);
var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS));
var userListElement = createUserList(toolbar.find('.' + LEFTSIDE_CLS), readOnly);
var spinner = createSpinner(toolbar.find('.' + RIGHTSIDE_CLS));
var lagElement = createLagElement(toolbar.find('.' + RIGHTSIDE_CLS));
var userData = config.userData;
// readOnly = 1 (readOnly enabled), 0 (disabled), -1 (old pad without readOnly mode)
var readOnly = (typeof config.readOnly !== "undefined") ? (config.readOnly ? 1 : 0) : -1;
var saveElement;
var loadElement;
var $stateElement = $(userListElement).find('.' + STATE_CLS);
var connected = false;
if (config.ifrw) {
var removeDropdowns = function (e) {
if (e.target.matches('.dropbtn') || (e.target.parentElement && e.target.parentElement.matches('.dropbtn'))) {
return;
}
$container.find('.cryptpad-dropdown').hide();
};
$(config.ifrw).on('click',removeDropdowns);
if (config.ifrw.$('iframe').length) {
var innerIfrw = config.ifrw.$('iframe').each(function (i, el) {
$(el.contentWindow).on('click', removeDropdowns);
});
}
}
userList.onChange = function(newUserData) {
var users = userList.users;
if (users.indexOf(myUserName) !== -1) { connected = true; }
@ -221,7 +338,7 @@ define([
if(newUserData) { // Someone has changed his name/color
userData = newUserData;
}
updateUserList(myUserName, userListElement, users, userData, readOnly);
updateUserList(myUserName, userListElement, users, userData, readOnly, $stateElement);
};
var ks = function () {
@ -241,13 +358,13 @@ define([
return {
failed: function () {
connected = false;
userListElement.textContent = Messages.disconnected;
$stateElement.text(Messages.disconnected);
checkLag(undefined, lagElement);
},
reconnecting: function (userId) {
myUserName = userId;
connected = false;
userListElement.textContent = Messages.reconnecting;
$stateElement.text(Messages.reconnecting);
checkLag(getLag, lagElement);
},
connected: function () {

12
www/pad/inner.html
View File

@ -5,6 +5,18 @@
<link rel="stylesheet" href="/bower_components/components-font-awesome/css/font-awesome.min.css">
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
<script src="/bower_components/ckeditor/ckeditor.js"></script>
<style>
#cke_1_top {
overflow: visible;
}
#cke_1_toolbox {
display: inline-block;
width: 100%;
}
#cke_1_top .cryptpad-toolbar {
margin-bottom: 1px;
}
</style>
</head>
<body>
<textarea style="display:none" id="editor1" name="editor1"></textarea>

21
www/pad/main.js
View File

@ -510,12 +510,16 @@ define([
toolbarList = info.userList;
var config = {
userData: userList,
readOnly: readOnly
readOnly: readOnly,
ifrw: ifrw
};
if (readOnly) {delete config.changeNameID; }
toolbar = info.realtime.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
var $userBlock = $bar.find('.' + Toolbar.constants.username);
var $editShare = $bar.find('.' + Toolbar.constants.editShare);
var $viewShare = $bar.find('.' + Toolbar.constants.viewShare);
var editHash;
var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
@ -529,8 +533,8 @@ define([
var usernameCb = function (newName) {
setName (newName);
};
var $username = Cryptpad.createButton('username', true, {lastName: lastName}, usernameCb);
$rightside.append($username);
var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb);
$userBlock.append($username).hide();
});
/* add an export button */
@ -560,10 +564,15 @@ define([
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad);
if (!readOnly && viewHash) {
if (!readOnly) {
$editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
}
if (viewHash) {
/* add a 'links' button */
var $links = Cryptpad.createButton('readonly', true, {viewHash: viewHash});
$rightside.append($links);
$viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash}));
if (!readOnly) {
$viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash}));
}
}
// set the hash

24
www/slide/index.html
View File

@ -19,18 +19,22 @@
html, body {
overflow-y: hidden;
}
#iframe-container {
position: fixed;
top: 2.6em;
bottom: 0px;
right: 0px;
left: 0px;
padding: 0px;
}
#pad-iframe {
position:fixed;
top:2.5em;
left:0px;
bottom:0px;
right:0px;
width:100%;
height:100%;
border:none;
margin:0;
padding:0;
overflow:hidden;
box-sizing: border-box;
}
/* We use !important here to override the 96% set to the element in DecorateToolbar.js
when we enter fullscreen mode. It allows us to avoid changing the iframe's size in JS */
@ -38,10 +42,16 @@
top: 0px;
height: 100% !important;
}
</style>
#iframe-container.fullscreen {
top: 0px;
height: 100% !important;
}
</style>
</head>
<body>
<iframe id="pad-iframe" src="inner.html"></iframe>
<div id="iframe-container">
<iframe id="pad-iframe" src="inner.html"></iframe>
</div>
</body>
</html>

22
www/slide/inner.html
View File

@ -41,6 +41,10 @@
box-sizing: border-box;
position: relative;
}
body {
display: flex;
flex-flow: column;
}
#bar > button {
margin: 5px;
}
@ -111,21 +115,17 @@
html {
height: 100%;
}
body {
height: 100%;
margin: 0px;
}
.CodeMirror {
position: absolute;
top: 25px;
bottom: 0px;
left: 0px;
right: 0px;
height: auto;
height: 100%;
}
.cryptpad-toolbar {
padding: 0px 6px;
}
#cme_toolbox div.cryptpad-lag {
line-height: 24px;
}
#cme_toolbox {
font: 12px Arial,Helvetica,Tahoma,Verdana,sans-serif;
height: 25px;
background: -webkit-linear-gradient(#EEEEEE, #DADADA); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(white, #DDDDDD); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(white, #DDDDDD); /* For Firefox 3.6 to 15 */

389
www/slide/main.js
View File

@ -328,195 +328,6 @@ define([
onLocal();
};
var onInit = config.onInit = function (info) {
var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
toolbarList = info.userList;
var config = {
userData: userList,
readOnly: readOnly
};
if (readOnly) {delete config.changeNameID; }
toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
var editHash;
var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
if (!readOnly) {
editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
}
/* add a "change username" button */
getLastName(function (err, lastName) {
var usernameCb = function (newName) {
setName (newName);
};
var $username = Cryptpad.createButton('username', true, {lastName: lastName}, usernameCb);
$rightside.append($username);
});
/* add an export button */
var $export = Cryptpad.createButton('export', true, {}, exportText);
$rightside.append($export);
if (!readOnly) {
/* add an import button */
var $import = Cryptpad.createButton('import', true, {}, importText);
$rightside.append($import);
/* add a rename button */
var renameCb = function (err, title) {
if (err) { return; }
APP.title = title;
setTabTitle();
onLocal();
};
var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
$rightside.append($setTitle);
}
/* add a forget button */
var forgetCb = function (err, title) {
if (err) { return; }
APP.title = title;
setTabTitle();
};
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad);
if (!readOnly && viewHash) {
/* add a 'links' button */
var $links = Cryptpad.createButton('readonly', true, {viewHash: viewHash + '/present'});
$rightside.append($links);
}
var $present = Cryptpad.createButton('present', true)
.click(function () {
enterPresentationMode(true);
});
if (presentMode) {
$present.hide();
}
$rightside.append($present);
var $leavePresent = Cryptpad.createButton('source', true)
.click(leavePresentationMode);
if (!presentMode) {
$leavePresent.hide();
}
$rightside.append($leavePresent);
var $language = $('<span>', {
'style': "margin-right: 10px;"
}).text(Messages.type.slide + " (Markdown)");
$rightside.append($language);
var configureTheme = function () {
/* Remember the user's last choice of theme using localStorage */
var themeKey = 'CRYPTPAD_CODE_THEME';
var lastTheme = localStorage.getItem(themeKey) || 'default';
/* Let the user select different themes */
var $themeDropdown = $('<select>', {
title: 'color theme',
id: 'display-theme',
});
Themes.forEach(function (o) {
$themeDropdown.append($('<option>', {
selected: o.name === lastTheme,
}).val(o.name).text(o.name));
});
$rightside.append($themeDropdown);
var $theme = $bar.find('select#display-theme');
setTheme(lastTheme, $theme);
$theme.on('change', function () {
var theme = $theme.val();
console.log("Setting theme to %s", theme);
setTheme(theme, $theme);
// remember user choices
localStorage.setItem(themeKey, theme);
});
};
var configureColors = function () {
$back = $('<button>', {
id: SLIDE_BACKCOLOR_ID,
'class': 'fa fa-square',
'style': 'font-family: FontAwesome; color: #000;',
title: Messages.backgroundButton + '\n' + Messages.backgroundButtonTitle
});
$text = $('<button>', {
id: SLIDE_COLOR_ID,
'class': 'fa fa-i-cursor',
'style': 'font-family: FontAwesome; font-weight: bold; color: #fff; background: #000;',
title: Messages.colorButton + '\n' + Messages.colorButtonTitle
});
$testColor = $('<input>', { type: 'color', value: '!' });
var $check = $pad.contents().find("#colorPicker_check");
if ($testColor.attr('type') !== "color" || $testColor.val() === '!') { return; } // TODO
$back.on('click', function() {
var $picker = $('<input>', { type: 'color', value: backColor })
.on('change', function() {
updateColors(undefined, this.value);
onLocal();
});
$check.append($picker);
setTimeout(function() {
$picker.click();
}, 0);
});
$text.on('click', function() {
var $picker = $('<input>', { type: 'color', value: textColor })
.on('change', function() {
updateColors(this.value, undefined);
onLocal();
$check.html('');
});
$check.append($picker);
setTimeout(function() {
$picker.click();
}, 0);
});
$rightside.append($back).append($text);
};
configureTheme();
configureColors();
if (presentMode) {
$('#top-bar').hide();
}
// set the hash
if (!window.location.hash || window.location.hash === '#') {
window.location.hash = editHash;
}
Cryptpad.getPadTitle(function (err, title) {
if (err) {
console.log("Unable to get pad title");
console.error(err);
return;
}
document.title = APP.title = title || info.channel.slice(0, 8);
Cryptpad.setPadTitle(title, function (err, data) {
if (err) {
console.log("Unable to set pad title");
console.error(err);
return;
}
});
});
};
var updateTitle = function (newTitle) {
if (newTitle === APP.title) { return; }
// Change the title now, and set it back to the old value if there is an error
@ -564,6 +375,206 @@ define([
}
};
var onInit = config.onInit = function (info) {
var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox');
toolbarList = info.userList;
var config = {
userData: userList,
readOnly: readOnly,
ifrw: $('#pad-iframe')[0].contentWindow
};
if (readOnly) {delete config.changeNameID; }
toolbar = module.toolbar = Toolbar.create($bar, info.myID, info.realtime, info.getLag, info.userList, config);
var $rightside = $bar.find('.' + Toolbar.constants.rightside);
var $userBlock = $bar.find('.' + Toolbar.constants.username);
var $editShare = $bar.find('.' + Toolbar.constants.editShare);
var $viewShare = $bar.find('.' + Toolbar.constants.viewShare);
var editHash;
var viewHash = Cryptpad.getViewHashFromKeys(info.channel, secret.keys);
if (!readOnly) {
editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys);
}
/* add a "change username" button */
getLastName(function (err, lastName) {
var usernameCb = function (newName) {
setName (newName);
};
var $username = Cryptpad.createButton('username', false, {lastName: lastName}, usernameCb);
$userBlock.append($username).hide();
});
/* add an export button */
var $export = Cryptpad.createButton('export', true, {}, exportText);
$rightside.append($export);
if (!readOnly) {
/* add an import button */
var $import = Cryptpad.createButton('import', true, {}, importText);
$rightside.append($import);
/* add a rename button */
var renameCb = function (err, title) {
if (err) { return; }
APP.title = title;
setTabTitle();
onLocal();
};
var $setTitle = Cryptpad.createButton('rename', true, {suggestName: suggestName}, renameCb);
$rightside.append($setTitle);
}
/* add a forget button */
var forgetCb = function (err, title) {
if (err) { return; }
APP.title = title;
setTabTitle();
};
var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb);
$rightside.append($forgetPad);
if (!readOnly) {
$editShare.append(Cryptpad.createButton('editshare', false, {editHash: editHash}));
}
if (viewHash) {
/* add a 'links' button */
$viewShare.append(Cryptpad.createButton('viewshare', false, {viewHash: viewHash + '/present'}));
if (!readOnly) {
$viewShare.append(Cryptpad.createButton('viewopen', false, {viewHash: viewHash + '/present'}));
}
}
var $present = Cryptpad.createButton('present', true)
.click(function () {
enterPresentationMode(true);
});
if (presentMode) {
$present.hide();
}
$rightside.append($present);
var $leavePresent = Cryptpad.createButton('source', true)
.click(leavePresentationMode);
if (!presentMode) {
$leavePresent.hide();
}
$rightside.append($leavePresent);
var configureTheme = function () {
/*var $language = $('<span>', {
'style': "margin-right: 10px;",
'class': 'rightside-element'
}).text("Markdown");
$rightside.append($language);*/
/* Remember the user's last choice of theme using localStorage */
var themeKey = 'CRYPTPAD_CODE_THEME';
var lastTheme = localStorage.getItem(themeKey) || 'default';
/* Let the user select different themes */
var $themeDropdown = $('<select>', {
title: 'color theme',
id: 'display-theme',
'class': 'rightside-element'
});
Themes.forEach(function (o) {
$themeDropdown.append($('<option>', {
selected: o.name === lastTheme,
}).val(o.name).text(o.name));
});
$rightside.append($themeDropdown);
var $theme = $bar.find('select#display-theme');
setTheme(lastTheme, $theme);
$theme.on('change', function () {
var theme = $theme.val();
console.log("Setting theme to %s", theme);
setTheme(theme, $theme);
// remember user choices
localStorage.setItem(themeKey, theme);
});
};
var configureColors = function () {
var $back = $('<button>', {
id: SLIDE_BACKCOLOR_ID,
'class': 'fa fa-square rightside-button',
'style': 'font-family: FontAwesome; color: #000;',
title: Messages.backgroundButton + '\n' + Messages.backgroundButtonTitle
});
var $text = $('<button>', {
id: SLIDE_COLOR_ID,
'class': 'fa fa-i-cursor rightside-button',
'style': 'font-family: FontAwesome; font-weight: bold; color: #fff; background: #000;',
title: Messages.colorButton + '\n' + Messages.colorButtonTitle
});
var $testColor = $('<input>', { type: 'color', value: '!' });
var $check = $pad.contents().find("#colorPicker_check");
if ($testColor.attr('type') !== "color" || $testColor.val() === '!') { return; } // TODO
$back.on('click', function() {
var $picker = $('<input>', { type: 'color', value: backColor })
.on('change', function() {
updateColors(undefined, this.value);
onLocal();
});
$check.append($picker);
setTimeout(function() {
$picker.click();
}, 0);
});
$text.on('click', function() {
var $picker = $('<input>', { type: 'color', value: textColor })
.on('change', function() {
updateColors(this.value, undefined);
onLocal();
$check.html('');
});
$check.append($picker);
setTimeout(function() {
$picker.click();
}, 0);
});
$rightside.append($back).append($text);
};
configureColors();
configureTheme();
if (presentMode) {
$('#top-bar').hide();
}
// set the hash
if (!window.location.hash || window.location.hash === '#') {
window.location.hash = editHash;
}
Cryptpad.getPadTitle(function (err, title) {
if (err) {
console.log("Unable to get pad title");
console.error(err);
return;
}
document.title = APP.title = title || info.channel.slice(0, 8);
Cryptpad.setPadTitle(title, function (err, data) {
if (err) {
console.log("Unable to set pad title");
console.error(err);
return;
}
});
});
};
var unnotify = module.unnotify = function () {
if (module.tabNotification &&
typeof(module.tabNotification.cancel) === 'function') {

21
www/slide/slide.js
View File

@ -18,13 +18,6 @@ define([
var $modal;
var $content;
var $pad;
Slide.setModal = function ($m, $c, $p, iframe) {
$modal = Slide.$modal = $m;
$content = Slide.$content = $c;
$pad = Slide.$pad = $p;
ifrw = Slide.ifrw = iframe;
addEvent();
};
Slide.onChange = function (f) {
if (typeof(f) === 'function') {
@ -135,6 +128,7 @@ define([
$pad.contents().find('.cryptpad-present-button').hide();
$pad.contents().find('.cryptpad-source-button').show();
$pad.addClass('fullscreen');
$('#iframe-container').addClass('fullscreen');
$('.top-bar').hide();
return;
}
@ -143,6 +137,7 @@ define([
$pad.contents().find('.cryptpad-present-button').show();
$pad.contents().find('.cryptpad-source-button').hide();
$pad.removeClass('fullscreen');
$('#iframe-container').removeClass('fullscreen');
$('.top-bar').show();
$modal.removeClass('shown');
};
@ -174,7 +169,7 @@ define([
Slide.draw(i);
};
var first = Slide.first = function () {$
var first = Slide.first = function () {
console.log('first');
Slide.lastIndex = Slide.index;
@ -210,7 +205,7 @@ define([
break;
case 35: // end
Slide.last();
break
break;
case 27: // esc
show(false);
break;
@ -220,5 +215,13 @@ define([
});
};
Slide.setModal = function ($m, $c, $p, iframe) {
$modal = Slide.$modal = $m;
$content = Slide.$content = $c;
$pad = Slide.$pad = $p;
ifrw = Slide.ifrw = iframe;
addEvent();
};
return Slide;
});