Browse Source

Minor updates

 - minor optimizations
 - added options ‘dark’ and ‘light’
tags/1.1.0
peterd 3 years ago
parent
commit
cd0e084ceb
7 changed files with 31 additions and 30 deletions
  1. 2
    0
      README.md
  2. 3
    3
      index.html
  3. 2
    2
      index.js
  4. 20
    21
      jqColorPicker.js
  5. 1
    1
      jqColorPicker.js.map
  6. 2
    2
      jqColorPicker.min.js
  7. 1
    1
      package.json

+ 2
- 0
README.md View File

@@ -54,6 +54,8 @@ $('.color').colorPicker({
54 54
     margin: '', // positioning margin (can also be set in cssAddon)
55 55
     scrollResize: true // toggle for reposition colorPicker on window.resize/scroll
56 56
     gap: 4 // gap to right and bottom edge of view port if repositioned to fit
57
+    dark: '#222' // default font color if background is light
58
+    light: '#DDD' // default font color if background is dark
57 59
     preventFocus: false // prevents default on focus of input fields (e.g. no keyboard on mobile)
58 60
     body: document.body // the element where the events are attached to (touchstart, mousedown, pointerdown, focus, click, change),
59 61
     forceAlpha: // force printing alpha channel (undefined = auto; false = never print alpha)

+ 3
- 3
index.html View File

@@ -73,7 +73,7 @@ As Tiny jQuery colorPicker uses <a href="https://github.com/PitPik/colorPicker/b
73 73
 <pre style="display: block; overflow: auto;">
74 74
 window.myColorPicker = $('input.color').colorPicker({
75 75
     buildCallback: function($elm) {
76
-        $elm.prepend('&lt;div class="cp-disp">&lt;/div>');
76
+        this.$colorPatch = $elm.prepend('&lt;div class="cp-disp">').find('.cp-disp');
77 77
     },
78 78
     cssAddon:
79 79
         '.cp-disp {padding:10px; margin-bottom:6px; font-size:19px; height:20px; line-height:20px}' +
@@ -87,10 +87,10 @@ window.myColorPicker = $('input.color').colorPicker({
87 87
     renderCallback: function($elm, toggled) {
88 88
         var colors = this.color.colors;
89 89
 
90
-        $('.cp-disp').css({
90
+        this.$colorPatch.css({
91 91
             backgroundColor: '#' + colors.HEX,
92 92
             color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
93
-        }).text(this.color.toString($elm._colorMode));
93
+        }).text(this.color.toString($elm._colorMode)); // $elm.val();
94 94
     }
95 95
 });
96 96
 </pre>

+ 2
- 2
index.js View File

@@ -28,7 +28,7 @@
28 28
 
29 29
 		// demo on how to make plugins... mobile support plugin
30 30
 		buildCallback: function($elm) {
31
-			$elm.prepend('<div class="cp-disp"></div>');
31
+			this.$colorPatch = $elm.prepend('<div class="cp-disp">').find('.cp-disp');
32 32
 			$('.color').on('click', function(e) {
33 33
 				e.preventDefault && e.preventDefault();
34 34
 			});
@@ -45,7 +45,7 @@
45 45
 		renderCallback: function($elm, toggled) {
46 46
 			var colors = this.color.colors;
47 47
 
48
-			$('.cp-disp').css({
48
+			this.$colorPatch.css({
49 49
 				backgroundColor: '#' + colors.HEX,
50 50
 				color: colors.RGBLuminance > 0.22 ? '#222' : '#ddd'
51 51
 			}).text(this.color.toString($elm._colorMode)); // $elm.val();

+ 20
- 21
jqColorPicker.js View File

@@ -25,7 +25,6 @@
25 25
         _pointerdown = 'touchstart.tcp mousedown.tcp pointerdown.tcp',
26 26
         _pointerup = 'touchend.tcp mouseup.tcp pointerup.tcp',
27 27
         _GPU = false,
28
-        _round = Math.round,
29 28
         _animate = window.requestAnimationFrame ||
30 29
             window.webkitRequestAnimationFrame || function(cb){cb()},
31 30
         _html = '<div class="cp-color-picker"><div class="cp-z-slider"><div c' +
@@ -92,15 +91,14 @@
92 91
             _colorPicker.$trigger = $this;
93 92
 
94 93
             (_$UI || build()).css({
95
-                // 'width': _$UI[0]._width,
96
-                'left': (_$UI[0]._left = position.left) -
97
-                    ((_$UI[0]._left += _$UI[0]._width -
94
+                'left': (_$UI._left = position.left) -
95
+                    ((_$UI._left += _$UI._width -
98 96
                     ($window.scrollLeft() + $window.width())) + gap > 0 ?
99
-                    _$UI[0]._left + gap : 0),
100
-                'top': (_$UI[0]._top = position.top + $this.outerHeight()) -
101
-                    ((_$UI[0]._top += _$UI[0]._height -
97
+                    _$UI._left + gap : 0),
98
+                'top': (_$UI._top = position.top + $this.outerHeight()) -
99
+                    ((_$UI._top += _$UI._height -
102 100
                     ($window.scrollTop() + $window.height())) + gap > 0 ?
103
-                    _$UI[0]._top + gap : 0)
101
+                    _$UI._top + gap : 0)
104 102
             }).show(_options.animationSpeed, function() {
105 103
                 if (event === true) { // resize, scroll
106 104
                     return;
@@ -127,25 +125,23 @@
127 125
         $('head').append('<style type="text/css" id="tinyColorPickerStyles">' +
128 126
             (_options.css || _css) + (_options.cssAddon || '') + '</style>');
129 127
 
130
-        return _colorPicker.$UI = _$UI =
131
-            $(_html).css({'margin': _options.margin})
128
+        return $(_html).css({'margin': _options.margin})
132 129
             .appendTo('body')
133 130
             .show(0, function() {
134
-                var $this = $(this);
131
+                _colorPicker.$UI = _$UI = $(this);
135 132
 
136
-                _GPU = _options.GPU && $this.css('perspective') !== undefined;
133
+                _GPU = _options.GPU && _$UI.css('perspective') !== undefined;
137 134
                 _$z_slider = $('.cp-z-slider', this);
138 135
                 _$xy_slider = $('.cp-xy-slider', this);
139 136
                 _$xy_cursor = $('.cp-xy-cursor', this);
140 137
                 _$z_cursor = $('.cp-z-cursor', this);
141 138
                 _$alpha = $('.cp-alpha', this);
142 139
                 _$alpha_cursor = $('.cp-alpha-cursor', this);
143
-                _options.buildCallback.call(_colorPicker, $this);
144
-                $this.prepend('<div>').children().eq(0).css('width',
145
-                    $this.children().eq(0).width() // stabilizer
146
-                );
147
-                this._width = this.offsetWidth;
148
-                this._height = this.offsetHeight;
140
+                _options.buildCallback.call(_colorPicker, _$UI);
141
+                _$UI.prepend('<div>').children().eq(0).css('width',
142
+                    _$UI.children().eq(0).width()); // stabilizer
143
+                _$UI._width = this.offsetWidth;
144
+                _$UI._height = this.offsetHeight;
149 145
             }).hide();
150 146
     }
151 147
 
@@ -201,8 +197,8 @@
201 197
             hueRGB = colors.hueRGB,
202 198
             RGB = colors.RND.rgb,
203 199
             HSL = colors.RND.hsl,
204
-            dark = '#222',
205
-            light = '#ddd',
200
+            dark = _options.dark,
201
+            light = _options.light,
206 202
             colorText = _color.toString(_$trigger._colorMode, _options.forceAlpha),
207 203
             HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
208 204
             alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
@@ -282,6 +278,8 @@
282 278
             body: document.body,
283 279
             scrollResize: true,
284 280
             gap: 4,
281
+            dark: '#222',
282
+            light: '#DDD'
285 283
             // forceAlpha: undefined,
286 284
             // css: '',
287 285
             // cssAddon: '',
@@ -324,7 +322,8 @@
324 322
             $elm.css({'background-color': value,
325 323
                 'color': function() {
326 324
                     return _color.setColor(value)
327
-                        .rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#DDD'
325
+                        .rgbaMixBGMixCustom.luminance > 0.22 ?
326
+                        options.dark : options.light
328 327
                 }
329 328
             });
330 329
         });

+ 1
- 1
jqColorPicker.js.map
File diff suppressed because it is too large
View File


+ 2
- 2
jqColorPicker.min.js
File diff suppressed because it is too large
View File


+ 1
- 1
package.json View File

@@ -1,6 +1,6 @@
1 1
 {
2 2
   "name": "tinyColorPicker",
3
-  "version": "1.0.7",
3
+  "version": "1.0.8",
4 4
   "repository": {
5 5
     "type": "git",
6 6
     "url": "http://github.com/PitPik/tinyColorPicker.git"

Loading…
Cancel
Save