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

Enable toggling between editor and preview on mobile #1367

Browse Source
This commit is contained in:
DianaXWiki 2025-01-22 14:03:38 +02:00
parent 337e2ba589
commit b56d5990ca
2 changed files with 82 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
www/code/app-code.less
View File

@ -137,7 +137,7 @@
@media (max-width: @browser_media-medium-screen) {
#cp-app-code-editor {
&.cp-app-code-present {
#cp-app-code-container { display: none !important; }
//#cp-app-code-container { display: none !important; }
#cp-app-code-preview {
flex: 1;
max-width: 100%;
@ -156,9 +156,9 @@
padding-bottom: 100px;
}
}
#cp-app-code-preview {
display: none !important;
}
// #cp-app-code-preview {
// display: none !important;
// }
}
}
}

94
www/code/inner.js
View File

@ -177,6 +177,15 @@ define([
});
};
function showEditor() {
$previewContainer.hide();
$codeMirrorContainer.show();
$previewButton.removeClass('cp-toolbar-button-active');
framework._.sfCommon.setPadAttribute('previewMode', false, function (e) {
if (e) { console.error(e); }
});
}
var mkPreviewPane = function (editor, CodeMirror, framework, isPresentMode) {
var $previewContainer = $('#cp-app-code-preview');
var $preview = $('#cp-app-code-preview-content');
@ -216,23 +225,44 @@ define([
previewTo = setTimeout(function () {
$codeMirror.removeClass('transition');
}, 500);
if (!previews[CodeMirror.highlightMode]) {
$previewContainer.show();
}
$previewContainer.toggle();
if ($previewContainer.is(':visible')) {
forceDrawPreview();
$codeMirrorContainer.removeClass('cp-app-code-fullpage');
$previewButton.addClass('cp-toolbar-button-active');
framework._.sfCommon.setPadAttribute('previewMode', true, function (e) {
if (e) { return console.log(e); }
});
var isSmallScreen = window.innerWidth <= 600;
if (isSmallScreen) {
if ($previewContainer.is(':visible')) {
$previewContainer.hide();
$codeMirrorContainer.show(); // Show the editor container
$previewButton.removeClass('cp-toolbar-button-active');
framework._.sfCommon.setPadAttribute('previewMode', false, function (e) {
if (e) { return console.log(e); }
});
} else {
$previewContainer.show();
$codeMirrorContainer.hide(); // Hide the editor container
$previewButton.addClass('cp-toolbar-button-active');
forceDrawPreview();
framework._.sfCommon.setPadAttribute('previewMode', true, function (e) {
if (e) { return console.log(e); }
});
}
} else {
$codeMirrorContainer.addClass('cp-app-code-fullpage');
$previewButton.removeClass('cp-toolbar-button-active');
framework._.sfCommon.setPadAttribute('previewMode', false, function (e) {
if (e) { return console.log(e); }
});
if (!previews[CodeMirror.highlightMode]) {
$previewContainer.show();
}
$previewContainer.toggle();
if ($previewContainer.is(':visible')) {
forceDrawPreview();
$codeMirrorContainer.removeClass('cp-app-code-fullpage');
$previewButton.addClass('cp-toolbar-button-active');
framework._.sfCommon.setPadAttribute('previewMode', true, function (e) {
if (e) { return console.log(e); }
});
} else {
$codeMirrorContainer.addClass('cp-app-code-fullpage');
$previewButton.removeClass('cp-toolbar-button-active');
framework._.sfCommon.setPadAttribute('previewMode', false, function (e) {
if (e) { return console.log(e); }
});
}
}
});
@ -286,6 +316,38 @@ define([
};
framework.onReady(function () {
//handle refresh
var isSmallScreen = window.innerWidth <= 700;
framework._.sfCommon.getPadAttribute('previewMode', function (e, previewMode) {
if (e) { return console.error(e); }
if (isSmallScreen) {
if (previewMode) {
$previewContainer.show();
$codeMirrorContainer.hide();
$previewButton.addClass('cp-toolbar-button-active');
forceDrawPreview();
} else {
$previewContainer.hide();
$codeMirrorContainer.show();
$previewButton.removeClass('cp-toolbar-button-active');
}
} else {
if (previewMode) {
$previewContainer.show();
$codeMirrorContainer.removeClass('cp-app-code-fullpage');
$previewButton.addClass('cp-toolbar-button-active');
forceDrawPreview();
} else {
$previewContainer.hide();
$codeMirrorContainer.addClass('cp-app-code-fullpage');
$previewButton.removeClass('cp-toolbar-button-active');
}
}
});
// add the splitter
var splitter = $('<div>', {
'class': 'cp-splitter'