element Property (ImageViewerItem)

Summary

The HTML or SVG Element associated with this item.

Syntax

JavaScript Syntax

Object.defineProperty(ImageViewerItem.prototype, 'element', 
	get: function(), 
	set: function(value) 
)

TypeScript Syntax

element: HTMLElement;

Property Value

The svg or user-defined HTML associated with this item. Default value is null.

Remarks

The item can have a value in only one of Image, Element or Canvas. Setting one value will automatically delete the values of the others. Element accepts any element, but may still be null after the set operation. An HTML Image Element set to Element will actually be set to Image, and an HTML5 Canvas Element set to Element will actually be set to Canvas.

Element is used to support elements that are neither HTML Image Elements nor HTML5 Canvas Elements. Essentially, this means support for:

SVG Elements in full DOM form (as opposed to SVG rendered within an img)
User-Defined HTML Display, provided the ImageViewer is in Elements Mode.

Changing the value of this property will fire the ItemChanged event with ImageViewerItemChangedReason.Image. The value of Resolution will not be automatically updated with the DPI of the new image. The user must set this value manually.

Element property of ImageViewer will update this member if this is the active item when the viewer is used in single item mode.

When setting this property to any User-Defined HTML, be aware of the CSS settings for box-sizing. The ImageViewer is rendered using a consistent box-sizing: "content-box"; this will be applied to the root element added to Element. However, any descendants of that root will not have an explicit box-sizing value set.

When adding the element, internal methods will attempt to get the natural size of the root and its descendants and resize the ImageViewerItem around that computed size. Due to CSS abnormalities and technicalities, particularly with respect to the CSS Box Model, this value may not always be correct. To troubleshoot, try examining what CSS rules are in effect for the added HTML, and if padding or border are involved, consider your values for box-sizing.

For more information, refer to Image Viewer Items.

Example

JavaScript Example

// Create a container 
var div = document.createElement("div"); 
// If adding padding or border to the root,  
// Also add box-sizing: "content-box" 
div.style.boxSizing = "content-box"; 
div.style.padding = "5px"; 
// Create a heading 
var h3 = document.createElement("h3"); 
h3.innerHTML = "My HTML"; 
// Create a button 
var button = document.createElement("button"); 
button.innerHTML = "Click me!" 
// Connect them all 
div.appendChild(h3); 
div.appendChild(button); 
    
// Interaction below is only available if pointer events are supported 
// By default no elements can be interacted with, so use ElementInsertionHelper 
lt.Controls.ElementInsertionHelper.forcePointerEvents([button]); 
button.onclick = function () { 
   alert("I've been clicked!"); 
}; 
    
// We could also allow selecting the h3 text with the below line, or combine it with the above line 
//lt.Controls.ElementInsertionHelper.forcePointerEvents([h3]); 
    
// Size is computed when added, but setting an explicit height is also possible. 
//div.style.width = ... 
//div.style.height = ... 
    
// Use any of the below methods to add the item 
// 1: Create an item manually 
var item = new lt.Controls.ImageViewerItem(); 
item.text = "Item # 1"; 
item.element = div; 
this._imageViewer.beginUpdate(); 
this._imageViewer.items.add(item); 
this._imageViewer.endUpdate(); 
    
// 2: Use CreateFromElement 
//var item = this._imageViewer.createFromElement(div, lt.LeadSizeD.create(96, 96)); 
//item.text = "Item # 1"; 
//this._imageViewer.beginUpdate(); 
//this._imageViewer.items.add(item); 
//this._imageViewer.endUpdate(); 
    
// 3: Use AddFromElement / InsertFromElement 
//var item = this._imageViewer.items.addFromElement(div, lt.LeadSizeD.create(96, 96)); 
//item.text = "Item # 1"; 
    
// 4: Update via UpdateElement 
//this._imageViewer.items.updateElement(this._imageViewer.activeItem, div, lt.LeadSizeD.create(96, 96));