WordPress Advanced Code Editor 2.2.0

So last week my plugin Advanced Code Editor reached 50,000 download and in celebration i decided to fix some minor bugs and added a few nice features.

The main difference are in the code of the toolbar and the handlers of the buttons which are all done in jQuery, and since every now and then i find myself in the need to add a button (per a project/client) for example svn or git functions i write most of the same code over and over which to me (a developer) makes no sense. I added each button using jQuery.Append() and passed the html as string and then hooked the function to the button click using jQuery.bind()

So in the latest version 2.2.0 i added an API to add your own buttons and handlers:

Functions

addToolbarButton(html,class,id,title,src,alt,function)

• html - add the button as html string (optional this is how theme changer is added ).
• Class - class for the button (optional).
• id - button id(required unless using html).
• title - button title attribute (optional).
• src - button image src (optional).
• alt - button image alt attribute (optional).
• function - function to hook to the button click event (optional).

The AddToolbarButton uses do_bind to actually bind/hook the function which will be executed.

do_bind(selector,event,function)

• selector - the button id
• event - any even you want to bind (click, hover ...)
• function - function to execute when event is fired.

Now sense most functions need interaction with the server side i added an ajax wrapper to the jQuery.Post() function

aceAJAX(data,ResponseFunction)

• data - should contain action and any other data you want.
• ResponseFunction - function to execute when response is received form the server

And last, I added a function to show your own dialog boxes:

show_dialog(selector,setup)

• selector - div with dialog content selector
• setup - accepts all of jQuerys' UI dialog settings

So with these functions in place you can add your own buttons with ease, for example

//to add the button to the theme editor use
add_filter( 'admin_footer-theme-editor.php', 'my_editor_button',100 );
//to add the button to the plugin editor use
add_filter( 'admin_footer-plugin-editor.php', 'my_editor_button',100 );

function my_editor_button(){
   ?>
   <script type="text/javascript">
   addToolbarButton(null,'git_commit_class','git_commit_id','git commit','imgeurl','git commit alt',function(){
		//close all dialogs
		jQuery(".ui-dialog-content").dialog("close");
		jQuery('#add_new_file').dialog( "destroy" );
		//create new dialog for commit message
		jQuery('#update_Box').html('<div><p>Commit Message <input type="text" name="commit_m" value=""></div>');
		show_dialog("#update_Box",{title: 'enter your commit message', buttons: [
			{
				text: ace_strings.cancel,
				click: function() { jQuery(this).dialog("close"); }
			},
			{
				text: ace_strings.commit,
				click: function() { 
						if (jQuery('input[name="plugin"]').length){
							var plugin_meta = jQuery('input[name="plugin"]').val().split('/');
							var plugin_dir = plugin_meta[0];
							var dirs = plugin_meta.length - 1;
							for(i=1; i < dirs; i++) { 
								dir = plugin_dir + '/' + plugin_meta[i];
							}
							f_type = 'plugin';
						}else{
						//theme file
							dir = theme_to_download;
							f_type = 'theme';
						}
						var data = {
							dir: dir,
							p_or_t: f_type, //plugin or theme
							action: 'git_commit',
							file: jQuery('input[name="file"]').val(),
							commit_m: jQuery('input[name="commit_m"]').val(),
							_ajax_nonce: "<?php echo wp_create_nonce('git-comnit');?>"
						};
						aceAJAX(data, function(response) {
							//close all
							jQuery(".ui-dialog-content").dialog("close");
							jQuery('#add_new_file').dialog( "destroy" );
							//show new
							jQuery('#update_Box').html('<div>' + response + '</div>');
							show_dialog("#update_Box",{title: ace_strings.deletefile, buttons: [
								{
									text: ace_strings.close,
									click: function() { jQuery(this).dialog("close"); }
								}
							] }); 
						}); 
				}
			}
		] }); 
	});
   </script>
   <?php
}

And the ajax handler in the server side is done in the WordPress way so:

//hook ajax handler
add_action('wp_ajax_git_commit', 'do_git_commit');

function do_git_commit(){
	check_ajax_referer('git-comnit');
	//get file directory either theme or plugin
	if ($_POST['p_or_t'] == 'plugin')
		$dir = WP_PLUGIN_DIR .'/' . $_POST['dir'];
	else{
		$t = wp_get_theme($_POST['dir']);
		if ( $t->exists() ){
			$dir = $t->get_stylesheet_directory(); 
		}else{
			die('error no such theme directory!');
		}
	}
	//change to that directory
	chdir($dir);
	//add and commit
	$proc=proc_open('git add '. $_POST['file'] .' && git commit -m "'.$_POST['commit_m'].'"' , 
		array(
			0=>array('pipe', 'r'), 
			1=>array('pipe', 'w'), 
			2=>array('pipe', 'w')), 
		$pipes
	);
    fwrite($pipes[0], $input);fclose($pipes[0]);
    $stdout=stream_get_contents($pipes[1]);fclose($pipes[1]);
    $stderr=stream_get_contents($pipes[2]);fclose($pipes[2]);
    $rtn=proc_close($proc);
    if (isset($stderr) && !empty($stderr) && $stderr != ' ')
    	echo 'error: ' . $stderr . $rtn;
    else
    	echo $stdout . ' '. $rtn
    die();
}

Other then this new API the latest version also fixes some annoying bugs and adds a new file status to the editor screen that will tell you if a there are no changes, unsaved changes and when it was last saved!