X-Git-Url: https://git.mdrn.pl/redakcja.git/blobdiff_plain/db6d2feee32d100fb893b389421bda2fd65a89cd..d9f6aab0486a302a211c6d9c77394daa501c7216:/project/static/js/edit_area_functions.js diff --git a/project/static/js/edit_area_functions.js b/project/static/js/edit_area_functions.js new file mode 100755 index 00000000..984d4c61 --- /dev/null +++ b/project/static/js/edit_area_functions.js @@ -0,0 +1,1203 @@ + //replace tabulation by the good number of white spaces + EditArea.prototype.replace_tab= function(text){ + return text.replace(/((\n?)([^\t\n]*)\t)/gi, editArea.smartTab); // slower than simple replace... + }; + + // call by the replace_tab function + EditArea.prototype.smartTab= function(){ + val=" "; + return EditArea.prototype.smartTab.arguments[2] + EditArea.prototype.smartTab.arguments[3] + val.substr(0, editArea.tab_nb_char - (EditArea.prototype.smartTab.arguments[3].length)%editArea.tab_nb_char); + }; + + EditArea.prototype.show_waiting_screen= function(){ + width = this.editor_area.offsetWidth; + height = this.editor_area.offsetHeight; + if( !(this.isIE && this.isIE<6) ) + { + width -= 2; + height -= 2; + } + this.processing_screen.style.display= "block"; + this.processing_screen.style.width = width+"px"; + this.processing_screen.style.height = height+"px"; + this.waiting_screen_displayed = true; + }; + + EditArea.prototype.hide_waiting_screen= function(){ + this.processing_screen.style.display="none"; + this.waiting_screen_displayed= false; + }; + + EditArea.prototype.add_style= function(styles){ + if(styles.length>0){ + newcss = document.createElement("style"); + newcss.type="text/css"; + newcss.media="all"; + if(newcss.styleSheet){ // IE + newcss.styleSheet.cssText = styles; + } else { // W3C + newcss.appendChild(document.createTextNode(styles)); + } + document.getElementsByTagName("head")[0].appendChild(newcss); + } + }; + + EditArea.prototype.set_font= function(family, size){ + var t=this, a=this.textarea, s=this.settings, elem_font, i, elem; + // list all elements concerned by font changes + var elems= ["textarea", "content_highlight", "cursor_pos", "end_bracket", "selection_field", "selection_field_text", "line_number"]; + + if(family && family!="") + s["font_family"]= family; + if(size && size>0) + s["font_size"] = size; + if( t.isOpera && t.isOpera < 9.6 ) // opera<9.6 can't manage non monospace font + s['font_family']="monospace"; + + // update the select tag + if( elem_font = _$("area_font_size") ) + { + for( i = 0; i < elem_font.length; i++ ) + { + if( elem_font.options[i].value && elem_font.options[i].value == s["font_size"] ) + elem_font.options[i].selected=true; + } + } + + /* + * somethimes firefox has rendering mistake with non-monospace font for text width in textarea vs in div for changing font size (eg: verdana change between 11pt to 12pt) + * => looks like a browser internal random bug as text width can change while content_highlight is updated + * we'll check if the font-size produce the same text width inside textarea and div and if not, we'll increment the font-size + * + * This is an ugly fix + */ + if( t.isFirefox ) + { + var nbTry = 3; + do { + var div1 = document.createElement( 'div' ), text1 = document.createElement( 'textarea' ); + var styles = { + width: '40px', + overflow: 'scroll', + zIndex: 50, + visibility: 'hidden', + fontFamily: s["font_family"], + fontSize: s["font_size"]+"pt", + lineHeight: t.lineHeight+"px", + padding: '0', + margin: '0', + border: 'none', + whiteSpace: 'nowrap' + }; + var diff, changed = false; + for( i in styles ) + { + div1.style[ i ] = styles[i]; + text1.style[ i ] = styles[i]; + } + // no wrap for this text + text1.wrap = 'off'; + text1.setAttribute('wrap', 'off'); + t.container.appendChild( div1 ); + t.container.appendChild( text1 ); + // try to make FF to bug + div1.innerHTML = text1.value = 'azertyuiopqsdfghjklm'; + div1.innerHTML = text1.value = text1.value+'wxcvbn^p*ù$!:;,,'; + diff = text1.scrollWidth - div1.scrollWidth; + + // firefox return here a diff of 1 px between equals scrollWidth (can't explain) + if( Math.abs( diff ) >= 2 ) + { + s["font_size"]++; + changed = true; + } + t.container.removeChild( div1 ); + t.container.removeChild( text1 ); + nbTry--; + }while( changed && nbTry > 0 ); + } + + + // calc line height + elem = t.test_font_size; + elem.style.fontFamily = ""+s["font_family"]; + elem.style.fontSize = s["font_size"]+"pt"; + elem.innerHTML = "0"; + t.lineHeight = elem.offsetHeight; + + // update font for all concerned elements + for( i=0; i tags + t.add_style("pre{font-family:"+s["font_family"]+"}"); + + // old opera and IE>=8 doesn't update font changes to the textarea + if( ( t.isOpera && t.isOpera < 9.6 ) || t.isIE >= 8 ) + { + var parNod = a.parentNode, nxtSib = a.nextSibling, start= a.selectionStart, end= a.selectionEnd; + parNod.removeChild(a); + parNod.insertBefore(a, nxtSib); + t.area_select(start, end-start); + } + + // force update of selection field + this.focus(); + this.update_size(); + this.check_line_selection(); + }; + + EditArea.prototype.change_font_size= function(){ + var size=_$("area_font_size").value; + if(size>0) + this.set_font("", size); + }; + + + EditArea.prototype.open_inline_popup= function(popup_id){ + this.close_all_inline_popup(); + var popup= _$(popup_id); + var editor= _$("editor"); + + // search matching icon + for(var i=0; i lines.length) + start= this.textarea.value.length; + else{ + for(var i=0; i0){ + //alert(miss_top); + zone.scrollTop= zone.scrollTop + miss_top; + }else if( zone.scrollTop > cursor_pos_top){ + // when erase all the content -> does'nt scroll back to the top + //alert("else: "+cursor_pos_top); + zone.scrollTop= cursor_pos_top; + } + + // manage left scroll + //var cursor_pos_left= parseInt(_$("cursor_pos").style.left.replace("px","")); + var cursor_pos_left= _$("cursor_pos").cursor_left; + var max_width_visible= zone.clientWidth + zone.scrollLeft; + var miss_left= cursor_pos_left + 10 - max_width_visible; + if(miss_left>0){ + zone.scrollLeft= zone.scrollLeft + miss_left + 50; + }else if( zone.scrollLeft > cursor_pos_left){ + zone.scrollLeft= cursor_pos_left ; + }else if( zone.scrollLeft == 45){ + // show the line numbers if textarea align to it's left + zone.scrollLeft=0; + } + }; + + EditArea.prototype.check_undo= function(only_once){ + if(!editAreas[this.id]) + return false; + if(this.textareaFocused && editAreas[this.id]["displayed"]==true){ + var text=this.textarea.value; + if(this.previous.length<=1) + this.switchClassSticky(_$("undo"), 'editAreaButtonDisabled', true); + + if(!this.previous[this.previous.length-1] || this.previous[this.previous.length-1]["text"] != text){ + this.previous.push({"text": text, "selStart": this.textarea.selectionStart, "selEnd": this.textarea.selectionEnd}); + if(this.previous.length > this.settings["max_undo"]+1) + this.previous.shift(); + + } + if(this.previous.length >= 2) + this.switchClassSticky(_$("undo"), 'editAreaButtonNormal', false); + } + + if(!only_once) + setTimeout("editArea.check_undo()", 3000); + }; + + EditArea.prototype.undo= function(){ + //alert("undo"+this.previous.length); + if(this.previous.length > 0) + { + this.getIESelection(); + // var pos_cursor=this.textarea.selectionStart; + this.next.push( { "text": this.textarea.value, "selStart": this.textarea.selectionStart, "selEnd": this.textarea.selectionEnd } ); + var prev= this.previous.pop(); + if( prev["text"] == this.textarea.value && this.previous.length > 0 ) + prev =this.previous.pop(); + this.textarea.value = prev["text"]; + this.last_undo = prev["text"]; + this.area_select(prev["selStart"], prev["selEnd"]-prev["selStart"]); + this.switchClassSticky(_$("redo"), 'editAreaButtonNormal', false); + this.resync_highlight(true); + //alert("undo"+this.previous.length); + this.check_file_changes(); + } + }; + + EditArea.prototype.redo= function(){ + if(this.next.length > 0) + { + /*this.getIESelection();*/ + //var pos_cursor=this.textarea.selectionStart; + var next= this.next.pop(); + this.previous.push(next); + this.textarea.value= next["text"]; + this.last_undo= next["text"]; + this.area_select(next["selStart"], next["selEnd"]-next["selStart"]); + this.switchClassSticky(_$("undo"), 'editAreaButtonNormal', false); + this.resync_highlight(true); + this.check_file_changes(); + } + if( this.next.length == 0) + this.switchClassSticky(_$("redo"), 'editAreaButtonDisabled', true); + }; + + EditArea.prototype.check_redo= function(){ + if(editArea.next.length == 0 || editArea.textarea.value!=editArea.last_undo){ + editArea.next= []; // undo the ability to use "redo" button + editArea.switchClassSticky(_$("redo"), 'editAreaButtonDisabled', true); + } + else + { + this.switchClassSticky(_$("redo"), 'editAreaButtonNormal', false); + } + }; + + + // functions that manage icons roll over, disabled, etc... + EditArea.prototype.switchClass = function(element, class_name, lock_state) { + var lockChanged = false; + + if (typeof(lock_state) != "undefined" && element != null) { + element.classLock = lock_state; + lockChanged = true; + } + + if (element != null && (lockChanged || !element.classLock)) { + element.oldClassName = element.className; + element.className = class_name; + } + }; + + EditArea.prototype.restoreAndSwitchClass = function(element, class_name) { + if (element != null && !element.classLock) { + this.restoreClass(element); + this.switchClass(element, class_name); + } + }; + + EditArea.prototype.restoreClass = function(element) { + if (element != null && element.oldClassName && !element.classLock) { + element.className = element.oldClassName; + element.oldClassName = null; + } + }; + + EditArea.prototype.setClassLock = function(element, lock_state) { + if (element != null) + element.classLock = lock_state; + }; + + EditArea.prototype.switchClassSticky = function(element, class_name, lock_state) { + var lockChanged = false; + if (typeof(lock_state) != "undefined" && element != null) { + element.classLock = lock_state; + lockChanged = true; + } + + if (element != null && (lockChanged || !element.classLock)) { + element.className = class_name; + element.oldClassName = class_name; + } + }; + + //make the "page up" and "page down" buttons works correctly + EditArea.prototype.scroll_page= function(params){ + var dir= params["dir"], shift_pressed= params["shift"]; + var lines= this.textarea.value.split("\n"); + var new_pos=0, length=0, char_left=0, line_nb=0, curLine=0; + var toScrollAmount = _$("result").clientHeight -30; + var nbLineToScroll = 0, diff= 0; + + if(dir=="up"){ + nbLineToScroll = Math.ceil( toScrollAmount / this.lineHeight ); + + // fix number of line to scroll + for( i = this.last_selection["line_start"]; i - diff > this.last_selection["line_start"] - nbLineToScroll ; i-- ) + { + if( elem = _$('line_'+ i) ) + { + diff += Math.floor( ( elem.offsetHeight - 1 ) / this.lineHeight ); + } + } + nbLineToScroll -= diff; + + if(this.last_selection["selec_direction"]=="up"){ + for(line_nb=0; line_nb< Math.min(this.last_selection["line_start"]-nbLineToScroll, lines.length); line_nb++){ + new_pos+= lines[line_nb].length + 1; + } + char_left=Math.min(lines[Math.min(lines.length-1, line_nb)].length, this.last_selection["curr_pos"]-1); + if(shift_pressed) + length=this.last_selection["selectionEnd"]-new_pos-char_left; + this.area_select(new_pos+char_left, length); + view="top"; + }else{ + view="bottom"; + for(line_nb=0; line_nb< Math.min(this.last_selection["line_start"]+this.last_selection["line_nb"]-1-nbLineToScroll, lines.length); line_nb++){ + new_pos+= lines[line_nb].length + 1; + } + char_left=Math.min(lines[Math.min(lines.length-1, line_nb)].length, this.last_selection["curr_pos"]-1); + if(shift_pressed){ + //length=this.last_selection["selectionEnd"]-new_pos-char_left; + start= Math.min(this.last_selection["selectionStart"], new_pos+char_left); + length= Math.max(new_pos+char_left, this.last_selection["selectionStart"] )- start ; + if(new_pos+char_left < this.last_selection["selectionStart"]) + view="top"; + }else + start=new_pos+char_left; + this.area_select(start, length); + + } + } + else + { + var nbLineToScroll= Math.floor( toScrollAmount / this.lineHeight ); + // fix number of line to scroll + for( i = this.last_selection["line_start"]; i + diff < this.last_selection["line_start"] + nbLineToScroll ; i++ ) + { + if( elem = _$('line_'+ i) ) + { + diff += Math.floor( ( elem.offsetHeight - 1 ) / this.lineHeight ); + } + } + nbLineToScroll -= diff; + + if(this.last_selection["selec_direction"]=="down"){ + view="bottom"; + for(line_nb=0; line_nb< Math.min(this.last_selection["line_start"]+this.last_selection["line_nb"]-2+nbLineToScroll, lines.length); line_nb++){ + if(line_nb==this.last_selection["line_start"]-1) + char_left= this.last_selection["selectionStart"] -new_pos; + new_pos+= lines[line_nb].length + 1; + + } + if(shift_pressed){ + length=Math.abs(this.last_selection["selectionStart"]-new_pos); + length+=Math.min(lines[Math.min(lines.length-1, line_nb)].length, this.last_selection["curr_pos"]); + //length+=Math.min(lines[Math.min(lines.length-1, line_nb)].length, char_left); + this.area_select(Math.min(this.last_selection["selectionStart"], new_pos), length); + }else{ + this.area_select(new_pos+char_left, 0); + } + + }else{ + view="top"; + for(line_nb=0; line_nb< Math.min(this.last_selection["line_start"]+nbLineToScroll-1, lines.length, lines.length); line_nb++){ + if(line_nb==this.last_selection["line_start"]-1) + char_left= this.last_selection["selectionStart"] -new_pos; + new_pos+= lines[line_nb].length + 1; + } + if(shift_pressed){ + length=Math.abs(this.last_selection["selectionEnd"]-new_pos-char_left); + length+=Math.min(lines[Math.min(lines.length-1, line_nb)].length, this.last_selection["curr_pos"])- char_left-1; + //length+=Math.min(lines[Math.min(lines.length-1, line_nb)].length, char_left); + this.area_select(Math.min(this.last_selection["selectionEnd"], new_pos+char_left), length); + if(new_pos+char_left > this.last_selection["selectionEnd"]) + view="bottom"; + }else{ + this.area_select(new_pos+char_left, 0); + } + + } + } + //console.log( new_pos, char_left, length, nbLineToScroll, toScrollAmount, _$("result").clientHeigh ); + this.check_line_selection(); + this.scroll_to_view(view); + }; + + EditArea.prototype.start_resize= function(e){ + parent.editAreaLoader.resize["id"] = editArea.id; + parent.editAreaLoader.resize["start_x"] = (e)? e.pageX : event.x + document.body.scrollLeft; + parent.editAreaLoader.resize["start_y"] = (e)? e.pageY : event.y + document.body.scrollTop; + if(editArea.isIE) + { + editArea.textarea.focus(); + editArea.getIESelection(); + } + parent.editAreaLoader.resize["selectionStart"] = editArea.textarea.selectionStart; + parent.editAreaLoader.resize["selectionEnd"] = editArea.textarea.selectionEnd; + parent.editAreaLoader.start_resize_area(); + }; + + EditArea.prototype.toggle_full_screen= function(to){ + var t=this, p=parent, a=t.textarea, html, frame, selStart, selEnd, old, icon; + if(typeof(to)=="undefined") + to= !t.fullscreen['isFull']; + old = t.fullscreen['isFull']; + t.fullscreen['isFull']= to; + icon = _$("fullscreen"); + selStart = t.textarea.selectionStart; + selEnd = t.textarea.selectionEnd; + html = p.document.getElementsByTagName("html")[0]; + frame = p.document.getElementById("frame_"+t.id); + + if(to && to!=old) + { // toogle on fullscreen + + t.fullscreen['old_overflow'] = p.get_css_property(html, "overflow"); + t.fullscreen['old_height'] = p.get_css_property(html, "height"); + t.fullscreen['old_width'] = p.get_css_property(html, "width"); + t.fullscreen['old_scrollTop'] = html.scrollTop; + t.fullscreen['old_scrollLeft'] = html.scrollLeft; + t.fullscreen['old_zIndex'] = p.get_css_property(frame, "z-index"); + if(t.isOpera){ + html.style.height = "100%"; + html.style.width = "100%"; + } + html.style.overflow = "hidden"; + html.scrollTop = 0; + html.scrollLeft = 0; + + frame.style.position = "absolute"; + frame.style.width = html.clientWidth+"px"; + frame.style.height = html.clientHeight+"px"; + frame.style.display = "block"; + frame.style.zIndex = "999999"; + frame.style.top = "0px"; + frame.style.left = "0px"; + + // if the iframe was in a div with position absolute, the top and left are the one of the div, + // so I fix it by seeing at witch position the iframe start and correcting it + frame.style.top = "-"+p.calculeOffsetTop(frame)+"px"; + frame.style.left = "-"+p.calculeOffsetLeft(frame)+"px"; + + // parent.editAreaLoader.execCommand(t.id, "update_size();"); + // var body=parent.document.getElementsByTagName("body")[0]; + // body.appendChild(frame); + + t.switchClassSticky(icon, 'editAreaButtonSelected', false); + t.fullscreen['allow_resize']= t.resize_allowed; + t.allow_resize(false); + + //t.area_select(selStart, selEnd-selStart); + + + // opera can't manage to do a direct size update + if(t.isFirefox){ + p.editAreaLoader.execCommand(t.id, "update_size();"); + t.area_select(selStart, selEnd-selStart); + t.scroll_to_view(); + t.focus(); + }else{ + setTimeout("p.editAreaLoader.execCommand('"+ t.id +"', 'update_size();');editArea.focus();", 10); + } + + + } + else if(to!=old) + { // toogle off fullscreen + frame.style.position="static"; + frame.style.zIndex= t.fullscreen['old_zIndex']; + + if(t.isOpera) + { + html.style.height = "auto"; + html.style.width = "auto"; + html.style.overflow = "auto"; + } + else if(t.isIE && p!=top) + { // IE doesn't manage html overflow in frames like in normal page... + html.style.overflow = "auto"; + } + else + { + html.style.overflow = t.fullscreen['old_overflow']; + } + html.scrollTop = t.fullscreen['old_scrollTop']; + html.scrollLeft = t.fullscreen['old_scrollLeft']; + + p.editAreaLoader.hide(t.id); + p.editAreaLoader.show(t.id); + + t.switchClassSticky(icon, 'editAreaButtonNormal', false); + if(t.fullscreen['allow_resize']) + t.allow_resize(t.fullscreen['allow_resize']); + if(t.isFirefox){ + t.area_select(selStart, selEnd-selStart); + setTimeout("editArea.scroll_to_view();", 10); + } + + //p.editAreaLoader.remove_event(p.window, "resize", editArea.update_size); + } + + }; + + EditArea.prototype.allow_resize= function(allow){ + var resize= _$("resize_area"); + if(allow){ + + resize.style.visibility="visible"; + parent.editAreaLoader.add_event(resize, "mouseup", editArea.start_resize); + }else{ + resize.style.visibility="hidden"; + parent.editAreaLoader.remove_event(resize, "mouseup", editArea.start_resize); + } + this.resize_allowed= allow; + }; + + + EditArea.prototype.change_syntax= function(new_syntax, is_waiting){ + // alert("cahnge to "+new_syntax); + // the syntax is the same + if(new_syntax==this.settings['syntax']) + return true; + + // check that the syntax is one allowed + var founded= false; + for(var i=0; i"; + elem.innerHTML= "*"+ this.files[id]['title'] + close +""; + _$('tab_browsing_list').appendChild(elem); + var elem= document.createElement('text'); + this.update_size(); + } + + // open file callback (for plugin) + if(id!="") + this.execCommand('file_open', this.files[id]); + + this.switch_to_file(id, true); + return true; + } + else + return false; + }; + + // close the given file + EditArea.prototype.close_file= function(id){ + if(this.files[id]) + { + this.save_file(id); + + // close file callback + if(this.execCommand('file_close', this.files[id])!==false) + { + // remove the tab in the toolbar + var li= _$(this.files[id]['html_id']); + li.parentNode.removeChild(li); + // select a new file + if(id== this.curr_file) + { + var next_file= ""; + var is_next= false; + for(var i in this.files) + { + if( is_next ) + { + next_file = i; + break; + } + else if( i == id ) + is_next = true; + else + next_file = i; + } + // display the next file + this.switch_to_file(next_file); + } + // clear datas + delete (this.files[id]); + this.update_size(); + } + } + }; + + // backup current file datas + EditArea.prototype.save_file= function(id){ + var t= this, save, a_links, a_selects, save_butt, img, i; + if(t.files[id]) + { + var save= t.files[id]; + save['last_selection'] = t.last_selection; + save['last_text_to_highlight'] = t.last_text_to_highlight; + save['last_hightlighted_text'] = t.last_hightlighted_text; + save['previous'] = t.previous; + save['next'] = t.next; + save['last_undo'] = t.last_undo; + save['smooth_selection'] = t.smooth_selection; + save['do_highlight'] = t.do_highlight; + save['syntax'] = t.settings['syntax']; + save['text'] = t.textarea.value; + save['scroll_top'] = t.result.scrollTop; + save['scroll_left'] = t.result.scrollLeft; + save['selection_start'] = t.last_selection["selectionStart"]; + save['selection_end'] = t.last_selection["selectionEnd"]; + save['font_size'] = t.settings["font_size"]; + save['font_family'] = t.settings["font_family"]; + save['word_wrap'] = t.settings["word_wrap"]; + save['toolbar'] = {'links':{}, 'selects': {}}; + + // save toolbar buttons state for fileSpecific buttons + a_links= _$("toolbar_1").getElementsByTagName("a"); + for( i=0; i