Skip to content

Swik 1952 drag and resize boxes dissapear after pressing undo #975

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kadevgraaf wants to merge 8 commits into
base: master
Choose a base branch
from
Open

Swik 1952 drag and resize boxes dissapear after pressing undo #975

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
05a0133
initial attempt
kadevgraaf Jun 26, 2018
7cd62e3
Merge branch 'master' into SWIK-1952---Drag-and-resize-boxes-dissapea…
kadevgraaf Aug 21, 2018
d8e4635
Add buttons, locksnapshot when refreshing dragandresize
kadevgraaf Aug 21, 2018
0107e4a
Better buttons in left slide edit menu
kadevgraaf Aug 21, 2018
6e43e4b
Improve left slide edit menu undo and redo buttons
kadevgraaf Aug 21, 2018
cb4a233
Merge branch 'master' into SWIK-1952---Drag-and-resize-boxes-dissapea…
abijames Sep 7, 2018
652efe7
Merge branch 'master' into SWIK-1952---Drag-and-resize-boxes-dissapea…
ali1k Sep 10, 2018
d511f44
Merge branch 'master' into SWIK-1952---Drag-and-resize-boxes-dissapea…
ali1k Sep 18, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
0 assets/ckeditor_config_basic.js → assets/ckeditor_config_speaker_notes.js
View file
Open in desktop
File renamed without changes.
114 changes: 68 additions & 46 deletions components/Deck/ContentPanel/SlideModes/SlideEditPanel/SlideContentEditor.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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(){
Expand All @@ -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
Expand All @@ -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);
Expand All @@ -650,7 +669,7 @@ class SlideContentEditor extends React.Component {
//this.addBorders();
setTimeout(() => {
this.refreshCKeditor();
this.resizeDrag();
this.resizeDragAndContextMenu();
//this.forceUpdate();
this.hasChanges = true;
}, 500);
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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();
Expand Down Expand Up @@ -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) => {
Expand Down Expand Up @@ -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'] },
Expand Down Expand Up @@ -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', () => {
Expand All @@ -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)'});
Expand All @@ -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);
Expand All @@ -1035,7 +1077,7 @@ class SlideContentEditor extends React.Component {
//this.addBorders();
setTimeout(() => {
this.refreshCKeditor();
this.resizeDrag();
this.resizeDragAndContextMenu();
//this.forceUpdate();
this.hasChanges = true;
}, 500);
Expand Down Expand Up @@ -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
//<g><path fill="#000" fill-opacity="0" stroke="#000" stroke-opacity="0" stroke-width="10550.76923076923" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" pointer-events="visiblePainted" d="M 4331 28073 L 318671 28073 318671 170081 4331 170081 Z"></path></g>
// TODO: Make background outside slide grey!

//***************position mode - default/start//***************

let slideEditorContext = this; //set slideEditorContext inside doubleclick callbacks

Expand Down Expand Up @@ -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){
Expand Down Expand Up @@ -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/
Expand Down Expand Up @@ -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)
{
Expand Down Expand Up @@ -1720,7 +1742,7 @@ class SlideContentEditor extends React.Component {
}
this.refreshCKeditor();
//this.resize();
this.resizeDrag();
this.resizeDragAndContextMenu();
}
this.hasChanges = true;

Expand Down Expand Up @@ -1786,7 +1808,7 @@ class SlideContentEditor extends React.Component {
if($('.pptx2html').length) //if slide is in canvas mode
{
$('.pptx2html').append('<div id="'+uniqueID+'" style="position: absolute; top: 300px; left: 250px; width: 400px; height: 300px; z-index: '+(this.getHighestZIndex() + 10)+';"><span>&nbsp;</span></div>');
this.resizeDrag();
this.resizeDragAndContextMenu();
this.placeCaretAtStart(uniqueID);
$('#'+uniqueID).focus();
this.hasChanges = true;
Expand Down Expand Up @@ -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;
Expand All @@ -1835,7 +1857,7 @@ class SlideContentEditor extends React.Component {
{
let uniqueID = this.getuniqueID();
$('.pptx2html').append('<div id="'+uniqueID+'" style="position: absolute; width: 300px; height:200px; top: 200px; left: 200px; z-index: '+(this.getHighestZIndex() + 10)+';"><span>&nbsp;</span></div>');
this.resizeDrag();
this.resizeDragAndContextMenu();
this.placeCaretAtStart(uniqueID);
$('#'+uniqueID).focus();
this.hasChanges = true;
Expand All @@ -1851,7 +1873,7 @@ class SlideContentEditor extends React.Component {
{
let uniqueID = this.getuniqueID();
$('.pptx2html').append('<div id="'+uniqueID+'" style="position: absolute; width: 400px; height:400px; top: 250px; left: 200px; z-index: '+(this.getHighestZIndex() + 10)+';"><span>&nbsp;</span></div>');
this.resizeDrag();
this.resizeDragAndContextMenu();
this.placeCaretAtStart(uniqueID);
$('#'+uniqueID).focus();
this.hasChanges = true;
Expand Down Expand Up @@ -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 !== '' &&
Expand Down Expand Up @@ -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);
Expand Down Expand Up @@ -2096,7 +2118,7 @@ class SlideContentEditor extends React.Component {

//context.uniqueIDAllElements(localContext);
context.uniqueIDAllElements();
context.resizeDrag();
context.resizeDragAndContextMenu();
////this.forceUpdate();
}
}
Expand Down
Loading