X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/12471fdc58a1d8dc94c3cd902f1c1c531a4bfd6e..3f7228b204d935f82de397313e58989c738f2f47:/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
diff --git a/src/redakcja/static/js/wiki/view_editor_wysiwyg.js b/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
index 607fa3f2..2f510a24 100644
--- a/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
+++ b/src/redakcja/static/js/wiki/view_editor_wysiwyg.js
@@ -1,4 +1,4 @@
-(function($){
+(function($) {
/* Show theme to the user */
function selectTheme(themeId){
@@ -6,8 +6,8 @@
selection.removeAllRanges();
var range = document.createRange();
- var s = $(".motyw[theme-class='" + themeId + "']")[0];
- var e = $(".end[theme-class='" + themeId + "']")[0];
+ var s = $("[x-node='motyw'][theme-class='" + themeId + "']")[0];
+ var e = $("[x-node='end'][theme-class='" + themeId + "']")[0];
if (s && e) {
range.setStartAfter(s);
@@ -153,7 +153,7 @@
-
+
/* Insert theme using current selection */
function addTheme(){
@@ -210,10 +210,10 @@
point.setStart(container, offset);
return point;
}
-
+
var spoint = createPoint(range.startContainer, range.startOffset);
var epoint = createPoint(range.endContainer, range.endOffset);
-
+
var mtag, btag, etag, errors;
// insert theme-ref
@@ -237,7 +237,7 @@
spoint.insertNode(btag[0])
btag.replaceWith(text);
selection.removeAllRanges();
- openForEdit($('.motyw[theme-class="' + id + '"]'));
+ openForEdit($('[x-node="motyw"][theme-class="' + id + '"]'));
}
});
}
@@ -246,10 +246,18 @@
});
}
- function addSymbol() {
- if($('div.html-editarea textarea')[0]) {
+ function addSymbol(caret) {
+ let editArea;
+
+ if (caret) {
+ editArea = $("textarea", caret.element)[0];
+ } else {
+ editArea = $('div.html-editarea textarea')[0];
+ }
+
+ if(editArea) {
var specialCharsContainer = $("
");
-
+
var specialChars = ['â', 'Ä','Ä
','Ä','Ä','Ä','Ä','Å','Å','Å','Å','Ã','ó','Å','Å','Å»','ż','Ź','ź','Ã','á','Ã','à ',
'Ã','â','Ã','ä','Ã
','Ã¥','Ä','Ä','Ä','Ä','Ã','ã',
'Ã','æ','Ã','ç','Ä','Ä','Ä','Ä','Ä','Ä','Ã','é','Ã','è',
@@ -274,18 +282,18 @@
'â','â','ââ','«','»','«»','»«','â','[',']','~','|','â','·',
'Ã','÷','â','â ','±','â¤','â¥','â'];
var tableContent = "";
-
+
for(var i in specialChars) {
if(i % 14 == 0 && i > 0) {
tableContent += "
";
- }
- tableContent += " | ";
+ }
+ tableContent += " | ";
}
-
- tableContent += "
";
+
+ tableContent += "";
$("body").append(specialCharsContainer);
-
-
+
+
// localStorage for recently used characters - reading
if (typeof(localStorage) != 'undefined') {
if (localStorage.getItem("recentSymbols")) {
@@ -293,45 +301,48 @@
var recentArray = recent.split(";");
var recentRow = "";
for(var i in recentArray.reverse()) {
- recentRow += " | ";
+ recentRow += " | ";
}
- recentRow = "" + recentRow + "
";
+ recentRow = "" + recentRow + "
";
}
- }
+ }
$("#tableSpecialChars").append(recentRow);
$("#tableSpecialChars").append(tableContent);
-
+
/* events */
-
+
$('.specialBtn').click(function(){
- var editArea = $('div.html-editarea textarea')[0];
var insertVal = $(this).val();
-
+
// if we want to surround text with quotes
// not sure if just check if value has length == 2
-
- if (insertVal.length == 2) {
- var startTag = insertVal[0];
- var endTag = insertVal[1];
- var textAreaOpened = editArea;
- //IE support
- if (document.selection) {
- textAreaOpened.focus();
- sel = document.selection.createRange();
- sel.text = startTag + sel.text + endTag;
- }
- //MOZILLA/NETSCAPE support
- else if (textAreaOpened.selectionStart || textAreaOpened.selectionStart == '0') {
- var startPos = textAreaOpened.selectionStart;
- var endPos = textAreaOpened.selectionEnd;
- textAreaOpened.value = textAreaOpened.value.substring(0, startPos)
- + startTag + textAreaOpened.value.substring(startPos, endPos) + endTag + textAreaOpened.value.substring(endPos, textAreaOpened.value.length);
- }
+
+ if (caret) {
+ caret.insertChar(insertVal);
+ caret.focus();
} else {
- // if we just want to insert single symbol
- insertAtCaret(editArea, insertVal);
+ if (insertVal.length == 2) {
+ var startTag = insertVal[0];
+ var endTag = insertVal[1];
+ var textAreaOpened = editArea;
+ //IE support
+ if (document.selection) {
+ textAreaOpened.focus();
+ sel = document.selection.createRange();
+ sel.text = startTag + sel.text + endTag;
+ }
+ //MOZILLA/NETSCAPE support
+ else if (textAreaOpened.selectionStart || textAreaOpened.selectionStart == '0') {
+ var startPos = textAreaOpened.selectionStart;
+ var endPos = textAreaOpened.selectionEnd;
+ textAreaOpened.value = textAreaOpened.value.substring(0, startPos)
+ + startTag + textAreaOpened.value.substring(startPos, endPos) + endTag + textAreaOpened.value.substring(endPos, textAreaOpened.value.length);
+ }
+ } else {
+ insertAtCaret(editArea, insertVal);
+ }
}
-
+
// localStorage for recently used characters - saving
if (typeof(localStorage) != 'undefined') {
if (localStorage.getItem("recentSymbols")) {
@@ -360,49 +371,49 @@
}
}
$(specialCharsContainer).remove();
- });
+ });
$('#specialCharsClose').click(function(){
$(specialCharsContainer).remove();
- });
-
+ });
+
} else {
window.alert('Najedź na fragment tekstu, wybierz "Edytuj" i ustaw kursor na miejscu gdzie chcesz wstawiÄ symbol.');
}
}
- function insertAtCaret(txtarea,text) {
+ function insertAtCaret(txtarea,text) {
/* http://www.scottklarr.com/topic/425/how-to-insert-text-into-a-textarea-where-the-cursor-is/ */
- var scrollPos = txtarea.scrollTop;
- var strPos = 0;
+ var scrollPos = txtarea.scrollTop;
+ var strPos = 0;
var backStart = 0;
var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) );
- if (br == "ie") {
+ if (br == "ie") {
txtarea.focus();
- var range = document.selection.createRange();
- range.moveStart ('character', -txtarea.value.length);
- strPos = backStart = range.text.length;
+ var range = document.selection.createRange();
+ range.moveStart ('character', -txtarea.value.length);
+ strPos = backStart = range.text.length;
} else if (br == "ff") {
- strPos = txtarea.selectionStart;
+ strPos = txtarea.selectionStart;
backStart = txtarea.selectionEnd;
}
- var front = (txtarea.value).substring(0,strPos);
- var back = (txtarea.value).substring(backStart,txtarea.value.length);
- txtarea.value=front+text+back;
- strPos = strPos + text.length;
- if (br == "ie") {
- txtarea.focus();
- var range = document.selection.createRange();
- range.moveStart ('character', -txtarea.value.length);
- range.moveStart ('character', strPos);
- range.moveEnd ('character', 0);
- range.select();
- } else if (br == "ff") {
- txtarea.selectionStart = strPos;
- txtarea.selectionEnd = strPos;
- txtarea.focus();
- }
- txtarea.scrollTop = scrollPos;
- }
+ var front = (txtarea.value).substring(0,strPos);
+ var back = (txtarea.value).substring(backStart,txtarea.value.length);
+ txtarea.value=front+text+back;
+ strPos = strPos + text.length;
+ if (br == "ie") {
+ txtarea.focus();
+ var range = document.selection.createRange();
+ range.moveStart ('character', -txtarea.value.length);
+ range.moveStart ('character', strPos);
+ range.moveEnd ('character', 0);
+ range.select();
+ } else if (br == "ff") {
+ txtarea.selectionStart = strPos;
+ txtarea.selectionEnd = strPos;
+ txtarea.focus();
+ }
+ txtarea.scrollTop = scrollPos;
+ }
/* open edition window for selected fragment */
function openForEdit($origin){
@@ -416,8 +427,8 @@
$box = $origin;
}
var x = $box[0].offsetLeft;
- var y = $box[0].offsetTop;
-
+ var y = $box[0].offsetTop;
+
var w = $box.outerWidth();
var h = $box.innerHeight();
@@ -425,7 +436,7 @@
w = Math.max(w, 400);
h = Math.max(h, 60);
if($('.htmlview div').offset().left + $('.htmlview div').width() > ($('.vsplitbar').offset().left - 480)){
- x = -(Math.max($origin.offset().left, $origin.width()));
+ x = -(Math.max($origin.offset().left, $origin.width()));
} else {
x = 100;
}
@@ -448,17 +459,17 @@
top: y,
width: w
}).appendTo($box[0].offsetParent || $box.parent()).show();
-
+
if ($origin.is('*[x-edit-no-format]')) {
$('.akap-edit-button').remove();
}
-
- if ($origin.is('.motyw')) {
+
+ if ($origin.is('[x-node="motyw"]')) {
$.themes.autocomplete($('textarea', $overlay));
}
- if ($origin.is('.motyw')){
+ if ($origin.is('[x-node="motyw"]')){
$('.delete-button', $overlay).click(function(){
if (window.confirm("Czy jesteÅ pewien, że chcesz usunÄ
Ä ten motyw?")) {
$('[theme-class="' + $origin.attr('theme-class') + '"]').remove();
@@ -494,12 +505,12 @@
if($box.attr("x-edit-attribute")) {
source = $('');
- source.text($box.attr("data-wlf-" + $box.attr("x-edit-attribute")));
+ source.text($box.attr("x-a-wl-" + $box.attr("x-edit-attribute")));
source = source[0];
} else {
source = $box[0];
}
-
+
html2text({
element: source,
stripOuter: true,
@@ -514,7 +525,7 @@
var nodeName = $box.attr('x-node') || 'pe';
var insertedText = $('textarea', $overlay).val();
- if ($origin.is('.motyw')) {
+ if ($origin.is('[x-node="motyw"]')) {
insertedText = insertedText.replace(/,\s*$/, '');
}
@@ -524,7 +535,7 @@
xml = '<' + nodeName + '>' + insertedText + '' + nodeName + '>';
}
-
+
xml2html({
xml: xml,
success: function(element){
@@ -545,11 +556,11 @@
alert('BÅÄ
d! ' + text);
}
})
-
+
var msg = $("PamiÄtaj, żeby zapisaÄ swoje zmiany.
");
$("#base").prepend(msg);
$('#base .saveNotify').fadeOut(3000, function(){
- $(this).remove();
+ $(this).remove();
});
}
@@ -572,9 +583,9 @@
addSymbol();
return false;
}
-
- var myField = textAreaOpened;
-
+
+ var myField = textAreaOpened;
+
//IE support
if (document.selection) {
textAreaOpened.focus();
@@ -612,6 +623,7 @@
function VisualPerspective(options){
+ perspective = this;
var old_callback = options.callback;
@@ -620,6 +632,7 @@
var button = $('');
if (!CurrentDocument.readonly) {
+
$('#html-view').bind('mousemove', function(event){
var editable = $(event.target).closest('*[x-editable]');
$('.active', element).not(editable).removeClass('active').children('.edit-button').remove();
@@ -629,16 +642,17 @@
}
if (editable.is('.annotation-inline-box')) {
$('*[x-annotation-box]', editable).css({
- position: 'absolute',
- left: event.clientX - editable.offset().left + 5,
- top: event.clientY - editable.offset().top + 5
+// left: event.clientX - editable.offset().left + 5,
+// top: event.clientY - editable.offset().top + 5
}).show();
}
else {
- $('*[x-annotation-box]').hide();
+// $('*[x-annotation-box]').hide();
}
});
+ perspective.caret = new Caret(element);
+
$('#insert-reference-button').click(function(){
addReference();
return false;
@@ -652,7 +666,19 @@
$('#insert-theme-button').click(function(){
addTheme();
return false;
- });
+ });
+
+
+ $(".insert-inline-tag").click(function() {
+ perspective.insertInlineTag($(this).attr('data-tag'));
+ return false;
+ });
+
+ $(".insert-char").click(function() {
+ console.log('perspective', perspective);
+ addSymbol(caret=perspective.caret);
+ return false;
+ });
$(document).on('click', '.edit-button', function(event){
event.preventDefault();
@@ -661,10 +687,16 @@
}
- $(document).on('click', '.motyw', function(){
+ $(document).on('click', '[x-node="motyw"]', function(){
selectTheme($(this).attr('theme-class'));
});
+ element.on('click', '.annotation', function(event) {
+ event.preventDefault();
+ $('[x-annotation-box]', $(this).parent()).toggleClass('editing');
+
+ });
+
old_callback.call(this);
};
@@ -673,10 +705,6 @@
VisualPerspective.prototype = new $.wiki.Perspective();
- VisualPerspective.prototype.freezeState = function(){
-
- };
-
VisualPerspective.prototype.onEnter = function(success, failure){
$.wiki.Perspective.prototype.onEnter.call(this);
@@ -690,19 +718,15 @@
callback();
}
+ perspective = this;
xml2html({
xml: this.doc.text,
+ base: this.doc.getBase(),
success: function(element){
+
var htmlView = $('#html-view');
htmlView.html(element);
- htmlView.find('*[x-node]').dblclick(function(e) {
- if($(e.target).is('textarea'))
- return;
- var selection = window.getSelection();
- selection.collapseToStart();
- selection.modify('extend', 'forward', 'word');
- e.stopPropagation();
- });
+
_finalize(success);
},
error: function(text, source){
@@ -718,6 +742,8 @@
VisualPerspective.prototype.onExit = function(success, failure){
var self = this;
+ self.caret.detach();
+
$.blockUI({
message: 'Zapisywanie widoku...'
});
@@ -745,6 +771,71 @@
});
};
+ VisualPerspective.prototype.insertInlineTag = function(tag) {
+ this.caret.detach();
+
+ let selection = window.getSelection();
+ var n = selection.rangeCount;
+ if (n != 1 || selection.isCollapsed) {
+ window.alert("Nie zaznaczono obszaru");
+ return false
+ }
+ let range = selection.getRangeAt(0);
+
+ // Make sure that:
+ // Both ends are in the same x-node container.
+ // TODO: That the container is a inline-text container.
+ let node = range.startContainer;
+ if (node.nodeType == node.TEXT_NODE) {
+ node = node.parentNode;
+ }
+ let endNode = range.endContainer;
+ if (endNode.nodeType == endNode.TEXT_NODE) {
+ endNode = endNode.parentNode;
+ }
+ if (node != endNode) {
+ window.alert("ZÅy obszar.");
+ return false;
+ }
+
+ // We will construct a HTML element with the range selected.
+ let div = $("");
+
+ contents = $(node).contents();
+ let startChildIndex = node == range.startContainer ? 0 : contents.index(range.startContainer);
+ let endChildIndex = contents.index(range.endContainer);
+
+ current = range.startContainer;
+ if (current.nodeType == current.TEXT_NODE) {
+ current = current.splitText(range.startOffset);
+ }
+ while (current != range.endContainer) {
+ n = current.nextSibling;
+ $(current).appendTo(div);
+ current = n;
+ }
+ if (current.nodeType == current.TEXT_NODE) {
+ end = current.splitText(range.endOffset);
+ }
+ $(current).appendTo(div);
+
+ html2text({
+ element: div[0],
+ success: function(d) {
+ xml2html({
+ xml: d = '<' + tag + '>' + d + '' + tag + '>',
+ success: function(html) {
+ // What if no end?
+ node.insertBefore($(html)[0], end);
+ }
+ });
+ },
+ error: function(a, b) {
+ console.log(a, b);
+ }
+ });
+ };
+
$.wiki.VisualPerspective = VisualPerspective;
})(jQuery);