diff --git a/assets/ckeditor_config_basic.js b/assets/ckeditor_config_speaker_notes.js similarity index 100% rename from assets/ckeditor_config_basic.js rename to assets/ckeditor_config_speaker_notes.js diff --git a/components/Deck/ContentPanel/SlideModes/SlideEditPanel/SlideContentEditor.js b/components/Deck/ContentPanel/SlideModes/SlideEditPanel/SlideContentEditor.js index 35e328c0d..328b9de73 100644 --- a/components/Deck/ContentPanel/SlideModes/SlideEditPanel/SlideContentEditor.js +++ b/components/Deck/ContentPanel/SlideModes/SlideEditPanel/SlideContentEditor.js @@ -595,7 +595,7 @@ class SlideContentEditor extends React.Component { this.uniqueIDAllElements(); this.resize(); $('.pptx2html').css({'borderStyle': 'double', 'borderColor': 'rgba(218,102,25,0.5)'}); - this.resizeDrag(); + this.resizeDragAndContextMenu(); //this.forceUpdate(); } refreshCKeditor(){ @@ -608,12 +608,31 @@ class SlideContentEditor extends React.Component { filebrowserUploadUrl: Microservices.import.uri + '/importImage/' + this.props.UserProfileStore.userid, uploadUrl: Microservices.import.uri + '/importImagePaste/' + this.props.UserProfileStore.userid}); //leave all buttons + CKEDITOR.instances.inlineContent.on('instanceReady', (evt) => { if (this.refs.inlineContent.innerHTML.includes('pptx2html')) { + CKEDITOR.instances.inlineContent.on('afterCommandExec', (evt) => { + if(evt.data.name === 'undo') { + console.log('undo pressed after refreshing CKeditor'); + setTimeout(() => { + CKEDITOR.instances.inlineContent.fire('lockSnapshot'); + this.resetResizeDragContext(); + CKEDITOR.instances.inlineContent.fire('unlockSnapshot'); + }, 500); + } + if(evt.data.name === 'redo') { + console.log('redo pressed after refreshing CKeditor'); + setTimeout(() => { + CKEDITOR.instances.inlineContent.fire('lockSnapshot'); + this.resetResizeDragContext(); + CKEDITOR.instances.inlineContent.fire('unlockSnapshot'); + }, 500); + } + }); //this.forceUpdate(); //this.addBorders(); - this.resizeDrag(); + this.resizeDragAndContextMenu(); //ugly fix for SWIK-1218-After using source dialog in CKeditor - input box controls (and template + input box button) do not work $('.cke_button__sourcedialog_label').mousedown((evt) => { //detect click on source dialog button //remove resize and drag interaction because it generates HTML in slide editor content @@ -626,7 +645,7 @@ class SlideContentEditor extends React.Component { //console.log('====ckeditor save button ok==== - refresh drag and menus'); //this.addBorders(); setTimeout(() => { - this.resizeDrag(); + this.resizeDragAndContextMenu(); this.hasChanges = true; ////this.forceUpdate(); }, 500); @@ -650,7 +669,7 @@ class SlideContentEditor extends React.Component { //this.addBorders(); setTimeout(() => { this.refreshCKeditor(); - this.resizeDrag(); + this.resizeDragAndContextMenu(); //this.forceUpdate(); this.hasChanges = true; }, 500); @@ -797,6 +816,12 @@ class SlideContentEditor extends React.Component { $(this).css('box-shadow',''); }); } + resetResizeDragContext(){ + console.log('resetResizeDragContext'); + this.disableResizeDrag(); + this.contextMenuAndDragDivAllRemove(); + this.resizeDragAndContextMenu(); + } getHighestZIndex(){ let index_highest = 0; $('.pptx2html [style*="absolute"]').each(function() { @@ -839,7 +864,7 @@ class SlideContentEditor extends React.Component { CKEDITOR.instances.inlineContent.getSelection().unlock(); }); //this.uniqueIDAllElements(); - this.resizeDrag(); + this.resizeDragAndContextMenu(); this.placeCaretAtStart(uniqueID); $('#' + uniqueID).focus(); @@ -888,7 +913,7 @@ class SlideContentEditor extends React.Component { //CKEDITOR.instances.inlineContent.setData(newContent); this.hasChanges = true; //this.forceUpdate(); - this.resizeDrag(); + this.resizeDragAndContextMenu(); this.resize(); $('.pptx2html').css({'borderStyle': 'double', 'borderColor': 'rgba(218,102,25,0.5)'}); }, (reason) => { @@ -940,7 +965,7 @@ class SlideContentEditor extends React.Component { CKEDITOR.disableAutoInline = true; //if (typeof(CKEDITOR.instances.inlineSpeakerNotes) === 'undefined'){ CKEDITOR.inline('inlineSpeakerNotes', { - customConfig: '/assets/ckeditor_config_basic.js', + customConfig: '/assets/ckeditor_config_speaker_notes.js', toolbarGroups: [ //needed for Chrome initialization { name: 'basicstyles', items: ['Bold', 'Italic', 'Underline'] }, @@ -975,7 +1000,24 @@ class SlideContentEditor extends React.Component { //}); CKEDITOR.instances.inlineContent.on('instanceReady', (evt) => { - + CKEDITOR.instances.inlineContent.on('afterCommandExec', (evt) => { + if(evt.data.name === 'undo') { + console.log('undo pressed - initial CKeditor load'); + setTimeout(() => { + CKEDITOR.instances.inlineContent.fire('lockSnapshot'); + this.resetResizeDragContext(); + CKEDITOR.instances.inlineContent.fire('unlockSnapshot'); + }, 500); + } + if(evt.data.name === 'redo') { + console.log('redo pressed - initial CKeditor load'); + setTimeout(() => { + CKEDITOR.instances.inlineContent.fire('lockSnapshot'); + this.resetResizeDragContext(); + CKEDITOR.instances.inlineContent.fire('unlockSnapshot'); + }, 500); + } + }); this.finishLoading = true; //console.log('test'); CKEDITOR.instances.inlineContent.on( 'key', () => { @@ -996,9 +1038,9 @@ class SlideContentEditor extends React.Component { { //this.forceUpdate(); //this.addBorders(); - this.resizeDrag(); + this.resizeDragAndContextMenu(); - //console.log('resizeDrag and borders'); + //console.log('resizeDragAndContextMenu and borders'); //show that content is outside of pptx2html box //$('.pptx2html').css({'borderStyle': 'none none double none', 'borderColor': '#3366ff', 'box-shadow': '0px 100px 1000px #ff8787'}); $('.pptx2html').css({'borderStyle': 'double', 'borderColor': 'rgba(218,102,25,0.5)'}); @@ -1015,7 +1057,7 @@ class SlideContentEditor extends React.Component { //console.log('====ckeditor save button ok==== - refresh drag and menus'); //this.addBorders(); setTimeout(() => { - this.resizeDrag(); + this.resizeDragAndContextMenu(); this.hasChanges = true; ////this.forceUpdate(); }, 500); @@ -1035,7 +1077,7 @@ class SlideContentEditor extends React.Component { //this.addBorders(); setTimeout(() => { this.refreshCKeditor(); - this.resizeDrag(); + this.resizeDragAndContextMenu(); //this.forceUpdate(); this.hasChanges = true; }, 500); @@ -1126,17 +1168,13 @@ class SlideContentEditor extends React.Component { }); } - resizeDrag(){ + resizeDragAndContextMenu(){ //http://jqueryui.com/resizable/ - //http://interface.eyecon.ro/docs/resizable // TODO -> create SVG around draggable element with points/blocks for resize handlers // OR by emulating textarea - http://stackoverflow.com/questions/18427555/jquery-textarea-draggable - // or: make images JQUERY draggable, and have original button for text input - too complex + // or: make images JQUERY draggable, and have original button for text input // - // TODO: Make background outside slide grey! - - //***************position mode - default/start//*************** let slideEditorContext = this; //set slideEditorContext inside doubleclick callbacks @@ -1302,22 +1340,11 @@ class SlideContentEditor extends React.Component { //give each input box element a context menu (hide/overlap CKeditor context menu) this.contextMenuAll(); - //***************content mode//*************** - //TODO: on undo (ctr-l Z) - restore resize/drag elements previously removed //TODO: on editing source in CKeditor - restore resize/drag elements //TODO: caret position is reset in firefox, except for when typing //TODO: call emitChange() for new actions //TODO: if you select an element and starty typing: then directly switch to edit mode - //set double click event for input box - ondoubleclick - remove dragable and set cursor to auto for editing content - /* - $('.pptx2html [style*="absolute"]').not('.drawing').dblclick(function(evt) { - if (!$(this).hasClass('editMode')) - { - slideEditorContext.setEditMode(evt, slideEditorContext, $(this).attr('id'), false); - } - }); - */ } enterEditKey(evt, slideEditorContext, clickMenuFocus, previousCaret){ @@ -1464,6 +1491,7 @@ class SlideContentEditor extends React.Component { }); } contextMenuAll(){ + //performance improvement - check if contextmenu already exists let slideEditorContext = this; //https://github.com/swisnl/jQuery-contextMenu //http://swisnl.github.io/jQuery-contextMenu/ @@ -1652,20 +1680,14 @@ class SlideContentEditor extends React.Component { } if (nextProps.SlideEditStore.undoClick === 'true' && nextProps.SlideEditStore.undoClick !== this.props.SlideEditStore.undoClick) { - //console.log('undo'); - //this.redoContent = this.props.SlideEditStore.content; //existing content is redocontent now - //this.props.SlideEditStore.content = this.oldContent; //oldcontent is restored + console.log('undo - via slide edit left panel'); CKEDITOR.instances.inlineContent.execCommand('undo'); - this.resizeDrag(); - ////this.forceUpdate(); + //CKEDITOR.instances.inlineContent.fire('undo'); } if (nextProps.SlideEditStore.redoClick === 'true' && nextProps.SlideEditStore.redoClick !== this.props.SlideEditStore.redoClick) { - //console.log('redo'); - //this.props.SlideEditStore.content = this.redoContent; //restore oringal content before undo + console.log('redo - via slide edit left panel'); CKEDITOR.instances.inlineContent.execCommand('redo'); - this.resizeDrag(); - ////this.forceUpdate(); } if (nextProps.SlideEditStore.addInputBox === 'true' && nextProps.SlideEditStore.addInputBox !== this.props.SlideEditStore.addInputBox) { @@ -1720,7 +1742,7 @@ class SlideContentEditor extends React.Component { } this.refreshCKeditor(); //this.resize(); - this.resizeDrag(); + this.resizeDragAndContextMenu(); } this.hasChanges = true; @@ -1786,7 +1808,7 @@ class SlideContentEditor extends React.Component { if($('.pptx2html').length) //if slide is in canvas mode { $('.pptx2html').append('
 
'); - this.resizeDrag(); + this.resizeDragAndContextMenu(); this.placeCaretAtStart(uniqueID); $('#'+uniqueID).focus(); this.hasChanges = true; @@ -1819,7 +1841,7 @@ class SlideContentEditor extends React.Component { $('.pptx2html [style*="absolute"]').on('mouseup', (evt) => { CKEDITOR.instances.inlineContent.getSelection().unlock(); }); - this.resizeDrag(); + this.resizeDragAndContextMenu(); this.placeCaretAtStart(uniqueID); $('#'+uniqueID).focus(); this.hasChanges = true; @@ -1835,7 +1857,7 @@ class SlideContentEditor extends React.Component { { let uniqueID = this.getuniqueID(); $('.pptx2html').append('
 
'); - this.resizeDrag(); + this.resizeDragAndContextMenu(); this.placeCaretAtStart(uniqueID); $('#'+uniqueID).focus(); this.hasChanges = true; @@ -1851,7 +1873,7 @@ class SlideContentEditor extends React.Component { { let uniqueID = this.getuniqueID(); $('.pptx2html').append('
 
'); - this.resizeDrag(); + this.resizeDragAndContextMenu(); this.placeCaretAtStart(uniqueID); $('#'+uniqueID).focus(); this.hasChanges = true; @@ -1890,7 +1912,7 @@ class SlideContentEditor extends React.Component { if($('.pptx2html').length) //if slide is in canvas mode { //this.uniqueIDAllElements(); - this.resizeDrag(); + this.resizeDragAndContextMenu(); } } if (nextProps.SlideEditStore.title !== '' && @@ -1966,7 +1988,7 @@ class SlideContentEditor extends React.Component { //console.log('====ckeditor save button ok==== - refresh drag and menus'); //this.addBorders(); setTimeout(() => { - this.resizeDrag(); + this.resizeDragAndContextMenu(); this.hasChanges = true; ////this.forceUpdate(); }, 500); @@ -2096,7 +2118,7 @@ class SlideContentEditor extends React.Component { //context.uniqueIDAllElements(localContext); context.uniqueIDAllElements(); - context.resizeDrag(); + context.resizeDragAndContextMenu(); ////this.forceUpdate(); } } diff --git a/components/Deck/SlideEditLeftPanel/SlideEditLeftPanel.js b/components/Deck/SlideEditLeftPanel/SlideEditLeftPanel.js index 111c2826f..eacc67c74 100644 --- a/components/Deck/SlideEditLeftPanel/SlideEditLeftPanel.js +++ b/components/Deck/SlideEditLeftPanel/SlideEditLeftPanel.js @@ -3,6 +3,8 @@ import React from 'react'; import {connectToStores} from 'fluxible-addons-react'; import {Button, Icon, Input, TextArea} from 'semantic-ui-react'; import NavigationPanel from './../NavigationPanel/NavigationPanel'; +import undoClick from '../../../actions/slide/undoClick'; +import redoClick from '../../../actions/slide/redoClick'; import addInputBox from '../../../actions/slide/addInputBox'; import uploadMediaClick from '../../../actions/slide/uploadMediaClick'; import uploadVideoClick from '../../../actions/slide/uploadVideoClick'; @@ -66,6 +68,12 @@ class SlideEditLeftPanel extends React.Component { } } } + handleUndoClick(){ + this.context.executeAction(undoClick, {}); + } + handleRedoClick(){ + this.context.executeAction(redoClick, {}); + } handleAddInputBox(){ this.context.executeAction(addInputBox, {}); } @@ -252,8 +260,14 @@ class SlideEditLeftPanel extends React.Component { //console.log(event.key); //if(event.key === 'Enter' || event.key === ' '){ if(event.key === 'Enter'){ - console.log('enter key'); + //console.log('enter key'); switch (param) { + case 'handleUndoClick': + this.handleUndoClick(); + break; + case 'handleRedoClick': + this.handleRedoClick(); + break; case 'handleBack': this.handleBack(); break; @@ -341,11 +355,24 @@ class SlideEditLeftPanel extends React.Component { const whiteText = { fontColor: 'white', }; + let undoredoList = ( +
+ this.handleKeyPress(evt, 'handleUndoClick')}> + + + this.handleKeyPress(evt, 'handleRedoClick')}> + + +
+ ); + let backKey = ( + this.handleKeyPress(evt, 'handleBack')}> + + + ); let otherList = (
- this.handleKeyPress(evt, 'handleBack')}> - - + {backKey} this.handleKeyPress(evt, 'handleEmbedClick')}> @@ -369,9 +396,7 @@ class SlideEditLeftPanel extends React.Component { let embedOptions = (
- this.handleKeyPress(evt, 'handleBackEmbed')}> - - + {backKey} @@ -422,9 +447,7 @@ class SlideEditLeftPanel extends React.Component { //id="handleTemplatechange" className="ui field search selection dropdown" data-position="top center" data-inverted="" ref="templateList" let templateList = (
- this.handleKeyPress(evt, 'handleBack')}> - - + {backKey} this.handleKeyPress(evt, 'handleTemplatechange', '2')}>

@@ -497,9 +520,7 @@ class SlideEditLeftPanel extends React.Component { let propertiesContent = ( - this.handleKeyPress(evt, 'handleBack')}> - - + {backKey} this.handleKeyPress(evt, 'handleTitleClick')}> @@ -524,9 +545,7 @@ class SlideEditLeftPanel extends React.Component { let titleChangeContent = (
- this.handleKeyPress(evt, 'handleTitleBack')}> - - + {backKey} {this.state.titleMissingError === false ? '' : }
@@ -545,9 +564,7 @@ class SlideEditLeftPanel extends React.Component { let sizeContent = (