zrcadlo
https://github.com/redmine/redmine.git
synchronizováno 2024-07-31 20:21:21 +02:00
![Marius Balteanu](/assets/img/avatar_default.png)
git-svn-id: https://svn.redmine.org/redmine/trunk@22696 e93f8b46-1217-0410-a6f0-8f06a7374b81
570 řádky
17 KiB
JavaScript
570 řádky
17 KiB
JavaScript
/**
|
|
* This file is part of DotClear.
|
|
* Copyright (c) 2005 Nicolas Martin & Olivier Meunier and contributors. All rights reserved.
|
|
* This code is released under the GNU General Public License.
|
|
*
|
|
* Modified by JP LANG for multiple text formatting
|
|
*/
|
|
|
|
let lastJstPreviewed = null;
|
|
const isMac = Boolean(navigator.platform.toLowerCase().match(/mac/));
|
|
|
|
function jsToolBar(textarea) {
|
|
if (!document.createElement) { return; }
|
|
|
|
if (!textarea) { return; }
|
|
|
|
if ((typeof(document["selection"]) == "undefined")
|
|
&& (typeof(textarea["setSelectionRange"]) == "undefined")) {
|
|
return;
|
|
}
|
|
|
|
this.textarea = textarea;
|
|
|
|
this.toolbarBlock = document.createElement('div');
|
|
this.toolbarBlock.className = 'jstBlock';
|
|
this.textarea.parentNode.insertBefore(this.toolbarBlock, this.textarea);
|
|
|
|
this.editor = document.createElement('div');
|
|
this.editor.className = 'jstEditor';
|
|
|
|
this.preview = document.createElement('div');
|
|
this.preview.className = 'wiki wiki-preview hidden';
|
|
this.preview.setAttribute('id', 'preview_' + textarea.getAttribute('id'));
|
|
|
|
this.editor.appendChild(this.textarea);
|
|
this.editor.appendChild(this.preview);
|
|
|
|
this.tabsBlock = document.createElement('div');
|
|
this.tabsBlock.className = 'jstTabs tabs';
|
|
|
|
var This = this;
|
|
|
|
this.textarea.onkeydown = function(event) { This.keyboardShortcuts.call(This, event); };
|
|
|
|
this.editTab = new jsTab('Edit', true);
|
|
this.editTab.onclick = function(event) { This.hidePreview.call(This, event); return false; };
|
|
|
|
this.previewTab = new jsTab('Preview');
|
|
this.previewTab.onclick = function(event) { This.showPreview.call(This, event); return false; };
|
|
|
|
var elementsTab = document.createElement('li');
|
|
elementsTab.classList = 'tab-elements';
|
|
|
|
var tabs = document.createElement('ul');
|
|
tabs.appendChild(this.editTab);
|
|
tabs.appendChild(this.previewTab);
|
|
tabs.appendChild(elementsTab);
|
|
this.tabsBlock.appendChild(tabs);
|
|
|
|
this.toolbar = document.createElement("div");
|
|
this.toolbar.className = 'jstElements';
|
|
elementsTab.appendChild(this.toolbar);
|
|
|
|
this.toolbarBlock.appendChild(this.tabsBlock);
|
|
this.toolbarBlock.appendChild(this.editor);
|
|
|
|
// Dragable resizing
|
|
if (this.editor.addEventListener && navigator.appVersion.match(/\bMSIE\b/))
|
|
{
|
|
this.handle = document.createElement('div');
|
|
this.handle.className = 'jstHandle';
|
|
var dragStart = this.resizeDragStart;
|
|
var This = this;
|
|
this.handle.addEventListener('mousedown',function(event) { dragStart.call(This,event); },false);
|
|
// fix memory leak in Firefox (bug #241518)
|
|
window.addEventListener('unload',function() {
|
|
var del = This.handle.parentNode.removeChild(This.handle);
|
|
delete(This.handle);
|
|
},false);
|
|
|
|
this.editor.parentNode.insertBefore(this.handle,this.editor.nextSibling);
|
|
}
|
|
|
|
this.context = null;
|
|
this.toolNodes = {}; // lorsque la toolbar est dessinée , cet objet est garni
|
|
// de raccourcis vers les éléments DOM correspondants aux outils.
|
|
}
|
|
|
|
function jsTab(name, selected) {
|
|
selected = selected || false;
|
|
if(typeof jsToolBar.strings == 'undefined') {
|
|
var tabName = name || null;
|
|
} else {
|
|
var tabName = jsToolBar.strings[name] || name || null;
|
|
}
|
|
|
|
var tab = document.createElement('li');
|
|
var link = document.createElement('a');
|
|
link.setAttribute('href', '#');
|
|
link.innerText = tabName;
|
|
link.className = 'tab-' + name.toLowerCase();
|
|
|
|
if (selected == true) {
|
|
link.classList.add('selected');
|
|
}
|
|
tab.appendChild(link)
|
|
|
|
return tab;
|
|
}
|
|
function jsButton(title, fn, scope, className) {
|
|
if(typeof jsToolBar.strings == 'undefined') {
|
|
this.title = title || null;
|
|
} else {
|
|
this.title = jsToolBar.strings[title] || title || null;
|
|
}
|
|
this.fn = fn || function(){};
|
|
this.scope = scope || null;
|
|
this.className = className || null;
|
|
}
|
|
jsButton.prototype.draw = function() {
|
|
if (!this.scope) return null;
|
|
|
|
var button = document.createElement('button');
|
|
button.setAttribute('type','button');
|
|
button.tabIndex = 200;
|
|
if (this.className) button.className = this.className;
|
|
button.title = this.title;
|
|
var span = document.createElement('span');
|
|
span.appendChild(document.createTextNode(this.title));
|
|
button.appendChild(span);
|
|
|
|
if (this.icon != undefined) {
|
|
button.style.backgroundImage = 'url('+this.icon+')';
|
|
}
|
|
|
|
if (typeof(this.fn) == 'function') {
|
|
var This = this;
|
|
button.onclick = function() { try { This.fn.apply(This.scope, arguments) } catch (e) {} return false; };
|
|
}
|
|
return button;
|
|
}
|
|
|
|
function jsSpace(id) {
|
|
this.id = id || null;
|
|
this.width = null;
|
|
}
|
|
jsSpace.prototype.draw = function() {
|
|
var span = document.createElement('span');
|
|
if (this.id) span.id = this.id;
|
|
span.appendChild(document.createTextNode(String.fromCharCode(160)));
|
|
span.className = 'jstSpacer';
|
|
if (this.width) span.style.marginRight = this.width+'px';
|
|
|
|
return span;
|
|
}
|
|
|
|
function jsCombo(title, options, scope, fn, className) {
|
|
this.title = title || null;
|
|
this.options = options || null;
|
|
this.scope = scope || null;
|
|
this.fn = fn || function(){};
|
|
this.className = className || null;
|
|
}
|
|
jsCombo.prototype.draw = function() {
|
|
if (!this.scope || !this.options) return null;
|
|
|
|
var select = document.createElement('select');
|
|
if (this.className) select.className = className;
|
|
select.title = this.title;
|
|
|
|
for (var o in this.options) {
|
|
//var opt = this.options[o];
|
|
var option = document.createElement('option');
|
|
option.value = o;
|
|
option.appendChild(document.createTextNode(this.options[o]));
|
|
select.appendChild(option);
|
|
}
|
|
|
|
var This = this;
|
|
select.onchange = function() {
|
|
try {
|
|
This.fn.call(This.scope, this.value);
|
|
} catch (e) { alert(e); }
|
|
|
|
return false;
|
|
}
|
|
|
|
return select;
|
|
}
|
|
|
|
|
|
jsToolBar.prototype = {
|
|
base_url: '',
|
|
mode: 'wiki',
|
|
elements: {},
|
|
help_link: '',
|
|
shortcuts: {},
|
|
|
|
getMode: function() {
|
|
return this.mode;
|
|
},
|
|
|
|
setMode: function(mode) {
|
|
this.mode = mode || 'wiki';
|
|
},
|
|
|
|
switchMode: function(mode) {
|
|
mode = mode || 'wiki';
|
|
this.draw(mode);
|
|
},
|
|
|
|
setHelpLink: function(link) {
|
|
this.help_link = link;
|
|
},
|
|
|
|
setPreviewUrl: function(url) {
|
|
this.previewTab.firstChild.setAttribute('data-url', url);
|
|
},
|
|
|
|
button: function(toolName) {
|
|
var tool = this.elements[toolName];
|
|
if (typeof tool.fn[this.mode] != 'function') return null;
|
|
|
|
const className = 'jstb_' + toolName;
|
|
let title = tool.title
|
|
|
|
if (tool.hasOwnProperty('shortcut')) {
|
|
this.shortcuts[tool.shortcut] = className;
|
|
title = this.buttonTitleWithShortcut(tool.title, tool.shortcut)
|
|
}
|
|
|
|
var b = new jsButton(title, tool.fn[this.mode], this, className);
|
|
if (tool.icon != undefined) b.icon = tool.icon;
|
|
|
|
return b;
|
|
},
|
|
buttonTitleWithShortcut: function(title, shortcutKey) {
|
|
if(typeof jsToolBar.strings == 'undefined') {
|
|
var i18nTitle = title || null;
|
|
} else {
|
|
var i18nTitle = jsToolBar.strings[title] || title || null;
|
|
}
|
|
|
|
if (isMac) {
|
|
return i18nTitle + " (⌘" + shortcutKey.toUpperCase() + ")";
|
|
} else {
|
|
return i18nTitle + " (Ctrl+" + shortcutKey.toUpperCase() + ")";
|
|
}
|
|
},
|
|
space: function(toolName) {
|
|
var tool = new jsSpace(toolName)
|
|
if (this.elements[toolName].width !== undefined)
|
|
tool.width = this.elements[toolName].width;
|
|
return tool;
|
|
},
|
|
combo: function(toolName) {
|
|
var tool = this.elements[toolName];
|
|
var length = tool[this.mode].list.length;
|
|
|
|
if (typeof tool[this.mode].fn != 'function' || length == 0) {
|
|
return null;
|
|
} else {
|
|
var options = {};
|
|
for (var i=0; i < length; i++) {
|
|
var opt = tool[this.mode].list[i];
|
|
options[opt] = tool.options[opt];
|
|
}
|
|
return new jsCombo(tool.title, options, this, tool[this.mode].fn);
|
|
}
|
|
},
|
|
draw: function(mode) {
|
|
this.setMode(mode);
|
|
|
|
// Empty toolbar
|
|
while (this.toolbar.hasChildNodes()) {
|
|
this.toolbar.removeChild(this.toolbar.firstChild)
|
|
}
|
|
this.toolNodes = {}; // vide les raccourcis DOM/**/
|
|
|
|
// Draw toolbar elements
|
|
var b, tool, newTool;
|
|
|
|
for (var i in this.elements) {
|
|
b = this.elements[i];
|
|
|
|
var disabled =
|
|
b.type == undefined || b.type == ''
|
|
|| (b.disabled != undefined && b.disabled)
|
|
|| (b.context != undefined && b.context != null && b.context != this.context);
|
|
|
|
if (!disabled && typeof this[b.type] == 'function') {
|
|
tool = this[b.type](i);
|
|
if (tool) newTool = tool.draw();
|
|
if (newTool) {
|
|
this.toolNodes[i] = newTool; //mémorise l'accès DOM pour usage éventuel ultérieur
|
|
this.toolbar.appendChild(newTool);
|
|
}
|
|
}
|
|
}
|
|
},
|
|
|
|
singleTag: function(stag,etag) {
|
|
stag = stag || null;
|
|
etag = etag || stag;
|
|
|
|
if (!stag || !etag) { return; }
|
|
|
|
this.encloseSelection(stag,etag);
|
|
},
|
|
|
|
encloseLineSelection: function(prefix, suffix, fn) {
|
|
this.textarea.focus();
|
|
|
|
prefix = prefix || '';
|
|
suffix = suffix || '';
|
|
|
|
var start, end, sel, scrollPos, subst, res;
|
|
|
|
if (typeof(document["selection"]) != "undefined") {
|
|
sel = document.selection.createRange().text;
|
|
} else if (typeof(this.textarea["setSelectionRange"]) != "undefined") {
|
|
start = this.textarea.selectionStart;
|
|
end = this.textarea.selectionEnd;
|
|
scrollPos = this.textarea.scrollTop;
|
|
// go to the start of the line
|
|
start = this.textarea.value.substring(0, start).replace(/[^\r\n]*$/g,'').length;
|
|
// go to the end of the line
|
|
end = this.textarea.value.length - this.textarea.value.substring(end, this.textarea.value.length).replace(/^[^\r\n]*/, '').length;
|
|
sel = this.textarea.value.substring(start, end);
|
|
}
|
|
|
|
if (sel.match(/ $/)) { // exclude ending space char, if any
|
|
sel = sel.substring(0, sel.length - 1);
|
|
suffix = suffix + " ";
|
|
}
|
|
|
|
if (typeof(fn) == 'function') {
|
|
res = (sel) ? fn.call(this,sel) : fn('');
|
|
} else {
|
|
res = (sel) ? sel : '';
|
|
}
|
|
|
|
subst = prefix + res + suffix;
|
|
|
|
if (typeof(document["selection"]) != "undefined") {
|
|
document.selection.createRange().text = subst;
|
|
var range = this.textarea.createTextRange();
|
|
range.collapse(false);
|
|
range.move('character', -suffix.length);
|
|
range.select();
|
|
} else if (typeof(this.textarea["setSelectionRange"]) != "undefined") {
|
|
this.textarea.value = this.textarea.value.substring(0, start) + subst +
|
|
this.textarea.value.substring(end);
|
|
if (sel || (!prefix && start === end)) {
|
|
this.textarea.setSelectionRange(start + subst.length, start + subst.length);
|
|
} else {
|
|
this.textarea.setSelectionRange(start + prefix.length, start + prefix.length);
|
|
}
|
|
this.textarea.scrollTop = scrollPos;
|
|
}
|
|
},
|
|
|
|
encloseSelection: function(prefix, suffix, fn) {
|
|
this.textarea.focus();
|
|
prefix = prefix || '';
|
|
suffix = suffix || '';
|
|
|
|
var start, end, sel, scrollPos, subst, res;
|
|
|
|
if (typeof(document["selection"]) != "undefined") {
|
|
sel = document.selection.createRange().text;
|
|
} else if (typeof(this.textarea["setSelectionRange"]) != "undefined") {
|
|
start = this.textarea.selectionStart;
|
|
end = this.textarea.selectionEnd;
|
|
scrollPos = this.textarea.scrollTop;
|
|
sel = this.textarea.value.substring(start, end);
|
|
if (start > 0 && this.textarea.value.substr(start-1, 1).match(/\S/)) {
|
|
prefix = ' ' + prefix;
|
|
}
|
|
if (this.textarea.value.substr(end, 1).match(/\S/)) {
|
|
suffix = suffix + ' ';
|
|
}
|
|
}
|
|
if (sel.match(/ $/)) { // exclude ending space char, if any
|
|
sel = sel.substring(0, sel.length - 1);
|
|
suffix = suffix + " ";
|
|
}
|
|
|
|
if (typeof(fn) == 'function') {
|
|
res = (sel) ? fn.call(this,sel) : fn('');
|
|
} else {
|
|
res = (sel) ? sel : '';
|
|
}
|
|
|
|
subst = prefix + res + suffix;
|
|
|
|
if (typeof(document["selection"]) != "undefined") {
|
|
document.selection.createRange().text = subst;
|
|
var range = this.textarea.createTextRange();
|
|
range.collapse(false);
|
|
range.move('character', -suffix.length);
|
|
range.select();
|
|
// this.textarea.caretPos -= suffix.length;
|
|
} else if (typeof(this.textarea["setSelectionRange"]) != "undefined") {
|
|
this.textarea.value = this.textarea.value.substring(0, start) + subst +
|
|
this.textarea.value.substring(end);
|
|
if (sel) {
|
|
this.textarea.setSelectionRange(start + subst.length, start + subst.length);
|
|
} else {
|
|
this.textarea.setSelectionRange(start + prefix.length, start + prefix.length);
|
|
}
|
|
this.textarea.scrollTop = scrollPos;
|
|
}
|
|
},
|
|
showPreview: function(event) {
|
|
if (event.target.classList.contains('selected')) { return; }
|
|
lastJstPreviewed = this.toolbarBlock;
|
|
this.preview.setAttribute('style', 'min-height: ' + this.textarea.clientHeight + 'px;')
|
|
this.toolbar.classList.add('hidden');
|
|
this.textarea.classList.add('hidden');
|
|
this.preview.classList.remove('hidden');
|
|
this.tabsBlock.querySelector('.tab-edit').classList.remove('selected');
|
|
event.target.classList.add('selected');
|
|
},
|
|
hidePreview: function(event) {
|
|
if (event.target.classList.contains('selected')) { return; }
|
|
this.toolbar.classList.remove('hidden');
|
|
this.textarea.classList.remove('hidden');
|
|
this.textarea.focus();
|
|
this.preview.classList.add('hidden');
|
|
this.tabsBlock.querySelector('.tab-preview').classList.remove('selected');
|
|
event.target.classList.add('selected');
|
|
},
|
|
keyboardShortcuts: function(e) {
|
|
let stop = false;
|
|
if (isToogleEditPreviewShortcut(e)) {
|
|
// Switch to preview only if Edit tab is selected when the event triggers.
|
|
if (this.tabsBlock.querySelector('.tab-edit.selected')) {
|
|
stop = true
|
|
this.tabsBlock.querySelector('.tab-preview').click();
|
|
}
|
|
}
|
|
if (isModifierKey(e) && this.shortcuts.hasOwnProperty(e.key.toLowerCase())) {
|
|
stop = true
|
|
this.toolbar.querySelector("." + this.shortcuts[e.key.toLowerCase()]).click();
|
|
}
|
|
if (stop) {
|
|
e.stopPropagation();
|
|
e.preventDefault();
|
|
}
|
|
},
|
|
stripBaseURL: function(url) {
|
|
if (this.base_url != '') {
|
|
var pos = url.indexOf(this.base_url);
|
|
if (pos == 0) {
|
|
url = url.substr(this.base_url.length);
|
|
}
|
|
}
|
|
|
|
return url;
|
|
}
|
|
};
|
|
|
|
/** Resizer
|
|
-------------------------------------------------------- */
|
|
jsToolBar.prototype.resizeSetStartH = function() {
|
|
this.dragStartH = this.textarea.offsetHeight + 0;
|
|
};
|
|
jsToolBar.prototype.resizeDragStart = function(event) {
|
|
var This = this;
|
|
this.dragStartY = event.clientY;
|
|
this.resizeSetStartH();
|
|
document.addEventListener('mousemove', this.dragMoveHdlr=function(event){This.resizeDragMove(event);}, false);
|
|
document.addEventListener('mouseup', this.dragStopHdlr=function(event){This.resizeDragStop(event);}, false);
|
|
};
|
|
|
|
jsToolBar.prototype.resizeDragMove = function(event) {
|
|
this.textarea.style.height = (this.dragStartH+event.clientY-this.dragStartY)+'px';
|
|
};
|
|
|
|
jsToolBar.prototype.resizeDragStop = function(event) {
|
|
document.removeEventListener('mousemove', this.dragMoveHdlr, false);
|
|
document.removeEventListener('mouseup', this.dragStopHdlr, false);
|
|
};
|
|
|
|
/* Code highlighting menu */
|
|
jsToolBar.prototype.precodeMenu = function(fn){
|
|
var hlLanguages = window.userHlLanguages;
|
|
var menu = $("<ul style='position:absolute;'></ul>");
|
|
for (var i = 0; i < hlLanguages.length; i++) {
|
|
var langItem = $('<div></div>').text(hlLanguages[i]);
|
|
$("<li></li>").html(langItem).appendTo(menu).mousedown(function(){
|
|
fn($(this).text());
|
|
});
|
|
}
|
|
$("body").append(menu);
|
|
menu.menu().width(150).position({
|
|
my: "left top",
|
|
at: "left bottom",
|
|
of: this.toolNodes['precode']
|
|
});
|
|
$(document).on("mousedown", function() {
|
|
menu.remove();
|
|
});
|
|
return false;
|
|
};
|
|
|
|
/* Table generator */
|
|
jsToolBar.prototype.tableMenu = function(fn){
|
|
var alphabets = "ABCDEFGHIJ".split('');
|
|
var menu = $("<table class='table-generator'></table>");
|
|
|
|
for (var r = 1; r <= 5; r++) {
|
|
var row = $("<tr></tr>").appendTo(menu);
|
|
for (var c = 1; c <= 10; c++) {
|
|
$("<td data-row="+r+" data-col="+c+" title="+(c)+'×'+(r)+"></td>").mousedown(function(){
|
|
fn(alphabets.slice(0, $(this).data('col')), $(this).data('row'));
|
|
}).hover(function(){
|
|
var hoverRow = $(this).data('row');
|
|
var hoverCol = $(this).data('col');
|
|
$(this).closest('table').find('td').each(function(_index, element){
|
|
if ($(element).data('row') <= hoverRow && $(element).data('col') <= hoverCol){
|
|
$(element).addClass('selected-cell');
|
|
} else {
|
|
$(element).removeClass('selected-cell');
|
|
}
|
|
});
|
|
}).appendTo(row);
|
|
}
|
|
}
|
|
$("body").append(menu);
|
|
menu.position({
|
|
my: "left top",
|
|
at: "left bottom",
|
|
of: this.toolNodes['table']
|
|
});
|
|
$(document).on("mousedown", function() {
|
|
menu.remove();
|
|
});
|
|
return false;
|
|
};
|
|
|
|
$(document).keydown(function(e) {
|
|
if (isToogleEditPreviewShortcut(e)) {
|
|
if (lastJstPreviewed !== null) {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
lastJstPreviewed.querySelector('.tab-edit').click();
|
|
lastJstPreviewed = null;
|
|
}
|
|
}
|
|
});
|
|
|
|
function isToogleEditPreviewShortcut(e) {
|
|
if ((e.metaKey || e.ctrlKey) && e.shiftKey && e.key.toLowerCase() === 'p') {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
function isModifierKey(e) {
|
|
if (isMac && e.metaKey) {
|
|
return true;
|
|
} else if (!isMac && e.ctrlKey) {
|
|
return true;
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|