Page Menu
Home
Phorge
Search
Configure Global Search
Log In
Files
F6063469
jquery.miniColors.min.js
No One
Temporary
Actions
Download File
Edit File
Delete File
View Transforms
Subscribe
Flag For Later
Award Token
Size
9 KB
Referenced Files
None
Subscribers
None
jquery.miniColors.min.js
View Options
// http://plugins.jquery.com/project/jQueryMiniColors
if
(
jQuery
)(
function
(
$
){
$
.
extend
(
$
.
fn
,{
miniColors
:
function
(
o
,
data
){
var
create
=
function
(
input
,
o
,
data
){
var
color
=
cleanHex
(
input
.
val
());
if
(
!
color
)
color
=
'FFFFFF'
;
var
hsb
=
hex2hsb
(
color
);
var
trigger
=
$
(
'<a class="miniColors-trigger" style="background-color: #'
+
color
+
'" href="#"></a>'
);
trigger
.
insertAfter
(
input
);
input
.
addClass
(
'miniColors'
).
attr
(
'maxlength'
,
7
).
attr
(
'autocomplete'
,
'off'
);
input
.
data
(
'trigger'
,
trigger
);
input
.
data
(
'hsb'
,
hsb
);
if
(
o
.
change
)
input
.
data
(
'change'
,
o
.
change
);
if
(
o
.
readonly
)
input
.
attr
(
'readonly'
,
true
);
if
(
o
.
disabled
)
disable
(
input
);
trigger
.
bind
(
'click.miniColors'
,
function
(
event
){
event
.
preventDefault
();
input
.
trigger
(
'focus'
);});
input
.
bind
(
'focus.miniColors'
,
function
(
event
){
show
(
input
);});
input
.
bind
(
'blur.miniColors'
,
function
(
event
){
var
hex
=
cleanHex
(
input
.
val
());
input
.
val
(
hex
?
'#'
+
hex
:
''
);});
input
.
bind
(
'keydown.miniColors'
,
function
(
event
){
if
(
event
.
keyCode
===
9
)
hide
(
input
);});
input
.
bind
(
'keyup.miniColors'
,
function
(
event
){
var
filteredHex
=
input
.
val
().
replace
(
/[^A-F0-9#]/ig
,
''
);
input
.
val
(
filteredHex
);
if
(
!
setColorFromInput
(
input
)){
input
.
data
(
'trigger'
).
css
(
'backgroundColor'
,
'#FFF'
);}});
input
.
bind
(
'paste.miniColors'
,
function
(
event
){
setTimeout
(
function
(){
input
.
trigger
(
'keyup'
);},
5
);});};
var
destroy
=
function
(
input
){
hide
();
input
=
$
(
input
);
input
.
data
(
'trigger'
).
remove
();
input
.
removeAttr
(
'autocomplete'
);
input
.
removeData
(
'trigger'
);
input
.
removeData
(
'selector'
);
input
.
removeData
(
'hsb'
);
input
.
removeData
(
'huePicker'
);
input
.
removeData
(
'colorPicker'
);
input
.
removeData
(
'mousebutton'
);
input
.
removeData
(
'moving'
);
input
.
unbind
(
'click.miniColors'
);
input
.
unbind
(
'focus.miniColors'
);
input
.
unbind
(
'blur.miniColors'
);
input
.
unbind
(
'keyup.miniColors'
);
input
.
unbind
(
'keydown.miniColors'
);
input
.
unbind
(
'paste.miniColors'
);
$
(
document
).
unbind
(
'mousedown.miniColors'
);
$
(
document
).
unbind
(
'mousemove.miniColors'
);};
var
enable
=
function
(
input
){
input
.
attr
(
'disabled'
,
false
);
input
.
data
(
'trigger'
).
css
(
'opacity'
,
1
);};
var
disable
=
function
(
input
){
hide
(
input
);
input
.
attr
(
'disabled'
,
true
);
input
.
data
(
'trigger'
).
css
(
'opacity'
,
.5
);};
var
show
=
function
(
input
){
if
(
input
.
attr
(
'disabled'
))
return
false
;
hide
();
var
selector
=
$
(
'<div class="miniColors-selector"></div>'
);
selector
.
append
(
'<div class="miniColors-colors" style="background-color: #FFF;"><div class="miniColors-colorPicker"></div></div>'
);
selector
.
append
(
'<div class="miniColors-hues"><div class="miniColors-huePicker"></div></div>'
);
selector
.
css
({
top
:
input
.
is
(
':visible'
)
?
input
.
offset
().
top
+
input
.
outerHeight
()
:
input
.
data
(
'trigger'
).
offset
().
top
+
input
.
data
(
'trigger'
).
outerHeight
(),
left
:
input
.
is
(
':visible'
)
?
input
.
offset
().
left
:
input
.
data
(
'trigger'
).
offset
().
left
,
display
:
'none'
}).
addClass
(
input
.
attr
(
'class'
));
var
hsb
=
input
.
data
(
'hsb'
);
selector
.
find
(
'.miniColors-colors'
).
css
(
'backgroundColor'
,
'#'
+
hsb2hex
({
h
:
hsb
.
h
,
s
:
100
,
b
:
100
}));
var
colorPosition
=
input
.
data
(
'colorPosition'
);
if
(
!
colorPosition
)
colorPosition
=
getColorPositionFromHSB
(
hsb
);
selector
.
find
(
'.miniColors-colorPicker'
).
css
(
'top'
,
colorPosition
.
y
+
'px'
).
css
(
'left'
,
colorPosition
.
x
+
'px'
);
var
huePosition
=
input
.
data
(
'huePosition'
);
if
(
!
huePosition
)
huePosition
=
getHuePositionFromHSB
(
hsb
);
selector
.
find
(
'.miniColors-huePicker'
).
css
(
'top'
,
huePosition
.
y
+
'px'
);
input
.
data
(
'selector'
,
selector
);
input
.
data
(
'huePicker'
,
selector
.
find
(
'.miniColors-huePicker'
));
input
.
data
(
'colorPicker'
,
selector
.
find
(
'.miniColors-colorPicker'
));
input
.
data
(
'mousebutton'
,
0
);
$
(
'BODY'
).
append
(
selector
);
selector
.
fadeIn
(
100
);
selector
.
bind
(
'selectstart'
,
function
(){
return
false
;});
$
(
document
).
bind
(
'mousedown.miniColors'
,
function
(
event
){
input
.
data
(
'mousebutton'
,
1
);
if
(
$
(
event
.
target
).
parents
().
andSelf
().
hasClass
(
'miniColors-colors'
)){
event
.
preventDefault
();
input
.
data
(
'moving'
,
'colors'
);
moveColor
(
input
,
event
);}
if
(
$
(
event
.
target
).
parents
().
andSelf
().
hasClass
(
'miniColors-hues'
)){
event
.
preventDefault
();
input
.
data
(
'moving'
,
'hues'
);
moveHue
(
input
,
event
);}
if
(
$
(
event
.
target
).
parents
().
andSelf
().
hasClass
(
'miniColors-selector'
)){
event
.
preventDefault
();
return
;}
if
(
$
(
event
.
target
).
parents
().
andSelf
().
hasClass
(
'miniColors'
))
return
;
hide
(
input
);});
$
(
document
).
bind
(
'mouseup.miniColors'
,
function
(
event
){
input
.
data
(
'mousebutton'
,
0
);
input
.
removeData
(
'moving'
);});
$
(
document
).
bind
(
'mousemove.miniColors'
,
function
(
event
){
if
(
input
.
data
(
'mousebutton'
)
===
1
){
if
(
input
.
data
(
'moving'
)
===
'colors'
)
moveColor
(
input
,
event
);
if
(
input
.
data
(
'moving'
)
===
'hues'
)
moveHue
(
input
,
event
);}});};
var
hide
=
function
(
input
){
if
(
!
input
)
input
=
'.miniColors'
;
$
(
input
).
each
(
function
(){
var
selector
=
$
(
this
).
data
(
'selector'
);
$
(
this
).
removeData
(
'selector'
);
$
(
selector
).
fadeOut
(
100
,
function
(){
$
(
this
).
remove
();});});
$
(
document
).
unbind
(
'mousedown.miniColors'
);
$
(
document
).
unbind
(
'mousemove.miniColors'
);};
var
moveColor
=
function
(
input
,
event
){
var
colorPicker
=
input
.
data
(
'colorPicker'
);
colorPicker
.
hide
();
var
position
=
{
x
:
event
.
clientX
-
input
.
data
(
'selector'
).
find
(
'.miniColors-colors'
).
offset
().
left
+
$
(
document
).
scrollLeft
()
-
5
,
y
:
event
.
clientY
-
input
.
data
(
'selector'
).
find
(
'.miniColors-colors'
).
offset
().
top
+
$
(
document
).
scrollTop
()
-
5
};
if
(
position
.
x
<=-
5
)
position
.
x
=-
5
;
if
(
position
.
x
>=
144
)
position
.
x
=
144
;
if
(
position
.
y
<=-
5
)
position
.
y
=-
5
;
if
(
position
.
y
>=
144
)
position
.
y
=
144
;
input
.
data
(
'colorPosition'
,
position
);
colorPicker
.
css
(
'left'
,
position
.
x
).
css
(
'top'
,
position
.
y
).
show
();
var
s
=
Math
.
round
((
position
.
x
+
5
)
*
.67
);
if
(
s
<
0
)
s
=
0
;
if
(
s
>
100
)
s
=
100
;
var
b
=
100
-
Math
.
round
((
position
.
y
+
5
)
*
.67
);
if
(
b
<
0
)
b
=
0
;
if
(
b
>
100
)
b
=
100
;
var
hsb
=
input
.
data
(
'hsb'
);
hsb
.
s
=
s
;
hsb
.
b
=
b
;
setColor
(
input
,
hsb
,
true
);};
var
moveHue
=
function
(
input
,
event
){
var
huePicker
=
input
.
data
(
'huePicker'
);
huePicker
.
hide
();
var
position
=
{
y
:
event
.
clientY
-
input
.
data
(
'selector'
).
find
(
'.miniColors-colors'
).
offset
().
top
+
$
(
document
).
scrollTop
()
-
1
};
if
(
position
.
y
<=-
1
)
position
.
y
=-
1
;
if
(
position
.
y
>=
149
)
position
.
y
=
149
;
input
.
data
(
'huePosition'
,
position
);
huePicker
.
css
(
'top'
,
position
.
y
).
show
();
var
h
=
Math
.
round
((
150
-
position
.
y
-
1
)
*
2.4
);
if
(
h
<
0
)
h
=
0
;
if
(
h
>
360
)
h
=
360
;
var
hsb
=
input
.
data
(
'hsb'
);
hsb
.
h
=
h
;
setColor
(
input
,
hsb
,
true
);};
var
setColor
=
function
(
input
,
hsb
,
updateInputValue
){
input
.
data
(
'hsb'
,
hsb
);
var
hex
=
hsb2hex
(
hsb
);
if
(
updateInputValue
)
input
.
val
(
'#'
+
hex
);
input
.
data
(
'trigger'
).
css
(
'backgroundColor'
,
'#'
+
hex
);
if
(
input
.
data
(
'selector'
))
input
.
data
(
'selector'
).
find
(
'.miniColors-colors'
).
css
(
'backgroundColor'
,
'#'
+
hsb2hex
({
h
:
hsb
.
h
,
s
:
100
,
b
:
100
}));
if
(
input
.
data
(
'change'
)){
input
.
data
(
'change'
).
call
(
input
,
'#'
+
hex
,
hsb2rgb
(
hsb
));}};
var
setColorFromInput
=
function
(
input
){
var
hex
=
cleanHex
(
input
.
val
());
if
(
!
hex
)
return
false
;
var
hsb
=
hex2hsb
(
hex
);
var
currentHSB
=
input
.
data
(
'hsb'
);
if
(
hsb
.
h
===
currentHSB
.
h
&&
hsb
.
s
===
currentHSB
.
s
&&
hsb
.
b
===
currentHSB
.
b
)
return
true
;
var
colorPosition
=
getColorPositionFromHSB
(
hsb
);
var
colorPicker
=
$
(
input
.
data
(
'colorPicker'
));
colorPicker
.
css
(
'top'
,
colorPosition
.
y
+
'px'
).
css
(
'left'
,
colorPosition
.
x
+
'px'
);
var
huePosition
=
getHuePositionFromHSB
(
hsb
);
var
huePicker
=
$
(
input
.
data
(
'huePicker'
));
huePicker
.
css
(
'top'
,
huePosition
.
y
+
'px'
);
setColor
(
input
,
hsb
,
false
);
return
true
;};
var
getColorPositionFromHSB
=
function
(
hsb
){
var
x
=
Math
.
ceil
(
hsb
.
s
/
.67
);
if
(
x
<
0
)
x
=
0
;
if
(
x
>
150
)
x
=
150
;
var
y
=
150
-
Math
.
ceil
(
hsb
.
b
/
.67
);
if
(
y
<
0
)
y
=
0
;
if
(
y
>
150
)
y
=
150
;
return
{
x
:
x
-
5
,
y
:
y
-
5
};}
var
getHuePositionFromHSB
=
function
(
hsb
){
var
y
=
150
-
(
hsb
.
h
/
2.4
);
if
(
y
<
0
)
h
=
0
;
if
(
y
>
150
)
h
=
150
;
return
{
y
:
y
-
1
};}
var
cleanHex
=
function
(
hex
){
hex
=
hex
.
replace
(
/[^A-Fa-f0-9]/
,
''
);
if
(
hex
.
length
==
3
){
hex
=
hex
[
0
]
+
hex
[
0
]
+
hex
[
1
]
+
hex
[
1
]
+
hex
[
2
]
+
hex
[
2
];}
return
hex
.
length
===
6
?
hex
:
null
;};
var
hsb2rgb
=
function
(
hsb
){
var
rgb
=
{};
var
h
=
Math
.
round
(
hsb
.
h
);
var
s
=
Math
.
round
(
hsb
.
s
*
255
/
100
);
var
v
=
Math
.
round
(
hsb
.
b
*
255
/
100
);
if
(
s
==
0
){
rgb
.
r
=
rgb
.
g
=
rgb
.
b
=
v
;}
else
{
var
t1
=
v
;
var
t2
=
(
255
-
s
)
*
v
/
255
;
var
t3
=
(
t1
-
t2
)
*
(
h
%
60
)
/
60
;
if
(
h
==
360
)
h
=
0
;
if
(
h
<
60
){
rgb
.
r
=
t1
;
rgb
.
b
=
t2
;
rgb
.
g
=
t2
+
t3
;}
else
if
(
h
<
120
){
rgb
.
g
=
t1
;
rgb
.
b
=
t2
;
rgb
.
r
=
t1
-
t3
;}
else
if
(
h
<
180
){
rgb
.
g
=
t1
;
rgb
.
r
=
t2
;
rgb
.
b
=
t2
+
t3
;}
else
if
(
h
<
240
){
rgb
.
b
=
t1
;
rgb
.
r
=
t2
;
rgb
.
g
=
t1
-
t3
;}
else
if
(
h
<
300
){
rgb
.
b
=
t1
;
rgb
.
g
=
t2
;
rgb
.
r
=
t2
+
t3
;}
else
if
(
h
<
360
){
rgb
.
r
=
t1
;
rgb
.
g
=
t2
;
rgb
.
b
=
t1
-
t3
;}
else
{
rgb
.
r
=
0
;
rgb
.
g
=
0
;
rgb
.
b
=
0
;}}
return
{
r
:
Math
.
round
(
rgb
.
r
),
g
:
Math
.
round
(
rgb
.
g
),
b
:
Math
.
round
(
rgb
.
b
)};};
var
rgb2hex
=
function
(
rgb
){
var
hex
=
[
rgb
.
r
.
toString
(
16
),
rgb
.
g
.
toString
(
16
),
rgb
.
b
.
toString
(
16
)];
$
.
each
(
hex
,
function
(
nr
,
val
){
if
(
val
.
length
==
1
)
hex
[
nr
]
=
'0'
+
val
;});
return
hex
.
join
(
''
);};
var
hex2rgb
=
function
(
hex
){
var
hex
=
parseInt
(((
hex
.
indexOf
(
'#'
)
>-
1
)
?
hex
.
substring
(
1
)
:
hex
),
16
);
return
{
r
:
hex
>>
16
,
g
:
(
hex
&
0x00FF00
)
>>
8
,
b
:
(
hex
&
0x0000FF
)};};
var
rgb2hsb
=
function
(
rgb
){
var
hsb
=
{
h
:
0
,
s
:
0
,
b
:
0
};
var
min
=
Math
.
min
(
rgb
.
r
,
rgb
.
g
,
rgb
.
b
);
var
max
=
Math
.
max
(
rgb
.
r
,
rgb
.
g
,
rgb
.
b
);
var
delta
=
max
-
min
;
hsb
.
b
=
max
;
hsb
.
s
=
max
!=
0
?
255
*
delta
/
max
:
0
;
if
(
hsb
.
s
!=
0
){
if
(
rgb
.
r
==
max
){
hsb
.
h
=
(
rgb
.
g
-
rgb
.
b
)
/
delta
;}
else
if
(
rgb
.
g
==
max
){
hsb
.
h
=
2
+
(
rgb
.
b
-
rgb
.
r
)
/
delta
;}
else
{
hsb
.
h
=
4
+
(
rgb
.
r
-
rgb
.
g
)
/
delta
;}}
else
{
hsb
.
h
=-
1
;}
hsb
.
h
*=
60
;
if
(
hsb
.
h
<
0
){
hsb
.
h
+=
360
;}
hsb
.
s
*=
100
/
255
;
hsb
.
b
*=
100
/
255
;
return
hsb
;};
var
hex2hsb
=
function
(
hex
){
var
hsb
=
rgb2hsb
(
hex2rgb
(
hex
));
if
(
hsb
.
s
===
0
)
hsb
.
h
=
360
;
return
hsb
;};
var
hsb2hex
=
function
(
hsb
){
return
rgb2hex
(
hsb2rgb
(
hsb
));};
switch
(
o
){
case
'readonly'
:
$
(
this
).
each
(
function
(){
$
(
this
).
attr
(
'readonly'
,
data
);});
return
$
(
this
);
break
;
case
'disabled'
:
$
(
this
).
each
(
function
(){
if
(
data
){
disable
(
$
(
this
));}
else
{
enable
(
$
(
this
));}});
return
$
(
this
);
case
'value'
:
$
(
this
).
each
(
function
(){
$
(
this
).
val
(
data
).
trigger
(
'keyup'
);});
return
$
(
this
);
break
;
case
'destroy'
:
$
(
this
).
each
(
function
(){
destroy
(
$
(
this
));});
return
$
(
this
);
default
:
if
(
!
o
)
o
=
{};
$
(
this
).
each
(
function
(){
if
(
$
(
this
)[
0
].
tagName
.
toLowerCase
()
!==
'input'
)
return
;
if
(
$
(
this
).
data
(
'trigger'
))
return
;
create
(
$
(
this
),
o
,
data
);});
return
$
(
this
);}}});})(
jQuery
);
File Metadata
Details
Attached
Mime Type
text/x-Algol68
Expires
Fri, May 22, 4:07 AM (1 d, 6 h)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
714522
Default Alt Text
jquery.miniColors.min.js (9 KB)
Attached To
Mode
R14 roundcubemail-plugins-kolab
Attached
Detach File
Event Timeline
Log In to Comment