The_Great_Archive/cryptpad
1
0
Fork 0
mirror of https://github.com/cryptpad/cryptpad.git synced 2026-09-14 11:05:41 +05:00
Code Issues Packages Projects Releases Wiki Activity

Refactor markdown toggle code #1831

Browse Source
This commit is contained in:
DianaXWiki 2025-06-14 16:32:21 +03:00
parent 0fe3f51549
commit c43af77dc7
4 changed files with 35 additions and 122 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

109
www/common/common-ui-elements.js
View File

@ -1256,14 +1256,15 @@ define([
}
var toolbarVisibleOnSmallScreen = false;
var $smallToggleButton = null;
var $toolbarToggleButton = null;
var appType = common.getMetadataMgr().getMetadata().type;
function updateToolbarVisibility() {
var $wrapper = $toolbar.parent().length ? $toolbar.parent() : $('<div>').append($toolbar);
var $wrapper = $(opts && opts.wrapper ? opts.wrapper : $toolbar.parent());
if (isSmallScreen()) {
if (!$smallToggleButton) {
$smallToggleButton = $('<button>', {
if (!$toolbarToggleButton) {
$toolbarToggleButton = $('<button>', {
'class': 'btn cp-markdown-toggle-button',
'aria-label': Messages.toolbar_show_text_tools,
'aria-pressed': 'false',
@ -1281,31 +1282,39 @@ define([
.attr('title', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools)
.attr('aria-label', !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools);
toolbarVisibleOnSmallScreen = !isExpanded;
});
$wrapper.append($smallToggleButton);
})
// .on('keydown', function (e) {
// if (e.key === 'Enter' || e.which === 13) { // "Enter" should keep toggle functionality, not close the modal
// e.preventDefault();
// e.stopPropagation();
// $(this).click();
// }
// });
$wrapper.append($toolbarToggleButton);
}
if (toolbarVisibleOnSmallScreen) {
$toolbar.show();
$smallToggleButton.addClass('cp-toolbar-button-active')
$toolbarToggleButton.addClass('cp-toolbar-button-active')
.attr('aria-pressed', 'true');
} else {
$toolbar.hide();
$smallToggleButton.removeClass('cp-toolbar-button-active')
$toolbarToggleButton.removeClass('cp-toolbar-button-active')
.attr('aria-pressed', 'false');
}
} else {
if ($smallToggleButton) {
$smallToggleButton.remove();
$smallToggleButton = null;
if ($toolbarToggleButton) {
$toolbarToggleButton.remove();
$toolbarToggleButton = null;
}
$toolbar.show();
}
}
$(window).on('resize', updateToolbarVisibility);
updateToolbarVisibility();
if (appType != 'code') {
$(window).on('resize', updateToolbarVisibility);
updateToolbarVisibility();
}
return {
toolbar: $toolbar,
@ -1396,76 +1405,6 @@ define([
text: text
};
};
// let toolbarVisibleOnSmallScreen = false;
// UIElements.createMarkdownToolbarToggle = function(toolbarElement, editor) {
// var $button = $(h('button', {
// 'class': 'btn cp-markdown-toggle-button',
// 'aria-label': Messages.toolbar_show_text_tools,
// 'aria-pressed': 'false',
// 'data-notippy':1,
// 'type': 'button',
// 'title': Messages.toolbar_show_text_tools
// }, [
// h('i.fa.fa-wrench', { 'aria-hidden': 'true' }),
// h('span.cp-toolbar-label', Messages.toolbar_text_tools)
// ]));
// $button.on('click', function () {
// var isExpanded = $(toolbarElement).is(':visible');
// $(this).attr('aria-pressed', String(!isExpanded));
// $(this).toggleClass('cp-toolbar-button-active', !isExpanded);
// $(toolbarElement).toggle();
// const newLabel = !isExpanded ? Messages.toolbar_hide_text_tools : Messages.toolbar_show_text_tools; // XXX
// $button
// .attr('title', newLabel)
// .attr('aria-label', newLabel);
// toolbarVisibleOnSmallScreen = !isExpanded;
// });
// $(toolbarElement).on('keydown', function (e) {
// if (e.key === 'Escape' || e.which === 27) {
// e.preventDefault();
// e.stopPropagation();
// if (editor && editor.focus) {
// editor.focus();
// }
// }
// });
// return $button;
// };
// var isSmallScreenToolbar = function () {
// return window.innerHeight < 530 || window.innerWidth < 530;
// }
// UIElements.updateToolbarVisibility = function(markdownEditorWrapper, toolbar, editor) {
// let toggleButton = null;
// const isSmallScreen = isSmallScreenToolbar();
// if (isSmallScreen) {
// if (!$(markdownEditorWrapper).find('.cp-markdown-toggle-button').length) {
// toggleButton = UIElements.createMarkdownToolbarToggle(toolbar, editor);
// $(markdownEditorWrapper).append(toggleButton);
// }
// if (toolbarVisibleOnSmallScreen) {
// $(toolbar).show();
// $(markdownEditorWrapper).find('.cp-markdown-toggle-button').addClass('cp-toolbar-button-active')
// .attr('aria-pressed', true);
// } else {
// $(toolbar).hide();
// $(markdownEditorWrapper).find('.cp-markdown-toggle-button').removeClass('cp-toolbar-button-active')
// .attr('aria-pressed', false);
// }
// } else {
// $(markdownEditorWrapper).find('.cp-markdown-toggle-button').remove();
// $(toolbar).show();
// }
// return toggleButton;
// };
/* Create a usage bar which keeps track of how much storage space is used
by your CryptDrive. The getPinnedUsage RPC is one of the heavier calls,
so we throttle its usage. Clients will not update more than once per

24
www/form/inner.js
View File

@ -1117,22 +1117,17 @@ define([
editor.save();
editor.focus();
});
var toggleRow = h('div.cp-markdown-toggle-row');
if (APP.common && !(tmp && tmp.block) && cm) {
var markdownTb = APP.common.createMarkdownToolbar(editor, {
embed: function (mt) {
editor.focus();
editor.replaceSelection($(mt)[0].outerHTML);
}
},
wrapper: toggleRow
});
var toggleRow = h('div.cp-markdown-toggle-row');
$(block).prepend(markdownTb.toolbar);
setTimeout(() => {
UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
}, 10);
$(window).on('resize', function() {
UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
});
$(block).prepend(toggleRow);
cm.configureTheme(APP.common, function () {});
}
@ -5592,17 +5587,10 @@ define([
embed: function (mt) {
editor.focus();
editor.replaceSelection($(mt)[0].outerHTML);
}
});
var toggleButton = UIElements.createMarkdownToolbarToggle(markdownTb.toolbar, editor)[0];
toggleRow.appendChild(toggleButton);
markdownWrapper.insertBefore(markdownTb.toolbar instanceof jQuery ? markdownTb.toolbar[0] : markdownTb.toolbar,t);
setTimeout(() => {
UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
}, 10);
$(window).on('resize', function () {
UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
},
wrapper: toggleRow
});
$(markdownWrapper).prepend(markdownTb.toolbar);
var $edit = $(editDiv);
var $preview = $(previewDiv);

18
www/kanban/inner.js
View File

@ -283,12 +283,9 @@ define([
embed: function (mt) {
editor.focus();
editor.replaceSelection($(mt)[0].outerHTML);
}
},
wrapper: markdownEditorWrapper
});
//var toggleButtonMarkdown = UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
// $(window).on('resize', function() {
// UIElements.updateToolbarVisibility(markdownEditorWrapper, markdownTb.toolbar, editor);
// });
$(markdownTb.toolbar).on('keydown', function (e) {
if (e.which === 27) { // Escape key
e.preventDefault();
@ -298,16 +295,7 @@ define([
else if (e.which == 13 || e.which == 9) { // "Enter" or "Tab" key should not close modal
e.stopPropagation();
}
});
// $(toggleButtonMarkdown).on('keydown', function (e) {
// if (e.which === 13) { // "Enter" should toggle the toolbar, but not close the modal
// e.preventDefault();
// e.stopPropagation();
// $(this).click(); // simulate click to toggle
// } else if (e.which === 9) {
// e.stopPropagation();
// }
// });
});
$(text).before(markdownTb.toolbar);
editor.refresh();
var body = {

6
www/profile/inner.js
View File

@ -538,11 +538,9 @@ define([
}
});
var markdownTb = common.createMarkdownToolbar(editor);
var toggleRow = h('div.cp-markdown-toggle-row');
UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
$(window).on('resize', function() {
UIElements.updateToolbarVisibility(toggleRow, markdownTb.toolbar, editor);
var markdownTb = common.createMarkdownToolbar(editor, {
wrapper: toggleRow
});
$(code).prepend(markdownTb.toolbar);
$(code).prepend(toggleRow);