====== Differences ====== This shows you the differences between two versions of the page.
Next revision | Previous revision | ||
script_scrollbar_interactive [2014/05/03 13:17] tbog created |
script_scrollbar_interactive [2014/05/07 13:07] (current) tbog [Script code] |
||
---|---|---|---|
Line 1: | Line 1: | ||
====== About script ====== | ====== About script ====== | ||
* Purpose : Scrollbar to show screen position in container. Also click on scrollbar to go scroll to that position | * Purpose : Scrollbar to show screen position in container. Also click on scrollbar to go scroll to that position | ||
- | * Author : TBog | + | * Author : [[www.google.com/+BogdanTautuTBog|TBog]] |
- | * Link: ... | + | * Link: [[https://plus.google.com/104484987458557530625/posts/J2t8AeTiTXr|for feedback]] |
====== How to use the script ====== | ====== How to use the script ====== | ||
- | - Create a panel with the label **scrollBar** | + | - 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. | + | - 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 on tap empty space event of panel | + | - 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 ====== | ====== Script code ====== | ||
- | updateScrollBar | + | **__updateScrollBar__** |
<code> | <code> | ||
var c = LL.getEvent().getContainer(); | var c = LL.getEvent().getContainer(); | ||
Line 31: | Line 37: | ||
bgC.setPosition(0, 0, 1, false); | bgC.setPosition(0, 0, 1, false); | ||
- | fg.setScale(1, 1); | + | //fg.setScale(1, 1); |
fg.setSize(fgW, fgH); | fg.setSize(fgW, fgH); | ||
fg.setPosition(fgX, fgY); | fg.setPosition(fgX, fgY); | ||
</code> | </code> | ||
- | onScrollbarTap | + | ---- |
+ | |||
+ | **__onScrollbarTap__** | ||
<code> | <code> | ||
var bSnapPage = false; | var bSnapPage = false; | ||
Line 82: | Line 90: | ||
</code> | </code> | ||
- | TODO: Script to setup more easily | + | ---- |
+ | |||
+ | 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> |