Show:

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 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=false] Boolean optional

      Allows a Surface to support native scroll behavior

    • [roundToPixel=false] Boolean optional

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

Methods

add

(
  • node
)
RenderTreeNode

Inherited from DOM.Context but overwritten in

Extends the render tree with a provided node.

Parameters:

  • node Object

    Node, Surface, or View

Returns:

RenderTreeNode:

addClass

(
  • className
)

Inherited from DOM.Surface:

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

Parameters:

deploy

(
  • target
)
private

Inherited from DOM.Surface:

Insert the Surface's content into the currentTarget.

Parameters:

  • target Node
    DOM element to set content into

emit

(
  • type
  • data
)
private

Inherited from DOM.Context:

Used internally when context is subscribed to.

Parameters:

getAttributes

() Object

Inherited from DOM.Surface:

Getter for HTML attributes.

Returns:

getClasslist

() String[]

Inherited from DOM.Surface:

Get array of CSS classes attached to this Surface.

Returns:

getContent

() String

Inherited from DOM.Surface:

Return innerHTML content of this Surface.

Returns:

getPerspective

() Number

Inherited from DOM.Context but overwritten in

Get current perspective in pixels.

Returns:

Number:

Perspective in pixels

getProperties

() Object

Inherited from DOM.Surface:

Getter for CSS properties.

Returns:

Object: Dictionary of this Surface's properties.

getSize

() Number[]

Inherited from DOM.Surface:

Getter for size.

Returns:

mount

(
  • node
)

Inherited from DOM.Context:

Allocate contents of the context to a DOM node.

Parameters:

  • node Node
    DOM element

off

(
  • type
  • handler
)

Inherited from DOM.Surface but overwritten in

Removes the handler from the type. Undoes the work of on.

Parameters:

on

(
  • type
  • handler
)

Inherited from DOM.Surface but overwritten in

Adds a handler to the 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.

Parameters:

once

(
  • type
  • handler
)

Inherited from DOM.Surface:

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.

perspectiveFrom

(
  • perspective
)

Inherited from DOM.Context:

Pull the perspective value from a transitionable.

Parameters:

  • perspective Transitionable
    Perspective transitionable

perspectiveOriginFrom

(
  • perspectiveOrigin
)

Inherited from DOM.Context:

Pull the perspective-origin value from a transitionable.

Parameters:

  • perspectiveOrigin Transitionable
    Perspective-origin transitionable

querySelector

() Element

Inherited from DOM.Surface but overwritten in

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:

recall

(
  • target
)
private

Inherited from DOM.Surface:

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

Parameters:

remove

()

Inherited from DOM.Surface:

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
)

Inherited from DOM.Surface:

Remove CSS class from the list of classes on this Surface.

Parameters:

setAspectRatio

(
  • aspectRatio
)

Inherited from DOM.Surface:

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
)

Inherited from DOM.Surface:

Setter for HTML attributes.

Parameters:

  • attributes Object
    HTML Attributes

setClasses

(
  • classlist
)

Inherited from DOM.Surface:

Reset classlist.

Parameters:

setContent

(
  • content
)

Inherited from DOM.Surface:

Set or overwrite innerHTML content of this Surface.

Parameters:

setMargins

(
  • margins
)

Inherited from DOM.Surface:

Setter for margins.

Parameters:

  • margins Number[] | Stream
    Margins as [width, height] in pixels, or a stream.

setOpacity

(
  • opacity
)

Inherited from DOM.Surface:

Setter for opacity.

Parameters:

setOptions

(
  • options
)

Inherited from DOM.Surface:

Set options for this surface

Parameters:

  • options Object
    Overrides for default options. See constructor.

setOrigin

(
  • origin
)

Inherited from DOM.Surface:

Setter for origin.

Parameters:

  • origin Number[] | Stream
    Origin as [x,y], or a stream.

setPerspective

(
  • perspective
  • [transition]
  • [callback]
)

Inherited from DOM.Context but overwritten in

Set current perspective in pixels.

Parameters:

  • perspective Number

    Perspective in pixels

  • [transition] Object optional

    Transition definition

  • [callback] Function optional

    Callback executed on completion of transition

setProperties

(
  • properties
)

Inherited from DOM.Surface:

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

Parameters:

  • properties Object
    CSS properties

setProportions

(
  • proportions
)

Inherited from DOM.Surface:

Setter for proportions.

Parameters:

  • proportions Number[] | Stream
    Proportions as [x,y], or a stream.

setSize

(
  • size
)

Inherited from DOM.Surface:

Setter for size.

Parameters:

  • size Number[] | Stream
    Size as [width, height] in pixels, or a stream.

setup

(
  • allocator
)
private

Inherited from DOM.Surface:

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
)

Inherited from DOM.Surface:

Toggle CSS class for this Surface.

Parameters: