X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/f938afb8ab4cb091d12e0ef0311eaea14b774798..c3f7497f5070c9b317a963a2db6cfe5880ff8d15:/redakcja/static/js/wiki/view_editor_wysiwyg.js?ds=inline diff --git a/redakcja/static/js/wiki/view_editor_wysiwyg.js b/redakcja/static/js/wiki/view_editor_wysiwyg.js index 2ae1a8dd..4353848e 100644 --- a/redakcja/static/js/wiki/view_editor_wysiwyg.js +++ b/redakcja/static/js/wiki/view_editor_wysiwyg.js @@ -37,14 +37,14 @@ } // don't allow themes inside annotations - if (node.is('*[x-annotation-box] *')) + if (node.closest('[x-node="pe"]').length > 0) return false; return true; } - /* Convert HTML frament to plaintext */ - var ANNOT_ALLOWED = ['wyroznienie', 'slowo_obce', 'osoba']; + /* Convert HTML fragment to plaintext */ + var ANNOT_FORBIDDEN = ['pt', 'pa', 'pr', 'pe', 'begin', 'end', 'motyw']; function html2plainText(fragment){ var text = ""; @@ -52,11 +52,12 @@ $(fragment.childNodes).each(function(){ if (this.nodeType == 3) // textNode text += this.nodeValue; - else + else { if (this.nodeType == 1 && - $.inArray($(this).attr('x-node'), ANNOT_ALLOWED) != -1) { + $.inArray($(this).attr('x-node'), ANNOT_FORBIDDEN) == -1) { text += html2plainText(this); } + }; }); return text; @@ -87,16 +88,15 @@ return false; } - // BUG #273 - selected text can contain themes, which should be omited from + // BUG #273 - selected text can contain themes, which should be omitted from // defining term var text = html2plainText(range.cloneContents()); - var tag = $(''); range.collapse(false); range.insertNode(tag[0]); xml2html({ - xml: '' + text + ' --- ', + xml: '' + text + ' --- ', success: function(text){ var t = $(text); tag.replaceWith(t); @@ -155,12 +155,21 @@ var random = Math.floor(4000000000 * Math.random()); var id = ('' + date) + '-' + ('' + random); - var spoint = document.createRange(); - var epoint = document.createRange(); - - spoint.setStart(range.startContainer, range.startOffset); - epoint.setStart(range.endContainer, range.endOffset); - + var createPoint = function(container, offset) { + var offsetBetweenCommas = function(text, offset) { + if(text.length < 2 || offset < 1 || offset > text.length) + return false; + return text[offset-1] === ',' && text[offset] === ','; + } + var point = document.createRange(); + offset = offsetBetweenCommas(container.textContent, offset) ? offset - 1 : offset; + 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 @@ -193,6 +202,164 @@ }); } + function addSymbol() { + if($('div.html-editarea textarea')[0]) { + var specialCharsContainer = $("
Zamknij
"); + + var specialChars = ['Ą','ą','Ć','ć','Ę','ę','Ł','ł','Ń','ń','Ó','ó','Ś','ś','Ż','ż','Ź','ź','Á','á','À','à', + 'Â','â','Ä','ä','Å','å','Ā','ā','Ă','ă','Ã','ã', + 'Æ','æ','Ç','ç','Č','č','Ċ','ċ','Ď','ď','É','é','È','è', + 'Ê','ê','Ë','ë','Ē','ē','Ě','ě','Ġ','ġ','Ħ','ħ','Í','í','Î','î', + 'Ī','ī','Ĭ','ĭ','Ľ','ľ','Ñ','ñ','Ň','ň','Ó','ó','Ö','ö', + 'Ô','ô','Ō','ō','Ǒ','ǒ','Œ','œ','Ø','ø','Ř','ř','Š', + 'š','Ş','ş','Ť','ť','Ţ','ţ','Ű','ű','Ú','ú','Ù','ù', + 'Ü','ü','Ů','ů','Ū','ū','Û','û','Ŭ','ŭ', + 'Ý','ý','Ž','ž','ß','Ð','ð','Þ','þ','А','а','Б', + 'б','В','в','Г','г','Д','д','Е','е','Ё','ё','Ж', + 'ж','З','з','И','и','Й','й','К','к','Л','л','М', + 'м','Н','н','О','о','П','п','Р','р','С','с', + 'Т','т','У','у','Ф','ф','Х','х','Ц','ц','Ч', + 'ч','Ш','ш','Щ','щ','Ъ','ъ','Ы','ы','Ь','ь','Э', + 'э','Ю','ю','Я','я','ѓ','є','і','ї','ј','љ','њ', + 'Ґ','ґ','Α','α','Β','β','Γ','γ','Δ','δ','Ε','ε', + 'Ζ','ζ','Η','η','Θ','θ','Ι','ι','Κ','κ','Λ','λ','Μ', + 'μ','Ν','ν','Ξ','ξ','Ο','ο','Π','π','Ρ','ρ','Σ','ς','σ', + 'Τ','τ','Υ','υ','Φ','φ','Χ','χ','Ψ','ψ','Ω','ω','–', + '—','¡','¿','$','¢','£','€','©','®','°','¹','²','³', + '¼','½','¾','†','§','‰','•','←','↑','→','↓', + '„','”','„”','«','»','«»','»«','’','[',']','~','|','−','·', + '×','÷','≈','≠','±','≤','≥','∈']; + var tableContent = ""; + + for(var i in specialChars) { + if(i % 14 == 0 && i > 0) { + tableContent += ""; + } + tableContent += ""; + } + + tableContent += ""; + $("#content").append(specialCharsContainer); + + + // localStorage for recently used characters - reading + if (typeof(localStorage) != 'undefined') { + if (localStorage.getItem("recentSymbols")) { + var recent = localStorage.getItem("recentSymbols"); + var recentArray = recent.split(";"); + var recentRow = ""; + for(var i in recentArray.reverse()) { + 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); + } + } else { + // if we just want to insert single symbol + insertAtCaret(editArea, insertVal); + } + + // localStorage for recently used characters - saving + if (typeof(localStorage) != 'undefined') { + if (localStorage.getItem("recentSymbols")) { + var recent = localStorage.getItem("recentSymbols"); + var recentArray = recent.split(";"); + var valIndex = $.inArray(insertVal, recentArray); + //alert(valIndex); + if(valIndex == -1) { + // value not present in array yet + if(recentArray.length > 13){ + recentArray.shift(); + recentArray.push(insertVal); + } else { + recentArray.push(insertVal); + } + } else { + // value already in the array + for(var i = valIndex; i < recentArray.length; i++){ + recentArray[i] = recentArray[i+1]; + } + recentArray[recentArray.length-1] = insertVal; + } + localStorage.setItem("recentSymbols", recentArray.join(";")); + } else { + localStorage.setItem("recentSymbols", insertVal); + } + } + $(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) { + /* 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 backStart = 0; + var br = ((txtarea.selectionStart || txtarea.selectionStart == '0') ? "ff" : (document.selection ? "ie" : false ) ); + if (br == "ie") { + txtarea.focus(); + var range = document.selection.createRange(); + range.moveStart ('character', -txtarea.value.length); + strPos = backStart = range.text.length; + } else if (br == "ff") { + 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; + } + /* open edition window for selected fragment */ function openForEdit($origin){ var $box = null @@ -204,35 +371,45 @@ else { $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(); if ($origin.is(".annotation-inline-box")) { 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())); + } else { + x = 100; + } } // start edition on this node - var $overlay = $('
').css({ + var $overlay = $('
').css({ position: 'absolute', height: h, left: x, top: y, width: w }).appendTo($box[0].offsetParent || $box.parent()).show(); + if ($origin.is('.motyw')) { - $('textarea', $overlay).autocomplete(THEMES, { - autoFill: true, - multiple: true, - selectFirst: true - }); + $('.akap-edit-button').remove(); + withThemes(function(canonThemes){ + $('textarea', $overlay).autocomplete(canonThemes, { + autoFill: true, + multiple: true, + selectFirst: true, + highlight: false + }); + }) } - if ($origin.is('.motyw')) { + if ($origin.is('.motyw')){ $('.delete-button', $overlay).click(function(){ if (window.confirm("Czy jesteś pewien, że chcesz usunąć ten motyw ?")) { $('[theme-class=' + $origin.attr('theme-class') + ']').remove(); @@ -240,10 +417,27 @@ $(document).unbind('click.blur-overlay'); return false; }; - }); + }); + } + else if($box.is('*[x-annotation-box]')) { + $('.delete-button', $overlay).click(function(){ + if (window.confirm("Czy jesteś pewien, że chcesz usunąć ten przypis?")) { + $origin.remove(); + $overlay.remove(); + $(document).unbind('click.blur-overlay'); + return false; + }; + }); } else { - $('.delete-button', $overlay).hide(); + $('.delete-button', $overlay).html("Anuluj"); + $('.delete-button', $overlay).click(function(){ + if (window.confirm("Czy jesteś pewien, że chcesz anulować zmiany?")) { + $overlay.remove(); + $(document).unbind('click.blur-overlay'); + return false; + }; + }); } @@ -270,26 +464,74 @@ xml2html({ xml: '<' + nodeName + '>' + insertedText + '', success: function(element){ - $origin.html($(element).html()); + if (nodeName == 'out-of-flow-text') { + $(element).children().insertAfter($origin); + $origin.remove() + } + else { + $origin.html($(element).html()); + } $overlay.remove(); }, error: function(text){ - $overlay.remove(); alert('Błąd! ' + text); } }) + + var msg = $("

Pamiętaj, żeby zapisać swoje zmiany.

"); + $("#base").prepend(msg); + $('#base .saveNotify').fadeOut(3000, function(){ + $(this).remove(); + }); } + $('.akap-edit-button', $overlay).click(function(){ + var textAreaOpened = $('textarea', $overlay)[0]; + var startTag = ""; + var endTag = ""; + var buttonName = this.innerHTML; + + if(buttonName == "słowo obce") { + startTag = ""; + endTag = ""; + } else if (buttonName == "wyróżnienie") { + startTag = ""; + endTag = ""; + } else if (buttonName == "tytuł dzieła") { + startTag = ""; + endTag = ""; + } else if(buttonName == "znak spec."){ + addSymbol(); + return false; + } + + var myField = textAreaOpened; + + //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); + } + }); + $('.accept-button', $overlay).click(function(){ save(); + $(document).unbind('click.blur-overlay'); }); $(document).bind('click.blur-overlay', function(event){ - if ($(event.target).parents('.html-editarea').length > 0) { + if ($(event.target).closest('.html-editarea, #specialCharsContainer').length > 0) { return; } save(); - $(document).unbind('click.blur-overlay'); }); @@ -336,7 +578,7 @@ $('#insert-theme-button').click(function(){ addTheme(); return false; - }); + }); $('.edit-button').live('click', function(event){ event.preventDefault(); @@ -377,15 +619,23 @@ xml2html({ xml: this.doc.text, success: function(element){ - $('#html-view').html(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){ - var message = $('
');
-                message.text(text);
-                $('#html-view').html('
Wystąpił błąd:
' +
-                message.html() +
-                '
');
+            error: function(text, source){
+                err = '
Wystąpił błąd:
'+text+'
';
+                if (source)
+                    err += '
'+source.replace(/&/g, '&').replace(/'
+                $('#html-view').html(err);
                 _finalize(failure);
             }
         });
@@ -408,7 +658,8 @@
             return _finalize(failure);
 
         html2text({
-            element: $('#html-view div').get(0),
+            element: $('#html-view').get(0),
+            stripOuter: true,
             success: function(text){
                 self.doc.setText(text);
                 _finalize(success);