@@ -322,3 +322,67 @@ DomPredictionHelper.prototype.invertObject = function(object) { }); return new_object; }; + +DomPredictionHelper.prototype.cssToXPath = function(css_string) { + var tokens = this.tokenizeCss(css_string); + if (tokens[0] && tokens[0] == ' ') tokens.splice(0, 1); + if (tokens[tokens.length - 1] && tokens[tokens.length - 1] == ' ') tokens.splice(tokens.length - 1, 1); + + var css_block = []; + var out = ""; + + for(var i = 0; i < tokens.length; i++) { + if (tokens[i] == ' ') { + out += this.cssToXPathBlockHelper(css_block); + css_block = []; + } else { + css_block.push(tokens[i]); + } + } + + return out + this.cssToXPathBlockHelper(css_block); +}; + +// Process a block (html entity, class(es), id, :nth-child()) of css +DomPredictionHelper.prototype.cssToXPathBlockHelper = function(css_block) { + if (css_block.length == 0) return '//'; + var out = '//'; + var first = css_block[0].substring(0,1); + + if (first == ',') return " | "; + + if (jQuery.inArray(first, [':', '#', '.']) != -1) { + out += '*'; + } + + var expressions = []; + var re = null; + + for(var i = 0; i < css_block.length; i++) { + var current = css_block[i]; + first = current.substring(0,1); + var rest = current.substring(1); + + if (first == ':') { + // We only support :nth-child(n) at the moment. + if (re = rest.match(/^nth-child\((\d+)\)$/)) + expressions.push('(((count(preceding-sibling::*) + 1) = ' + re[1] + ') and parent::*)'); + } else if (first == '.') { + expressions.push('contains(concat( " ", @class, " " ), concat( " ", "' + rest + '", " " ))'); + } else if (first == '#') { + expressions.push('(@id = "' + rest + '")'); + } else if (first == ',') { + } else { + out += current; + } + } + + if (expressions.length > 0) out += '['; + for (var i = 0; i < expressions.length; i++) { + out += expressions[i]; + if (i < expressions.length - 1) out += ' and '; + } + if (expressions.length > 0) out += ']'; + return out; +}; + lib/dom.js @@ -310,6 +310,14 @@ SelectorGadget.prototype.refreshFromPath = function(e) { self.setPath(path); }; +SelectorGadget.prototype.showXPath = function(e) { + var self = (e && e.data && e.data.self) || this; + var path = self.path_output_field.value; + if (path == 'No valid path found.') return; + prompt("The CSS selector '" + path + "' as an XPath is shown below. Please report any bugs that you find with this converter.", + self.prediction_helper.cssToXPath(path)); +}; + SelectorGadget.prototype.clearSelected = function(e) { var self = (e && e.data && e.data.self) || this; self.selected = []; @@ -358,9 +366,16 @@ SelectorGadget.prototype.makeInterface = function() { } }).addClass('sg_ignore')); + this.sg_div.append(jQuery('<input type="button" value="XPath"/>').bind("click", {'self': this}, this.showXPath).addClass('sg_ignore')); + this.sg_div.append(jQuery('<input type="button" value="Help"/>').bind("click", {'self': this}, this.showHelp).addClass('sg_ignore')); this.sg_div.append(jQuery('<input type="button" value="X"/>').bind("click", {'self': this}, this.unbind).addClass('sg_ignore')); + + // this.sg_div.append( + // jQuery('<span class="sg_ignore sg_option sg_new_line">Show XPath</span>').bind("click", {'self': this}, this.showXPath) + // ); + jQuery('body').append(this.sg_div); this.path_output_field = path.get(0); @@ -380,6 +395,12 @@ SelectorGadget.prototype.unbind = function(e) { self.clearSelected(); }; +SelectorGadget.prototype.setOutputMode = function(e, output_mode) { + var self = (e && e.data && e.data.self) || this; + self.output_mode = (e && e.data && e.data.mode) || output_mode; + +}; + SelectorGadget.prototype.rebind = function() { this.unbound = false; this.makeInterface(); lib/interface.js @@ -204,4 +204,13 @@ img.sg_selected{ } #_sg_path_field{ width:400px !important; +} +#_sg_div .sg_new_line { + clear: both; +} +#_sg_div .sg_option { + float: left; +} +#_sg_div .sg_selected_option { + text-decoration: underline; } \ No newline at end of file lib/selectorgadget.css @@ -199,6 +199,45 @@ assertFalse(dom.wouldLeaveFreeFloatingNthChild(["a"], 0)); assertFalse(dom.wouldLeaveFreeFloatingNthChild([":nth-child(0)"], 0)); } + + function testCssToXPath() { + var dom = new DomPredictionHelper(); + + var expressions = ['a', '#leaf1', 'body #leaf1', 'span.sibling.something.else', 'a , b , #leaf1', + 'span.sibling', '.else.something', ':nth-child(2) i#leaf1', 'span.something.else:nth-child(2) i#leaf1']; + + for (var i = 0; i < expressions.length; i++) { + var css = expressions[i]; + var xpath = dom.cssToXPath(css); + if (!cssAndXPathMatch(css, dom.cssToXPath(css))) { + console.log(css + ' LIKE ' + xpath); + } + } + } + + function cssAndXPathMatch(css, xpath) { + var css_matches = jQuery(css); + var elements = []; + for (var i = 0; i < css_matches.length; i++) { + elements.push(css_matches.get(i)); + } + + var elems = document.evaluate(xpath, document, null, XPathResult.ANY_TYPE, null); + var elem = elems.iterateNext(); + var pos = -1; + while (elem){ + pos = jQuery.inArray(elem, elements); + if (pos == -1) { + return false; + } else { + elements.splice(pos, 1); + } + var elem = elems.iterateNext(); + } + if (elements.length == 0) return true; + return false; + } + </script> </head> test/testDom.html 04e5d15f0172d6e700c3c00865c8a95475ff08b8 Andrew Cantino cantino@gmail.com http://github.com/iterationlabs/selectorgadget/commit/a306453d1e8f54daeee11e4b7f70b83836a8a17f a306453d1e8f54daeee11e4b7f70b83836a8a17f 2009-03-10T15:53:32-07:00 2009-03-10T15:53:32-07:00 xpath generation 7c1a1ed97adfbb982bb79591d7a233791ce6a58e Andrew Cantino cantino@gmail.com