Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
qq_14980201
ueditor
提交
a4a88a38
U
ueditor
项目概览
qq_14980201
/
ueditor
与 Fork 源项目一致
从无法访问的项目Fork
通知
3
Star
0
Fork
0
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
0
列表
看板
标记
里程碑
合并请求
0
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
U
ueditor
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
0
Issue
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
Pages
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
提交
Issue看板
体验新版 GitCode,发现更多精彩内容 >>
提交
a4a88a38
编写于
2月 22, 2013
作者:
Z
zhuwenxuan
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
colorplate
上级
a32ab9ed
变更
5
隐藏空白更改
内联
并排
Showing
5 changed file
with
318 addition
and
6 deletion
+318
-6
_src/ui/colorbutton.js
_src/ui/colorbutton.js
+10
-1
_src/ui/colorpicker.js
_src/ui/colorpicker.js
+236
-3
_src/ui/uiutils.js
_src/ui/uiutils.js
+2
-2
themes/default/_css/colorpicker.css
themes/default/_css/colorpicker.css
+70
-0
themes/default/images/tangram-colorpicker.png
themes/default/images/tangram-colorpicker.png
+0
-0
未找到文件。
_src/ui/colorbutton.js
浏览文件 @
a4a88a38
...
...
@@ -25,9 +25,18 @@
},
onpicknocolor
:
function
(
t
,
color
){
me
.
_onPickNoColor
(
color
);
},
onchangeheight
:
function
(){
var
color
=
this
.
getPreview
().
style
.
backgroundColor
,
popbody
=
me
.
popup
.
getDom
(
"
body
"
);
domUtils
.
setStyle
(
popbody
,
"
height
"
,
me
.
popup
.
getDom
(
"
content
"
).
offsetHeight
+
"
px
"
);
me
.
setColor
(
color
);
}
}),
editor
:
me
.
editor
editor
:
me
.
editor
,
onhide
:
function
(){
this
.
content
.
toggleAdv
(
1
);
}
});
this
.
initSplitButton
();
},
...
...
_src/ui/colorpicker.js
浏览文件 @
a4a88a38
...
...
@@ -2,6 +2,7 @@
///import uicore
(
function
(){
var
utils
=
baidu
.
editor
.
utils
,
uiUtils
=
baidu
.
editor
.
ui
.
uiUtils
,
UIBase
=
baidu
.
editor
.
ui
.
UIBase
,
ColorPicker
=
baidu
.
editor
.
ui
.
ColorPicker
=
function
(
options
){
this
.
initOptions
(
options
);
...
...
@@ -10,9 +11,28 @@
};
ColorPicker
.
prototype
=
{
hue
:
360
,
ishide
:
true
,
saturation
:
100
,
brightness
:
100
,
getHtmlTpl
:
function
(){
return
genColorPicker
(
this
.
noColorText
,
this
.
editor
);
},
getPad
:
function
(){
return
this
.
getDom
(
"
pad
"
);
},
getSliderMain
:
function
(){
return
this
.
getDom
(
"
sliderMain
"
);
},
getThumb
:
function
(){
return
this
.
getDom
(
"
thumb
"
);
},
getPreview
:
function
(){
return
this
.
getDom
(
'
preview
'
);
},
getAdv
:
function
(){
return
this
.
getDom
(
"
adv
"
);
},
_onTableClick
:
function
(
evt
){
var
tgt
=
evt
.
target
||
evt
.
srcElement
;
var
color
=
tgt
.
getAttribute
(
'
data-color
'
);
...
...
@@ -24,14 +44,207 @@
var
tgt
=
evt
.
target
||
evt
.
srcElement
;
var
color
=
tgt
.
getAttribute
(
'
data-color
'
);
if
(
color
)
{
this
.
get
Dom
(
'
preview
'
).
style
.
backgroundColor
=
color
;
this
.
get
Preview
(
).
style
.
backgroundColor
=
color
;
}
},
_onTableOut
:
function
(){
this
.
get
Dom
(
'
preview
'
).
style
.
backgroundColor
=
''
;
this
.
get
Preview
(
).
style
.
backgroundColor
=
''
;
},
_onPickNoColor
:
function
(){
this
.
fireEvent
(
'
picknocolor
'
);
},
_onShowAdv
:
function
(){
if
(
browser
.
ie
&&
browser
.
version
<=
6
){
alert
(
"
您的浏览器版本太低,请使用高级版本的浏览器
"
)
return
;
}
this
.
toggleAdv
();
},
toggleAdv
:
function
(
ishide
){
var
obj
=
this
.
getDom
(
"
togglehandle
"
);
if
(
ishide
&&
this
.
ishide
){
return
;
}
this
.
getAdv
().
style
.
display
=
this
.
ishide
?
"
block
"
:
"
none
"
;
obj
.
innerHTML
=
this
.
ishide
?
"
收缩
"
:
"
高级
"
;
this
.
ishide
=
!
this
.
ishide
;
this
.
fireEvent
(
"
changeheight
"
);
},
_onPadDotMouseDown
:
function
(
evt
){
var
me
=
this
;
uiUtils
.
startDrag
(
evt
,
{
ondragstart
:
function
(){},
ondragmove
:
function
(
x
,
y
,
evt
){
me
.
_onClickPad
(
evt
);
},
ondragstop
:
function
(){}
});
},
/**
* 校准value值,保证它在合理范围内
* @private
* @param {Number} x 范围上限,被校准的数值不能超过这个数值.
* @param {Number} y 需要校准的数值.
* @return {Number} 校准过的数值.
*/
_adjustValue
:
function
(
x
,
y
)
{
return
Math
.
max
(
0
,
Math
.
min
(
x
,
y
));
},
_onClickPad
:
function
(
evt
){
var
me
=
this
,
paddot
=
me
.
getDom
(
"
paddot
"
),
pdrect
=
uiUtils
.
getClientRect
(
paddot
),
rect
=
uiUtils
.
getClientRect
(
me
.
getPad
()),
evtoffset
=
uiUtils
.
getViewportOffsetByEvent
(
evt
);
//计算鼠标坐标相对调色板左上角距离
me
.
padDotY
=
me
.
_adjustValue
(
rect
.
height
,
evtoffset
.
top
-
rect
.
top
);
me
.
padDotX
=
me
.
_adjustValue
(
rect
.
width
,
evtoffset
.
left
-
rect
.
left
);
me
.
safeSetOffset
(
paddot
,{
top
:
me
.
padDotY
-
pdrect
.
height
/
2
,
left
:
me
.
padDotX
-
pdrect
.
width
/
2
});
me
.
saturation
=
parseInt
(
100
*
me
.
padDotX
/
rect
.
width
,
10
);
//根据调色块top值计算饱和度
me
.
brightness
=
parseInt
(
100
*
(
rect
.
height
-
me
.
padDotY
)
/
rect
.
height
,
10
);
//根据调色块left值计算亮度
me
.
_setNewColor
();
},
/**
* 将rgb格式转成hex格式
* @private
* @param {Object} rgb rgb格式颜色值.
* @return {String} hex格式颜色值.
*/
_RGBToHex
:
function
(
rgb
)
{
var
hex
=
[
rgb
.
r
.
toString
(
16
),
rgb
.
g
.
toString
(
16
),
rgb
.
b
.
toString
(
16
)];
for
(
var
i
=
0
;
i
<
hex
.
length
;
i
++
){
if
(
hex
[
i
].
length
==
1
){
hex
[
i
]
=
'
0
'
+
hex
[
i
];
}
}
return
hex
.
join
(
''
);
},
/**
* 将HSB格式转成RGB格式
* @private
* @param {Object} hsb hsb格式颜色值.
* @return {Object} rgb格式颜色值.
*/
_HSBToRGB
:
function
(
hsb
)
{
var
rgb
=
{},
h
=
Math
.
round
(
hsb
.
h
),
s
=
Math
.
round
(
hsb
.
s
*
255
/
100
),
v
=
Math
.
round
(
hsb
.
b
*
255
/
100
);
if
(
s
==
0
)
{
rgb
.
r
=
rgb
.
g
=
rgb
.
b
=
v
;
}
else
{
var
t1
=
v
,
t2
=
(
255
-
s
)
*
v
/
255
,
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
)
};
},
/**
* 将hsb格式转成hex格式
* @private
* @param {Object} hsb hsb格式颜色值.
* @return {String} hex格式颜色值.
*/
_HSBToHex
:
function
(
hsb
)
{
var
me
=
this
;
return
me
.
_RGBToHex
(
me
.
_HSBToRGB
(
hsb
));
},
_setNewColor
:
function
()
{
var
me
=
this
;
//记录当前hex格式颜色值
me
.
hex
=
'
#
'
+
me
.
_HSBToHex
({
h
:
me
.
hue
,
s
:
me
.
saturation
,
b
:
me
.
brightness
});
domUtils
.
setStyle
(
this
.
getPreview
(),
"
background
"
,
me
.
hex
);
},
_onSliderMouseDown
:
function
(
evt
,
obj
){
var
rect
,
sliderrect
,
me
=
this
,
slider
=
me
.
getThumb
(),
sliderMain
=
me
.
getSliderMain
();
uiUtils
.
startDrag
(
evt
,
{
ondragstart
:
function
(){
rect
=
uiUtils
.
getClientRect
(
sliderMain
);
sliderrect
=
uiUtils
.
getClientRect
(
slider
);
},
ondragmove
:
function
(
x
,
y
,
evt
){
var
top
=
sliderrect
.
top
-
rect
.
top
+
y
,
mousePos
=
uiUtils
.
getViewportOffsetByEvent
(
evt
),
val
=
mousePos
.
top
-
rect
.
top
-
sliderrect
.
height
/
2
,
len
=
rect
.
height
-
sliderrect
.
height
;
me
.
safeSetOffset
(
slider
,{
top
:
Math
.
min
(
rect
.
bottom
-
rect
.
top
-
sliderrect
.
height
,
top
)
});
me
.
value
=
(
rect
.
height
-
0
)
/
len
*
val
+
0
;
me
.
setPadBackground
();
},
ondragstop
:
function
(){}
});
},
_onClickSliderMain
:
function
(
evt
,
obj
){
var
me
=
this
,
mousePos
=
uiUtils
.
getViewportOffsetByEvent
(
evt
),
thumb
=
me
.
getThumb
(),
thumbRect
=
uiUtils
.
getClientRect
(
thumb
),
sliderMainRect
=
uiUtils
.
getClientRect
(
me
.
getSliderMain
()),
len
=
sliderMainRect
.
height
-
thumbRect
.
height
,
val
=
mousePos
.
top
-
sliderMainRect
.
top
-
thumbRect
.
height
/
2
;
me
.
value
=
(
sliderMainRect
.
height
-
0
)
/
len
*
val
+
0
;
thumb
.
style
.
top
=
me
.
value
+
"
px
"
;
me
.
setPadBackground
();
},
safeSetOffset
:
function
(
obj
,
offset
){
var
el
=
obj
;
var
vpRect
=
uiUtils
.
getViewportRect
();
var
rect
=
uiUtils
.
getClientRect
(
el
);
var
left
=
offset
.
left
||
0
;
if
(
left
+
rect
.
width
>
vpRect
.
right
)
{
left
=
vpRect
.
right
-
rect
.
width
;
}
var
top
=
offset
.
top
||
0
;
if
(
top
+
rect
.
height
>
vpRect
.
bottom
)
{
top
=
vpRect
.
bottom
-
rect
.
height
;
}
domUtils
.
setStyle
(
el
,
"
left
"
,
Math
.
max
(
left
,
0
)
+
'
px
'
);
domUtils
.
setStyle
(
el
,
"
top
"
,
Math
.
max
(
top
,
0
)
+
'
px
'
);
},
/**
* 设置pad背景色
*/
setPadBackground
:
function
(){
var
me
=
this
,
pad
=
me
.
getPad
(),
thumb
=
me
.
getThumb
(),
sliderMainRect
=
uiUtils
.
getClientRect
(
me
.
getSliderMain
());
me
.
hue
=
parseInt
(
360
*
(
sliderMainRect
.
height
-
Math
.
min
(
me
.
value
,
sliderMainRect
.
height
))
/
sliderMainRect
.
height
,
10
);
//设置面板背景色
domUtils
.
setStyle
(
pad
,
'
background-color
'
,
'
#
'
+
me
.
_HSBToHex
({
h
:
Math
.
max
(
me
.
hue
,
0
),
s
:
100
,
b
:
100
}));
me
.
_setNewColor
();
}
};
utils
.
inherits
(
ColorPicker
,
UIBase
);
...
...
@@ -68,7 +281,27 @@
'
"
'
+
'
></a></td>
'
:
''
;
}
html
+=
'
</tr></table></div>
'
;
html
+=
'
</tr></table>
'
;
//高级按钮
html
+=
'
<span id="##_togglehandle" class="edui-colorpicker-advbtn" onclick="$$._onShowAdv(event, this);">高级</span>
'
;
html
+=
getAdvColorPicker
();
html
+=
'
</div>
'
;
return
html
;
}
function
getAdvColorPicker
(){
var
html
=
'
<div id="##_adv" class="edui-colorpicker-adv" >
'
+
'
<div id="##_pad" class="edui-colorpicker-pad" style="background-color: rgb(255, 0, 0);" onclick = "$$._onClickPad(event,this)">
'
+
'
<div class="edui-colorpicker-cover"></div>
'
+
'
<div id="##_paddot" class="edui-colorpicker-padDot" style="top: 48px; left: 59px;" onmousedown="$$._onPadDotMouseDown(event,this)" ></div>
'
+
'
</div>
'
+
'
<div class="edui-colorpicker-sliderMain" id="##_sliderMain" onclick="$$._onClickSliderMain(event,this)">
'
+
'
<div class="edui-colorpicker-slider" id="##_slider">
'
+
'
<div id="##_thumb" class="edui-colorpicker-thumb" style="top: -3px;" onmousedown="$$._onSliderMouseDown(event, this);"></div>
'
+
'
</div>
'
+
'
</div>
'
+
'
</div>
'
;
return
html
;
}
})();
_src/ui/uiutils.js
浏览文件 @
a4a88a38
...
...
@@ -161,7 +161,7 @@
function
handleMouseMove
(
evt
){
var
x
=
evt
.
clientX
-
startX
;
var
y
=
evt
.
clientY
-
startY
;
callbacks
.
ondragmove
(
x
,
y
);
callbacks
.
ondragmove
(
x
,
y
,
evt
);
if
(
evt
.
stopPropagation
)
{
evt
.
stopPropagation
();
}
else
{
...
...
@@ -171,7 +171,7 @@
if
(
doc
.
addEventListener
)
{
function
handleMouseUp
(
evt
){
doc
.
removeEventListener
(
'
mousemove
'
,
handleMouseMove
,
true
);
doc
.
removeEventListener
(
'
mouseup
'
,
handleMouse
Move
,
true
);
doc
.
removeEventListener
(
'
mouseup
'
,
handleMouse
Up
,
true
);
window
.
removeEventListener
(
'
mouseup
'
,
handleMouseUp
,
true
);
callbacks
.
ondragstop
();
}
...
...
themes/default/_css/colorpicker.css
浏览文件 @
a4a88a38
...
...
@@ -40,4 +40,74 @@
width
:
14px
;
height
:
14px
;
margin
:
0
;
}
.edui-default
.edui-colorpicker-advbtn
{
display
:
block
;
text-align
:
center
;
cursor
:
pointer
;
height
:
18px
;
}
/*高级的样式*/
.edui-colorpicker-adv
{
position
:
relative
;
overflow
:
hidden
;
height
:
180px
;
display
:
none
;
}
.edui-colorpicker-plant
,
.edui-colorpicker-hue
{
border
:
solid
1px
#666
;
}
.edui-colorpicker-pad
{
width
:
150px
;
height
:
150px
;
left
:
14px
;
top
:
13px
;
position
:
absolute
;
background
:
red
;
overflow
:
hidden
;
cursor
:
crosshair
;
}
.edui-colorpicker-cover
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
150px
;
height
:
150px
;
background
:
url("../images/tangram-colorpicker.png")
-160px
-200px
;
}
.edui-colorpicker-padDot
{
position
:
absolute
;
top
:
0
;
left
:
0
;
width
:
11px
;
height
:
11px
;
overflow
:
hidden
;
background
:
url(../images/tangram-colorpicker.png)
0px
-200px
repeat-x
;
z-index
:
1000
;
}
.edui-colorpicker-sliderMain
{
position
:
absolute
;
left
:
171px
;
top
:
13px
;
width
:
19px
;
height
:
152px
;
background
:
url(../images/tangram-colorpicker.png)
-179px
-12px
no-repeat
;
}
.edui-colorpicker-slider
{
width
:
100%
;
height
:
100%
;
cursor
:
pointer
;
}
.edui-colorpicker-thumb
{
position
:
absolute
;
top
:
0
;
cursor
:
pointer
;
height
:
3px
;
left
:
-1px
;
right
:
-1px
;
border
:
1px
solid
black
;
background
:
white
;
opacity
:
.8
;
}
\ No newline at end of file
themes/default/images/tangram-colorpicker.png
0 → 100644
浏览文件 @
a4a88a38
16.9 KB
编辑
预览
Markdown
is supported
0%
请重试
或
添加新附件
.
添加附件
取消
You are about to add
0
people
to the discussion. Proceed with caution.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录