define([ 'jquery', '/bower_components/chainpad-crypto/crypto.js', '/bower_components/chainpad-netflux/chainpad-netflux.js', '/bower_components/textpatcher/TextPatcher.js', '/common/toolbar2.js', 'json.sortify', '/bower_components/chainpad-json-validator/json-ot.js', '/common/cryptpad-common.js', '/common/cryptget.js', '/common/diffMarked.js', 'css!/bower_components/components-font-awesome/css/font-awesome.min.css', 'less!/customize/src/less/cryptpad.less' ], function ($, Crypto, Realtime, TextPatcher, Toolbar, JSONSortify, JsonOT, Cryptpad, Cryptget, DiffMd) { var Messages = Cryptpad.Messages; var APP = window.APP = { Cryptpad: Cryptpad, }; $(function () { Cryptpad.addLoadingScreen(); var ifrw = APP.ifrw = $('#pad-iframe')[0].contentWindow; var stringify = function (obj) { return JSONSortify(obj); }; var toolbar; var editor; var secret = Cryptpad.getSecrets(); var readOnly = secret.keys && !secret.keys.editKeyStr; if (!secret.keys) { secret.keys = secret.key; } var onConnectError = function () { Cryptpad.errorLoadingScreen(Messages.websocketError); }; var andThen = function (CMeditor) { var $iframe = $('#pad-iframe').contents(); var $contentContainer = $iframe.find('#editorContainer'); var $previewContainer = $iframe.find('#previewContainer'); var $preview = $iframe.find('#preview'); $preview.click(function (e) { if (!e.target) { return; } var $t = $(e.target); if ($t.is('a') || $t.parents('a').length) { e.preventDefault(); var $a = $t.is('a') ? $t : $t.parents('a').first(); var href = $a.attr('href'); window.open(href); } }); var CodeMirror = Cryptpad.createCodemirror(ifrw, Cryptpad, null, CMeditor); $iframe.find('.CodeMirror').addClass('fullPage'); editor = CodeMirror.editor; var setIndentation = APP.setIndentation = function (units, useTabs) { if (typeof(units) !== 'number') { return; } editor.setOption('indentUnit', units); editor.setOption('tabSize', units); editor.setOption('indentWithTabs', useTabs); }; var indentKey = 'cryptpad.indentUnit'; var useTabsKey = 'cryptpad.indentWithTabs'; var proxy = Cryptpad.getProxy(); var updateIndentSettings = APP.updateIndentSettings = function () { var indentUnit = proxy[indentKey]; var useTabs = proxy[useTabsKey]; setIndentation( typeof(indentUnit) === 'number'? indentUnit: 2, typeof(useTabs) === 'boolean'? useTabs: false); }; proxy.on('change', [indentKey], updateIndentSettings); proxy.on('change', [useTabsKey], updateIndentSettings); var $bar = $('#pad-iframe')[0].contentWindow.$('#cme_toolbox'); var isHistoryMode = false; var setEditable = APP.setEditable = function (bool) { if (readOnly && bool) { return; } editor.setOption('readOnly', !bool); }; var Title; var UserList; var Metadata; var config = { initialState: '{}', websocketURL: Cryptpad.getWebsocketURL(), channel: secret.channel, // our public key validateKey: secret.keys.validateKey || undefined, readOnly: readOnly, crypto: Crypto.createEncryptor(secret.keys), network: Cryptpad.getNetwork(), transformFunction: JsonOT.validate, }; var canonicalize = function (t) { return t.replace(/\r\n/g, '\n'); }; var setHistory = function (bool, update) { isHistoryMode = bool; setEditable(!bool); if (!bool && update) { config.onRemote(); } }; var initializing = true; var stringifyInner = function (textValue) { var obj = { content: textValue, metadata: { users: UserList.userData, defaultTitle: Title.defaultTitle } }; if (!initializing) { obj.metadata.title = Title.title; } // set mode too... obj.highlightMode = CodeMirror.highlightMode; // stringify the json and send it into chainpad return stringify(obj); }; var forceDrawPreview = function () { try { DiffMd.apply(DiffMd.render(editor.getValue()), $preview); } catch (e) { console.error(e); } }; var drawPreview = Cryptpad.throttle(function () { if (CodeMirror.highlightMode !== 'markdown') { return; } if (!$previewContainer.is(':visible')) { return; } forceDrawPreview(); }, 150); var onLocal = config.onLocal = function () { if (initializing) { return; } if (isHistoryMode) { return; } if (readOnly) { return; } editor.save(); drawPreview(); var textValue = canonicalize(CodeMirror.$textarea.val()); var shjson = stringifyInner(textValue); APP.patchText(shjson); if (APP.realtime.getUserDoc() !== shjson) { console.error("realtime.getUserDoc() !== shjson"); } }; var mediaTagModes = [ 'markdown', 'html', 'htmlembedded', 'htmlmixed', 'index.html', 'php', 'velocity', 'xml', ]; var onModeChanged = function (mode) { var $codeMirror = $iframe.find('.CodeMirror'); window.clearTimeout(APP.previewTo); $codeMirror.addClass('transition'); APP.previewTo = window.setTimeout(function () { $codeMirror.removeClass('transition'); }, 500); if (mediaTagModes.indexOf(mode) !== -1) { APP.$mediaTagButton.show(); } else { APP.$mediaTagButton.hide(); } if (mode === "markdown") { APP.$previewButton.show(); Cryptpad.getPadAttribute('previewMode', function (e, data) { if (e) { return void console.error(e); } if (data !== false) { $previewContainer.show(); APP.$previewButton.addClass('active'); $codeMirror.removeClass('fullPage'); } }); return; } APP.$previewButton.hide(); $previewContainer.hide(); APP.$previewButton.removeClass('active'); $codeMirror.addClass('fullPage'); if (typeof(APP.updateIndentSettings) === 'function') { APP.updateIndentSettings(); } }; config.onInit = function (info) { UserList = Cryptpad.createUserList(info, config.onLocal, Cryptget, Cryptpad); var titleCfg = { getHeadingText: CodeMirror.getHeadingText }; Title = Cryptpad.createTitle(titleCfg, config.onLocal, Cryptpad); Metadata = Cryptpad.createMetadata(UserList, Title, null, Cryptpad); var configTb = { displayed: ['title', 'useradmin', 'spinner', 'lag', 'state', 'share', 'userlist', 'newpad', 'limit', 'upgrade'], userList: UserList.getToolbarConfig(), share: { secret: secret, channel: info.channel }, title: Title.getTitleConfig(), common: Cryptpad, readOnly: readOnly, ifrw: ifrw, realtime: info.realtime, network: info.network, $container: $bar, $contentContainer: $contentContainer }; toolbar = APP.toolbar = Toolbar.create(configTb); Title.setToolbar(toolbar); CodeMirror.init(config.onLocal, Title, toolbar); var $rightside = toolbar.$rightside; var $drawer = toolbar.$drawer; var editHash; if (!readOnly) { editHash = Cryptpad.getEditHashFromKeys(info.channel, secret.keys); } /* add a history button */ var histConfig = { onLocal: config.onLocal, onRemote: config.onRemote, setHistory: setHistory, applyVal: function (val) { var remoteDoc = JSON.parse(val || '{}').content; editor.setValue(remoteDoc || ''); editor.save(); }, $toolbar: $bar }; var $hist = Cryptpad.createButton('history', true, {histConfig: histConfig}); $drawer.append($hist); /* save as template */ if (!Cryptpad.isTemplate(window.location.href)) { var templateObj = { rt: info.realtime, Crypt: Cryptget, getTitle: Title.getTitle }; var $templateButton = Cryptpad.createButton('template', true, templateObj); $rightside.append($templateButton); } /* add an export button */ var $export = Cryptpad.createButton('export', true, {}, CodeMirror.exportText); $drawer.append($export); if (!readOnly) { /* add an import button */ var $import = Cryptpad.createButton('import', true, {}, CodeMirror.importText); $drawer.append($import); } /* add a forget button */ var forgetCb = function (err) { if (err) { return; } setEditable(false); }; var $forgetPad = Cryptpad.createButton('forget', true, {}, forgetCb); $rightside.append($forgetPad); var fileDialogCfg = { $body: $iframe.find('body'), onSelect: function (href) { var parsed = Cryptpad.parsePadUrl(href); var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel); var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName; var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>'; editor.replaceSelection(mt); }, data: APP }; APP.$mediaTagButton = $('<button>', { title: Messages.filePickerButton, 'class': 'rightside-button fa fa-picture-o', style: 'font-size: 17px' }).click(function () { Cryptpad.createFileDialog(fileDialogCfg); }).appendTo($rightside); var $previewButton = APP.$previewButton = Cryptpad.createButton(null, true); $previewButton.removeClass('fa-question').addClass('fa-eye'); $previewButton.attr('title', Messages.previewButtonTitle); $previewButton.click(function () { var $codeMirror = $iframe.find('.CodeMirror'); window.clearTimeout(APP.previewTo); $codeMirror.addClass('transition'); APP.previewTo = window.setTimeout(function () { $codeMirror.removeClass('transition'); }, 500); if (CodeMirror.highlightMode !== 'markdown') { $previewContainer.show(); } $previewContainer.toggle(); if ($previewContainer.is(':visible')) { forceDrawPreview(); $codeMirror.removeClass('fullPage'); Cryptpad.setPadAttribute('previewMode', true, function (e) { if (e) { return console.log(e); } }); $previewButton.addClass('active'); } else { $codeMirror.addClass('fullPage'); $previewButton.removeClass('active'); Cryptpad.setPadAttribute('previewMode', false, function (e) { if (e) { return console.log(e); } }); } }); $rightside.append($previewButton); if (!readOnly) { CodeMirror.configureTheme(function () { CodeMirror.configureLanguage(null, onModeChanged); }); } else { CodeMirror.configureTheme(); } // set the hash if (!readOnly) { Cryptpad.replaceHash(editHash); } }; config.onReady = function (info) { if (APP.realtime !== info.realtime) { var realtime = APP.realtime = info.realtime; APP.patchText = TextPatcher.create({ realtime: realtime, //logging: true }); } var userDoc = APP.realtime.getUserDoc(); var isNew = false; if (userDoc === "" || userDoc === "{}") { isNew = true; } var newDoc = ""; if(userDoc !== "") { var hjson = JSON.parse(userDoc); if (typeof (hjson) !== 'object' || Array.isArray(hjson) || (typeof(hjson.type) !== 'undefined' && hjson.type !== 'code')) { var errorText = Messages.typeError; Cryptpad.errorLoadingScreen(errorText); throw new Error(errorText); } newDoc = hjson.content; if (hjson.highlightMode) { CodeMirror.setMode(hjson.highlightMode, onModeChanged); } } if (!CodeMirror.highlightMode) { CodeMirror.setMode('markdown', onModeChanged); console.log("%s => %s", CodeMirror.highlightMode, CodeMirror.$language.val()); } // Update the user list (metadata) from the hyperjson Metadata.update(userDoc); if (newDoc) { editor.setValue(newDoc); } if (Cryptpad.initialName && Title.isDefaultTitle()) { Title.updateTitle(Cryptpad.initialName); } Cryptpad.getPadAttribute('previewMode', function (e, data) { if (e) { return void console.error(e); } if (data === false && APP.$previewButton) { APP.$previewButton.click(); } }); /* // add the splitter if (!$iframe.has('.cp-splitter').length) { var $preview = $iframe.find('#previewContainer'); var splitter = $('<div>', { 'class': 'cp-splitter' }).appendTo($preview); $preview.on('scroll', function() { splitter.css('top', $preview.scrollTop() + 'px'); }); var $target = $iframe.find('.CodeMirror'); splitter.on('mousedown', function (e) { e.preventDefault(); var x = e.pageX; var w = $target.width(); $iframe.on('mouseup mousemove', function handler(evt) { if (evt.type === 'mouseup') { $iframe.off('mouseup mousemove', handler); return; } $target.css('width', (w - x + evt.pageX) + 'px'); }); }); } */ Cryptpad.removeLoadingScreen(); setEditable(true); initializing = false; onLocal(); // push local state to avoid parse errors later. if (readOnly) { config.onRemote(); return; } UserList.getLastName(toolbar.$userNameButton, isNew); var fmConfig = { dropArea: $iframe.find('.CodeMirror'), body: $iframe.find('body'), onUploaded: function (ev, data) { //var cursor = editor.getCursor(); //var cleanName = data.name.replace(/[\[\]]/g, ''); //var text = '!['+cleanName+']('+data.url+')'; var parsed = Cryptpad.parsePadUrl(data.url); var hexFileName = Cryptpad.base64ToHex(parsed.hashData.channel); var src = '/blob/' + hexFileName.slice(0,2) + '/' + hexFileName; var mt = '<media-tag src="' + src + '" data-crypto-key="cryptpad:' + parsed.hashData.key + '"></media-tag>'; editor.replaceSelection(mt); } }; APP.FM = Cryptpad.createFileManager(fmConfig); }; config.onRemote = function () { if (initializing) { return; } if (isHistoryMode) { return; } var oldDoc = canonicalize(CodeMirror.$textarea.val()); var shjson = APP.realtime.getUserDoc(); // Update the user list (metadata) from the hyperjson Metadata.update(shjson); var hjson = JSON.parse(shjson); var remoteDoc = hjson.content; var highlightMode = hjson.highlightMode; if (highlightMode && highlightMode !== APP.highlightMode) { CodeMirror.setMode(highlightMode, onModeChanged); } CodeMirror.setValueAndCursor(oldDoc, remoteDoc, TextPatcher); drawPreview(); if (!readOnly) { var textValue = canonicalize(CodeMirror.$textarea.val()); var shjson2 = stringifyInner(textValue); if (shjson2 !== shjson) { console.error("shjson2 !== shjson"); TextPatcher.log(shjson, TextPatcher.diff(shjson, shjson2)); APP.patchText(shjson2); } } if (oldDoc !== remoteDoc) { Cryptpad.notify(); } }; config.onAbort = function () { // inform of network disconnect setEditable(false); toolbar.failed(); Cryptpad.alert(Messages.common_connectionLost, undefined, true); }; config.onConnectionChange = function (info) { setEditable(info.state); toolbar.failed(); if (info.state) { initializing = true; toolbar.reconnecting(info.myId); Cryptpad.findOKButton().click(); } else { Cryptpad.alert(Messages.common_connectionLost, undefined, true); } }; config.onError = onConnectError; APP.realtime = Realtime.start(config); editor.on('change', onLocal); Cryptpad.onLogout(function () { setEditable(false); }); }; var interval = 100; var second = function (CM) { Cryptpad.ready(function () { andThen(CM); Cryptpad.reportAppUsage(); }); Cryptpad.onError(function (info) { if (info && info.type === "store") { onConnectError(); } }); }; var first = function () { if (ifrw.CodeMirror) { second(ifrw.CodeMirror); } else { console.log("CodeMirror was not defined. Trying again in %sms", interval); setTimeout(first, interval); } }; first(); }); });