Show:

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 optional

    Options

    • [size] Number[] optional

      Size (width, height) in pixels. These can also be true or undefined.

    • [classes] String[] optional

      CSS classes

    • [properties] Object optional

      Dictionary of CSS properties

    • [attributes] Object optional

      Dictionary of HTML attributes

    • [content] optional

      Sstring} InnerHTML content

    • [origin] Number[] optional

      Origin (x,y), with values between 0 and 1

    • [margins] Number[] optional

      Margins (x,y) in pixels

    • [proportions] Number[] optional

      Proportions (x,y) with values between 0 and 1

    • [aspectRatio] Number optional

      Aspect ratio

    • [opacity=1] Number optional

      Opacity

    • [tagName="div"] String optional

      HTML tagName

    • [enableScroll] Boolean optional

      Allows a Surface to support native scroll behavior

    • [roundToPixel] Boolean optional

      Prevents 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]
         });

Methods

addClass

(
  • className
)

Add CSS class to the list of classes on this Surface.

Parameters:

deploy

(
  • target
)
private

Insert the Surface's content into the currentTarget.

Parameters:

  • target Node

    DOM element to set content into

getAttributes

() Object

Getter for HTML attributes.

Returns:

getClasslist

() String[]

Get array of CSS classes attached to this Surface.

Returns:

getContent

() String

Return innerHTML content of this Surface.

Returns:

getProperties

() Object

Getter for CSS properties.

Returns:

Object:

Dictionary of this Surface's properties.

getSize

() Number[]

Getter for size.

Returns:

off

(
  • type
  • handler
)

Removes a previously added handler to the type channel. Undoes the work of on.

Parameters:

  • type String

    DOM event channel name e.g., "click", "touchmove"

  • handler Function

    Handler

on

(
  • type
  • handler
)

Adds a handler to the type channel which will be executed on emit.

Parameters:

  • type String

    DOM event channel name, e.g., "click", "touchmove"

  • handler Function

    Handler. It's only argument will be an emitted data payload.

once

(
  • type
  • handler
)

Adds a handler to the type channel which will be executed on emit once and then removed.

Parameters:

  • type String

    DOM event channel name, e.g., "click", "touchmove"

  • handler Function

    Handler. It's only argument will be an emitted data payload.

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
)
private

Cache the content of the Surface in a document fragment for future deployment.

Parameters:

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:

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 | Stream

    Aspect ratio.

setAttributes

(
  • attributes
)

Setter for HTML attributes.

Parameters:

  • attributes Object

    HTML Attributes

setClasses

(
  • classlist
)

Reset classlist.

Parameters:

setContent

(
  • content
)

Set or overwrite innerHTML content of this Surface.

Parameters:

setMargins

(
  • margins
)

Setter for margins.

Parameters:

  • margins Number[] | Stream

    Margins as [width, height] in pixels, or a stream.

setOpacity

(
  • opacity
)

Setter for opacity.

Parameters:

setOptions

(
  • options
)

Set options for this surface

Parameters:

  • options Object

    Overrides for default options. See constructor.

setOrigin

(
  • origin
)

Setter for origin.

Parameters:

  • origin Number[] | Stream

    Origin as [x,y], or a stream.

setProperties

(
  • properties
)

Setter for CSS properties. Note: properties are camelCased, not hyphenated.

Parameters:

  • properties Object

    CSS properties

setProportions

(
  • proportions
)

Setter for proportions.

Parameters:

  • proportions Number[] | Stream

    Proportions as [x,y], or a stream.

setSize

(
  • size
)

Setter for size.

Parameters:

  • size Number[] | Stream

    Size as [width, height] in pixels, or a stream.

setup

(
  • allocator
)
private

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 DOMAllocator

    Allocator

toggleClass

(
  • className
)

Toggle CSS class for this Surface.

Parameters: