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

editor/jgraduate/css/jPicker-1.0.12.css

@@ -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;
-}

editor/jgraduate/css/jPicker.css

@@ -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}

editor/jgraduate/jquery.jgraduate.js

@@ -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";
+							beginColor = color.val('hex') ? ('#'+color.val('hex')) : "none";
-							beginOpacity = color.get_A() ? color.get_A()/100 : 1;
+							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";
+							endColor = color.val('hex') ? ('#'+color.val('hex')) : "none";
-							endOpacity = color.get_A() ? color.get_A()/100 : 1;
+							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.val('ahex') ? Math.round((color.val('a') / 255) * 100)  : 100;
-						$this.paint.alpha = color.get_A() ? color.get_A() : 100;
+						$this.paint.solidColor = color.val('hex') ? color.val('hex') : "none";
-						$this.paint.solidColor = color.get_Hex() ? color.get_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";
+							centerColor = color.val('hex') ? ('#'+color.val('hex')) : "none";
-							centerOpacity = color.get_A() ? color.get_A()/100 : 1;
+							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";
+							outerColor = color.val('hex') ? ('#'+color.val('hex')) : "none";
-							outerOpacity = color.get_A() ? color.get_A()/100 : 1;
+							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.alpha = color.val('ahex') ? Math.round((color.val('a') / 255) * 100) : 100;
-						$this.paint.solidColor = color.get_Hex() ? color.get_Hex() : "none";
+						$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);
 		});
 	};
 })();

editor/svg-editor.html

@@ -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" />

editor/svg-editor.js

@@ -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(
 					{ 

editor/svgcanvas.js

@@ -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(";"),