SamsaraJS

  • API Docs for Version: 0.2.0


    • Show:

    DOM.ContainerSurface Class

    Uses
    Extends DOM.Surface
    Defined in: samsara/dom/ContainerSurface.js:7

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

    Inherited from DOM.Surface:

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

    Parameters:

    attach

    (
    • target
    )
    private

    Inherited from Core.ElementOutput:

    Assigns the DOM element for committing and to and attaches event listeners.

    Parameters:

    • target Node

      document parent of this container

    deploy

    (
    • target
    )
    private

    Inherited from DOM.Surface:

    Insert the Surface's content into the currentTarget.

    Parameters:

    • target Node
      DOM element to set content into

    detach

    () private

    Inherited from Core.ElementOutput:

    Removes the associated DOM element in memory and detached event listeners.

    emit

    (
    • type
    • data
    )
    private

    Inherited from Core.ElementOutput but overwritten in

    Used internally when context is subscribed to.

    Parameters:

    getAttributes

    () Object

    Inherited from DOM.Surface:

    Getter for HTML attributes.

    Returns:

    Object:

    getClasslist

    () String[]

    Inherited from DOM.Surface:

    Get array of CSS classes attached to this Surface.

    Returns:

    String[]:

    getContent

    () String

    Inherited from DOM.Surface:

    Return innerHTML content of this Surface.

    Returns:

    String:

    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:

    Number[]:

    mount

    (
    • node
    )

    Inherited from DOM.Context:

    Allocate contents of the context to a DOM node.

    Parameters:

    • node Node
      DOM element

    on

    (
    • type
    • handler
    )

    Inherited from Core.ElementOutput 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:

    recall

    (
    • target
    )
    private

    Inherited from DOM.Surface:

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

    Parameters:

    remove

    (
    • allocator
    )
    private

    Inherited from DOM.Surface:

    Remove all Samsara-relevant data from the Surface.

    Parameters:

    • allocator ElementAllocator
      Allocator

    removeClass

    (
    • className
    )

    Inherited from DOM.Surface:

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

    Parameters:

    removeListener

    (
    • type
    • handler
    )

    Inherited from Core.ElementOutput:

    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

    set

    (
    • sources
    )

    Inherited from Core.SizeNode but overwritten in

    Introduce new data streams to the layout node in {key : value} pairs. Here the key is one of "transform", "origin", "align" or "opacity". The value is either a stream, or a simple type like a Number or Array. Simple types will be wrapped in an Observerable to emit appropriate events.

    Parameters:

    • sources Object

      Object of data sources

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

    Inherited from DOM.Surface:

    Setter for HTML attributes.

    Parameters:

    • attributes Object
      HTML Attributes

    setClasses

    (
    • classlist
    )
    chainable

    Inherited from DOM.Surface:

    Reset classlist.

    Parameters:

    setContent

    (
    • content
    )
    chainable

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

    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 ElementAllocator
      Allocator

    toggleClass

    (
    • className
    )

    Inherited from DOM.Surface:

    Toggle CSS class for this Surface.

    Parameters: