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

Use the HTML5 color picker to change the colors in slides

Browse Source
pull/1/head
yflory 8 years ago
parent d7e170c797
commit d63c912af0
4 changed files with 128 additions and 54 deletions
Show Stats Download Patch File Download Diff File

5
customize.dist/translations/messages.fr.js
Unescape Escape View File

@ -70,6 +70,11 @@ define(function () {
out.sourceButton = 'VOIR LA SOURCE';
out.sourceButtonTitle = "Quitter le mode présentation";
out.backgroundButton = 'COULEUR DE FOND';
out.backgroundButtonTitle = 'Changer la couleur de fond de la présentation';
out.colorButton = 'COULEUR DU TEXTE';
out.colorButtonTitle = 'Changer la couleur du texte en mode présentation';
out.commitButton = 'VALIDER';
out.getViewButton = 'LECTURE SEULE';

5
customize.dist/translations/messages.js
Unescape Escape View File

@ -71,6 +71,11 @@ define(function () {
out.sourceButton = 'VIEW SOURCE';
out.sourceButtonTitle = "Leave presentation mode";
out.backgroundButton = 'BACKGROUND COLOR';
out.backgroundButtonTitle = 'Change the background color in the presentation';
out.colorButton = 'TEXT COLOR';
out.colorButtonTitle = 'Change the text color in presentation mode';
out.commitButton = 'COMMIT';
out.getViewButton = 'READ-ONLY URL';

109
www/slide/main.js
Unescape Escape View File

@ -15,7 +15,6 @@ define([
'/slide/slide.js',
'/bower_components/file-saver/FileSaver.min.js',
'/bower_components/jquery/dist/jquery.min.js',
'/common/jscolor.js',
'/customize/pad.js'
], function (Messages, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad, Modes, Themes, Visible, Notify, Slide) {
var $ = window.jQuery;
@ -29,6 +28,8 @@ define([
};
var APP = window.APP;
var SLIDE_BACKCOLOR_ID = "cryptpad-backcolor";
var SLIDE_COLOR_ID = "cryptpad-color";
Cryptpad.styleAlerts();
module.spinner.show();
@ -157,6 +158,9 @@ define([
}
};
var textColor;
var backColor;
var myData = {};
var myUserName = ''; // My "pretty name"
var myID; // My server ID
@ -188,23 +192,34 @@ define([
var initializing = true;
var stringifyInner = function (textValue) {
var obj = {
content: textValue,
metadata: {
users: userList
}
};
if (!isDefaultTitle()) {
obj.metadata.title = APP.title;
}
if (textColor) {
obj.metadata.color = textColor;
}
if (backColor) {
obj.metadata.backColor = backColor;
}
// stringify the json and send it into chainpad
return stringify(obj);
};
var onLocal = config.onLocal = function () {
if (initializing) { return; }
if (readOnly) { return; }
editor.save();
var textValue = canonicalize($textarea.val());
var obj = {content: textValue};
// append the userlist to the hyperjson structure
obj.metadata = {
users: userList
};
if (!isDefaultTitle()) {
obj.metadata.title = APP.title;
}
// stringify the json and send it into chainpad
var shjson = stringify(obj);
var textValue = canonicalize($textarea.val());
var shjson = stringifyInner(textValue);
module.patchText(shjson);
Slide.update(textValue);
@ -431,21 +446,36 @@ define([
};
var configureColors = function () {
/*var $background = $('<input>', {
id: "cryptpad-bg-color",
value: "#5367ce"
}).colorpicker();*/
console.log(jscolor);
var $background = $('<input>', {
value: 'BACKGROUND',
style: "position:absolute; top:100px; left: 50px; z-index:1000"
$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' });
if ($testColor.attr('type') !== "color") {alert('not supported'); return;}
$back.on('click', function() {
$('<input>', { type: 'color', value: backColor })
.on('change', function() {
updateColors(undefined, this.value);
onLocal();
}).click();
});
$text.on('click', function() {
$('<input>', { type: 'color', value: textColor })
.on('change', function() {
updateColors(this.value, undefined);
onLocal();
}).click();
});
var picker = new jscolor($background[0]);
$('body').append($background);
console.log($background);
// $rightside[0].appendChild($background[0]);
//console.log($pad.contents().find('#cryptpad-bg-color'));
$rightside.append($back).append($text);
};
configureTheme();
@ -494,6 +524,20 @@ define([
});
};
var updateColors = function (text, back) {
if (text) {
textColor = text;
$modal.css('color', text);
$pad.contents().find('#' + SLIDE_COLOR_ID).css('color', text);
}
if (back) {
backColor = back;
$modal.css('background-color', back);
$pad.contents().find('#' + SLIDE_COLOR_ID).css('background', back);
$pad.contents().find('#' + SLIDE_BACKCOLOR_ID).css('color', back);
}
};
var updateMetadata = function(shjson) {
// Extract the user list (metadata) from the hyperjson
var json = (shjson === "") ? "" : JSON.parse(shjson);
@ -506,6 +550,7 @@ define([
if (json.metadata.title) {
updateTitle(json.metadata.title);
}
updateColors(json.metadata.color, json.metadata.backColor);
}
};
@ -662,18 +707,8 @@ define([
editor.scrollTo(scroll.left, scroll.top);
if (!readOnly) {
var localDoc = canonicalize($textarea.val());
var hjson2 = {
content: localDoc,
metadata: {
users: userList
},
highlightMode: highlightMode,
};
if (!isDefaultTitle()) {
hjson2.metadata.title = APP.title;
}
var shjson2 = stringify(hjson2);
var textValue = canonicalize($textarea.val());
var shjson2 = stringifyInner(textValue);
if (shjson2 !== shjson) {
console.error("shjson2 !== shjson");
TextPatcher.log(shjson, TextPatcher.diff(shjson, shjson2));

63
www/slide/slide.js
Unescape Escape View File

@ -23,6 +23,7 @@ define([
$content = Slide.$content = $c;
$pad = Slide.$pad = $p;
ifrw = Slide.ifrw = iframe;
addEvent();
};
Slide.onChange = function (f) {
@ -173,23 +174,51 @@ define([
Slide.draw(i);
};
$(ifrw).on('keyup', function (e) {
if (!Slide.shown) { return; }
switch(e.which) {
case 37:
Slide.left();
break;
case 32:
case 39: // right
Slide.right();
break;
case 27: // esc
show(false);
break;
default:
console.log(e.which);
}
});
var first = Slide.first = function () {$
console.log('first');
Slide.lastIndex = Slide.index;
var i = Slide.index = 0;
Slide.draw(i);
};
var last = Slide.last = function () {
console.log('end');
Slide.lastIndex = Slide.index;
var i = Slide.index = Slide.content.length - 1;
Slide.draw(i);
};
var addEvent = function () {
$(ifrw).on('keyup', function (e) {
if (!Slide.shown) { return; }
switch(e.which) {
case 33: // pageup
case 38: // up
case 37: // left
Slide.left();
break;
case 34: // pagedown
case 32: // space
case 40: // down
case 39: // right
Slide.right();
break;
case 36: // home
Slide.first();
break;
case 35: // end
Slide.last();
break
case 27: // esc
show(false);
break;
default:
console.log(e.which);
}
});
};
return Slide;
});

Write Preview
Loading…
Cancel
Save