From aceaf334ff121ec27a887939757498b1edb58502 Mon Sep 17 00:00:00 2001 From: Lachlan Hardy Date: Thu, 21 Jan 2010 14:05:09 +0800 Subject: [PATCH] Rewrite to allow targeting to a specific DOM element --- plugins/raphael.shadow.js | 49 +++++++++++++++++++++++---------------- 1 file changed, 29 insertions(+), 20 deletions(-) diff --git a/plugins/raphael.shadow.js b/plugins/raphael.shadow.js index b3d7a05..8f8b236 100644 --- a/plugins/raphael.shadow.js +++ b/plugins/raphael.shadow.js @@ -1,16 +1,16 @@ /*! - * Raphael Shadow Plugin 0.2 + * Raphael Shadow plugin 0.3 * - * Copyright (c) 2009 Dmitry Baranovskiy (http://raphaeljs.com) + * Copyright (c) 2008 - 2009 Dmitry Baranovskiy (http://raphaeljs.com) * Licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) license. */ - Raphael.shadow = function (x, y, w, h, options) { // options format: { // size: 0..1, shadow size // color: "#000", placeholder colour // stroke: "#000", placeholder stroke colour // shadow: "#000", shadow colour + // target: "someID" | htmlElement // r: 5, radius of placeholder rounded corners // } options = options || {}; @@ -19,25 +19,34 @@ Raphael.shadow = function (x, y, w, h, options) { color = options.color || "#fff", stroke = options.stroke || color, shadowColor = options.shadow || "#000", - R = options.r || 3, + target = options.target || null, + R = options.r == null ? 3 : options.r, s = size, b = size * 2, r = b + s, rg = this.format("r{0}-{0}", shadowColor), rect = "rect", - circ = "circle", - none = "none"; - var res = this([ - x - s, y - t, w + (x = s) * 2, h + (y = t) + b, - {type: rect, x: x - s, y: y - t, width: b + s, height: h + y + b, stroke: none, fill: this.format("180-{0}-{0}", shadowColor), opacity: 0, "clip-rect": [x - s + 1, y - t + r, b, h + y + b - r * 2 + .9]}, - {type: rect, x: x + w - b, y: y - t, width: b + s, height: h + y + b, stroke: none, fill: this.format("0-{0}-{0}", shadowColor), opacity: 0, "clip-rect": [x + w - s + 1, y - t + r, b, h + y + b - r * 2]}, - {type: rect, x: x + b - 1, y: y + h - s, width: w + b, height: b + s, stroke: none, fill: this.format("270-{0}-{0}", shadowColor), opacity: 0, "clip-rect": [x + b, y + h - s, w + b - r * 2, b + s]}, - {type: rect, x: x + s - 1, y: y - t, width: w + b, height: b + s, stroke: none, fill: this.format("90-{0}-{0}", shadowColor), opacity: 0, "clip-rect": [x + b, y - t, w + b - r * 2, s + t + 1]}, - {type: circ, cx: x + b, cy: y + h - s, r: r, stroke: none, fill: rg, opacity: 0, "clip-rect": [x - s, y + h - s + .999, r, r]}, - {type: circ, cx: x + w - b, cy: y + h - s, r: r, stroke: none, fill: rg, opacity: 0, "clip-rect": [x + w - b, y + h - s, r, r]}, - {type: circ, cx: x + b, cy: y - t + r, r: r, stroke: none, fill: rg, opacity: 0, "clip-rect": [x - s, y - t, r, r]}, - {type: circ, cx: x + w - b, cy: y - t + r, r: r , stroke: none, fill: rg, opacity: 0, "clip-rect": [x + w - b, y - t, r, r]}, - {type: rect, x: x, y: y, width: w, height: h, r: R, fill: color, stroke: stroke} - ]); - return res[0].paper; -}; \ No newline at end of file + none = "none", + res, + set; + + if (target) { + res = this(target, w + (x = s) * 2, h + (y = t) + b); + } else { + res = this(x - s, y - t, w + (x = s) * 2, h + (y = t) + b); + } + + set = res.set( + res.rect(x - s, y - t, b + s, h + y + b).attr({stroke: none, fill: this.format("180-{0}-{0}", shadowColor), opacity: 0, "clip-rect": [x - s + 1, y - t + r, b, h + y + b - r * 2 + .9]}), + res.rect(x + w - b, y - t, b + s, h + y + b).attr({stroke: none, fill: this.format("0-{0}-{0}", shadowColor), opacity: 0, "clip-rect": [x + w - s + 1, y - t + r, b, h + y + b - r * 2]}), + res.rect(x + b - 1, y + h - s, w + b, b + s).attr({stroke: none, fill: this.format("270-{0}-{0}", shadowColor), opacity: 0, "clip-rect": [x + b, y + h - s, w + b - r * 2, b + s]}), + res.rect(x + s - 1, y - t, w + b, b + s).attr({stroke: none, fill: this.format("90-{0}-{0}", shadowColor), opacity: 0, "clip-rect": [x + b, y - t, w + b - r * 2, s + t + 1]}), + res.circle(x + b, y + h - s, r).attr({stroke: none, fill: rg, opacity: 0, "clip-rect": [x - s, y + h - s + .999, r, r]}), + res.circle(x + w - b, y + h - s, r).attr({stroke: none, fill: rg, opacity: 0, "clip-rect": [x + w - b, y + h - s, r, r]}), + res.circle(x + b, y - t + r, r).attr({stroke: none, fill: rg, opacity: 0, "clip-rect": [x - s, y - t, r, r]}), + res.circle(x + w - b, y - t + r, r).attr({stroke: none, fill: rg, opacity: 0, "clip-rect": [x + w - b, y - t, r, r]}), + res.rect(x, y, w, h, R).attr({fill: color, stroke: stroke}) + ); + + return set[0].paper; +}; -- 2.39.2