CodeWord > update
This week I’ve been putting in a lot of hours and have consequently made loads of progress and now have most of the main functionality fully implemented. Here’s an update of what’s been going on and some of the problems I’ve encoutered.
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.
Tags: codeWord, GSoC, WordPressGSoC, codeWord — July 2nd, 2008
@Reply July 2nd, 2008 at 11:16 am
I would definitely recommend making use of the jQuery library, glad to see you have moved in that direction. This library will avoid all the common pitfalls with cross browser compatibility. Your javascript will be far more clean and concise.
I’m really interested in the function lookup/autocomplete. I really like to see this area developed as it could prove very useful for both power and novice theme designers.
I’ll add more comments once I’ve activated the plugin and used it a bit more.
@Reply July 2nd, 2008 at 11:32 am
Yeah, when I first started using jQuery for the DOM manipulation, I tried using a couple of the plugins, but had some problems with these, but am happy with the straight forward jQuery I’m now using.
Initially I had problems because of the load order and I needed some scripts to run before the document was finished loading; the codepress script, which is written straight into the end of the document with js after the inital codeword script is run to apply the needed classes. I had somethings running on dom ready and others when the whole document was loaded. But I’ve got the order all sorted out nicely now to include them in the right order.
Atm all the functions are listed in a straight drop down, but I thought it could be made better by separating off hooks/actions/filters etc, you’re right thought I think it could potentially be very useful. It’s a shame that not more of the functions are written about in the codex, as this would be the best place to reference to.