SimileAjax/Graphics

From SIMILE Widgets
Jump to: navigation, search

Contents

SimileAjax.Graphics

Graphics utility functions and constants.

Code: http://api.simile-widgets.org/ajax/2.2.1/scripts/graphics.js

Migration Notes

There are probably jQuery third-party libraries or jQuery UI components that do much but not all of this. Some pieces may come with, others may be obsolete.

Back to SimileAjax.

Attributes

SimileAjax.Graphics.pngIsTranslucent

Type: boolean
Default: (determined programatically)
Description: Using SimileAjax/Platform to determine whether the browser supports PNG translucency


SimileAjax.Graphics.bubbleConfig

Settings related to in-page dialog bubbles attributes. It may be instructional to bring in the default bubble graphic itself to demonstrate what these settings relate to.

containerCSSClass

Type: string
Default: simileAjax-bubble-container
Description:

innerContainerCSSClass

Type: string
Default: simileAjax-bubble-innerContainer
Description:

contentContainerCSSClass

Type: string
Default: simileAjax-bubble-contentContainer
Description:

borderGraphicsSize

Type: int
Default: 50
Description:

borderGraphicsCSSClassPrefix

Type: string
Default: simileAjax-bubble-border-
Description:

arrowGraphicTargetOffset

Type: int
Default: 33
Description: From tip of arrow to the side of the graphic that touches the content of the bubble

arrowGraphicLength

Type: int
Default: 100
Description: Dimension of arrow graphic along the direction that the arrow points

arrowGraphicWidth

Type: int
Default: 49
Description: Dimension of arrow graphic perpendicular to the direction that the arrow points

arrowGraphicCSSClassPrefix

Type: string
Default: simileAjax-bubble-arrow-
Description:

closeGraphicCSSClass

Type: string
Default: simileAjax-bubble-close
Description:

extraPadding

Type: int
Default: 20
Description:

Classes

SimileAjax.Graphics._Animation

Arguments:
f: function, a function to be called every 50 milliseconds throughout the animation duration, of the form f(current, delta), where current is the current value within the range and delta is the current change.
from: number, a starting value
to: number, an ending value
duration: number, duration of the operation in milliseconds
cont: function, optional, a function to be called when the animation is finished
Returns: SimileAjax.Graphics._Animation
Description: Creates an animation for a function, and an interval of values. The word "animation" here is used in the sense of repeatedly calling a function with a current value from within an interval, and a delta value.

SimileAjax.Graphics._Animation.prototype.run

Arguments: None
Returns: Nothing
Description: Starts running the animation

SimileAjax.Graphics._Animation.prototype.step

Arguments: None
Returns: Nothing
Description: Advanced the animation by one step

SimileAjax.Graphics._FontRenderingContext

Used in Timeline, not Exhibit. For calculating the size of a block of text before showing to the user.

SimileAjax.Graphics._FontRenderingContext.prototype.dispose

SimileAjax.Graphics._FontRenderingContext.prototype.update

SimileAjax.Graphics._FontRenderingContext.prototype.computeSize

SimileAjax.Graphics._FontRenderingContext.prototype.getLineHeight

Methods

SimileAjax.Graphics.createTranslucentImage

Arguments:
url: string, the URL to the image
verticalAlign: string, the CSS value for the image's vertical-align
Returns: Element, a DOM element containing the img tag
Description: Creates a DOM element for an img tag using the URL given. This is a convenience method that automatically includes the necessary CSS to allow for translucency, even on IE.

SimileAjax.Graphics.createTranslucentImageHTML

Arguments:
url: string, the URL to the image
verticalAlign: string, the CSS value for the image's vertical-align
Returns: Element, a DOM element containing the img tag
Description: Creates an HTML string for an img tag using the URL given. This is a convenience method that automatically includes the necessary CSS to allow for translucency, even on IE.

SimileAjax.Graphics.setOpacity

Arguments:
elmt: Element, the DOM element to measure
opacity: int, from 0 (translucent) to 100 (opaque)
Returns: Nothing
Description: Sets the opacity on the given DOM element.

SimileAjax.Graphics.createBubbleForContentAndPoint

Arguments:
div: Element, the content div
pageX: number, the x coordinate of the point to point to
pageY: number, the y coordinate of the point to point to
contentWidth: number, a suggested width of the content
orientation: string, a string ("top", "bottom", "left", or "right") that describes the orientation of the arrow on the bubble
maxHeight: number, add a scrollbar div if bubble would be too tall. Default of 0 or null means no maximum
Returns: Nothing
Description: Creates a nice, rounded bubble popup with the given content in a div, page coordinates and a suggested width. The bubble will point to the location on the page as described by pageX and pageY. All measurements should be given in pixels.

SimileAjax.Graphics.createBubbleForPoint

Arguments:
pageX: number, the x coordinate of the point to point to
pageY: number, the y coordinate of the point to point to
contentWidth: number, the width of the content box in the bubble
contentHeight: number, the height of the content box in the bubble
orientation: string, a string ("top", "bottom", "left", or "right") that describes the orientation of the arrow on the bubble
Returns: Element, a DOM element for the newly created bubble
Description: Creates a nice, rounded bubble popup with the given page coordinates and content dimensions. The bubble will point to the location on the page as described by pageX and pageY. All measurements should be given in pixels.

SimileAjax.Graphics.createMessageBubble

Arguments:
doc: Document, the root document object to manipulate
Returns: object, a hash with DOM Element-type attributes containerDiv and contentDiv
Description: Creates a floating, rounded message bubble in the center of the window for displaying modal information, e.g. "Loading..."

SimileAjax.Graphics.createAnimation

Convenience method for the Animation constructor.

SimileAjax.Graphics.createStructuredDataCopyButton

Arguments:
image: string, an image URL to use as the background for the generated box
width: number, the width in pixels of the generated box
height: number, the height in pixels of the generated box
createDataFunction, function, a function that is called with no arguments to generate the structured data
Returns: Element
Description: Creates a button and textarea for displaying structured data and copying it to the clipboard. The data is dynamically generated by the given createDataFunction parameter.

SimileAjax.Graphics.getWindowDimensions

Arguments: None
Returns: object, a hash with numeric attributes w and h
Description: Calculates the window's viewport dimensions

SimileAjax.Graphics.getWidthHeight

Arguments:
el: Element, the DOM element to measure
Returns: object, a hash with numeric attributes width and height
Description: Calculates the offsetWidth, offsetHeight of an element

SimileAjax.Graphics.getFontRenderingContext

Convenience method for the FontRenderingContext constructor.

SimileAjax.Graphics._createTranslucentImage1

For browsers natively supporting translucent PNG, implements createTranslucentImage.

SimileAjax.Graphics._createTranslucentImage2

IE-specific version of createTranslucentImage depending on pngIsTranslucent

SimileAjax.Graphics._createTranslucentImageHTML1

For browsers natively supporting translucent PNG, implements createTranslucentImageHTML.

SimileAjax.Graphics._createTranslucentImageHTML2

IE-specific version of createTranslucentImageHTML depending on pngIsTranslucent

Back to SimileAjax.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox