Radial Gradients
Sync with latest SVG-Edit, which supports radial gradients.
This commit is contained in:
Jacques Distler
parent
9ed0772978
commit
7e7ae4c6f0
|
|
@ -26,7 +26,7 @@ h2.jGraduate_Title {
|
|||
padding: 10px;
|
||||
}
|
||||
|
||||
li.jGraduate_tab_color, li.jGraduate_tab_lingrad {
|
||||
.jGraduate_tabs li {
|
||||
background-color: #ccc;
|
||||
display: inline;
|
||||
border: solid 1px grey;
|
||||
|
|
@ -55,6 +55,14 @@ li.jGraduate_tab_current {
|
|||
overflow: auto;
|
||||
}
|
||||
|
||||
.jGraduate_rgPick {
|
||||
display: none;
|
||||
border: outset 1px #666;
|
||||
padding: 10px 7px 5px 5px;
|
||||
overflow: auto;
|
||||
/* position: relative;*/
|
||||
}
|
||||
|
||||
.jGraduate_tabs {
|
||||
position: relative;
|
||||
background-color: #EFEFEF;
|
||||
|
|
@ -90,7 +98,7 @@ div.jGraduate_Opacity {
|
|||
cursor: ew-resize;
|
||||
}
|
||||
|
||||
div.jGraduate_OpacityField {
|
||||
div.lg_jGraduate_OpacityField {
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
left: 292px;
|
||||
|
|
@ -107,6 +115,41 @@ div.jGraduate_StopSection {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
div.jGraduate_RadiusField {
|
||||
|
||||
text-align: center;
|
||||
float: left;
|
||||
}
|
||||
|
||||
div.jGraduate_RadiusField input {
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.jGraduate_RadiusField .jGraduate_Form_Section {
|
||||
width: 250px;
|
||||
padding: 2px;
|
||||
height: 80px;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.jGraduate_Radius {
|
||||
border:1px solid #BBB;
|
||||
cursor:ew-resize;
|
||||
height:20px;
|
||||
margin-top:14px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
|
||||
.jGraduate_RadiusArrows {
|
||||
top: 0;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
margin-top: -10px;
|
||||
margin-left: 250.5px;
|
||||
}
|
||||
|
||||
|
||||
div.jGraduate_OkCancel {
|
||||
float: left;
|
||||
width: 113px;
|
||||
|
|
@ -174,3 +217,50 @@ div.jGraduate_stopPicker {
|
|||
display: none;
|
||||
background: #E8E8E8;
|
||||
}
|
||||
|
||||
|
||||
.jGraduate_rgPick {
|
||||
width: 530px;
|
||||
}
|
||||
|
||||
.jGraduate_rgPick div.jGraduate_Form {
|
||||
width: 270px;
|
||||
position: absolute;
|
||||
left: 284px;
|
||||
width: 266px;
|
||||
top: 130px;
|
||||
margin: -3px 3px 0px 4px;
|
||||
}
|
||||
|
||||
.jGraduate_Colorblocks {
|
||||
display: table;
|
||||
border-spacing: 0 5px;
|
||||
}
|
||||
|
||||
.jGraduate_colorblock {
|
||||
display: table-row;
|
||||
}
|
||||
|
||||
.jGraduate_Colorblocks .jGraduate_colorblock > * {
|
||||
display: table-cell;
|
||||
vertical-align: middle;
|
||||
margin: 0;
|
||||
float: none;
|
||||
}
|
||||
|
||||
.jGraduate_rgPick div.jGraduate_StopSection {
|
||||
float: left;
|
||||
width: 133px;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.jGraduate_rgPick .jGraduate_OkCancel {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.rg_jGraduate_OpacityField {
|
||||
position: absolute;
|
||||
left: 288px;
|
||||
bottom: 24px;
|
||||
}
|
||||
BIN
public/svg-edit/editor/jgraduate/images/mappoint_c.png
Normal file
BIN
public/svg-edit/editor/jgraduate/images/mappoint_c.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 252 B |
BIN
public/svg-edit/editor/jgraduate/images/mappoint_f.png
Normal file
BIN
public/svg-edit/editor/jgraduate/images/mappoint_f.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 255 B |
|
|
@ -3,8 +3,10 @@
|
|||
*
|
||||
* jQuery Plugin for a gradient picker
|
||||
*
|
||||
* Copyright (c) 2009 Jeff Schiller
|
||||
* Copyright (c) 2010 Jeff Schiller
|
||||
* http://blog.codedread.com/
|
||||
* Copyright (c) 2010 Alexis Deveria
|
||||
* http://a.deveria.com/
|
||||
*
|
||||
* Apache 2 License
|
||||
|
||||
|
|
@ -23,12 +25,14 @@ where options is an object literal:
|
|||
alpha: Number representing opacity (0-100),
|
||||
solidColor: String representing #RRGGBB hex of color,
|
||||
linearGradient: object of interface SVGLinearGradientElement,
|
||||
radialGradient: object of interface SVGRadialGradientElement,
|
||||
}
|
||||
|
||||
$.jGraduate.Paint() -> constructs a 'none' color
|
||||
$.jGraduate.Paint({copy: o}) -> creates a copy of the paint o
|
||||
$.jGraduate.Paint({hex: "#rrggbb"}) -> creates a solid color paint with hex = "#rrggbb"
|
||||
$.jGraduate.Paint({linearGradient: o, a: 50}) -> creates a linear gradient paint with opacity=0.5
|
||||
$.jGraduate.Paint({radialGradient: o, a: 7}) -> creates a radial gradient paint with opacity=0.07
|
||||
$.jGraduate.Paint({hex: "#rrggbb", linearGradient: o}) -> throws an exception?
|
||||
|
||||
- picker accepts the following object as input:
|
||||
|
|
@ -74,27 +78,38 @@ $.jGraduate = {
|
|||
if (options.copy) {
|
||||
this.type = options.copy.type;
|
||||
this.alpha = options.copy.alpha;
|
||||
switch(this.type) {
|
||||
case "none":
|
||||
this.solidColor = null;
|
||||
this.linearGradient = null;
|
||||
this.radialGradient = null;
|
||||
|
||||
switch(this.type) {
|
||||
case "none":
|
||||
break;
|
||||
case "solidColor":
|
||||
this.solidColor = options.copy.solidColor;
|
||||
this.linearGradient = null;
|
||||
break;
|
||||
case "linearGradient":
|
||||
this.solidColor = null;
|
||||
this.linearGradient = $.cloneNode(options.copy.linearGradient);
|
||||
break;
|
||||
case "radialGradient":
|
||||
this.radialGradient = $.cloneNode(options.copy.radialGradient);
|
||||
break;
|
||||
}
|
||||
}
|
||||
// create linear gradient paint
|
||||
else if (options.linearGradient) {
|
||||
this.type = "linearGradient";
|
||||
this.solidColor = null;
|
||||
this.radialGradient = null;
|
||||
this.linearGradient = $.cloneNode(options.linearGradient);
|
||||
}
|
||||
// create linear gradient paint
|
||||
else if (options.radialGradient) {
|
||||
this.type = "radialGradient";
|
||||
this.solidColor = null;
|
||||
this.linearGradient = null;
|
||||
this.radialGradient = $.cloneNode(options.radialGradient);
|
||||
}
|
||||
// create solid color paint
|
||||
else if (options.solidColor) {
|
||||
this.type = "solidColor";
|
||||
|
|
@ -105,6 +120,7 @@ $.jGraduate = {
|
|||
this.type = "none";
|
||||
this.solidColor = null;
|
||||
this.linearGradient = null;
|
||||
this.radialGradient = null;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
@ -134,6 +150,15 @@ jQuery.fn.jGraduate =
|
|||
}
|
||||
|
||||
var okClicked = function() {
|
||||
// TODO: Fix this ugly hack
|
||||
if($this.paint.type == "radialGradient") {
|
||||
$this.paint.linearGradient = null;
|
||||
} else if($this.paint.type == "linearGradient") {
|
||||
$this.paint.radialGradient = null;
|
||||
} else if($this.paint.type == "solidColor") {
|
||||
$this.paint.linearGradient = null;
|
||||
$this.paint.radialGradient = null;
|
||||
}
|
||||
$.isFunction($this.okCallback) && $this.okCallback($this.paint);
|
||||
$this.hide();
|
||||
},
|
||||
|
|
@ -159,20 +184,23 @@ jQuery.fn.jGraduate =
|
|||
|
||||
$this.addClass('jGraduate_Picker');
|
||||
$this.html('<ul class="jGraduate_tabs">' +
|
||||
'<li class="jGraduate_tab_color jGraduate_tab_current">Solid Color</li>' +
|
||||
'<li class="jGraduate_tab_lingrad">Linear Gradient</li>' +
|
||||
'<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">Solid Color</li>' +
|
||||
'<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
|
||||
'<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
|
||||
'</ul>' +
|
||||
'<div class="jGraduate_colPick"></div>' +
|
||||
'<div class="jGraduate_lgPick"></div>');
|
||||
'<div class="jGraduate_lgPick"></div>' +
|
||||
'<div class="jGraduate_rgPick"></div>');
|
||||
var colPicker = $(idref + '> .jGraduate_colPick');
|
||||
var lgPicker = $(idref + '> .jGraduate_lgPick');
|
||||
var rgPicker = $(idref + '> .jGraduate_rgPick');
|
||||
|
||||
lgPicker.html(
|
||||
'<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
|
||||
'<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
|
||||
'<div id="' + id + '_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
|
||||
'<div id="' + id + '_jGraduate_Opacity" class="jGraduate_Opacity" title="Click to set overall opacity of the gradient paint">' +
|
||||
'<img id="' + id + '_jGraduate_AlphaArrows" class="jGraduate_AlphaArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' +
|
||||
'<div id="' + id + '_lg_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
|
||||
'<div id="' + id + '_lg_jGraduate_Opacity" class="jGraduate_Opacity" title="Click to set overall opacity of the gradient paint">' +
|
||||
'<img id="' + id + '_lg_jGraduate_AlphaArrows" class="jGraduate_AlphaArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_Form">' +
|
||||
|
|
@ -198,35 +226,107 @@ jQuery.fn.jGraduate =
|
|||
'<label id="' + id + '_jGraduate_endOpacity">100%</label>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_OpacityField">' +
|
||||
'<label class="jGraduate_OpacityLabel">A: </label>' +
|
||||
'<input type="text" id="' + id + '_jGraduate_OpacityInput" class="jGraduate_OpacityInput" size="3" value="100"/>%' +
|
||||
'<div class="lg_jGraduate_OpacityField">' +
|
||||
'<label class="lg_jGraduate_OpacityLabel">A: </label>' +
|
||||
'<input type="text" id="' + id + '_lg_jGraduate_OpacityInput" class="jGraduate_OpacityInput" size="3" value="100"/>%' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_OkCancel">' +
|
||||
'<input type="button" id="' + id + '_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
|
||||
'<input type="button" id="' + id + '_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
|
||||
'<input type="button" id="' + id + '_lg_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
|
||||
'<input type="button" id="' + id + '_lg_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_LightBox"></div>' +
|
||||
'<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>');
|
||||
|
||||
rgPicker.html(
|
||||
'<div class="jGraduate_Swatch">' +
|
||||
'<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
|
||||
'<div id="' + id + '_rg_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
|
||||
'<div id="' + id + '_rg_jGraduate_Opacity" class="jGraduate_Opacity" title="Click to set overall opacity of the gradient paint">' +
|
||||
'<img id="' + id + '_rg_jGraduate_AlphaArrows" class="jGraduate_AlphaArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div id="jGraduate_radColors" class="jGraduate_StopSection">' +
|
||||
'<label class="jGraduate_Form_Heading">Colors</label>' +
|
||||
'<div class="jGraduate_Form_Section jGraduate_Colorblocks">' +
|
||||
'<div class="jGraduate_colorblock"><span>Center:</span>' +
|
||||
'<div id="' + id + '_jGraduate_colorBoxCenter" class="colorBox"></div>' +
|
||||
'<label id="' + id + '_rg_jGraduate_centerOpacity"> 100%</label></div>' +
|
||||
|
||||
'<div class="jGraduate_colorblock"><span>Outer:</span>' +
|
||||
'<div id="' + id + '_jGraduate_colorBoxOuter" class="colorBox"></div>' +
|
||||
'<label id="' + id + '_jGraduate_outerOpacity"> 100%</label></div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_StopSection">' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_Form">' +
|
||||
'<div class="jGraduate_StopSection">' +
|
||||
'<label class="jGraduate_Form_Heading">Center Point</label>' +
|
||||
'<div class="jGraduate_Form_Section">' +
|
||||
'<label>x:</label>' +
|
||||
'<input type="text" id="' + id + '_jGraduate_cx" size="3" title="Enter x value between 0.0 and 1.0"/>' +
|
||||
'<label> y:</label>' +
|
||||
'<input type="text" id="' + id + '_jGraduate_cy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_StopSection">' +
|
||||
'<label class="jGraduate_Form_Heading">Focal Point</label>' +
|
||||
'<div class="jGraduate_Form_Section">' +
|
||||
'<label>Match center: <input type="checkbox" checked="checked" id="' + id + '_jGraduate_match_ctr"/></label><br/>' +
|
||||
'<label>x:</label>' +
|
||||
'<input type="text" id="' + id + '_jGraduate_fx" size="3" title="Enter x value between 0.0 and 1.0"/>' +
|
||||
'<label> y:</label>' +
|
||||
'<input type="text" id="' + id + '_jGraduate_fy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_RadiusField">' +
|
||||
'<label class="jGraduate_Form_Heading">Radius</label>' +
|
||||
'<div class="jGraduate_Form_Section">' +
|
||||
'<div id="' + id + '_jGraduate_RadiusContainer" class="jGraduate_RadiusContainer"></div>' +
|
||||
'<input type="text" id="' + id + '_jGraduate_RadiusInput" size="3" value="100"/>%' +
|
||||
'<div id="' + id + '_jGraduate_Radius" class="jGraduate_Radius" title="Click to set radius">' +
|
||||
'<img id="' + id + '_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'</div>' +
|
||||
'<div class="rg_jGraduate_OpacityField">' +
|
||||
'<label class="rg_jGraduate_OpacityLabel">A: </label>' +
|
||||
'<input type="text" id="' + id + '_rg_jGraduate_OpacityInput" class="jGraduate_OpacityInput" size="3" value="100"/>%' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_OkCancel">' +
|
||||
'<input type="button" id="' + id + '_rg_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
|
||||
'<input type="button" id="' + id + '_rg_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
|
||||
'</div>' +
|
||||
'<div class="jGraduate_LightBox"></div>' +
|
||||
'<div id="' + id + '_rg_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>');
|
||||
|
||||
// --------------
|
||||
// Set up all the SVG elements (the gradient, stops and rectangle)
|
||||
var MAX = 256, MARGINX = 0, MARGINY = 0, STOP_RADIUS = 15/2,
|
||||
SIZEX = MAX - 2*MARGINX, SIZEY = MAX - 2*MARGINY;
|
||||
var container = document.getElementById(id+'_jGraduate_GradContainer');
|
||||
|
||||
$.each(['lg', 'rg'], function(i) {
|
||||
var grad_id = id + '_' + this;
|
||||
var container = document.getElementById(grad_id+'_jGraduate_GradContainer');
|
||||
var svg = container.appendChild(document.createElementNS(ns.svg, 'svg'));
|
||||
svg.id = id+'_jgraduate_svg';
|
||||
svg.id = grad_id + '_jgraduate_svg';
|
||||
svg.setAttribute('width', MAX);
|
||||
svg.setAttribute('height', MAX);
|
||||
svg.setAttribute("xmlns", ns.svg);
|
||||
});
|
||||
|
||||
|
||||
// Linear gradient
|
||||
(function() {
|
||||
var svg = document.getElementById(id + '_lg_jgraduate_svg');
|
||||
|
||||
// if we are sent a gradient, import it
|
||||
if ($this.paint.type == "linearGradient") {
|
||||
$this.paint.linearGradient.id = id+'_jgraduate_grad';
|
||||
$this.paint.linearGradient = svg.appendChild($.cloneNode($this.paint.linearGradient));
|
||||
}
|
||||
else { // we create a gradient
|
||||
} else { // we create a gradient
|
||||
var grad = svg.appendChild(document.createElementNS(ns.svg, 'linearGradient'));
|
||||
grad.id = id+'_jgraduate_grad';
|
||||
grad.setAttribute('x1','0.0');
|
||||
|
|
@ -246,10 +346,9 @@ jQuery.fn.jGraduate =
|
|||
}
|
||||
|
||||
var gradalpha = $this.paint.alpha;
|
||||
$('#' + id + '_jGraduate_OpacityInput').val(gradalpha);
|
||||
$('#' + id + '_lg_jGraduate_OpacityInput').val(gradalpha);
|
||||
var posx = parseInt(255*(gradalpha/100)) - 4.5;
|
||||
$('#' + id + '_jGraduate_AlphaArrows').css({'margin-left':posx});
|
||||
$('#' + id + '_jgraduate_rect').attr('fill-opacity', gradalpha/100);
|
||||
$('#' + id + '_lg_jGraduate_AlphaArrows').css({'margin-left':posx});
|
||||
|
||||
var x1 = parseFloat($this.paint.linearGradient.getAttribute('x1')||0.0),
|
||||
y1 = parseFloat($this.paint.linearGradient.getAttribute('y1')||0.0),
|
||||
|
|
@ -257,7 +356,7 @@ jQuery.fn.jGraduate =
|
|||
y2 = parseFloat($this.paint.linearGradient.getAttribute('y2')||0.0);
|
||||
|
||||
var rect = document.createElementNS(ns.svg, 'rect');
|
||||
rect.id = id + '_jgraduate_rect';
|
||||
rect.id = id + '_lg_jgraduate_rect';
|
||||
rect.setAttribute('x', MARGINX);
|
||||
rect.setAttribute('y', MARGINY);
|
||||
rect.setAttribute('width', SIZEY);
|
||||
|
|
@ -265,6 +364,7 @@ jQuery.fn.jGraduate =
|
|||
rect.setAttribute('fill', 'url(#'+id+'_jgraduate_grad)');
|
||||
rect.setAttribute('fill-opacity', '1.0');
|
||||
rect = svg.appendChild(rect);
|
||||
$('#' + id + '_lg_jgraduate_rect').attr('fill-opacity', gradalpha/100);
|
||||
|
||||
// stop visuals created here
|
||||
var beginStop = document.createElementNS(ns.svg, 'image');
|
||||
|
|
@ -298,18 +398,18 @@ jQuery.fn.jGraduate =
|
|||
endStop = svg.appendChild(endStop);
|
||||
|
||||
// bind GUI elements
|
||||
$('#'+id+'_jGraduate_Ok').bind('click', function() {
|
||||
$('#'+id+'_lg_jGraduate_Ok').bind('click', function() {
|
||||
$this.paint.type = "linearGradient";
|
||||
$this.paint.solidColor = null;
|
||||
okClicked();
|
||||
});
|
||||
$('#'+id+'_jGraduate_Cancel').bind('click', function(paint) {
|
||||
$('#'+id+'_lg_jGraduate_Ok').bind('click', function(paint) {
|
||||
cancelClicked();
|
||||
});
|
||||
|
||||
var x1 = $this.paint.linearGradient.getAttribute('x1');
|
||||
if(!x1) x1 = "0.0";
|
||||
x1Input = $('#'+id+'_jGraduate_x1');
|
||||
var x1Input = $('#'+id+'_jGraduate_x1');
|
||||
x1Input.val(x1);
|
||||
x1Input.change( function() {
|
||||
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
|
||||
|
|
@ -321,7 +421,7 @@ jQuery.fn.jGraduate =
|
|||
|
||||
var y1 = $this.paint.linearGradient.getAttribute('y1');
|
||||
if(!y1) y1 = "0.0";
|
||||
y1Input = $('#'+id+'_jGraduate_y1');
|
||||
var y1Input = $('#'+id+'_jGraduate_y1');
|
||||
y1Input.val(y1);
|
||||
y1Input.change( function() {
|
||||
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
|
||||
|
|
@ -333,7 +433,7 @@ jQuery.fn.jGraduate =
|
|||
|
||||
var x2 = $this.paint.linearGradient.getAttribute('x2');
|
||||
if(!x2) x2 = "1.0";
|
||||
x2Input = $('#'+id+'_jGraduate_x2');
|
||||
var x2Input = $('#'+id+'_jGraduate_x2');
|
||||
x2Input.val(x2);
|
||||
x2Input.change( function() {
|
||||
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
|
||||
|
|
@ -366,35 +466,33 @@ jQuery.fn.jGraduate =
|
|||
stops = $this.paint.linearGradient.getElementsByTagNameNS(ns.svg, 'stop');
|
||||
}
|
||||
|
||||
var setOpacitySlider = function(e, div) {
|
||||
var setLgOpacitySlider = function(e, div) {
|
||||
var offset = div.offset();
|
||||
var x = (e.pageX - offset.left - parseInt(div.css('border-left-width')));
|
||||
if (x > 255) x = 255;
|
||||
if (x < 0) x = 0;
|
||||
var posx = x - 4.5;
|
||||
x /= 255;
|
||||
$('#' + id + '_jGraduate_AlphaArrows').css({'margin-left':posx});
|
||||
$('#' + id + '_jgraduate_rect').attr('fill-opacity', x);
|
||||
$('#' + id + '_lg_jGraduate_AlphaArrows').css({'margin-left':posx});
|
||||
$('#' + id + '_lg_jgraduate_rect').attr('fill-opacity', x);
|
||||
x = parseInt(x*100);
|
||||
$('#' + id + '_jGraduate_OpacityInput').val(x);
|
||||
$('#' + id + '_lg_jGraduate_OpacityInput').val(x);
|
||||
$this.paint.alpha = x;
|
||||
};
|
||||
|
||||
// handle dragging on the opacity slider
|
||||
var bSlidingOpacity = false;
|
||||
$('.jGraduate_Opacity').mousedown(function(evt) {
|
||||
setOpacitySlider(evt, $(this));
|
||||
$('#' + id + '_lg_jGraduate_Opacity').mousedown(function(evt) {
|
||||
setLgOpacitySlider(evt, $(this));
|
||||
bSlidingOpacity = true;
|
||||
evt.preventDefault();
|
||||
});
|
||||
$('.jGraduate_Opacity').mousemove(function(evt) {
|
||||
}).mousemove(function(evt) {
|
||||
if (bSlidingOpacity) {
|
||||
setOpacitySlider(evt, $(this));
|
||||
setLgOpacitySlider(evt, $(this));
|
||||
evt.preventDefault();
|
||||
}
|
||||
});
|
||||
$('.jGraduate_Opacity').mouseup(function(evt) {
|
||||
setOpacitySlider(evt, $(this));
|
||||
}).mouseup(function(evt) {
|
||||
setLgOpacitySlider(evt, $(this));
|
||||
bSlidingOpacity = false;
|
||||
evt.preventDefault();
|
||||
});
|
||||
|
|
@ -404,13 +502,13 @@ jQuery.fn.jGraduate =
|
|||
var startx = -1, starty = -1;
|
||||
// for whatever reason, Opera does not allow $('image.stop') here,
|
||||
// and Firefox 1.5 does not allow $('.stop')
|
||||
$('.stop, #color_picker_jGraduate_GradContainer image').mousedown(function(evt) {
|
||||
$('.stop, #color_picker_lg_jGraduate_GradContainer image').mousedown(function(evt) {
|
||||
draggingStop = this;
|
||||
startx = evt.clientX;
|
||||
starty = evt.clientY;
|
||||
evt.preventDefault();
|
||||
});
|
||||
$('#'+id+'_jgraduate_svg').mousemove(function(evt) {
|
||||
$('#'+id+'_lg_jgraduate_svg').mousemove(function(evt) {
|
||||
if (null != draggingStop) {
|
||||
var dx = evt.clientX - startx;
|
||||
var dy = evt.clientY - starty;
|
||||
|
|
@ -448,7 +546,7 @@ jQuery.fn.jGraduate =
|
|||
evt.preventDefault();
|
||||
}
|
||||
});
|
||||
$('#'+id+'_jgraduate_svg').mouseup(function(evt) {
|
||||
$('#'+id+'_lg_jgraduate_svg').mouseup(function(evt) {
|
||||
draggingStop = null;
|
||||
});
|
||||
|
||||
|
|
@ -459,7 +557,7 @@ jQuery.fn.jGraduate =
|
|||
|
||||
var beginOpacity = stops[0].getAttribute('stop-opacity');
|
||||
if(!beginOpacity) beginOpacity = '1.0';
|
||||
$('#'+id+'jGraduate_beginOpacity').html( (beginOpacity*100)+'%' );
|
||||
$('#'+id+'lg_jGraduate_beginOpacity').html( (beginOpacity*100)+'%' );
|
||||
|
||||
var endColor = stops[stops.length-1].getAttribute('stop-color');
|
||||
if(!endColor) endColor = '#000';
|
||||
|
|
@ -539,33 +637,449 @@ jQuery.fn.jGraduate =
|
|||
null,
|
||||
function(){ cancelClicked(); }
|
||||
);
|
||||
}());
|
||||
|
||||
$(idref + ' .jGraduate_tab_color').click( function(){
|
||||
$(idref + ' .jGraduate_tab_lingrad').removeClass('jGraduate_tab_current');
|
||||
$(idref + ' .jGraduate_tab_color').addClass('jGraduate_tab_current');
|
||||
lgPicker.hide();
|
||||
colPicker.show();
|
||||
|
||||
// Radial gradient
|
||||
(function() {
|
||||
var svg = document.getElementById(id + '_rg_jgraduate_svg');
|
||||
|
||||
// if we are sent a gradient, import it
|
||||
if ($this.paint.type == "radialGradient") {
|
||||
$this.paint.radialGradient.id = id+'_rg_jgraduate_grad';
|
||||
$this.paint.radialGradient = svg.appendChild($.cloneNode($this.paint.radialGradient));
|
||||
} else { // we create a gradient
|
||||
var grad = svg.appendChild(document.createElementNS(ns.svg, 'radialGradient'));
|
||||
grad.id = id+'_rg_jgraduate_grad';
|
||||
grad.setAttribute('cx','0.5');
|
||||
grad.setAttribute('cy','0.5');
|
||||
grad.setAttribute('r','0.5');
|
||||
|
||||
var begin = grad.appendChild(document.createElementNS(ns.svg, 'stop'));
|
||||
begin.setAttribute('offset', '0.0');
|
||||
begin.setAttribute('stop-color', '#ff0000');
|
||||
|
||||
var end = grad.appendChild(document.createElementNS(ns.svg, 'stop'));
|
||||
end.setAttribute('offset', '1.0');
|
||||
end.setAttribute('stop-color', '#ffff00');
|
||||
|
||||
$this.paint.radialGradient = grad;
|
||||
}
|
||||
|
||||
var gradalpha = $this.paint.alpha;
|
||||
$('#' + id + '_rg_jGraduate_OpacityInput').val(gradalpha);
|
||||
var posx = parseInt(255*(gradalpha/100)) - 4.5;
|
||||
$('#' + id + '_rg_jGraduate_AlphaArrows').css({'margin-left':posx});
|
||||
|
||||
var grad = $this.paint.radialGradient;
|
||||
|
||||
var cx = parseFloat(grad.getAttribute('cx')||0.5),
|
||||
cy = parseFloat(grad.getAttribute('cy')||0.5),
|
||||
fx = parseFloat(grad.getAttribute('fx')||0.5),
|
||||
fy = parseFloat(grad.getAttribute('fy')||0.5);
|
||||
|
||||
// No match, so show focus point
|
||||
var showFocus = grad.getAttribute('fx') != null && !(cx == fx && cy == fy);
|
||||
|
||||
var rect = document.createElementNS(ns.svg, 'rect');
|
||||
rect.id = id + '_rg_jgraduate_rect';
|
||||
rect.setAttribute('x', MARGINX);
|
||||
rect.setAttribute('y', MARGINY);
|
||||
rect.setAttribute('width', SIZEY);
|
||||
rect.setAttribute('height', SIZEY);
|
||||
rect.setAttribute('fill', 'url(#'+id+'_rg_jgraduate_grad)');
|
||||
rect.setAttribute('fill-opacity', '1.0');
|
||||
|
||||
rect = svg.appendChild(rect);
|
||||
|
||||
$('#' + id + '_rg_jgraduate_rect').attr('fill-opacity', gradalpha/100);
|
||||
|
||||
// stop visuals created here
|
||||
var centerPoint = document.createElementNS(ns.svg, 'image');
|
||||
centerPoint.id = id + "_center_pt";
|
||||
centerPoint.setAttribute('class', 'stop');
|
||||
centerPoint.setAttributeNS(ns.xlink, 'href', $settings.images.clientPath + 'mappoint_c.png');
|
||||
centerPoint.setAttributeNS(ns.xlink, "title", "Center Point");
|
||||
centerPoint.appendChild(document.createElementNS(ns.svg, 'title')).appendChild(
|
||||
document.createTextNode("Center Point"));
|
||||
centerPoint.setAttribute('width', 18);
|
||||
centerPoint.setAttribute('height', 18);
|
||||
centerPoint.setAttribute('x', MARGINX + SIZEX*cx - STOP_RADIUS);
|
||||
centerPoint.setAttribute('y', MARGINY + SIZEY*cy - STOP_RADIUS);
|
||||
centerPoint.setAttribute('cursor', 'move');
|
||||
|
||||
|
||||
var focusPoint = document.createElementNS(ns.svg, 'image');
|
||||
focusPoint.id = id + "_focus_pt";
|
||||
focusPoint.setAttribute('class', 'stop');
|
||||
focusPoint.setAttributeNS(ns.xlink, 'href', $settings.images.clientPath + 'mappoint_f.png');
|
||||
focusPoint.setAttributeNS(ns.xlink, "title", "Focus Point");
|
||||
focusPoint.appendChild(document.createElementNS(ns.svg, 'title')).appendChild(
|
||||
document.createTextNode("Focus Point"));
|
||||
focusPoint.setAttribute('width', 18);
|
||||
focusPoint.setAttribute('height', 18);
|
||||
focusPoint.setAttribute('x', MARGINX + SIZEX*fx - STOP_RADIUS);
|
||||
focusPoint.setAttribute('y', MARGINY + SIZEY*fy - STOP_RADIUS);
|
||||
focusPoint.setAttribute('cursor', 'move');
|
||||
|
||||
// must append only after setting all attributes due to Webkit Bug 27952
|
||||
// https://bugs.webkit.org/show_bug.cgi?id=27592
|
||||
|
||||
// centerPoint is added last so it is moved first
|
||||
focusPoint = svg.appendChild(focusPoint);
|
||||
centerPoint = svg.appendChild(centerPoint);
|
||||
|
||||
// bind GUI elements
|
||||
$('#'+id+'_rg_jGraduate_Ok').bind('click', function() {
|
||||
$this.paint.type = "radialGradient";
|
||||
$this.paint.solidColor = null;
|
||||
okClicked();
|
||||
});
|
||||
$(idref + ' .jGraduate_tab_lingrad').click( function(){
|
||||
$(idref + ' .jGraduate_tab_color').removeClass('jGraduate_tab_current');
|
||||
$(idref + ' .jGraduate_tab_lingrad').addClass('jGraduate_tab_current');
|
||||
colPicker.hide();
|
||||
lgPicker.show();
|
||||
$('#'+id+'_rg_jGraduate_Cancel').bind('click', function(paint) {
|
||||
cancelClicked();
|
||||
});
|
||||
|
||||
if ($this.paint.type == "linearGradient") {
|
||||
lgPicker.show();
|
||||
colPicker.hide();
|
||||
$(idref + ' .jGraduate_tab_color').removeClass('jGraduate_tab_current');
|
||||
$(idref + ' .jGraduate_tab_lingrad').addClass('jGraduate_tab_current');
|
||||
var cx = $this.paint.radialGradient.getAttribute('cx');
|
||||
if(!cx) cx = "0.0";
|
||||
var cxInput = $('#'+id+'_jGraduate_cx');
|
||||
cxInput.val(cx);
|
||||
cxInput.change( function() {
|
||||
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
|
||||
this.value = 0.0;
|
||||
}
|
||||
$this.paint.radialGradient.setAttribute('cx', this.value);
|
||||
centerPoint.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS);
|
||||
});
|
||||
|
||||
var cy = $this.paint.radialGradient.getAttribute('cy');
|
||||
if(!cy) cy = "0.0";
|
||||
var cyInput = $('#'+id+'_jGraduate_cy');
|
||||
cyInput.val(cy);
|
||||
cyInput.change( function() {
|
||||
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
|
||||
this.value = 0.0;
|
||||
}
|
||||
$this.paint.radialGradient.setAttribute('cy', this.value);
|
||||
centerPoint.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS);
|
||||
});
|
||||
|
||||
var fx = $this.paint.radialGradient.getAttribute('fx');
|
||||
if(!fx) fx = "1.0";
|
||||
var fxInput = $('#'+id+'_jGraduate_fx');
|
||||
fxInput.val(fx);
|
||||
fxInput.change( function() {
|
||||
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
|
||||
this.value = 1.0;
|
||||
}
|
||||
$this.paint.radialGradient.setAttribute('fx', this.value);
|
||||
focusPoint.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS);
|
||||
});
|
||||
|
||||
var fy = $this.paint.radialGradient.getAttribute('fy');
|
||||
if(!fy) fy = "0.0";
|
||||
var fyInput = $('#'+id+'_jGraduate_fy');
|
||||
fyInput.val(fy);
|
||||
fyInput.change( function() {
|
||||
if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
|
||||
this.value = 0.0;
|
||||
}
|
||||
$this.paint.radialGradient.setAttribute('fy', this.value);
|
||||
focusPoint.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS);
|
||||
});
|
||||
|
||||
if(!showFocus) {
|
||||
focusPoint.setAttribute('display', 'none');
|
||||
fxInput.val("");
|
||||
fyInput.val("");
|
||||
}
|
||||
|
||||
$("#" + id + "_jGraduate_match_ctr")[0].checked = !showFocus;
|
||||
|
||||
var lastfx, lastfy;
|
||||
|
||||
$("#" + id + "_jGraduate_match_ctr").change(function() {
|
||||
showFocus = !this.checked;
|
||||
focusPoint.setAttribute('display', showFocus?'inline':'none');
|
||||
fxInput.val("");
|
||||
fyInput.val("");
|
||||
var grad = $this.paint.radialGradient;
|
||||
if(!showFocus) {
|
||||
lastfx = grad.getAttribute('fx');
|
||||
lastfy = grad.getAttribute('fy');
|
||||
grad.removeAttribute('fx');
|
||||
grad.removeAttribute('fy');
|
||||
} else {
|
||||
var fx = lastfx || .5;
|
||||
var fy = lastfy || .5;
|
||||
grad.setAttribute('fx', fx);
|
||||
grad.setAttribute('fy', fy);
|
||||
fxInput.val(fx);
|
||||
fyInput.val(fy);
|
||||
}
|
||||
});
|
||||
|
||||
var stops = $this.paint.radialGradient.getElementsByTagNameNS(ns.svg, 'stop');
|
||||
var numstops = stops.length;
|
||||
// if there are not at least two stops, then
|
||||
if (numstops < 2) {
|
||||
while (numstops < 2) {
|
||||
$this.paint.radialGradient.appendChild( document.createElementNS(ns.svg, 'stop') );
|
||||
++numstops;
|
||||
}
|
||||
stops = $this.paint.radialGradient.getElementsByTagNameNS(ns.svg, 'stop');
|
||||
}
|
||||
var radius = $this.paint.radialGradient.getAttribute('r')-0;
|
||||
var radiusx = parseInt((245/2)*(radius)) - 4.5;
|
||||
$('#' + id + '_jGraduate_RadiusArrows').css({'margin-left':radiusx});
|
||||
$('#' + id + '_jGraduate_RadiusInput').val(parseInt(radius*100)).change(function(e) {
|
||||
var x = this.value / 100;
|
||||
if(x < 0.01) {
|
||||
x = 0.01;
|
||||
}
|
||||
|
||||
$this.paint.radialGradient.setAttribute('r', x);
|
||||
// Allow higher value, but pretend it's the max for the slider
|
||||
if(x > 2) x = 2;
|
||||
var posx = parseInt((245/2) * x) - 4.5;
|
||||
$('#' + id + '_jGraduate_RadiusArrows').css({'margin-left':posx});
|
||||
|
||||
});
|
||||
|
||||
var setRgOpacitySlider = function(e, div) {
|
||||
var offset = div.offset();
|
||||
var x = (e.pageX - offset.left - parseInt(div.css('border-left-width')));
|
||||
if (x > 255) x = 255;
|
||||
if (x < 0) x = 0;
|
||||
var posx = x - 4.5;
|
||||
x /= 255;
|
||||
$('#' + id + '_rg_jGraduate_AlphaArrows').css({'margin-left':posx});
|
||||
$('#' + id + '_rg_jgraduate_rect').attr('fill-opacity', x);
|
||||
x = parseInt(x*100);
|
||||
$('#' + id + '_rg_jGraduate_OpacityInput').val(x);
|
||||
$this.paint.alpha = x;
|
||||
};
|
||||
|
||||
// handle dragging on the opacity slider
|
||||
var bSlidingOpacity = false;
|
||||
$('#' + id + '_rg_jGraduate_Opacity').mousedown(function(evt) {
|
||||
setRgOpacitySlider(evt, $(this));
|
||||
bSlidingOpacity = true;
|
||||
evt.preventDefault();
|
||||
}).mousemove(function(evt) {
|
||||
if (bSlidingOpacity) {
|
||||
setRgOpacitySlider(evt, $(this));
|
||||
evt.preventDefault();
|
||||
}
|
||||
}).mouseup(function(evt) {
|
||||
setRgOpacitySlider(evt, $(this));
|
||||
bSlidingOpacity = false;
|
||||
evt.preventDefault();
|
||||
});
|
||||
|
||||
var setRadiusSlider = function(e, div) {
|
||||
var offset = div.offset();
|
||||
var x = (e.pageX - offset.left - parseInt(div.css('border-left-width')));
|
||||
if (x > 245) x = 245;
|
||||
if (x <= 1) x = 1;
|
||||
var posx = x - 5;
|
||||
x /= (245/2);
|
||||
$('#' + id + '_jGraduate_RadiusArrows').css({'margin-left':posx});
|
||||
$this.paint.radialGradient.setAttribute('r', x);
|
||||
x = parseInt(x*100);
|
||||
|
||||
$('#' + id + '_jGraduate_RadiusInput').val(x);
|
||||
};
|
||||
|
||||
// handle dragging on the radius slider
|
||||
var bSlidingRadius = false;
|
||||
$('#' + id + '_jGraduate_Radius').mousedown(function(evt) {
|
||||
setRadiusSlider(evt, $(this));
|
||||
bSlidingRadius = true;
|
||||
evt.preventDefault();
|
||||
}).mousemove(function(evt) {
|
||||
if (bSlidingRadius) {
|
||||
setRadiusSlider(evt, $(this));
|
||||
evt.preventDefault();
|
||||
}
|
||||
}).mouseup(function(evt) {
|
||||
setRadiusSlider(evt, $(this));
|
||||
bSlidingRadius = false;
|
||||
evt.preventDefault();
|
||||
});
|
||||
|
||||
|
||||
// handle dragging the stop around the swatch
|
||||
var draggingStop = null;
|
||||
var startx = -1, starty = -1;
|
||||
// for whatever reason, Opera does not allow $('image.stop') here,
|
||||
// and Firefox 1.5 does not allow $('.stop')
|
||||
$('.stop, #color_picker_rg_jGraduate_GradContainer image').mousedown(function(evt) {
|
||||
draggingStop = this;
|
||||
startx = evt.clientX;
|
||||
starty = evt.clientY;
|
||||
evt.preventDefault();
|
||||
});
|
||||
$('#'+id+'_rg_jgraduate_svg').mousemove(function(evt) {
|
||||
if (null != draggingStop) {
|
||||
var dx = evt.clientX - startx;
|
||||
var dy = evt.clientY - starty;
|
||||
startx += dx;
|
||||
starty += dy;
|
||||
var x = parseFloat(draggingStop.getAttribute('x')) + dx;
|
||||
var y = parseFloat(draggingStop.getAttribute('y')) + dy;
|
||||
|
||||
// clamp stop to the swatch
|
||||
if (x < MARGINX - STOP_RADIUS) x = MARGINX - STOP_RADIUS;
|
||||
if (y < MARGINY - STOP_RADIUS) y = MARGINY - STOP_RADIUS;
|
||||
if (x > MARGINX + SIZEX - STOP_RADIUS) x = MARGINX + SIZEX - STOP_RADIUS;
|
||||
if (y > MARGINY + SIZEY - STOP_RADIUS) y = MARGINY + SIZEY - STOP_RADIUS;
|
||||
|
||||
draggingStop.setAttribute('x', x);
|
||||
draggingStop.setAttribute('y', y);
|
||||
|
||||
// calculate stop offset
|
||||
var fracx = (x - MARGINX + STOP_RADIUS)/SIZEX;
|
||||
var fracy = (y - MARGINY + STOP_RADIUS)/SIZEY;
|
||||
|
||||
|
||||
if (draggingStop.id == (id+'_center_pt')) {
|
||||
cxInput.val(fracx);
|
||||
cyInput.val(fracy);
|
||||
$this.paint.radialGradient.setAttribute('cx', fracx);
|
||||
$this.paint.radialGradient.setAttribute('cy', fracy);
|
||||
|
||||
if(!showFocus) {
|
||||
$this.paint.radialGradient.setAttribute('fx', fracx);
|
||||
$this.paint.radialGradient.setAttribute('fy', fracy);
|
||||
}
|
||||
}
|
||||
else {
|
||||
colPicker.show();
|
||||
lgPicker.hide();
|
||||
$(idref + ' .jGraduate_tab_color').addClass('jGraduate_tab_current');
|
||||
$(idref + ' .jGraduate_tab_lingrad').removeClass('jGraduate_tab_current');
|
||||
fxInput.val(fracx);
|
||||
fyInput.val(fracy);
|
||||
$this.paint.radialGradient.setAttribute('fx', fracx);
|
||||
$this.paint.radialGradient.setAttribute('fy', fracy);
|
||||
}
|
||||
|
||||
evt.preventDefault();
|
||||
}
|
||||
});
|
||||
$('#'+id+'_rg_jgraduate_svg').mouseup(function(evt) {
|
||||
draggingStop = null;
|
||||
});
|
||||
|
||||
var centerColor = stops[0].getAttribute('stop-color');
|
||||
if(!centerColor) centerColor = '#000';
|
||||
centerColorBox = $('#'+id+'_jGraduate_colorBoxCenter');
|
||||
centerColorBox.css({'background-color':centerColor});
|
||||
|
||||
var centerOpacity = stops[0].getAttribute('stop-opacity');
|
||||
if(!centerOpacity) centerOpacity = '1.0';
|
||||
$('#'+id+'jGraduate_centerOpacity').html( (centerOpacity*100)+'%' );
|
||||
|
||||
var outerColor = stops[stops.length-1].getAttribute('stop-color');
|
||||
if(!outerColor) outerColor = '#000';
|
||||
outerColorBox = $('#'+id+'_jGraduate_colorBoxOuter');
|
||||
outerColorBox.css({'background-color':outerColor});
|
||||
|
||||
var outerOpacity = stops[stops.length-1].getAttribute('stop-opacity');
|
||||
if(!outerOpacity) outerOpacity = '1.0';
|
||||
$('#'+id+'rg_jGraduate_outerOpacity').html( (outerOpacity*100)+'%' );
|
||||
|
||||
$('#'+id+'_jGraduate_colorBoxCenter').click(function() {
|
||||
$('div.jGraduate_LightBox').show();
|
||||
var colorbox = $(this);
|
||||
var thisAlpha = (parseFloat(centerOpacity)*255).toString(16);
|
||||
while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
|
||||
color = centerColor.substr(1) + thisAlpha;
|
||||
$('#'+id+'_rg_jGraduate_stopPicker').css({'left': 100, 'bottom': 15}).jPicker({
|
||||
window: { title: "Pick the center color and opacity for the gradient" },
|
||||
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;
|
||||
colorbox.css('background', centerColor);
|
||||
$('#'+id+'_rg_jGraduate_centerOpacity').html(parseInt(centerOpacity*100)+'%');
|
||||
stops[0].setAttribute('stop-color', centerColor);
|
||||
stops[0].setAttribute('stop-opacity', centerOpacity);
|
||||
$('div.jGraduate_LightBox').hide();
|
||||
$('#'+id+'_rg_jGraduate_stopPicker').hide();
|
||||
}, null, function() {
|
||||
$('div.jGraduate_LightBox').hide();
|
||||
$('#'+id+'_rg_jGraduate_stopPicker').hide();
|
||||
});
|
||||
});
|
||||
$('#'+id+'_jGraduate_colorBoxOuter').click(function() {
|
||||
$('div.jGraduate_LightBox').show();
|
||||
var colorbox = $(this);
|
||||
var thisAlpha = (parseFloat(outerOpacity)*255).toString(16);
|
||||
while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
|
||||
color = outerColor.substr(1) + thisAlpha;
|
||||
$('#'+id+'_rg_jGraduate_stopPicker').css({'left': 100, 'top': 15}).jPicker({
|
||||
window: { title: "Pick the outer color and opacity for the gradient" },
|
||||
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;
|
||||
colorbox.css('background', outerColor);
|
||||
$('#'+id+'_jGraduate_outerOpacity').html(parseInt(outerOpacity*100)+'%');
|
||||
stops[1].setAttribute('stop-color', outerColor);
|
||||
stops[1].setAttribute('stop-opacity', outerOpacity);
|
||||
$('div.jGraduate_LightBox').hide();
|
||||
$('#'+id+'_rg_jGraduate_stopPicker').hide();
|
||||
}, null, function() {
|
||||
$('div.jGraduate_LightBox').hide();
|
||||
$('#'+id+'_rg_jGraduate_stopPicker').hide();
|
||||
});
|
||||
});
|
||||
|
||||
// --------------
|
||||
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;
|
||||
colPicker.jPicker(
|
||||
{
|
||||
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.radialGradient = null;
|
||||
okClicked();
|
||||
},
|
||||
null,
|
||||
function(){ cancelClicked(); }
|
||||
);
|
||||
}());
|
||||
|
||||
var tabs = $(idref + ' .jGraduate_tabs li');
|
||||
tabs.click(function() {
|
||||
tabs.removeClass('jGraduate_tab_current');
|
||||
$(this).addClass('jGraduate_tab_current');
|
||||
$(idref + " > div").hide();
|
||||
$(idref + ' .jGraduate_' + $(this).attr('data-type') + 'Pick').show();
|
||||
});
|
||||
|
||||
$(idref + " > div").hide();
|
||||
tabs.removeClass('jGraduate_tab_current');
|
||||
var tab;
|
||||
switch ( $this.paint.type ) {
|
||||
case 'linearGradient':
|
||||
tab = $(idref + ' .jGraduate_tab_lingrad');
|
||||
break;
|
||||
case 'radialGradient':
|
||||
tab = $(idref + ' .jGraduate_tab_radgrad');
|
||||
break;
|
||||
default:
|
||||
tab = $(idref + ' .jGraduate_tab_color');
|
||||
break;
|
||||
}
|
||||
tab.addClass('jGraduate_tab_current').click();
|
||||
|
||||
$this.show();
|
||||
});
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@
|
|||
<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/jGraduate-0.2.0.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"/>
|
||||
<!-- Development version of script tags: -->
|
||||
|
|
|
|||
|
|
@ -644,10 +644,9 @@ function svg_edit_setup() {
|
|||
// update the editor's fill paint
|
||||
var opts = null;
|
||||
if (color.substr(0,5) == "url(#") {
|
||||
opts = {
|
||||
alpha: opac,
|
||||
linearGradient: document.getElementById(color.substr(5,color.length-6))
|
||||
};
|
||||
var grad = document.getElementById(color.substr(5,color.length-6));
|
||||
opts = { alpha: opac };
|
||||
opts[grad.tagName] = grad;
|
||||
}
|
||||
else if (color.substr(0,1) == "#") {
|
||||
opts = {
|
||||
|
|
@ -1985,7 +1984,7 @@ function svg_edit_setup() {
|
|||
var was_none = false;
|
||||
var pos = elem.position();
|
||||
$("#color_picker")
|
||||
.draggable({cancel:'.jPicker_table,.jGraduate_lgPick'})
|
||||
.draggable({cancel:'.jPicker_table,.jGraduate_lgPick,.jGraduate_rgPick'})
|
||||
.css({'left': pos.left, 'bottom': 50 - pos.top})
|
||||
.jGraduate(
|
||||
{
|
||||
|
|
@ -1999,11 +1998,10 @@ function svg_edit_setup() {
|
|||
var oldgrad = document.getElementById("gradbox_"+picker);
|
||||
var svgbox = oldgrad.parentNode;
|
||||
var rectbox = svgbox.firstChild;
|
||||
|
||||
if (paint.type == "linearGradient") {
|
||||
if (paint.type == "linearGradient" || paint.type == "radialGradient") {
|
||||
svgbox.removeChild(oldgrad);
|
||||
var newgrad = svgbox.appendChild(document.importNode(paint.linearGradient, true));
|
||||
svgCanvas.fixOperaXML(newgrad, paint.linearGradient)
|
||||
var newgrad = svgbox.appendChild(document.importNode(paint[paint.type], true));
|
||||
svgCanvas.fixOperaXML(newgrad, paint[paint.type])
|
||||
newgrad.id = "gradbox_"+picker;
|
||||
rectbox.setAttribute("fill", "url(#gradbox_" + picker + ")");
|
||||
}
|
||||
|
|
@ -2815,7 +2813,7 @@ function svg_edit_setup() {
|
|||
updateCanvas(true);
|
||||
});
|
||||
|
||||
// var revnums = "svg-editor.js ($Rev: 1449 $) ";
|
||||
// var revnums = "svg-editor.js ($Rev: 1452 $) ";
|
||||
// revnums += svgCanvas.getVersion();
|
||||
// $('#copyright')[0].setAttribute("title", revnums);
|
||||
return svgCanvas;
|
||||
|
|
|
|||
|
|
@ -943,6 +943,14 @@ function BatchCommand(text) {
|
|||
|
||||
$(svgroot).appendTo(container);
|
||||
|
||||
var opac_ani = document.createElementNS(svgns, 'animate');
|
||||
$(opac_ani).attr({
|
||||
attributeName: 'opacity',
|
||||
begin: 'indefinite',
|
||||
dur: 1,
|
||||
fill: 'freeze'
|
||||
}).appendTo(svgroot);
|
||||
|
||||
//nonce to uniquify id's
|
||||
var nonce = Math.floor(Math.random()*100001);
|
||||
var randomize_ids = false;
|
||||
|
|
@ -1501,11 +1509,11 @@ function BatchCommand(text) {
|
|||
}
|
||||
});
|
||||
|
||||
var lgrads = svgcontent.getElementsByTagNameNS(svgns, "linearGradient"),
|
||||
var grads = $(svgcontent).find("linearGradient, radialGradient");
|
||||
grad_ids = [],
|
||||
i = lgrads.length;
|
||||
i = grads.length;
|
||||
while (i--) {
|
||||
var grad = lgrads[i];
|
||||
var grad = grads[i];
|
||||
var id = grad.id;
|
||||
if($.inArray(id, grad_uses) == -1) {
|
||||
// Not found, so remove
|
||||
|
|
@ -1600,7 +1608,7 @@ function BatchCommand(text) {
|
|||
|
||||
// map various namespaces to our fixed namespace prefixes
|
||||
// (the default xmlns attribute itself does not get a prefix)
|
||||
if(!attr.namespaceURI || nsMap[attr.namespaceURI]) {
|
||||
if(!attr.namespaceURI || attr.namespaceURI == svgns || nsMap[attr.namespaceURI]) {
|
||||
out.push(attr.nodeName); out.push("=\"");
|
||||
out.push(attrVal); out.push("\"");
|
||||
}
|
||||
|
|
@ -3677,6 +3685,21 @@ function BatchCommand(text) {
|
|||
|
||||
} else if (element != null) {
|
||||
canvas.addedNew = true;
|
||||
var ani_dur = .2, c_ani;
|
||||
if(opac_ani.beginElement && element.getAttribute('opacity') != cur_shape.opacity) {
|
||||
c_ani = $(opac_ani).clone().attr({
|
||||
to: cur_shape.opacity,
|
||||
dur: ani_dur
|
||||
}).appendTo(element);
|
||||
c_ani[0].beginElement();
|
||||
} else {
|
||||
ani_dur = 0;
|
||||
}
|
||||
|
||||
// Ideally this would be done on the endEvent of the animation,
|
||||
// but that doesn't seem to be supported in Webkit
|
||||
setTimeout(function() {
|
||||
if(c_ani) c_ani.remove();
|
||||
element.setAttribute("opacity", cur_shape.opacity);
|
||||
element.setAttribute("style", "pointer-events:inherit");
|
||||
cleanupElement(element);
|
||||
|
|
@ -3690,6 +3713,7 @@ function BatchCommand(text) {
|
|||
// undo means to call cmd.unapply(), redo means to call cmd.apply()
|
||||
addCommandToHistory(new InsertElementCommand(element));
|
||||
call("changed",[element]);
|
||||
}, ani_dur * 1000);
|
||||
}
|
||||
|
||||
start_transform = null;
|
||||
|
|
@ -6627,10 +6651,12 @@ function BatchCommand(text) {
|
|||
|
||||
var findDuplicateGradient = function(grad) {
|
||||
var defs = findDefs();
|
||||
var existing_grads = defs.getElementsByTagNameNS(svgns, "linearGradient");
|
||||
var existing_grads = $(defs).find("linearGradient, radialGradient");
|
||||
var i = existing_grads.length;
|
||||
var rad_attrs = ['r','cx','cy','fx','fy'];
|
||||
while (i--) {
|
||||
var og = existing_grads.item(i);
|
||||
var og = existing_grads[i];
|
||||
if(grad.tagName == "linearGradient") {
|
||||
if (grad.getAttribute('x1') != og.getAttribute('x1') ||
|
||||
grad.getAttribute('y1') != og.getAttribute('y1') ||
|
||||
grad.getAttribute('x2') != og.getAttribute('x2') ||
|
||||
|
|
@ -6638,6 +6664,17 @@ function BatchCommand(text) {
|
|||
{
|
||||
continue;
|
||||
}
|
||||
} else {
|
||||
var grad_attrs = $(grad).attr(rad_attrs);
|
||||
var og_attrs = $(og).attr(rad_attrs);
|
||||
|
||||
var diff = false;
|
||||
$.each(rad_attrs, function(i, attr) {
|
||||
if(grad_attrs[attr] != og_attrs[attr]) diff = true;
|
||||
});
|
||||
|
||||
if(diff) continue;
|
||||
}
|
||||
|
||||
// else could be a duplicate, iterate through stops
|
||||
var stops = grad.getElementsByTagNameNS(svgns, "stop");
|
||||
|
|
@ -6649,8 +6686,8 @@ function BatchCommand(text) {
|
|||
|
||||
var j = stops.length;
|
||||
while(j--) {
|
||||
var stop = stops.item(j);
|
||||
var ostop = ostops.item(j);
|
||||
var stop = stops[j];
|
||||
var ostop = ostops[j];
|
||||
|
||||
if (stop.getAttribute('offset') != ostop.getAttribute('offset') ||
|
||||
stop.getAttribute('stop-opacity') != ostop.getAttribute('stop-opacity') ||
|
||||
|
|
@ -6684,6 +6721,10 @@ function BatchCommand(text) {
|
|||
canvas.strokeGrad = p.linearGradient;
|
||||
if(addGrad) addGradient();
|
||||
}
|
||||
else if(p.type == "radialGradient") {
|
||||
canvas.strokeGrad = p.radialGradient;
|
||||
if(addGrad) addGradient();
|
||||
}
|
||||
else {
|
||||
// console.log("none!");
|
||||
}
|
||||
|
|
@ -6703,6 +6744,10 @@ function BatchCommand(text) {
|
|||
canvas.fillGrad = p.linearGradient;
|
||||
if(addGrad) addGradient();
|
||||
}
|
||||
else if(p.type == "radialGradient") {
|
||||
canvas.fillGrad = p.radialGradient;
|
||||
if(addGrad) addGradient();
|
||||
}
|
||||
else {
|
||||
// console.log("none!");
|
||||
}
|
||||
|
|
@ -7990,7 +8035,7 @@ function BatchCommand(text) {
|
|||
// Function: getVersion
|
||||
// Returns a string which describes the revision number of SvgCanvas.
|
||||
this.getVersion = function() {
|
||||
return "svgcanvas.js ($Rev: 1450 $)";
|
||||
return "svgcanvas.js ($Rev: 1454 $)";
|
||||
};
|
||||
|
||||
this.setUiStrings = function(strs) {
|
||||
|
|
|
|||
Loading…
Reference in a new issue