%META:TOPICPARENT{name="OATDOCIndex"}%
---+ simplefx.js

Simple eyecandy effects: shadows, rounding etc.

%TOC%

---++ Functions

---+++ OAT.SimpleFX.shadow(element, options)

Adds a shadow to <tt>element</tt>. Available <tt>options</tt> are:

   * <tt>*imagePath*</tt> - path to directory with shadow images
   * <tt>*offsetX*</tt> ,<tt>*offsetY*</tt> - horizontal and vertical offset
   * <tt>*rightSize*</tt>,<tt>*bottomSize*</tt> - dimensions of shadows
   * <tt>*rightImage*</tt>, <tt>*bottomImage*</tt> ,<tt>*cornerImage*</tt> - file names

---+++ OAT.SimpleFX.roundImg(element, options)

<i>  ToBeDone  - Verify <tt>OAT.SimpleFX.roundDiv</tt> vs 
<tt>OAT.SimpleFX.roundImg</tt> - original documentation had this section 
header as <tt>roundImg</tt> -- but sample code was <tt>roundDiv</tt></i>

Creates rounded corners on <tt>element</tt>, using images. Available 
<tt>options</tt> are:

   * <tt><b>corners</b></tt> - array of booleans, specifying corners 
to be rounded. Starting from left top clockwise.
   * <tt><b>edges</b></tt> - array of booleans, specifying edges to be 
rounded. Starting from top clockwise.
   * <tt><b>cornerFiles</b></tt>, <tt><b>edgeFiles</b></tt> - array of 
file names
   * <tt><b>thickness</b></tt> - array of sizes, specifying thicknesses 
of corners. Starting from left top clockwise.

---+++ OAT.SimpleFX.roundDiv(element, optionsObject)

<i>  ToBeDone  - Verify <tt>OAT.SimpleFX.roundDiv</tt> vs 
<tt>OAT.SimpleFX.roundImg</tt> - original documentation had this section 
header as <tt>roundImg</tt> -- but sample code was <tt>roundDiv</tt> </i>

Creates rounded corners on <tt>element</tt>, using stacked DIVs. 
Available <tt>options</tt> are:

   * <tt><b>corners</b></tt> - array of booleans, specifying 
<tt>corners</tt> to be rounded, clockwise from top left.
   * <tt><b>color</b></tt>, <tt><b>backgroundColor</b></tt> - colors 
to be used. <tt>BackgroundColor</tt> is used only for computation of 
antialiasing color. Defaults to '<tt>auto</tt>' (=inherit).
   * <tt><b>antialias</b></tt> - boolean value
   * <tt><b>size</b></tt> - radius. Good values are <tt>2-8</tt>.

---+++ OAT.SimpleFX.shader(clicker, target, options)
Marks <tt>clicker</tt> as a button, which hides/shows <tt>target</tt>. 
<tt>Target</tt> may be an array of elements. Available <tt>options</tt> 
are:

   * <tt><b>type</b></tt> - (toggle)
      * <tt><b>0</b></tt> = only hide
      * <tt><b>1</b></tt> = only show
      * <tt><b>2</b></tt> = both

---++ Examples

---+++ Example 1, using OAT.SimpleFX.roundImg

<i>  ToBeDone  - Verify <tt>OAT.SimpleFX.roundImg</tt> vs 
<tt>OAT.SimpleFX.roundDiv</tt> - original code had <tt>roundDiv</tt>, 
but description was <tt>roundImg</tt></i>

<verbatim>
OAT.SimpleFX.shadow("myDiv", {});
OAT.SimpleFX.roundImg("myDiv",{corners:[1,1,0,0]});
OAT.SimpleFX.shader("myDiv", ["myDiv1","myDiv2"], {type:2});
</verbatim>

---+++ Example 2, using OAT.SimpleFX.roundDiv

<i>  ToBeDone  - Verify <tt>OAT.SimpleFX.roundImg</tt> vs 
<tt>OAT.SimpleFX.roundDiv</tt> - original code had <tt>roundDiv</tt>, 
but description was <tt>roundImg</tt></i>

<verbatim>
OAT.SimpleFX.shadow("myDiv", {});
OAT.SimpleFX.roundDiv("myDiv", {antialias:1, size:5});
OAT.SimpleFX.shader("myDiv", ["myDiv1","myDiv2"], {type:2});
</verbatim>

CategoryDocumentation CategoryOAT CategoryOpenSource CategoryToBeDone