DOM.Surface Class
samsara/dom/Surface.js:16
Surface is a wrapper for a DOM element animated by Samsara.
Samsara will commit opacity, size and CSS3 transform
properties into the Surface.
CSS classes, properties and DOM attributes can also be added and dynamically changed.
Surfaces also act as sources for DOM events such as click
.
Constructor
DOM.Surface
-
[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]
Boolean optionalAllows a Surface to support native scroll behavior
-
[roundToPixel]
Boolean optionalPrevents text-blurring if set to true, at the cost to jittery animation
-
Example:
var context = new Context()
var surface = new Surface({
content : 'Hello world!',
size : [true,100],
opacity : .5,
classes : ['myClass1', 'myClass2'],
properties : {background : 'red'}
});
context.add(surface);
context.mount(document.body);
// same as above but create an image instead
var surface = new Surface({
tagName : 'img',
attributes : {
src : 'cat.jpg'
},
size : [100,100]
});
Item Index
Methods
addClass
-
className
Add CSS class to the list of classes on this Surface.
Parameters:
-
className
StringClass name
deploy
-
target
Insert the Surface's content into the currentTarget.
Parameters:
-
target
NodeDOM element to set content into
getProperties
()
Object
Getter for CSS properties.
Returns:
Dictionary of this Surface's properties.
off
-
type
-
handler
Removes a previously added handler to the type
channel.
Undoes the work of on
.
on
-
type
-
handler
Adds a handler to the type
channel which will be executed on emit
.
once
-
type
-
handler
Adds a handler to the type
channel which will be executed on emit
once and then removed.
querySelector
()
Element
Apply the DOM's Element.querySelector to the Surface's current DOM target. Returns the first node matching the selector within the Surface's content.
Returns:
querySelector
()
NodeList
Apply the DOM's Element.querySelectorAll to the Surface's current DOM target. Returns a list of nodes matching the selector within the Surface's content.
Returns:
recall
-
target
Cache the content of the Surface in a document fragment for future deployment.
Parameters:
-
target
Node
remove
()
Clear the HTML contents of the Surface and remove it from the Render Tree. The DOM node the Surface occupied will be freed to a pool and can be used by another Surface. The Surface can be added to the render tree again and all its data (properties, event listeners, etc) will be restored.
removeClass
-
className
Remove CSS class from the list of classes on this Surface.
Parameters:
-
className
StringClass name
setAspectRatio
-
aspectRatio
Setter for aspect ratio. If only one of width or height is specified, the aspect ratio will replace the unspecified dimension by scaling the specified dimension by the value provided.
Parameters:
-
aspectRatio
Number | StreamAspect ratio.
setAttributes
-
attributes
Setter for HTML attributes.
Parameters:
-
attributes
ObjectHTML Attributes
setContent
-
content
Set or overwrite innerHTML content of this Surface.
Parameters:
-
content
String | DocumentFragmentHTML content
setMargins
-
margins
Setter for margins.
Parameters:
-
margins
Number[] | StreamMargins as [width, height] in pixels, or a stream.
setOptions
-
options
Set options for this surface
Parameters:
-
options
ObjectOverrides for default options. See constructor.
setOrigin
-
origin
Setter for origin.
Parameters:
-
origin
Number[] | StreamOrigin as [x,y], or a stream.
setProperties
-
properties
Setter for CSS properties. Note: properties are camelCased, not hyphenated.
Parameters:
-
properties
ObjectCSS properties
setProportions
-
proportions
Setter for proportions.
Parameters:
-
proportions
Number[] | StreamProportions as [x,y], or a stream.
setSize
-
size
Setter for size.
Parameters:
-
size
Number[] | StreamSize as [width, height] in pixels, or a stream.
setup
-
allocator
Allocates the element-type associated with the Surface, adds its given element classes, and prepares it for future committing.
This method is called upon the first start
or resize
event the Surface gets.
Parameters:
-
allocator
DOMAllocatorAllocator
toggleClass
-
className
Toggle CSS class for this Surface.
Parameters:
-
className
StringClass name