-
Notifications
You must be signed in to change notification settings - Fork 3
/
docs.js
134 lines (111 loc) · 5.1 KB
/
docs.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
//A document fetcher + parser. Uses JSDOM to build the page on the server side.
//This allows us to do things like build the structure of the webpage on the serverside
//The 'rendered' elements can then be scraped, full with their css.
var jsdom = require("jsdom");
exports.loadDocument = function(url, callback){
jsdom.env(url, ["http://code.jquery.com/jquery-1.5.min.js"],
function(errors, window){
if (errors){
console.log('there was an error fetching the page');
return callback("error");
}
//Change relative image paths to absolute image paths
window.$('img').each(function(index, element){
var absSource = getAbsolutePath(url, window.$(element).get(0).src);
window.$(element).attr('src', absSource);
});
//console.log(window.document.getElementsByTagName('img')[0].src);
//String all <a> of links so we can click on buttons etc.. w/o being redirected
window.$('a').each(function(index, element){
window.$(element).attr('href', "");
});
//Change relative stylesheet paths to absolute stylesheet paths
var stylesheets = "";
window.$('link').each(function(index, element){
var el = window.$(element);
if (el.attr('type') === "text/css"){
var absStyleSource = getAbsolutePath(url, el.attr('href'));
stylesheets += '<link href="' + absStyleSource + '" type="text/css" rel="stylesheet"/>';
}
});
stylesheets += "\n";
//Get all styles for every element and save them to a global <style> tag string
var style = "<style>\n";
//window.$('body').find('*').each(function(index, element){
// style += getCssStyle(window.$(element));
//});
style += "</style>\n";
//Get all html for every element and save it to an html string
var html = "";
window.$('script').remove();
html = window.$('body').html();
//window.$('body').children().each(function(index, element){
// html = recursiveHTMLAppendFunction(window, html, window.$(element));
//console.log(window.$(element).html() + "\n");
//});
var all = "<html><head>" + stylesheets + style + "</head><body>" + html + "</body></html>";
callback(null, all, html, stylesheets);
}
);
};
/* This function recursively iterates through all of an element's children to produce it's html */
recursiveHTMLAppendFunction = function(win, canvasHTML, element) {
var attributes = "";
var target = win.$(element).get(0);
win.$.each(win.$(target.attributes), function(index) {
attributes += target.attributes[index].name + "=\"" + target.attributes[index].value+ "\" ";
});
//TODO: This doesn't take into acount any other attributes other than 'style', this needs to be changed
canvasHTML += "<"+ element.get(0).tagName + " "+ attributes +">\n" + element.clone().find("*").remove().end().text();
//Go through all of the children of this element
if (element.children().size() > 0) {
element.children().each( function() {
canvasHTML += recursiveHTMLAppendFunction(win, "", win.$(this));
});
}
canvasHTML += "</"+ element.get(0).tagName + ">\n";
return canvasHTML;
};
getCssStyle = function(element) {
var attr = ['font-family','font-size','font-weight','font-style','color',
'text-transform','text-decoration','letter-spacing','word-spacing',
'line-height','text-align','vertical-align','direction','background-color',
'background-image','background-repeat','background-position',
'background-attachment','opacity','width','height','top','right','bottom',
'left','margin-top','margin-right','margin-bottom','margin-left',
'padding-top','padding-right','padding-bottom','padding-left',
'border-top-width','border-right-width','border-bottom-width',
'border-left-width','border-top-color','border-right-color',
'border-bottom-color','border-left-color','border-top-style',
'border-right-style','border-bottom-style','border-left-style','position',
'display','visibility','z-index','overflow-x','overflow-y','white-space',
'clip','float','clear','cursor','list-style-image','list-style-position',
'list-style-type','marker-offset'];
var len = attr.length;
var style = "#" + element.attr('id') + "{\n";
for (var i = 0; i < len; i++){
var attributeName = attr[i];
var attributeValue = element.css(attributeName);
if (attributeValue){
//style += attributeName + ":" + element.css(attributeName) + ";\n";
style += attributeName + ":" + element.attr(attributeName) + ";\n";
}
//obj[attr[i]] = jQuery.fn.css2.call(this, attr[i]);
}
style += "}\n";
return style;
};
getAbsolutePath = function(pageUrl, imageRelativePath){
if (imageRelativePath.indexOf("http://") === 0) return imageRelativePath;
var rootUrl = pageUrl.substr(7);
if (imageRelativePath.charAt(0) === "/"){
rootUrl = rootUrl.split("/")[0];
} else if(imageRelativePath.substr(0,2) === "./"){
rootUrl = rootUrl.split("/")[0];
} else{
var index = rootUrl.lastIndexOf("/");
rootUrl = rootUrl.slice(0, index + 1);
}
console.log(rootUrl + imageRelativePath);
return "http://" + rootUrl + imageRelativePath;
};