Skip to content

Commit 5e5d107

Browse files
disjukrdisjukr
committed
First commit
0 parents  commit 5e5d107

File tree

3 files changed

+215
-0
lines changed

3 files changed

+215
-0
lines changed

‎HSBRect.js

+91
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
1+
var HSBRect = (function () {
2+
function HSBRect(width, height) {
3+
if (typeof width === "undefined") { width = 0x80; }
4+
if (typeof height === "undefined") { height = 0x80; }
5+
this._hue = 0;
6+
this._sa = document.createElement('canvas');
7+
this._sa.height = 1;
8+
this._sa.style.setProperty('position', 'absolute');
9+
this._br = document.createElement('canvas');
10+
this._br.width = 1;
11+
this._br.style.setProperty('position', 'absolute');
12+
this._div = document.createElement('div');
13+
this._div.style.setProperty('background-color', 'white');
14+
this._div.appendChild(this._sa);
15+
this._div.appendChild(this._br);
16+
this.width = width;
17+
this.height = height;
18+
}
19+
HSBRect.prototype._renderSa = function () {
20+
var ctx = this._sa.getContext('2d');
21+
var grad = ctx.createLinearGradient(0, 0, this._sa.width, 1);
22+
var c = 'hsla(' + this._hue + ',100%,50%,';
23+
grad.addColorStop(0, c + '0)');
24+
grad.addColorStop(1, c + '1)');
25+
ctx.fillStyle = grad;
26+
ctx.clearRect(0, 0, this._sa.width, 1);
27+
ctx.fillRect(0, 0, this._sa.width, 1);
28+
};
29+
HSBRect.prototype._renderBr = function () {
30+
var ctx = this._br.getContext('2d');
31+
var grad = ctx.createLinearGradient(0, 0, 1, this._br.height);
32+
grad.addColorStop(0, 'rgba(0,0,0,0)');
33+
grad.addColorStop(1, 'black');
34+
ctx.fillStyle = grad;
35+
ctx.clearRect(0, 0, 1, this._br.height);
36+
ctx.fillRect(0, 0, 1, this._br.height);
37+
};
38+
HSBRect.prototype._size = function () {
39+
var w = this._sa.width + 'px';
40+
var h = this._br.height + 'px';
41+
this._div.style.setProperty('width', w);
42+
this._div.style.setProperty('height', h);
43+
this._sa.style.setProperty('width', w);
44+
this._sa.style.setProperty('height', h);
45+
this._br.style.setProperty('width', w);
46+
this._br.style.setProperty('height', h);
47+
};
48+
Object.defineProperty(HSBRect.prototype, "DOMElement", {
49+
get: function () {
50+
return this._div;
51+
},
52+
enumerable: true,
53+
configurable: true
54+
});
55+
Object.defineProperty(HSBRect.prototype, "hue", {
56+
get: function () {
57+
return this._hue;
58+
},
59+
set: function (value) {
60+
this._hue = value;
61+
this._renderSa();
62+
},
63+
enumerable: true,
64+
configurable: true
65+
});
66+
Object.defineProperty(HSBRect.prototype, "width", {
67+
get: function () {
68+
return this._sa.width;
69+
},
70+
set: function (value) {
71+
this._sa.width = value;
72+
this._size();
73+
this._renderSa();
74+
},
75+
enumerable: true,
76+
configurable: true
77+
});
78+
Object.defineProperty(HSBRect.prototype, "height", {
79+
get: function () {
80+
return this._br.height;
81+
},
82+
set: function (value) {
83+
this._br.height = value;
84+
this._size();
85+
this._renderBr();
86+
},
87+
enumerable: true,
88+
configurable: true
89+
});
90+
return HSBRect;
91+
})();

‎HSBRect.ts

+76
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
class HSBRect {
2+
constructor(width: number = 0x80, height: number = 0x80) {
3+
this._hue = 0;
4+
this._sa = document.createElement('canvas');
5+
this._sa.height = 1;
6+
this._sa.style.setProperty('position', 'absolute');
7+
this._br = document.createElement('canvas');
8+
this._br.width = 1;
9+
this._br.style.setProperty('position', 'absolute');
10+
this._div = document.createElement('div');
11+
this._div.style.setProperty('background-color', 'white');
12+
this._div.appendChild(this._sa);
13+
this._div.appendChild(this._br);
14+
this.width = width;
15+
this.height = height;
16+
}
17+
private _hue;
18+
private _sa;
19+
private _br;
20+
private _div;
21+
private _renderSa(): void {
22+
var ctx = this._sa.getContext('2d');
23+
var grad = ctx.createLinearGradient(0, 0, this._sa.width, 1);
24+
var c = 'hsla(' + this._hue + ',100%,50%,';
25+
grad.addColorStop(0, c + '0)');
26+
grad.addColorStop(1, c + '1)');
27+
ctx.fillStyle = grad;
28+
ctx.clearRect(0, 0, this._sa.width, 1);
29+
ctx.fillRect(0, 0, this._sa.width, 1);
30+
}
31+
private _renderBr(): void {
32+
var ctx = this._br.getContext('2d');
33+
var grad = ctx.createLinearGradient(0, 0, 1, this._br.height);
34+
grad.addColorStop(0, 'rgba(0,0,0,0)');
35+
grad.addColorStop(1, 'black');
36+
ctx.fillStyle = grad;
37+
ctx.clearRect(0, 0, 1, this._br.height);
38+
ctx.fillRect(0, 0, 1, this._br.height);
39+
}
40+
private _size(): void {
41+
var w = this._sa.width + 'px';
42+
var h = this._br.height + 'px';
43+
this._div.style.setProperty('width', w);
44+
this._div.style.setProperty('height', h);
45+
this._sa.style.setProperty('width', w);
46+
this._sa.style.setProperty('height', h);
47+
this._br.style.setProperty('width', w);
48+
this._br.style.setProperty('height', h);
49+
}
50+
get DOMElement() {
51+
return this._div;
52+
}
53+
get hue(): number {
54+
return this._hue;
55+
}
56+
set hue(value: number) {
57+
this._hue = value;
58+
this._renderSa();
59+
}
60+
get width(): number {
61+
return this._sa.width;
62+
}
63+
set width(value: number) {
64+
this._sa.width = value;
65+
this._size();
66+
this._renderSa();
67+
}
68+
get height(): number {
69+
return this._br.height;
70+
}
71+
set height(value: number) {
72+
this._br.height = value;
73+
this._size();
74+
this._renderBr();
75+
}
76+
}

‎README.md

+48
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
HSBRect
2+
=======
3+
4+
to make hsb color picker ui.
5+
6+
7+
Usage
8+
-----
9+
10+
```javascript
11+
var rect = new HSBRect;
12+
document.body.appendChild(rect.DOMElement);
13+
rect.width = 100;
14+
rect.height = 100;
15+
rect.hue = 180;
16+
```
17+
18+
19+
How to build
20+
------------
21+
22+
tsc HSBRect.ts -t es5
23+
24+
25+
License
26+
-------
27+
28+
The MIT License (MIT)
29+
30+
Copyright (c) 2013, JongChan Choi
31+
32+
Permission is hereby granted, free of charge, to any person obtaining a copy
33+
of this software and associated documentation files (the "Software"), to deal
34+
in the Software without restriction, including without limitation the rights
35+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
36+
copies of the Software, and to permit persons to whom the Software is
37+
furnished to do so, subject to the following conditions:
38+
39+
The above copyright notice and this permission notice shall be included in
40+
all copies or substantial portions of the Software.
41+
42+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
43+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
44+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
45+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
46+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
47+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
48+
THE SOFTWARE.

0 commit comments

Comments
 (0)