Commit 1f5684ee authored by Maxime Chaillet's avatar Maxime Chaillet

use another strategy to adjust editor height dynamiccaly.

parent f7ab2695
/* stylesheet which overrides default browser css styles. CSS below are used in tinyMCE only. */
body {
overflow-y: auto!important;
padding-bottom: 0px!important;
}
ul, ol {
display: inline-block;
}
\ No newline at end of file
......@@ -51,7 +51,7 @@ class App extends Component {
{/* <Footer></Footer> */}
<Footer></Footer>
</div>
</Router>
);
......
......@@ -18,12 +18,15 @@ class EventContentDisplayer extends React.Component {
if (useRichTextEditor !== null && useRichTextEditor !== undefined) {
let HTMLText = this.getContent(content); // can be null
if (useRichTextEditor === true) {
//debugger;
// save the event plainText format to localstorage. This is usefull in case the editor is not changed (when only title is updated)
storeToLocalStorage(EDIT_EVENT_CONTEXT, getContent(content, 'plainText'), PLAINTEXT_CONTENT_FORMAT);
return (<HTMLEditor
onEventModified={onEventModified}
isEditionMode={isEditionMode}
investigationId={investigationId}
minEditorHeight={this.props.minEditorHeight}
maxEditorHeight={this.props.maxEditorHeight}
storeToLocalStorage={storeToLocalStorage}
text={HTMLText}
user={user}
......
......@@ -13,7 +13,7 @@ class EventContentPanel extends React.Component {
if (props.event) { this.eventId = props.event._id; }; //required for component will unmount in EDIT_EVENT_CONTEXT
}
render() {
let { event, context, investigationId, user, onEventModified } = this.props;
let { event, context, getEditorHeight, investigationId, user, onEventModified } = this.props;
if (context === EDIT_EVENT_CONTEXT) {
if (event) {
if (event.type === ANNOTATION) {
......@@ -23,6 +23,8 @@ class EventContentPanel extends React.Component {
eventId={event._id}
investigationId={investigationId}
isEditionMode={true}
maxEditorHeight={this.props.maxEditorHeight}
minEditorHeight={this.props.minEditorHeight}
storeToLocalStorage={this.storeToLocalStorage}
useRichTextEditor={true}
user={user}
......@@ -34,6 +36,8 @@ class EventContentPanel extends React.Component {
onEventModified={onEventModified}
event={event}
investigationId={investigationId}
maxEditorHeight={this.props.maxEditorHeight}
minEditorHeight={this.props.minEditorHeight}
storeToLocalStorage={this.storeToLocalStorage}
user={user}
/>);
......@@ -44,6 +48,8 @@ class EventContentPanel extends React.Component {
onEventModified={onEventModified}
investigationId={investigationId}
isEditionMode={true}
maxEditorHeight={this.props.maxEditorHeight}
minEditorHeight={this.props.minEditorHeight}
storeToLocalStorage={this.storeToLocalStorage}
user={user}
/>
......@@ -93,6 +99,8 @@ class EventContentPanel extends React.Component {
export default EventContentPanel;
EventContentPanel.proptype = {
/** Callback function which returns the min or max editor height of the editor. */
getEditorHeight: PropTypes.func,
/* investigation identifier */
investigationId: PropTypes.string,
/* user who is using this component */
......@@ -175,7 +183,7 @@ EventContentPanel.proptype = {
* @param {*} props the props passed to this component
*/
const NotificationContent = (props) => {
let { event, investigationId, user } = props;
let { event, getEditorHeight, investigationId, user } = props;
let notificationMessage = getOriginalEvent(event);
......@@ -189,6 +197,8 @@ const NotificationContent = (props) => {
eventId={event._id}
investigationId={investigationId}
isEditionMode={true}
minEditorHeight={this.props.minEditorHeight}
maxEditorHeight={this.props.maxEditorHeight}
storeToLocalStorage={props.storeToLocalStorage}
useRichTextEditor={true}
user={user}
......@@ -200,6 +210,8 @@ const NotificationContent = (props) => {
eventId={event._id}
investigationId={investigationId}
isEditionMode={true}
minEditorHeight={this.props.minEditorHeight}
maxEditorHeight={this.props.maxEditorHeight}
storeToLocalStorage={props.storeToLocalStorage}
useRichTextEditor={true}
user={user}
......@@ -213,9 +225,9 @@ const NotificationContent = (props) => {
<EventContentDisplayer
content={notificationMessage.content}
eventId={event._id}
useRichTextEditor={false}
isEditionMode={false}
storeToLocalStorage={props.storeToLocalStorage}
useRichTextEditor={false}
/>
</div>
......
......@@ -11,11 +11,17 @@ import tinymce from 'tinymce/tinymce';
import { EditionModeConfig, ViewModeConfig } from '../../config/tinymce/tinymce.js'
import { GUI_CONFIG } from '../../config/gui.config.js';
import { getFileByEventId } from "../../api/icat/icatPlus"
import { NEW_EVENT_CONTEXT, LOCALSTORAGE_NEW_EVENT_CONTENT_IN_PLAINTEXT_FORMAT, PLAINTEXT_CONTENT_FORMAT, EDIT_EVENT_CONTEXT, HTML_CONTENT_FORMAT } from '../../constants/EventTypes.js';
import { NEW_EVENT_CONTEXT, PLAINTEXT_CONTENT_FORMAT, EDIT_EVENT_CONTEXT, HTML_CONTENT_FORMAT } from '../../constants/EventTypes.js';
/**
* The HTML editor used to read and write the logbook's annotations.
*/
const EDITOR_ID_FOR_CREATION = 'myEditorForCreation';
const EDITOR_ID_FOR_EDITION = 'myEditorForEdition';
const EVENT_FOOTER_HEIGHT = 37;
class HTMLEditor extends Component {
constructor(props) {
super(props);
......@@ -36,32 +42,47 @@ class HTMLEditor extends Component {
const { editorContent } = this.state;
const config = (isEditionMode === true) ? new EditionModeConfig() : new ViewModeConfig();
//debugger;
return (
<Editor
init={{
plugins: config.plugins,
skin_url: config.skin_url,
branding: config.branding,
readonly: config.readonly,
toolbar: config.toolbar,
menubar: config.menubar,
statusbar: config.statusbar,
images_upload_handler: this.imagesUploadHandler,
paste_data_images: config.paste_data_images,
autoresize_min_height: config.autoresize_min_height,
autoresize_max_height: config.autoresize_max_height,
formats: config.formats,
content_css: config.content_css,
}}
value={editorContent}
onEditorChange={this.onEditorChange}
/>
<Editor
id={this.props.text ? EDITOR_ID_FOR_EDITION : EDITOR_ID_FOR_CREATION}
init={{
plugins: config.plugins,
skin_url: config.skin_url,
branding: config.branding,
readonly: config.readonly,
toolbar: config.toolbar,
menubar: config.menubar,
statusbar: config.statusbar,
images_upload_handler: this.imagesUploadHandler,
paste_data_images: config.paste_data_images,
//autoresize_min_height: Number(this.props.minEditorHeight),
//autoresize_max_height: Number(this.props.maxEditorHeight),
formats: config.formats,
content_css: config.content_css,
}}
value={editorContent}
onEditorChange={this.onEditorChange}
/>
);
}
componentDidMount() {
this.storeToLocalStorage()
this.setEditingAreaHeight();
}
componentDidUpdate() {
this.setEditingAreaHeight();
}
setEditingAreaHeight = () => {
let panelPart = document.getElementById('refForEditorHeightCalculation');
let editorHeader = document.getElementsByClassName("mce-top-part mce-container mce-stack-layout-item mce-first")[0];
let iframe = this.props.text ? document.getElementById(EDITOR_ID_FOR_EDITION) : document.getElementById(EDITOR_ID_FOR_CREATION) + '_ifr';
iframe.style.height = (panelPart.clientHeight - EVENT_FOOTER_HEIGHT - editorHeader.clientHeight).toString() + 'px'; // this.props.maxEditorHeight;
let iframeBody = iframe.contentWindow.document.getElementById('tinymce');
iframeBody.style.height = (panelPart.clientHeight - 8 - 8 - EVENT_FOOTER_HEIGHT - editorHeader.clientHeight - 1).toString() + 'px'; //8 = marginTop and marginBottom of the iframe's body
}
/**
......
......@@ -30,11 +30,13 @@ class NewOrEditEventPanel extends React.Component {
return (
<Panel bsStyle='primary' style={{ marginBottom: '0px', height: '100%', position: 'relative' }}>
<EventHeader context={context} />
<div style={{ position: 'absolute', top: '41px', bottom: '60px', width: '100%' }} >
<div id='refForEditorHeightCalculation' style={{ position: 'absolute', top: '41px', bottom: '60px', width: '100%' }} >
<div style={{ padding: '1px', position: 'absolute', top: '0px', bottom: '34px', left: '0px', right: '2px' }}>
<EventContentPanel
context={context}
event={event}
minEditorHeight={this.props.minEditorHeight}
maxEditorHeight={this.props.maxEditorHeight}
investigationId={investigationId}
onEventModified={this.onEventModified}
user={user}
......
......@@ -24,8 +24,14 @@ export function GUI_CONFIG() {
createdAt: -1
},
/** Panel maximum height during logbook event creation */
NEW_EVENT_MAX_HEIGHT: "250px",
/** Tinymce editor minimum height when there is a single editor in the modal */
SINGLE_EDITOR_MIN_HEIGHT: "200px",
/** Tinymce editor maximum height when there is a single editor in the modal */
SINGLE_EDITOR_MAX_HEIGHT: "808px",
/** Tinymce editor minimum height when there are 2 editors in the modal */
DUAL_EDITOR_MIN_HEIGHT: "270px",
/** Tinymce editor maximum height when there are 2 editors in the modal */
DUAL_EDITOR_MAX_HEIGHT: "270px",
/* Default tag color used in the logbook when tag color is not set */
DEFAULT_TAG_COLOR: "#a6bded"
......
......@@ -23,8 +23,8 @@ class GeneralConfig {
this.statusbar = false;
this.branding = false; // hides powered by tinymce
this.paste_data_images = true;
//this.autoresize_min_height = 200; //400; //in px
this.autoresize_max_height = GUI_CONFIG().NEW_EVENT_MAX_HEIGHT; //in px
//this.autoresize_min_height = 400; //in px
//this.autoresize_max_height = GUI_CONFIG().NEW_EVENT_MAX_HEIGHT; //in px
this.content_css = '/tinymce/customStyles.css';
this.formats = {
alignleft: { selector: 'img', styles: { float: 'left', margin: '10px' } },
......
......@@ -96,6 +96,8 @@ class EventContainer extends React.Component {
<NewOrEditEventPanel
context={NEW_EVENT_CONTEXT}
createEvent={this.createEvent}
minEditorHeight={this.getEditorHeight('min')}
maxEditorHeight={this.getEditorHeight('max')}
investigationId={investigationId}
onNewEventUploaded={this.onNewEventUploaded}
setNewEventVisibility={this.setNewEventVisibility}
......@@ -109,6 +111,8 @@ class EventContainer extends React.Component {
<NewOrEditEventPanel
context={EDIT_EVENT_CONTEXT}
event={this.state.eventBeingEdited}
minEditorHeight={this.getEditorHeight('min')}
maxEditorHeight={this.getEditorHeight('max')}
investigationId={investigationId}
onEventUpdated={this.onEventUpdated}
setEditEventVisibility={this.setEditEventVisibility}
......@@ -168,6 +172,28 @@ class EventContainer extends React.Component {
return '100%';
}
/**
* Get the editor min or max height
*/
getEditorHeight = (minOrMax) => {
if (minOrMax) {
if (minOrMax === 'min') {
if (this.state.isNewEventVisible === true && this.state.eventBeingEdited) {
return GUI_CONFIG().DUAL_EDITOR_MIN_HEIGHT;
} else {
return GUI_CONFIG().SINGLE_EDITOR_MIN_HEIGHT;
}
}
if (minOrMax === 'max') {
if (this.state.isNewEventVisible === true && this.state.eventBeingEdited) {
return GUI_CONFIG().DUAL_EDITOR_MAX_HEIGHT;
} else {
return GUI_CONFIG().SINGLE_EDITOR_MAX_HEIGHT;
}
}
}
}
onEventClicked = (event) => {
this.setState({ eventBeingEdited: event });
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment