diff options
Diffstat (limited to 'themes/admin_default/js')
| -rw-r--r-- | themes/admin_default/js/jquery.dropshadow.js | 304 | ||||
| -rw-r--r-- | themes/admin_default/js/ui.init.js | 8 |
2 files changed, 312 insertions, 0 deletions
diff --git a/themes/admin_default/js/jquery.dropshadow.js b/themes/admin_default/js/jquery.dropshadow.js new file mode 100644 index 00000000..2bd28317 --- /dev/null +++ b/themes/admin_default/js/jquery.dropshadow.js @@ -0,0 +1,304 @@ +/*
+ VERSION: Drop Shadow jQuery Plugin 1.6 12-13-2007
+
+ REQUIRES: jquery.js (1.2.6 or later)
+
+ SYNTAX: $(selector).dropShadow(options); // Creates new drop shadows
+ $(selector).redrawShadow(); // Redraws shadows on elements
+ $(selector).removeShadow(); // Removes shadows from elements
+ $(selector).shadowId(); // Returns an existing shadow's ID
+
+ OPTIONS:
+
+ left : integer (default = 4)
+ top : integer (default = 4)
+ blur : integer (default = 2)
+ opacity : decimal (default = 0.5)
+ color : string (default = "black")
+ swap : boolean (default = false)
+
+ The left and top parameters specify the distance and direction, in pixels, to
+ offset the shadow. Zero values position the shadow directly behind the element.
+ Positive values shift the shadow to the right and down, while negative values
+ shift the shadow to the left and up.
+
+ The blur parameter specifies the spread, or dispersion, of the shadow. Zero
+ produces a sharp shadow, one or two produces a normal shadow, and three or four
+ produces a softer shadow. Higher values increase the processing load.
+
+ The opacity parameter should be a decimal value, usually less than one. You can
+ use a value higher than one in special situations, e.g. with extreme blurring.
+
+ Color is specified in the usual manner, with a color name or hex value. The
+ color parameter does not apply with transparent images.
+
+ The swap parameter reverses the stacking order of the original and the shadow.
+ This can be used for special effects, like an embossed or engraved look.
+
+ EXPLANATION:
+
+ This jQuery plug-in adds soft drop shadows behind page elements. It is only
+ intended for adding a few drop shadows to mostly stationary objects, like a
+ page heading, a photo, or content containers.
+
+ The shadows it creates are not bound to the original elements, so they won't
+ move or change size automatically if the original elements change. A window
+ resize event listener is assigned, which should re-align the shadows in many
+ cases, but if the elements otherwise move or resize you will have to handle
+ those events manually. Shadows can be redrawn with the redrawShadow() method
+ or removed with the removeShadow() method. The redrawShadow() method uses the
+ same options used to create the original shadow. If you want to change the
+ options, you should remove the shadow first and then create a new shadow.
+
+ The dropShadow method returns a jQuery collection of the new shadow(s). If
+ further manipulation is required, you can store it in a variable like this:
+
+ var myShadow = $("#myElement").dropShadow();
+
+ You can also read the ID of the shadow from the original element at a later
+ time. To get a shadow's ID, either read the shadowId attribute of the
+ original element or call the shadowId() method. For example:
+
+ var myShadowId = $("#myElement").attr("shadowId"); or
+ var myShadowId = $("#myElement").shadowId();
+
+ If the original element does not already have an ID assigned, a random ID will
+ be generated for the shadow. However, if the original does have an ID, the
+ shadow's ID will be the original ID and "_dropShadow". For example, if the
+ element's ID is "myElement", the shadow's ID would be "myElement_dropShadow".
+
+ If you have a long piece of text and the user resizes the window so that the
+ text wraps or unwraps, the shape of the text changes and the words are no
+ longer in the same positions. In that case, you can either preset the height
+ and width, so that it becomes a fixed box, or you can shadow each word
+ separately, like this:
+
+ <h1><span>Your</span> <span>Page</span> <span>Title</span></h1>
+
+ $("h1 span").dropShadow();
+
+ The dropShadow method attempts to determine whether the selected elements have
+ transparent backgrounds. If you want to shadow the content inside an element,
+ like text or a transparent image, it must not have a background-color or
+ background-image style. If the element has a solid background it will create a
+ rectangular shadow around the outside box.
+
+ The shadow elements are positioned absolutely one layer below the original
+ element, which is positioned relatively (unless it's already absolute).
+
+ *** All shadows have the "dropShadow" class, for selecting with CSS or jQuery.
+
+ ISSUES:
+
+ 1) Limited styling of shadowed elements by ID. Because IDs must be unique,
+ and the shadows have their own ID, styles applied by ID won't transfer
+ to the shadows. Instead, style elements by class or use inline styles.
+ 2) Sometimes shadows don't align properly. Elements may need to be wrapped
+ in container elements, margins or floats changed, etc. or you may just
+ have to tweak the left and top offsets to get them to align. For example,
+ with draggable objects, you have to wrap them inside two divs. Make the
+ outer div draggable and set the inner div's position to relative. Then
+ you can create a shadow on the element inside the inner div.
+ 3) If the user changes font sizes it will throw the shadows off. Browsers
+ do not expose an event for font size changes. The only known way to
+ detect a user font size change is to embed an invisible text element and
+ then continuously poll for changes in size.
+ 4) Safari support is shaky, and may require even more tweaks/wrappers, etc.
+
+ The bottom line is that this is a gimick effect, not PFM, and if you push it
+ too hard or expect it to work in every possible situation on every browser,
+ you will be disappointed. Use it sparingly, and don't use it for anything
+ critical. Otherwise, have fun with it!
+
+ AUTHOR: Larry Stevens (McLars@eyebulb.com) This work is in the public domain,
+ and it is not supported in any way. Use it at your own risk.
+*/
+
+
+(function($){
+
+ var dropShadowZindex = 1; //z-index counter
+
+ $.fn.dropShadow = function(options)
+ {
+ // Default options
+ var opt = $.extend({
+ left: 4,
+ top: 4,
+ blur: 2,
+ opacity: .5,
+ color: "black",
+ swap: false
+ }, options);
+ var jShadows = $([]); //empty jQuery collection
+
+ // Loop through original elements
+ this.not(".dropShadow").each(function()
+ {
+ var jthis = $(this);
+ var shadows = [];
+ var blur = (opt.blur <= 0) ? 0 : opt.blur;
+ var opacity = (blur == 0) ? opt.opacity : opt.opacity / (blur * 8);
+ var zOriginal = (opt.swap) ? dropShadowZindex : dropShadowZindex + 1;
+ var zShadow = (opt.swap) ? dropShadowZindex + 1 : dropShadowZindex;
+
+ // Create ID for shadow
+ var shadowId;
+ if (this.id) {
+ shadowId = this.id + "_dropShadow";
+ }
+ else {
+ shadowId = "ds" + (1 + Math.floor(9999 * Math.random()));
+ }
+
+ // Modify original element
+ $.data(this, "shadowId", shadowId); //store id in expando
+ $.data(this, "shadowOptions", options); //store options in expando
+ jthis
+ .attr("shadowId", shadowId)
+ .css("zIndex", zOriginal);
+ if (jthis.css("position") != "absolute") {
+ jthis.css({
+ position: "relative",
+ zoom: 1 //for IE layout
+ });
+ }
+
+ // Create first shadow layer
+ bgColor = jthis.css("backgroundColor");
+ if (bgColor == "rgba(0, 0, 0, 0)") bgColor = "transparent"; //Safari
+ if (bgColor != "transparent" || jthis.css("backgroundImage") != "none"
+ || this.nodeName == "SELECT"
+ || this.nodeName == "INPUT"
+ || this.nodeName == "TEXTAREA") {
+ shadows[0] = $("<div></div>")
+ .css("background", opt.color);
+ }
+ else {
+ shadows[0] = jthis
+ .clone()
+ .removeAttr("id")
+ .removeAttr("name")
+ .removeAttr("shadowId")
+ .css("color", opt.color);
+ }
+ shadows[0]
+ .addClass("dropShadow")
+ .css({
+ height: jthis.outerHeight(),
+ left: blur,
+ opacity: opacity,
+ position: "absolute",
+ top: blur,
+ width: jthis.outerWidth(),
+ zIndex: zShadow
+ });
+
+ // Create other shadow layers
+ var layers = (8 * blur) + 1;
+ for (i = 1; i < layers; i++) {
+ shadows[i] = shadows[0].clone();
+ }
+
+ // Position layers
+ var i = 1;
+ var j = blur;
+ while (j > 0) {
+ shadows[i].css({left: j * 2, top: 0}); //top
+ shadows[i + 1].css({left: j * 4, top: j * 2}); //right
+ shadows[i + 2].css({left: j * 2, top: j * 4}); //bottom
+ shadows[i + 3].css({left: 0, top: j * 2}); //left
+ shadows[i + 4].css({left: j * 3, top: j}); //top-right
+ shadows[i + 5].css({left: j * 3, top: j * 3}); //bottom-right
+ shadows[i + 6].css({left: j, top: j * 3}); //bottom-left
+ shadows[i + 7].css({left: j, top: j}); //top-left
+ i += 8;
+ j--;
+ }
+
+ // Create container
+ var divShadow = $("<div></div>")
+ .attr("id", shadowId)
+ .addClass("dropShadow")
+ .css({
+ left: jthis.position().left + opt.left - blur,
+ marginTop: jthis.css("marginTop"),
+ marginRight: jthis.css("marginRight"),
+ marginBottom: jthis.css("marginBottom"),
+ marginLeft: jthis.css("marginLeft"),
+ position: "absolute",
+ top: jthis.position().top + opt.top - blur,
+ zIndex: zShadow
+ });
+
+ // Add layers to container
+ for (i = 0; i < layers; i++) {
+ divShadow.append(shadows[i]);
+ }
+
+ // Add container to DOM
+ jthis.after(divShadow);
+
+ // Add shadow to return set
+ jShadows = jShadows.add(divShadow);
+
+ // Re-align shadow on window resize
+ $(window).resize(function()
+ {
+ try {
+ divShadow.css({
+ left: jthis.position().left + opt.left - blur,
+ top: jthis.position().top + opt.top - blur
+ });
+ }
+ catch(e){}
+ });
+
+ // Increment z-index counter
+ dropShadowZindex += 2;
+
+ }); //end each
+
+ return this.pushStack(jShadows);
+ };
+
+
+ $.fn.redrawShadow = function()
+ {
+ // Remove existing shadows
+ this.removeShadow();
+
+ // Draw new shadows
+ return this.each(function()
+ {
+ var shadowOptions = $.data(this, "shadowOptions");
+ $(this).dropShadow(shadowOptions);
+ });
+ };
+
+
+ $.fn.removeShadow = function()
+ {
+ return this.each(function()
+ {
+ var shadowId = $(this).shadowId();
+ $("div#" + shadowId).remove();
+ });
+ };
+
+
+ $.fn.shadowId = function()
+ {
+ return $.data(this[0], "shadowId");
+ };
+
+
+ $(function()
+ {
+ // Suppress printing of shadows
+ var noPrint = "<style type='text/css' media='print'>";
+ noPrint += ".dropShadow{visibility:hidden;}</style>";
+ $("head").append(noPrint);
+ });
+
+})(jQuery);
\ No newline at end of file diff --git a/themes/admin_default/js/ui.init.js b/themes/admin_default/js/ui.init.js index 79da8695..24cc0115 100644 --- a/themes/admin_default/js/ui.init.js +++ b/themes/admin_default/js/ui.init.js @@ -26,6 +26,14 @@ $(document).ready(function(){ $(panelLinks[i]).bind("click", {element: panelLinks[i]}, handlePanelEvent); } + // Round corners + $(".gSelected").addClass("ui-corner-all"); + $(".gAvailable").addClass("ui-corner-all"); + $(".gUnavailable").addClass("ui-corner-all"); + + // Add drop shadows + $(".gSelected").dropShadow(); + }); function handlePanelEvent(event) { |