rip_scrollbar.js is a loadable JavaScript file that provides a class, RIPScrollbar, which is a reusable scrollbar widget for RIP terminals on Synchronet. It renders a graphical scrollbar with arrow buttons, a proportional track, and a draggable thumb, all using RIPScrip vector drawing primitives.

RIPScrollbar supports both vertical and horizontal orientations. By default the scrollbar is vertical (with up/down arrow buttons and a thumb that moves vertically). Setting the horizontal property to true before calling computeLayout() switches to horizontal mode, where the arrow buttons become left/right arrows and the thumb moves horizontally.

RIPScrollbar is a pure rendering/layout component — it does not handle user input directly. Instead, the consumer (such as RIPLightbarMenu or a custom dialog) is responsible for reading keyboard and mouse input and calling the appropriate methods to update the scroll position and redraw the thumb.

To create a new RIPScrollbar object:

var sb = new RIPScrollbar(x, y, width, height);

The x, y, width, and height parameters are in RIP pixel coordinates (the RIP graphics viewport is 640×350 pixels).

rip_scrollbar.js requires the following loadable module:

• rip_lib.js — for generating RIPScrip command strings

The scrollbar defaults to vertical mode. To create a horizontal scrollbar, set the horizontal property to true before calling computeLayout():

var sb = new RIPScrollbar(50, 330, 400, 14);
sb.horizontal = true;
sb.computeLayout();

In horizontal mode:

• The arrow buttons appear at the left and right edges instead of the top and bottom.
• The arrowHeight property controls the width of each arrow button (instead of the height).
• The thumb moves along the X axis instead of the Y axis.
• getThumbGeometry() returns { x, w } (left pixel and width) instead of { y, h } (top pixel and height).
• The thumb drag mouse region uses $X$ (the mouse X coordinate at release time) instead of $Y$.
• The mouseChars.scrollUp and mouseChars.scrollDn characters correspond to “scroll left” and “scroll right” respectively.
• The mouseChars.trackPgUp and mouseChars.trackPgDn characters correspond to “page left” and “page right” respectively.

The consumer handles the mouse input the same way regardless of orientation — the character codes are identical. The only difference is which coordinate (X or Y) follows the thumbDrag character.

The typical usage pattern is:

1. Create a RIPScrollbar with the desired position and size.
2. Optionally set horizontal to true for a horizontal scrollbar.
3. Set the scroll state: totalItems, visibleCount, and topIndex.
4. Call computeLayout() to calculate the internal geometry.
5. Call buildFullRIP() to get the RIP command string for the complete scrollbar, and send it to the terminal.
6. Call buildMouseRegionsRIP() to get the RIP mouse region commands, and send those as well. This registers clickable areas for the arrow buttons, track areas, and the thumb.
7. When the user scrolls (via keyboard or mouse clicks), update topIndex, then call buildThumbRIP() and buildMouseRegionsRIP() to efficiently redraw just the thumb and update the mouse regions.

The scrollbar's mouse regions send high-byte character codes when clicked (configurable via the mouseChars property). The consumer reads these codes from console input and maps them to scroll actions:

• scrollUp (default 0xFE): Scroll up/left one item (up or left arrow clicked)
• scrollDn (default 0xFD): Scroll down/right one item (down or right arrow clicked)
• trackPgUp (default 0xFC): Page up/left (track area before the thumb clicked)
• trackPgDn (default 0xFB): Page down/right (track area after the thumb clicked)
• thumbDrag (default 0xFA): Thumb drag — followed by the $Y$ text variable (vertical mode) or $X$ text variable (horizontal mode), giving the mouse coordinate at release time as a decimal digit string. The consumer reads this coordinate and computes the new scroll position proportionally.

RIPScrollbar methods

RIPScrollbar properties

To change the scrollbar colors:

sb.colors.track = RIP_COLOR_BLACK;
sb.colors.thumb = RIP_COLOR_LT_CYAN;
sb.colors.arrowBg = RIP_COLOR_LT_GRAY;
sb.colors.arrowFg = RIP_COLOR_BLACK;
sb.colors.bevelBright = RIP_COLOR_WHITE;
sb.colors.bevelDark = RIP_COLOR_DK_GRAY;

load("rip_scrollbar.js");
load("rip_lib.js");

// Helper to send a batch of RIP commands
function sendRIP(cmds) {
  console.write("\r!" + cmds + RIPGotoXYNumeric(0, 0) + "\r\n");
}

// Create a vertical scrollbar at pixel position (600, 70), 14 pixels wide, 260 pixels tall
var sb = new RIPScrollbar(600, 70, 14, 260);
sb.setScrollState(100, 20, 0);  // 100 total items, 20 visible, starting at item 0
sb.computeLayout();

// Draw the scrollbar and register mouse regions
sendRIP(sb.buildFullRIP() + sb.buildMouseRegionsRIP());

// In your input loop, when the user scrolls:
sb.topIndex = 5;  // User scrolled down to show items 5-24
sendRIP(sb.buildThumbRIP() + sb.buildMouseRegionsRIP());

load("rip_scrollbar.js");
load("rip_lib.js");

function sendRIP(cmds) {
  console.write("\r!" + cmds + RIPGotoXYNumeric(0, 0) + "\r\n");
}

// Create a horizontal scrollbar at pixel position (50, 330), 500 pixels wide, 14 pixels tall
var sb = new RIPScrollbar(50, 330, 500, 14);
sb.horizontal = true;  // Switch to horizontal mode
sb.setScrollState(200, 50, 0);  // 200 total items, 50 visible, starting at item 0
sb.computeLayout();

// Draw and register mouse regions (same API as vertical)
sendRIP(sb.buildFullRIP() + sb.buildMouseRegionsRIP());

When the user clicks on the scrollbar's mouse regions, SyncTerm sends the corresponding character code. Here is an example of handling the mouse input in a getkey() loop. The handling code is the same for vertical and horizontal scrollbars — only the coordinate variable (Y vs X) differs for the thumb drag:

var key = console.getkey(K_NOCRLF | K_NOECHO | K_NOSPIN);
var ch = key.charCodeAt(0);

if (ch === sb.mouseChars.scrollUp) {
  if (topIndex > 0) --topIndex;
}
else if (ch === sb.mouseChars.scrollDn) {
  if (topIndex < maxTopIndex) ++topIndex;
}
else if (ch === sb.mouseChars.trackPgUp) {
  topIndex = Math.max(0, topIndex - visibleCount);
}
else if (ch === sb.mouseChars.trackPgDn) {
  topIndex = Math.min(maxTopIndex, topIndex + visibleCount);
}
else if (ch === sb.mouseChars.thumbDrag) {
  // Read the coordinate digits that follow.  For vertical scrollbars this is
  // the $Y$ value; for horizontal scrollbars this is the $X$ value.
  var coordStr = "";
  for (var d = 0; d < 4; ++d) {
    var dc = console.inkey(0, 500);
    if (dc === "") break;
    coordStr += dc;
  }
  var mouseCoord = parseInt(coordStr, 10);
  if (!isNaN(mouseCoord)) {
    var sbL = sb._layout;
    if (sb.horizontal) {
      // Horizontal: map X coordinate to scroll position
      var thumb = sb.getThumbGeometry();
      var thumbRange = sbL.trackWidth - thumb.w;
      if (thumbRange > 0) {
        var clampedX = Math.max(sbL.trackLeft, Math.min(sbL.trackRight, mouseCoord));
        var relX = clampedX - sbL.trackLeft;
        topIndex = Math.round(relX * maxTopIndex / thumbRange);
        topIndex = Math.max(0, Math.min(maxTopIndex, topIndex));
      }
    }
    else {
      // Vertical: map Y coordinate to scroll position
      var thumb = sb.getThumbGeometry();
      var thumbRange = sbL.trackHeight - thumb.h;
      if (thumbRange > 0) {
        var clampedY = Math.max(sbL.trackTop, Math.min(sbL.trackBot, mouseCoord));
        var relY = clampedY - sbL.trackTop;
        topIndex = Math.round(relY * maxTopIndex / thumbRange);
        topIndex = Math.max(0, Math.min(maxTopIndex, topIndex));
      }
    }
  }
}

// After updating topIndex, redraw the thumb and mouse regions
sb.topIndex = topIndex;
sendRIP(sb.buildThumbRIP() + sb.buildMouseRegionsRIP());

For real-world examples where RIPScrollbar is used, see:

• RIPLightbarMenu (rip_lightbar_menu.js): Creates a vertical RIPScrollbar internally to provide scrolling for the menu's item list.
• Digital Distortion File Lister (ddfilelister.js): Uses RIPScrollbar in its showRIPTextDialog() function for scrolling file information, help screens, and batch download queue dialogs in RIP mode.

• rip_lightbar_menu.js — the lightbar menu that uses RIPScrollbar
• dd_lightbar_menu.js — the ANSI counterpart menu class
• custom:javascript:lib index