Boxmod Molecule
From oWiki
Preference Dialog
Attributes
type
string ( r )
Type of this molecule, 'box'.
pref.name
string ( r )
The scriptable name for this molecule. This name can be set using rename method dynamically.
pref.enableWhen
string ( r, w )
Specifies the event that activates this molecule. Default is 'load'.
pref.disableWhen
string ( r, w )
Specifies the event that deactivates this molecule. Default is 'none'.
pref.border
string ( r, w )
Specifies the style of the droplet's border.
Possible formats:
(1) none
(2) <border-width> <border-style> <border-color>
(3) <top-border-width> <right-border-width> <bottom-border-width> <left-border-width>
(4) <top-bottom-border-width> <left-right-border-width>
(5) <border-width>
| border-width | thin medium thick length (pixel value) |
| border-color | rgb(255, 0, 0) #ff0000 |
| border-style | none hidden dotted dashed solid double groove ridge inset outset |
pref.borderWidth
string ( r, w )
Specifies the width of an element's four borders. This overrides the setting in pref.border.
Possible formats:
(1) <top-border-width> <right-border-width> <bottom-border-width> <left-border-width>
(2) <top-border-width> <left-right-border-width> <bottom-border-width>
(3) <top-bottom-border-width> <left-right-border-width>
(4) <border-width>
Possible border width values:
| border-width | thin medium thick length (pixel value) |
pref.borderColor
string ( r, w )
Specifies the color of an element's four borders. This overrides the setting in pref.border.
Possible formats:
(1) <top-border-color> <right-border-color> <bottom-border-color> <left-border-color>
(2) <top-border-color> <left-right-border-color> <bottom-border-color>
(3) <top-bottom-border-color> <left-right-border-color>
(4) <border-color>
Possible border color values:
| border-color | rgb(255, 0, 0) #ff0000 |
pref.borderRadius
string ( r, w )
The borderRadius CSS property can be used to give borders rounded corners. If the slash followed by a second set of radii is specified, the values before the slash are used to specify the horizontal radius, while the values after the slash specify the vertical radius. If the slash is omitted, then the same values are used to set both horizontal and vertical radii.
Possible formats:
(1) <border-top-left-radius> <border-top-right-radius> <border-bottom-right-radius> <border-bottom-left-radius>
(2) <border-top-left-radius> <border-top-right-bottom-right-radius> <border-bottom-left-radius>
(3) <border-top-left-bottom-right-radius> <border-top-right-bottom-left-radius>
(4) <border-radius>
Possible border radius values:
| border-radius | length, 20px percentage, 10% |
pref.boxShadow
string ( r, w )
The boxShadow CSS property accepts one or more shadow effects as a comma-separated list.
Possible formats of each shadow effect:
(1) none
(2) inset? <offset-x> <offset-y> <blur-radius> <spread-radius> <color>
Examples:
| 7px 10px 5px 5px black | offset-x: 7px, offset-y: 10px, blur-radius: 5px, spread-radius: 5px, color: black |
| inset 0 0 15px 2px gold, -1em 0 0.4em olive | first shadow: inset, offset-x: 0px, offset-y: 0px, blur-radius: 15px, spread-radius: 2px, color: gold second shadow: offset-x: -1em, offset-y: -1em, blur-radius: 0px, spread-radius: 0.4em, color: olive |
pref.position
string ( r, w )
The position property specifies the type of positioning method used for the droplet (static, absolute or fixed).
| Value | Description |
|---|---|
| static | Droplets render in order, as they appear in the document flow. |
| absolute | The droplet is positioned relative to its first positioned (not static) ancestor element. This is default. |
| fixed | The droplet is positioned relative to the window. |
pref.margin
string ( r, w )
Specifies the margin size for the content area of this droplet.
Possible formats (in pixels)
(1) none
(2) <margin-top> <margin-right> <margin-bottom> <margin-left>
(3) <margins>
pref.padding
string ( r, w )
Specifies the padding size for the content area of this droplet.
Possible formats (in pixels)
(1) none
(2) <padding-top> <padding-right> <padding-bottom> <padding-left>
(3) <paddings>
pref.isTransparent
bool ( r, w )
Specifies background transparency of this droplet.
pref.r
int ( r, w )
Specifies the RED component of the background color.
Possible values is between 0 to 255.
pref.g
int ( r, w )
Specifies the GREEN component of the background color.
Possible values is between 0 to 255.
pref.b
int ( r, w )
Specifies the BLUE component of the background color.
Possible values is between 0 to 255.
pref.backgroundImage
string ( r, w )
Specifies the background image's URL.
pref.backgroundPosition
string ( r, w )
Specifies the position of the background image.
| Value | Description |
|---|---|
| top left top center top right center left center center center right bottom left bottom center bottom right |
If you only specify one keyword, the second value will be "center". Default value: 0% 0% |
| x% y% | The first value is the horizontal position and the second value is the vertical. The top left corner is 0% 0%. The right bottom corner is 100% 100%. If you only specify one value, the other value will be 50%. |
| xpos ypos | The first value is the horizontal position and the second value is the vertical. The top left corner is 0 0. Units can be pixels (0px 0px) or any other CSS units. If you only specify one value, the other value will be 50%. You can mix % and positions. |
pref.backgroundRepeat
string ( r, w )
Specifies how a background image will be repeated.
| Value | Description |
|---|---|
| repeat | Default. The background image will be repeated vertically and horizontally |
| repeat-x | The background image will be repeated horizontally |
| repeat-y | The background image will be repeated vertically |
| no-repeat | The background-image will be displayed only once |
pref.backgroundAttachment
string ( r, w )
Specifies whether a background image is fixed or scrolls with the rest of the page.
| Value | Description |
|---|---|
| scroll | Default. The background image moves when the rest of the page scrolls |
| fixed | The background image does not move when the rest of the page scrolls |
pref.opacity
float ( r, w )
Specifies the opacity of the droplet.
Possible values is between 0 and 1.
pref.overflow
string ( r, w )
Specifies what happens if content overflows the droplet's box.
| Value | Description |
|---|---|
| visible | The overflow is not clipped. It renders outside the droplet's box. |
| hidden | Default. The overflow is clipped, and the rest of the content will be invisible. |
| scroll | The overflow is clipped, but a scroll-bar is added to see the rest of the content. |
| auto | If overflow is clipped, a scroll-bar should be added to see the rest of the content. |
Methods
rename(n)
n: string
| Rename this molecule. |
refresh()
| Force molecule to redraw with the current set of attributes. |
clone()
Return: a molecule
| Create a clone of this molecule. |
attach(droplet)
droplet: a droplet object (e.g. app.box.droplet)
| Attach this molecule to a droplet. |
detach()
| Remove this molecule from its droplet. |
deleteMod()
| Delete this molecule. |
serialize()
Return: string
| Serialize this molecule into its JSON representation. |
setOpacity( val )
val: float [0, 1.0]
| Change opacity value of this droplet. |
setBackgroundColor( r, g, b )
r: int [0,255]
g: int [0,255]
b: int [0,255]
| Change the background color of this droplet. |
translate( x, y )
x: int
y: int
| Translate this droplet to (x, y). |
translateBy( x, y )
x: int
y: int
| Translate this droplet's position by (x, y). |
rotate( a )
a: float
| Rotate this droplet clockwise to the given degree. |
rotateBy( a )
a: float
| Rotate this droplet clockwise by the given degree. |
scale( x, y )
x: float
y: float
| Scale this droplet to (x, y) of its original size. |
scaleBy( x, y )
x: float
y: float
| Scale this droplet by (x, y). |
skew( x, y )
x: float
y: float
| Skew this droplet along its X and Y axis to the given angles. |
skewBy( x, y )
x: float
y: float
| Skew this droplet along its X and Y axis by the given angles. |
transform( m )
m: string
Transform this droplet using the given transformation matrix.transform('matrix(a, c, b, d, tx, ty)');
Where a, b, c, d build the transformation matrix ┌ ┐ │ a b │ │ c d │ └ ┘ and tx, ty are the translate values. |
transition( p, t )
p: object, attributes to be animated.
t: object, animation duration and other properties.
| This method provides a way to animate changes to a droplet's attributes. Instead of having the changes take effect instantly, it animates from the current state to an end state described by p, using the transition properties given by t.
The animatable attributes of a droplet include:
Example:
this.mod.transition({width:100,height:200,r:255,g:25,b:255,
opacity:1.0,top:300,left:600,
borderColor:'#0000ff',
borderWidth: 5, borderRadius:10, rotate:360},
{duration:'long', transition: 'sine:in:out'});
|
