juice_extractor 0.0.0.4 → 0.0.1.1

data/.rspec

@@ -0,0 +1,2 @@
+--color
+--format progress

data/.rvmrc

@@ -0,0 +1 @@
+rvm 1.8.7@juice_extractor --create

data/Rakefile

@@ -1,2 +1,17 @@
 #!/usr/bin/env rake
 require "bundler/gem_tasks"
+require "rubygems"
+require "hanoi"
+
+namespace :test do
+  desc "Runs all the JavaScript tests and collects the results"
+  JavaScriptTestTask.new(:js) do |t|
+    test_cases        = ENV['TESTS'] && ENV['TESTS'].split(',')
+    browsers          = ENV['BROWSERS'] && ENV['BROWSERS'].split(',')
+    # change this path according to your configuration,
+    # it should indicate the root directory of your JavaScript files
+    sources_directory = File.expand_path(File.dirname(__FILE__) + "/src")
+
+    t.setup(sources_directory, test_cases, browsers)
+  end
+end

data/juice_extractor.gemspec

@@ -17,6 +17,9 @@ Gem::Specification.new do |gem|
 
   gem.add_dependency 'rmagick', "2.12.0"
   gem.add_dependency 'json'
-  
+
   gem.add_development_dependency 'ruby-debug'
+  gem.add_development_dependency 'rspec'
+  gem.add_development_dependency 'mocha'
+  gem.add_development_dependency 'hanoi'
 end

data/lib/juice_extractor/core/color_extractor.rb

@@ -0,0 +1,55 @@
+module ColorExtractor
+  def self.implicit_colors(site_url, quantize = nil)
+    return [] if site_url.nil?
+    image_path = Base.screenshot(site_url)
+    img = Magick::ImageList.new(image_path)
+    img = img.quantize(quantize) if quantize
+    img.color_histogram.map{|pixel| pixel.first.to_color(Magick::AllCompliance, false, 8, true) }
+  end
+
+  def self.explicit_colors(site_url, attributes = ['background-color', "border-color", 'color'], quantize = nil)
+    return [] if site_url.nil?
+    val = Base.color_explicit_cmd(site_url, attributes)
+    Base.build_explicit_colors(val, attributes, quantize)
+  end
+
+  def self.from_image(image_url)
+  end
+
+  module Base
+    def self.screenshot(site_url, to_path = '/tmp')
+      Base.screenshot_cmd(site_url, to_path)
+    end
+
+    def self.build_explicit_colors(val, attributes, max = nil)
+      colors = JSON.parse(val)
+
+      attributes.each do |prop|
+        colors['containers'][prop] = colors['containers'][prop].compact.group_by.map{|e| [e, e.length]}.uniq.sort{|a,b| b[1] <=> a[1]}.map{|e| e[0].upcase }
+        colors['typography'][prop] = colors['typography'][prop].compact.group_by.map{|e| [e, e.length]}.uniq.sort{|a,b| b[1] <=> a[1]}.map{|e| e[0].upcase }
+
+        if max && max > 0
+          colors['containers'][prop] = colors['containers'][prop][0..max-1]
+          colors['typography'][prop] = colors['typography'][prop][0..max-1]
+        end
+      end
+
+      colors
+    end
+
+    def self.color_explicit_cmd(site_url, attributes)
+      phantom_script = File.expand_path(File.dirname(__FILE__) + "/../js/styles.phantom.js")
+      puts "Running command: phantomjs #{phantom_script} #{site_url} #{ File.dirname(__FILE__) }/../ '#{attributes.to_json}' "
+      `phantomjs #{phantom_script} #{site_url} #{ File.dirname(__FILE__) }/../ '#{attributes.to_json}'`
+    end
+
+    def self.screenshot_cmd(site_url, path)
+      image_name = "#{path}/#{rand(36**10).to_s(36)}.png"
+      phantom_script = File.expand_path(File.dirname(__FILE__) + "/../js/screenshot.phantom.js")
+      puts "Running command: phantomjs --load-images=no #{phantom_script} #{site_url} #{image_name} "
+      res = `phantomjs --load-images=no #{phantom_script} #{site_url} #{image_name}`
+      /.*.png/.match(res).to_s
+    end
+
+  end
+end

data/lib/juice_extractor/includes/jquery.base.extend.js

@@ -6,6 +6,12 @@
               ("0" + parseInt(rgb[1],10).toString(16)).slice(-2) +
               ("0" + parseInt(rgb[2],10).toString(16)).slice(-2) +
               ("0" + parseInt(rgb[3],10).toString(16)).slice(-2);
-        }
+        },
+
+		removeFromArray: function(value, arr) {
+		    return $.grep(arr, function(elem, index) {
+		        return elem !== value;
+		    });
+		}
     });
 })(jQuery);

data/lib/juice_extractor/includes/jquery.style.extractor.js

@@ -0,0 +1,55 @@
+(function( $ ) {
+	var border_color_styles = ['border-top-color','border-left-color','border-bottom-color','border-right-color'];
+	
+	var addBorderColor = function (attr){
+		//Remove 'border-color' attribute
+		attr = $.removeFromArray('border-color', attr);
+
+		// Add css styles
+		$.each(border_color_styles, function(key, ele) { attr.push(ele); });
+		return attr;								
+	};
+	
+	var buildStyleObject = function (obj){
+		var tmpObj = {};
+
+		$.each(obj, function(index, element){			
+			if ($.inArray(index, border_color_styles) >= 0 ){
+				if (typeof tmpObj['border-color'] == 'undefined'){ tmpObj['border-color'] = []; }
+				$(element).each(function(){ $.merge(tmpObj['border-color'], element) });
+				return true;
+			}
+			
+			if (typeof tmpObj[index] == 'undefined'){ tmpObj[index] = []; }
+			$.merge(tmpObj[index], element)
+		});
+
+		return tmpObj;
+	};
+	
+	$.styleExtractor = function( el, styles ) {
+		var obj = {};
+
+		// Computed styles doesn't have border-color
+		if ($.inArray("border-color", styles) >= 0) {
+			styles = addBorderColor(styles);							
+		}
+		
+		var props = $(el).curStyles.apply($(el), styles)
+		
+		$.each(props, function(element, key) {
+			if (key && key != undefined && key != ''){
+				if (typeof obj[element] == 'undefined'){
+					obj[element] = [];
+				}
+				obj[element].push($.rgb2Hex(key));
+			}
+		});
+		
+		return buildStyleObject(obj);
+	};
+	
+	$.fn.styleExtractor = function() {
+		return $.styleExtractor(this[0], $.makeArray(arguments));
+	};
+})(jQuery)

data/lib/juice_extractor/js/screenshot.phantom.js

@@ -3,6 +3,10 @@ var page = require('webpage').create(),
     url = system.args[1],
     filename = system.args[2];
 
+if (system.args.length === 2) {
+    console.log("Usage: $ phantomjs screenshot.phantom.js <url> <filename>");
+}
+
 page.onConsoleMessage = function(msg) {
     return console.log(msg);
 };

data/lib/juice_extractor/js/styles.phantom.js

@@ -4,6 +4,11 @@ var page = require('webpage').create(),
     assets_path = system.args[2],
 	args = system.args[3];
 
+
+if (system.args.length === 3) {
+    console.log("Usage: $ phantomjs style.phantom.js <url> <js_lib_path> '[\"background-color\",\"border-color\",\"color\"]'");
+}
+
 page.onConsoleMessage = function(msg) {
     //if (msg.match(/#/)){
         return console.log(msg);
@@ -13,55 +18,34 @@ page.onConsoleMessage = function(msg) {
 page.open(url, function(status) {
 
     if ( status === "success" ) {
-        page.injectJs(assets_path + '/juice_extractor/includes/jquery.min.js');
-        page.injectJs(assets_path + '/juice_extractor/includes/jquery.base.extend.js');
-        page.injectJs(assets_path + '/juice_extractor/includes/jquery.curstyles.js');
+        page.injectJs(assets_path + '/includes/jquery.min.js');
+        page.injectJs(assets_path + '/includes/jquery.base.extend.js');
+        page.injectJs(assets_path + '/includes/jquery.curstyles.js');
+		page.injectJs(assets_path + '/includes/jquery.style.extractor.js');
 
         page.evaluate(function(args) {
             var styles = {'containers' : {}, 'typography' : {}},
-				attributes = [],
+				attributes = eval(args),
                 content_elements = ['header', 'footer', 'div', 'aside', 'article'],
-                typography_elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'a', 'span', 'small', 'em', 'blockquote', 'abbr'],
-				border_colors = ['border-top-color','border-left-color','border-bottom-color','border-right-color'];
+                typography_elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'a', 'span', 'small', 'em', 'blockquote', 'abbr'];
 
 			// Create object to return
-			$.each(eval(args), function(key, ele){ attributes.push(ele); })
 			$.each(attributes, function(i,ele){ styles['containers'][ele] = []; styles['typography'][ele] = [];})
 
-			// Handling different border color
-			if ($.inArray("border-color", attributes) >= 0) {
-				$.each(border_colors, function(key, ele) { attributes.push(ele); });							
-			}
-
 			$.each(content_elements, function (i, element) {
 			    if ($(element).length > 0){
-
+					// Getting content elements
 			        $.each($(element).get(), function(i, single_element){
-
-						// Handling the rest attributes
-						var props = $(single_element).curStyles.apply($(single_element), attributes);
-						$.each(props, function(element, key) {
-							if ($.inArray(element, border_colors) >= 0){ 
-								element = 'border-color';
-							}
-							if (key && key != undefined && key != ''){
-								styles['containers'][element].push($.rgb2Hex(key));
-							}
+						$.each($(single_element).styleExtractor.apply($(single_element), attributes), function(i, n){
+							$.merge(styles['containers'][i], n)
 						});
 
+						// Getting typography elements
 			            $(single_element).find(typography_elements.join(',')).each(function(i, typo_element){
-							// Handling the rest attributes
-							var props = $(single_element).curStyles.apply($(single_element), attributes);
-							$.each(props, function(element, key) {
-								if ($.inArray(element, border_colors) >= 0){ 
-									element = 'border-color';
-								}
-								if (key && key != undefined && key != ''){
-									styles['typography'][element].push($.rgb2Hex(key));
-								}
+							$.each($(typo_element).styleExtractor.apply($(typo_element), attributes), function(i, n){
+								$.merge(styles['typography'][i], n)
 							});
-			            }); // End single_elements iteration
-
+			            });
 			        }); 
 			    } //End length validation
 			});
@@ -70,5 +54,4 @@ page.open(url, function(status) {
         }, args); //End evaluate
         phantom.exit();
     }
-
 });

data/lib/juice_extractor/js/typography.phantom.js

@@ -4,6 +4,10 @@ var page = require('webpage').create(),
     url = system.args[1],
     assets_file = system.args[2];
 
+if (system.args.length === 2) {
+    console.log("Usage: $ phantomjs typography.phantom.js <url> <js_lib_path>");
+}
+
 page.onConsoleMessage = function(msg) {
     if (!msg.match(/(Unsafe|TypeError)/)){
         console.log(msg);
@@ -12,26 +16,28 @@ page.onConsoleMessage = function(msg) {
 
 page.open(url, function(status) {
     if ( status === "success" ) {
-
-        page.includeJs( assets_file , function() {
-            page.evaluate(function() {
-
-                $(document).ready(function () {
-                    var styles = {},
-                        elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'body', 'a', 'span', 'small', 'em', 'blockquote', 'abbr'],
-                        attributes = ['font-family', 'font-style', 'font-size', 'line-height', 'font-weight', 'letter-spacing'];
-
-                    $.map(elements, function (ele, i){
-                        styles[ele] = $(ele).curStyles('font-family', 'font-style', 'font-size', 'line-height', 'font-weight', 'letter-spacing');
-                    });
-
-                    // TODO: Check compatibility with ie browsers
-                    console.log($.CSSJsonDecode(styles));
+        page.injectJs(assets_path + '/includes/jquery.min.js');
+        page.injectJs(assets_path + '/includes/jquery.base.extend.js');
+        page.injectJs(assets_path + '/includes/jquery.curstyles.js');
+		page.injectJs(assets_path + '/includes/jquery.style.extractor.js');
+		
+        page.evaluate(function() {
+
+            $(document).ready(function () {
+                var styles = {},
+                    elements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'body', 'a', 'span', 'small', 'em', 'blockquote', 'abbr'],
+                    attributes = ['font-family', 'font-style', 'font-size', 'line-height', 'font-weight', 'letter-spacing'];
+
+                $.map(elements, function (ele, i){
+                    styles[ele] = $(ele).curStyles('font-family', 'font-style', 'font-size', 'line-height', 'font-weight', 'letter-spacing');
                 });
 
+                // TODO: Check compatibility with ie browsers
+                console.log($.CSSJsonDecode(styles));
             });
-            phantom.exit();
+
         });
+        phantom.exit();
 
     }
 });

data/lib/juice_extractor/version.rb

@@ -1,3 +1,3 @@
 module JuiceExtractor
-  VERSION = "0.0.0.4"
+  VERSION = "0.0.1.1"
 end

data/lib/juice_extractor.rb

@@ -1,51 +1,10 @@
-require "juice_extractor/version"
 require "rmagick"
 require 'json'
 
+require "juice_extractor/version"
+require "juice_extractor/core/color_extractor"
+
 module JuiceExtractor
   # TODO: Extend other modules here
-  #"[\"background-color\",\"border-color\",\"color\"]"
-end
-
-module ColorExtractor
-  def self.implicit_colors(site_url, quantize = nil)
-    return [] if site_url.nil?
-    image_path = Base.screenshot(site_url)
-    img = Magick::ImageList.new(image_path)
-    img = img.quantize(quantize) if quantize
-    img.color_histogram.map{|pixel| pixel.first.to_color(Magick::AllCompliance, false, 8, true) }
-  end
-
-  def self.explicit_colors(site_url, attributes = ['background-color', "border-color", 'color'], quantize = nil)
-    return {} if site_url.nil?
-    phantom_script = File.expand_path(File.dirname(__FILE__) + "/juice_extractor/js/styles.phantom.js")
-    val = `phantomjs #{phantom_script} #{site_url} #{ File.dirname(__FILE__) } '#{attributes.to_json}'`
-    colors= Base.build_explicit_colors(val, attributes, quantize)
-    colors
-  end
-
-  module Base
-    def self.screenshot(site_url, to_path = '/tmp/')
-      image_name = "#{to_path}#{rand(36**10).to_s(36)}.png"
-      phantom_script = File.expand_path(File.dirname(__FILE__) + "/juice_extractor/js/screenshot.phantom.js")
-      `phantomjs --load-images=no #{phantom_script} #{site_url} #{image_name}`
-      image_name
-    end
-
-    def self.build_explicit_colors(val, attributes, max = nil)
-      colors = JSON.parse(val)
-
-      attributes.each do |prop|
-        colors['containers'][prop] = colors['containers'][prop].compact.group_by.map{|e| [e, e.length]}.uniq.sort{|a,b| b[1] <=> a[1]}.map{|e| e[0].upcase }
-        colors['typography'][prop] = colors['typography'][prop].compact.group_by.map{|e| [e, e.length]}.uniq.sort{|a,b| b[1] <=> a[1]}.map{|e| e[0].upcase }
-
-        if max && max > 0
-          colors['containers'][prop] = colors['containers'][prop][0..max-1]
-          colors['typography'][prop] = colors['typography'][prop][0..max-1]
-        end
-      end
-
-      colors
-    end
-  end
-end
+  #"[\"background-color\",\"border-color\",\"color\"]" 
+end