zcy
/
svgedit
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Attempt to upgrade the jPicker plug-in to 1.1.5 

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@1802 eee81c28-f429-11dd-99c0-75d572ba1ddd
master
Alexis Deveria 2010-10-14 16:54:15 +00:00
parent e02a152d0f
commit ae13b96bdf
12 changed files with 2039 additions and 212 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

191
editor/jgraduate/css/jPicker-1.0.12.css
View File

@ -1,191 +0,0 @@
.jPicker_Picker {
display: inline-block;
height: 24px; /* change this value if using a different sized color picker icon */
position: relative; /* make this element an absolute positioning container */
text-align: left; /* make the zero width children position to the left of container */
width: 25px; /* change this value if using a different sized color picker icon */
}
.jPicker_Color, .jPicker_Alpha {
background-position: 2px 2px;
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
.jPicker_Icon {
background-repeat: no-repeat;
cursor: pointer;
display: block;
height: 100%;
left: 0px;
position: absolute;
top: 0px;
width: 100%;
}
.jPicker_Container {
display: none;
z-index: 10; /* make sure container draws above color picker icon in Firefox/Safari/Chrome/Opera/etc. -
IE calculates z-index so this won't work - we will hide all color picker icons placed after the selected one in code when shown in IE */
}
.jPicker_table {
background-color: #efefef;
border: 1px outset #666;
font-family: Arial, Helvetica, Sans-Serif;
font-size: 12px;
margin: 0px;
padding: 5px;
width: 550px;
}
.jPicker_table td {
margin: 0px;
padding: 0px;
vertical-align: top;
}
.jPicker_MoveBar {
background-color: #dddddd;
border: 1px outset #aaa;
cursor: move;
height: 12px;
}
.jPicker_Title {
font-size: 11px !important;
font-weight: bold;
margin: -2px 0px 0px 0px;
padding: 0px;
text-align: center;
width: 100%;
}
.jPicker_ColorMap {
border: 2px inset #eee;
cursor: crosshair;
height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
margin: 0px 5px 0px 5px;
overflow: hidden; /* hide the overdraw of the Color Map icon when at edge of viewing box */
padding: 0px;
position: relative; /* make this element an absolute positioning container */
width: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
}
div[class="jPicker_ColorMap"] {
height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
width: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
}
.jPicker_ColorBar {
border: 2px inset #eee;
cursor: n-resize;
height: 260px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 256px later */
margin: 12px 10px 0px 5px;
padding: 0px;
position: relative;
width: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
}
div[class="jPicker_ColorBar"] {
height: 256px; /* correct to 256px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
width: 20px; /* correct to 20px for browsers that support the "[class="xxx"]" selector (IE7+,Firefox,Safari,Chrome,Opera,etc.) */
}
.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorMap_l3, .jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4, .jPicker_ColorBar_l5, .jPicker_ColorBar_l6 {
background-color: transparent;
background-image: none;
display: block;
height: 256px; /* must specific pixel height. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
would not be drawn if its overflow is set to hidden. */
left: 0px;
position: absolute;
top: 0px;
}
.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorMap_l3 {
width: 256px; /* must specific pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
would not be drawn if its overflow is set to hidden. */
}
.jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4, .jPicker_ColorBar_l5, .jPicker_ColorBar_l6 {
width: 20px; /* must specific pixel width. IE7/8 Quirks mode ignores opacity for an absolutely positioned item in a relative container with "overflow: visible". The marker in the colorBar
would not be drawn if its overflow is set to hidden. */
}
.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorBar_l6 {
background-repeat: no-repeat;
}
.jPicker_ColorMap_l3, .jPicker_ColorBar_l5 {
background-repeat: repeat;
}
.jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4 {
background-repeat: repeat-x;
}
.jPicker_ColorMap_Arrow {
display: block;
position: absolute;
}
.jPicker_ColorBar_Arrow {
display: block;
left: -10px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */
position: absolute;
}
.jPicker_Preview {
font-size: x-small;
text-align: center;
}
.jPicker_Preview div {
border: 2px inset #eee;
height: 62px;
margin: 0px auto;
padding: 0px;
width: 62px;
}
.jPicker_Preview div span {
border: 1px solid #000;
display: block;
height: 30px;
margin: 0px auto;
padding: 0px;
width: 60px;
}
.jPicker_Preview div span.jPicker_Active {
border-bottom-width: 0px;
}
.jPicker_Preview div span.jPicker_Current {
border-top-width: 0px;
cursor: pointer;
}
.jPicker_OkCancel {
text-align: center;
width: 120px;
}
.jPicker_OkCancel input {
width: 100px;
}
.jPicker_OkCancel input.jPicker_Ok {
margin: 12px 0px 5px 0px;
}
.jPicker_Text {
text-align: left;
}
.jPicker_HueText, .jPicker_SaturationText, .jPicker_BrightnessText, .jPicker_RedText, .jPicker_GreenText, .jPicker_BlueText, .jPicker_AlphaText {
background-color: #fff;
border: 1px inset #aaa;
margin: 0px 0px 0px 5px;
text-align: left;
width: 30px;
}
.jPicker_HexText {
background-color: #fff;
border: 1px inset #aaa;
margin: 0px 0px 0px 5px;
width: 65px;
}
.jPicker_Grid {
text-align: center;
}
span.jPicker_QuickColor {
border: 1px inset #aaa;
cursor: pointer;
display: block;
float: left;
height: 13px;
line-height: 13px;
margin: 2px 2px 1px 2px;
padding: 0px;
width: 15px;
}
span[class="jPicker_QuickColor"] {
width: 13px;
}

1
editor/jgraduate/css/jPicker.css Normal file
View File

@ -0,0 +1 @@
.jPicker .Icon{display:inline-block;height:24px;position:relative;text-align:left;width:25px}.jPicker .Icon span.Color,.jPicker .Icon span.Alpha{background-position:2px 2px;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker .Icon span.Image{background-repeat:no-repeat;cursor:pointer;display:block;height:100%;left:0;position:absolute;top:0;width:100%}.jPicker.Container{z-index:10}table.jPicker{background-color:#efefef;border:1px outset #666;font-family:Arial,Helvetica,Sans-Serif;font-size:12px!important;margin:0;padding:5px;width:545px;z-index:20}.jPicker .Move{background-color:#ddd;border-color:#fff #666 #666 #fff;border-style:solid;border-width:1px;cursor:move;height:12px;padding:0}.jPicker .Title{font-size:11px!important;font-weight:bold;margin:-2px 0 0 0;padding:0;text-align:center;width:100%}.jPicker div.Map{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:crosshair;height:260px;margin:0 5px 0 5px;overflow:hidden;padding:0;position:relative;width:260px}.jPicker div[class="Map"]{height:256px;width:256px}.jPicker div.Bar{border-bottom:2px solid #fff;border-left:2px solid #9a9a9a;border-right:2px solid #fff;border-top:2px solid #9a9a9a;cursor:n-resize;height:260px;margin:12px 10px 0 5px;overflow:hidden;padding:0;position:relative;width:24px}.jPicker div[class="Bar"]{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3,.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4,.jPicker .Bar .Map5,.jPicker .Bar .Map6{background-color:transparent;background-image:none;display:block;left:0;position:absolute;top:0}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Map .Map3{height:2596px;width:256px}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{height:3896px;width:20px}.jPicker .Bar .Map5,.jPicker .Bar .Map6{height:256px;width:20px}.jPicker .Map .Map1,.jPicker .Map .Map2,.jPicker .Bar .Map6{background-repeat:no-repeat}.jPicker .Map .Map3,.jPicker .Bar .Map5{background-repeat:repeat}.jPicker .Bar .Map1,.jPicker .Bar .Map2,.jPicker .Bar .Map3,.jPicker .Bar .Map4{background-repeat:repeat-x}.jPicker .Map .Arrow{display:block;position:absolute}.jPicker .Bar .Arrow{display:block;left:0;position:absolute}.jPicker .Preview{font-size:9px;text-align:center}.jPicker .Preview div{border:2px inset #eee;height:62px;margin:0 auto;padding:0;width:62px}.jPicker .Preview div span{border:1px solid #000;display:block;height:30px;margin:0 auto;padding:0;width:60px}.jPicker .Preview .Active{border-bottom-width:0}.jPicker .Preview .Current{border-top-width:0;cursor:pointer}.jPicker .Button{text-align:center;width:115px}.jPicker .Button input{width:100px}.jPicker .Button .Ok{margin:12px 0 5px 0}.jPicker td.Radio{margin:0;padding:0;width:31px}.jPicker td.Radio input{margin:0 5px 0 0;padding:0}.jPicker td.Text{font-size:12px!important;height:22px;margin:0;padding:0;text-align:left;width:70px}.jPicker tr.Hex td.Text{width:100px}.jPicker td.Text input{background-color:#fff;border:1px inset #aaa;height:19px;margin:0 0 0 5px;text-align:left;width:30px}.jPicker td[class="Text"] input{height:15px}.jPicker tr.Hex td.Text input.Hex{width:50px}.jPicker tr.Hex td.Text input.AHex{width:20px}.jPicker .Grid{text-align:center;width:114px}.jPicker .Grid span.QuickColor{border:1px inset #aaa;cursor:pointer;display:inline-block;height:15px;line-height:15px;margin:0;padding:0;width:19px}.jPicker .Grid span[class="QuickColor"]{width:17px}

BIN
editor/jgraduate/images/Bars.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 349 B

After

Width:  |  Height:  |  Size: 382 B

BIN
editor/jgraduate/images/Maps.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 80 KiB

After

Width:  |  Height:  |  Size: 76 KiB

BIN
editor/jgraduate/images/NoColor.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 268 B

After

Width:  |  Height:  |  Size: 552 B

BIN
editor/jgraduate/images/rangearrows.gif
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 94 B

After

Width:  |  Height:  |  Size: 76 B

1
editor/jgraduate/jpicker-1.0.12.min.js vendored
View File

File diff suppressed because one or more lines are too long

2000
editor/jgraduate/jpicker.min.js vendored Normal file
View File

File diff suppressed because it is too large Load Diff

40
editor/jgraduate/jquery.jgraduate.js
View File

@ -567,8 +567,8 @@ jQuery.fn.jGraduate =
images: { clientPath: $settings.images.clientPath },
color: { active: color, alphaSupport: true }
}, function(color){
beginColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none";
beginOpacity = color.get_A() ? color.get_A()/100 : 1;
beginColor = color.val('hex') ? ('#'+color.val('hex')) : "none";
beginOpacity = color.val('ahex') ? color.val('ahex')/100 : 1;
colorbox.css('background', beginColor);
$('#'+id+'_jGraduate_beginOpacity').html(parseInt(beginOpacity*100)+'%');
stops[0].setAttribute('stop-color', beginColor);
@ -591,8 +591,8 @@ jQuery.fn.jGraduate =
images: { clientPath: $settings.images.clientPath },
color: { active: color, alphaSupport: true }
}, function(color){
endColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none";
endOpacity = color.get_A() ? color.get_A()/100 : 1;
endColor = color.val('hex') ? ('#'+color.val('hex')) : "none";
endOpacity = color.val('ahex') ? color.val('ahex')/100 : 1;
colorbox.css('background', endColor);
$('#'+id+'_jGraduate_endOpacity').html(parseInt(endOpacity*100)+'%');
stops[1].setAttribute('stop-color', endColor);
@ -609,16 +609,20 @@ jQuery.fn.jGraduate =
var thisAlpha = ($this.paint.alpha*255/100).toString(16);
while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
color = $this.paint.solidColor == "none" ? "" : $this.paint.solidColor + thisAlpha;
$.extend($.fn.jPicker.defaults.window, {
alphaSupport: true, effects: {type: 'show',speed: 0}
});
colPicker.jPicker(
{
window: { title: $settings.window.pickerTitle },
window: { title: $settings.window.pickerTitle},
images: { clientPath: $settings.images.clientPath },
color: { active: color, alphaSupport: true }
},
function(color) {
$this.paint.type = "solidColor";
$this.paint.alpha = color.get_A() ? color.get_A() : 100;
$this.paint.solidColor = color.get_Hex() ? color.get_Hex() : "none";
$this.paint.alpha = color.val('ahex') ? Math.round((color.val('a') / 255) * 100) : 100;
$this.paint.solidColor = color.val('hex') ? color.val('hex') : "none";
$this.paint.linearGradient = null;
okClicked();
},
@ -984,8 +988,8 @@ jQuery.fn.jGraduate =
images: { clientPath: $settings.images.clientPath },
color: { active: color, alphaSupport: true }
}, function(color){
centerColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none";
centerOpacity = color.get_A() ? color.get_A()/100 : 1;
centerColor = color.val('hex') ? ('#'+color.val('hex')) : "none";
centerOpacity = color.val('ahex') ? color.val('ahex')/100 : 1;
colorbox.css('background', centerColor);
$('#'+id+'_rg_jGraduate_centerOpacity').html(parseInt(centerOpacity*100)+'%');
stops[0].setAttribute('stop-color', centerColor);
@ -1008,8 +1012,8 @@ jQuery.fn.jGraduate =
images: { clientPath: $settings.images.clientPath },
color: { active: color, alphaSupport: true }
}, function(color){
outerColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none";
outerOpacity = color.get_A() ? color.get_A()/100 : 1;
outerColor = color.val('hex') ? ('#'+color.val('hex')) : "none";
outerOpacity = color.val('ahex') ? color.val('ahex')/100 : 1;
colorbox.css('background', outerColor);
$('#'+id+'_jGraduate_outerOpacity').html(parseInt(outerOpacity*100)+'%');
stops[1].setAttribute('stop-color', outerColor);
@ -1034,8 +1038,8 @@ jQuery.fn.jGraduate =
},
function(color) {
$this.paint.type = "solidColor";
$this.paint.alpha = color.get_A() ? color.get_A() : 100;
$this.paint.solidColor = color.get_Hex() ? color.get_Hex() : "none";
$this.paint.alpha = color.val('ahex') ? Math.round((color.val('a') / 255) * 100) : 100;
$this.paint.solidColor = color.val('hex') ? color.val('hex') : "none";
$this.paint.radialGradient = null;
okClicked();
},
@ -1051,7 +1055,6 @@ jQuery.fn.jGraduate =
$(idref + " > div").hide();
$(idref + ' .jGraduate_' + $(this).attr('data-type') + 'Pick').show();
});
$(idref + " > div").hide();
tabs.removeClass('jGraduate_tab_current');
var tab;
@ -1066,9 +1069,12 @@ jQuery.fn.jGraduate =
tab = $(idref + ' .jGraduate_tab_color');
break;
}
tab.addClass('jGraduate_tab_current').click();
$this.show();
// jPicker will try to show after a 0ms timeout, so need to fire this after that
setTimeout(function() {
tab.addClass('jGraduate_tab_current').click();
}, 10);
});
};
})();

4
editor/svg-editor.html
View File

@ -5,7 +5,7 @@
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1"/>
<link rel="icon" type="image/png" href="images/logo.png"/>
<link rel="stylesheet" href="jgraduate/css/jPicker-1.0.12.css" type="text/css"/>
<link rel="stylesheet" href="jgraduate/css/jPicker.css" type="text/css"/>
<link rel="stylesheet" href="jgraduate/css/jgraduate.css" type="text/css"/>
<link rel="stylesheet" href="svg-editor.css" type="text/css"/>
<link rel="stylesheet" href="spinbtn/JQuerySpinBtn.css" type="text/css"/>
@ -37,7 +37,7 @@ script type="text/javascript" src="locale/locale.min.js"></script-->
<!-- always minified scripts -->
<script type="text/javascript" src="jquery-ui/jquery-ui-1.8.custom.min.js"></script>
<script type="text/javascript" src="jgraduate/jpicker-1.0.12.min.js"></script>
<script type="text/javascript" src="jgraduate/jpicker.min.js"></script>
<!-- feeds -->
<link rel="alternate" type="application/atom+xml" title="SVG-edit General Discussion" href="http://groups.google.com/group/svg-edit/feed/atom_v1_0_msgs.xml" />

2
editor/svg-editor.js
View File

@ -3130,7 +3130,7 @@
var was_none = false;
var pos = elem.position();
$("#color_picker")
.draggable({cancel:'.jPicker_table,.jGraduate_lgPick,.jGraduate_rgPick'})
.draggable({cancel:'.jGraduate_tabs,.jGraduate_colPick,.jGraduate_lgPick,.jGraduate_rgPick'})
.css(curConfig.colorPickerCSS || {'left': pos.left, 'bottom': 50 - pos.top})
.jGraduate(
{

12
editor/svgcanvas.js
View File

@ -2589,6 +2589,18 @@ var sanitizeSvg = this.sanitizeSvg = function(node) {
node.setAttribute('d',pathActions.convertPath(node));
pathActions.fixEnd(node);
}
// Add spaces before negative signs where necessary
if(isGecko) {
switch ( attrName ) {
case "transform":
case "gradientTransform":
case "patternTransform":
var val = attr.nodeValue.replace(/(\d)-/g, "$1 -");
node.setAttribute(attrName, val);
}
}
// for the style attribute, rewrite it in terms of XML presentational attributes
if (attrName == "style") {
var props = attr.nodeValue.split(";"),