SamsaraJS

  • API Docs for Version: 0.2.0


    • Show:

    DOM.Surface Class

    Extends Core.ElementOutput
    Defined in: samsara/dom/Surface.js:11

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

    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

    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
    • [payload]
    )

    Inherited from Core.ElementOutput:

    Emit an event with optional data payload. This will execute all listening to the channel name with the payload as only argument.

    Parameters:

    • type String

      Event channel name

    • [payload] Object optional

      User defined data payload

    getAttributes

    () Object

    Getter for HTML attributes.

    Returns:

    Object:

    getClasslist

    () String[]

    Get array of CSS classes attached to this Surface.

    Returns:

    String[]:

    getContent

    () String

    Return innerHTML content of this Surface.

    Returns:

    String:

    getProperties

    () Object

    Getter for CSS properties.

    Returns:

    Object:

    Dictionary of this Surface's properties.

    getSize

    () Number[]

    Getter for size.

    Returns:

    Number[]:

    on

    (
    • type
    • handler
    )

    Inherited from Core.ElementOutput:

    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.

    recall

    (
    • target
    )
    private

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

    Parameters:

    remove

    (
    • allocator
    )
    private

    Remove all Samsara-relevant data from the Surface.

    Parameters:

    • allocator ElementAllocator

      Allocator

    removeClass

    (
    • className
    )

    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
    )

    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

    Setter for HTML attributes.

    Parameters:

    • attributes Object

      HTML Attributes

    setClasses

    (
    • classlist
    )
    chainable

    Reset classlist.

    Parameters:

    setContent

    (
    • content
    )
    chainable

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

    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 ElementAllocator

      Allocator

    toggleClass

    (
    • className
    )

    Toggle CSS class for this Surface.

    Parameters: