ImageViewerActiveItemInteractiveMode Object

Summary

Allows you to change the current active item in the viewer using the keyboard or mouse/touch.

Syntax

JavaScript Syntax

function lt.Controls.ImageViewerActiveItemInteractiveMode 
	extends lt.Controls.ImageViewerInteractiveMode

TypeScript Syntax

class lt.Controls.ImageViewerActiveItemInteractiveMode() 
	extends lt.Controls.ImageViewerInteractiveMode

Remarks

ImageViewerActiveItemInteractiveMode derives from ImageViewerInteractiveMode and subscribes to the following events of the InteractiveService:

DragStarted
Move if IsHoverEnabled is true
KeyDown if IsKeyboardEnabled is true

ImageViewerActiveItemInteractiveMode changes the current ActiveItem as follows:

If the user clicks on an item, it will become the new ActiveItem.
If IsKeyboardEnabled is set to true, the moving using the arrow, page up/down, home and end key will also set the ActiveItem. This works as a "grid" using the current ViewLayout. For example, if you press down, the item below the current active item (if any) will become the new active. If you press left, the item to the left of the current item will become the new active item and so on.
If the value of IsHoverEnabled is set to true, then moving the mouse over an item will change its IsHovered to true, moving the mouse away from the item sets it back to false. If you changed the image viewer appearance to have different styles for hovered item then the UI will give indication of this operation. For more information refer to Image Viewer Appearance.

For more information, refer to Image Viewer Interactive Modes.

Example

JavaScript Example

example: function ImageViewerActiveItemInteractiveMode$Example() { 
   this._imageViewer.interactiveModes.beginUpdate(); 
   var myImageViewerInteractivMode = new MyImageViewerInteractivMode(); 
   myImageViewerInteractivMode.isHoverEnabled = true, 
   myImageViewerInteractivMode.isKeyboardEnabled = true 
   this._imageViewer.interactiveModes.add(myImageViewerInteractivMode); 
   this._imageViewer.interactiveModes.endUpdate(); 
} 
 
var _this = null; 
MyImageViewerInteractivMode = function MyImageViewerInteractivMode() { 
   MyImageViewerInteractivMode.initializeBase(this); 
   _this = this; 
} 
 
MyImageViewerInteractivMode.prototype = { 
   name: function MyImageViewerInteractivMode$name() { 
      return "MyImageViewerInteractivMode"; 
   }, 
 
   id: function MyImageViewerInteractivMode$id() { 
      return lt.Controls.ImageViewerInteractiveMode.userModeId; 
   }, 
 
   start: function MyImageViewerInteractivMode$start(imageViewer) { 
      MyImageViewerInteractivMode.callBaseMethod(this, "start", [imageViewer]); 
 
      var service = MyImageViewerInteractivMode.callBaseMethod(this, "get_interactiveService"); 
 
      service.tap.add(this.service_Tap); 
   }, 
 
   stop: function MyImageViewerInteractivMode$stop(imageViewer) { 
      if (this.isStarted) { 
         var service = MyImageViewerInteractivMode.callBaseMethod(this, "get_interactiveService"); 
 
         service.tap.remove(this.service_Tap); 
 
         MyImageViewerInteractivMode.callBaseMethod(this, "stop", [imageViewer]); 
      } 
   }, 
 
   service_Tap: function MyImageViewerInteractivMode$_service_DragStarted(sender, e) { 
      if (_this.canStartWork(e)) { 
         e.IsHandled = true; 
         _this.onWorkStarted(lt.LeadEventArgs.empty); 
 
         var imageViewer = _this.imageViewer; 
 
         imageViewer.beginRender(); 
         // ... 
         // ... 
         // ... 
         // set your render code here 
         // ... 
         // ... 
         // ... 
         imageViewer.endRender(); 
 
         _this.onWorkCompleted(lt.LeadEventArgs.empty); 
      } 
   } 
} 
 
// MyImageViewerInteractivMode class, derives from lt.Controls.ImageViewerInteractiveMode 
MyImageViewerInteractivMode.registerClass("MyImageViewerInteractivMode", lt.Controls.ImageViewerActiveItemInteractiveMode);