juice_extractor 0.0.0.4 → 0.0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- data/.rspec +2 -0
- data/.rvmrc +1 -0
- data/Rakefile +15 -0
- data/juice_extractor.gemspec +4 -1
- data/lib/juice_extractor/core/color_extractor.rb +55 -0
- data/lib/juice_extractor/includes/jquery.base.extend.js +7 -1
- data/lib/juice_extractor/includes/jquery.style.extractor.js +55 -0
- data/lib/juice_extractor/js/screenshot.phantom.js +4 -0
- data/lib/juice_extractor/js/styles.phantom.js +18 -35
- data/lib/juice_extractor/js/typography.phantom.js +22 -16
- data/lib/juice_extractor/version.rb +1 -1
- data/lib/juice_extractor.rb +5 -46
- data/spec/fixtures/color-explicit-custom.json +1 -0
- data/spec/fixtures/color-explicit-default.json +1 -0
- data/spec/fixtures/github.png +0 -0
- data/spec/javascript/assets/testrunner.js +815 -0
- data/spec/javascript/assets/testsuite.css +120 -0
- data/spec/javascript/base_extend_test.js +41 -0
- data/spec/javascript/fixtures/base_extend_fixtures.html +30 -0
- data/spec/javascript/fixtures/style_extractor_fixtures.html +149 -0
- data/spec/javascript/style_extractor_test.js +66 -0
- data/spec/javascript/templates/test_case.erb +35 -0
- data/spec/lib/color_extractor_spec.rb +75 -0
- data/spec/spec_helper.rb +20 -0
- metadata +76 -8
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
body, div, h1 { font-family: 'trebuchet ms', verdana, arial; margin: 0; padding: 0 }
|
|
2
|
+
body {font-size: 10pt; }
|
|
3
|
+
body > h1 { padding: 15px; font-size: large; background-color: #06b; color: white; }
|
|
4
|
+
body > h1 a { color: white; }
|
|
5
|
+
body > h2 { padding: 10px; background-color: #eee; color: black; margin: 0; font-size: small; font-weight: normal }
|
|
6
|
+
|
|
7
|
+
.pass { color: green; }
|
|
8
|
+
.fail { color: red; }
|
|
9
|
+
p.result { margin-left: 1em; }
|
|
10
|
+
|
|
11
|
+
#banner { height: 2em; border-bottom: 1px solid white; }
|
|
12
|
+
h2.pass { background-color: green; }
|
|
13
|
+
h2.fail { background-color: red; }
|
|
14
|
+
|
|
15
|
+
div.testrunner-toolbar { background: #eee; border-top: 1px solid black; padding: 10px; }
|
|
16
|
+
|
|
17
|
+
ol#tests > li > strong { cursor:pointer; }
|
|
18
|
+
|
|
19
|
+
div#fx-tests h4 {
|
|
20
|
+
background: red;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
div#fx-tests h4.pass {
|
|
24
|
+
background: green;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
div#fx-tests div.box {
|
|
28
|
+
background: red url(data/cow.jpg) no-repeat;
|
|
29
|
+
overflow: hidden;
|
|
30
|
+
border: 2px solid #000;
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
div#fx-tests div.overflow {
|
|
34
|
+
overflow: visible;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
div.inline {
|
|
38
|
+
display: inline;
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
div.autoheight {
|
|
42
|
+
height: auto;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
div.autowidth {
|
|
46
|
+
width: auto;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
div.autoopacity {
|
|
50
|
+
opacity: auto;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
div.largewidth {
|
|
54
|
+
width: 100px;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
div.largeheight {
|
|
58
|
+
height: 100px;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
div.largeopacity {
|
|
62
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=100);
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
div.medwidth {
|
|
66
|
+
width: 50px;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
div.medheight {
|
|
70
|
+
height: 50px;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
div.medopacity {
|
|
74
|
+
opacity: 0.5;
|
|
75
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
div.nowidth {
|
|
79
|
+
width: 0px;
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
div.noheight {
|
|
83
|
+
height: 0px;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
div.noopacity {
|
|
87
|
+
opacity: 0;
|
|
88
|
+
filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
div.hidden {
|
|
92
|
+
display: none;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
div#fx-tests div.widewidth {
|
|
96
|
+
background-repeat: repeat-x;
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
div#fx-tests div.wideheight {
|
|
100
|
+
background-repeat: repeat-y;
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
div#fx-tests div.widewidth.wideheight {
|
|
104
|
+
background-repeat: repeat;
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
div#fx-tests div.noback {
|
|
108
|
+
background-image: none;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
div.chain, div.chain div { width: 100px; height: 20px; position: relative; float: left; }
|
|
112
|
+
div.chain div { position: absolute; top: 0px; left: 0px; }
|
|
113
|
+
|
|
114
|
+
div.chain.test { background: red; }
|
|
115
|
+
div.chain.test div { background: green; }
|
|
116
|
+
|
|
117
|
+
div.chain.out { background: green; }
|
|
118
|
+
div.chain.out div { background: red; display: none; }
|
|
119
|
+
|
|
120
|
+
div#show-tests * { display: none; }
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
module("base_extend");
|
|
2
|
+
|
|
3
|
+
test("[rgb2Hex] should transform rgb colors to hex", function() {
|
|
4
|
+
var color = $('#base_extend .hex').curStyles.apply($('#base_extend .hex'), ['color']);
|
|
5
|
+
ok($.rgb2Hex(color['color']) == '#ff0000', "should be true");
|
|
6
|
+
|
|
7
|
+
color = $('#base_extend .rgb').curStyles.apply($('#base_extend .rgb'), ['color']);
|
|
8
|
+
ok($.rgb2Hex(color['color']) == '#ff0000', "should be true");
|
|
9
|
+
|
|
10
|
+
color = $('#base_extend .rgba').curStyles.apply($('#base_extend .rgba'), ['color']);
|
|
11
|
+
ok($.rgb2Hex(color['color']) == '#ff0000', "should be true");
|
|
12
|
+
|
|
13
|
+
color = $('#base_extend .rgba2').curStyles.apply($('#base_extend .rgba2'), ['color']);
|
|
14
|
+
ok($.rgb2Hex(color['color']) == '#ff0000', "should be true");
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
test("[removeFromArray] should remove the selected element from the array", function() {
|
|
18
|
+
var colors = ['color', 'border-color', 'background-color'];
|
|
19
|
+
ok($.removeFromArray('border-color', colors).length == 2, "should be true");
|
|
20
|
+
ok($.removeFromArray('border-color', colors)['border-color'] == undefined, "should be true");
|
|
21
|
+
});
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
// Tests for styleExtractor jQuery pluging
|
|
26
|
+
|
|
27
|
+
test("[styleExtractor] should transform styles to an object", function() {
|
|
28
|
+
var obj = $('#container').styleExtractor.apply($('#container'), ['color', 'background-color']);
|
|
29
|
+
ok($.isEmptyObject(obj) == false, "should be true");
|
|
30
|
+
ok(Object.keys(obj).length == 2, "should be true");
|
|
31
|
+
ok(obj['color'][0] == '#ffff00', "should be true");
|
|
32
|
+
ok(obj['background-color'][0] == '#0000ff', "should be true");
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
test("[styleExtractor] should transform styles to an object with border-color properties", function() {
|
|
36
|
+
var obj = $('#container h1').styleExtractor.apply($('#container h1'), ['border-color', 'background-color']);
|
|
37
|
+
ok($.isEmptyObject(obj) == false, "should be true");
|
|
38
|
+
ok(Object.keys(obj).length == 2, "should be true");
|
|
39
|
+
ok(obj['border-color'].length == 4, "should be true");
|
|
40
|
+
ok(obj['background-color'][0] == '#000000', "should be true");
|
|
41
|
+
});
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
#container {
|
|
3
|
+
color: rgb(255,0,0);
|
|
4
|
+
background-color: rgb(0,0,255);
|
|
5
|
+
border-color: rgb(0,255,0);
|
|
6
|
+
}
|
|
7
|
+
</style>
|
|
8
|
+
|
|
9
|
+
<div id="base_extend">
|
|
10
|
+
<p class="hex" style="color: #FF0000">
|
|
11
|
+
Waka waka waaa wa waaa
|
|
12
|
+
</p>
|
|
13
|
+
|
|
14
|
+
<p class="rgb" style="color: rgb(255,0,0)">
|
|
15
|
+
Waka waka waaa wa waaa
|
|
16
|
+
</p>
|
|
17
|
+
|
|
18
|
+
<p class="rgba" style="color: rgba(255,0,0,0)">
|
|
19
|
+
Waka waka waaa wa waaa
|
|
20
|
+
</p>
|
|
21
|
+
|
|
22
|
+
<p class="rgba2" style="color: rgba(255,0,0,0.123)">
|
|
23
|
+
Waka waka waaa wa waaa
|
|
24
|
+
</p>
|
|
25
|
+
</div>
|
|
26
|
+
|
|
27
|
+
|
|
28
|
+
<div id="container" style="color:#FFFF00;">
|
|
29
|
+
<h1 style="border-color: red green blue pink">Waaaa waka</h1>
|
|
30
|
+
</div>
|
|
@@ -0,0 +1,149 @@
|
|
|
1
|
+
<style>
|
|
2
|
+
#container {
|
|
3
|
+
background-color: #F4F4F4;
|
|
4
|
+
color: #A3A3A3;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
#container .headings {
|
|
8
|
+
color: rgb(255,0,0);
|
|
9
|
+
background-color: rgb(0,0,255);
|
|
10
|
+
border-color: #ff0000 #ffc0cb #0000ff #008000;
|
|
11
|
+
}
|
|
12
|
+
</style>
|
|
13
|
+
|
|
14
|
+
<div id="container">
|
|
15
|
+
<h1>Test dummy page</h1>
|
|
16
|
+
<p>The purpose of this HTML is to help determine what default settings are with CSS and to make sure that all possible HTML Elements are included in this HTML so as to not miss any possible Elements when designing a site.</p>
|
|
17
|
+
<hr />
|
|
18
|
+
|
|
19
|
+
<h1 class="headings">Headings</h1>
|
|
20
|
+
<h1>Heading 1</h1>
|
|
21
|
+
<h2>Heading 2</h2>
|
|
22
|
+
<h3>Heading 3</h3>
|
|
23
|
+
<h4>Heading 4</h4>
|
|
24
|
+
<h5>Heading 5</h5>
|
|
25
|
+
<h6>Heading 6</h6>
|
|
26
|
+
|
|
27
|
+
<h1 class="paragraph">Paragraph</h1>
|
|
28
|
+
<div>
|
|
29
|
+
<p>Lorem ipsum dolor sit amet, <a href="#" title="test link">test link</a> adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
|
|
30
|
+
<p>Lorem ipsum dolor sit amet, <em>emphasis</em> consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.</p>
|
|
31
|
+
</div>
|
|
32
|
+
<hr />
|
|
33
|
+
|
|
34
|
+
<h1 class="list_types">List Types</h1>
|
|
35
|
+
<div>
|
|
36
|
+
<h3>Definition List</h3>
|
|
37
|
+
<dl>
|
|
38
|
+
<dt>Definition List Title</dt>
|
|
39
|
+
<dd>This is a definition list division.</dd>
|
|
40
|
+
</dl>
|
|
41
|
+
<h3>Ordered List</h3>
|
|
42
|
+
<ol>
|
|
43
|
+
<li>List Item 1</li>
|
|
44
|
+
<li>List Item 2</li>
|
|
45
|
+
<li>List Item 3</li>
|
|
46
|
+
</ol>
|
|
47
|
+
<h3>Unordered List</h3>
|
|
48
|
+
<ul>
|
|
49
|
+
<li>List Item 1</li>
|
|
50
|
+
<li>List Item 2</li>
|
|
51
|
+
<li>List Item 3</li>
|
|
52
|
+
</ul>
|
|
53
|
+
</div>
|
|
54
|
+
<hr />
|
|
55
|
+
|
|
56
|
+
<h1 class="form_elements">Fieldsets, Legends, and Form Elements</h1>
|
|
57
|
+
<div>
|
|
58
|
+
<fieldset>
|
|
59
|
+
<legend>Legend</legend>
|
|
60
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus.</p>
|
|
61
|
+
|
|
62
|
+
<form>
|
|
63
|
+
<h2>Form Element</h2>
|
|
64
|
+
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui.</p>
|
|
65
|
+
<p>
|
|
66
|
+
<label for="text_field">Text Field:</label>
|
|
67
|
+
<input type="text" id="text_field" />
|
|
68
|
+
</p>
|
|
69
|
+
<p>
|
|
70
|
+
<label for="text_area">Text Area:</label>
|
|
71
|
+
<textarea id="text_area"></textarea>
|
|
72
|
+
</p>
|
|
73
|
+
<p>
|
|
74
|
+
<label for="select_element">Select Element:</label>
|
|
75
|
+
<select name="select_element">
|
|
76
|
+
<optgroup label="Option Group 1">
|
|
77
|
+
<option value="1">Option 1</option>
|
|
78
|
+
<option value="2">Option 2</option>
|
|
79
|
+
<option value="3">Option 3</option>
|
|
80
|
+
</optgroup>
|
|
81
|
+
<optgroup label="Option Group 2">
|
|
82
|
+
<option value="1">Option 1</option>
|
|
83
|
+
<option value="2">Option 2</option>
|
|
84
|
+
<option value="3">Option 3</option>
|
|
85
|
+
</optgroup>
|
|
86
|
+
</select>
|
|
87
|
+
</p>
|
|
88
|
+
<p>
|
|
89
|
+
<label for="radio_buttons">Radio Buttons:</label>
|
|
90
|
+
<input type="radio" class="radio" name="radio_button" value="radio_1" /> Radio 1<br/>
|
|
91
|
+
<input type="radio" class="radio" name="radio_button" value="radio_2" /> Radio 2<br/>
|
|
92
|
+
<input type="radio" class="radio" name="radio_button" value="radio_3" /> Radio 3<br/>
|
|
93
|
+
</p>
|
|
94
|
+
<p>
|
|
95
|
+
<label for="checkboxes">Checkboxes:</label>
|
|
96
|
+
<input type="checkbox" class="checkbox" name="checkboxes" value="check_1" /> Radio 1<br/>
|
|
97
|
+
<input type="checkbox" class="checkbox" name="checkboxes" value="check_2" /> Radio 2<br/>
|
|
98
|
+
<input type="checkbox" class="checkbox" name="checkboxes" value="check_3" /> Radio 3<br/>
|
|
99
|
+
</p>
|
|
100
|
+
<p>
|
|
101
|
+
<label for="password">Password:</label>
|
|
102
|
+
<input type="password" class="password" name="password" />
|
|
103
|
+
</p>
|
|
104
|
+
<p>
|
|
105
|
+
<label for="file">File Input:</label>
|
|
106
|
+
<input type="file" class="file" name="file" />
|
|
107
|
+
</p>
|
|
108
|
+
<p>
|
|
109
|
+
<input class="button" type="reset" value="Clear" /> <input class="button" type="submit" value="Submit" />
|
|
110
|
+
</p>
|
|
111
|
+
</form>
|
|
112
|
+
</fieldset>
|
|
113
|
+
</div>
|
|
114
|
+
<hr />
|
|
115
|
+
|
|
116
|
+
<h1 class="tables">Tables</h1>
|
|
117
|
+
<div>
|
|
118
|
+
<table cellspacing="0" cellpadding="0">
|
|
119
|
+
<tr>
|
|
120
|
+
<th>Table Header 1</th>
|
|
121
|
+
<th>Table Header 2</th>
|
|
122
|
+
<th>Table Header 3</th>
|
|
123
|
+
</tr>
|
|
124
|
+
<tr>
|
|
125
|
+
<td>Division 1</td>
|
|
126
|
+
<td>Division 2</td>
|
|
127
|
+
<td>Division 3</td>
|
|
128
|
+
</tr>
|
|
129
|
+
<tr class="even">
|
|
130
|
+
<td>Division 1</td>
|
|
131
|
+
<td>Division 2</td>
|
|
132
|
+
<td>Division 3</td>
|
|
133
|
+
</tr>
|
|
134
|
+
<tr>
|
|
135
|
+
<td>Division 1</td>
|
|
136
|
+
<td>Division 2</td>
|
|
137
|
+
<td>Division 3</td>
|
|
138
|
+
</tr>
|
|
139
|
+
</table>
|
|
140
|
+
</div>
|
|
141
|
+
<hr />
|
|
142
|
+
|
|
143
|
+
<h1 class="misc">Misc Stuff - abbr, acronym, pre, code, sub, sup, etc.</h1>
|
|
144
|
+
<div>
|
|
145
|
+
<p>Lorem <sup>superscript</sup> dolor <sub>subscript</sub> amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. <cite>cite</cite>. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></p>
|
|
146
|
+
<pre><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. <acronym title="National Basketball Association">NBA</acronym> Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus. <abbr title="Avenue">AVE</abbr></p></pre>
|
|
147
|
+
<blockquote>"This stylesheet is going to help so freaking much." <br />-Blockquote</blockquote>
|
|
148
|
+
</div>
|
|
149
|
+
</div>
|
|
@@ -0,0 +1,66 @@
|
|
|
1
|
+
module("style_extractor");
|
|
2
|
+
|
|
3
|
+
test("[phantomjs] should get an object with the structure desired", function() {
|
|
4
|
+
var styles = phantomCall();
|
|
5
|
+
|
|
6
|
+
//Check general object structure
|
|
7
|
+
ok($.isEmptyObject(styles) == false, "should be true");
|
|
8
|
+
ok(Object.keys(styles).length == 2, "should be true");
|
|
9
|
+
ok(Object.keys(styles['containers']).length == 3, "should be true");
|
|
10
|
+
ok(Object.keys(styles['typography']).length == 3, "should be true");
|
|
11
|
+
});
|
|
12
|
+
|
|
13
|
+
test("[phantomjs] should get the computed styles for containers correctly", function() {
|
|
14
|
+
var styles = phantomCall();
|
|
15
|
+
|
|
16
|
+
//Check colors defined as containers
|
|
17
|
+
ok($.inArray('#f4f4f4', styles['containers']['background-color']) > 0,"should be true");
|
|
18
|
+
ok($.inArray('#a3a3a3', styles['containers']['color']) > 0,"should be true");
|
|
19
|
+
$.each(["#ff0000", "#ffc0cb", "#0000ff", "#008000"], function(i,n){
|
|
20
|
+
ok($.inArray(n, styles['containers']['border-color']) == -1,"should be true");
|
|
21
|
+
});
|
|
22
|
+
});
|
|
23
|
+
|
|
24
|
+
test("[phantomjs] should get the computed styles for typography correctly", function() {
|
|
25
|
+
var styles = phantomCall();
|
|
26
|
+
|
|
27
|
+
//Check colors defined as typography
|
|
28
|
+
ok($.inArray('#0000ff', styles['typography']['background-color']) > 0,"should be true");
|
|
29
|
+
ok($.inArray('#ff0000', styles['typography']['color']) > 0,"should be true");
|
|
30
|
+
$.each(["#ff0000", "#ffc0cb", "#0000ff", "#008000"], function(i,n){
|
|
31
|
+
ok($.inArray(n, styles['typography']['border-color']) > 0,"should be true");
|
|
32
|
+
});
|
|
33
|
+
});
|
|
34
|
+
|
|
35
|
+
|
|
36
|
+
|
|
37
|
+
function phantomCall(){
|
|
38
|
+
//Runing lib/juice_extractor/js/styles.phantom.js evaluate code
|
|
39
|
+
var styles = {'containers' : {}, 'typography' : {}},
|
|
40
|
+
attributes = ['color', 'border-color', 'background-color'],
|
|
41
|
+
content_elements = ['header', 'footer', 'div', 'aside', 'article'],
|
|
42
|
+
typography_elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'a', 'span', 'small', 'em', 'blockquote', 'abbr'];
|
|
43
|
+
|
|
44
|
+
// Create object to return
|
|
45
|
+
$.each(attributes, function(i,ele){ styles['containers'][ele] = []; styles['typography'][ele] = [];})
|
|
46
|
+
|
|
47
|
+
$.each(content_elements, function (i, element) {
|
|
48
|
+
if ($(element).length > 0){
|
|
49
|
+
// Getting content elements
|
|
50
|
+
$.each($(element).get(), function(i, single_element){
|
|
51
|
+
$.each($(single_element).styleExtractor.apply($(single_element), attributes), function(i, n){
|
|
52
|
+
$.merge(styles['containers'][i], n)
|
|
53
|
+
});
|
|
54
|
+
|
|
55
|
+
// Getting typography elements
|
|
56
|
+
$(single_element).find(typography_elements.join(',')).each(function(i, typo_element){
|
|
57
|
+
$.each($(typo_element).styleExtractor.apply($(typo_element), attributes), function(i, n){
|
|
58
|
+
$.merge(styles['typography'][i], n)
|
|
59
|
+
});
|
|
60
|
+
});
|
|
61
|
+
});
|
|
62
|
+
} //End length validation
|
|
63
|
+
});
|
|
64
|
+
|
|
65
|
+
return styles;
|
|
66
|
+
}
|
|
@@ -0,0 +1,35 @@
|
|
|
1
|
+
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
|
|
2
|
+
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
|
|
3
|
+
<html>
|
|
4
|
+
<head>
|
|
5
|
+
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
|
|
6
|
+
<title><%= "#{@test_case.name} - Hanoi" %></title>
|
|
7
|
+
|
|
8
|
+
<script src="/includes/jquery.min.js" type="text/javascript" charset="utf-8"></script>
|
|
9
|
+
<script src="/includes/jquery.base.extend.js" type="text/javascript" charset="utf-8"></script>
|
|
10
|
+
<script src="/includes/jquery.curstyles.js" type="text/javascript" charset="utf-8"></script>
|
|
11
|
+
<script src="/includes/jquery.style.extractor.js" type="text/javascript" charset="utf-8"></script>
|
|
12
|
+
|
|
13
|
+
<script src="/testrunner.js" type="text/javascript" charset="utf-8"></script>
|
|
14
|
+
<link rel="stylesheet" href="/testsuite.css" type="text/css" media="screen" charset="utf-8">
|
|
15
|
+
|
|
16
|
+
<!-- <script src="<%= @test_case.target %>" type="text/javascript" charset="utf-8"></script> -->
|
|
17
|
+
|
|
18
|
+
<script type="text/javascript" charset="utf-8">
|
|
19
|
+
$(document).ready(function(){
|
|
20
|
+
<%= @test_case.content %>
|
|
21
|
+
});
|
|
22
|
+
</script>
|
|
23
|
+
|
|
24
|
+
</head>
|
|
25
|
+
<body>
|
|
26
|
+
<h1><%= "#{@test_case.name.upcase}" %></h1>
|
|
27
|
+
<h2 id="banner"></h2>
|
|
28
|
+
<h2 id="userAgent"></h2>
|
|
29
|
+
<ol id="tests"></ol>
|
|
30
|
+
<div id="main"></div>
|
|
31
|
+
<div id="fixtures">
|
|
32
|
+
<%= @test_case.html_fixtures %>
|
|
33
|
+
</div>
|
|
34
|
+
</body>
|
|
35
|
+
</html>
|
|
@@ -0,0 +1,75 @@
|
|
|
1
|
+
require "spec_helper"
|
|
2
|
+
require "juice_extractor"
|
|
3
|
+
|
|
4
|
+
describe ColorExtractor do
|
|
5
|
+
before do
|
|
6
|
+
@site_url = "http://www.github.com"
|
|
7
|
+
end
|
|
8
|
+
|
|
9
|
+
context "Implicit Colors" do
|
|
10
|
+
it "should return an array of colors" do
|
|
11
|
+
ColorExtractor::Base.stubs(:screenshot).returns('spec/fixtures/github.png')
|
|
12
|
+
colors = ColorExtractor.implicit_colors(@site_url)
|
|
13
|
+
colors.class.should be Array
|
|
14
|
+
colors.first.should == '#EEF7FA'
|
|
15
|
+
end
|
|
16
|
+
|
|
17
|
+
it "should return an array of colors limited by the quantize" do
|
|
18
|
+
ColorExtractor::Base.stubs(:screenshot).returns('spec/fixtures/github.png')
|
|
19
|
+
colors = ColorExtractor.implicit_colors(@site_url, 10)
|
|
20
|
+
colors.class.should be Array
|
|
21
|
+
colors.length.should == 10
|
|
22
|
+
end
|
|
23
|
+
end
|
|
24
|
+
|
|
25
|
+
context "Explicit Colors" do
|
|
26
|
+
xit "should return an structure of colors"
|
|
27
|
+
end
|
|
28
|
+
|
|
29
|
+
context ColorExtractor::Base do
|
|
30
|
+
describe "screenshot" do
|
|
31
|
+
it "should take a screenshot for the url specified", :slow => true do
|
|
32
|
+
name = ColorExtractor::Base.screenshot(@site_url)
|
|
33
|
+
File.exists?(name).should be_true
|
|
34
|
+
end
|
|
35
|
+
|
|
36
|
+
it "should take a screenshot for the url specified on the path specified", :slow => true do
|
|
37
|
+
name = ColorExtractor::Base.screenshot(@site_url, '/tmp')
|
|
38
|
+
File.exists?(name).should be_true
|
|
39
|
+
end
|
|
40
|
+
end
|
|
41
|
+
|
|
42
|
+
describe "build_explicit_colors" do
|
|
43
|
+
it "should generate an object extructure base on the default attributes" do
|
|
44
|
+
attrs = ['background-color', 'color', 'border-color']
|
|
45
|
+
data = File.open('spec/fixtures/color-explicit-default.json').read
|
|
46
|
+
ColorExtractor::Base.stubs(:color_explicit_cmd).returns(data)
|
|
47
|
+
colors = ColorExtractor::Base.build_explicit_colors(data, attrs)
|
|
48
|
+
attrs.each do |n|
|
|
49
|
+
colors['containers'].should include(n)
|
|
50
|
+
end
|
|
51
|
+
colors['containers'].length.should be 3
|
|
52
|
+
end
|
|
53
|
+
|
|
54
|
+
it "should generate an object extructure base on custom attributes" do
|
|
55
|
+
attrs = ['border-color']
|
|
56
|
+
data = File.open('spec/fixtures/color-explicit-custom.json').read
|
|
57
|
+
ColorExtractor::Base.stubs(:color_explicit_cmd).returns(data)
|
|
58
|
+
colors = ColorExtractor::Base.build_explicit_colors(data, attrs)
|
|
59
|
+
attrs.each do |n|
|
|
60
|
+
colors['containers'].should include(n)
|
|
61
|
+
end
|
|
62
|
+
colors['containers'].length.should be 1
|
|
63
|
+
end
|
|
64
|
+
|
|
65
|
+
it "should limit the number of elements returned" do
|
|
66
|
+
attrs = ['border-color']
|
|
67
|
+
data = File.open('spec/fixtures/color-explicit-custom.json').read
|
|
68
|
+
ColorExtractor::Base.stubs(:color_explicit_cmd).returns(data)
|
|
69
|
+
colors = ColorExtractor::Base.build_explicit_colors(data, attrs, 2)
|
|
70
|
+
colors['containers']['border-color'].length.should be 2
|
|
71
|
+
end
|
|
72
|
+
end
|
|
73
|
+
|
|
74
|
+
end
|
|
75
|
+
end
|
data/spec/spec_helper.rb
ADDED
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
require 'ruby-debug'
|
|
2
|
+
|
|
3
|
+
# This file was generated by the `rspec --init` command. Conventionally, all
|
|
4
|
+
# specs live under a `spec` directory, which RSpec adds to the `$LOAD_PATH`.
|
|
5
|
+
# Require this file using `require "spec_helper"` to ensure that it is only
|
|
6
|
+
# loaded once.
|
|
7
|
+
#
|
|
8
|
+
# See http://rubydoc.info/gems/rspec-core/RSpec/Core/Configuration
|
|
9
|
+
RSpec.configure do |config|
|
|
10
|
+
config.treat_symbols_as_metadata_keys_with_true_values = true
|
|
11
|
+
config.run_all_when_everything_filtered = true
|
|
12
|
+
config.filter_run :focus
|
|
13
|
+
config.mock_with :mocha
|
|
14
|
+
|
|
15
|
+
# Run specs in random order to surface order dependencies. If you find an
|
|
16
|
+
# order dependency and want to debug it, you can fix the order by providing
|
|
17
|
+
# the seed, which is printed after each run.
|
|
18
|
+
# --seed 1234
|
|
19
|
+
config.order = 'random'
|
|
20
|
+
end
|
metadata
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: juice_extractor
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
hash:
|
|
4
|
+
hash: 73
|
|
5
5
|
prerelease:
|
|
6
6
|
segments:
|
|
7
7
|
- 0
|
|
8
8
|
- 0
|
|
9
|
-
-
|
|
10
|
-
-
|
|
11
|
-
version: 0.0.
|
|
9
|
+
- 1
|
|
10
|
+
- 1
|
|
11
|
+
version: 0.0.1.1
|
|
12
12
|
platform: ruby
|
|
13
13
|
authors:
|
|
14
14
|
- Adrian Castillo
|
|
@@ -16,7 +16,7 @@ autorequire:
|
|
|
16
16
|
bindir: bin
|
|
17
17
|
cert_chain: []
|
|
18
18
|
|
|
19
|
-
date: 2012-10-
|
|
19
|
+
date: 2012-10-23 00:00:00 Z
|
|
20
20
|
dependencies:
|
|
21
21
|
- !ruby/object:Gem::Dependency
|
|
22
22
|
name: rmagick
|
|
@@ -62,6 +62,48 @@ dependencies:
|
|
|
62
62
|
version: "0"
|
|
63
63
|
type: :development
|
|
64
64
|
version_requirements: *id003
|
|
65
|
+
- !ruby/object:Gem::Dependency
|
|
66
|
+
name: rspec
|
|
67
|
+
prerelease: false
|
|
68
|
+
requirement: &id004 !ruby/object:Gem::Requirement
|
|
69
|
+
none: false
|
|
70
|
+
requirements:
|
|
71
|
+
- - ">="
|
|
72
|
+
- !ruby/object:Gem::Version
|
|
73
|
+
hash: 3
|
|
74
|
+
segments:
|
|
75
|
+
- 0
|
|
76
|
+
version: "0"
|
|
77
|
+
type: :development
|
|
78
|
+
version_requirements: *id004
|
|
79
|
+
- !ruby/object:Gem::Dependency
|
|
80
|
+
name: mocha
|
|
81
|
+
prerelease: false
|
|
82
|
+
requirement: &id005 !ruby/object:Gem::Requirement
|
|
83
|
+
none: false
|
|
84
|
+
requirements:
|
|
85
|
+
- - ">="
|
|
86
|
+
- !ruby/object:Gem::Version
|
|
87
|
+
hash: 3
|
|
88
|
+
segments:
|
|
89
|
+
- 0
|
|
90
|
+
version: "0"
|
|
91
|
+
type: :development
|
|
92
|
+
version_requirements: *id005
|
|
93
|
+
- !ruby/object:Gem::Dependency
|
|
94
|
+
name: hanoi
|
|
95
|
+
prerelease: false
|
|
96
|
+
requirement: &id006 !ruby/object:Gem::Requirement
|
|
97
|
+
none: false
|
|
98
|
+
requirements:
|
|
99
|
+
- - ">="
|
|
100
|
+
- !ruby/object:Gem::Version
|
|
101
|
+
hash: 3
|
|
102
|
+
segments:
|
|
103
|
+
- 0
|
|
104
|
+
version: "0"
|
|
105
|
+
type: :development
|
|
106
|
+
version_requirements: *id006
|
|
65
107
|
description: Get the color palette from sites
|
|
66
108
|
email:
|
|
67
109
|
- rodacato@gmail.com
|
|
@@ -73,19 +115,35 @@ extra_rdoc_files: []
|
|
|
73
115
|
|
|
74
116
|
files:
|
|
75
117
|
- .gitignore
|
|
118
|
+
- .rspec
|
|
119
|
+
- .rvmrc
|
|
76
120
|
- Gemfile
|
|
77
121
|
- LICENSE
|
|
78
122
|
- README.md
|
|
79
123
|
- Rakefile
|
|
80
124
|
- juice_extractor.gemspec
|
|
81
125
|
- lib/juice_extractor.rb
|
|
126
|
+
- lib/juice_extractor/core/color_extractor.rb
|
|
82
127
|
- lib/juice_extractor/includes/jquery.base.extend.js
|
|
83
128
|
- lib/juice_extractor/includes/jquery.curstyles.js
|
|
84
129
|
- lib/juice_extractor/includes/jquery.min.js
|
|
130
|
+
- lib/juice_extractor/includes/jquery.style.extractor.js
|
|
85
131
|
- lib/juice_extractor/js/screenshot.phantom.js
|
|
86
132
|
- lib/juice_extractor/js/styles.phantom.js
|
|
87
133
|
- lib/juice_extractor/js/typography.phantom.js
|
|
88
134
|
- lib/juice_extractor/version.rb
|
|
135
|
+
- spec/fixtures/color-explicit-custom.json
|
|
136
|
+
- spec/fixtures/color-explicit-default.json
|
|
137
|
+
- spec/fixtures/github.png
|
|
138
|
+
- spec/javascript/assets/testrunner.js
|
|
139
|
+
- spec/javascript/assets/testsuite.css
|
|
140
|
+
- spec/javascript/base_extend_test.js
|
|
141
|
+
- spec/javascript/fixtures/base_extend_fixtures.html
|
|
142
|
+
- spec/javascript/fixtures/style_extractor_fixtures.html
|
|
143
|
+
- spec/javascript/style_extractor_test.js
|
|
144
|
+
- spec/javascript/templates/test_case.erb
|
|
145
|
+
- spec/lib/color_extractor_spec.rb
|
|
146
|
+
- spec/spec_helper.rb
|
|
89
147
|
homepage: http://www.wkamole.herokuapp.com
|
|
90
148
|
licenses: []
|
|
91
149
|
|
|
@@ -119,6 +177,16 @@ rubygems_version: 1.8.24
|
|
|
119
177
|
signing_key:
|
|
120
178
|
specification_version: 3
|
|
121
179
|
summary: Extract the colors explicit and implicit on the site you want
|
|
122
|
-
test_files:
|
|
123
|
-
|
|
124
|
-
|
|
180
|
+
test_files:
|
|
181
|
+
- spec/fixtures/color-explicit-custom.json
|
|
182
|
+
- spec/fixtures/color-explicit-default.json
|
|
183
|
+
- spec/fixtures/github.png
|
|
184
|
+
- spec/javascript/assets/testrunner.js
|
|
185
|
+
- spec/javascript/assets/testsuite.css
|
|
186
|
+
- spec/javascript/base_extend_test.js
|
|
187
|
+
- spec/javascript/fixtures/base_extend_fixtures.html
|
|
188
|
+
- spec/javascript/fixtures/style_extractor_fixtures.html
|
|
189
|
+
- spec/javascript/style_extractor_test.js
|
|
190
|
+
- spec/javascript/templates/test_case.erb
|
|
191
|
+
- spec/lib/color_extractor_spec.rb
|
|
192
|
+
- spec/spec_helper.rb
|