Kang-min Liu - Effect.DropShadow-0.11

NAME

Effect.DropShadow - Generate drop-shadow of given element using CSS and DOM

SYNOPSIS

  Effect.DropShadow.dropShadow({
      "elementId" : "the-div",
      "width" : "510px"
  });

DESCRIPTION

This effect generate two extra elements for each drop-shadowed element in order to create drop shadow. It might not be the best approach because it changes the DOM, but it is a way to do it. You should be aware of this if changing the DOM is not allowed or problematic.

The way to use this object is easy. Just give your element an id, say, "this-div", and then:

  Effect.DropShadow.dropShadow({
      "elementId" : "the-div",
  });

There is only one instance method called Effect.DropShadow.dropShadow(), which taks only one hash as parameter. The hash could have two keys: "elementId", and "width". "elementId" is the id of element that you want to have drop shadow, and "width" is going to be the width of that element. If "width" is not given here, it's set to "auto" by default. If you meet some problem that you don't want the wrapper shadow looks so wide, just give it a width here according to the content's width.

That's all, enjoy it :)

AUTHOR

Kang-min Liu, <gugod@gugod.org>

COPYRIGHT

This module is free software; you can redistribute it and/or modify it under the same terms as the Perl programming language (your choice of GPL or the Perl Artistic license).

JSAN.use("DOM.Ready");

if ( typeof Effect == "undefined" ) Effect = {};

Effect.DropShadow = function (params) {
    this._initialize(params);
}

Effect.DropShadow.VERSION = "0.11";

Effect.DropShadow.dropShadow = function (params) {
   if ( typeof params == "string" ) {
      params = { "elementId": params };
   }

   if ( ! params["elementId"] ) {
      throw new Error("Effect.dropShadow requires an elementId parameter");
   }

   if ( ! params["width"] ) {
      params["width"] = "auto";
   }

   Effect.DropShadow._addStyles();
   var self = this;
   DOM.Ready.onIdReady(params.elementId, function(elt) {Effect.DropShadow._dropShadow(elt, params)});
}

Effect.DropShadow._dropShadow = function(element, params) {
// create the wrapper divs
   var content = document.createElement('div');
   content.className  = "dropshadow-content-div";

   var container = document.createElement('div');
   container.className  = "dropshadow-container-div";

   container.style.width = params["width"];

   var newElement = element.cloneNode(true);

   content.appendChild(newElement);
   container.appendChild(content);

   var shadowedElement = container;
// replace the old image with the new div-wrapped version
   element.parentNode.replaceChild(shadowedElement,element);
}

Effect.DropShadow._StylesAdded = 0;
Effect.DropShadow._addStyles = function () {
   if (Effect.DropShadow._StylesAdded) {
      return;
   }

    var styles = Effect.DropShadow._Styles;
    var style_string = "";
    for ( var i = 0; i < styles.length; i++ ) {
        var style = styles[i];

        style_string =
            style_string
            + style.shift()
            + " {\n  "
            + style.join(";\n  ")
            + ";\n}\n\n";
    }

    var style_elt = document.createElement("style");
    var style_text = document.createTextNode(style_string);
    style_elt.appendChild(style_text);

    var head = document.getElementsByTagName("head")[0];
    head.appendChild(style_elt);
    
   
   Effect.DropShadow._StylesAdded = 1;
}

Effect.DropShadow._Styles = [
    [".dropshadow-content-div",
     "position:relative",
     "top:-2px",
     "left:-2px",
     "background:#fff",
     "border:1px solid #666"
     ],
    [".dropshadow-container-div",
     "position:relative",
     "background:#666;",
     "margin:4px;"
     ]
]

/**