HtmlMemo UnDo - Need Help Please

andyhill · January 10, 2022

This code does not work, please advise - Thanks in advance.

//////////////////////////////////////////////////////////////////////////////
HtmlMemo.BeginUpdate;
HtmlMemo.Lines.Clear;
s:= '<!DOCTYPE html><html>'+
' <head>'+
' <style>'+
' @media print'+
' {'+
' html, body'+
' {'+
' height: auto;'+
' font-size: 12pt;'+
' }'+
' }'+
' </style>'+
' </head>'+
' <body>';
HtmlMemo.Lines.Add(s);

//////////////////////////////////////////////////////////////////////////////
// Needed For UnDo/ReDo
HtmlMemo.Lines.Add('<div id="content"> ');

... html content

//////////////////////////////////////////////////////////////////////////////
// Content Div
s:= ' </div>';
HtmlMemo.Lines.Add(s);

s:= '<div id="buttons"> '+
' <button type="button" id="undo_btn">Undo</button> '+
' <button type="button" id="redo_btn">Redo</button> '+
'</div> '+
'<script type="text/javascript"> '+
' var StateUndoRedo = function() '+
' { '+
' var init = function(opts) '+
' { '+
' var self = this; '+
' self.opts = opts; '+
' if(typeof(self.opts[''undo_disabled'']) == ''undefined'') '+
' { '+
' self.opts[''undo_disabled''] = function() {}; '+
' } '+
' if(typeof(self.opts[''undo_enabled'']) == ''undefined'') '+
' { '+
' self.opts[''undo_enabled''] = function() {}; '+
' } '+
' if(typeof(self.opts[''redo_disabled'']) == ''undefined'') '+
' { '+
' self.opts[''redo_disabled''] = function() {}; '+
' } '+
' if(typeof(self.opts[''redo_enabled'']) == ''undefined'') '+
' { '+
' self.opts[''redo_enabled''] = function() {}; '+
' } '+
' if(typeof(self.opts[''restore'']) == ''undefined'') '+
' { '+
' self.opts[''restore''] = function() {}; '+
' } '+
' self.opts[''undo_disabled''](); '+
' self.opts[''redo_disabled''](); '+
' } // init '+
' var add = function(state) '+
' { '+
' var self = this; '+
' if(typeof(self.states) == ''undefined'') '+
' { '+
' self.states = []; '+
' } '+
' if(typeof(self.state_index) == ''undefined'') '+
' { '+
' self.state_index = -1; '+
' } '+
' self.state_index++; '+
' self.states[self.state_index] = state; '+
' self.states.length = self.state_index + 1; '+
' if(self.state_index > 0) '+
' { '+
' self.opts[''undo_enabled''](); '+
' } '+
' self.opts[''redo_disabled''](); '+
' } // add '+
' var undo = function() '+
' { '+
' var self = this; '+
' if(self.state_index > 0) '+
' { '+
' self.state_index--; '+
' if(self.state_index == 0) '+
' { '+
' self.opts[''undo_disabled''](); '+
' } else { '+
' self.opts[''undo_enabled''](); '+
' } '+
' self.opts[''redo_enabled''](); '+
' self.opts[''restore''](self.states[self.state_index]); '+
' } '+
' } // undo '+
' var redo = function() '+
' { '+
' var self = this; '+
' if(self.state_index < self.states.length) '+
' { '+
' self.state_index++; '+
' if(self.state_index == self.states.length - 1) '+
' { '+
' self.opts[''redo_disabled''](); '+
' } else { '+
' self.opts[''redo_enabled''](); '+
' } '+
' self.opts[''undo_enabled''](); '+
' self.opts[''restore''](self.states[self.state_index]); '+
' } '+
' } // redo '+
' var restore = function() '+
' { '+
' var self = this; '+
' self.opts[''restore''](self.states[self.state_index]); '+
' } // restore '+
' var clear = function() '+
' { '+
' var self = this; '+
' self.state_index = 0; '+
' //self.states = []; '+
' } // clear '+
' return '+
' { '+
' init: init, '+
' add: add, '+
' undo: undo, '+
' redo: redo, '+
' restore: restore, '+
' clear: clear '+
' }; // StateUndoRedo '+
' }; // StateUndoRedo '+
' //initialize object '+
' var o = new StateUndoRedo(); '+
' o.init( '+
' { '+
' ''undo_disabled'': function() '+
' { '+
' //make the undo button hidden '+
' document.getElementById("undo_btn").disabled = true; '+
' }, '+
' ''undo_enabled'': function() '+
' { '+
' //make the undo button visible '+
' document.getElementById("undo_btn").disabled = false; '+
' }, '+
' ''redo_disabled'': function() '+
' { '+
' //make the redo button hidden '+
' document.getElementById("redo_btn").disabled = true; '+
' }, '+
' ''redo_enabled'': function() '+
' { '+
' //make the redo button visible '+
' document.getElementById("redo_btn").disabled = false; '+
' }, '+
' ''restore'': function(state) '+
' { '+
' //replace the current content with the restored state content '+
' document.getElementById("content").innerHTML = state; '+
' } '+
' }); '+
' //initialize first state '+
' o.add(document.getElementById("content").innerHTML); '+
' o.restore(); '+
' o.clear(); '+
' //bind click events for undo/redo buttons '+
' document.getElementById("undo_btn").addEventListener("click", function() '+
' { '+
' o.undo(); '+
' }); '+
' document.getElementById("redo_btn").addEventListener("click", function() '+
' { '+
' o.redo(); '+
' }); '+
' //bind change events for content element '+
' document.getElementById(''content'').addEventListener("change", function(event) '+
' { '+
' // the following is required since vanilla JS innerHTML '+
' // does not capture user-changed values of inputs '+
' // so we set the attributes explicitly (use jQuery to avoid this) '+
' var elems = document.querySelectorAll("#content input"); '+
' for(var i = 0; i < elems.length; i++) '+
' { '+
' elems[i].setAttribute("value", elems[i].value); '+
' } '+
' //take a snapshot of the current state of the content element '+
' o.add(document.getElementById("content").innerHTML); '+
' }); '+
'</script> ';
HtmlMemo.Lines.Add(s);

//////////////////////////////////////////////////////////////////////////////
// Finalise
s:= ' </body>'+
'</html>';
HtmlMemo.Lines.Add(s);
HtmlMemo.EndUpdate;

Sherzod · January 11, 2022

Hello,

4 hours ago, andyhill said:

This code...

Just use Undo, Redo methods.

andyhill · January 11, 2022

Thanks Sherzod, still curious why JavaScript failed.

Sign In

HtmlMemo UnDo - Need Help Please

Recommended Posts

andyhill

Link to comment

Share on other sites

Sherzod

Link to comment

Share on other sites

andyhill

Link to comment

Share on other sites

Join the conversation

Browse

Activity