簡易装飾機能を付けた

diff --git a/public/chat.ejs b/public/chat.ejs
index 93f2fb1..eedcddd 100644 (file)
--- a/public/chat.ejs
+++ b/public/chat.ejs
@@ -91,6 +91,16 @@
                        <div id="whisper_list">\r
                        </div>\r
                </a>\r
+               <a href="#" id="decoration_list_view">\r
+                       装飾\r
+                       <div id="decoration_list">\r
+                               <a href="#" onclick="AddBold()">太字</a>\r
+                               <a href="#" onclick="AddItalic()">斜体</a>\r
+                               <a href="#" onclick="AddStrike()">取り消し線</a>\r
+                               <a href="#" onclick="AddFontSize(3)">叫び声</a>\r
+                               <a href="#" onclick="AddFontSize(0.7)">ささやき声</a>\r
+                       </div>\r
+               </a>\r
                <form name="chat_form" accept-charset="UTF-8">\r
                        <input type="hidden" name="rno" value="<%= rno %>"></input>\r
                        <input type="hidden" name="_csrf" value="<%= token %>"></input>\r

diff --git a/public/scripts/chatclient.js b/public/scripts/chatclient.js
index 83cd6fb..fc9e227 100644 (file)
--- a/public/scripts/chatclient.js
+++ b/public/scripts/chatclient.js
@@ -47,6 +47,9 @@ $(document).ready(function(){
        $("#whisper_list_view").click(function(e){\r
                $("#whisper_list").toggle();\r
        });\r
+       $("#decoration_list_view").click(function(e){\r
+               $("#decoration_list").toggle();\r
+       });\r
        document.chat_form.onsubmit = function(){return false;};\r
        document.enter_form.onsubmit = function(){return false;};\r
 \r
@@ -248,6 +251,48 @@ function createNameList()
 function clickNameEventListener(e)\r
 {\r
        document.chat_form.message.value = "/tell " + $(this).text();\r
+       document.chat_form.message.focus();\r
+}\r
+\r
+function AddBold()\r
+{\r
+       InsertAtCaret(document.chat_form.message,"[b][/b]");\r
+}\r
+\r
+function AddItalic()\r
+{\r
+       InsertAtCaret(document.chat_form.message,"[i][/i]");\r
+}\r
+\r
+function AddStrike()\r
+{\r
+       InsertAtCaret(document.chat_form.message,"[s][/s]");\r
+}\r
+\r
+function AddFontSize(size)\r
+{\r
+       InsertAtCaret(document.chat_form.message,sprintf("[size=%f][/size]",size));\r
+}\r
+\r
+function InsertAtCaret(element, text) {\r
+    if (document.selection) {\r
+        element.focus();\r
+        var sel = document.selection.createRange();\r
+        sel.text = text;\r
+        element.focus();\r
+    } else if (element.selectionStart || element.selectionStart === 0) {\r
+        var startPos = element.selectionStart;\r
+        var endPos = element.selectionEnd;\r
+        var scrollTop = element.scrollTop;\r
+        element.value = element.value.substring(0, startPos) + text + element.value.substring(endPos, element.value.length);\r
+        element.focus();\r
+        element.selectionStart = startPos + text.length;\r
+        element.selectionEnd = startPos + text.length;\r
+        element.scrollTop = scrollTop;\r
+    } else {\r
+        element.value += text;\r
+        element.focus();\r
+    }\r
 }\r
 \r
 function enterEventListener()\r

diff --git a/public/stylesheets/enter.css b/public/stylesheets/enter.css
index 7930624..9dcd5b2 100644 (file)
--- a/public/stylesheets/enter.css
+++ b/public/stylesheets/enter.css
@@ -6,7 +6,7 @@
        margin-right:1em;
 }
 
-#whisper_list{
+#whisper_list,#decoration_list{
        display:none;
 }