jquery-simplecolorpicker-rails 0.0.1

data/.gitignore

@@ -0,0 +1,17 @@
+*.gem
+*.rbc
+.bundle
+.config
+.yardoc
+Gemfile.lock
+InstalledFiles
+_yardoc
+coverage
+doc/
+lib/bundler/man
+pkg
+rdoc
+spec/reports
+test/tmp
+test/version_tmp
+tmp

data/Gemfile

@@ -0,0 +1,4 @@
+source 'https://rubygems.org'
+
+# Specify your gem's dependencies in jquery-simplecolorpicker-rails.gemspec
+gemspec

data/LICENSE

@@ -0,0 +1,22 @@
+Copyright (c) 2012 Tanguy Krotoff
+
+MIT License
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,58 @@
+# jQuery simplecolorpicker for Rails
+
+Simplecolorpicker packaged for the Rails 3.1+ asset pipeline.
+Check [simplecolorpicker project home page](https://github.com/tkrotoff/jquery-simplecolorpicker).
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+    gem 'jquery-simplecolorpicker-rails'
+
+And then execute:
+
+    $ bundle
+
+Or install it yourself as:
+
+    $ gem install jquery-simplecolorpicker-rails
+
+## Usage
+
+Add the following JavaScript file to `app/assets/javascripts/application.js`:
+
+    //= require jquery.simplecolorpicker.js
+
+Add the following stylesheet file to `app/assets/stylesheets/application.css`:
+
+    *= require jquery.simplecolorpicker.css
+
+If you use [simple_form](https://github.com/plataformatec/simple_form) then write this inside your form:
+
+    <%= f.input :color, collection: MY_COLORS, selected: my_default_color %>
+
+With `MY_COLORS` being:
+
+    # Colors from Google Calendar
+    MY_COLORS = {
+      'Green'       => '#7bd148',
+      'Bold blue'   => '#5484ed',
+      'Blue'        => '#a4bdfc',
+      'Turquoise'   => '#46d6db',
+      'Light green' => '#7ae7bf',
+      'Bold green'  => '#51b749',
+      'Yellow'      => '#fbd75b',
+      'Orange'      => '#ffb878',
+      'Red'         => '#ff887c',
+      'Bold red'    => '#dc2127',
+      'Purple'      => '#dbadff',
+      'Gray'        => '#e1e1e1',
+    }
+
+And `my_default_color` being:
+
+    my_default_color = MY_COLORS['Yellow']
+
+## License
+
+Simplecolorpicker is licensed under the MIT license, this gem too.

data/Rakefile

@@ -0,0 +1,2 @@
+#!/usr/bin/env rake
+require "bundler/gem_tasks"

data/jquery-simplecolorpicker-rails.gemspec

@@ -0,0 +1,19 @@
+# -*- encoding: utf-8 -*-
+require File.expand_path('../lib/jquery-simplecolorpicker-rails/version', __FILE__)
+
+Gem::Specification.new do |gem|
+  gem.authors       = ["Tanguy Krotoff"]
+  gem.email         = ["tkrotoff@gmail.com"]
+  gem.description   = %q{simplecolorpicker jQuery plugin}
+  gem.summary       = %q{simplecolorpicker packaged for the Rails 3.1+ asset pipeline}
+  gem.homepage      = "http://github.com/tkrotoff/jquery-simplecolorpicker-rails"
+
+  gem.files         = `git ls-files`.split($\)
+  gem.executables   = gem.files.grep(%r{^bin/}).map{ |f| File.basename(f) }
+  gem.test_files    = gem.files.grep(%r{^(test|spec|features)/})
+  gem.name          = "jquery-simplecolorpicker-rails"
+  gem.require_paths = ["lib"]
+  gem.version       = Jquery::Simplecolorpicker::Rails::VERSION
+
+  gem.add_dependency 'railties', '>= 3.1.0'
+end

data/lib/jquery-simplecolorpicker-rails.rb

@@ -0,0 +1,10 @@
+require "jquery-simplecolorpicker-rails/version"
+
+module Jquery
+  module Simplecolorpicker
+    module Rails
+      class Engine < ::Rails::Engine
+      end
+    end
+  end
+end

data/lib/jquery-simplecolorpicker-rails/version.rb

@@ -0,0 +1,7 @@
+module Jquery
+  module Simplecolorpicker
+    module Rails
+      VERSION = "0.0.1"
+    end
+  end
+end

data/vendor/assets/javascripts/jquery.simplecolorpicker.js

@@ -0,0 +1,165 @@
+/**
+ * Very simple jQuery Color Picker.
+ *
+ * Copyright (C) 2012 Tanguy Krotoff
+ *
+ * Licensed under the MIT license.
+ */
+
+!function($) {
+
+  /**
+   * Constructor.
+   */
+  var SimpleColorPicker = function(element, options) {
+    this.select = $(element);
+    this.options = $.extend({}, $.fn.simplecolorpicker.defaults, options);
+
+    this.select.hide();
+
+    // Trick: fix span alignment
+    // When a span does not contain any text, its alignment is not correct
+    var fakeText = '    ';
+
+    // Build the list of colors
+    // <div class="selected" title="Green" style="background-color: #7bd148;" role="button"></div>
+    var colorList = '';
+    $('option', this.select).each(function() {
+      var option = $(this);
+      var color = option.val();
+      var title = option.text();
+      var selected = '';
+      if (option.attr('selected')) {
+        selected = 'class="selected"';
+      }
+      colorList += '<div ' + selected + ' title="' + title + '" style="background-color: ' + color + ';" role="button" tabindex="0">'
+                   + fakeText +
+                   '</div>';
+    });
+
+    if (this.options.picker) {
+      var selectText = this.select.find('option:selected').text();
+      var selectValue = this.select.val();
+      this.icon = $('<span class="simplecolorpicker icon" title="' + selectText + '" style="background-color: ' + selectValue + ';" role="button" tabindex="0">'
+                    + fakeText +
+                    '</span>').insertAfter(this.select);
+      this.icon.on('click', $.proxy(this.show, this));
+
+      this.picker = $('<span class="simplecolorpicker picker"></span>').appendTo(document.body);
+      this.picker.html(colorList);
+      this.picker.on('click', $.proxy(this.click, this));
+
+      // Hide picker when clicking outside
+      $(document).on('mousedown', $.proxy(this.hide, this));
+      this.picker.on('mousedown', $.proxy(this.mousedown, this));
+    } else {
+      this.inline = $('<span class="simplecolorpicker inline"></span>').insertAfter(this.select);
+      this.inline.html(colorList);
+      this.inline.on('click', $.proxy(this.click, this));
+    }
+  }
+
+  /**
+   * SimpleColorPicker class.
+   */
+  SimpleColorPicker.prototype = {
+    constructor: SimpleColorPicker,
+
+    show: function() {
+      var bootstrapArrowWidth = 16; // Empirical value
+      var pos = this.icon.offset();
+      this.picker.css({
+        left: pos.left + this.icon.width() / 2 - bootstrapArrowWidth, // Middle of the icon
+        top: pos.top + this.icon.outerHeight()
+      });
+
+      this.picker.show(this.options.delay);
+    },
+
+    hide: function() {
+      this.picker.hide(this.options.delay);
+    },
+
+    click: function(e) {
+      var target = $(e.target);
+      if (target.length == 1) {
+        switch (target[0].nodeName.toLowerCase()) {
+
+          // When you click on a color
+          case 'div':
+            var color = target.css('background-color');
+            var title = target.attr('title');
+
+            // Mark this div as the selected one
+            target.siblings().removeClass('selected');
+            target.addClass('selected');
+
+            if (this.options.picker) {
+              this.icon.css('background-color', color);
+              this.icon.attr('title', title);
+
+              // Hide the picker
+              this.hide();
+            }
+
+            // Change select value
+            this.select.val(this.rgb2hex(color)).change();
+
+            break;
+
+        }
+      }
+    },
+
+    /**
+     * Prevents the mousedown event from "eating" the click event.
+     */
+    mousedown: function(e) {
+      e.stopPropagation();
+      e.preventDefault();
+    },
+
+    /**
+     * Converts a RGB color to its hexadecimal value.
+     *
+     * See http://stackoverflow.com/questions/1740700/get-hex-value-rather-than-rgb-value-using-jquery
+     */
+    rgb2hex: function(rgb) {
+      rgb = rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
+      function hex(x) {
+        return ("0" + parseInt(x).toString(16)).slice(-2);
+      }
+      return "#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3]);
+    }
+  }
+
+  /**
+   * Plugin definition.
+   */
+  $.fn.simplecolorpicker = function(option) {
+    // For HTML element passed to the plugin
+    return this.each(function () {
+      var $this = $(this),
+      data = $this.data('simplecolorpicker'),
+      options = typeof option == 'object' && option;
+      if (!data) {
+        $this.data('simplecolorpicker', (data = new SimpleColorPicker(this, options)));
+      }
+      if (typeof option == 'string') data[option]();
+    });
+  }
+
+  $.fn.simplecolorpicker.Constructor = SimpleColorPicker;
+
+  /**
+   * Default options.
+   */
+  $.fn.simplecolorpicker.defaults = {
+    // Animation delay
+    delay: 0,
+
+    // Show the picker or make it inline
+    picker: false
+  };
+
+}(window.jQuery);

data/vendor/assets/stylesheets/jquery.simplecolorpicker.css

@@ -0,0 +1,93 @@
+/**
+ * Very simple jQuery Color Picker CSS.
+ *
+ * Copyright (C) 2012 Tanguy Krotoff
+ *
+ * Licensed under the MIT license.
+ *
+ * Inspired by Bootstrap Twitter.
+ * See https://github.com/twitter/bootstrap/blob/master/less/dropdowns.less
+ * See http://twitter.github.com/bootstrap/assets/css/bootstrap.css
+ */
+
+.simplecolorpicker:before {
+  position: absolute;
+  top: -7px;
+  left: 9px;
+  display: inline-block;
+  border-right: 7px solid transparent;
+  border-bottom: 7px solid #ccc;
+  border-left: 7px solid transparent;
+  border-bottom-color: rgba(0, 0, 0, 0.2);
+  content: '';
+}
+
+.simplecolorpicker:after {
+  position: absolute;
+  top: -6px;
+  left: 10px;
+  display: inline-block;
+  border-right: 6px solid transparent;
+  border-bottom: 6px solid #ffffff;
+  border-left: 6px solid transparent;
+  content: '';
+}
+
+.simplecolorpicker.picker {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 1000;
+  display: none;
+  float: left;
+
+  min-width: 160px;
+  max-width: 264px;
+
+  padding: 4px 0 0 4px;
+  margin: 1px 0 0;
+  list-style: none;
+  background-color: #ffffff;
+
+  border: 1px solid #ccc;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+
+  *border-right-width: 2px;
+  *border-bottom-width: 2px;
+
+  -webkit-border-radius: 5px;
+     -moz-border-radius: 5px;
+          border-radius: 5px;
+
+  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+     -moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+          box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
+
+  -webkit-background-clip: padding-box;
+     -moz-background-clip: padding;
+          background-clip: padding-box;
+}
+
+  .simplecolorpicker.inline {
+    display: inline-block;
+    height: 18px;
+    padding: 4px 0;
+  }
+
+  .simplecolorpicker.icon,
+  .simplecolorpicker div {
+    cursor: pointer;
+    display: inline-block;
+    margin: 0 4px 4px 0;
+
+    -webkit-border-radius: 3px;
+       -moz-border-radius: 3px;
+            border-radius: 3px;
+
+    border: 1px solid transparent;
+  }
+
+  .simplecolorpicker div:hover,
+  .simplecolorpicker div.selected {
+    border: 1px solid black;
+  }

metadata

@@ -0,0 +1,66 @@
+--- !ruby/object:Gem::Specification
+name: jquery-simplecolorpicker-rails
+version: !ruby/object:Gem::Version
+  version: 0.0.1
+  prerelease: 
+platform: ruby
+authors:
+- Tanguy Krotoff
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2012-06-22 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: railties
+  requirement: &70305360074020 !ruby/object:Gem::Requirement
+    none: false
+    requirements:
+    - - ! '>='
+      - !ruby/object:Gem::Version
+        version: 3.1.0
+  type: :runtime
+  prerelease: false
+  version_requirements: *70305360074020
+description: simplecolorpicker jQuery plugin
+email:
+- tkrotoff@gmail.com
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- .gitignore
+- Gemfile
+- LICENSE
+- README.md
+- Rakefile
+- jquery-simplecolorpicker-rails.gemspec
+- lib/jquery-simplecolorpicker-rails.rb
+- lib/jquery-simplecolorpicker-rails/version.rb
+- vendor/assets/javascripts/jquery.simplecolorpicker.js
+- vendor/assets/stylesheets/jquery.simplecolorpicker.css
+homepage: http://github.com/tkrotoff/jquery-simplecolorpicker-rails
+licenses: []
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  none: false
+  requirements:
+  - - ! '>='
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 1.8.15
+signing_key: 
+specification_version: 3
+summary: simplecolorpicker packaged for the Rails 3.1+ asset pipeline
+test_files: []