JavaScript Function doc.Support LQDN banner

@floriancargoet (whom i meet at @ParisJS) come with a nice idea : automating some elements screenshot in a WebApps/WebPages powered with #PhantomJS  (headless WebKit with JavaScript API). He’s idea is to generate multilingual documentation for a complexe application (Ext JS / Sencha).

 

In his example, the use of Ext.js give some constrain finding the element offset in the page…

 

/*
 * page.evaluate() is sandboxed
 * so that 'component' is not defined.
 *
 * It should be possible to pass variables in phantomjs 1.5
 * but for now, workaround!
 */
eval('function workaround(){ window.componentSelector = "' + component.selector + '";}')
page.evaluate(workaround);
 
var rect = page.evaluate(function(){
	// find the component
	var comp = Ext.ComponentQuery.query(window.componentSelector)[0];
	// get its bounding box
	var box = comp.el.getBox();
	// box is {x, y, width, height}
	// we want {top, left, width, height}
	box.top  = box.y;
	box.left = box.x;
	return box;
});
page.clipRect = rect;
page.render(component.output);

But with jQuery it could be as simple as this…

 

page.clipRect = $('ul#menu').offset();
page.render(component.output);

 

See the blog post for more infos

 

2 Responses to Automated WebApps UI elements screenshot (ex. : documentation) with #PhantomJS

Leave a Reply