Quick saving

ajax saving is fairly straight forward jquery code. It requires the original textarea to be updated with the changes from CodePress and temporarily re-enabled while the data is sent. It then shows update status and continues accordingly.

Autocomplete2

I have completely rebuilt the WordPress function lookup using this autocomplete jquery plugin. It will now find partial matches within the function name and comes with alternate colouring and a few other little tweaks, but the main reason for changing was so that I could use objects nested in an array structure to give me space to store additional data such as the functions default parameters. However now I need a method of collecting all this data to go into the array.

I’ve already fixed a bug, where it would select the first item when you press the shift modifier key (therefore you couldn’t type an underscore), but it still needs a little more time smoothing it out. One of the problems, which initially seemed to be straight forward, but still remains to be solved, is giving back focus to CodePress after the code has been inserted from the function lookup. This should be as simple as just calling the focus method on the iframe, however this only works in Safari. You can tab through the tabstops to the iframe element and it works fine in all the browsers I tested, but for some reason calling focus() won’t do the same. I tried ensuring contentEditable was set correctly and playing with the designMode setting and everything else I could find, to no avail.

Next..

My next target is to try and sort out how I’m going to link the WordPress functions back to the codex reference.

home

I’ve also set up a home for codeWord: joelstarnes.co.uk/blog/codeword/ which consists of a brief description and screenshot.

Indent Guides

My first approach to toggling my indent guides on and off was to use javascript to loop through each kbd tag, each of which contains a tab character, and alter it’s background-image style. The code was something like this:

var kbds = newcontent.body.getElementsByTagName('kbd');
if(self.showtabs) {
	for (var i = 0; i < kbds.length; i++) {
		kbds[i].style.backgroundImage = “none”;
	}
	self.showtabs = false;
}else{
	for (var i = 0; i < kbds.length; i++) {
		kbds[i].style.backgroundImage = “url(’http://localhost/wordmashj/wp-content/plugins/codeWord/codepress/images/tab_arrow.gif’)”;
	}
	self.showtabs = true;
}

Notice that since the elements I want to find are in an iframe I have to call getElementsByTagName within the context of the iframe’s body. However using this method didn’t really work because I’d then need to tell new tab characters not to have the background-image and when the content is re-syntax higlighted all the tab guides come back. I wanted a more elegant solution and found the answer in an old post from quirksmode. This article showed how javascript could be used to alter style sheet rules dynamically. My new code:

if(self.contentDocument) {
	var iframeDoc = self.contentDocument;
}else if(self.document){
	var iframeDoc = self.document;
}
var theRules = new Array();
if (iframeDoc.styleSheets[0].cssRules)
	theRules = iframeDoc.styleSheets[0].cssRules;
else if (iframeDoc.styleSheets[0].rules)
	theRules = iframeDoc.styleSheets[0].rules;

if(self.showtabs !== false){
	theRules[0].style.backgroundImage = "none";
	self.showtabs = false;
}else{
	theRules[0].style.backgroundImage = "url('http://localhost/wordmashj/wp-content/plugins/codeWord/codepress/images/tab_arrow.gif')";
	self.showtabs = true;
}

This time to get around the iframe issue I accessed the iframes contentDocument and then select the first rule in the first (and only) stylesheet. The W3C insists on the cssRules array while Microsoft has decided to use the rules array. Futhermore an iframe in IE dosen’t have a contentDocument, I found a post on geek daily about a similar problem that he solved calling iframes.document, but I’ve battled away to no avail as of yet.

More Tabs

I’ve also fixed the problem in firefox of not inserting a tab character, by detecting wether the previous word matches a snippet trigger and if not it will manually insert a tab character, \t.

jQuery dom manipulation

I was using straight javascript to manipulate the dom and add buttons, etc but I’ve now changed some of this accross to jquery code just keep my code a bit cleaner and fixed a problem I was having in IE. I did get a bit confudled with some of the name spacing issues, but this was simply overcome after I released what I had done wrong.

Save changes

Originally I wanted to implement an auto-save but this wouldn’t be as straight forward as it may seem as you wouldn’t want to save the changes over the current files, but would instead need a temporary file and if you had more than one instance of the editor open would then need multiple temp files, and then knowing when a temporary file needs to be restored is all quite over-complicated.

I’ve come up with a much easy solution which stops accidental loss of data by detecting when the user attempts to navigate away from the page or close or refresh the page (window.onunload) and if the file has been changed since last saved will prompt the user accordingly. The only downside is this method would not stop data loss if the browser crashed, hopefully this would not be a usual occurrence though.

Function lookup

This now properly inserts the looked up code into the editor at the current cursor position, but I want it to then set the focus back to the editor with the cursor just after the inserted text, this is on my to do list.

Where next?

My next main step is to try and get ajax saving sorted out at last! Code so far is again in the repository, feel free to take a look and let me know what you think.

The code is nearly all javascript with some bits of php and css. The initial js script looks at the filename extension and adds a class name to the code textarea with the code language and the class name ‘codepress’. Then dynamically includes the codepress script once it is done manipulating the DOM as the codepress.js file will then find this textarea and add the according scripts for the browser rendering engine and programming/scripting language being edited. I do most of my debugging in firefox thanks to the immensely useful firebug add-on, but testing in opera9, safari3 and IE7.

I’ve been playing about with tabbing and indent guides. The tab key was being picked up fine in IE7 and firefox 2, but not firefox 3, opera or safari however the indent guides show up fine. Conversely the button to toggle line numbers (not a hugely useful function, but simple for testing out compatibility) seemed to work in nearly all except IE.

The function lookup is a javascript dropdown textbox that will auto-complete wordpress function, and insert them into the editor and I hoped to add a way of linking this to a reference site to lookup info such as how it can be used and in which version of WP the function was added by using one of the existing wordpress function achieve sites, but am so far unsure how exactly I will do this or if it is a feasible option.

This is basically the gist of what I’ve been doing so far, and I’ll keep you updated with my progress. If you’d like to take a look-see, I’ve made an initial commit to the WPSoC google code repository.

• I’ve added quick in-line page renaming using Justin Maier’s inlineEdit2 Mootools class.
• and changed the display of the links to show when you hover over the » icon.
• 

• I’ve also added the function to deregistered prototype and any scripts that rely on this from the pageMash admin since this is incompatible with mootools and should temporarily disable any other plugins you have that would otherwise cause javascript errors.
• For anyone who likes to know whats going on under-the-hood, I’ve split up the main pageMash file, which was getting a bit long, into separate CSS and JS files. I also added the cache_javascript_headers() function to save some processing.

The example page has been updated to WordPress 2.5 and this new version of pageMash.

If you have any problems or got any ideas for future releases, write me a nice letter (or drop me an email if you prefer).

== Road Map ==
* Within the first month I would complete the basic ajax code for sending comment, with a simple framework for validating and verifying. Using the mootools framework I will also be able to achieve smooth slide-in and highlighting effects. This will be the first major milestone.
* In the second month I would give this a thorough cross-browser testing and also implement the other features outlined above.
* This leaves the last month as contingency in case I run into major problems earlier on, and plenty of time to fully test the final code, rewriting anything that can be made more efficient and checking that it all still degrades gracefully.

== Implementation ==
There are already separate existing plugins which provide some of these features but are nearly all written with other frameworks. I hope to use these as inspiration and build upon they’re combined success by creating a plugin that will handle all these features together. The code needs to be very well written so people can easily work with it, it should be well documented, it needs to be extremely robust and efficient and should self-diagnose common problems.
There is a very good plugin: ‘WP AJAX Edit Comments’, written on jquery that offers some of this functionality.

== How it will work ==
When the comment is submitted it will first be checked by client side javascript to ensure a valid email address and required fields are all filled in. Then it is sent to the server and put through the standard add comment procedure where it is re-checked. If this returns successfully to the original page this will display a confirmation and add the comment directly into the html code.
It will also display a timer from when the comment was first submitted counting down 2 mins with a link to re-editing the comment.
For admin users extra javascript code will be added when the page is created with links on each comment to modify, delete or report the comment as spam.
There will be an additional settings tab in the WordPress admin which will allow admins to setup the plugin as they like, adjusting options such as the time allowed for user comment editing.

== Mootools ==
I am very familiar with mootools and believe it is very well suited for this project. I will use the version 1.2 release using a minimal number of modules to keep the overhead to a minimum and speed & efficiency at a maximum.
Often frameworks are incompatible, and having more than one adds to the overhead, so this plugin will allow for developers who like to use mootools or want a specific mootools script such as JonDesign’s SmoothGallery within their post.

== About Me ==
I have long had an interest in WordPress and recently become more active in the WP community, mostly as developer of the plugin ‘pageMash’; which I have thoroughly enjoyed developing. I received a lot of great feedback including topic #161869, blog posts such as http://blueprintds.com/2008/03/12/organizing-pages-in-wordpress/, and have been listed in a top 10 WP CMS plugins.
I’m 18 years old and have been in web design and development for about 5 years now but have enjoyed programming ever since primary school. I do some web design work for local businesses; such as easyturn.co.uk and also contract out to a local web design company.  I am experienced with coding standards and enjoy working with other developers. I attend College in the UK studying maths, physics and economics and have been accepted to study computer science at university next year. I am also a great lover of jazz

== Implementation ==
To begin with I would simplify the editor and just implement the basic syntax highlighting for PHP, HTML, CSS & JS. I would then try to eliminate any bugs with thorough testing so there would be a reliable, robust base to build on.
Once this is complete I would hope to add WordPress functions to the PHP bundle.
This project could be continued with additions such as:
* Auto save
* Code snippets
* Code completion
* Linking of WordPress functions to the function reference in the wordpress.org codex.
However it is unlikely that all these features would be implemented within the timescale, (as I think it is better to do one thing thoroughly).

This project would most likely be included as a plugin, but could easily be converted to use in the core if desired.

The code editor works through the use of regular expressions defined for each language in individual .js files the code is then styled with CSS.
Since the coding is all client side JS there will likely be a lot or cross-browser issues to deal with.  I hope to first get the system working in Firefox, but eventually have it functional in all the current major browsers. For any browsers it won’t work in it will degrade gracefully.

The code would be saved to the DB using a jquery ajax call, this would mean code can be saved without the interuption of a page reload and re-syntax-coloring the code. Also it can help avoid data loss if the client’s internet connection drops out while the data is being sent. However it would fall back to the default method if the xmlhttprequest function is not available.

I would also want the editor to catch the ‘tab’ keypress and insert a tab character rather then tabbing to the next html element. This is a very simple change but would, in my opinion, make the editor much more useable. I could also use css to style the tab character to show a grey bar to help the user see where indented code lines up.

== Milestones ==
The first major milestone will be to get the editor implemented. Second I will then fix all major cross-browser issues. I hope to get to this point by half way through the allotted time, this will allow me plenty of time to sort out minor bugs and add ajax code saving. Then if I have time left I will look into adding some of the extra functionality listed earlier.

== About Me ==
I have long had an interest in WordPress and recently become more active in the WP community, mostly as developer of the plugin ‘pageMash’; which I have thoroughly enjoyed developing. I received a lot of great feedback including topic #161869, blog posts such as http://blueprintds.com/2008/03/12/organizing-pages-in-wordpress/, and have been listed in a top 10 WP CMS plugins.
I’m 18 years old and have been in web design and development for about 5 years now but have enjoyed programming ever since primary school. I do some web design work for local businesses; such as easyturn.co.uk and also contract out to a local web design company.  I am experienced with coding standards and enjoy working with other developers. I attend College in the UK studying maths, physics and economics and have been accepted to study computer science at university next year.

== Summary ==
Obviously my proposal would only work if it was used within the WP core as it would need plugin developers to work with the provided hooks. The hooks would need to be well documented and the code should remain simple and very robust.
I have noted these features are well requested and would really help improve WordPress and there has been a good patch already submitted, as shown, for plugin uninstall. I hope to improve upon this and implement a configure hook that matches it as I think the two features go hand in hand.
The edit link has been debated as to whether it is necessary since you want to discourage editing of plugins, nonetheless for people who know what they are doing it is a useful feature. Being able to edit all the files within the plugin would just extend this ‘usefulness’.

== Milestones ==
My first milestone would be to get the uninstall feature fully implemented, which I would hope to do within the first month.
My second milestone would be the config feature which I would give another month.
By the end of the first two months I would also hope to have completed the design for showing these two options from within the plugin admin.
Then the final month I would check for bugs and generally make sure it all runs smoothly.
The edit feature is a kind of extension which I would implement if the first two milestones go very smoothly and I’m running ahead of schedule.
Presentation
If I were to add my ‘uninstall’ and ‘configure’ hooks there would then be 4 actions in the plugin management:
De/activate |Config | Edit | Uninstall
If I was to implement both of these it would start to look a little overcrowded and may need “Config | Edit | Uninstall” to be listed in a dropdown box or simply hidden by a more button that uses jquery to reveal the other options in some way but this would need to degrade gracefully.

I would also need to decide if the uninstall link would only show for the plugins who are using the hook, or for all of them but grayed out for those not using it. There would also need to be a way to show that the plugin has been uninstalled (the link could become grayed out, but once the plugin is reactivated would need to revert to being clickable).

== Uninstall ==
Topic #1108, Trac #5625, http://weblogtoolscollection.com/archives/2008/01/07/uninstall-is-there-such-a-thing/
This would:
* The interface should show a confirmation beforehand, to avoid accidental data loss.
* Run uninstall code written by the plugin author to remove superfluous entries in the user’s DB. (and/or any other files that can be cleaned up). Options and DB tables can be passed to the hook to handle, but it is also possible to call custom cleanup code written by the author.
* Then display ‘uninstall success’ confirmation and further info, also provided by author, on any other code that needs to be manually removed eg. from the template that the user has added (and may have forgotten about).

== Configure ==
Topic #166, Trac #4498
This would:
* Give authors a ‘config’ hook to show their plugin’s config settings in the centralised “Plugin Settings” menu.
Centralising the configuration of plugins would help standardise plugin settings. It would make it easier for users to adjust plugin settings, as they would all be in one place and would avoid cramming the settings menu of the WP admin with an extra tab for each plugin that has settings.

I would add an extra submenu tab linking to settings. In this page all the plugins would be listed down the right hand side (as in the plugin editor) with the settings for the selected plugin shown in the main column. The config link from the plugin management would link directly to that plugin’s own settings (similar to the edit link for plugins).

== Edit ==
I would like to extend the functionality of the plugin editor by allowing editing of all plugin files (php, js, css, etc), not just the main one.
This would be achieved by either adding a nested list below the selected plugin in the right hand “Plugin Files” menu showing the plugin’s other editable files. If the plugin uses subdirectories these files would be shown within the subdirectories (eg a css and a js folder). Only specific file types would be shown (php, js, css, etc – as you can’t edit image files here)

== About Me ==
I have long had an interest in WordPress and recently become more active in the WP community, mostly as developer of the plugin ‘pageMash’; which I have thoroughly enjoyed developing. I received a lot of great feedback including topic #161869, blog posts such as http://blueprintds.com/2008/03/12/organizing-pages-in-wordpress/, and have been listed in a top 10 WP CMS plugins.
I’m 18 years old and have been in web design and development for about 5 years now but have enjoyed programming ever since primary school. I do some web design work for local businesses; such as easyturn.co.uk and also contract out to a local web design company.  I am experienced with coding standards and enjoy working with other developers. I attend College in the UK studying maths, physics and economics and have been accepted to study computer science at university next year.

Hello World

This year I’ve decided to apply to GSoC and have set up this blog to document my proposals, which will follow shortly…