From 84d8615cf19603c9ad93a17c083b35793249ec0e Mon Sep 17 00:00:00 2001 From: yflory Date: Fri, 7 Apr 2017 18:20:03 +0200 Subject: [PATCH 1/7] Save and use templates in pad, code and slides --- customize.dist/translations/messages.fr.js | 5 ++ customize.dist/translations/messages.js | 5 ++ www/code/main.js | 19 ++++- www/common/cryptpad-common.js | 80 +++++++++++++++++++++- www/common/fileObject.js | 5 +- www/drive/main.js | 2 +- www/pad/main.js | 15 +++- www/slide/main.js | 20 +++++- 8 files changed, 145 insertions(+), 6 deletions(-) diff --git a/customize.dist/translations/messages.fr.js b/customize.dist/translations/messages.fr.js index edc717b57..431fb16ae 100644 --- a/customize.dist/translations/messages.fr.js +++ b/customize.dist/translations/messages.fr.js @@ -75,6 +75,11 @@ define(function () { out.newButton = 'Nouveau'; out.newButtonTitle = 'Créer un nouveau pad'; + out.saveTemplateButton = "Sauver en tant que modèle"; + out.saveTemplatePrompt = "Choisir un titre pour ce modèle"; + out.templateSaved = "Modèle enregistré !"; + out.selectTemplate = "Sélectionner un modèle ou appuyer sur Échap"; + out.presentButtonTitle = "Entrer en mode présentation"; out.presentSuccess = 'Appuyer sur Échap pour quitter le mode présentation'; diff --git a/customize.dist/translations/messages.js b/customize.dist/translations/messages.js index 2af12e044..46691b090 100644 --- a/customize.dist/translations/messages.js +++ b/customize.dist/translations/messages.js @@ -77,6 +77,11 @@ define(function () { out.newButton = 'New'; out.newButtonTitle = 'Create a new pad'; + out.saveTemplateButton = "Save as template"; + out.saveTemplatePrompt = "Choose a title for the template"; + out.templateSaved = "Template saved!"; + out.selectTemplate = "Select a template or press escape"; + out.presentButtonTitle = "Enter presentation mode"; out.presentSuccess = 'Hit ESC to exit presentation mode'; diff --git a/www/code/main.js b/www/code/main.js index 8127cb566..227c1e1fa 100644 --- a/www/code/main.js +++ b/www/code/main.js @@ -7,13 +7,14 @@ define([ 'json.sortify', '/bower_components/chainpad-json-validator/json-ot.js', '/common/cryptpad-common.js', + '/common/cryptget.js', '/common/modes.js', '/common/themes.js', '/common/visible.js', '/common/notify.js', '/bower_components/file-saver/FileSaver.min.js', '/bower_components/jquery/dist/jquery.min.js', -], function (Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad, Modes, Themes, Visible, Notify) { +], function (Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad, Cryptget, Modes, Themes, Visible, Notify) { var $ = window.jQuery; var saveAs = window.saveAs; var Messages = Cryptpad.Messages; @@ -401,6 +402,17 @@ define([ editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys); } + /* save as template */ + if (!Cryptpad.isTemplate(window.location.href)) { + var templateObj = { + rt: info.realtime, + Crypt: Cryptget, + getTitle: function () { return document.title; } + }; + var $templateButton = Cryptpad.createButton('template', true, templateObj); + $rightside.append($templateButton); + } + /* add an export button */ var $export = Cryptpad.createButton('export', true, {}, exportText); $rightside.append($export); @@ -532,6 +544,8 @@ define([ var userDoc = module.realtime.getUserDoc(); + var isNew = false; + if (userDoc === "" || userDoc === "{}") { isNew = true; } var newDoc = ""; if(userDoc !== "") { @@ -599,6 +613,9 @@ define([ onLocal(); module.$userNameButton.click(); } + if (isNew) { + Cryptpad.selectTemplate('code', info.realtime, Cryptget); + } }); }; diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 2e3e1c12c..2f5755ce3 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -505,7 +505,7 @@ define([ }; var makePad = function (href, title) { - var now = ''+new Date(); + var now = +new Date(); return { href: href, atime: now, @@ -564,6 +564,37 @@ define([ getStore().addTemplate(href); }; + var isTemplate = common.isTemplate = function (href) { + var rhref = getRelativeHref(href); + var templates = listTemplates(); + return templates.some(function (t) { + return t.href === rhref; + }); + }; + var selectTemplate = common.selectTemplate = function (type, rt, Crypt) { + var $content = $('
'); + $('').text(Messages.selectTemplate).appendTo($content); + $('

', {id:"selectTemplate"}).appendTo($content); + Cryptpad.alert($content.html(), null, true); + var $p = $('#selectTemplate'); + listTemplates(type).forEach(function (t) { + $('', {href: t.href, title: t.title}).text(t.title).click(function (e) { + e.preventDefault(); + var parsed = parsePadUrl(t.href); + if(!parsed) { throw new Error("Cannot get template hash"); } + common.addLoadingScreen(null, true); + Crypt.get(parsed.hash, function (err, val) { + if (err) { throw new Error(err); } + var p = parsePadUrl(window.location.href); + Crypt.put(p.hash, val, function (e) { + common.findOKButton().click(); + common.removeLoadingScreen(); + }); + }); + }).appendTo($p); + }); + common.findOKButton().text(Messages.cancelButton); + }; // STORAGE /* fetch and migrate your pad history from localStorage */ @@ -1069,6 +1100,53 @@ define([ })); } break; + case 'template': + button = $(' +

diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js index e9f9ff9df..8b4c3311b 100644 --- a/www/whiteboard/main.js +++ b/www/whiteboard/main.js @@ -47,6 +47,7 @@ define([ var $pickers = $('#pickers'); var $colors = $('#colors'); var $cursors = $('#cursors'); + var $deleteButton = $('#delete'); var $toggle = $('#toggleDraw'); var $width = $('#width'); @@ -151,23 +152,27 @@ define([ module.draw = !module.draw; canvas.isDrawingMode = module.draw; $toggle.text(module.draw ? Messages.canvas_disable : Messages.canvas_enable); + if (module.draw) { $deleteButton.hide(); } + else { $deleteButton.show(); } }; $toggle.click(toggleDrawMode); - $(window).on('keyup', function (e) { - if (e.which === 46) { - if (canvas.getActiveObject()) { - canvas.getActiveObject().remove(); - } - if (canvas.getActiveGroup()) { - canvas.getActiveGroup()._objects.forEach(function (el) { - el.remove(); - }); - canvas.discardActiveGroup(); - } - canvas.renderAll(); - onLocal(); + var deleteSelection = function () { + if (canvas.getActiveObject()) { + canvas.getActiveObject().remove(); } + if (canvas.getActiveGroup()) { + canvas.getActiveGroup()._objects.forEach(function (el) { + el.remove(); + }); + canvas.discardActiveGroup(); + } + canvas.renderAll(); + onLocal(); + }; + $deleteButton.click(deleteSelection); + $(window).on('keyup', function (e) { + if (e.which === 46) { deleteSelection (); } }); var setEditable = function (bool) { diff --git a/www/whiteboard/whiteboard.css b/www/whiteboard/whiteboard.css index 5fe1b6841..93dc14f5c 100644 --- a/www/whiteboard/whiteboard.css +++ b/www/whiteboard/whiteboard.css @@ -38,6 +38,7 @@ body { vertical-align: middle; } #controls #clear, +#controls #delete, #controls #toggleDraw { display: inline; vertical-align: middle; diff --git a/www/whiteboard/whiteboard.less b/www/whiteboard/whiteboard.less index 75c979456..0b13c07bf 100644 --- a/www/whiteboard/whiteboard.less +++ b/www/whiteboard/whiteboard.less @@ -45,7 +45,7 @@ body { #width { .middle; } - #clear, #toggleDraw { + #clear, #delete, #toggleDraw { display: inline; vertical-align: middle; } From bd16e0f0e7022dd94184f5e7fa7e8613af9cbd69 Mon Sep 17 00:00:00 2001 From: yflory Date: Mon, 10 Apr 2017 14:19:15 +0200 Subject: [PATCH 5/7] Templates in polls and canvas, and ability to disable templates --- customize.dist/application_config.js | 1 + www/common/cryptpad-common.js | 13 ++++++++++--- www/drive/main.js | 3 ++- www/poll/main.js | 22 +++++++++++++++++++++- www/whiteboard/main.js | 21 ++++++++++++++++++++- 5 files changed, 54 insertions(+), 6 deletions(-) diff --git a/customize.dist/application_config.js b/customize.dist/application_config.js index 63cc96f18..cb5fdb91b 100644 --- a/customize.dist/application_config.js +++ b/customize.dist/application_config.js @@ -30,6 +30,7 @@ define(function() { '#FF00C0', // hot pink '#800080', // purple ]; + config.enableTemplates = true; return config; }); diff --git a/www/common/cryptpad-common.js b/www/common/cryptpad-common.js index 2f5755ce3..e7dbc02dc 100644 --- a/www/common/cryptpad-common.js +++ b/www/common/cryptpad-common.js @@ -572,12 +572,15 @@ define([ }); }; var selectTemplate = common.selectTemplate = function (type, rt, Crypt) { + if (!AppConfig.enableTemplates) { return; } + var temps = listTemplates(type); + if (temps.length === 0) { return; } var $content = $('
'); $('').text(Messages.selectTemplate).appendTo($content); $('

', {id:"selectTemplate"}).appendTo($content); Cryptpad.alert($content.html(), null, true); var $p = $('#selectTemplate'); - listTemplates(type).forEach(function (t) { + temps.forEach(function (t, i) { $('', {href: t.href, title: t.title}).text(t.title).click(function (e) { e.preventDefault(); var parsed = parsePadUrl(t.href); @@ -592,6 +595,7 @@ define([ }); }); }).appendTo($p); + if (i !== temps.length) { $('
').appendTo($p); } }); common.findOKButton().text(Messages.cancelButton); }; @@ -1101,6 +1105,7 @@ define([ } break; case 'template': + if (!AppConfig.enableTemplates) { return; } button = $(' - + +

 
diff --git a/www/whiteboard/main.js b/www/whiteboard/main.js index b79dd0f24..d5523104c 100644 --- a/www/whiteboard/main.js +++ b/www/whiteboard/main.js @@ -12,13 +12,14 @@ define([ '/bower_components/chainpad-json-validator/json-ot.js', '/common/cryptpad-common.js', '/common/cryptget.js', + '/whiteboard/colors.js', '/common/visible.js', '/common/notify.js', '/customize/application_config.js', '/bower_components/secure-fabric.js/dist/fabric.min.js', '/bower_components/jquery/dist/jquery.min.js', '/bower_components/file-saver/FileSaver.min.js', -], function (Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Visible, Notify, AppConfig) { +], function (Config, Realtime, Crypto, Toolbar, TextPatcher, JSONSortify, JsonOT, Cryptpad, Cryptget, Colors, Visible, Notify, AppConfig) { var saveAs = window.saveAs; var Messages = Cryptpad.Messages; @@ -50,14 +51,21 @@ define([ var $cursors = $('#cursors'); var $deleteButton = $('#delete'); + var brush = { + color: '#000000', + opacity: 1 + }; + var $toggle = $('#toggleDraw'); var $width = $('#width'); var $widthLabel = $('label[for="width"]'); - + var $opacity = $('#opacity'); + var $opacityLabel = $('label[for="opacity"]'); +window.canvas = canvas; var createCursor = function () { var w = canvas.freeDrawingBrush.width; var c = canvas.freeDrawingBrush.color; - var size = w > 30 ? w : w+30; + var size = w > 30 ? w+2 : w+32; $cursors.html(''); var $ccanvas = $cursors.find('canvas'); var ccanvas = $ccanvas[0]; @@ -71,7 +79,9 @@ define([ ctx.arc(centerX, centerY, radius, 0, 2 * Math.PI, false); ctx.fillStyle = c; ctx.fill(); - ctx.lineWidth = 0; + ctx.lineWidth = 1; + ctx.strokeStyle = brush.color; + ctx.stroke(); ctx.beginPath(); ctx.moveTo(size/2, 0); ctx.lineTo(size/2, 10); @@ -81,9 +91,6 @@ define([ ctx.strokeStyle = '#000000'; ctx.stroke(); - //context.lineWidth = w/2; - //context.strokeStyle = '#000000'; - //context.stroke(); var img = ccanvas.toDataURL("image/png"); var $img = $('', { @@ -104,6 +111,17 @@ define([ $width.on('change', updateBrushWidth); + var updateBrushOpacity = function () { + var val = $opacity.val(); + brush.opacity = Number(val); + canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity); + $opacityLabel.text(val); + createCursor(); + }; + updateBrushOpacity(); + + $opacity.on('change', updateBrushOpacity); + var pickColor = function (current, cb) { var $picker = $('', { type: 'color', @@ -122,21 +140,15 @@ define([ }; var setColor = function (c) { - canvas.freeDrawingBrush.color = c; + c = Colors.rgb2hex(c); + brush.color = c; + canvas.freeDrawingBrush.color = Colors.hex2rgba(brush.color, brush.opacity); module.$color.css({ 'color': c, }); createCursor(); }; - var rgb2hex = function (rgb) { - if (rgb.indexOf('#') === 0) { return rgb; } - rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/); - var hex = function (x) { - return ("0" + parseInt(x).toString(16)).slice(-2); - }; - return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]); - }; var palette = AppConfig.whiteboardPalette || [ 'red', 'blue', 'green', 'white', 'black', 'purple', @@ -255,12 +267,12 @@ define([ 'background-color': color, }) .click(function () { - var c = rgb2hex($color.css('background-color')); + var c = Colors.rgb2hex($color.css('background-color')); setColor(c); }) .on('dblclick', function (e) { e.preventDefault(); - pickColor(rgb2hex($color.css('background-color')), function (c) { + pickColor(Colors.rgb2hex($color.css('background-color')), function (c) { $color.css({ 'background-color': c, }); diff --git a/www/whiteboard/whiteboard.css b/www/whiteboard/whiteboard.css index 93dc14f5c..a0619360b 100644 --- a/www/whiteboard/whiteboard.css +++ b/www/whiteboard/whiteboard.css @@ -33,7 +33,8 @@ body { line-height: 100px; padding-bottom: 5px; } -#controls #width { +#controls #width, +#controls #opacity { position: relative; vertical-align: middle; } diff --git a/www/whiteboard/whiteboard.less b/www/whiteboard/whiteboard.less index 0b13c07bf..81c7e0bfe 100644 --- a/www/whiteboard/whiteboard.less +++ b/www/whiteboard/whiteboard.less @@ -42,7 +42,7 @@ body { line-height: 100px; padding-bottom: 5px; - #width { + #width, #opacity { .middle; } #clear, #delete, #toggleDraw {