beautiful_scaffold 2.0.1 → 2.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f2c5cc9830b52e9bdc57663e3e93779e3457502e4f3656f0c541b8213775edca
-  data.tar.gz: 03260e7d438e1aa4c9161a5fdf1b221fd21c2acc4625857ac00eadf4686ac04c
+  metadata.gz: 29b4c80363aba59d47f1219a1dbc4b205a149b0d2745f6a295e1511a2898d96f
+  data.tar.gz: 13fe2f58f7b2a30e7eff49e55ab8d8ec1ac5e7d77f78b41f50ec18919fb2cb98
 SHA512:
-  metadata.gz: d95e8b02e11a731844977432a230d83b200da69018184d3583a3ade48f448face2799f8e76bcb01ee13b40b7166813f0921fe57442db6fa7f18ec23eb6b62f79
-  data.tar.gz: 7ab3d32603cf3c89f6c34a7d5798610b60ccbf701a3c8583eee89bdabadb0a090c96436e8e17c11f2c9d41d7ba4262820414b1096e54124df2b02cccaf9b777e
+  metadata.gz: ebd54c4c42924851fb5039d1edf3a749ff0b153f605cd1b9671c0a292d030a43d839bac61b8e830b3733d35694425a602f63f24fa81a357bd099dd1f12d91a43
+  data.tar.gz: 370ee3d28e84836c4f81d7dbedd894c5ccd56997d00e598d10959375c0037b5c8ce4802a28d1e6f819532c57b6d929583e3649a1d5cd8045f5bba225262bed2b

data/CHANGELOG

@@ -4,6 +4,20 @@
 
 * bugfix
 
+
+== Soon
+
+ActionText / trix.
+
+== 2.0.2
+
+* enhancement
+  * Native html colorpicker
+
+* bugfix
+  * Datetime picker for model form
+  * Display price in model form
+
 == 2.0.1
 
 * enhancement

data/lib/beautiful_scaffold/version.rb

@@ -1,3 +1,3 @@
 module BeautifulScaffold
-  VERSION = '2.0.1'
+  VERSION = '2.0.2'
 end

data/lib/generators/beautiful_scaffold_generator.rb

@@ -63,7 +63,6 @@ class BeautifulScaffoldGenerator < Rails::Generators::Base
     bc_css           = [
                         "beautiful-scaffold.css.scss",
                         "tagit-dark-grey.css",
-                        "colorpicker.css",
                         "bootstrap-wysihtml5.css"
                        ]
 
@@ -81,7 +80,6 @@ class BeautifulScaffoldGenerator < Rails::Generators::Base
     if !engine_name.blank?
       ['beautiful-scaffold',
       'tagit-dark-grey',
-      'colorpicker',
       'bootstrap-wysihtml5'].each do |fileassets|
         gsub_file File.join(stylesheetspath_dest, "application-bs.scss"), " *= require #{fileassets}", " *= require #{engine_name}#{fileassets}"
       end
@@ -103,7 +101,6 @@ class BeautifulScaffoldGenerator < Rails::Generators::Base
                         "jquery-barcode.js",
                         "jstree.min.js",
                         "tagit.js",
-                        "bootstrap-colorpicker.js",
                         "a-wysihtml5-0.3.0.min.js",
                         "bootstrap-wysihtml5.js",
                         "fixed_menu.js"
@@ -115,7 +112,6 @@ class BeautifulScaffoldGenerator < Rails::Generators::Base
 
     if !engine_name.blank?
       ['a-wysihtml5-0.3.0.min',
-      'bootstrap-colorpicker',
       'bootstrap-datetimepicker-for-beautiful-scaffold',
       'bootstrap-wysihtml5',
       'tagit.js',

data/lib/generators/templates/app/assets/javascripts/application-bs.js

@@ -4,7 +4,6 @@
 //= require popper
 //= require bootstrap-sprockets
 //= require a-wysihtml5-0.3.0.min
-//= require bootstrap-colorpicker
 //= require moment
 //= require moment/fr
 //= require tempusdominus-bootstrap-4.js

data/lib/generators/templates/app/assets/javascripts/beautiful_scaffold.js

@@ -51,9 +51,8 @@ function bs_init(){
         $('.tagit-input').addClass("form-control");
     });
 
-    // Wysiwyg and color field
+    // Wysiwyg field
     $('.wysiwyg-editor').wysihtml5({"html": true});
-    $('.color').colorpicker({format: 'rgba'});
 
     // Processing
     $(document).on('click', '#checkall', function(){

data/lib/generators/templates/app/assets/javascripts/bootstrap-datetimepicker-for-beautiful-scaffold.js

@@ -1,21 +1,22 @@
 function datetimepicker_init(){
-    $('.tpicker').datetimepicker({ format: 'LT' }).on('change.datetimepicker', function(elt){
-        console.log('===============> time');
-        console.log(elt);
-        console.log($(elt.target).attr('data-field'));
+    $('.tpicker').datetimepicker({ format: 'LT', widgetPositioning: {
+            horizontal: 'auto',
+            vertical: 'auto'
+        } });
+    $('.tpicker').on('change.datetimepicker', function(elt){
         var eltid = $(elt.target).attr('data-field');
-        $('#' + eltid + '_4i').val(elt.date.hour());
-        $('#' + eltid + '_5i').val(elt.date.minute());
+        $('#' + eltid + '4i').val(elt.date.hour());
+        $('#' + eltid + '5i').val(elt.date.minute());
     });
-
-    $('.dpicker').datetimepicker({ format: 'L' }).on('change.datetimepicker', function(elt){
-        console.log('===============> date');
-        console.log(elt);
-        console.log($(elt.target).attr('data-field'));
+    $('.dpicker').datetimepicker({ format: 'L', widgetPositioning: {
+            horizontal: 'auto',
+            vertical: 'auto'
+        } });
+    $('.dpicker').on('change.datetimepicker', function(elt){
         var eltid = $(elt.target).attr('data-field');
-        $('#' + eltid + '_3i').val(elt.date.date());
-        $('#' + eltid + '_2i').val(elt.date.month()+1);
-        $('#' + eltid + '_1i').val(elt.date.year());
+        $('#' + eltid + '3i').val(elt.date.date());
+        $('#' + eltid + '2i').val(elt.date.month()+1);
+        $('#' + eltid + '1i').val(elt.date.year());
     });
     $(document).on('click', '.dpicker', function(e){
         $(this).datetimepicker('show');
@@ -24,6 +25,6 @@ function datetimepicker_init(){
         $(this).datetimepicker('show');
     });
     $(".datetimepicker-input").each(function(i, elt){
-       $(elt).removeAttr("name");
+        $(elt).removeAttr("name");
     });
 }

data/lib/generators/templates/app/assets/stylesheets/application-bs.css

@@ -12,7 +12,6 @@
  *= require jquery-ui
  *= require beautiful-scaffold
  *= require tagit-dark-grey
- *= require colorpicker
  *= require bootstrap-wysihtml5
  *= require themes/default/style
  */

data/lib/generators/templates/app/assets/stylesheets/beautiful-scaffold.css.scss

@@ -201,4 +201,10 @@ div.fixed.hide-menu{
 
 .title-index{
   font-size: 30px;
-}
+}
+
+.overview-color{
+  display:inline-block;
+  width: 40px;
+  height: 24px;
+}

data/lib/generators/templates/app/views/partials/_form_field.html.erb

@@ -14,39 +14,47 @@
     <div class="form-group">
       <%%= f.label :<%= attribute.name %>, <%= i18n_t_a(singular_table_name, attribute.name) %>.capitalize, :class => "control-label" %>
       <div class="input-group">
-        <span class="input-group-addon">$</span><%%= f.<%= attribute.field_type %> :<%= attribute.name %>, :class => "form-control" %>
+        <span class="input-group-text">$</span><%%= f.<%= attribute.field_type %> :<%= attribute.name %>, :class => "form-control" %>
       </div>
     </div>
-  <%- elsif @beautiful_attributes.include?(attribute.name + ':date') -%>
+  <%- elsif (datetime_field = @beautiful_attributes.include?(attribute.name + ':datetime')) || @beautiful_attributes.include?(attribute.name + ':date') -%>
     <div class="form-group">
       <%%= f.label :<%= attribute.name %>, <%= i18n_t_a(singular_table_name, attribute.name) %>.capitalize, :class => "control-label" %>
-      <input type="hidden" name="<%= singular_table_name %>[<%= attribute.name %>(3i)]" id="<%= singular_table_name %>_<%= attribute.name %>_3i" value="<%%= begin @<%= singular_table_name %>.<%= attribute.name %>.day rescue "" end %>" />
-      <input type="hidden" name="<%= singular_table_name %>[<%= attribute.name %>(2i)]" id="<%= singular_table_name %>_<%= attribute.name %>_2i" value="<%%= begin @<%= singular_table_name %>.<%= attribute.name %>.mon rescue "" end %>" />
-      <input type="hidden" name="<%= singular_table_name %>[<%= attribute.name %>(1i)]" id="<%= singular_table_name %>_<%= attribute.name %>_1i" value="<%%= begin @<%= singular_table_name %>.<%= attribute.name %>.year rescue "" end %>" />
-      <div class="input-group">
-        <%%= f.text_field :<%= attribute.name %>, :value => (begin @<%= singular_table_name %>.<%= attribute.name %>.strftime("%d/%m/%Y") rescue "" end), :class => "dpicker form-control" %><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
-      </div>
-    </div>
-  <%- elsif @beautiful_attributes.include?(attribute.name + ':datetime') -%>
-    <div class="form-group">
-      <%%= f.label :<%= attribute.name %>, <%= i18n_t_a(singular_table_name, attribute.name) %>.capitalize, :class => "control-label" %>
-      <input type="hidden" name="<%= singular_table_name %>[<%= attribute.name %>(3i)]" id="<%= singular_table_name %>_<%= attribute.name %>_3i" value="<%%= begin @<%= singular_table_name %>.<%= attribute.name %>.day rescue "" end %>" />
-      <input type="hidden" name="<%= singular_table_name %>[<%= attribute.name %>(2i)]" id="<%= singular_table_name %>_<%= attribute.name %>_2i" value="<%%= begin @<%= singular_table_name %>.<%= attribute.name %>.mon rescue "" end %>" />
-      <input type="hidden" name="<%= singular_table_name %>[<%= attribute.name %>(1i)]" id="<%= singular_table_name %>_<%= attribute.name %>_1i" value="<%%= begin @<%= singular_table_name %>.<%= attribute.name %>.year rescue "" end %>" />
-      <div class="input-group">
-        <%%= f.text_field :<%= attribute.name %>, :value => (begin @<%= singular_table_name %>.<%= attribute.name %>.strftime("%d/%m/%Y") rescue "" end), :class => "dpicker form-control" %><span class="input-group-addon"><i class="fa fa-calendar"></i></span>
-      </div>
-      <input type="hidden" name="<%= singular_table_name %>[<%= attribute.name %>(4i)]" id="<%= singular_table_name %>_<%= attribute.name %>_4i" value="<%%= begin @<%= singular_table_name %>.<%= attribute.name %>.min rescue "" end %>" />
-      <input type="hidden" name="<%= singular_table_name %>[<%= attribute.name %>(5i)]" id="<%= singular_table_name %>_<%= attribute.name %>_5i" value="<%%= begin @<%= singular_table_name %>.<%= attribute.name %>.hour rescue "" end %>" />
-      <div class="input-group">
-        <%%= f.text_field :<%= attribute.name %>, :value => (begin @<%= singular_table_name %>.<%= attribute.name %>.strftime("%H:%M") rescue "" end), :class => "tpicker form-control" %><span class="input-group-addon"><i class="fa fa-clock-o"></i></span>
-      </div>
+      <% if datetime_field %>
+      <div class="row">
+      <% end %>
+        <div id="container_<%= singular_table_name %>_<%= attribute.name %>_dp" data-field="<%= singular_table_name %>_<%= attribute.name %>_input_" class="input-group input-datetime dpicker <%= (datetime_field ? 'col-sm' : '') %>" data-target-input="nearest">
+          <%%= f.text_field :<%= attribute.name %>, :value => (begin @<%= singular_table_name %>.<%= attribute.name %>.strftime("%d/%m/%Y") rescue "" end),
+                           :class => "form-control datetimepicker-input",
+                           "data-target" => "#container_<%= singular_table_name %>_<%= attribute.name %>_dp",
+                           "data-id" => "<%= singular_table_name %>_<%= attribute.name %>_input_", id: nil %>
+          <div class="input-group-append" data-target="container_<%= singular_table_name %>_<%= attribute.name %>_dp" data-toggle="datetimepicker">
+            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
+          </div>
+        </div>
+        <% if datetime_field %>
+          <div id="container_<%= singular_table_name %>_<%= attribute.name %>_tp" data-field="<%= singular_table_name %>_<%= attribute.name %>_input_" class="input-group input-datetime tpicker col-sm" data-target-input="nearest">
+            <%%= f.text_field :<%= attribute.name %>, :value => (begin @<%= singular_table_name %>.<%= attribute.name %>.strftime("%H:%M") rescue "" end),
+                             :class => "form-control datetimepicker-input",
+                             "data-target" => "#container_<%= singular_table_name %>_<%= attribute.name %>_tp",
+                             "data-id" => "<%= singular_table_name %>_<%= attribute.name %>_input_", id: nil %>
+            <div class="input-group-append" data-target="container_<%= singular_table_name %>_<%= attribute.name %>_tp" data-toggle="datetimepicker">
+              <span class="input-group-text"><i class="fa fa-clock"></i></span>
+            </div>
+          </div>
+        <% end %>
+        <%% ["year","mon","day" <%= datetime_field ? ',"min","hour"' : '' %>].each_with_index do |meth, i| %>
+          <%%= f.hidden_field("<%= attribute.name %>(#{i+1}i)", value: @<%= singular_table_name %>.<%= attribute.name %>&.send(meth), id: "<%= singular_table_name %>_<%= attribute.name %>_input_#{i+1}i") %>
+        <%% end %>
+      <% if datetime_field %>
+        </div>
+      <% end %>
     </div>
   <%- elsif @beautiful_attributes.include?(attribute.name + ':color') -%>
     <div class="form-group">
       <%%= f.label :<%= attribute.name %>, <%= i18n_t_a(singular_table_name, attribute.name) %>.capitalize, :class => "control-label" %>
-      <div class="input-group color" data-color="<%%= (@<%= model %>.<%= attribute.name %> || "rgba(0, 0, 0)") %>" data-color-format="rgba">
-        <%%= f.<%= attribute.field_type %> :<%= attribute.name %>, :class => "form-control" %><span class="input-group-addon"><i style="background-color: rgb(0, 0, 0)"></i></span>
+      <div class="input-group">
+        <%%= f.color_field :<%= attribute.name %>, :class => "form-control" %>
       </div>
     </div>
   <%- else -%>

data/lib/generators/templates/app/views/partials/_index_column.html.erb

@@ -10,6 +10,8 @@
                 <%% else %>
                   <%%= t(:any, :default => "Any") %>
                 <%% end %>
+              <%- elsif @beautiful_attributes.include?(attribute.name + ':color') -%>
+                <span class="overview-color" style="background-color:<%%= <%= singular_table_name %>.<%= attribute.name %> %>;">&nbsp;</span>
               <%- else -%>
                 <%%= <%= singular_table_name %>.<%= attribute.name %> %>
               <%- end -%>

data/lib/generators/templates/app/views/partials/_show_field.html.erb

@@ -7,6 +7,8 @@
       <%%= t((@<%= singular_table_name %>.<%= attribute.name %> ? "yes".to_sym : "no".to_sym)) %>
     <%- elsif @beautiful_attributes.include?(attribute.name + ':references') -%>
       <%%= (@<%= singular_table_name %>.<%= attribute.name %>.nil? ? "" : @<%= singular_table_name %>.<%= attribute.name %>.caption) %>
+    <%- elsif @beautiful_attributes.include?(attribute.name + ':color') -%>
+      <span class="overview-color" style="background-color:<%%= @<%= singular_table_name %>.<%= attribute.name %> %>;">&nbsp;</span>
     <%- else -%>
       <%%= @<%= singular_table_name %>.<%= attribute.name %> %>
     <%- end -%>

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: beautiful_scaffold
 version: !ruby/object:Gem::Version
-  version: 2.0.1
+  version: 2.0.2
 platform: ruby
 authors:
 - Sylvain Claudel
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-02-18 00:00:00.000000000 Z
+date: 2021-02-19 00:00:00.000000000 Z
 dependencies: []
 description: Beautiful Scaffold generate a complete scaffold (sort, export, paginate
   and filter data) http://beautiful-scaffold.rivsc.ovh
@@ -43,7 +43,6 @@ files:
 - lib/generators/templates/app/assets/javascripts/advanced.js
 - lib/generators/templates/app/assets/javascripts/application-bs.js
 - lib/generators/templates/app/assets/javascripts/beautiful_scaffold.js
-- lib/generators/templates/app/assets/javascripts/bootstrap-colorpicker.js
 - lib/generators/templates/app/assets/javascripts/bootstrap-datetimepicker-for-beautiful-scaffold.js
 - lib/generators/templates/app/assets/javascripts/bootstrap-wysihtml5.js
 - lib/generators/templates/app/assets/javascripts/fixed_menu.js
@@ -54,7 +53,6 @@ files:
 - lib/generators/templates/app/assets/stylesheets/application-bs.css
 - lib/generators/templates/app/assets/stylesheets/beautiful-scaffold.css.scss
 - lib/generators/templates/app/assets/stylesheets/bootstrap-wysihtml5.css
-- lib/generators/templates/app/assets/stylesheets/colorpicker.css
 - lib/generators/templates/app/assets/stylesheets/tagit-dark-grey.css
 - lib/generators/templates/app/assets/stylesheets/themes/default-dark/32px.png
 - lib/generators/templates/app/assets/stylesheets/themes/default-dark/40px.png

data/lib/generators/templates/app/assets/javascripts/bootstrap-colorpicker.js

@@ -1,520 +0,0 @@
-/* =========================================================
- * bootstrap-colorpicker.js 
- * http://www.eyecon.ro/bootstrap-colorpicker
- * =========================================================
- * Copyright 2012 Stefan Petre
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- * ========================================================= */
- 
-!function( $ ) {
-	
-	// Color object
-	
-	var Color = function(val) {
-		this.value = {
-			h: 1,
-			s: 1,
-			b: 1,
-			a: 1
-		};
-		this.setColor(val);
-	};
-	
-	Color.prototype = {
-		constructor: Color,
-		
-		//parse a string to HSB
-		setColor: function(val){
-			val = val.toLowerCase();
-			var that = this;
-			$.each( CPGlobal.stringParsers, function( i, parser ) {
-				var match = parser.re.exec( val ),
-					values = match && parser.parse( match ),
-					space = parser.space||'rgba';
-				if ( values ) {
-					if (space == 'hsla') {
-						that.value = CPGlobal.RGBtoHSB.apply(null, CPGlobal.HSLtoRGB.apply(null, values));
-					} else {
-						that.value = CPGlobal.RGBtoHSB.apply(null, values);
-					}
-					return false;
-				}
-			});
-		},
-		
-		setHue: function(h) {
-			this.value.h = 1- h;
-		},
-		
-		setSaturation: function(s) {
-			this.value.s = s;
-		},
-		
-		setLightness: function(b) {
-			this.value.b = 1- b;
-		},
-		
-		setAlpha: function(a) {
-			this.value.a = parseInt((1 - a)*100, 10)/100;
-		},
-		
-		// HSBtoRGB from RaphaelJS
-		// https://github.com/DmitryBaranovskiy/raphael/
-		toRGB: function(h, s, b, a) {
-			if (!h) {
-				h = this.value.h;
-				s = this.value.s;
-				b = this.value.b;
-			}
-			h *= 360;
-			var R, G, B, X, C;
-			h = (h % 360) / 60;
-			C = b * s;
-			X = C * (1 - Math.abs(h % 2 - 1));
-			R = G = B = b - C;
-
-			h = ~~h;
-			R += [C, X, 0, 0, X, C][h];
-			G += [X, C, C, X, 0, 0][h];
-			B += [0, 0, X, C, C, X][h];
-			return {
-				r: Math.round(R*255),
-				g: Math.round(G*255),
-				b: Math.round(B*255),
-				a: a||this.value.a
-			};
-		},
-		
-		toHex: function(h, s, b, a){
-			var rgb = this.toRGB(h, s, b, a);
-			return '#'+((1 << 24) | (parseInt(rgb.r) << 16) | (parseInt(rgb.g) << 8) | parseInt(rgb.b)).toString(16).substr(1);
-		},
-		
-		toHSL: function(h, s, b, a){
-			if (!h) {
-				h = this.value.h;
-				s = this.value.s;
-				b = this.value.b;
-			}
-			var H = h,
-				L = (2 - s) * b,
-				S = s * b;
-			if (L > 0 && L <= 1) {
-				S /= L;
-			} else {
-				S /= 2 - L;
-			}
-			L /= 2;
-			if (S > 1) {
-				S = 1;
-			}
-			return {
-				h: H,
-				s: S,
-				l: L,
-				a: a||this.value.a
-			};
-		}
-	};
-	
-	// Picker object
-	
-	var Colorpicker = function(element, options){
-		this.element = $(element);
-		var format = options.format||this.element.data('color-format')||'hex';
-		this.format = CPGlobal.translateFormats[format];
-		this.isInput = this.element.is('input');
-		this.component = this.element.is('.color') ? this.element.find('.input-group-addon') : false;
-		
-		this.picker = $(CPGlobal.template)
-							.appendTo('body')
-							.on('mousedown', $.proxy(this.mousedown, this));
-		
-		if (this.isInput) {
-			this.element.on({
-				'focus': $.proxy(this.show, this),
-				'keyup': $.proxy(this.update, this)
-			});
-		} else if (this.component){
-			this.component.on({
-				'click': $.proxy(this.show, this)
-			});
-		} else {
-			this.element.on({
-				'click': $.proxy(this.show, this)
-			});
-		}
-		if (format == 'rgba' || format == 'hsla') {
-			this.picker.addClass('alpha');
-			this.alpha = this.picker.find('.colorpicker-alpha')[0].style;
-		}
-		
-		if (this.component){
-			this.picker.find('.colorpicker-color').hide();
-			this.preview = this.element.find('i')[0].style;
-		} else {
-			this.preview = this.picker.find('div:last')[0].style;
-		}
-		
-		this.base = this.picker.find('div:first')[0].style;
-		this.update();
-	};
-	
-	Colorpicker.prototype = {
-		constructor: Colorpicker,
-		
-		show: function(e) {
-			this.picker.show();
-			this.height = this.component ? this.component.outerHeight() : this.element.outerHeight();
-			this.place();
-			$(window).on('resize', $.proxy(this.place, this));
-			if (!this.isInput) {
-				if (e) {
-					e.stopPropagation();
-					e.preventDefault();
-				}
-			}
-			$(document).on({
-				'mousedown': $.proxy(this.hide, this)
-			});
-			this.element.trigger({
-				type: 'show',
-				color: this.color
-			});
-		},
-		
-		update: function(){
-			this.color = new Color(this.isInput ? this.element.prop('value') : this.element.data('color'));
-			this.picker.find('i')
-				.eq(0).css({left: this.color.value.s*100, top: 100 - this.color.value.b*100}).end()
-				.eq(1).css('top', 100 * (1 - this.color.value.h)).end()
-				.eq(2).css('top', 100 * (1 - this.color.value.a));
-			this.previewColor();
-		},
-		
-		hide: function(){
-			this.picker.hide();
-			$(window).off('resize', this.place);
-			if (!this.isInput) {
-				$(document).off({
-					'mousedown': this.hide
-				});
-				if (this.component){
-					this.element.find('input').prop('value', this.format.call(this));
-				}
-				this.element.data('color', this.format.call(this));
-			} else {
-				this.element.prop('value', this.format.call(this));
-			}
-			this.element.trigger({
-				type: 'hide',
-				color: this.color
-			});
-		},
-		
-		place: function(){
-			var offset = this.component ? this.component.offset() : this.element.offset();
-			this.picker.css({
-				top: offset.top + this.height,
-				left: offset.left
-			});
-		},
-		
-		//preview color change
-		previewColor: function(){
-			this.preview.backgroundColor = this.format.call(this);
-			//set the color for brightness/saturation slider
-			this.base.backgroundColor = this.color.toHex(this.color.value.h, 1, 1, 1);
-			//set te color for alpha slider
-			if (this.alpha) {
-				this.alpha.backgroundColor = this.color.toHex();
-			}
-		},
-		
-		pointer: null,
-		
-		slider: null,
-		
-		mousedown: function(e){
-			e.stopPropagation();
-			e.preventDefault();
-			
-			var target = $(e.target);
-			
-			//detect the slider and set the limits and callbacks
-			var zone = target.closest('div');
-			if (!zone.is('.colorpicker')) {
-				if (zone.is('.colorpicker-saturation')) {
-					this.slider = $.extend({}, CPGlobal.sliders['saturation']);
-				} 
-				else if (zone.is('.colorpicker-hue')) {
-					this.slider = $.extend({}, CPGlobal.sliders['hue']);
-				}
-				else if (zone.is('.colorpicker-alpha')) {
-					this.slider = $.extend({}, CPGlobal.sliders['alpha']);
-				}
-				var offset = zone.offset();
-				//reference to knob's style
-				this.slider.knob = zone.find('i')[0].style;
-				this.slider.left = e.pageX - offset.left;
-				this.slider.top = e.pageY - offset.top;
-				this.pointer = {
-					left: e.pageX,
-					top: e.pageY
-				};
-				//trigger mousemove to move the knob to the current position
-				$(document).on({
-					mousemove: $.proxy(this.mousemove, this),
-					mouseup: $.proxy(this.mouseup, this)
-				}).trigger('mousemove');
-			}
-			return false;
-		},
-		
-		mousemove: function(e){
-			e.stopPropagation();
-			e.preventDefault();
-			var left = Math.max(
-				0,
-				Math.min(
-					this.slider.maxLeft,
-					this.slider.left + ((e.pageX||this.pointer.left) - this.pointer.left)
-				)
-			);
-			var top = Math.max(
-				0,
-				Math.min(
-					this.slider.maxTop,
-					this.slider.top + ((e.pageY||this.pointer.top) - this.pointer.top)
-				)
-			);
-			this.slider.knob.left = left + 'px';
-			this.slider.knob.top = top + 'px';
-			if (this.slider.callLeft) {
-				this.color[this.slider.callLeft].call(this.color, left/100);
-			}
-			if (this.slider.callTop) {
-				this.color[this.slider.callTop].call(this.color, top/100);
-			}
-			this.previewColor();
-			this.element.trigger({
-				type: 'changeColor',
-				color: this.color
-			});
-			return false;
-		},
-		
-		mouseup: function(e){
-			e.stopPropagation();
-			e.preventDefault();
-			$(document).off({
-				mousemove: this.mousemove,
-				mouseup: this.mouseup
-			});
-			return false;
-		}
-	}
-
-	$.fn.colorpicker = function ( option ) {
-		return this.each(function () {
-			var $this = $(this),
-				data = $this.data('colorpicker'),
-				options = typeof option == 'object' && option;
-			if (!data) {
-				$this.data('colorpicker', (data = new Colorpicker(this, $.extend({}, $.fn.colorpicker.defaults,options))));
-			}
-			if (typeof option == 'string') data[option]();
-		});
-	};
-
-	$.fn.colorpicker.defaults = {
-	};
-	
-	$.fn.colorpicker.Constructor = Colorpicker;
-	
-	var CPGlobal = {
-	
-		// translate a format from Color object to a string
-		translateFormats: {
-			'rgb': function(){
-				var rgb = this.color.toRGB();
-				return 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
-			},
-			
-			'rgba': function(){
-				var rgb = this.color.toRGB();
-				return 'rgba('+rgb.r+','+rgb.g+','+rgb.b+','+rgb.a+')';
-			},
-			
-			'hsl': function(){
-				var hsl = this.color.toHSL();
-				return 'hsl('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%)';
-			},
-			
-			'hsla': function(){
-				var hsl = this.color.toHSL();
-				return 'hsla('+Math.round(hsl.h*360)+','+Math.round(hsl.s*100)+'%,'+Math.round(hsl.l*100)+'%,'+hsl.a+')';
-			},
-			
-			'hex': function(){
-				return  this.color.toHex();
-			}
-		},
-		
-		sliders: {
-			saturation: {
-				maxLeft: 100,
-				maxTop: 100,
-				callLeft: 'setSaturation',
-				callTop: 'setLightness'
-			},
-			
-			hue: {
-				maxLeft: 0,
-				maxTop: 100,
-				callLeft: false,
-				callTop: 'setHue'
-			},
-			
-			alpha: {
-				maxLeft: 0,
-				maxTop: 100,
-				callLeft: false,
-				callTop: 'setAlpha'
-			}
-		},
-		
-		// HSBtoRGB from RaphaelJS
-		// https://github.com/DmitryBaranovskiy/raphael/
-		RGBtoHSB: function (r, g, b, a){
-			r /= 255;
-			g /= 255;
-			b /= 255;
-
-			var H, S, V, C;
-			V = Math.max(r, g, b);
-			C = V - Math.min(r, g, b);
-			H = (C == 0 ? null :
-				 V == r ? (g - b) / C :
-				 V == g ? (b - r) / C + 2 :
-						  (r - g) / C + 4
-				);
-			H = ((H + 360) % 6) * 60 / 360;
-			S = C == 0 ? 0 : C / V;
-			return {h: H||1, s: S, b: V, a: a||1};
-		},
-		
-		HueToRGB: function (p, q, h) {
-			if (h < 0)
-				h += 1;
-			else if (h > 1)
-				h -= 1;
-
-			if ((h * 6) < 1)
-				return p + (q - p) * h * 6;
-			else if ((h * 2) < 1)
-				return q;
-			else if ((h * 3) < 2)
-				return p + (q - p) * ((2 / 3) - h) * 6;
-			else
-				return p;
-		},
-	
-		HSLtoRGB: function (h, s, l, a)
-		{
-
-			if (s < 0)
-				s = 0;
-
-			if (l <= 0.5)
-				var q = l * (1 + s);
-			else
-				var q = l + s - (l * s);
-
-			var p = 2 * l - q;
-
-			var tr = h + (1 / 3);
-			var tg = h;
-			var tb = h - (1 / 3);
-
-			var r = Math.round(CPGlobal.HueToRGB(p, q, tr) * 255);
-			var g = Math.round(CPGlobal.HueToRGB(p, q, tg) * 255);
-			var b = Math.round(CPGlobal.HueToRGB(p, q, tb) * 255);
-			return [r, g, b, a||1];
-		},
-		
-		// a set of RE's that can match strings and generate color tuples.
-		// from John Resig color plugin
-		// https://github.com/jquery/jquery-color/
-		stringParsers: [
-			{
-				re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
-				parse: function( execResult ) {
-					return [
-						execResult[ 1 ],
-						execResult[ 2 ],
-						execResult[ 3 ],
-						execResult[ 4 ]
-					];
-				}
-			}, {
-				re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
-				parse: function( execResult ) {
-					return [
-						2.55 * execResult[1],
-						2.55 * execResult[2],
-						2.55 * execResult[3],
-						execResult[ 4 ]
-					];
-				}
-			}, {
-				re: /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/,
-				parse: function( execResult ) {
-					return [
-						parseInt( execResult[ 1 ], 16 ),
-						parseInt( execResult[ 2 ], 16 ),
-						parseInt( execResult[ 3 ], 16 )
-					];
-				}
-			}, {
-				re: /#([a-fA-F0-9])([a-fA-F0-9])([a-fA-F0-9])/,
-				parse: function( execResult ) {
-					return [
-						parseInt( execResult[ 1 ] + execResult[ 1 ], 16 ),
-						parseInt( execResult[ 2 ] + execResult[ 2 ], 16 ),
-						parseInt( execResult[ 3 ] + execResult[ 3 ], 16 )
-					];
-				}
-			}, {
-				re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
-				space: 'hsla',
-				parse: function( execResult ) {
-					return [
-						execResult[1]/360,
-						execResult[2] / 100,
-						execResult[3] / 100,
-						execResult[4]
-					];
-				}
-			}
-		],
-		template: '<div class="colorpicker dropdown-menu">'+
-							'<div class="colorpicker-saturation"><i><b></b></i></div>'+
-							'<div class="colorpicker-hue"><i></i></div>'+
-							'<div class="colorpicker-alpha"><i></i></div>'+
-							'<div class="colorpicker-color"><div /></div>'+
-						'</div>'
-	};
-
-}( window.jQuery )

data/lib/generators/templates/app/assets/stylesheets/colorpicker.css

@@ -1,127 +0,0 @@
-/*!
-* Colorpicker for Bootstrap
-*
-* Copyright 2012 Stefan Petre
-* Licensed under the Apache License v2.0
-* http://www.apache.org/licenses/LICENSE-2.0
-*
-*/
-.colorpicker-saturation {
-width: 100px;
-height: 100px;
-background-image: url(/assets/saturation.png);
-cursor: crosshair;
-float: left;
-}
-.colorpicker-saturation i {
-display: block;
-height: 5px;
-width: 5px;
-border: 1px solid #000;
--webkit-border-radius: 5px;
--moz-border-radius: 5px;
-border-radius: 5px;
-position: absolute;
-top: 0;
-left: 0;
-margin: -4px 0 0 -4px;
-}
-.colorpicker-saturation i b {
-display: block;
-height: 5px;
-width: 5px;
-border: 1px solid #fff;
--webkit-border-radius: 5px;
--moz-border-radius: 5px;
-border-radius: 5px;
-}
-.colorpicker-hue, .colorpicker-alpha {
-width: 15px;
-height: 100px;
-float: left;
-cursor: row-resize;
-margin-left: 4px;
-margin-bottom: 4px;
-}
-.colorpicker-hue i, .colorpicker-alpha i {
-display: block;
-height: 1px;
-background: #000;
-border-top: 1px solid #fff;
-position: absolute;
-top: 0;
-left: 0;
-width: 100%;
-margin-top: -1px;
-}
-.colorpicker-hue {
-background-image: url(/assets/hue.png);
-}
-.colorpicker-alpha {
-background-image: url(/assets/alpha.png);
-display: none;
-}
-.colorpicker {
-*zoom: 1;
-top: 0;
-left: 0;
-padding: 4px;
-min-width: 120px;
-margin-top: 1px;
--webkit-border-radius: 4px;
--moz-border-radius: 4px;
-border-radius: 4px;
-}
-.colorpicker:before, .colorpicker:after {
-display: table;
-content: "";
-}
-.colorpicker:after {
-clear: both;
-}
-.colorpicker:before {
-content: '';
-display: inline-block;
-border-left: 7px solid transparent;
-border-right: 7px solid transparent;
-border-bottom: 7px solid #ccc;
-border-bottom-color: rgba(0, 0, 0, 0.2);
-position: absolute;
-top: -7px;
-left: 6px;
-}
-.colorpicker:after {
-content: '';
-display: inline-block;
-border-left: 6px solid transparent;
-border-right: 6px solid transparent;
-border-bottom: 6px solid #ffffff;
-position: absolute;
-top: -6px;
-left: 7px;
-}
-.colorpicker div {
-position: relative;
-}
-.colorpicker.alpha {
-min-width: 140px;
-}
-.colorpicker.alpha .colorpicker-alpha {
-display: block;
-}
-.colorpicker-color {
-height: 10px;
-margin-top: 5px;
-clear: both;
-background-image: url(/assets/alpha.png);
-background-position: 0 100%;
-}
-.colorpicker-color div {
-height: 10px;
-}
-.input-group.color .input-group-addon i, .input-group.color .input-group-addon i {
-display: block;
-cursor: pointer;
-width: 16px;
-height: 16px;
-}