MoOx#27 Gravatar helper (ruby+js solution, since it's not possible wi…

…th pure css)

compass-recipes.gemspec

@@ -20,6 +20,7 @@ Gem::Specification.new do |gemspec|
   gemspec.files = %w(README.md LICENSE VERSION)
   gemspec.files += Dir.glob("fonts/**/*.*")
   gemspec.files += Dir.glob("lib/**/*.*")
+  gemspec.files += Dir.glob("templates/**/*.*")
   gemspec.files += Dir.glob("stylesheets/**/*.*")
 
   gemspec.add_dependency("compass", [">= 0.11.7"]) # latest version of compass

config.rb

@@ -2,6 +2,10 @@
 # Compass Recipes
 # Configuration files mainly used for tests
 #
+
+# for testing extension
+require File.join(File.dirname(__FILE__), 'lib', 'compass-recipes')
+
 http_path = '/'
 css_dir = '.'
 sass_dir = '.'
@@ -14,9 +18,6 @@
     './tests'
 ]
 
-# just for testing extension
-require File.join(File.dirname(__FILE__), 'lib', 'compass-recipes')
-
 # for repeating-linear-gradient
 # https://github.com/chriseppstein/compass/issues/401
 Compass::BrowserSupport.add_support('repeating-linear-gradient', 'webkit', 'moz', 'o', 'ms')

lib/compass-recipes.rb

@@ -1,8 +1,5 @@
 require "compass"
 
-# for background_noise
-require "chunky_png"
-require "base64"
 require File.join(File.dirname(__FILE__), 'compass-recipes', 'sass_extensions')
 
 Compass::Frameworks.register("recipes", :path => "#{File.dirname(__FILE__)}/..")

lib/compass-recipes/sass_extensions.rb

@@ -1,44 +1,7 @@
-# -----------------------------------------------
-# Sass implementation of the Noisy jquery plugin:
-# https://github.com/DanielRapp/Noisy
-# by @philippbosch
-# https://gist.github.com/1021332
-# -----------------------------------------------
+##
+# Sass extensions for Compass Recipes
+##
 
-module Sass::Script::Functions
- def background_noise(kwargs = {})
-   opts = {}
-   Sass::Util.map_hash({
-       "intensity"  => [0..1,          "",   :Number, Sass::Script::Number.new(0.5) ],
-       "opacity"    => [0..1,          "",   :Number, Sass::Script::Number.new(0.08)],
-       "size"       => [1..512,        "px", :Number, Sass::Script::Number.new(200) ],
-       "monochrome" => [[true, false], "",   :Bool,   Sass::Script::Bool.new(false) ]
-     }) do |name, (range, units, type, default)|
-
-     if val = kwargs.delete(name)
-       assert_type val, type, name
-       if range && !range.include?(val.value)
-         raise ArgumentError.new("$#{name}: Amount #{val} must be between #{range.first}#{units} and #{range.last}#{units}")
-       end
-     else
-       val = default
-     end
-     opts[name] = val
-   end
-
-   image = ChunkyPNG::Image.new(opts["size"].to_i, opts["size"].to_i)
-
-   for i in (0..(opts["intensity"].to_s.to_f * (opts["size"].to_i**2)))
-      x = rand(opts["size"].to_i)
-      y = rand(opts["size"].to_i)
-      r = rand(255)
-      a = rand(255 * opts["opacity"].to_s.to_f)
-      color = opts["monochrome"] ? ChunkyPNG::Color.rgba(r, r, r, a) : ChunkyPNG::Color.rgba(r, rand(255), rand(255), a)
-      image.set_pixel(x, y, color)
-   end
-
-   data = Base64.encode64(image.to_blob).gsub("\n", "")
-   Sass::Script::String.new("url('data:image/png;base64,#{data}')")
- end
- declare :background_noise, [], :var_kwargs => true
-end
+%w(_error background_noise gravatar).each do |lib|
+  require File.join(File.dirname(__FILE__), 'sass_extensions', lib)
+end

lib/compass-recipes/sass_extensions/_error.rb

@@ -0,0 +1,9 @@
+##
+# Helper to throw error message
+##
+
+module Sass::Script::Functions
+    def error(message)
+        raise Sass::SyntaxError, message.value
+    end
+end

lib/compass-recipes/sass_extensions/background_noise.rb

@@ -0,0 +1,48 @@
+##
+# Sass implementation of the Noisy jquery plugin:
+# https://github.com/DanielRapp/Noisy
+# by @philippbosch
+# https://gist.github.com/1021332
+##
+
+require "chunky_png"
+require "base64"
+
+module Sass::Script::Functions
+    def background_noise(kwargs = {})
+        opts = {}
+        Sass::Util.map_hash({
+         "intensity"  => [0..1,          "",   :Number, Sass::Script::Number.new(0.5) ],
+         "opacity"    => [0..1,          "",   :Number, Sass::Script::Number.new(0.08)],
+         "size"       => [1..512,        "px", :Number, Sass::Script::Number.new(200) ],
+         "monochrome" => [[true, false], "",   :Bool,   Sass::Script::Bool.new(false) ]
+         }) do |name, (range, units, type, default)|
+
+            if val = kwargs.delete(name)
+                assert_type val, type, name
+                if range && !range.include?(val.value)
+                    raise ArgumentError.new("$#{name}: Amount #{val} must be between #{range.first}#{units} and #{range.last}#{units}")
+                end
+            else
+                val = default
+            end
+            opts[name] = val
+        end
+
+        image = ChunkyPNG::Image.new(opts["size"].to_i, opts["size"].to_i)
+
+        for i in (0..(opts["intensity"].to_s.to_f * (opts["size"].to_i**2)))
+            x = rand(opts["size"].to_i)
+            y = rand(opts["size"].to_i)
+            r = rand(255)
+            a = rand(255 * opts["opacity"].to_s.to_f)
+            color = opts["monochrome"] ? ChunkyPNG::Color.rgba(r, r, r, a) : ChunkyPNG::Color.rgba(r, rand(255), rand(255), a)
+            image.set_pixel(x, y, color)
+        end
+
+        data = Base64.encode64(image.to_blob).gsub("\n", "")
+        Sass::Script::String.new("url('data:image/png;base64,#{data}')")
+    end
+
+    declare :background_noise, [], :var_kwargs => true
+end

lib/compass-recipes/sass_extensions/gravatar.rb

@@ -0,0 +1,60 @@
+# adatpted from https://github.com/woods/gravatar-plugin/blob/master/lib/gravatar.rb
+
+require 'digest/md5'
+require 'cgi'
+
+module Sass::Script::Functions
+
+    def gravatar_url(kwargs = {})
+        opts = {}
+        Sass::Util.map_hash({
+
+            'email' => [:String, nil],
+
+            # The URL of a default image to display if the given email address does
+            # not have a gravatar.
+            'default' => [:String, nil],
+
+            # The default size in pixels for the gravatar image (they're square).
+            'size' => [:Number, 48],
+
+            # The maximum allowed MPAA rating for gravatars. This allows you to
+            # exclude gravatars that may be out of character for your site.
+            'rating' => [:String, 'PG'],
+
+            # Whether or not to display the gravatars using HTTPS instead of HTTP
+            'ssl' => [:Bool, Sass::Script::Bool.new(false)],
+
+        }) do |name, (type, default)|
+
+            val = kwargs.delete(name)
+            if val
+                assert_type val, type, name
+            else
+                val = default
+            end
+            opts[name] = val
+        end
+
+        email_hash = Digest::MD5::hexdigest(opts['email'].to_s)
+
+        if opts['ssl'].value
+            url = "https://secure.gravatar.com/avatar/#{email_hash}.png"
+        else
+            url = "http://www.gravatar.com/avatar/#{email_hash}.png"
+        end
+
+        gravatar_opts = []
+        ['rating', 'size', 'default'].each do |opt|
+            unless opts[opt].nil?
+                value = CGI::escape(opts[opt].to_s)
+                gravatar_opts << [opt, value].join('=')
+            end
+        end
+
+        url << "?#{gravatar_opts.join('&')}" unless gravatar_opts.empty?
+        Sass::Script::String.new("url(" + url + ")");
+    end
+
+    declare :gravatar_url, [], :var_kwargs => true
+end

stylesheets/recipes/helper/_gravatar.scss

@@ -0,0 +1,79 @@
+//
+// Gravatar recipe
+//
+// This recipe use a gravatar as an element
+//
+// It's not really usable as it could be, @link https://github.com/MoOx/compass-recipes/issues/27
+// But I want something, so use javascript if you can, or helper if you just need one hardcoded gravatar
+//
+// @author Maxime Thirouin maxime.thirouin@gmail.com @MoOx
+//
+
+@import "recipes/shared/pseudo-element";
+
+// default values
+$helper-gravatar-size:      48px    !default;
+$helper-gravatar-default:   ""      !default;
+$helper-gravatar-rating:    PG      !default;
+$helper-gravatar-ssl:       false   !default;
+
+@mixin helper-gravatar-base(
+    $email,
+    $size:      $helper-gravatar-size,
+    $default:   $helper-gravatar-default,
+    $rating:    $helper-gravatar-rating,
+    $ssl:       $helper-gravatar-ssl
+)
+{
+    background-image: gravatar_url(
+        $email: unquote($email),
+        $size: $size/1px, // to remove px
+        $default: unquote($default),
+        $rating: $rating,
+        $ssl: $ssl
+    );
+    background-repeat: no-repeat;
+}
+
+@mixin helper-gravatar(
+    $email,
+    $size:      $helper-gravatar-size,
+    $default:   $helper-gravatar-default,
+    $rating:    $helper-gravatar-rating,
+    $ssl:       $helper-gravatar-ssl
+)
+{
+    width: $size;
+    height: $size;
+    @include helper-gravatar-base($email, $size, $default, $rating, $ssl);
+
+}
+
+@mixin helper-gravatar-pseudo(
+    $email,
+    $size:      $helper-gravatar-size,
+    $default:   $helper-gravatar-default,
+    $rating:    $helper-gravatar-rating,
+    $ssl:       $helper-gravatar-ssl
+)
+{
+    @include pseudo-element($size, $size, $position: default);
+    @include helper-gravatar-base($email, $size, $default, $rating, $ssl);
+}
+
+@mixin helper-gravatar-auto(
+    $pseudo:    before,
+    $size:      $helper-gravatar-size,
+    $default:   $helper-gravatar-default,
+    $ssl:       $helper-gravatar-ssl
+)
+{
+    &:#{$pseudo}
+    {
+        @include pseudo-element($size, $size, $position: default);
+        width: $size;
+        height: $size;
+        background-repeat: no-repeat;
+    }
+
+}

templates/gravatar/getElementsByClassName.js

@@ -0,0 +1,23 @@
+/**
+ * document.getElementsByClassName polyfill for IE8/7/6
+ */
+
+if (!document.getElementsByClassName)
+{
+    document.getElementsByClassName = function(classname)
+    {
+        classname = new RegExp('\\b' + classname + '\\b');
+
+        var elements = [];
+        for (var i = 0, elem = this.getElementsByTagName('*'), length = elem.length; i < length; i++)
+        {
+            var classes = elem[i].className;
+            if (classname.test(classes))
+            {
+                elements.push(elem[i]);
+            }
+        }
+
+        return elements;
+    };
+}