Add rich text editor to New topic pagev0.5.1

4 files changed, 81 insertions, 59 deletions

diff --git a/src/application/views/form_addpost.php b/src/application/views/form_addpost.php
index 9e617d9..b2fb2f2 100644
--- a/src/application/views/form_addpost.php
+++ b/src/application/views/form_addpost.php
@@ -51,60 +51,3 @@ if (($_formError = RequestUtils::getAndClearFormError("addpost")) !== null) {
 </div>
 <button type="submit" class="btn btn-success"><?= __("Post reply") ?> <span class="fa fa-send" aria-hidden="true"></span></button>
 </form>
-
-<script type="text/javascript">
-    $(function() {
-        function insertAroundSelection(textarea, before, after) {
-            var start = textarea.selectionStart;
-            var end = textarea.selectionEnd;
-            var text = textarea.value;
-            var pre = text.substring(0, start);
-            var inner = text.substring(start, end);
-            var post = text.substring(end);
-            start += before.length;
-            end += before.length;
-            text = pre + before + inner + after + post;
-            textarea.value = text;
-            textarea.focus();
-            textarea.selectionStart = start;
-            textarea.selectionEnd = end;
-        }
-
-        function getTextarea(btn) {
-            return $($(btn).attr("data-area"))[0];
-        }
-
-        var commands = {
-            bold: function(textarea) {
-                insertAroundSelection(textarea, "[b]", "[/b]");
-            },
-            italic: function(textarea) {
-                insertAroundSelection(textarea, "[i]", "[/i]");
-            },
-            underline: function(textarea) {
-                insertAroundSelection(textarea, "[u]", "[/u]");
-            },
-            strikethrough: function(textarea) {
-                insertAroundSelection(textarea, "[s]", "[/s]");
-            },
-            sup: function(textarea) {
-                insertAroundSelection(textarea, "[^]", "[/^]");
-            },
-            sub: function(textarea) {
-                insertAroundSelection(textarea, "[_]", "[/_]");
-            },
-            quote: function(textarea) {
-                insertAroundSelection(textarea, "> ", "");
-            },
-            spoiler: function(textarea) {
-                insertAroundSelection(textarea, "[spoiler]", "[/spoiler]");
-            }
-        }
-
-        $("button[data-editor-command]").attr("data-toggle", "tooltip").attr("data-placement", "bottom").click(function() {
-            var command = $(this).attr("data-editor-command");
-            var textarea = getTextarea(this);
-            commands[command](textarea);
-        }).tooltip();
-    });
-</script>
diff --git a/src/application/views/form_newtopic.php b/src/application/views/form_newtopic.php
index d1d7e44..e7050c7 100644
--- a/src/application/views/form_newtopic.php
+++ b/src/application/views/form_newtopic.php
@@ -25,7 +25,29 @@ if (($_formError = RequestUtils::getAndClearFormError("newtopic")) !== null) {
 </div>
 <div class="form-group">
     <label for="i_message"><?= __("Message:") ?></label>
-    <textarea class="form-control" id="i_message" name="message" required rows="12" cols="60" style="resize:vertical;max-height:499px"><?= htmlentities($lastForm["message"] ?? "") ?></textarea>
+    <div class="panel panel-default">
+        <div class="panel-heading" style="padding:4px">
+            <div class="btn-toolbar" role="toolbar">
+                <div class="btn-group" role="group">
+                    <button data-area="#i_message" title="<?= __("Bold") ?>" data-editor-command="bold" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-bold"></i></button>
+                    <button data-area="#i_message" title="<?= __("Italic") ?>" data-editor-command="italic" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-italic"></i></button>
+                    <button data-area="#i_message" title="<?= __("Underlined") ?>" data-editor-command="underline" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-underline"></i></button>
+                    <button data-area="#i_message" title="<?= __("Strikethrough") ?>" data-editor-command="strikethrough" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-strikethrough"></i></button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button data-area="#i_message" title="<?= __("Superscript") ?>" data-editor-command="sup" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-superscript"></i></button>
+                    <button data-area="#i_message" title="<?= __("Subscript") ?>" data-editor-command="sub" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-subscript"></i></button>
+                </div>
+                <div class="btn-group" role="group">
+                    <button data-area="#i_message" title="<?= __("Quote") ?>" data-editor-command="quote" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-quote-left"></i></button>
+                    <button data-area="#i_message" title="<?= __("Spoiler") ?>" data-editor-command="spoiler" type="button" class="btn btn-default btn-xs"><i class="fa fa-fw fa-eye"></i></button>
+                </div>
+            </div>
+        </div>
+        <div class="panel-body" style="padding:0">
+            <textarea class="form-control" id="i_message" name="message" required rows="12" cols="60" style="resize:vertical;max-height:499px;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0;margin:-1px;width:calc(100% + 2px)"><?= htmlentities($lastForm["message"] ?? "") ?></textarea>
+        </div>
+    </div>
 </div>
 <div class="form-group">
     <label for="i_files"><?= __("Attachments: <small>(max. %max_attachment_count% files, max. %max_attachment_size% MiB each)</small>", [
diff --git a/src/application/views/template_end.php b/src/application/views/template_end.php
index 9207170..b162def 100644
--- a/src/application/views/template_end.php
+++ b/src/application/views/template_end.php
@@ -43,6 +43,63 @@
 </div>
 </footer>
 
+<script type="text/javascript">
+    $(function() {
+        function insertAroundSelection(textarea, before, after) {
+            var start = textarea.selectionStart;
+            var end = textarea.selectionEnd;
+            var text = textarea.value;
+            var pre = text.substring(0, start);
+            var inner = text.substring(start, end);
+            var post = text.substring(end);
+            start += before.length;
+            end += before.length;
+            text = pre + before + inner + after + post;
+            textarea.value = text;
+            textarea.focus();
+            textarea.selectionStart = start;
+            textarea.selectionEnd = end;
+        }
+
+        function getTextarea(btn) {
+            return $($(btn).attr("data-area"))[0];
+        }
+
+        var commands = {
+            bold: function(textarea) {
+                insertAroundSelection(textarea, "[b]", "[/b]");
+            },
+            italic: function(textarea) {
+                insertAroundSelection(textarea, "[i]", "[/i]");
+            },
+            underline: function(textarea) {
+                insertAroundSelection(textarea, "[u]", "[/u]");
+            },
+            strikethrough: function(textarea) {
+                insertAroundSelection(textarea, "[s]", "[/s]");
+            },
+            sup: function(textarea) {
+                insertAroundSelection(textarea, "[^]", "[/^]");
+            },
+            sub: function(textarea) {
+                insertAroundSelection(textarea, "[_]", "[/_]");
+            },
+            quote: function(textarea) {
+                insertAroundSelection(textarea, "> ", "");
+            },
+            spoiler: function(textarea) {
+                insertAroundSelection(textarea, "[spoiler]", "[/spoiler]");
+            }
+        }
+
+        $("button[data-editor-command]").attr("data-toggle", "tooltip").attr("data-placement", "bottom").click(function() {
+            var command = $(this).attr("data-editor-command");
+            var textarea = getTextarea(this);
+            commands[command](textarea);
+        }).tooltip();
+    });
+</script>
+
 <script>
 $(function() {
     var _messages = <?= json_encode([
diff --git a/src/index.php b/src/index.php
index 4fe060c..156563f 100644
--- a/src/index.php
+++ b/src/index.php
@@ -12,7 +12,7 @@ use mystic\forum\utils\RequestUtils;
 
 header_remove("X-Powered-By");
 
-const MYSTICBB_VERSION = "0.5.0";
+const MYSTICBB_VERSION = "0.5.1";
 
 if (($_SERVER["HTTP_USER_AGENT"] ?? "") === "") {
     http_response_code(403);