From 92709110efe443cc2445db0e987ec7271b2aa54a Mon Sep 17 00:00:00 2001
From: javacs3 <javacs3@gmail.com>
Date: Thu, 8 Aug 2019 23:04:46 +0800
Subject: [PATCH] add SerializeAddon in demo page

---
 demo/client.ts  | 17 +++++++++++++++++
 demo/index.html |  6 ++++++
 demo/style.css  |  6 ++++++
 3 files changed, 29 insertions(+)

diff --git a/demo/client.ts b/demo/client.ts
index 1ca35a6a..91c5d33d 100644
--- a/demo/client.ts
+++ b/demo/client.ts
@@ -43,6 +43,7 @@ declare let window: IWindowWithTerminal;
 let term;
 let fitAddon: FitAddon;
 let searchAddon: SearchAddon;
+let serializeAddon: SerializeAddon;
 let protocol;
 let socketURL;
 let socket;
@@ -96,6 +97,7 @@ if (document.location.pathname === '/test') {
   createTerminal();
   document.getElementById('dispose').addEventListener('click', disposeRecreateButtonHandler);
   document.getElementById('webgl').addEventListener('click', () => term.loadAddon(new WebglAddon()));
+  document.getElementById('serialize').addEventListener('click', serializeButtonHandler);
 }
 
 function createTerminal(): void {
@@ -116,6 +118,8 @@ function createTerminal(): void {
   typedTerm.loadAddon(searchAddon);
   fitAddon = new FitAddon();
   typedTerm.loadAddon(fitAddon);
+  serializeAddon = new SerializeAddon();
+  typedTerm.loadAddon(serializeAddon);
 
   window.term = term;  // Expose `term` to window for debugging purposes
   term.onResize((size: { cols: number, rows: number }) => {
@@ -323,3 +327,16 @@ function updateTerminalSize(): void {
   terminalContainer.style.height = height;
   fitAddon.fit();
 }
+
+function serializeButtonHandler(): void {
+  const output = serializeAddon.serialize();
+  const outputString = JSON.stringify(output);
+  console.log('serialize output', outputString);
+
+  document.getElementById('serialize-output').innerText = outputString;
+
+  if ((document.getElementById('write-to-terminal') as HTMLInputElement).checked) {
+    term.reset();
+    term.write(output);
+  }
+}
diff --git a/demo/index.html b/demo/index.html
index ef8f3891..4a4335ee 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -20,6 +20,12 @@
         <label>Case sensitive<input type="checkbox" id="case-sensitive"/></label>
         <label>Whole word<input type="checkbox" id="whole-word"/></label>
       </p>
+      <div>
+        <h3>SerializeAddon</h3>
+        <button id="serialize">Serialize the content of terminal</button>
+        <label>write to terminal<input type="checkbox" id="write-to-terminal"></label>
+        <label>Output <code id="serialize-output"></code></label>
+      </div>
     </div>
     <div>
       <h3>Options</h3>
diff --git a/demo/style.css b/demo/style.css
index b061dfcb..12728289 100644
--- a/demo/style.css
+++ b/demo/style.css
@@ -30,3 +30,9 @@ p {
     padding-left: 20px;
     vertical-align: top;
 }
+
+code {
+    padding: 2px 4px;
+    color: #c7254e;
+    background-color: #f9f2f4;
+}