jquery.jgraduate.js 43 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974975976977978979980981982983984985986987988989990991992993994995996997998999100010011002100310041005100610071008100910101011101210131014101510161017101810191020102110221023102410251026102710281029103010311032103310341035103610371038103910401041104210431044104510461047104810491050105110521053105410551056105710581059106010611062106310641065106610671068106910701071107210731074
  1. /*
  2. * jGraduate 0.3.x
  3. *
  4. * jQuery Plugin for a gradient picker
  5. *
  6. * Copyright (c) 2010 Jeff Schiller
  7. * http://blog.codedread.com/
  8. * Copyright (c) 2010 Alexis Deveria
  9. * http://a.deveria.com/
  10. *
  11. * Apache 2 License
  12. jGraduate( options, okCallback, cancelCallback )
  13. where options is an object literal:
  14. {
  15. window: { title: "Pick the start color and opacity for the gradient" },
  16. images: { clientPath: "images/" },
  17. paint: a Paint object
  18. }
  19. - the Paint object is:
  20. Paint {
  21. type: String, // one of "none", "solidColor", "linearGradient", "radialGradient"
  22. alpha: Number representing opacity (0-100),
  23. solidColor: String representing #RRGGBB hex of color,
  24. linearGradient: object of interface SVGLinearGradientElement,
  25. radialGradient: object of interface SVGRadialGradientElement,
  26. }
  27. $.jGraduate.Paint() -> constructs a 'none' color
  28. $.jGraduate.Paint({copy: o}) -> creates a copy of the paint o
  29. $.jGraduate.Paint({hex: "#rrggbb"}) -> creates a solid color paint with hex = "#rrggbb"
  30. $.jGraduate.Paint({linearGradient: o, a: 50}) -> creates a linear gradient paint with opacity=0.5
  31. $.jGraduate.Paint({radialGradient: o, a: 7}) -> creates a radial gradient paint with opacity=0.07
  32. $.jGraduate.Paint({hex: "#rrggbb", linearGradient: o}) -> throws an exception?
  33. - picker accepts the following object as input:
  34. {
  35. okCallback: function to call when Ok is pressed
  36. cancelCallback: function to call when Cancel is pressed
  37. paint: object describing the paint to display initially, if not set, then default to opaque white
  38. }
  39. - okCallback receives a Paint object
  40. *
  41. */
  42. (function() {
  43. var ns = { svg: 'http://www.w3.org/2000/svg', xlink: 'http://www.w3.org/1999/xlink' };
  44. if(!window.console) {
  45. window.console = new function() {
  46. this.log = function(str) {};
  47. this.dir = function(str) {};
  48. };
  49. }
  50. $.jGraduate = {
  51. Paint:
  52. function(opt) {
  53. var options = opt || {};
  54. this.alpha = options.alpha || 100;
  55. // copy paint object
  56. if (options.copy) {
  57. this.type = options.copy.type;
  58. this.alpha = options.copy.alpha;
  59. this.solidColor = null;
  60. this.linearGradient = null;
  61. this.radialGradient = null;
  62. switch(this.type) {
  63. case "none":
  64. break;
  65. case "solidColor":
  66. this.solidColor = options.copy.solidColor;
  67. break;
  68. case "linearGradient":
  69. this.linearGradient = options.copy.linearGradient.cloneNode(true);
  70. break;
  71. case "radialGradient":
  72. this.radialGradient = options.copy.radialGradient.cloneNode(true);
  73. break;
  74. }
  75. }
  76. // create linear gradient paint
  77. else if (options.linearGradient) {
  78. this.type = "linearGradient";
  79. this.solidColor = null;
  80. this.radialGradient = null;
  81. this.linearGradient = options.linearGradient.cloneNode(true);
  82. }
  83. // create linear gradient paint
  84. else if (options.radialGradient) {
  85. this.type = "radialGradient";
  86. this.solidColor = null;
  87. this.linearGradient = null;
  88. this.radialGradient = options.radialGradient.cloneNode(true);
  89. }
  90. // create solid color paint
  91. else if (options.solidColor) {
  92. this.type = "solidColor";
  93. this.solidColor = options.solidColor;
  94. }
  95. // create empty paint
  96. else {
  97. this.type = "none";
  98. this.solidColor = null;
  99. this.linearGradient = null;
  100. this.radialGradient = null;
  101. }
  102. }
  103. };
  104. jQuery.fn.jGraduateDefaults = {
  105. paint: new $.jGraduate.Paint(),
  106. window: {
  107. pickerTitle: "Drag markers to pick a paint",
  108. },
  109. images: {
  110. clientPath: "images/",
  111. },
  112. };
  113. jQuery.fn.jGraduate =
  114. function(options) {
  115. var $arguments = arguments;
  116. return this.each( function() {
  117. var $this = $(this), $settings = $.extend(true, {}, jQuery.fn.jGraduateDefaults, options),
  118. id = $this.attr('id'),
  119. idref = '#'+$this.attr('id')+' ';
  120. if (!idref)
  121. {
  122. alert('Container element must have an id attribute to maintain unique id strings for sub-elements.');
  123. return;
  124. }
  125. var okClicked = function() {
  126. // TODO: Fix this ugly hack
  127. if($this.paint.type == "radialGradient") {
  128. $this.paint.linearGradient = null;
  129. } else if($this.paint.type == "linearGradient") {
  130. $this.paint.radialGradient = null;
  131. } else if($this.paint.type == "solidColor") {
  132. $this.paint.linearGradient = null;
  133. $this.paint.radialGradient = null;
  134. }
  135. $.isFunction($this.okCallback) && $this.okCallback($this.paint);
  136. $this.hide();
  137. },
  138. cancelClicked = function() {
  139. $.isFunction($this.cancelCallback) && $this.cancelCallback();
  140. $this.hide();
  141. };
  142. $.extend(true, $this, // public properties, methods, and callbacks
  143. {
  144. // make a copy of the incoming paint
  145. paint: new $.jGraduate.Paint({copy: $settings.paint}),
  146. okCallback: $.isFunction($arguments[1]) && $arguments[1] || null,
  147. cancelCallback: $.isFunction($arguments[2]) && $arguments[2] || null,
  148. });
  149. var pos = $this.position(),
  150. color = null;
  151. if ($this.paint.type == "none") {
  152. $this.paint = $.jGraduate.Paint({solidColor: 'ffffff'});
  153. }
  154. $this.addClass('jGraduate_Picker');
  155. $this.html('<ul class="jGraduate_tabs">' +
  156. '<li class="jGraduate_tab_color jGraduate_tab_current" data-type="col">Solid Color</li>' +
  157. '<li class="jGraduate_tab_lingrad" data-type="lg">Linear Gradient</li>' +
  158. '<li class="jGraduate_tab_radgrad" data-type="rg">Radial Gradient</li>' +
  159. '</ul>' +
  160. '<div class="jGraduate_colPick"></div>' +
  161. '<div class="jGraduate_lgPick"></div>' +
  162. '<div class="jGraduate_rgPick"></div>');
  163. var colPicker = $(idref + '> .jGraduate_colPick');
  164. var lgPicker = $(idref + '> .jGraduate_lgPick');
  165. var rgPicker = $(idref + '> .jGraduate_rgPick');
  166. lgPicker.html(
  167. '<div id="' + id + '_jGraduate_Swatch" class="jGraduate_Swatch">' +
  168. '<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
  169. '<div id="' + id + '_lg_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
  170. '<div id="' + id + '_lg_jGraduate_Opacity" class="jGraduate_Opacity" title="Click to set overall opacity of the gradient paint">' +
  171. '<img id="' + id + '_lg_jGraduate_AlphaArrows" class="jGraduate_AlphaArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' +
  172. '</div>' +
  173. '</div>' +
  174. '<div class="jGraduate_Form">' +
  175. '<div class="jGraduate_StopSection">' +
  176. '<label class="jGraduate_Form_Heading">Begin Stop</label>' +
  177. '<div class="jGraduate_Form_Section">' +
  178. '<label>x:</label>' +
  179. '<input type="text" id="' + id + '_jGraduate_x1" size="3" title="Enter starting x value between 0.0 and 1.0"/>' +
  180. '<label> y:</label>' +
  181. '<input type="text" id="' + id + '_jGraduate_y1" size="3" title="Enter starting y value between 0.0 and 1.0"/>' +
  182. '<div id="' + id + '_jGraduate_colorBoxBegin" class="colorBox"></div>' +
  183. '<label id="' + id + '_jGraduate_beginOpacity"> 100%</label>' +
  184. '</div>' +
  185. '</div>' +
  186. '<div class="jGraduate_StopSection">' +
  187. '<label class="jGraduate_Form_Heading">End Stop</label>' +
  188. '<div class="jGraduate_Form_Section">' +
  189. '<label>x:</label>' +
  190. '<input type="text" id="' + id + '_jGraduate_x2" size="3" title="Enter ending x value between 0.0 and 1.0"/>' +
  191. '<label> y:</label>' +
  192. '<input type="text" id="' + id + '_jGraduate_y2" size="3" title="Enter ending y value between 0.0 and 1.0"/>' +
  193. '<div id="' + id + '_jGraduate_colorBoxEnd" class="colorBox"></div>' +
  194. '<label id="' + id + '_jGraduate_endOpacity">100%</label>' +
  195. '</div>' +
  196. '</div>' +
  197. '<div class="lg_jGraduate_OpacityField">' +
  198. '<label class="lg_jGraduate_OpacityLabel">A: </label>' +
  199. '<input type="text" id="' + id + '_lg_jGraduate_OpacityInput" class="jGraduate_OpacityInput" size="3" value="100"/>%' +
  200. '</div>' +
  201. '</div>' +
  202. '<div class="jGraduate_OkCancel">' +
  203. '<input type="button" id="' + id + '_lg_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
  204. '<input type="button" id="' + id + '_lg_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
  205. '</div>' +
  206. '<div class="jGraduate_LightBox"></div>' +
  207. '<div id="' + id + '_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>');
  208. rgPicker.html(
  209. '<div class="jGraduate_Swatch">' +
  210. '<h2 class="jGraduate_Title">' + $settings.window.pickerTitle + '</h2>' +
  211. '<div id="' + id + '_rg_jGraduate_GradContainer" class="jGraduate_GradContainer"></div>' +
  212. '<div id="' + id + '_rg_jGraduate_Opacity" class="jGraduate_Opacity" title="Click to set overall opacity of the gradient paint">' +
  213. '<img id="' + id + '_rg_jGraduate_AlphaArrows" class="jGraduate_AlphaArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' +
  214. '</div>' +
  215. '</div>' +
  216. '<div id="jGraduate_radColors" class="jGraduate_StopSection">' +
  217. '<label class="jGraduate_Form_Heading">Colors</label>' +
  218. '<div class="jGraduate_Form_Section jGraduate_Colorblocks">' +
  219. '<div class="jGraduate_colorblock"><span>Center:</span>' +
  220. '<div id="' + id + '_jGraduate_colorBoxCenter" class="colorBox"></div>' +
  221. '<label id="' + id + '_rg_jGraduate_centerOpacity"> 100%</label></div>' +
  222. '<div class="jGraduate_colorblock"><span>Outer:</span>' +
  223. '<div id="' + id + '_jGraduate_colorBoxOuter" class="colorBox"></div>' +
  224. '<label id="' + id + '_jGraduate_outerOpacity"> 100%</label></div>' +
  225. '</div>' +
  226. '</div>' +
  227. '<div class="jGraduate_StopSection">' +
  228. '</div>' +
  229. '<div class="jGraduate_Form">' +
  230. '<div class="jGraduate_StopSection">' +
  231. '<label class="jGraduate_Form_Heading">Center Point</label>' +
  232. '<div class="jGraduate_Form_Section">' +
  233. '<label>x:</label>' +
  234. '<input type="text" id="' + id + '_jGraduate_cx" size="3" title="Enter x value between 0.0 and 1.0"/>' +
  235. '<label> y:</label>' +
  236. '<input type="text" id="' + id + '_jGraduate_cy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
  237. '</div>' +
  238. '</div>' +
  239. '<div class="jGraduate_StopSection">' +
  240. '<label class="jGraduate_Form_Heading">Focal Point</label>' +
  241. '<div class="jGraduate_Form_Section">' +
  242. '<label>Match center: <input type="checkbox" checked="checked" id="' + id + '_jGraduate_match_ctr"/></label><br/>' +
  243. '<label>x:</label>' +
  244. '<input type="text" id="' + id + '_jGraduate_fx" size="3" title="Enter x value between 0.0 and 1.0"/>' +
  245. '<label> y:</label>' +
  246. '<input type="text" id="' + id + '_jGraduate_fy" size="3" title="Enter y value between 0.0 and 1.0"/>' +
  247. '</div>' +
  248. '</div>' +
  249. '<div class="jGraduate_RadiusField">' +
  250. '<label class="jGraduate_Form_Heading">Radius</label>' +
  251. '<div class="jGraduate_Form_Section">' +
  252. '<div id="' + id + '_jGraduate_RadiusContainer" class="jGraduate_RadiusContainer"></div>' +
  253. '<input type="text" id="' + id + '_jGraduate_RadiusInput" size="3" value="100"/>%' +
  254. '<div id="' + id + '_jGraduate_Radius" class="jGraduate_Radius" title="Click to set radius">' +
  255. '<img id="' + id + '_jGraduate_RadiusArrows" class="jGraduate_RadiusArrows" src="' + $settings.images.clientPath + 'rangearrows2.gif"></img>' +
  256. '</div>' +
  257. '</div>' +
  258. '</div>' +
  259. '</div>' +
  260. '<div class="rg_jGraduate_OpacityField">' +
  261. '<label class="rg_jGraduate_OpacityLabel">A: </label>' +
  262. '<input type="text" id="' + id + '_rg_jGraduate_OpacityInput" class="jGraduate_OpacityInput" size="3" value="100"/>%' +
  263. '</div>' +
  264. '<div class="jGraduate_OkCancel">' +
  265. '<input type="button" id="' + id + '_rg_jGraduate_Ok" class="jGraduate_Ok" value="OK"/>' +
  266. '<input type="button" id="' + id + '_rg_jGraduate_Cancel" class="jGraduate_Cancel" value="Cancel"/>' +
  267. '</div>' +
  268. '<div class="jGraduate_LightBox"></div>' +
  269. '<div id="' + id + '_rg_jGraduate_stopPicker" class="jGraduate_stopPicker"></div>');
  270. // --------------
  271. // Set up all the SVG elements (the gradient, stops and rectangle)
  272. var MAX = 256, MARGINX = 0, MARGINY = 0, STOP_RADIUS = 15/2,
  273. SIZEX = MAX - 2*MARGINX, SIZEY = MAX - 2*MARGINY;
  274. $.each(['lg', 'rg'], function(i) {
  275. var grad_id = id + '_' + this;
  276. var container = document.getElementById(grad_id+'_jGraduate_GradContainer');
  277. var svg = container.appendChild(document.createElementNS(ns.svg, 'svg'));
  278. svg.id = grad_id + '_jgraduate_svg';
  279. svg.setAttribute('width', MAX);
  280. svg.setAttribute('height', MAX);
  281. svg.setAttribute("xmlns", ns.svg);
  282. });
  283. // Linear gradient
  284. (function() {
  285. var svg = document.getElementById(id + '_lg_jgraduate_svg');
  286. // if we are sent a gradient, import it
  287. if ($this.paint.type == "linearGradient") {
  288. $this.paint.linearGradient.id = id+'_jgraduate_grad';
  289. $this.paint.linearGradient = svg.appendChild($this.paint.linearGradient.cloneNode(true));
  290. } else { // we create a gradient
  291. var grad = svg.appendChild(document.createElementNS(ns.svg, 'linearGradient'));
  292. grad.id = id+'_jgraduate_grad';
  293. grad.setAttribute('x1','0.0');
  294. grad.setAttribute('y1','0.0');
  295. grad.setAttribute('x2','1.0');
  296. grad.setAttribute('y2','1.0');
  297. var begin = grad.appendChild(document.createElementNS(ns.svg, 'stop'));
  298. begin.setAttribute('offset', '0.0');
  299. begin.setAttribute('stop-color', '#ff0000');
  300. var end = grad.appendChild(document.createElementNS(ns.svg, 'stop'));
  301. end.setAttribute('offset', '1.0');
  302. end.setAttribute('stop-color', '#ffff00');
  303. $this.paint.linearGradient = grad;
  304. }
  305. var gradalpha = $this.paint.alpha;
  306. $('#' + id + '_lg_jGraduate_OpacityInput').val(gradalpha);
  307. var posx = parseInt(255*(gradalpha/100)) - 4.5;
  308. $('#' + id + '_lg_jGraduate_AlphaArrows').css({'margin-left':posx});
  309. var x1 = parseFloat($this.paint.linearGradient.getAttribute('x1')||0.0),
  310. y1 = parseFloat($this.paint.linearGradient.getAttribute('y1')||0.0),
  311. x2 = parseFloat($this.paint.linearGradient.getAttribute('x2')||1.0),
  312. y2 = parseFloat($this.paint.linearGradient.getAttribute('y2')||0.0);
  313. var rect = document.createElementNS(ns.svg, 'rect');
  314. rect.id = id + '_lg_jgraduate_rect';
  315. rect.setAttribute('x', MARGINX);
  316. rect.setAttribute('y', MARGINY);
  317. rect.setAttribute('width', SIZEY);
  318. rect.setAttribute('height', SIZEY);
  319. rect.setAttribute('fill', 'url(#'+id+'_jgraduate_grad)');
  320. rect.setAttribute('fill-opacity', '1.0');
  321. rect = svg.appendChild(rect);
  322. $('#' + id + '_lg_jgraduate_rect').attr('fill-opacity', gradalpha/100);
  323. // stop visuals created here
  324. var beginStop = document.createElementNS(ns.svg, 'image');
  325. beginStop.id = id + "_stop1";
  326. beginStop.setAttribute('class', 'stop');
  327. beginStop.setAttributeNS(ns.xlink, 'href', $settings.images.clientPath + 'mappoint.gif');
  328. beginStop.setAttributeNS(ns.xlink, "title", "Begin Stop");
  329. beginStop.appendChild(document.createElementNS(ns.svg, 'title')).appendChild(
  330. document.createTextNode("Begin Stop"));
  331. beginStop.setAttribute('width', 18);
  332. beginStop.setAttribute('height', 18);
  333. beginStop.setAttribute('x', MARGINX + SIZEX*x1 - STOP_RADIUS);
  334. beginStop.setAttribute('y', MARGINY + SIZEY*y1 - STOP_RADIUS);
  335. beginStop.setAttribute('cursor', 'move');
  336. // must append only after setting all attributes due to Webkit Bug 27952
  337. // https://bugs.webkit.org/show_bug.cgi?id=27592
  338. beginStop = svg.appendChild(beginStop);
  339. var endStop = document.createElementNS(ns.svg, 'image');
  340. endStop.id = id + "_stop2";
  341. endStop.setAttribute('class', 'stop');
  342. endStop.setAttributeNS(ns.xlink, 'href', $settings.images.clientPath + 'mappoint.gif');
  343. endStop.setAttributeNS(ns.xlink, "title", "End Stop");
  344. endStop.appendChild(document.createElementNS(ns.svg, 'title')).appendChild(
  345. document.createTextNode("End Stop"));
  346. endStop.setAttribute('width', 18);
  347. endStop.setAttribute('height', 18);
  348. endStop.setAttribute('x', MARGINX + SIZEX*x2 - STOP_RADIUS);
  349. endStop.setAttribute('y', MARGINY + SIZEY*y2 - STOP_RADIUS);
  350. endStop.setAttribute('cursor', 'move');
  351. endStop = svg.appendChild(endStop);
  352. // bind GUI elements
  353. $('#'+id+'_lg_jGraduate_Ok').bind('click', function() {
  354. $this.paint.type = "linearGradient";
  355. $this.paint.solidColor = null;
  356. okClicked();
  357. });
  358. $('#'+id+'_lg_jGraduate_Cancel').bind('click', function(paint) {
  359. cancelClicked();
  360. });
  361. var x1 = $this.paint.linearGradient.getAttribute('x1');
  362. if(!x1) x1 = "0.0";
  363. var x1Input = $('#'+id+'_jGraduate_x1');
  364. x1Input.val(x1);
  365. x1Input.change( function() {
  366. if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
  367. this.value = 0.0;
  368. }
  369. $this.paint.linearGradient.setAttribute('x1', this.value);
  370. beginStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS);
  371. });
  372. var y1 = $this.paint.linearGradient.getAttribute('y1');
  373. if(!y1) y1 = "0.0";
  374. var y1Input = $('#'+id+'_jGraduate_y1');
  375. y1Input.val(y1);
  376. y1Input.change( function() {
  377. if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
  378. this.value = 0.0;
  379. }
  380. $this.paint.linearGradient.setAttribute('y1', this.value);
  381. beginStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS);
  382. });
  383. var x2 = $this.paint.linearGradient.getAttribute('x2');
  384. if(!x2) x2 = "1.0";
  385. var x2Input = $('#'+id+'_jGraduate_x2');
  386. x2Input.val(x2);
  387. x2Input.change( function() {
  388. if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
  389. this.value = 1.0;
  390. }
  391. $this.paint.linearGradient.setAttribute('x2', this.value);
  392. endStop.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS);
  393. });
  394. var y2 = $this.paint.linearGradient.getAttribute('y2');
  395. if(!y2) y2 = "0.0";
  396. y2Input = $('#'+id+'_jGraduate_y2');
  397. y2Input.val(y2);
  398. y2Input.change( function() {
  399. if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
  400. this.value = 0.0;
  401. }
  402. $this.paint.linearGradient.setAttribute('y2', this.value);
  403. endStop.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS);
  404. });
  405. var stops = $this.paint.linearGradient.getElementsByTagNameNS(ns.svg, 'stop');
  406. var numstops = stops.length;
  407. // if there are not at least two stops, then
  408. if (numstops < 2) {
  409. while (numstops < 2) {
  410. $this.paint.linearGradient.appendChild( document.createElementNS(ns.svg, 'stop') );
  411. ++numstops;
  412. }
  413. stops = $this.paint.linearGradient.getElementsByTagNameNS(ns.svg, 'stop');
  414. }
  415. var setLgOpacitySlider = function(e, div) {
  416. var offset = div.offset();
  417. var x = (e.pageX - offset.left - parseInt(div.css('border-left-width')));
  418. if (x > 255) x = 255;
  419. if (x < 0) x = 0;
  420. var posx = x - 4.5;
  421. x /= 255;
  422. $('#' + id + '_lg_jGraduate_AlphaArrows').css({'margin-left':posx});
  423. $('#' + id + '_lg_jgraduate_rect').attr('fill-opacity', x);
  424. x = parseInt(x*100);
  425. $('#' + id + '_lg_jGraduate_OpacityInput').val(x);
  426. $this.paint.alpha = x;
  427. };
  428. // handle dragging on the opacity slider
  429. var bSlidingOpacity = false;
  430. $('#' + id + '_lg_jGraduate_Opacity').mousedown(function(evt) {
  431. setLgOpacitySlider(evt, $(this));
  432. bSlidingOpacity = true;
  433. evt.preventDefault();
  434. }).mousemove(function(evt) {
  435. if (bSlidingOpacity) {
  436. setLgOpacitySlider(evt, $(this));
  437. evt.preventDefault();
  438. }
  439. }).mouseup(function(evt) {
  440. setLgOpacitySlider(evt, $(this));
  441. bSlidingOpacity = false;
  442. evt.preventDefault();
  443. });
  444. // handle dragging the stop around the swatch
  445. var draggingStop = null;
  446. var startx = -1, starty = -1;
  447. // for whatever reason, Opera does not allow $('image.stop') here,
  448. // and Firefox 1.5 does not allow $('.stop')
  449. $('.stop, #color_picker_lg_jGraduate_GradContainer image').mousedown(function(evt) {
  450. draggingStop = this;
  451. startx = evt.clientX;
  452. starty = evt.clientY;
  453. evt.preventDefault();
  454. });
  455. $('#'+id+'_lg_jgraduate_svg').mousemove(function(evt) {
  456. if (null != draggingStop) {
  457. var dx = evt.clientX - startx;
  458. var dy = evt.clientY - starty;
  459. startx += dx;
  460. starty += dy;
  461. var x = parseFloat(draggingStop.getAttribute('x')) + dx;
  462. var y = parseFloat(draggingStop.getAttribute('y')) + dy;
  463. // clamp stop to the swatch
  464. if (x < MARGINX - STOP_RADIUS) x = MARGINX - STOP_RADIUS;
  465. if (y < MARGINY - STOP_RADIUS) y = MARGINY - STOP_RADIUS;
  466. if (x > MARGINX + SIZEX - STOP_RADIUS) x = MARGINX + SIZEX - STOP_RADIUS;
  467. if (y > MARGINY + SIZEY - STOP_RADIUS) y = MARGINY + SIZEY - STOP_RADIUS;
  468. draggingStop.setAttribute('x', x);
  469. draggingStop.setAttribute('y', y);
  470. // calculate stop offset
  471. var fracx = (x - MARGINX + STOP_RADIUS)/SIZEX;
  472. var fracy = (y - MARGINY + STOP_RADIUS)/SIZEY;
  473. if (draggingStop.id == (id+'_stop1')) {
  474. x1Input.val(fracx);
  475. y1Input.val(fracy);
  476. $this.paint.linearGradient.setAttribute('x1', fracx);
  477. $this.paint.linearGradient.setAttribute('y1', fracy);
  478. }
  479. else {
  480. x2Input.val(fracx);
  481. y2Input.val(fracy);
  482. $this.paint.linearGradient.setAttribute('x2', fracx);
  483. $this.paint.linearGradient.setAttribute('y2', fracy);
  484. }
  485. evt.preventDefault();
  486. }
  487. });
  488. $('#'+id+'_lg_jgraduate_svg').mouseup(function(evt) {
  489. draggingStop = null;
  490. });
  491. var beginColor = stops[0].getAttribute('stop-color');
  492. if(!beginColor) beginColor = '#000';
  493. beginColorBox = $('#'+id+'_jGraduate_colorBoxBegin');
  494. beginColorBox.css({'background-color':beginColor});
  495. var beginOpacity = stops[0].getAttribute('stop-opacity');
  496. if(!beginOpacity) beginOpacity = '1.0';
  497. $('#'+id+'lg_jGraduate_beginOpacity').html( (beginOpacity*100)+'%' );
  498. var endColor = stops[stops.length-1].getAttribute('stop-color');
  499. if(!endColor) endColor = '#000';
  500. endColorBox = $('#'+id+'_jGraduate_colorBoxEnd');
  501. endColorBox.css({'background-color':endColor});
  502. var endOpacity = stops[stops.length-1].getAttribute('stop-opacity');
  503. if(!endOpacity) endOpacity = '1.0';
  504. $('#'+id+'jGraduate_endOpacity').html( (endOpacity*100)+'%' );
  505. $('#'+id+'_jGraduate_colorBoxBegin').click(function() {
  506. $('div.jGraduate_LightBox').show();
  507. var colorbox = $(this);
  508. var thisAlpha = (parseFloat(beginOpacity)*255).toString(16);
  509. while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
  510. color = beginColor.substr(1) + thisAlpha;
  511. $('#'+id+'_jGraduate_stopPicker').css({'left': 100, 'bottom': 15}).jPicker({
  512. window: { title: "Pick the start color and opacity for the gradient" },
  513. images: { clientPath: $settings.images.clientPath },
  514. color: { active: color, alphaSupport: true }
  515. }, function(color){
  516. beginColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none";
  517. beginOpacity = color.get_A() ? color.get_A()/100 : 1;
  518. colorbox.css('background', beginColor);
  519. $('#'+id+'_jGraduate_beginOpacity').html(parseInt(beginOpacity*100)+'%');
  520. stops[0].setAttribute('stop-color', beginColor);
  521. stops[0].setAttribute('stop-opacity', beginOpacity);
  522. $('div.jGraduate_LightBox').hide();
  523. $('#'+id+'_jGraduate_stopPicker').hide();
  524. }, null, function() {
  525. $('div.jGraduate_LightBox').hide();
  526. $('#'+id+'_jGraduate_stopPicker').hide();
  527. });
  528. });
  529. $('#'+id+'_jGraduate_colorBoxEnd').click(function() {
  530. $('div.jGraduate_LightBox').show();
  531. var colorbox = $(this);
  532. var thisAlpha = (parseFloat(endOpacity)*255).toString(16);
  533. while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
  534. color = endColor.substr(1) + thisAlpha;
  535. $('#'+id+'_jGraduate_stopPicker').css({'left': 100, 'top': 15}).jPicker({
  536. window: { title: "Pick the end color and opacity for the gradient" },
  537. images: { clientPath: $settings.images.clientPath },
  538. color: { active: color, alphaSupport: true }
  539. }, function(color){
  540. endColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none";
  541. endOpacity = color.get_A() ? color.get_A()/100 : 1;
  542. colorbox.css('background', endColor);
  543. $('#'+id+'_jGraduate_endOpacity').html(parseInt(endOpacity*100)+'%');
  544. stops[1].setAttribute('stop-color', endColor);
  545. stops[1].setAttribute('stop-opacity', endOpacity);
  546. $('div.jGraduate_LightBox').hide();
  547. $('#'+id+'_jGraduate_stopPicker').hide();
  548. }, null, function() {
  549. $('div.jGraduate_LightBox').hide();
  550. $('#'+id+'_jGraduate_stopPicker').hide();
  551. });
  552. });
  553. // --------------
  554. var thisAlpha = ($this.paint.alpha*255/100).toString(16);
  555. while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
  556. color = $this.paint.solidColor == "none" ? "" : $this.paint.solidColor + thisAlpha;
  557. colPicker.jPicker(
  558. {
  559. window: { title: $settings.window.pickerTitle },
  560. images: { clientPath: $settings.images.clientPath },
  561. color: { active: color, alphaSupport: true }
  562. },
  563. function(color) {
  564. $this.paint.type = "solidColor";
  565. $this.paint.alpha = color.get_A() ? color.get_A() : 100;
  566. $this.paint.solidColor = color.get_Hex() ? color.get_Hex() : "none";
  567. $this.paint.linearGradient = null;
  568. okClicked();
  569. },
  570. null,
  571. function(){ cancelClicked(); }
  572. );
  573. }());
  574. // Radial gradient
  575. (function() {
  576. var svg = document.getElementById(id + '_rg_jgraduate_svg');
  577. // if we are sent a gradient, import it
  578. if ($this.paint.type == "radialGradient") {
  579. $this.paint.radialGradient.id = id+'_rg_jgraduate_grad';
  580. $this.paint.radialGradient = svg.appendChild($this.paint.radialGradient.cloneNode(true));
  581. } else { // we create a gradient
  582. var grad = svg.appendChild(document.createElementNS(ns.svg, 'radialGradient'));
  583. grad.id = id+'_rg_jgraduate_grad';
  584. grad.setAttribute('cx','0.5');
  585. grad.setAttribute('cy','0.5');
  586. grad.setAttribute('r','0.5');
  587. var begin = grad.appendChild(document.createElementNS(ns.svg, 'stop'));
  588. begin.setAttribute('offset', '0.0');
  589. begin.setAttribute('stop-color', '#ff0000');
  590. var end = grad.appendChild(document.createElementNS(ns.svg, 'stop'));
  591. end.setAttribute('offset', '1.0');
  592. end.setAttribute('stop-color', '#ffff00');
  593. $this.paint.radialGradient = grad;
  594. }
  595. var gradalpha = $this.paint.alpha;
  596. $('#' + id + '_rg_jGraduate_OpacityInput').val(gradalpha);
  597. var posx = parseInt(255*(gradalpha/100)) - 4.5;
  598. $('#' + id + '_rg_jGraduate_AlphaArrows').css({'margin-left':posx});
  599. var grad = $this.paint.radialGradient;
  600. var cx = parseFloat(grad.getAttribute('cx')||0.5),
  601. cy = parseFloat(grad.getAttribute('cy')||0.5),
  602. fx = parseFloat(grad.getAttribute('fx')||0.5),
  603. fy = parseFloat(grad.getAttribute('fy')||0.5);
  604. // No match, so show focus point
  605. var showFocus = grad.getAttribute('fx') != null && !(cx == fx && cy == fy);
  606. var rect = document.createElementNS(ns.svg, 'rect');
  607. rect.id = id + '_rg_jgraduate_rect';
  608. rect.setAttribute('x', MARGINX);
  609. rect.setAttribute('y', MARGINY);
  610. rect.setAttribute('width', SIZEY);
  611. rect.setAttribute('height', SIZEY);
  612. rect.setAttribute('fill', 'url(#'+id+'_rg_jgraduate_grad)');
  613. rect.setAttribute('fill-opacity', '1.0');
  614. rect = svg.appendChild(rect);
  615. $('#' + id + '_rg_jgraduate_rect').attr('fill-opacity', gradalpha/100);
  616. // stop visuals created here
  617. var centerPoint = document.createElementNS(ns.svg, 'image');
  618. centerPoint.id = id + "_center_pt";
  619. centerPoint.setAttribute('class', 'stop');
  620. centerPoint.setAttributeNS(ns.xlink, 'href', $settings.images.clientPath + 'mappoint_c.png');
  621. centerPoint.setAttributeNS(ns.xlink, "title", "Center Point");
  622. centerPoint.appendChild(document.createElementNS(ns.svg, 'title')).appendChild(
  623. document.createTextNode("Center Point"));
  624. centerPoint.setAttribute('width', 18);
  625. centerPoint.setAttribute('height', 18);
  626. centerPoint.setAttribute('x', MARGINX + SIZEX*cx - STOP_RADIUS);
  627. centerPoint.setAttribute('y', MARGINY + SIZEY*cy - STOP_RADIUS);
  628. centerPoint.setAttribute('cursor', 'move');
  629. var focusPoint = document.createElementNS(ns.svg, 'image');
  630. focusPoint.id = id + "_focus_pt";
  631. focusPoint.setAttribute('class', 'stop');
  632. focusPoint.setAttributeNS(ns.xlink, 'href', $settings.images.clientPath + 'mappoint_f.png');
  633. focusPoint.setAttributeNS(ns.xlink, "title", "Focus Point");
  634. focusPoint.appendChild(document.createElementNS(ns.svg, 'title')).appendChild(
  635. document.createTextNode("Focus Point"));
  636. focusPoint.setAttribute('width', 18);
  637. focusPoint.setAttribute('height', 18);
  638. focusPoint.setAttribute('x', MARGINX + SIZEX*fx - STOP_RADIUS);
  639. focusPoint.setAttribute('y', MARGINY + SIZEY*fy - STOP_RADIUS);
  640. focusPoint.setAttribute('cursor', 'move');
  641. // must append only after setting all attributes due to Webkit Bug 27952
  642. // https://bugs.webkit.org/show_bug.cgi?id=27592
  643. // centerPoint is added last so it is moved first
  644. focusPoint = svg.appendChild(focusPoint);
  645. centerPoint = svg.appendChild(centerPoint);
  646. // bind GUI elements
  647. $('#'+id+'_rg_jGraduate_Ok').bind('click', function() {
  648. $this.paint.type = "radialGradient";
  649. $this.paint.solidColor = null;
  650. okClicked();
  651. });
  652. $('#'+id+'_rg_jGraduate_Cancel').bind('click', function(paint) {
  653. cancelClicked();
  654. });
  655. var cx = $this.paint.radialGradient.getAttribute('cx');
  656. if(!cx) cx = "0.0";
  657. var cxInput = $('#'+id+'_jGraduate_cx');
  658. cxInput.val(cx);
  659. cxInput.change( function() {
  660. if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
  661. this.value = 0.0;
  662. }
  663. $this.paint.radialGradient.setAttribute('cx', this.value);
  664. centerPoint.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS);
  665. });
  666. var cy = $this.paint.radialGradient.getAttribute('cy');
  667. if(!cy) cy = "0.0";
  668. var cyInput = $('#'+id+'_jGraduate_cy');
  669. cyInput.val(cy);
  670. cyInput.change( function() {
  671. if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
  672. this.value = 0.0;
  673. }
  674. $this.paint.radialGradient.setAttribute('cy', this.value);
  675. centerPoint.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS);
  676. });
  677. var fx = $this.paint.radialGradient.getAttribute('fx');
  678. if(!fx) fx = "1.0";
  679. var fxInput = $('#'+id+'_jGraduate_fx');
  680. fxInput.val(fx);
  681. fxInput.change( function() {
  682. if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
  683. this.value = 1.0;
  684. }
  685. $this.paint.radialGradient.setAttribute('fx', this.value);
  686. focusPoint.setAttribute('x', MARGINX + SIZEX*this.value - STOP_RADIUS);
  687. });
  688. var fy = $this.paint.radialGradient.getAttribute('fy');
  689. if(!fy) fy = "0.0";
  690. var fyInput = $('#'+id+'_jGraduate_fy');
  691. fyInput.val(fy);
  692. fyInput.change( function() {
  693. if (isNaN(parseFloat(this.value)) || this.value < 0.0 || this.value > 1.0) {
  694. this.value = 0.0;
  695. }
  696. $this.paint.radialGradient.setAttribute('fy', this.value);
  697. focusPoint.setAttribute('y', MARGINY + SIZEY*this.value - STOP_RADIUS);
  698. });
  699. if(!showFocus) {
  700. focusPoint.setAttribute('display', 'none');
  701. fxInput.val("");
  702. fyInput.val("");
  703. }
  704. $("#" + id + "_jGraduate_match_ctr")[0].checked = !showFocus;
  705. var lastfx, lastfy;
  706. $("#" + id + "_jGraduate_match_ctr").change(function() {
  707. showFocus = !this.checked;
  708. focusPoint.setAttribute('display', showFocus?'inline':'none');
  709. fxInput.val("");
  710. fyInput.val("");
  711. var grad = $this.paint.radialGradient;
  712. if(!showFocus) {
  713. lastfx = grad.getAttribute('fx');
  714. lastfy = grad.getAttribute('fy');
  715. grad.removeAttribute('fx');
  716. grad.removeAttribute('fy');
  717. } else {
  718. var fx = lastfx || .5;
  719. var fy = lastfy || .5;
  720. grad.setAttribute('fx', fx);
  721. grad.setAttribute('fy', fy);
  722. fxInput.val(fx);
  723. fyInput.val(fy);
  724. }
  725. });
  726. var stops = $this.paint.radialGradient.getElementsByTagNameNS(ns.svg, 'stop');
  727. var numstops = stops.length;
  728. // if there are not at least two stops, then
  729. if (numstops < 2) {
  730. while (numstops < 2) {
  731. $this.paint.radialGradient.appendChild( document.createElementNS(ns.svg, 'stop') );
  732. ++numstops;
  733. }
  734. stops = $this.paint.radialGradient.getElementsByTagNameNS(ns.svg, 'stop');
  735. }
  736. var radius = $this.paint.radialGradient.getAttribute('r')-0;
  737. var radiusx = parseInt((245/2)*(radius)) - 4.5;
  738. $('#' + id + '_jGraduate_RadiusArrows').css({'margin-left':radiusx});
  739. $('#' + id + '_jGraduate_RadiusInput').val(parseInt(radius*100)).change(function(e) {
  740. var x = this.value / 100;
  741. if(x < 0.01) {
  742. x = 0.01;
  743. }
  744. $this.paint.radialGradient.setAttribute('r', x);
  745. // Allow higher value, but pretend it's the max for the slider
  746. if(x > 2) x = 2;
  747. var posx = parseInt((245/2) * x) - 4.5;
  748. $('#' + id + '_jGraduate_RadiusArrows').css({'margin-left':posx});
  749. });
  750. var setRgOpacitySlider = function(e, div) {
  751. var offset = div.offset();
  752. var x = (e.pageX - offset.left - parseInt(div.css('border-left-width')));
  753. if (x > 255) x = 255;
  754. if (x < 0) x = 0;
  755. var posx = x - 4.5;
  756. x /= 255;
  757. $('#' + id + '_rg_jGraduate_AlphaArrows').css({'margin-left':posx});
  758. $('#' + id + '_rg_jgraduate_rect').attr('fill-opacity', x);
  759. x = parseInt(x*100);
  760. $('#' + id + '_rg_jGraduate_OpacityInput').val(x);
  761. $this.paint.alpha = x;
  762. };
  763. // handle dragging on the opacity slider
  764. var bSlidingOpacity = false;
  765. $('#' + id + '_rg_jGraduate_Opacity').mousedown(function(evt) {
  766. setRgOpacitySlider(evt, $(this));
  767. bSlidingOpacity = true;
  768. evt.preventDefault();
  769. }).mousemove(function(evt) {
  770. if (bSlidingOpacity) {
  771. setRgOpacitySlider(evt, $(this));
  772. evt.preventDefault();
  773. }
  774. }).mouseup(function(evt) {
  775. setRgOpacitySlider(evt, $(this));
  776. bSlidingOpacity = false;
  777. evt.preventDefault();
  778. });
  779. var setRadiusSlider = function(e, div) {
  780. var offset = div.offset();
  781. var x = (e.pageX - offset.left - parseInt(div.css('border-left-width')));
  782. if (x > 245) x = 245;
  783. if (x <= 1) x = 1;
  784. var posx = x - 5;
  785. x /= (245/2);
  786. $('#' + id + '_jGraduate_RadiusArrows').css({'margin-left':posx});
  787. $this.paint.radialGradient.setAttribute('r', x);
  788. x = parseInt(x*100);
  789. $('#' + id + '_jGraduate_RadiusInput').val(x);
  790. };
  791. // handle dragging on the radius slider
  792. var bSlidingRadius = false;
  793. $('#' + id + '_jGraduate_Radius').mousedown(function(evt) {
  794. setRadiusSlider(evt, $(this));
  795. bSlidingRadius = true;
  796. evt.preventDefault();
  797. }).mousemove(function(evt) {
  798. if (bSlidingRadius) {
  799. setRadiusSlider(evt, $(this));
  800. evt.preventDefault();
  801. }
  802. }).mouseup(function(evt) {
  803. setRadiusSlider(evt, $(this));
  804. bSlidingRadius = false;
  805. evt.preventDefault();
  806. });
  807. // handle dragging the stop around the swatch
  808. var draggingStop = null;
  809. var startx = -1, starty = -1;
  810. // for whatever reason, Opera does not allow $('image.stop') here,
  811. // and Firefox 1.5 does not allow $('.stop')
  812. $('.stop, #color_picker_rg_jGraduate_GradContainer image').mousedown(function(evt) {
  813. draggingStop = this;
  814. startx = evt.clientX;
  815. starty = evt.clientY;
  816. evt.preventDefault();
  817. });
  818. $('#'+id+'_rg_jgraduate_svg').mousemove(function(evt) {
  819. if (null != draggingStop) {
  820. var dx = evt.clientX - startx;
  821. var dy = evt.clientY - starty;
  822. startx += dx;
  823. starty += dy;
  824. var x = parseFloat(draggingStop.getAttribute('x')) + dx;
  825. var y = parseFloat(draggingStop.getAttribute('y')) + dy;
  826. // clamp stop to the swatch
  827. if (x < MARGINX - STOP_RADIUS) x = MARGINX - STOP_RADIUS;
  828. if (y < MARGINY - STOP_RADIUS) y = MARGINY - STOP_RADIUS;
  829. if (x > MARGINX + SIZEX - STOP_RADIUS) x = MARGINX + SIZEX - STOP_RADIUS;
  830. if (y > MARGINY + SIZEY - STOP_RADIUS) y = MARGINY + SIZEY - STOP_RADIUS;
  831. draggingStop.setAttribute('x', x);
  832. draggingStop.setAttribute('y', y);
  833. // calculate stop offset
  834. var fracx = (x - MARGINX + STOP_RADIUS)/SIZEX;
  835. var fracy = (y - MARGINY + STOP_RADIUS)/SIZEY;
  836. if (draggingStop.id == (id+'_center_pt')) {
  837. cxInput.val(fracx);
  838. cyInput.val(fracy);
  839. $this.paint.radialGradient.setAttribute('cx', fracx);
  840. $this.paint.radialGradient.setAttribute('cy', fracy);
  841. if(!showFocus) {
  842. $this.paint.radialGradient.setAttribute('fx', fracx);
  843. $this.paint.radialGradient.setAttribute('fy', fracy);
  844. }
  845. }
  846. else {
  847. fxInput.val(fracx);
  848. fyInput.val(fracy);
  849. $this.paint.radialGradient.setAttribute('fx', fracx);
  850. $this.paint.radialGradient.setAttribute('fy', fracy);
  851. }
  852. evt.preventDefault();
  853. }
  854. });
  855. $('#'+id+'_rg_jgraduate_svg').mouseup(function(evt) {
  856. draggingStop = null;
  857. });
  858. var centerColor = stops[0].getAttribute('stop-color');
  859. if(!centerColor) centerColor = '#000';
  860. centerColorBox = $('#'+id+'_jGraduate_colorBoxCenter');
  861. centerColorBox.css({'background-color':centerColor});
  862. var centerOpacity = stops[0].getAttribute('stop-opacity');
  863. if(!centerOpacity) centerOpacity = '1.0';
  864. $('#'+id+'jGraduate_centerOpacity').html( (centerOpacity*100)+'%' );
  865. var outerColor = stops[stops.length-1].getAttribute('stop-color');
  866. if(!outerColor) outerColor = '#000';
  867. outerColorBox = $('#'+id+'_jGraduate_colorBoxOuter');
  868. outerColorBox.css({'background-color':outerColor});
  869. var outerOpacity = stops[stops.length-1].getAttribute('stop-opacity');
  870. if(!outerOpacity) outerOpacity = '1.0';
  871. $('#'+id+'rg_jGraduate_outerOpacity').html( (outerOpacity*100)+'%' );
  872. $('#'+id+'_jGraduate_colorBoxCenter').click(function() {
  873. $('div.jGraduate_LightBox').show();
  874. var colorbox = $(this);
  875. var thisAlpha = (parseFloat(centerOpacity)*255).toString(16);
  876. while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
  877. color = centerColor.substr(1) + thisAlpha;
  878. $('#'+id+'_rg_jGraduate_stopPicker').css({'left': 100, 'bottom': 15}).jPicker({
  879. window: { title: "Pick the center color and opacity for the gradient" },
  880. images: { clientPath: $settings.images.clientPath },
  881. color: { active: color, alphaSupport: true }
  882. }, function(color){
  883. centerColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none";
  884. centerOpacity = color.get_A() ? color.get_A()/100 : 1;
  885. colorbox.css('background', centerColor);
  886. $('#'+id+'_rg_jGraduate_centerOpacity').html(parseInt(centerOpacity*100)+'%');
  887. stops[0].setAttribute('stop-color', centerColor);
  888. stops[0].setAttribute('stop-opacity', centerOpacity);
  889. $('div.jGraduate_LightBox').hide();
  890. $('#'+id+'_rg_jGraduate_stopPicker').hide();
  891. }, null, function() {
  892. $('div.jGraduate_LightBox').hide();
  893. $('#'+id+'_rg_jGraduate_stopPicker').hide();
  894. });
  895. });
  896. $('#'+id+'_jGraduate_colorBoxOuter').click(function() {
  897. $('div.jGraduate_LightBox').show();
  898. var colorbox = $(this);
  899. var thisAlpha = (parseFloat(outerOpacity)*255).toString(16);
  900. while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
  901. color = outerColor.substr(1) + thisAlpha;
  902. $('#'+id+'_rg_jGraduate_stopPicker').css({'left': 100, 'top': 15}).jPicker({
  903. window: { title: "Pick the outer color and opacity for the gradient" },
  904. images: { clientPath: $settings.images.clientPath },
  905. color: { active: color, alphaSupport: true }
  906. }, function(color){
  907. outerColor = color.get_Hex() ? ('#'+color.get_Hex()) : "none";
  908. outerOpacity = color.get_A() ? color.get_A()/100 : 1;
  909. colorbox.css('background', outerColor);
  910. $('#'+id+'_jGraduate_outerOpacity').html(parseInt(outerOpacity*100)+'%');
  911. stops[1].setAttribute('stop-color', outerColor);
  912. stops[1].setAttribute('stop-opacity', outerOpacity);
  913. $('div.jGraduate_LightBox').hide();
  914. $('#'+id+'_rg_jGraduate_stopPicker').hide();
  915. }, null, function() {
  916. $('div.jGraduate_LightBox').hide();
  917. $('#'+id+'_rg_jGraduate_stopPicker').hide();
  918. });
  919. });
  920. // --------------
  921. var thisAlpha = ($this.paint.alpha*255/100).toString(16);
  922. while (thisAlpha.length < 2) { thisAlpha = "0" + thisAlpha; }
  923. color = $this.paint.solidColor == "none" ? "" : $this.paint.solidColor + thisAlpha;
  924. colPicker.jPicker(
  925. {
  926. window: { title: $settings.window.pickerTitle },
  927. images: { clientPath: $settings.images.clientPath },
  928. color: { active: color, alphaSupport: true }
  929. },
  930. function(color) {
  931. $this.paint.type = "solidColor";
  932. $this.paint.alpha = color.get_A() ? color.get_A() : 100;
  933. $this.paint.solidColor = color.get_Hex() ? color.get_Hex() : "none";
  934. $this.paint.radialGradient = null;
  935. okClicked();
  936. },
  937. null,
  938. function(){ cancelClicked(); }
  939. );
  940. }());
  941. var tabs = $(idref + ' .jGraduate_tabs li');
  942. tabs.click(function() {
  943. tabs.removeClass('jGraduate_tab_current');
  944. $(this).addClass('jGraduate_tab_current');
  945. $(idref + " > div").hide();
  946. $(idref + ' .jGraduate_' + $(this).attr('data-type') + 'Pick').show();
  947. });
  948. $(idref + " > div").hide();
  949. tabs.removeClass('jGraduate_tab_current');
  950. var tab;
  951. switch ( $this.paint.type ) {
  952. case 'linearGradient':
  953. tab = $(idref + ' .jGraduate_tab_lingrad');
  954. break;
  955. case 'radialGradient':
  956. tab = $(idref + ' .jGraduate_tab_radgrad');
  957. break;
  958. default:
  959. tab = $(idref + ' .jGraduate_tab_color');
  960. break;
  961. }
  962. tab.addClass('jGraduate_tab_current').click();
  963. $this.show();
  964. });
  965. };
  966. })();