script_scrollbar_interactive
====== Differences ====== This shows you the differences between two versions of the page.
| Both sides previous revision Previous revision Next revision | Previous revision | ||
|
script_scrollbar_interactive [2014/05/03 13:48] tbog [About script] |
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: www.google.com/+BogdanTautuTBog | + | * 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. Disable label and icon. Set background color. This will be the page indicator. | - 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** to the change position event of the container that holds the **scrollBar** panel | + | - 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 32: | 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 83: | 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> | ||
script_scrollbar_interactive.1399124926.txt.gz · Last modified: 2014/05/03 13:48 by tbog
Page Tools
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 3.0 Unported
