From 87e352099f2e8ad427f989b087b3533d81a9f228 Mon Sep 17 00:00:00 2001
From: yunche <yunche@qq.com>
Date: Tue, 1 Jan 2019 14:30:44 +0800
Subject: [PATCH] add the ability to add spaces adn conver images at the same
 times, and undo

---
 public/css/global.css |  6 ++++-
 public/js/content.js  | 61 ++++++++++++++++++++++++++++++++++++++-----
 2 files changed, 59 insertions(+), 8 deletions(-)

diff --git a/public/css/global.css b/public/css/global.css
index 8156d77..a7b1c0b 100644
--- a/public/css/global.css
+++ b/public/css/global.css
@@ -29,4 +29,8 @@ body {
 body, button, input, select, textarea {
     font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
     background-color: #eee;
-}
\ No newline at end of file
+}
+
+ .selected{
+    color: red;
+ }
\ No newline at end of file
diff --git a/public/js/content.js b/public/js/content.js
index 958c3c0..e829f6a 100644
--- a/public/js/content.js
+++ b/public/js/content.js
@@ -8,19 +8,40 @@ $(document).ready(function () {
      * 添加空格
      */
     addSpaceBtn.click(function () {
-        var content = getInputTextAreaVal();
+        //每次点击的时候，将当前的元素类动态地添加或删除selected
+        $(this).toggleClass('selected'); 
+
+       var content = getOutputTextAreaVal() == '' ? getInputTextAreaVal() : getOutputTextAreaVal();
+        //选中添加空格功能
+        if ($(this).hasClass('selected')) {
+            setOutputTextAreaVal(addSpace(content));
+        } else {
+            content = getInputTextAreaVal();
+            //取消添加空格功能
+            //保留转换图片功能
+            if (convertPicBtn.hasClass('selected')) {
+                content = changeImg(content);
+            }
+            setOutputTextAreaVal(content);
+        }
+    });
+    /**
+     * 添加空格
+     */
+    function addSpace(content) {
         content = content.replace(/([a-zA-Z0-9)'>)}\]])([\u4e00-\u9fa5])/g, "$1 $2");
         content = content.replace(/([\u4e00-\u9fa5])([a-zA-Z0-9('<{\]])/g, "$1 $2");
-        setOutputTextAreaVal(content);
-    });
+        return content;
+    }
 
     /*
      * 转换图片
      */
-    convertPicBtn.click(function () {
+    function changeImg(content) {
         var newContent = "";
         var picStartString = "![]";
-        var content = getInputTextAreaVal();
+        console.log(content);
+        //var content = getInputTextAreaVal();
         var preIdx = 0;
         var curIdx = content.indexOf(picStartString);
         while (curIdx != -1) {
@@ -35,14 +56,39 @@ $(document).ready(function () {
             curIdx = content.indexOf(picStartString, preIdx);
         }
         newContent += content.substring(preIdx, content.length);
-        newContent += 
-        setOutputTextAreaVal(newContent);
+        return newContent;
+    }
+    
+    /*
+     * 转换图片
+     */
+    convertPicBtn.click(function () {
+        //每次点击的时候，将当前的元素切换selected样式 
+        $(this).toggleClass('selected'); 
+
+        var content = getOutputTextAreaVal() == '' ? getInputTextAreaVal() : getOutputTextAreaVal();
+        //选中转换图片功能
+        if ($(this).hasClass('selected')) {
+            setOutputTextAreaVal(changeImg(content));
+        } else {
+            //取消转换图片功能
+             //是否保留添加空格功能
+             content = getInputTextAreaVal();
+            if (addSpaceBtn.hasClass('selected')) {
+                content = addSpace(content);
+            }
+            setOutputTextAreaVal(content);
+        }
     });
 
     function getInputTextAreaVal() {
         return inputTextarea.val();
     }
 
+    function getOutputTextAreaVal() {
+        return outputTextarea.val();
+    }
+
     function setOutputTextAreaVal(data) {
         outputTextarea.val(data);
     }
@@ -55,4 +101,5 @@ $(document).ready(function () {
     function buildImgPic(picString) {
         return '<div align="center">  <img src="' + picString + '" width=""/> </div><br>';
     }
+
 });