====== About script ====== * Purpose : Scrollbar to show screen position in container. Also click on scrollbar to go scroll to that position * Author : [[www.google.com/+BogdanTautuTBog|TBog]] * Link: [[https://plus.google.com/104484987458557530625/posts/J2t8AeTiTXr|for feedback]] ====== How to use the script ====== - Create a panel with the label **__scrollBar__** inside the container you want to have a scrollbar into. - Inside the panel place an item, detached from grid and not clickable. Disable label and icon. Set background color. This will be the page indicator. - Set **onScrollBarTap** script as the //tap empty space// event of the panel. Optional: disable panel scrolling. - Set **updateScrollBar** script to the change position event of the container that holds the **__scrollBar__** panel //__Optional__:// Can set grid on the **__scrollBar__** panel to show pages, must manually set the layout of the panel and select the grid size according to the number of pages ( or items if you're so inclined ) In the **onScrollBarTap** script you can configure where to scroll on tap. Set **bSnapGrid** to **true** to snap at grid position ( or else you will see partial items ), or set **bSnapPage** to **true** to snap at page positions ( or else you will be able to see partial pages ) ====== Photo examples ====== * [[https://lh3.googleusercontent.com/-dS-pTuih_Ok/U2UdJb4YoZI/AAAAAAAARf8/a2-wIofUoWQ/w516-h108-no/2014-05-03+16.46.53.png|Horizontal scrollbar]] where the panel has white borders, inside panel red grid that represents pages and a green indicator. * [[https://lh4.googleusercontent.com/-RtsolwWaWBM/U2UdTo3V2NI/AAAAAAAARgE/k650ZxJ1srU/w1329-h4362-no/2014-05-03+16.45.44.png|Vertical scrollbar]] inside a folder on the right side. ====== Script code ====== **__updateScrollBar__** <code> var c = LL.getEvent().getContainer(); var bgC = c.getItemByLabel("scrollBar").getContainer(); var fg = bgC.getItems().getAt(0); var bgW = bgC.getWidth(); var bgH = bgC.getHeight(); var bb = c.getBoundingBox(); var wholeW = bb.getRight() - bb.getLeft(); var wholeH = bb.getBottom() - bb.getTop(); var fgW = Math.min(1, c.getWidth() / wholeW) * bgW; var fgH = Math.min(1, c.getHeight() / wholeH) * bgH; var fgX = bgW * (c.getPositionX() - bb.getLeft()) / wholeW; var fgY = bgH * (c.getPositionY() - bb.getTop()) / wholeH; bgC.setPosition(0, 0, 1, false); //fg.setScale(1, 1); fg.setSize(fgW, fgH); fg.setPosition(fgX, fgY); </code> ---- **__onScrollbarTap__** <code> var bSnapPage = false; var bSnapGrid = true; var e = LL.getEvent(); var ey= e.getTouchY(); var ex= e.getTouchX(); var ec= e.getContainer(); var itm = ec.getOpener(); var c = itm.getParent(); var w = c.getWidth(); var h = c.getHeight(); var bb= c.getBoundingBox(); var wholeW = bb.getRight() - bb.getLeft(); var wholeH = bb.getBottom() - bb.getTop(); var pPW = w / wholeW; var pPH = h / wholeH; var pX = ex / ec.getWidth(); var pY = ey / ec.getHeight(); if ( bSnapPage ) { pX-= pX % pPW; pY-= pY % pPH; } else { pX-= pPW * 0.5; pY-= pPH * 0.5; } if ( bSnapGrid ) { var pGW = c.getCellWidth() / wholeW; var pGH = c.getCellHeight() / wholeH; pX-= pX % pGW; pY-= pY % pGH; } pX = Math.min(1 - pPW, Math.max(0, pX)); pY = Math.min(1 - pPH, Math.max(0, pY)); LL.goToDesktopPosition(c.getId(), pX * wholeW + bb.getLeft(), pY * wholeH + bb.getTop()); </code> ---- Script to set scrollbar inside a folder easily. It places the scrollbar on the right side of the last cell column, this requires to have a custom folder width and custom cell width. Set script to appear in the item menu and run it from any item inside the folder. <code> var thickness = 50; function getContainerCellCountX(c) { var items = c.getItems(); var I = items.getLength() - 1; var max = Number.MIN_VALUE; var min = Number.MAX_VALUE; while ( I >= 0 ) { var item = items.getAt(I--); if ( !item.getProperties().getBoolean("i.onGrid") ) continue; var r = item.getCell(); max = Math.max(max, r.getRight()); min = Math.min(min, r.getLeft()); } return max - min; } var c = LL.getEvent().getContainer(); var sb = c.getItemByLabel("scrollBar"); // right sb.setSize(thickness, c.getHeight()); var width = c.getOpener().getProperties().getInteger("f.wW"); var space = width - getContainerCellCountX(c) * c.getCellWidth(); var padding = space - thickness; alert("found width "+width+"; space "+space+"; will use "+padding+" padding"); sb.setPosition(width - thickness, 0); c.setPosition(0, 0); </code>
