Add setting for mode switch tabs (#95)

taqueci · Feb 26, 2021 · ae312cb · ae312cb
1 parent 77d584a
commit ae312cb
Show file tree

Hide file tree

Showing 6 changed files with 80 additions and 37 deletions.
diff --git a/app/views/redmine_wysiwyg_editor/_redmine_wysiwyg_editor_partial.html.erb b/app/views/redmine_wysiwyg_editor/_redmine_wysiwyg_editor_partial.html.erb
@@ -165,6 +165,7 @@ function initRedmineWysiwygEditor() {
   rwe.setHtmlTagAllowed(<%= html_tag_allowed ? 'true' : 'false' %>);
   rwe.setAutocomplete('<%= escape_javascript auto_complete_issues_path %>',
                       '<%= escape_javascript editor_users_path %>');
+  rwe.setTabModeSwitch(<%= (Setting.plugin_redmine_wysiwyg_editor[:visual_editor_mode_switch_tab] == '1') ? 'true' : 'false' %>);
 
   var pid = <%= (@project && @project.id) ? @project.id : 'null' %> ||
       $('#issue_project_id').val();

diff --git a/app/views/redmine_wysiwyg_editor/_setting.html.erb b/app/views/redmine_wysiwyg_editor/_setting.html.erb
@@ -0,0 +1,5 @@
+<p>
+  <label for="settings_visual_editor_mode_switch_tab"><%= l(:option_visual_editor_mode_switch_tab) %></label>
+  <%= hidden_field_tag 'settings[visual_editor_mode_switch_tab]', '0' %>
+  <%= check_box_tag 'settings[visual_editor_mode_switch_tab]', '1', @settings[:visual_editor_mode_switch_tab] == '1' %>
+</p>
diff --git a/assets/javascripts/redmine_wysiwyg_editor.js b/assets/javascripts/redmine_wysiwyg_editor.js
@@ -108,6 +108,10 @@ RedmineWysiwygEditor.prototype.setAutocomplete = function(issue, user) {
   this._autocomplete = {issue: issue, user: user};
 };
 
+RedmineWysiwygEditor.prototype.setTabModeSwitch = function(isTab) {
+  this._tabModeSwitch = isTab;
+};
+
 RedmineWysiwygEditor.prototype.init = function(editorSetting) {
   var self = this;
 
@@ -119,48 +123,64 @@ RedmineWysiwygEditor.prototype.init = function(editorSetting) {
 
   var previewHtml = '<div class="wysiwyg-editor-preview wiki"></div>';
 
+  var modeTabHtml = self._tabModeSwitch ? '' :
+      '<div class="wysiwyg-editor-tab"><ul>' +
+      '<li><a href="#" data-type="text" class="active">' +
+      self._i18n[self._format] + '</a></li>' +
+      '<li><a href="#" data-type="visual">' +
+      self._i18n.visual + '</a></li>' +
+      '<li><a href="#" data-type="preview">' +
+      self._i18n.preview + '</a></li>' +
+      '</ul></div>';
+
   self._jstEditorTextArea = self._jstEditor.find('textarea');
 
   self._jstEditorTextArea.after(previewHtml);
-  self._jstEditor.after(editorHtml);
+  self._jstEditor.after(editorHtml + modeTabHtml);
 
   self._visualEditor = container.find('.wysiwyg-editor').hide();
   self._preview = container.find('.wysiwyg-editor-preview').hide();
+  self._modeTab = container.find('.wysiwyg-editor-tab');
 
   var jstTabs = container.find('.jstTabs');
   var jstElements = container.find('.jstElements');
 
   if (jstTabs.length > 0) {
-    self._jstElements = jstElements;
-    self._tabsUl = jstTabs[0].firstChild;
-    self._tabsUl.removeChild(self._tabsUl.firstChild);
-    self._tabsUl.removeChild(self._tabsUl.firstChild);
-
-    /* global jsToolBar, jsTab */
-
-    jsToolBar.strings['rwe-preview'] = self._i18n.preview;
-    var prvtab = new jsTab('rwe-preview', false);
-    prvtab.onclick = function(){
-      self._changeMode('preview');
-      return false;
-    };
-    self._tabsUl.prepend(prvtab);
-
-    jsToolBar.strings['rwe-visual'] = self._i18n.visual;
-    var vistab = new jsTab('rwe-visual', false);
-    vistab.onclick = function() {
-      self._changeMode('visual');
-      return false;
-    };
-    self._tabsUl.prepend(vistab);
-
-    jsToolBar.strings['rwe-text'] = self._i18n[self._format];
-    var stdtab = new jsTab('rwe-text', true);
-    stdtab.onclick = function() {
-      self._changeMode('text');
-      return false;
-    };
-    self._tabsUl.prepend(stdtab);
+    if (self._tabModeSwitch) {
+      self._jstElements = jstElements;
+      self._tabsUl = jstTabs[0].firstChild;
+      self._tabsUl.removeChild(self._tabsUl.firstChild);
+      self._tabsUl.removeChild(self._tabsUl.firstChild);
+
+      /* global jsToolBar, jsTab */
+
+      jsToolBar.strings['rwe-preview'] = self._i18n.preview;
+      var prvtab = new jsTab('rwe-preview', false);
+      prvtab.onclick = function(){
+        self._changeMode('preview');
+        return false;
+      };
+      self._tabsUl.prepend(prvtab);
+
+      jsToolBar.strings['rwe-visual'] = self._i18n.visual;
+      var vistab = new jsTab('rwe-visual', false);
+      vistab.onclick = function() {
+        self._changeMode('visual');
+        return false;
+      };
+      self._tabsUl.prepend(vistab);
+
+      jsToolBar.strings['rwe-text'] = self._i18n[self._format];
+      var stdtab = new jsTab('rwe-text', true);
+      stdtab.onclick = function() {
+        self._changeMode('text');
+        return false;
+      };
+      self._tabsUl.prepend(stdtab);
+    } else {
+      $('#content .jstBlock .jstTabs ul li:not(.tab-elements)').hide();
+      self._jstElements = jstTabs;
+    }
 
     self._oldPreviewAccess = false;
     self._preview.addClass('wiki-preview');
@@ -169,6 +189,11 @@ RedmineWysiwygEditor.prototype.init = function(editorSetting) {
     self._oldPreviewAccess = true;
   }
 
+  self._modeTab.on('click', 'li a', function(e) {
+    e.preventDefault();
+    self._changeMode($(this).data('type'));
+  });
+
   self._defaultMode =
     (('localStorage' in window) && (window.localStorage !== null)) ? {
       get: function() {
@@ -202,13 +227,20 @@ RedmineWysiwygEditor.prototype._changeMode = function(mode) {
 
   if (!self._editor) return false;
 
-  for (var i = 0; i < 3; i++) {
-    var thisTab = self._tabsUl.childNodes[i].firstChild;
-    if (thisTab.classList.contains('tab-rwe-' + mode)) {
-      thisTab.classList.add('selected');
-    } else {
-      thisTab.classList.remove('selected');
+  if (self._tabModeSwitch) {
+    for (var i = 0; i < 3; i++) {
+      var thisTab = self._tabsUl.childNodes[i].firstChild;
+      if (thisTab.classList.contains('tab-rwe-' + mode)) {
+        thisTab.classList.add('selected');
+      } else {
+        thisTab.classList.remove('selected');
+      }
     }
+  } else {
+    self._modeTab.find('li a').each(function() {
+      if ($(this).data('type') === mode) $(this).addClass('active');
+      else $(this).removeClass('active');
+    });
   }
 
   switch (mode) {

diff --git a/config/locales/en.yml b/config/locales/en.yml
@@ -1,3 +1,4 @@
 en:
   label_visual_editor: "Visual editor"
   label_insert_wiki_link: "Insert Wiki link"
+  option_visual_editor_mode_switch_tab: "Use tabs for mode switch"
diff --git a/config/locales/ja.yml b/config/locales/ja.yml
@@ -1,3 +1,4 @@
 ja:
   label_visual_editor: "ビジュアルエディタ"
   label_insert_wiki_link: "Wikiリンクの挿入"
+  option_visual_editor_mode_switch_tab: "モード切り替えにタブを使用する"
diff --git a/init.rb b/init.rb
@@ -5,6 +5,9 @@
   version '0.20.1'
   url 'https://github.com/taqueci/redmine_wysiwyg_editor'
   author_url 'https://github.com/taqueci'
+
+  settings default: { settings_visual_editor_mode_switch_tab: '' },
+           partial: 'redmine_wysiwyg_editor/setting'
 end
 
 require_dependency 'redmine_wysiwyg_editor'