SimileAjax/Graphics

= 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.

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:

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.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  tag
 * Description: Creates a DOM element for an  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  tag
 * Description: Creates an HTML string for an  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.