implement wiki input icon

doytsujin · May 12, 2017 · 4a2121f · 4a2121f
1 parent 0f2db5f
commit 4a2121f
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 74 deletions.
diff --git a/public/js/icon-input.js b/public/js/icon-input.js
@@ -0,0 +1,55 @@
+function insertAtCaret(target, str) {
+  var obj = $(target);
+  obj.focus();
+  if(navigator.userAgent.match(/MSIE/)) {
+    var r = document.selection.createRange();
+    r.text = str;
+    r.select();
+  } else {
+    var s = obj.val();
+    var p = obj.get(0).selectionStart;
+    var np = p + str.length;
+    obj.val(s.substr(0, p) + str + s.substr(p));
+    obj.get(0).setSelectionRange(np, np);
+  }
+}
+
+function init_icon_input () {
+  // Comment icon
+  $('.icon-add-header-text').on('click', function () {
+    var textarea = $(this).closest('form').find('textarea');
+    insertAtCaret(textarea, "# ");
+  });
+  $('.icon-add-bold-text').on('click', function () {
+    var textarea = $(this).closest('form').find('textarea');
+    insertAtCaret(textarea, "****");
+  });
+  $('.icon-add-italic-text').on('click', function () {
+    var textarea = $(this).closest('form').find('textarea');
+    insertAtCaret(textarea, "__");
+  });
+  $('.icon-insert-quote').on('click', function () {
+    var textarea = $(this).closest('form').find('textarea');
+    insertAtCaret(textarea, "> ");
+  });
+  $('.icon-insert-code').on('click', function () {
+    var textarea = $(this).closest('form').find('textarea');
+    insertAtCaret(textarea, "``");
+  });
+  $('.icon-add-link').on('click', function () {
+    var textarea = $(this).closest('form').find('textarea');
+    insertAtCaret(textarea, "[](url)");
+  });
+  $('.icon-add-bulleted-list').on('click', function () {
+    var textarea = $(this).closest('form').find('textarea');
+    insertAtCaret(textarea, "- ");
+  });
+  $('.icon-add-numbered-list').on('click', function () {
+    var textarea = $(this).closest('form').find('textarea');
+    insertAtCaret(textarea, "1. ");
+  });
+  $('.icon-mension-user').on('click', function () {
+    var textarea = $(this).closest('form').find('textarea');
+    insertAtCaret(textarea, "@");
+  });
+}
diff --git a/templates/include/issue_comment_icon.html.ep b/templates/include/issue_comment_icon.html.ep
@@ -1,17 +1,17 @@
 <div class="issue-add-comment-icon">
-  <i class="issue-icon-add-header-text icon icon-font" title="Add header text"></i>
-  <i class="issue-icon-add-bold-text icon icon-bold" title="Add bold text"></i>
-  <i class="issue-icon-add-italic-text icon icon-italic" title="Add italic text"></i>
+  <i class="icon-add-header-text icon icon-font" title="Add header text"></i>
+  <i class="icon-add-bold-text icon icon-bold" title="Add bold text"></i>
+  <i class="icon-add-italic-text icon icon-italic" title="Add italic text"></i>
   <span style="margin-left:10px"></span>
-  <i class="issue-icon-insert-quote icon icon-comment" title="Insert a quote"></i>
-  <i class="issue-icon-insert-code icon icon-file" title="Insert a code"></i>
-  <i class="issue-icon-add-link icon icon-map-marker" title="Add a link"></i>
+  <i class="icon-insert-quote icon icon-comment" title="Insert a quote"></i>
+  <i class="icon-insert-code icon icon-file" title="Insert a code"></i>
+  <i class="icon-add-link icon icon-map-marker" title="Add a link"></i>
   <span style="margin-left:10px"></span>
-  <i class="issue-icon-add-bulleted-list icon icon-list" title="Add a bulleted list"></i>
-  <i class="issue-icon-add-numbered-list icon icon-th-list" title="Add a numbered list"></i>
+  <i class="icon-add-bulleted-list icon icon-list" title="Add a bulleted list"></i>
+  <i class="icon-add-numbered-list icon icon-th-list" title="Add a numbered list"></i>
   <span style="margin-left:10px"></span>
-  <i class="issue-icon-mension-user icon icon-user" title="Directory mension a user"></i>
+  <i class="icon-mension-user icon icon-user" title="Directory mension a user"></i>
   <!--
-    <i class="issue-icon-reference-issue icon icon-bookmark" title="Reference a issue or pull request"></i>
+    <i class="icon-reference-issue icon icon-bookmark" title="Reference a issue or pull request"></i>
   -->
 </div>
diff --git a/templates/include/js/issue.html.ep b/templates/include/js/issue.html.ep
@@ -1,19 +1,3 @@
-function insertAtCaret(target, str) {
-  var obj = $(target);
-  obj.focus();
-  if(navigator.userAgent.match(/MSIE/)) {
-    var r = document.selection.createRange();
-    r.text = str;
-    r.select();
-  } else {
-    var s = obj.val();
-    var p = obj.get(0).selectionStart;
-    var np = p + str.length;
-    obj.val(s.substr(0, p) + str + s.substr(p));
-    obj.get(0).setSelectionRange(np, np);
-  }
-}
-
 // Click write tab
 $('.issue-message-write-tab').on('click', function () {
   var form = $(this).closest('form');
@@ -99,41 +83,3 @@ $('.issue-message-update-btn').on('click', function () {
 
   return false;
 });
-
-// Comment icon
-$('.issue-icon-add-header-text').on('click', function () {
-  var textarea = $(this).closest('form').find('textarea');
-  insertAtCaret(textarea, "# ");
-});
-$('.issue-icon-add-bold-text').on('click', function () {
-  var textarea = $(this).closest('form').find('textarea');
-  insertAtCaret(textarea, "****");
-});
-$('.issue-icon-add-italic-text').on('click', function () {
-  var textarea = $(this).closest('form').find('textarea');
-  insertAtCaret(textarea, "__");
-});
-$('.issue-icon-insert-quote').on('click', function () {
-  var textarea = $(this).closest('form').find('textarea');
-  insertAtCaret(textarea, "> ");
-});
-$('.issue-icon-insert-code').on('click', function () {
-  var textarea = $(this).closest('form').find('textarea');
-  insertAtCaret(textarea, "``");
-});
-$('.issue-icon-add-link').on('click', function () {
-  var textarea = $(this).closest('form').find('textarea');
-  insertAtCaret(textarea, "[](url)");
-});
-$('.issue-icon-add-bulleted-list').on('click', function () {
-  var textarea = $(this).closest('form').find('textarea');
-  insertAtCaret(textarea, "- ");
-});
-$('.issue-icon-add-numbered-list').on('click', function () {
-  var textarea = $(this).closest('form').find('textarea');
-  insertAtCaret(textarea, "1. ");
-});
-$('.issue-icon-mension-user').on('click', function () {
-  var textarea = $(this).closest('form').find('textarea');
-  insertAtCaret(textarea, "@");
-});
diff --git a/templates/issue.html.ep b/templates/issue.html.ep
@@ -149,10 +149,15 @@
   layout 'common', title => "Issue - $user_id/$project_id #$issue_number";
 %>
 
+%= javascript '/js/icon-input.js';
+
 %= javascript begin
   $(document).ready(function() {
     %= include '/include/js/issue';
 
+    // Initialize icon input
+    init_icon_input();
+
     // Click labels btn
     $('.issue-labels-setting-btn').on('click', function () {
       var popup = $('.issue-labels-popup');

diff --git a/templates/wiki.html.ep b/templates/wiki.html.ep
@@ -164,8 +164,14 @@
   layout 'common', title => "Wiki - $user_id/$project_id";
 %>
 
+  %= javascript '/js/icon-input.js';
+
   %= javascript begin
     $(document).ready(function () {
+
+      // Initialize icon input
+      init_icon_input();
+
       // Repository URL buttons
       var http_rep_url = '<%= url_for("$user/$project.wiki.git")->to_abs %>';
 
@@ -286,20 +292,20 @@
                   <div class="wiki-message-write-tab wiki-add-comment-header-tab"><a href="javascript:void(0)">Write</a></div>
                   <div class="wiki-message-preview-tab wiki-add-comment-header-tab"><a class="disable" href="javascript:void(0)">Preview</a></div>
                   <div class="wiki-add-comment-icon">
-                    <i class="wiki-icon-add-header-text icon icon-font" title="Add header text"></i>
-                    <i class="wiki-icon-add-bold-text icon icon-bold" title="Add bold text"></i>
-                    <i class="wiki-icon-add-italic-text icon icon-italic" title="Add italic text"></i>
+                    <i class="icon-add-header-text icon icon-font" title="Add header text"></i>
+                    <i class="icon-add-bold-text icon icon-bold" title="Add bold text"></i>
+                    <i class="icon-add-italic-text icon icon-italic" title="Add italic text"></i>
                     <span style="margin-left:10px"></span>
-                    <i class="wiki-icon-insert-quote icon icon-comment" title="Insert a quote"></i>
-                    <i class="wiki-icon-insert-code icon icon-file" title="Insert a code"></i>
-                    <i class="wiki-icon-add-link icon icon-map-marker" title="Add a link"></i>
+                    <i class="icon-insert-quote icon icon-comment" title="Insert a quote"></i>
+                    <i class="icon-insert-code icon icon-file" title="Insert a code"></i>
+                    <i class="icon-add-link icon icon-map-marker" title="Add a link"></i>
                     <span style="margin-left:10px"></span>
-                    <i class="wiki-icon-add-bulleted-list icon icon-list" title="Add a bulleted list"></i>
-                    <i class="wiki-icon-add-numbered-list icon icon-th-list" title="Add a numbered list"></i>
+                    <i class="icon-add-bulleted-list icon icon-list" title="Add a bulleted list"></i>
+                    <i class="icon-add-numbered-list icon icon-th-list" title="Add a numbered list"></i>
                     <span style="margin-left:10px"></span>
-                    <i class="wiki-icon-mension-user icon icon-user" title="Directory mension a user"></i>
+                    <i class="icon-mension-user icon icon-user" title="Directory mension a user"></i>
                     <!--
-                      <i class="wiki-icon-reference-issue icon icon-bookmark" title="Reference a issue or pull request"></i>
+                      <i class="icon-reference-issue icon icon-bookmark" title="Reference a issue or pull request"></i>
                     -->
                   </div>
                 </div>