andyhill Posted January 10, 2022 Share Posted 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; Quote Link to comment Share on other sites More sharing options...
Sherzod Posted January 11, 2022 Share Posted January 11, 2022 Hello, 4 hours ago, andyhill said: This code... Just use Undo, Redo methods. Quote Link to comment Share on other sites More sharing options...
andyhill Posted January 11, 2022 Author Share Posted January 11, 2022 Thanks Sherzod, still curious why JavaScript failed. Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.