DOM.ContainerSurface Class
ContainerSurface enables nesting of DOM. A ContainerSurface manages
its own render tree that it inserts inside a DOM node. Typically
this is used for clipping by settings {overflow : hidden}
as a CSS
property.
Constructor
DOM.ContainerSurface
-
[options]
Parameters:
-
[options]
Object optionalOptions
-
[size]
Number[] optionalSize (width, height) in pixels. These can also be
true
orundefined
. -
[classes]
String[] optionalCSS classes
-
[properties]
Object optionalDictionary of CSS properties
-
[attributes]
Object optionalDictionary of HTML attributes
-
[content]
optionalSstring} InnerHTML content
-
[origin]
Number[] optionalOrigin (x,y), with values between 0 and 1
-
[margins]
Number[] optionalMargins (x,y) in pixels
-
[proportions]
Number[] optionalProportions (x,y) with values between 0 and 1
-
[aspectRatio]
Number optionalAspect ratio
-
[opacity=1]
Number optionalOpacity
-
[tagName="div"]
String optionalHTML tagName
-
[enableScroll=false]
Boolean optionalAllows a Surface to support native scroll behavior
-
[roundToPixel=false]
Boolean optionalPrevents text-blurring if set to true, at the cost to jittery animation
-
Example:
var myContainer = new ContainerSurface({
size : [100,100],
properties : {overflow : hidden}
});
var surface = new Surface({
size : [200,200],
properties : {background : 'red'}
});
myContainer.add(surface);
context.add(myContainer);
Item Index
Methods
- add
- addClass
- deploy
- emit
- getAttributes
- getClasslist
- getContent
- getPerspective
- getProperties
- getSize
- mount
- off
- on
- once
- perspectiveFrom
- perspectiveOriginFrom
- querySelector
- recall
- remove
- removeClass
- setAspectRatio
- setAttributes
- setClasses
- setContent
- setMargins
- setOpacity
- setOptions
- setOrigin
- setPerspective
- setProperties
- setProportions
- setSize
- setup
- toggleClass
Methods
add
-
node
Extends the render tree with a provided node.
Parameters:
-
node
ObjectNode, Surface, or View
Returns:
addClass
-
className
Parameters:
-
className
StringClass name
deploy
-
target
Parameters:
-
target
NodeDOM element to set content into
emit
-
type
-
data
getProperties
()
Object
Returns:
off
-
type
-
handler
handler
from the type
.
Undoes the work of on
.
on
-
type
-
handler
type
channel which will be executed on emit
.
These events should be DOM events that occur on the DOM node the
context has been mounted to.
once
-
type
-
handler
type
channel which will be executed on emit
once and then removed.
perspectiveFrom
-
perspective
Parameters:
-
perspective
TransitionablePerspective transitionable
perspectiveOriginFrom
-
perspectiveOrigin
Parameters:
-
perspectiveOrigin
TransitionablePerspective-origin transitionable
querySelector
()
Element
Returns:
recall
-
target
Parameters:
-
target
Node
remove
()
removeClass
-
className
Parameters:
-
className
StringClass name
setAspectRatio
-
aspectRatio
Parameters:
-
aspectRatio
Number | StreamAspect ratio.
setAttributes
-
attributes
Parameters:
-
attributes
ObjectHTML Attributes
setContent
-
content
Parameters:
-
content
String | DocumentFragmentHTML content
setMargins
-
margins
Parameters:
-
margins
Number[] | StreamMargins as [width, height] in pixels, or a stream.
setOptions
-
options
Parameters:
-
options
ObjectOverrides for default options. See constructor.
setOrigin
-
origin
Parameters:
-
origin
Number[] | StreamOrigin as [x,y], or a stream.
setPerspective
-
perspective
-
[transition]
-
[callback]
Set current perspective in pixels.
setProperties
-
properties
Parameters:
-
properties
ObjectCSS properties
setProportions
-
proportions
Parameters:
-
proportions
Number[] | StreamProportions as [x,y], or a stream.
setSize
-
size
Parameters:
-
size
Number[] | StreamSize as [width, height] in pixels, or a stream.
setup
-
allocator
start
or resize
event the Surface gets.
Parameters:
-
allocator
DOMAllocatorAllocator
toggleClass
-
className
Parameters:
-
className
StringClass name