Allow to Fork Script, with editor file

Still in development
tanghoong · Sep 3, 2021 · 0ab33d8 · 0ab33d8
1 parent 84369ef
commit 0ab33d8
Show file tree

Hide file tree

Showing 5 changed files with 111 additions and 9 deletions.
diff --git a/demo.php b/demo.php
@@ -79,6 +79,8 @@
         // start from here
         // $cui = new ChatUI();
         $cui = new ChatUI([
+            // 'allowForkScript' => 'https://chat-editor.tanghoong.com',  // default:null
+            'allowForkScript' => 'editor.php',  // default:null
             'chatHeaderSize' => 'large' // default:normal,small,large
         ]);
         // echo '<pre>';
@@ -95,10 +97,33 @@
         echo $cui->showCasts(); // For header introduction, header button
         echo $cui->render();
 
-
         // Output for other format
         // echo $cui->output();
         // ?>
-
+        <style>
+        .rawscript-chatblock-editor button{
+            display: block;  
+        }
+        </style>
+        <script async defer>
+            /* Ignore below, no copy needed */
+            function toggleHeight() {
+                var rawscriptContainer = document.querySelector(".rawscript-chatblock-container"); 
+                var rawscriptContainerToggle = document.querySelector(".rawscript-chatblock-container a"); 
+                var toggleStatus = rawscriptContainerToggle.dataset.toggle;
+                if( rawscriptContainerToggle.dataset.toggle == 'collapse' )
+                {
+                    rawscriptContainerToggle.dataset.toggle = 'expand';
+                    rawscriptContainer.style.height = '100%';
+                }else{
+                    rawscriptContainerToggle.dataset.toggle = 'collapse';
+                    rawscriptContainer.style.height = '30px';
+                }
+            }
+            document.addEventListener('DOMContentLoaded', function() {
+                var rawscriptContainerToggle = document.querySelector(".rawscript-chatblock-container a"); 
+                rawscriptContainerToggle.addEventListener("click", toggleHeight, false);
+            });
+        </script>
     </body>
 </html>
diff --git a/editor.php b/editor.php
@@ -0,0 +1,50 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <!-- Required meta tags -->
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+
+    <!-- Bootstrap CSS -->
+    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
+        integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
+    <title>Hello, world!</title>
+    <style>
+        #textarea-rawscript {
+            width: 100%;
+            height: 100%;
+            padding: 10px;
+        }
+    </style>
+</head>
+
+<body>
+    <h1>Editor (alpha)</h1>
+    <!-- Option 1: Bootstrap Bundle with Popper -->
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
+        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous">
+    </script>
+    <div class="container">
+        <div class="row">
+            <div class="col-1">
+                Tools
+            </div>
+            <div class="col-6">
+                <?php
+                $content = $_POST['rawscript'];
+
+                echo '<textarea id="textarea-rawscript" class="form-control" rows="15" placeholder="Rawscript">';
+                echo $content;
+                echo '</textarea>';
+
+                ?>
+            </div>
+            <div class="col">
+                Preview
+            </div>
+        </div>
+    </div>
+</body>
+
+</html>
diff --git a/sample/test.raw.txt b/sample/test.raw.txt
@@ -163,9 +163,6 @@ narrator：”小霖“ 无视了要求
 企鹅跳：我想睡了，晚安(○｀ 3′○)
 梦：晚安(○｀ 3′○)
 
-linebreak：
-rawscript：
-
 _I_LOVE_EMANYAN_
 
 梦@//i.pinimg.com/736x/d4/79/23/d479233a82bd58e06359b8f770c4d3db.jpg

diff --git a/src/ChatBlock.php b/src/ChatBlock.php
@@ -32,7 +32,7 @@ function __construct($newObj=null)
         $this->narratorList = ['Narrator','narrator','系统','旁白'];
         // default setting
         $oriObj = [
-            'allowForkScript' => false,
+            'allowForkScript' => null,
             'chatHeaderSize'  => 'normal',
         ];
         if(is_null($newObj))
@@ -286,6 +286,8 @@ public function render(){
             }
         }
         $tempHtml .= '</div>';
+        $tempHtml .= '<hr/>';
+        $tempHtml .= $this->render_rawdata_full(null,$this->rawData);
         // $this->output = $tempHtml;
         // return $this->output;
         return $tempHtml;
@@ -386,11 +388,16 @@ private function render_rawdata_full($dialogue, $rawData)
     {
         // $your_array = explode("\n", $rawData);
         // $arr = explode("\n", $your_array);
-        $tempHtml  = '<div class="readingStory-changes well margin-top-2x padding-sm">';
+        $tempHtml  = '<div class="readingStory-changes well margin-top-2x padding-sm rawscript-chatblock-container">';
         $tempHtml .= '<a class="btn btn-default btn-xs" data-toggle="collapse" data-target="#readingStory-changes-chatblock">显示原始对话剧本</a>';
-        if($this->settings->allowForkScript)
+        if(isset($this->settings->allowForkScript))
         {
-            $tempHtml .= '<a class="btn btn-default btn-xs" href="#" target="_blank">拷贝对话剧本</a>';
+            $tempHtml .= '<div id="rawscript-chatblock-editor" class="rawscript-chatblock-editor">';
+            $tempHtml .= '<form method="POST" target="_blank" action="'.$this->settings->allowForkScript.'">';
+            $tempHtml .= '<button type="submit" class="btn btn-default btn-xs">拷贝对话剧本</button><br/>';
+            $tempHtml .= '<textarea name="rawscript">'.$rawData.'</textarea>';
+            $tempHtml .= '</div>';
+            $tempHtml .= '</form>';
         }
         $tempHtml .= '<pre id="readingStory-changes-chatblock" class="margin-top-lg collapse"><code>'.($rawData).'</code></pre>';
         $tempHtml .= '</div>';

diff --git a/src/chatblock.css b/src/chatblock.css
@@ -333,4 +333,27 @@
   display: flex;
   flex-direction: row;
   justify-content: start;
+}
+
+.rawscript-chatblock-container{
+  position: relative;
+}
+
+.rawscript-chatblock-container a{
+  cursor: pointer;
+}
+
+.rawscript-chatblock-editor{
+  position: absolute;
+  top: 0px;
+  right: 10px;
+}
+
+.rawscript-chatblock-editor textarea{
+  display: none;
+}
+
+.rawscript-chatblock-container{
+  height: 30px;
+  overflow: auto;
 }