Standardize media-tag embedder and make media tags always absolute URL, Standardize import/export logic for codemirror apps, fix arrow key navigation in presentation fullscreen mode before first click.

This commit is contained in:
Caleb James DeLisle 2017-10-03 17:57:57 +03:00
parent 94d2f4472b
commit d6570ad9f2
6 changed files with 111 additions and 157 deletions

View File

@ -204,6 +204,20 @@ define([
updateIndentSettings();
};
var mkFilePicker = function (framework, editor, evModeChange) {
evModeChange.reg(function (mode) {
if (MEDIA_TAG_MODES.indexOf(mode) !== -1) {
// Embedding is endabled
framework.setMediaTagEmbedder(function (mt) {
editor.replaceSelection($(mt)[0].outerHTML);
});
} else {
// Embedding is disabled
framework.setMediaTagEmbedder();
}
});
};
/////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////
@ -211,7 +225,6 @@ define([
var andThen2 = function (editor, CodeMirror, framework) {
var $toolbarContainer = $('#cme_toolbox');
var common = framework._.sfCommon;
var previewPane = mkPreviewPane(editor, CodeMirror, framework);
@ -220,37 +233,7 @@ define([
mkIndentSettings(editor, framework._.cpNfInner.metadataMgr);
CodeMirror.init(framework.localChange, framework._.title, framework._.toolbar);
if (!framework.isReadOnly()) {
var fileDialogCfg = {
onSelect: function (data) {
if (data.type === 'file') {
var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
editor.replaceSelection(mt);
return;
}
}
};
common.initFilePicker(fileDialogCfg);
var $mediaTagButton = $('<button>', {
title: Messages.filePickerButton,
'class': 'cp-toolbar-rightside-button fa fa-picture-o',
style: 'font-size: 17px'
}).click(function () {
var pickerCfg = {
types: ['file'],
where: ['root']
};
common.openFilePicker(pickerCfg);
}).appendTo(framework._.toolbar.$rightside);
evModeChange.reg(function (mode) {
if (MEDIA_TAG_MODES.indexOf(mode) !== -1) {
$($mediaTagButton).show();
} else {
$($mediaTagButton).hide();
}
});
}
mkFilePicker(framework, editor, evModeChange);
if (!framework.isReadOnly()) {
CodeMirror.configureTheme(function () {
@ -311,37 +294,8 @@ define([
editor.setValue(Messages.codeInitialState);
});
framework.setFileExporter(
function () {
return (Modes.extensionOf(CodeMirror.highlightMode) || '.txt').slice(1);
},
function () {
return new Blob([ editor.getValue() ], { type: 'text/plain;charset=utf-8' });
}
);
framework.setFileImporter({}, function (content, file) {
var mime = CodeMirror.findModeByMIME(file.type);
var mode;
if (!mime) {
var ext = /.+\.([^.]+)$/.exec(file.name);
if (ext[1]) {
mode = CMeditor.findModeByExtension(ext[1]);
mode = mode && mode.mode || null;
}
} else {
mode = mime && mime.mode || null;
}
if (mode && Modes.list.some(function (o) { return o.mode === mode; })) {
CodeMirror.setMode(mode);
$toolbarContainer.find('#language-mode').val(mode);
} else {
console.log("Couldn't find a suitable highlighting mode: %s", mode);
CodeMirror.setMode('text');
$toolbarContainer.find('#language-mode').val('text');
}
return content;
});
framework.setFileExporter(CodeMirror.getContentExtension, CodeMirror.fileExporter);
framework.setFileImporter({}, CodeMirror.fileImporter);
framework.setNormalizer(function (c) {
return {

View File

@ -52,6 +52,9 @@ define([
var evStart = Util.mkEvent(true);
var mediaTagEmbedder;
var $embedButton;
var common;
var cpNfInner;
var textPatcher;
@ -302,6 +305,42 @@ define([
common.feedback(action, force);
};
var createFilePicker = function () {
common.initFilePicker({
onSelect: function (data) {
if (data.type !== 'file') {
console.log("Unexpected data type picked " + data.type);
return;
}
if (!mediaTagEmbedder) { console.log('mediaTagEmbedder missing'); return; }
if (data.type !== 'file') { console.log('unhandled embed type ' + data.type); return; }
var privateDat = cpNfInner.metadataMgr.getPrivateData();
var origin = privateDat.fileHost || privateDat.origin;
var src = origin + data.src;
mediaTagEmbedder($('<media-tag src="' + src +
'" data-crypto-key="cryptpad:' + data.key + '"></media-tag>'));
}
});
$embedButton = $('<button>', {
title: Messages.filePickerButton,
'class': 'cp-toolbar-rightside-button fa fa-picture-o',
style: 'font-size: 17px'
}).click(function () {
common.openFilePicker({
types: ['file'],
where: ['root']
});
}).appendTo(toolbar.$rightside).hide();
};
var setMediaTagEmbedder = function (mte) {
if (!mte || readOnly) {
$embedButton.hide();
return;
}
$embedButton.show();
mediaTagEmbedder = mte;
};
nThen(function (waitFor) {
Cryptpad.addLoadingScreen();
SFCommon.create(waitFor(function (c) { common = c; }));
@ -424,6 +463,8 @@ define([
var $tags = common.createButton('hashtag', true);
toolbar.$rightside.append($tags);
createFilePicker();
cb(Object.freeze({
// Register an event to be informed of a content update coming from remote
// This event will pass you the object.
@ -475,6 +516,12 @@ define([
// such as removing extra fields.
setNormalizer: function (n) { normalize0 = n; },
// Set a function which should take a jquery element which is a media tag and place
// it in the document. If this is not called then there will be no embed button,
// if this is called a second time with a null function, it will remove the embed
// button from the toolbar.
setMediaTagEmbedder: setMediaTagEmbedder,
// Call the CryptPad feedback API.
feedback: feedback,

View File

@ -211,26 +211,18 @@ define([
Common.getAttribute(themeKey, todo);
};
exp.exportText = function () {
var text = editor.getValue();
var ext = Modes.extensionOf(exp.highlightMode);
var title = Cryptpad.fixFileName(Title ? Title.suggestTitle('cryptpad') : "?") + (ext || '.txt');
Cryptpad.prompt(Messages.exportPrompt, title, function (filename) {
if (filename === null) { return; }
var blob = new Blob([text], {
type: 'text/plain;charset=utf-8'
});
saveAs(blob, filename);
});
exp.getContentExtension = function () {
console.log(Modes.extensionOf(exp.highlightMode));
console.log(exp.highlightMode);
return (Modes.extensionOf(exp.highlightMode) || '.txt').slice(1);
};
exp.importText = function (content, file) {
var $bar = $('#cme_toolbox');
var mode;
exp.fileExporter = function () {
return new Blob([ editor.getValue() ], { type: 'text/plain;charset=utf-8' });
};
exp.fileImporter = function (content, file) {
var $toolbarContainer = $('#cme_toolbox');
var mime = CodeMirror.findModeByMIME(file.type);
var mode;
if (!mime) {
var ext = /.+\.([^.]+)$/.exec(file.name);
if (ext[1]) {
@ -240,18 +232,15 @@ define([
} else {
mode = mime && mime.mode || null;
}
if (mode && Modes.list.some(function (o) { return o.mode === mode; })) {
setMode(mode);
$bar.find('#language-mode').val(mode);
exp.setMode(mode);
$toolbarContainer.find('#language-mode').val(mode);
} else {
console.log("Couldn't find a suitable highlighting mode: %s", mode);
setMode('text');
$bar.find('#language-mode').val('text');
exp.setMode('text');
$toolbarContainer.find('#language-mode').val('text');
}
editor.setValue(content);
onLocal();
return { content: content };
};
var cursorToPos = function(cursor, oldText) {

View File

@ -363,35 +363,11 @@ define([
if (href) { ifrWindow.open(bounceHref, '_blank'); }
};
if (!framework.isReadOnly()) {
framework.onEditableChange(function () {
var locked = framework.isLocked();
$(inner).css({ 'background-color': ((locked) ? '#aaa' : '') });
inner.setAttribute('contenteditable', !locked);
});
var fileDialogCfg = {
onSelect: function (data) {
if (data.type === 'file') {
var mt = '<media-tag contenteditable="false" src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '" tabindex="1"></media-tag>';
editor.insertElement(window.CKEDITOR.dom.element.createFromHtml(mt));
return;
}
}
};
framework._.sfCommon.initFilePicker(fileDialogCfg);
window.APP.$mediaTagButton = $('<button>', {
title: Messages.filePickerButton,
'class': 'cp-toolbar-rightside-button fa fa-picture-o',
style: 'font-size: 17px'
}).click(function () {
var pickerCfg = {
types: ['file'],
where: ['root']
};
framework._.sfCommon.openFilePicker(pickerCfg);
}).appendTo(framework._.toolbar.$rightside);
}
framework.setMediaTagEmbedder(function ($mt) {
$mt.attr('contenteditable', 'false');
$mt.attr('tabindex', '1');
editor.insertElement(new window.CKEDITOR.dom.element($mt[0]));
});
framework.setTitleRecommender(function () {
var text;

View File

@ -241,6 +241,8 @@ define([
updateLocalOptions(slideOptionsTmp);
}
});
} else {
updateLocalOptions(slideOptionsTmp);
}
$container.remove();
Cryptpad.stopListening(h);
@ -348,32 +350,24 @@ define([
};
var mkFilePicker = function (framework, editor) {
var fileDialogCfg = {
onSelect: function (data) {
if (data.type === 'file') {
var mt = '<media-tag src="' + data.src + '" data-crypto-key="cryptpad:' + data.key + '"></media-tag>';
editor.replaceSelection(mt);
return;
}
}
};
framework._.sfCommon.initFilePicker(fileDialogCfg);
$('<button>', {
title: Messages.filePickerButton,
'class': 'cp-toolbar-rightside-button fa fa-picture-o',
style: 'font-size: 17px'
}).click(function () {
var pickerCfg = {
types: ['file'],
where: ['root']
};
framework._.sfCommon.openFilePicker(pickerCfg);
}).appendTo(framework._.toolbar.$rightside);
var $tags = framework._.sfCommon.createButton('hashtag', true);
framework._.toolbar.$rightside.append($tags);
framework.setMediaTagEmbedder(function (mt) {
editor.replaceSelection($(mt)[0].outerHTML);
});
};
var activateLinks = function ($content) {
$content.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);
}
});
}
/////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////
/////////////////////////////////////////////////////////////////////////////////////////////////////////
@ -390,17 +384,7 @@ define([
var $toolbarDrawer = framework._.toolbar.$drawer;
$content.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);
}
});
activateLinks($content);
Slide.setModal(framework._.sfCommon, $modal, $content, slideOptions, Messages.slideInitialState);
mkPrintButton(framework, editor, $content, $print, $toolbarDrawer);
mkSlideOptionsButton(framework, slideOptions, $toolbarDrawer);
@ -410,10 +394,6 @@ define([
CodeMirror.configureTheme();
var enterPresentationMode = function () { Slide.show(true, editor.getValue()); };
if (isPresentMode) { enterPresentationMode(); }
framework.onContentUpdate(function (newContent) {
CodeMirror.contentUpdate(newContent);
Slide.update(newContent.content);
@ -455,12 +435,17 @@ define([
Slide.setTitle(framework._.title);
var enterPresentationMode = function () { Slide.show(true, editor.getValue()); };
framework._.toolbar.$rightside.append(
framework._.sfCommon.createButton('present', true).click(enterPresentationMode)
);
if (isPresentMode) { enterPresentationMode(); }
editor.on('change', framework.localChange);
framework.setFileExporter(CodeMirror.getContentExtension, CodeMirror.fileExporter);
framework.setFileImporter({}, CodeMirror.fileImporter);
framework.start();
};

View File

@ -115,7 +115,10 @@ define([
Slide.update(content);
Slide.draw(Slide.index);
$modal.addClass('cp-app-slide-shown');
$('textarea').blur();
$(ifrw).focus();
change(null, Slide.index);
Common.setPresentUrl(true);
$('.cp-app-slide-present-button').hide();