').children().eq(0).css('width',
123 | $(this).children().eq(0).width() // stabilizer
124 | );
125 | this._width = this.offsetWidth;
126 | this._height = this.offsetHeight;
127 | }).hide().
128 | on('touchstart mousedown pointerdown',
129 | '.cp-xy-slider,.cp-z-slider,.cp-alpha', pointerdown);
130 | }
131 |
132 | function pointerdown(e) {
133 | var action = this.className.
134 | replace(/cp-(.*?)(?:\s*|$)/, '$1').replace('-', '_');
135 |
136 | e.preventDefault && e.preventDefault();
137 | e.returnValue = false;
138 |
139 | _$trigger._offset = $(this).offset();
140 | (action = action === 'xy_slider' ? xy_slider :
141 | action === 'z_slider' ? z_slider : alpha)(e);
142 |
143 | $document.on(_pointerup, pointerup).on(_pointermove, action);
144 | }
145 |
146 | function pointerup(e) {
147 | $document.off(_pointermove).off(_pointerup);
148 | }
149 |
150 | function xy_slider(event) {
151 | var e = resolveEventType(event),
152 | x = e.pageX - _$trigger._offset.left,
153 | y = e.pageY - _$trigger._offset.top;
154 |
155 | _color.setColor({
156 | s: x / _$xy_slider._width * 100,
157 | v: 100 - (y / _$xy_slider._height * 100)
158 | }, 'hsv');
159 | preRender();
160 | }
161 |
162 | function z_slider(event) {
163 | var z = resolveEventType(event).pageY - _$trigger._offset.top,
164 | hsv = _color.colors.hsv;
165 |
166 | _color.setColor({h: 360 - (z / _$xy_slider._height * 360)}, 'hsv');
167 | preRender();
168 | }
169 |
170 | function alpha(event) {
171 | var x = resolveEventType(event).pageX - _$trigger._offset.left,
172 | alpha = x / _$alpha._width;
173 |
174 | _color.setColor({}, 'rgb', alpha > 1 ? 1 : alpha < 0 ? 0 : alpha);
175 | preRender();
176 | }
177 |
178 | function preRender(toggled) {
179 | var colors = _color.colors,
180 | hueRGB = colors.hueRGB,
181 | RGB = colors.RND.rgb,
182 | HSL = colors.RND.hsl,
183 | dark = '#222',
184 | light = '#ddd',
185 | colorMode = _$trigger.data('colorMode'),
186 | isAlpha = colors.alpha !== 1,
187 | alpha = Math.round(colors.alpha * 100) / 100,
188 | RGBInnerText = RGB.r + ', ' + RGB.g + ', ' + RGB.b,
189 | text = (colorMode === 'HEX' && !isAlpha ? '#' + colors.HEX :
190 | colorMode === 'rgb' || (colorMode === 'HEX' && isAlpha) ?
191 | (!isAlpha ? 'rgb(' + RGBInnerText + ')' :
192 | 'rgba(' + RGBInnerText + ', ' + alpha + ')') :
193 | ('hsl' + (isAlpha ? 'a(' : '(') + HSL.h + ', ' + HSL.s + '%, ' +
194 | HSL.l + '%' + (isAlpha ? ', ' + alpha : '') + ')')),
195 | HUEContrast = colors.HUELuminance > 0.22 ? dark : light,
196 | alphaContrast = colors.rgbaMixBlack.luminance > 0.22 ? dark : light,
197 | h = (1 - colors.hsv.h) * _$xy_slider._height,
198 | s = colors.hsv.s * _$xy_slider._width,
199 | v = (1 - colors.hsv.v) * _$xy_slider._height,
200 | a = alpha * _$alpha._width,
201 | translate3d = _GPU ? 'translate3d' : '';
202 |
203 | _$xy_slider._css = {
204 | backgroundColor: 'rgb(' +
205 | hueRGB.r + ',' + hueRGB.g + ',' + hueRGB.b + ')'};
206 | _$xy_cursor._css = {
207 | transform: translate3d + '(' + s + 'px, ' + v + 'px, 0)',
208 | left: !_GPU ? s : '',
209 | top: !_GPU ? v : '',
210 | borderColor : colors.RGBLuminance > 0.22 ? dark : light
211 | };
212 | _$z_cursor._css = {
213 | transform: translate3d + '(0, ' + h + 'px, 0)',
214 | top: !_GPU ? h : '',
215 | borderColor : 'transparent ' + HUEContrast
216 | };
217 | _$alpha._css = {backgroundColor: 'rgb(' + RGBInnerText + ')'};
218 | _$alpha_cursor._css = {
219 | transform: translate3d + '(' + a + 'px, 0, 0)',
220 | left: !_GPU ? a : '',
221 | borderColor : alphaContrast + ' transparent'
222 | };
223 | _$trigger._css = {
224 | backgroundColor : text,
225 | color: colors.rgbaMixBGMixCustom.luminance > 0.22 ? dark : light
226 | };
227 | _$trigger.text = _$trigger.val() !== text ? text : '';
228 |
229 | toggled !== undefined ? render(toggled) : _animate(render);
230 | }
231 |
232 | // As _animate() is actually requestAnimationFrame(), render() gets called
233 | // decoupled from any pointer action (whenever the browser decides to do
234 | // so) as an event. preRender() is coupled to toggle() and all pointermove
235 | // actions; that's where all the calculations happen. render() can now be
236 | // called without extra calculations which results in faster rendering.
237 | function render(toggled) {
238 | _$xy_slider.css(_$xy_slider._css);
239 | _$xy_cursor.css(_$xy_cursor._css);
240 | _$z_cursor.css(_$z_cursor._css);
241 | _$alpha.css(_$alpha._css);
242 | _$alpha_cursor.css(_$alpha_cursor._css);
243 |
244 | _options.doRender && _$trigger.css(_$trigger._css);
245 | _$trigger.text && _$trigger.val(_$trigger.text);
246 |
247 | _options.renderCallback.call(
248 | _colorPicker,
249 | _$trigger,
250 | typeof toggled === 'boolean' ? toggled : undefined
251 | );
252 | }
253 |
254 | $.fn.colorPicker = function(options) {
255 | var noop = function(){};
256 |
257 | options = $.extend({
258 | animationSpeed: 150,
259 | GPU: true,
260 | doRender: true,
261 | customBG: '#FFF',
262 | opacity: true,
263 | renderCallback: noop,
264 | buidCallback: noop,
265 | body: document.body,
266 | scrollResize: true,
267 | gap: 4
268 | // css: '',
269 | // cssAddon: '',
270 | // margin: '',
271 | // preventFocus: false
272 | }, options);
273 |
274 | !_colorPicker && options.scrollResize && $(window).
275 | on('resize scroll', function() {
276 | if (_colorPicker.$trigger) {
277 | _colorPicker.toggle.call(_colorPicker.$trigger[0], true);
278 | }
279 | });
280 | _instance = _instance ? _instance.add(this) : this;
281 | _instance.colorPicker = _colorPicker ||
282 | (_colorPicker = new ColorPicker(options));
283 | _selector += (_selector ? ', ' : '') + this.selector;
284 |
285 | $(options.body).off('.a').
286 | on('touchstart.a mousedown.a pointerdown.a', function(e) {
287 | var $target = $(e.target);
288 |
289 | if ($.inArray($target.closest(_selector)[0],
290 | _instance) === -1 &&
291 | !$target.closest(_$UI).length) {
292 | toggle();
293 | }
294 | }).
295 | on('focus.a click.a', _selector, toggle).
296 | on('change.a', _selector, function() {
297 | _color.setColor(this.value);
298 | _instance.colorPicker.render();
299 | });
300 |
301 | return this.each(function() {
302 | var value = extractValue(this),
303 | mode = value.split('('),
304 | $elm = findElement($(this));
305 |
306 | $elm.data('colorMode', mode[1] ? mode[0].substr(0, 3) : 'HEX').
307 | attr('readonly', _options.preventFocus);
308 | options.doRender && $elm.
309 | css({'background-color': value,
310 | 'color': function() {
311 | return _color.setColor(value).
312 | rgbaMixBGMixCustom.luminance > 0.22 ? '#222' : '#ddd'
313 | }
314 | });
315 | });
316 | };
317 | })(window.jQuery, Colors);
--------------------------------------------------------------------------------
/3rd/jquery.text-overflow.js:
--------------------------------------------------------------------------------
1 | (function($) {
2 | $.fn.ellipsis = function(enableUpdating){
3 | var s = document.documentElement.style;
4 | if (!('textOverflow' in s || 'OTextOverflow' in s)) {
5 | return this.each(function(){
6 | var el = $(this);
7 | if(el.css("overflow") == "hidden"){
8 | var originalText = el.html();
9 | var w = el.width();
10 |
11 | var t = $(this.cloneNode(true)).hide().css({
12 | 'position': 'absolute',
13 | 'width': 'auto',
14 | 'overflow': 'visible',
15 | 'max-width': 'inherit'
16 | });
17 | el.after(t);
18 |
19 | var text = originalText;
20 | while(text.length > 0 && t.width() > el.width()){
21 | text = text.substr(0, text.length - 1);
22 | t.html(text + "...");
23 | }
24 | el.html(t.html());
25 |
26 | t.remove();
27 |
28 | if(enableUpdating == true){
29 | var oldW = el.width();
30 | setInterval(function(){
31 | if(el.width() != oldW){
32 | oldW = el.width();
33 | el.html(originalText);
34 | el.ellipsis();
35 | }
36 | }, 200);
37 | }
38 | }
39 | });
40 | } else return this;
41 | };
42 | })(jQuery);
--------------------------------------------------------------------------------
/README.rst:
--------------------------------------------------------------------------------
1 | ======================
2 | JavaScript Experiments
3 | ======================
4 |
5 | Some JavaScript experiments. You can see them online using the links below.
6 | `Google Chrome
`_ is the best browser
7 | for these demos, but `Opera `_ or
8 | Firefox should be fine too.
9 |
10 | `Gray-Scott
25 |
26 |
212 |
');
22 | this.$this = parent.$this.children('.gradient-dragger:last');
23 | this.width = parent.$this.children('.gradient-view').width() - 7;
24 | this.position = position;
25 | this.color = color;
26 | this.dragging = false;
27 | this.moved = false;
28 | this.oldleft = undefined
29 | this.mousedownx = undefined;
30 | this.$this.css("left", this.position*this.width);
31 | this.$this.css("background-color", this.color);
32 |
33 | this.$this.bind("click.dragger", {this : this}, function(event){event.data.this.click(event)});
34 | this.$this.bind("mousedown.dragger", {this : this}, function(event){event.data.this.mousedown(event)});
35 | $(window).bind("mouseup.dragger", {this : this}, function(event){event.data.this.mouseup(event)});
36 | $(window).bind("mousemove.dragger", {this : this}, function(event){event.data.this.mousemove(event)});
37 | }
38 |
39 | Dragger.prototype.click = function(event)
40 | {
41 | if(this.moved)
42 | return;
43 |
44 | var aux = this;
45 | colorPicker.exportColor = function()
46 | {
47 | aux.color = '#' + colorPicker.CP.hex;
48 | aux.$this.css("background-color", aux.color);
49 | aux.parent.redraw();
50 | };
51 |
52 | colorPicker.expColor = false;
53 | colorPicker.expHEX = false;
54 | colorPicker.mode = 'H';
55 | colorPicker.objs = this.color;
56 | colorPicker(event);
57 | }
58 |
59 | Dragger.prototype.mousedown = function(event)
60 | {
61 | this.oldleft = parseInt(this.$this.css("left"), 10);
62 | this.mousedownx = event.pageX;
63 | this.dragging = true;
64 | this.moved = false;
65 | }
66 |
67 | Dragger.prototype.mouseup = function(event)
68 | {
69 | this.dragging = false;
70 | }
71 |
72 | Dragger.prototype.mousemove = function(event)
73 | {
74 | if(!this.dragging)
75 | return;
76 |
77 | var diff = event.pageX - this.mousedownx;
78 | var newleft = clamp(this.oldleft + diff, 0, this.width);
79 |
80 | this.position = newleft / this.width;
81 | this.$this.css("left", newleft);
82 | this.parent.redraw();
83 |
84 | this.moved = true;
85 | }
86 |
87 | Dragger.prototype.setPosition = function(pos)
88 | {
89 | pos = clamp(pos, 0.0, 1.0);
90 | var newleft = pos*this.width;
91 |
92 | this.$this.css("left", newleft);
93 | this.position = pos;
94 | }
95 |
96 | Dragger.prototype.setColor = function(color)
97 | {
98 | this.color = color;
99 | this.$this.css("background-color", color);
100 | this.parent.redraw();
101 | }
102 |
103 | var Gradient = function(parent, values)
104 | {
105 | this.$this = parent;
106 |
107 | // Disable selection.
108 | this.$this.get(0).onselectstart = function(){return false;};
109 |
110 | this.$this.css("position", "relative");
111 | this.width = this.$this.width();
112 | this.height = this.$this.height();
113 | this.$this.append('
2 |
3 |
4 | Gradient widget
6 |
2 |
3 |
4 | Reaction diffusion simulation
5 |
158 | Gray-Scott model with image-based feed rate (alpha)
159 |
160 |
184 |
192 |
193 |
194 |
This simulation requires the GL extensions framebuffer_object and texture_float.
195 | If you cannot see the simulation your system probably lacks at least one of these extensions.
196 |
197 |
In Google Chrome, you can see the available GL extensions going to chrome://gpu.
198 |
Mass-spring simulation
5 |
20 | Mass-spring simulation
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | Change the scene with the controls below.
29 | Use the
30 | to drag particles.
31 | Use the
32 | to pin/unpin particles.
33 |
34 |
35 |