move opacity control to jPicker

git-svn-id: http://svg-edit.googlecode.com/svn/trunk@254 eee81c28-f429-11dd-99c0-75d572ba1ddd

editor/jpicker/jpicker.css

@@ -34,10 +34,10 @@
   border: 1px outset #666;
   font-family: Arial, Helvetica, Sans-Serif;
   font-size: 12px;
-  height: 320px;
+  height: 330px;
   margin: 0px;
   padding: 5px;
-  width: 560px;
+  width: 550px;
 }
 .jPicker_table td {
   margin: 0px;
@@ -54,7 +54,7 @@
   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: 12px 5px;
+  margin: 12px 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 */
@@ -64,7 +64,7 @@ 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_ColorMap_l1, .jPicker_ColorMap_l2 {
+.jPicker_ColorMap_l1, .jPicker_ColorMap_l2, .jPicker_ColorMap_l3, .jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4, .jPicker_AlphaBar_l1, .jPicker_AlphaBar_l2 {
   background-repeat: no-repeat;
   display: block;
   height: 100%;
@@ -80,6 +80,9 @@ div[class="jPicker_ColorMap"] {
 .jPicker_ColorMap_l2 {
   background-color: transparent;
 }
+.jPicker_ColorMap_l3 {
+  background-repeat: repeat;
+}
 .jPicker_ColorMap_Arrow {
   display: block;
   position: absolute;
@@ -88,7 +91,7 @@ div[class="jPicker_ColorMap"] {
   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;
+  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 */
@@ -97,15 +100,6 @@ 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_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3, .jPicker_ColorBar_l4 {
-  background-repeat: no-repeat;
-  display: block;
-  height: 100%;
-  left: 0px;
-  position: absolute;
-  top: 0px;
-  width: 100%;
-}
 .jPicker_ColorBar_l1, .jPicker_ColorBar_l2, .jPicker_ColorBar_l3 {
   background-color: transparent;
   background-image: none;
@@ -118,6 +112,24 @@ div[class="jPicker_ColorBar"] {
   left: -10px; /* (arrow width / 2) - (element width / 2) - position arrows' center in elements' center */
   position: absolute;
 }
+.jPicker_AlphaBar {
+  border: 2px inset #eee;
+  cursor: e-resize;
+  height: 24px; /* IE 6 incorrectly draws border inside the width and height instead of outside - We will fix this to 20px later */
+  margin: 10px 5px 4px 5px;
+  padding: 0px;
+  position: relative;
+  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_AlphaBar"] {
+  height: 20px; /* correct to 20px 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_AlphaBar_Arrow {
+  display: block;
+  top: -10px; /* (arrow height / 2) - (element height / 2) - position arrows' center in elements' center */
+  position: absolute;
+}
 .jPicker_Preview {
   font-size: x-small;
   text-align: center;
@@ -172,6 +184,13 @@ div[class="jPicker_ColorBar"] {
   margin: 0px 19px 0px 5px;
   width: 50px;
 }
+td.jPicker_OpacityCol {
+  padding-top: 12px;
+  text-indent: -8px;
+}
+td.jPicker_HexCol {
+  text-align: left;
+}
 .jPicker_Grid {
   text-align: center;
 }

editor/svg-editor.html

@@ -162,37 +162,11 @@
 		<tr>
 			<td>fill:</td>
 			<td><div id="fill_color" class="color_block"  title="Change fill color"></div></td>
-			<td>
+			<td><div id="fill_opacity">N/A</div></td>
-				<select id="fill_opacity" title="Change fill opacity">
-				<option selected="selected" value="1">100 %</option>
-				<option value="0.9">90 %</option>
-				<option value="0.8">80 %</option>
-				<option value="0.7">70 %</option>
-				<option value="0.6">60 %</option>
-				<option value="0.5">50 %</option>
-				<option value="0.4">40 %</option>
-				<option value="0.3">30 %</option>
-				<option value="0.2">20 %</option>
-				<option value="0.1">10 %</option>
-				</select>
-			</td>
 		</tr><tr>
 			<td>stroke:</td>
 			<td><div id="stroke_color" class="color_block" title="Change stroke color"></div></td>
-			<td>
+			<td><div id="stroke_opacity">100 %</div></td>
-				<select id="stroke_opacity" title="Change stroke opacity">
-				<option selected="selected" value="1">100 %</option>
-				<option value="0.9">90 %</option>
-				<option value="0.8">80 %</option>
-				<option value="0.7">70 %</option>
-				<option value="0.6">60 %</option>
-				<option value="0.5">50 %</option>
-				<option value="0.4">40 %</option>
-				<option value="0.3">30 %</option>
-				<option value="0.2">20 %</option>
-				<option value="0.1">10 %</option>
-				</select>
-			</td>
 			<td>
 				<select id="stroke_width" title="Change stroke width">
 				<option selected="selected" value="1">1</option>

editor/svg-editor.js

@@ -79,8 +79,8 @@ function svg_edit_setup() {
 			}
 			$('#stroke_color').css('background', strokeColor);
 
-			$('#fill_opacity').val(((selectedElement.getAttribute("fill-opacity")||1.0)*100)+" %");
+			$('#fill_opacity').html(((selectedElement.getAttribute("fill-opacity")||1.0)*100)+" %");
-			$('#stroke_opacity').val(((selectedElement.getAttribute("stroke-opacity")||1.0)*100)+" %");
+			$('#stroke_opacity').html(((selectedElement.getAttribute("stroke-opacity")||1.0)*100)+" %");
 			$('#group_opacity').val(((selectedElement.getAttribute("opacity")||1.0)*100)+" %");
 			$('#stroke_width').val(selectedElement.getAttribute("stroke-width")||1);
 			$('#stroke_style').val(selectedElement.getAttribute("stroke-dasharray")||"none");
@@ -189,14 +189,6 @@ function svg_edit_setup() {
 		svgCanvas.setStrokeStyle(this.options[this.selectedIndex].value);
 	});
 
-	$('#stroke_opacity').change(function(){
-		svgCanvas.setStrokeOpacity(this.options[this.selectedIndex].value);
-	});
-
-	$('#fill_opacity').change(function(){
-		svgCanvas.setFillOpacity(this.options[this.selectedIndex].value);
-	});
-
 	$('#group_opacity').change(function(){
 		svgCanvas.setOpacity(this.options[this.selectedIndex].value);
 	});
@@ -222,17 +214,29 @@ function svg_edit_setup() {
 	});
 
 	$('.palette_item').click(function(evt){
-		var id = (evt.shiftKey ? '#stroke_color' : '#fill_color');
+		var id = (evt.shiftKey ? '#stroke_' : '#fill_');
 		color = $(this).css('background-color');
 		// Webkit-based browsers returned 'initial' here for no stroke
 		if (color == 'transparent' || color == 'initial') {
 			color = 'none';
-			$(id).css('background', 'url(\'images/none.png\')');
+			$(id + "color").css('background', 'url(\'images/none.png\')');
+			$(id + "opacity").html("N/A");
 		} else {
-			$(id).css('background', color);
+			$(id + "color").css('background', color);
+		}
+		if (evt.shiftKey) {
+			svgCanvas.setStrokeColor(color);
+			if (color != 'none' && $("#stroke_opacity").html() == 'N/A') {
+				svgCanvas.setStrokeOpacity(100);
+				$("#stroke_opacity").html("100 %");
+			}
+		} else {
+			svgCanvas.setFillColor(color);
+			if (color != 'none' && $("#fill_opacity").html() == 'N/A') {
+				svgCanvas.setFillOpacity(100);
+				$("#fill_opacity").html("100 %");
+			}
 		}
-		if (evt.shiftKey) svgCanvas.setStrokeColor(color);
-		else svgCanvas.setFillColor(color);
 		updateToolButtonState();
 	});
 
@@ -440,44 +444,66 @@ function svg_edit_setup() {
 	var colorPicker = function(elem) {
 		var oldbg = elem.css('background');
 		var color = elem.css('background-color');
+		var oldopacity = "100 %";
+		if (elem.attr('id') == 'stroke_color') {
+			oldopacity = $('#stroke_opacity').html();
+		}
+		if (elem.attr('id') == 'fill_color') {
+			oldopacity = $('#fill_opacity').html();
+		}
 		var was_none = false;
 		if (color == 'transparent' || color == 'initial') {
-			color = new $.jPicker.Color({ hex: 'ffffff' });
+			color = new $.jPicker.Color({ hex: 'ffffff', a: 0 });
 			was_none = true;
 		} else {
+			var alpha;
+			if (oldopacity == 'N/A') {
+				alpha = 0;
+			} else {
+				alpha = oldopacity.split(' ')[0];
+			}
 			if (color.length == 7 && color[0] == '#') { // #hheexx notation
-				color = new $.jPicker.Color( { hex: color.substring(1,7) } );
+				color = new $.jPicker.Color( { hex: color.substring(1,7) , a: alpha } );
 			} else if (color.substring(0,4) == 'rgb(' && color[color.length-1] == ')') { // rgb(r,g,b) notation
 				var rgb = color.substring(4,color.length-1).split(',');
-				color = new $.jPicker.Color({ r: rgb[0], g: rgb[1], b: rgb[2] });
+				color = new $.jPicker.Color({ r: rgb[0], g: rgb[1], b: rgb[2], a: alpha });
 			} else {
-				color = new $.jPicker.Color({ hex: 'ffffff' });
+				color = new $.jPicker.Color({ hex: 'ffffff', a: alpha });
 			}
 		}
 		var pos = elem.position();
 		picker = 'stroke';
 		$('#color_picker').css({'left': pos.left - 140, 'bottom': 104 - pos.top}).jPicker({
 			images: { clientPath: "jpicker/images/" },
-			color: { active: color }
+			color: { active: color, alphaSupport: true }
 		}, function(color){
 			elem.css('background', '#' + this.settings.color.active.hex);
 			if (elem.attr('id') == 'stroke_color') {
 				svgCanvas.setStrokeColor('#' + this.settings.color.active.hex);
+				svgCanvas.setStrokeOpacity(this.settings.color.active.a/100);
+				$('#stroke_opacity').html(this.settings.color.active.a+" %");
 			} else if (elem.attr('id') == 'fill_color') {
 				svgCanvas.setFillColor('#' + this.settings.color.active.hex);
+				svgCanvas.setFillOpacity(this.settings.color.active.a/100);
+				$('#fill_opacity').html(this.settings.color.active.a+" %");
 			}
 			$('#color_picker').hide();
 		}
-		, function(color){
+		, null
-			elem.css('background', '#' + this.settings.color.active.hex);
-		}
 		, function(){
 			elem.css('background', oldbg);
+			if (elem.attr('id') == 'stroke_color') {
+				$('#stroke_opacity').html(oldopacity);
+			} else if (elem.attr('id') == 'fill_color') {
+				$('#fill_opacity').html(oldopacity);
+			}
 			if (was_none) {
 				if (elem.attr('id') == 'stroke_color') {
 					svgCanvas.setStrokeColor('none');
+					$('#stroke_opacity').html('N/A');
 				} else if (elem.attr('id') == 'fill_color') {
 					svgCanvas.setFillColor('none');
+					$('#fill_opacity').html('N/A');
 				}
 			}
 			$('#color_picker').hide();