| 1 |
var autocompleting = false; |
| 2 |
var autocompletelength = 2; |
| 3 |
var editor = ''; |
| 4 |
|
| 5 |
jQuery(document).ready(function($) { |
| 6 |
|
| 7 |
//quit if editing this plugin since it will spaz out!! |
| 8 |
if ( $('input[name=file]').val() == 'ace/ace.php' ){ |
| 9 |
$('#newcontent').css({'display': 'inline', 'width': '70%'}); //unhide the usual textarea |
| 10 |
return; |
| 11 |
} |
| 12 |
|
| 13 |
//add div for ace editor to latch on to |
| 14 |
$('#template').prepend("<div style='width:80%;height:500px;margin-right:0!important;' id='fancyeditordiv'></div>"); |
| 15 |
//create the editor instance |
| 16 |
editor = ace.edit("fancyeditordiv"); |
| 17 |
//set the editor theme |
| 18 |
editor.setTheme("ace/theme/dawn"); |
| 19 |
//get a copy of the initial file contents (the file being edited) |
| 20 |
var intialData = $('#newcontent').val(); |
| 21 |
//add the file contents to our new editor instance |
| 22 |
editor.getSession().setValue( intialData ); |
| 23 |
|
| 24 |
|
| 25 |
//are we editing a theme or plugin? |
| 26 |
var aceedittype; |
| 27 |
if (/wp\-admin\/plugin-editor\.php/.test(document.URL)) |
| 28 |
aceedittype = 'plugin'; |
| 29 |
else if (/wp\-admin\/theme-editor\.php/.test(document.URL)) |
| 30 |
aceedittype = 'theme'; |
| 31 |
|
| 32 |
|
| 33 |
|
| 34 |
//ajax call to generate a backup of this file we are about to edit |
| 35 |
var data = { action: 'ace_backup_call', filename: $('input[name=file]').val(), edittype: aceedittype }; |
| 36 |
jQuery.post(ajaxurl, data, function(response) { |
| 37 |
if (response === 'success'){ |
| 38 |
alert("A backup copy of this file has been generated."); |
| 39 |
} |
| 40 |
}); |
| 41 |
|
| 42 |
//use editors php mode |
| 43 |
// var phpMode = require("ace/mode/php").Mode; |
| 44 |
// editor.getSession().setMode(new phpMode()); |
| 45 |
var currentFilename = $('input[name=file]').val(); |
| 46 |
var mode; |
| 47 |
if (/\.css$/.test(currentFilename)) |
| 48 |
mode = require("ace/mode/css").Mode; |
| 49 |
else if (/\.js$/.test(currentFilename)) |
| 50 |
mode = require("ace/mode/javascript").Mode; |
| 51 |
else |
| 52 |
mode = require("ace/mode/php").Mode; |
| 53 |
editor.getSession().setMode(new mode()); |
| 54 |
|
| 55 |
|
| 56 |
$('#submit').click(function(event){ |
| 57 |
var use_val = editor.getSession().getValue(); |
| 58 |
$('textarea#newcontent').text( use_val ); //.html does some dodgy things with certain php files |
| 59 |
}); |
| 60 |
|
| 61 |
|
| 62 |
//START WP AUTOCOMPLETE |
| 63 |
|
| 64 |
//create the autocomplete dropdown |
| 65 |
ac = document.createElement('select'); |
| 66 |
ac.id = 'ac'; |
| 67 |
ac.namme = 'ac'; |
| 68 |
ac.style.position='absolute'; |
| 69 |
ac.style.zIndex=100; |
| 70 |
ac.style.width='auto'; |
| 71 |
ac.style.display='none'; |
| 72 |
ac.style.height='auto'; |
| 73 |
ac.size=10; |
| 74 |
editor.container.appendChild(ac); |
| 75 |
|
| 76 |
|
| 77 |
|
| 78 |
|
| 79 |
//hook onto any change in editor contents |
| 80 |
editor.getSession().on('change', function(e) { |
| 81 |
|
| 82 |
//don't continue with autocomplete if /n entered |
| 83 |
try { |
| 84 |
if ( e.data.text.charCodeAt(0) == 10 ){ |
| 85 |
return; |
| 86 |
} |
| 87 |
} catch(e) {} |
| 88 |
|
| 89 |
//get cursor/selection |
| 90 |
var range = editor.getSelectionRange(); |
| 91 |
|
| 92 |
//do we need to extend the length of the autocomplete string |
| 93 |
if (autocompleting) { |
| 94 |
autocompletelength = autocompletelength + 1; |
| 95 |
} else { |
| 96 |
autocompletelength = 2; |
| 97 |
} |
| 98 |
|
| 99 |
|
| 100 |
//modify the cursor/selection data we have to get text from the editor to check for matching function/method |
| 101 |
//set start column |
| 102 |
range.start.column = range.start.column - autocompletelength; |
| 103 |
//no column lower than 1 thanks |
| 104 |
if (range.start.column < 1) range.start.column = 0; |
| 105 |
//set end column |
| 106 |
range.end.column = range.end.column + 1; |
| 107 |
//get the editor text based on that range |
| 108 |
var text = editor.getSession().doc.getTextRange(range); |
| 109 |
|
| 110 |
//dont show if no text passed |
| 111 |
$quit_onchange = false; |
| 112 |
try { |
| 113 |
if (text==="") { |
| 114 |
ac.style.display='none'; |
| 115 |
} |
| 116 |
} catch(e) { }//catch end |
| 117 |
// if string length less than 3 then quit this |
| 118 |
if (text.length < 3){ |
| 119 |
return; |
| 120 |
} |
| 121 |
|
| 122 |
|
| 123 |
//create the dropdown for autocomplete |
| 124 |
var sel = editor.getSelection(); |
| 125 |
var session = editor.getSession(); |
| 126 |
var lead = sel.getSelectionLead(); |
| 127 |
|
| 128 |
var pos = editor.renderer.textToScreenCoordinates(lead.row, lead.column); |
| 129 |
var ac; |
| 130 |
|
| 131 |
|
| 132 |
|
| 133 |
if( document.getElementById('ac') ){ |
| 134 |
ac=document.getElementById('ac'); |
| 135 |
|
| 136 |
//editor clicks should hide the autocomplete dropdown |
| 137 |
editor.container.addEventListener('click',function(e){ |
| 138 |
ac.style.display='none'; |
| 139 |
}); |
| 140 |
|
| 141 |
} //end - create initial autocomplete dropdown and related actions |
| 142 |
|
| 143 |
|
| 144 |
//calulate the editor container offset |
| 145 |
var obj=editor.container; |
| 146 |
|
| 147 |
var curleft = 0; |
| 148 |
var curtop = 0; |
| 149 |
|
| 150 |
if (obj.offsetParent) { |
| 151 |
|
| 152 |
do { |
| 153 |
curleft += obj.offsetLeft; |
| 154 |
curtop += obj.offsetTop; |
| 155 |
} while (obj = obj.offsetParent); |
| 156 |
|
| 157 |
} |
| 158 |
|
| 159 |
|
| 160 |
//position autocomplete |
| 161 |
ac.style.top=pos.pageY - curtop + 40 + "px"; |
| 162 |
ac.style.left=pos.pageX - curleft + 20 + "px"; |
| 163 |
ac.style.display='block'; |
| 164 |
ac.style.background='white'; |
| 165 |
|
| 166 |
|
| 167 |
//remove all options, starting a fresh list |
| 168 |
ac.options.length = 0; |
| 169 |
|
| 170 |
//loop through tags and check for a match |
| 171 |
var tag; |
| 172 |
for(i in html_tags){ |
| 173 |
if(!html_tags.hasOwnProperty(i) ){ |
| 174 |
continue; |
| 175 |
} |
| 176 |
|
| 177 |
tag=html_tags[i]; |
| 178 |
if( text ){ |
| 179 |
if( text!=tag.substr(0,text.length) ){ |
| 180 |
continue; |
| 181 |
} |
| 182 |
} |
| 183 |
|
| 184 |
var option = document.createElement('option'); |
| 185 |
option.text = tag; |
| 186 |
option.value = tag; |
| 187 |
|
| 188 |
try { |
| 189 |
ac.add(option, null); // standards compliant; doesn't work in IE |
| 190 |
} |
| 191 |
catch(ex) { |
| 192 |
ac.add(option); // IE only |
| 193 |
} |
| 194 |
|
| 195 |
};//end for |
| 196 |
|
| 197 |
|
| 198 |
|
| 199 |
//if the return list contains everything then don't display it |
| 200 |
if (html_tags.length == ac.options.length) { |
| 201 |
ac.options.length =0; |
| 202 |
} |
| 203 |
|
| 204 |
//check for matches |
| 205 |
if( ac.length==0 ){ |
| 206 |
ac.style.display='none'; |
| 207 |
autocompleting=false; |
| 208 |
}else{ |
| 209 |
ac.selectedIndex=0; |
| 210 |
autocompleting=true; |
| 211 |
} |
| 212 |
|
| 213 |
});//end editor change event |
| 214 |
|
| 215 |
|
| 216 |
|
| 217 |
//START COMMANDS |
| 218 |
var canon = require('pilot/canon'); |
| 219 |
|
| 220 |
//Key up command |
| 221 |
canon.addCommand({ |
| 222 |
name: "up", |
| 223 |
bindKey: { |
| 224 |
win: "Up", |
| 225 |
mac: "Up", |
| 226 |
sender: "editor" |
| 227 |
}, |
| 228 |
|
| 229 |
exec: function(env, args, request) { |
| 230 |
if( document.getElementById('ac').style.display === 'block' ){ |
| 231 |
|
| 232 |
var select=document.getElementById('ac'); |
| 233 |
|
| 234 |
if( select.selectedIndex==0 ){ |
| 235 |
select.selectedIndex=select.options.length-1; |
| 236 |
}else{ |
| 237 |
select.selectedIndex=select.selectedIndex-1; |
| 238 |
} |
| 239 |
|
| 240 |
}else{ |
| 241 |
var range = editor.getSelectionRange(); |
| 242 |
editor.clearSelection(); |
| 243 |
editor.moveCursorTo(range.end.row -1, range.end.column); |
| 244 |
} |
| 245 |
} |
| 246 |
}); |
| 247 |
|
| 248 |
|
| 249 |
//key down command |
| 250 |
canon.addCommand({ |
| 251 |
|
| 252 |
name: "down", |
| 253 |
|
| 254 |
bindKey: { |
| 255 |
win: "Down", |
| 256 |
mac: "Down", |
| 257 |
sender: "editor" |
| 258 |
}, |
| 259 |
|
| 260 |
exec: function(env, args, request) { |
| 261 |
if( document.getElementById('ac').style.display === 'block' ){ |
| 262 |
|
| 263 |
var select=document.getElementById('ac'); |
| 264 |
|
| 265 |
if( select.selectedIndex==select.options.length-1 ){ |
| 266 |
select.selectedIndex=0; |
| 267 |
}else{ |
| 268 |
select.selectedIndex=select.selectedIndex+1; |
| 269 |
} |
| 270 |
}else{ |
| 271 |
var range = editor.getSelectionRange(); |
| 272 |
editor.clearSelection(); |
| 273 |
editor.moveCursorTo(range.end.row +1, range.end.column); |
| 274 |
} |
| 275 |
} |
| 276 |
}); |
| 277 |
|
| 278 |
|
| 279 |
//enter/return command |
| 280 |
function trythis () { |
| 281 |
|
| 282 |
if( document.getElementById('ac').style.display === 'block' ){ |
| 283 |
|
| 284 |
var ac_dropdwn =document.getElementById('ac'); |
| 285 |
var tag=ac_dropdwn.options[ac_dropdwn.selectedIndex].value; |
| 286 |
var sel=editor.selection.getRange(); |
| 287 |
var line=editor.getSession().getLine(sel.start.row); |
| 288 |
sel.start.column=sel.start.column-(autocompletelength+1); |
| 289 |
editor.selection.setSelectionRange(sel); |
| 290 |
editor.insert(tag); |
| 291 |
autocompleting=false; |
| 292 |
|
| 293 |
}else{ |
| 294 |
editor.insert('\n'); |
| 295 |
} |
| 296 |
} |
| 297 |
canon.addCommand({ |
| 298 |
name: "enter", |
| 299 |
bindKey: { |
| 300 |
win: "Return", |
| 301 |
mac: "Return", |
| 302 |
sender: "editor" |
| 303 |
}, |
| 304 |
exec: trythis |
| 305 |
}); |
| 306 |
|
| 307 |
|
| 308 |
//END COMMANDS |
| 309 |
|
| 310 |
|
| 311 |
});//end jquery load |
