Feature #23980 » 0004-Support-jsToolbar.patch
| lib/redmine/wiki_formatting/common_mark/helper.rb | ||
|---|---|---|
| 59 | 59 |
"var wikiImageMimeTypes = #{Redmine::MimeType.by_type('image').to_json};" \
|
| 60 | 60 |
"var userHlLanguages = #{lang.to_json};"
|
| 61 | 61 |
) + |
| 62 |
stylesheet_link_tag('jstoolbar')
|
|
| 62 |
stylesheet_link_tag('jstoolbar') +
|
|
| 63 |
preload_icon_link('jstoolbar')
|
|
| 63 | 64 |
end |
| 64 | 65 |
@heads_for_wiki_formatter_included = true |
| 65 | 66 |
end |
| lib/redmine/wiki_formatting/markdown/helper.rb | ||
|---|---|---|
| 53 | 53 |
"var wikiImageMimeTypes = #{Redmine::MimeType.by_type('image').to_json};" \
|
| 54 | 54 |
"var userHlLanguages = #{lang.to_json};"
|
| 55 | 55 |
) + |
| 56 |
stylesheet_link_tag('jstoolbar')
|
|
| 56 |
stylesheet_link_tag('jstoolbar') +
|
|
| 57 |
preload_icon_link('jstoolbar')
|
|
| 57 | 58 |
end |
| 58 | 59 |
@heads_for_wiki_formatter_included = true |
| 59 | 60 |
end |
| lib/redmine/wiki_formatting/textile/helper.rb | ||
|---|---|---|
| 52 | 52 |
javascript_tag( |
| 53 | 53 |
"var wikiImageMimeTypes = #{Redmine::MimeType.by_type('image').to_json};" \
|
| 54 | 54 |
"var userHlLanguages = #{lang.to_json};") +
|
| 55 |
stylesheet_link_tag('jstoolbar')
|
|
| 55 |
stylesheet_link_tag('jstoolbar') +
|
|
| 56 |
preload_icon_link('jstoolbar')
|
|
| 56 | 57 |
end |
| 57 | 58 |
@heads_for_wiki_formatter_included = true |
| 58 | 59 |
end |
| public/javascripts/jstoolbar/jstoolbar.js | ||
|---|---|---|
| 34 | 34 |
return; |
| 35 | 35 |
} |
| 36 | 36 | |
| 37 |
var link = document.getElementById('jstoolbar_icon_path');
|
|
| 38 |
this.iconUrl = link !== null ? link.getAttribute('href') : null;
|
|
| 37 | 39 |
this.textarea = textarea; |
| 38 | 40 | |
| 39 | 41 |
this.toolbarBlock = document.createElement('div');
|
| ... | ... | |
| 132 | 134 |
this.scope = scope || null; |
| 133 | 135 |
this.className = className || null; |
| 134 | 136 |
} |
| 135 |
jsButton.prototype.draw = function() {
|
|
| 137 |
jsButton.prototype.draw = function(icons = undefined) {
|
|
| 136 | 138 |
if (!this.scope) return null; |
| 137 | 139 | |
| 138 | 140 |
var button = document.createElement('button');
|
| ... | ... | |
| 144 | 146 |
span.appendChild(document.createTextNode(this.title)); |
| 145 | 147 |
button.appendChild(span); |
| 146 | 148 | |
| 149 |
if (icons) {
|
|
| 150 |
var icon = icons[this.className]; |
|
| 151 |
if (icon) {
|
|
| 152 |
var svgicon = createSVGIcon(icons[this.className]); |
|
| 153 |
button.appendChild(svgicon); |
|
| 154 |
} |
|
| 155 |
button.classList.add('toolbar-svg')
|
|
| 156 |
} |
|
| 157 | ||
| 147 | 158 |
if (this.icon != undefined) {
|
| 148 | 159 |
button.style.backgroundImage = 'url('+this.icon+')';
|
| 149 | 160 |
} |
| ... | ... | |
| 284 | 295 |
} |
| 285 | 296 |
}, |
| 286 | 297 |
draw: function(mode) {
|
| 298 |
const This = this |
|
| 299 |
if (this.iconUrl) {
|
|
| 300 |
fetch(this.iconUrl, {
|
|
| 301 |
method: 'GET' |
|
| 302 |
}) |
|
| 303 |
.then(function(res) {
|
|
| 304 |
res.json().then(function(data) {
|
|
| 305 |
This._draw(mode, data); |
|
| 306 |
}) |
|
| 307 |
}); |
|
| 308 |
} else {
|
|
| 309 |
This._draw(mode); |
|
| 310 |
} |
|
| 311 |
}, |
|
| 312 | ||
| 313 |
_draw: function(mode, icons = undefined) {
|
|
| 287 | 314 |
this.setMode(mode); |
| 288 | 315 | |
| 289 | 316 |
// Empty toolbar |
| ... | ... | |
| 305 | 332 | |
| 306 | 333 |
if (!disabled && typeof this[b.type] == 'function') {
|
| 307 | 334 |
tool = this[b.type](i); |
| 308 |
if (tool) newTool = tool.draw(); |
|
| 335 |
if (tool) newTool = tool.draw(icons);
|
|
| 309 | 336 |
if (newTool) {
|
| 310 | 337 |
this.toolNodes[i] = newTool; //mémorise l'accès DOM pour usage éventuel ultérieur |
| 311 | 338 |
this.toolbar.appendChild(newTool); |
| public/stylesheets/jstoolbar.css | ||
|---|---|---|
| 98 | 98 | |
| 99 | 99 |
/* Buttons |
| 100 | 100 |
-------------------------------------------------------- */ |
| 101 |
.jstb_strong {
|
|
| 101 |
.jstb_strong:not(.toolbar-svg) {
|
|
| 102 | 102 |
background-image: url(../images/jstoolbar/bt_strong.png); |
| 103 | 103 |
} |
| 104 |
.jstb_em {
|
|
| 104 | ||
| 105 |
.jstb_em:not(.toolbar-svg) {
|
|
| 105 | 106 |
background-image: url(../images/jstoolbar/bt_em.png); |
| 106 | 107 |
} |
| 107 |
.jstb_ins {
|
|
| 108 | ||
| 109 |
.jstb_ins:not(.toolbar-svg) {
|
|
| 108 | 110 |
background-image: url(../images/jstoolbar/bt_ins.png); |
| 109 | 111 |
} |
| 110 |
.jstb_del {
|
|
| 112 | ||
| 113 |
.jstb_del:not(.toolbar-svg) {
|
|
| 111 | 114 |
background-image: url(../images/jstoolbar/bt_del.png); |
| 112 | 115 |
} |
| 113 |
.jstb_code {
|
|
| 116 | ||
| 117 |
.jstb_code:not(.toolbar-svg) {
|
|
| 114 | 118 |
background-image: url(../images/jstoolbar/bt_code.png); |
| 115 | 119 |
} |
| 116 |
.jstb_h1 {
|
|
| 120 | ||
| 121 |
.jstb_h1:not(.toolbar-svg) {
|
|
| 117 | 122 |
background-image: url(../images/jstoolbar/bt_h1.png); |
| 118 | 123 |
} |
| 119 |
.jstb_h2 {
|
|
| 124 | ||
| 125 |
.jstb_h2:not(.toolbar-svg) {
|
|
| 120 | 126 |
background-image: url(../images/jstoolbar/bt_h2.png); |
| 121 | 127 |
} |
| 122 |
.jstb_h3 {
|
|
| 128 | ||
| 129 |
.jstb_h3:not(.toolbar-svg) {
|
|
| 123 | 130 |
background-image: url(../images/jstoolbar/bt_h3.png); |
| 124 | 131 |
} |
| 125 |
.jstb_ul {
|
|
| 132 | ||
| 133 |
.jstb_ul:not(.toolbar-svg) {
|
|
| 126 | 134 |
background-image: url(../images/jstoolbar/bt_ul.png); |
| 127 | 135 |
} |
| 128 |
.jstb_ol {
|
|
| 136 | ||
| 137 |
.jstb_ol:not(.toolbar-svg) {
|
|
| 129 | 138 |
background-image: url(../images/jstoolbar/bt_ol.png); |
| 130 | 139 |
} |
| 131 |
.jstb_tl {
|
|
| 140 | ||
| 141 |
.jstb_tl:not(.toolbar-svg) {
|
|
| 132 | 142 |
background-image: url(../images/jstoolbar/bt_tl.png); |
| 133 | 143 |
} |
| 134 |
.jstb_bq {
|
|
| 144 | ||
| 145 |
.jstb_bq:not(.toolbar-svg) {
|
|
| 135 | 146 |
background-image: url(../images/jstoolbar/bt_bq.png); |
| 136 | 147 |
} |
| 137 |
.jstb_unbq {
|
|
| 148 | ||
| 149 |
.jstb_unbq:not(.toolbar-svg) {
|
|
| 138 | 150 |
background-image: url(../images/jstoolbar/bt_bq_remove.png); |
| 139 | 151 |
} |
| 140 |
.jstb_pre {
|
|
| 152 | ||
| 153 |
.jstb_pre:not(.toolbar-svg) {
|
|
| 141 | 154 |
background-image: url(../images/jstoolbar/bt_pre.png); |
| 142 | 155 |
} |
| 143 |
.jstb_precode {
|
|
| 156 | ||
| 157 |
.jstb_precode:not(.toolbar-svg) {
|
|
| 144 | 158 |
background-image: url(../images/jstoolbar/bt_precode.png); |
| 145 | 159 |
} |
| 146 |
.jstb_link {
|
|
| 160 | ||
| 161 |
.jstb_link:not(.toolbar-svg) {
|
|
| 147 | 162 |
background-image: url(../images/jstoolbar/bt_link.png); |
| 148 | 163 |
} |
| 149 |
.jstb_img {
|
|
| 164 | ||
| 165 |
.jstb_img:not(.toolbar-svg) {
|
|
| 150 | 166 |
background-image: url(../images/jstoolbar/bt_img.png); |
| 151 | 167 |
} |
| 152 |
.jstb_table {
|
|
| 168 | ||
| 169 |
.jstb_table:not(.toolbar-svg) {
|
|
| 153 | 170 |
background-image: url(../images/jstoolbar/bt_table.png); |
| 154 | 171 |
} |
| 155 |
.jstb_help {
|
|
| 172 | ||
| 173 |
.jstb_help:not(.toolbar-svg) {
|
|
| 156 | 174 |
background-image: url(../images/help.png); |
| 157 | 175 |
} |
| 176 | ||
| 177 |
.toolbar-svg svg {
|
|
| 178 |
fill: #666; |
|
| 179 |
margin-right: 4px; |
|
| 180 |
} |
|
| 181 | ||
| 182 |
button.toolbar-svg {
|
|
| 183 |
color: #666; |
|
| 184 |
margin-right: 4px; |
|
| 185 |
padding-left: 1px; |
|
| 186 |
} |
|
| 187 | ||
| 188 |
.jstb_code.toolbar-svg::before {
|
|
| 189 |
content: "C"; |
|
| 190 |
font-size: 15px; |
|
| 191 |
font-weight: 700; |
|
| 192 |
} |
|
| 193 | ||
| 194 |
.jstb_h1.toolbar-svg::before {
|
|
| 195 |
content: "H1"; |
|
| 196 |
padding-left: 2px; |
|
| 197 |
font-size: 12px; |
|
| 198 |
font-weight: 700; |
|
| 199 |
} |
|
| 200 | ||
| 201 |
.jstb_h2.toolbar-svg::before {
|
|
| 202 |
content: "H2"; |
|
| 203 |
padding-left: 2px; |
|
| 204 |
font-size: 12px; |
|
| 205 |
font-weight: 700; |
|
| 206 |
} |
|
| 207 | ||
| 208 |
.jstb_h3.toolbar-svg::before {
|
|
| 209 |
content: "H3"; |
|
| 210 |
padding-left: 2px; |
|
| 211 |
font-size: 12px; |
|
| 212 |
font-weight: 700; |
|
| 213 |
} |
|
| 214 | ||
| 215 |
.jstb_pre.toolbar-svg::before {
|
|
| 216 |
padding: 0px 0px 3px 0px; |
|
| 217 |
content: "pre"; |
|
| 218 |
font-size: 12px; |
|
| 219 |
font-weight: 700; |
|
| 220 |
} |
|
| 221 | ||