From b8f65596fe147a9557960e4cacd6594949e8d525 Mon Sep 17 00:00:00 2001 From: tohosaku Date: Sat, 22 Jan 2022 12:37:04 +0000 Subject: [PATCH 4/5] Support jsToolbar --- .../wiki_formatting/common_mark/helper.rb | 3 +- .../wiki_formatting/markdown/helper.rb | 3 +- lib/redmine/wiki_formatting/textile/helper.rb | 3 +- public/javascripts/jstoolbar/jstoolbar.js | 31 +++++- public/stylesheets/jstoolbar.css | 102 ++++++++++++++---- 5 files changed, 118 insertions(+), 24 deletions(-) diff --git a/lib/redmine/wiki_formatting/common_mark/helper.rb b/lib/redmine/wiki_formatting/common_mark/helper.rb index 5d3141c26..15a2e776b 100644 --- a/lib/redmine/wiki_formatting/common_mark/helper.rb +++ b/lib/redmine/wiki_formatting/common_mark/helper.rb @@ -59,7 +59,8 @@ module Redmine "var wikiImageMimeTypes = #{Redmine::MimeType.by_type('image').to_json};" \ "var userHlLanguages = #{lang.to_json};" ) + - stylesheet_link_tag('jstoolbar') + stylesheet_link_tag('jstoolbar') + + preload_icon_link('jstoolbar') end @heads_for_wiki_formatter_included = true end diff --git a/lib/redmine/wiki_formatting/markdown/helper.rb b/lib/redmine/wiki_formatting/markdown/helper.rb index a23193eec..fa69cac04 100644 --- a/lib/redmine/wiki_formatting/markdown/helper.rb +++ b/lib/redmine/wiki_formatting/markdown/helper.rb @@ -53,7 +53,8 @@ module Redmine "var wikiImageMimeTypes = #{Redmine::MimeType.by_type('image').to_json};" \ "var userHlLanguages = #{lang.to_json};" ) + - stylesheet_link_tag('jstoolbar') + stylesheet_link_tag('jstoolbar') + + preload_icon_link('jstoolbar') end @heads_for_wiki_formatter_included = true end diff --git a/lib/redmine/wiki_formatting/textile/helper.rb b/lib/redmine/wiki_formatting/textile/helper.rb index 0c85a031e..c9ff4c0a7 100644 --- a/lib/redmine/wiki_formatting/textile/helper.rb +++ b/lib/redmine/wiki_formatting/textile/helper.rb @@ -52,7 +52,8 @@ module Redmine javascript_tag( "var wikiImageMimeTypes = #{Redmine::MimeType.by_type('image').to_json};" \ "var userHlLanguages = #{lang.to_json};") + - stylesheet_link_tag('jstoolbar') + stylesheet_link_tag('jstoolbar') + + preload_icon_link('jstoolbar') end @heads_for_wiki_formatter_included = true end diff --git a/public/javascripts/jstoolbar/jstoolbar.js b/public/javascripts/jstoolbar/jstoolbar.js index 532f9f8c9..5b9b18cac 100644 --- a/public/javascripts/jstoolbar/jstoolbar.js +++ b/public/javascripts/jstoolbar/jstoolbar.js @@ -34,6 +34,8 @@ function jsToolBar(textarea) { return; } + var link = document.getElementById('jstoolbar_icon_path'); + this.iconUrl = link !== null ? link.getAttribute('href') : null; this.textarea = textarea; this.toolbarBlock = document.createElement('div'); @@ -132,7 +134,7 @@ function jsButton(title, fn, scope, className) { this.scope = scope || null; this.className = className || null; } -jsButton.prototype.draw = function() { +jsButton.prototype.draw = function(icons = undefined) { if (!this.scope) return null; var button = document.createElement('button'); @@ -144,6 +146,15 @@ jsButton.prototype.draw = function() { span.appendChild(document.createTextNode(this.title)); button.appendChild(span); + if (icons) { + var icon = icons[this.className]; + if (icon) { + var svgicon = createSVGIcon(icons[this.className]); + button.appendChild(svgicon); + } + button.classList.add('toolbar-svg') + } + if (this.icon != undefined) { button.style.backgroundImage = 'url('+this.icon+')'; } @@ -284,6 +295,22 @@ jsToolBar.prototype = { } }, draw: function(mode) { + const This = this + if (this.iconUrl) { + fetch(this.iconUrl, { + method: 'GET' + }) + .then(function(res) { + res.json().then(function(data) { + This._draw(mode, data); + }) + }); + } else { + This._draw(mode); + } + }, + + _draw: function(mode, icons = undefined) { this.setMode(mode); // Empty toolbar @@ -305,7 +332,7 @@ jsToolBar.prototype = { if (!disabled && typeof this[b.type] == 'function') { tool = this[b.type](i); - if (tool) newTool = tool.draw(); + if (tool) newTool = tool.draw(icons); if (newTool) { this.toolNodes[i] = newTool; //mémorise l'accès DOM pour usage éventuel ultérieur this.toolbar.appendChild(newTool); diff --git a/public/stylesheets/jstoolbar.css b/public/stylesheets/jstoolbar.css index 911ae6678..779f1f976 100644 --- a/public/stylesheets/jstoolbar.css +++ b/public/stylesheets/jstoolbar.css @@ -98,60 +98,124 @@ /* Buttons -------------------------------------------------------- */ -.jstb_strong { +.jstb_strong:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_strong.png); } -.jstb_em { + +.jstb_em:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_em.png); } -.jstb_ins { + +.jstb_ins:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_ins.png); } -.jstb_del { + +.jstb_del:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_del.png); } -.jstb_code { + +.jstb_code:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_code.png); } -.jstb_h1 { + +.jstb_h1:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_h1.png); } -.jstb_h2 { + +.jstb_h2:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_h2.png); } -.jstb_h3 { + +.jstb_h3:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_h3.png); } -.jstb_ul { + +.jstb_ul:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_ul.png); } -.jstb_ol { + +.jstb_ol:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_ol.png); } -.jstb_tl { + +.jstb_tl:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_tl.png); } -.jstb_bq { + +.jstb_bq:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_bq.png); } -.jstb_unbq { + +.jstb_unbq:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_bq_remove.png); } -.jstb_pre { + +.jstb_pre:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_pre.png); } -.jstb_precode { + +.jstb_precode:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_precode.png); } -.jstb_link { + +.jstb_link:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_link.png); } -.jstb_img { + +.jstb_img:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_img.png); } -.jstb_table { + +.jstb_table:not(.toolbar-svg) { background-image: url(../images/jstoolbar/bt_table.png); } -.jstb_help { + +.jstb_help:not(.toolbar-svg) { background-image: url(../images/help.png); } + +.toolbar-svg svg { + fill: #666; + margin-right: 4px; +} + +button.toolbar-svg { + color: #666; + margin-right: 4px; + padding-left: 1px; +} + +.jstb_code.toolbar-svg::before { + content: "C"; + font-size: 15px; + font-weight: 700; +} + +.jstb_h1.toolbar-svg::before { + content: "H1"; + padding-left: 2px; + font-size: 12px; + font-weight: 700; +} + +.jstb_h2.toolbar-svg::before { + content: "H2"; + padding-left: 2px; + font-size: 12px; + font-weight: 700; +} + +.jstb_h3.toolbar-svg::before { + content: "H3"; + padding-left: 2px; + font-size: 12px; + font-weight: 700; +} + +.jstb_pre.toolbar-svg::before { + padding: 0px 0px 3px 0px; + content: "pre"; + font-size: 12px; + font-weight: 700; +} + -- 2.30.2