diff --git a/customize.dist/src/less2/include/colortheme-dark.less b/customize.dist/src/less2/include/colortheme-dark.less index ac04aaa25..3207109be 100644 --- a/customize.dist/src/less2/include/colortheme-dark.less +++ b/customize.dist/src/less2/include/colortheme-dark.less @@ -31,6 +31,7 @@ doc: #5170B5; presentation: #C65D27; file: #CD2532; + webxdc: #964B00; } @colortheme_static_apps: { diff --git a/customize.dist/src/less2/include/colortheme.less b/customize.dist/src/less2/include/colortheme.less index 8c2759445..4f0d52e6d 100644 --- a/customize.dist/src/less2/include/colortheme.less +++ b/customize.dist/src/less2/include/colortheme.less @@ -31,6 +31,7 @@ doc: #5170B5; presentation: #C65D27; file: #CD2532; + webxdc: #964B00; } @colortheme_static_apps: { diff --git a/src/messages.js b/src/messages.js index 9fa89ea01..58378c9ed 100644 --- a/src/messages.js +++ b/src/messages.js @@ -17,3 +17,5 @@ if (typeof(module) !== 'undefined' && module.exports) { } })(); + +Messages.type.webxdc= "webxdc (chess)"; //XXX diff --git a/www/common/application_config_internal.js b/www/common/application_config_internal.js index f12708536..7a413fc6a 100644 --- a/www/common/application_config_internal.js +++ b/www/common/application_config_internal.js @@ -17,7 +17,7 @@ const factory = () => { * You should never remove the drive from this list. */ AppConfig.availablePadTypes = ['drive', 'teams', 'sheet', 'doc', 'presentation', 'pad', 'kanban', 'code', 'form', 'poll', 'whiteboard', - 'file', 'contacts', 'slide', 'convert', 'diagram']; + 'file', 'contacts', 'slide', 'convert', 'diagram', 'webxdc']; /* The registered only types are apps restricted to registered users. * You should never remove apps from this list unless you know what you're doing. The apps @@ -219,7 +219,8 @@ const factory = () => { moderation: 'fa-ambulance', profile: 'fa-user-circle', support: 'fa-life-ring', - accounts: 'fa-ticket' + accounts: 'fa-ticket', + webxdc: 'fa-chess' }; // Ability to create owned pads and expiring pads through a new pad creation screen. diff --git a/www/webxdc/app-webxdc.less b/www/webxdc/app-webxdc.less new file mode 100644 index 000000000..c1ad7f0c6 --- /dev/null +++ b/www/webxdc/app-webxdc.less @@ -0,0 +1,35 @@ +/* + * SPDX-FileCopyrightText: 2023 XWiki CryptPad Team and contributors + * + * SPDX-License-Identifier: AGPL-3.0-or-later + */ + +@import (reference) "../../customize/src/less2/include/framework.less"; +@import (reference) "../../customize/src/less2/include/tools.less"; +@import (reference) "../../customize/src/less2/include/avatar.less"; + +// body +&.cp-app-webxdc { + .framework_main( + @bg-color: @colortheme_apps[webxdc], + ); + + display: flex; + flex-flow: column; + max-height: 100%; + min-height: auto; + color: @cp_app-fg; + background-color: @cp_app-bg; + + #cp-app-webxdc-editor { + display: flex; + + #cp-webxdc-content { + flex: 1; + textarea { + height: 300px; + width: 800px; + } + } + } +} diff --git a/www/webxdc/index.html b/www/webxdc/index.html new file mode 100644 index 000000000..93b2d794b --- /dev/null +++ b/www/webxdc/index.html @@ -0,0 +1,29 @@ + + + + + + CryptPad + + + + + + + + + + + + + diff --git a/www/webxdc/inner.html b/www/webxdc/inner.html new file mode 100644 index 000000000..3bbf3e620 --- /dev/null +++ b/www/webxdc/inner.html @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + +
+
+ + + diff --git a/www/webxdc/inner.js b/www/webxdc/inner.js new file mode 100644 index 000000000..bf12192ae --- /dev/null +++ b/www/webxdc/inner.js @@ -0,0 +1,84 @@ +// SPDX-FileCopyrightText: 2023 XWiki CryptPad Team and contributors +// +// SPDX-License-Identifier: AGPL-3.0-or-later + +// This is the initialization loading the CryptPad libraries +define([ + 'jquery', + '/common/sframe-app-framework.js', + '/customize/messages.js', // translation keys + '/common/hyperscript.js', + 'less!/webxdc/app-webxdc.less' + /* Here you can add your own javascript or css to load */ +], function ( + $, + Framework, + Messages, + h, + ) { + + + // This is the main initialization loop + let onFrameworkReady = function (framework) { + let $container = $('#cp-app-webxdc-editor'); + + let $content = $(h('div#cp-webxdc-content')).appendTo($container); + let $textarea = $(h('textarea')); + $content.append($textarea); + let oldVal = ''; + $textarea.on('change keyup paste', function () { + var currentVal = $textarea.val(); + if (currentVal === oldVal) { return; } // Nothing to do + oldVal = currentVal; + framework.localChange(); + }); + let getContent = () => { + return $textarea.val(); + }; + let setContent = (value) => { + return $textarea.val(value); + }; + + let content = {}; + + // OPTIONAL: cursor management + framework.setCursorGetter(() => { + let myCursor = {}; + // Get your cursor position here + return myCursor; + }); + framework.onCursorUpdate(data => { + console.log("Other user cursor", data); + }); + + framework.onContentUpdate(function (newContent) { + console.log('New content received from others', newContent.content); + content = newContent.content; + setContent(content); + }); + + framework.setContentGetter(function () { + let content = getContent(); + console.log('Sync my content with others', content); + return { + content: content + }; + }); + + framework.onReady(function () { + // Document is ready, you can initialize your app + console.log('Document is ready:', content); + }); + + // Start the framework + framework.start(); + }; + + // Framework initialization + Framework.create({ + toolbarContainer: '#cme_toolbox', + contentContainer: '#cp-app-webxdc-editor' + }, function (framework) { + onFrameworkReady(framework); + }); +});