composer/iTop
6
0
Fork 0
mirror of https://github.com/Combodo/iTop.git synced 2026-02-12 23:14:18 +01:00
Code Issues Packages Projects Releases Wiki Activity

N°7552 - Polishing CKeditor (maximized mode, focus impossible if editor in a modal)

Browse Source 
Fullscreen mode for portal (native browser method)
Windowed mode for console (JS method)
portal.css not minified
This commit is contained in:
jf-cbd
2024-06-13 10:31:42 +02:00
parent 8b256caa6c
commit bfbb046b10
7 changed files with 1894 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1843
datamodels/2.x/itop-portal-base/portal/public/css/portal.css
View File

File diff suppressed because one or more lines are too long

20
datamodels/2.x/itop-portal-base/portal/public/css/portal.scss
View File

@@ -1849,3 +1849,23 @@ body.cke-maximized {
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px lighten($state-danger-border, 10);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 6px lighten($state-danger-border, 10);
}
.ck.fullscreen-mode .ck.ck-content.ck-editor__editable,
.ck.fullscreen-mode .ck.ck-editor__main {
height: 100% !important;
resize: none !important;
}
.ck.ck-editor.fullscreen-mode {
display: flex !important;
flex-direction: column !important;
}
.ck.ck-editor.fullscreen-style-activated {
position: fixed !important;
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
z-index: 99999 !important;
width: 100vw !important;
height: 100vh !important
}

2
js/ckeditor/build/ckeditor.js vendored
View File

File diff suppressed because one or more lines are too long

2
js/ckeditor/build/ckeditor.js.map
View File

File diff suppressed because one or more lines are too long

37
js/ckeditor/src/plugins/maximize/maximize.plugin.ts
View File

@@ -34,25 +34,36 @@ export default class Maximize extends Plugin {
this.listenTo( oButton, 'execute', () => {
if(oEditor.ui.element !== null){
let CKEditorPoweredButton = document.getElementsByClassName('ck-powered-by-balloon');
let CKEditorPoweredButton:HTMLCollectionOf<Element> = document.getElementsByClassName('ck-powered-by-balloon');
const sFullScreenMethod:string = oEditor.config.get('maximize.fullscreen') as string;
if(oButton.isOn){
oInitialParentElement.append(oEditor.ui.element);
oEditor.ui.element.classList.remove('cke-maximized');
document.body.classList.remove('cke-maximized');
if (sFullScreenMethod === 'native') { // portal
document.exitFullscreen();
oEditor.ui.element.classList.remove('fullscreen-mode');
}
else{ // console
oInitialParentElement.append(oEditor.ui.element);
oEditor.ui.element.classList.remove('cke-maximized');
document.body.classList.remove('cke-maximized');
CKEditorPoweredButton.item(0)?.setAttribute('style', 'display: block');
}
oButton.icon = sMaximizeIconSVG;
CKEditorPoweredButton.item(0)?.setAttribute('style', 'display: block');
}
else{
oInitialParentElement = oEditor.ui.element.parentElement ?? oInitialParentElement;
oEditor.ui.element.remove();
document.body.append(oEditor.ui.element);
document.body.classList.add('cke-maximized'); // Add class to body to prevent scrollbars
// Same behaviour between Chrome and Firefox (Firefox has a bug with the balloon remaning visible in the middle of the screen when the editor is maximized)
CKEditorPoweredButton.item(0)?.setAttribute('style', 'display: none');
oEditor.ui.element.classList.add('cke-maximized');
if (sFullScreenMethod === 'native') { // portal
oEditor.ui.element.requestFullscreen()
oEditor.ui.element.classList.add('fullscreen-mode');
}
else { // console
oInitialParentElement = oEditor.ui.element.parentElement ?? oInitialParentElement;
oEditor.ui.element.remove();
document.body.append(oEditor.ui.element);
document.body.classList.add('cke-maximized'); // Add class to body to prevent scrollbars
oEditor.ui.element.classList.add('cke-maximized');
CKEditorPoweredButton.item(0)?.setAttribute('style', 'display: none');
}
oButton.icon = sMinimizeIconSVG;
}
oButton.isOn = !oButton.isOn;
}
});

3
sources/Application/Helper/CKEditorHelper.php
View File

@@ -45,6 +45,9 @@ class CKEditorHelper
// configuration
$aConfiguration = array(
'language' => $sLanguage,
'maximize' => [
'fullscreen' => 'javascript'
],
'detectChanges' => [
'initialValue' => $sInitialValue
],

4
sources/Renderer/Bootstrap/FieldRenderer/BsSimpleFieldRenderer.php
View File

@@ -176,7 +176,9 @@ EOF
if ($bRichEditor) {
// Enable CKEditor
CKEditorHelper::ConfigureCKEditorElementForRenderingOutput($oOutput, $this->oField->GetGlobalId(), $this->oField->GetCurrentValue(), false, false);
CKEditorHelper::ConfigureCKEditorElementForRenderingOutput($oOutput, $this->oField->GetGlobalId(), $this->oField->GetCurrentValue(), false, false, ['maximize' => [
'fullscreen' => 'native'
]]);
if (($this->oField->GetObject() !== null) && ($this->oField->GetTransactionId() !== null)) {
$oOutput->AddJs(InlineImage::EnableCKEditorImageUpload($this->oField->GetObject(), utils::GetUploadTempId($this->oField->GetTransactionId())));