├── .gitignore ├── README.md ├── app.js └── waterfall.js /.gitignore: -------------------------------------------------------------------------------- 1 | # Build folder and log file 2 | build/ 3 | build.log 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | ![logo](http://www.lineartpr.com/img/github/tdg_logo.png) 2 | ================================ 3 | 4 | A Titanium Mobile lib for creating a dynamic grid layout (like Pinterest) in iOS and Android. It works on phones and tablets in any orientation. Create your own grid layout item and assign it to TiDynamicGrid. You can set different parameters depending the orientations, each item could have it's own layout, add a custom function when an item is clicked, add a single item or group of items, clear the grid, etc. Please refer to the sample project to see it in action. 5 | 6 | ### The credits for this code goes entirely to [pablorr18](https://github.com/pablorr18) 7 | 8 | This lib is a conversion of [TiDynamicGrid](http://www.github.com/pablorr18/TiDynamicGrid) into a non-Alloy javascript. I converted this code in order to help the developers who are not so familiarized with Titanium Alloy development. 9 | If you want a more standard grid layout, check out [TiFlexiGrid](http://www.github.com/pablorr18/TiFlexiGrid). 10 | 11 | If anyone have some ideas, requests, contributions or want to show how you are using the widget , contact me at [@pablorr18](http://twitter.com/pablorr18). 12 | 13 | ### Changelog 14 | 15 | **1.0** 16 | * Initial Release 17 | 18 | ### Screenshots 19 | 20 | ![iPhone](http://www.lineartpr.com/img/github/tdg_iphone.jpg) 21 | 22 | ![iPad](http://www.lineartpr.com/img/github/tdg_ipad.jpg) 23 | 24 | ![Android Handset](http://www.lineartpr.com/img/github/tdg_android_phone.jpg) 25 | 26 | ![Android Tablet](http://www.lineartpr.com/img/github/tdg_android_tablet.jpg) 27 | 28 | 29 | ### How to use 30 | 31 | First, add the widget to the dependencies list in your Alloy Project (config.json): 32 | 33 | ```javascript 34 | var Waterfall = require('/ui/Waterfall'); 35 | ``` 36 | 37 | Now, initialize the Waterfall and add it to a window or view: 38 | 39 | ```javascript 40 | var waterfall = Waterfall.init({ 41 | columns : 3, 42 | space : 5, 43 | delayTime : delay, 44 | gridBackgroundColor : '#E1E1E1', 45 | itemBackgroundColor : '#FFF', 46 | itemBorderColor : 'transparent', 47 | itemBorderWidth : 0, 48 | itemBorderRadius : 5, 49 | onItemClick : showGridItemInfo 50 | }); 51 | self.add(waterfall); 52 | ``` 53 | 54 | Now, this is the important part. Create an empty array. In this array, each object should contain the following properties: "view" and "data". The "view" is our custom grid item (it should be a view containing all the elements or layout that you want). The "data" is the information that we want to be available once we click the item. Once we have all our items ready in the array, add it to the grid. For example: 55 | 56 | ```javascript 57 | var items = []; 58 | 59 | var sample_data = [ 60 | {title:'Sample 1', image:'http://www.lorempixel.com/700/600/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 61 | {title:'Sample 2', image:'http://www.lorempixel.com/900/1200/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 62 | {title:'Sample 3', image:'http://www.lorempixel.com/400/300/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 63 | {title:'Sample 4', image:'http://www.lorempixel.com/600/600/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 64 | {title:'Sample 5', image:'http://www.lorempixel.com/400/310/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 65 | {title:'Sample 6', image:'http://www.lorempixel.com/410/300/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 66 | {title:'Sample 7', image:'http://www.lorempixel.com/500/300/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 67 | {title:'Sample 8', image:'http://www.lorempixel.com/300/300/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 68 | {title:'Sample 9', image:'http://www.lorempixel.com/450/320/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 69 | {title:'Sample 10', image:'http://www.lorempixel.com/523/424/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 70 | {title:'Sample 11', image:'http://www.lorempixel.com/610/320/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 71 | {title:'Sample 12', image:'http://www.lorempixel.com/450/450/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 72 | {title:'Sample 13', image:'http://www.lorempixel.com/620/420/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 73 | {title:'Sample 14', image:'http://www.lorempixel.com/710/410/', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'} 74 | ]; 75 | 76 | 77 | for (var x = 0; x < sample_data.length; x++) { 78 | //CREATES A VIEW WITH OUR CUSTOM LAYOUT 79 | var view = Titanium.UI.createImageView({ 80 | image : sample_data[x].image, 81 | title : sample_data[x].title, 82 | subtitle : sample_data[x].subtitle, 83 | zIndex: 1 84 | }); 85 | 86 | //THIS IS THE DATA THAT WE WANT AVAILABLE FOR THIS ITEM WHEN onItemClick OCCURS 87 | var values = { 88 | title : sample_data[x].title, 89 | image : sample_data[x].image 90 | }; 91 | 92 | //NOW WE PUSH TO THE ARRAY THE VIEW AND THE DATA 93 | items.push({ 94 | view : view, 95 | data : values 96 | }); 97 | } 98 | 99 | //ADD ALL THE ITEMS TO THE GRID 100 | Waterfall.addGridItems(items); 101 | ``` 102 | 103 | Notice that in the "**data**" property of the items we added the variable "**values**", which contains "**title**", "**image**" and "**subtitle**". Now, we can get this data on "**onItemClick**" by doing this: 104 | 105 | ```javascript 106 | var showGridItemInfo = function(e){ 107 | alert('Title is: ' + e.source.data.title + '. Image is: ' + e.source.data.image); 108 | }); 109 | ``` 110 | 111 | Of course, you can add whatever you want. For example, could add "**url**" to "**values**" and you could get it like: 112 | 113 | ```javascript 114 | alert('URL is: ' + e.source.data.url); 115 | ``` 116 | Please refer to the Sample included in the project to see it in action. 117 | 118 | 119 | ### Methods 120 | 121 | **init(parameters)** - initialize the grid layout with the following parameters: 122 | * columns - number of columns 123 | * space - space between each element 124 | * data - array with objects (view and data) 125 | * delayTime - amount of time to let the app render each item correctly (especially on Android). Default is 500ms. 126 | * gridBackgroundColor - background color for the grid view 127 | * itemBackgroundColor 128 | * itemBorderColor 129 | * itemBorderWidth 130 | * itemBorderRadius 131 | * onItemClick - function; fire when an item from the grid is clicked 132 | 133 | **addGridItems(array)** - add a group of items to the grid. Each object in the array should contains: 134 | * view - a view with the custom layout 135 | * data - the data we want available when an item is clicked 136 | 137 | **addGridItem(object)** - add a single item to the grid. The object should contains: 138 | * view - a view with the custom layout 139 | * data - the data we want available when an item is clicked 140 | 141 | **clearGrid()** - clears all the elements of the grid. 142 | 143 | **setOnItemClick(function)** - set the event that will trigger once an item from the grid is clicked 144 | 145 | 146 | ### Note for Android 147 | 148 | The lib uses anydensity = true and system units as dp (now default in the latest Titanium SDK) in the tiapp.xml. 149 | 150 | You can use something like this in your tiapp.xml: 151 | ```xml 152 | dp 153 | 154 | 155 | 158 | 159 | 160 | ``` 161 | See the tiapp.xml in the sample project for more details. 162 | 163 | To understand it better, please refer to the sample project included. 164 | 165 | ###Regarding Incorrect Layout Rendering 166 | If for any reason the layout doesn't render correctly (especially on Android), play with the **delayTime** property and try to set a higher time. This could happen for many reasons, like: slow connection, images too big, slow processes, etc. I'll be working on a better way to approach this. 167 | 168 | ###License 169 | The MIT License (MIT) 170 | 171 | Copyright (c) 2014 Pablo Rodriguez Ruiz, [@pablorr18](http://twitter.com/pablorr18) 172 | 173 | Permission is hereby granted, free of charge, to any person obtaining a copy 174 | of this software and associated documentation files (the "Software"), to deal 175 | in the Software without restriction, including without limitation the rights 176 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 177 | copies of the Software, and to permit persons to whom the Software is 178 | furnished to do so, subject to the following conditions: 179 | 180 | The above copyright notice and this permission notice shall be included in 181 | all copies or substantial portions of the Software. 182 | 183 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 184 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 185 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 186 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 187 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 188 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 189 | THE SOFTWARE. 190 | -------------------------------------------------------------------------------- /app.js: -------------------------------------------------------------------------------- 1 | var OS_ANDROID = Titanium.Platform.osname == 'android'; 2 | 3 | var Waterfall = require('/ui/Waterfall'); 4 | 5 | var delay = 10; 6 | 7 | var self = Titanium.UI.createWindow({ 8 | title:title, 9 | //backgroundColor:'white' 10 | orientationModes: [Titanium.UI.LANDSCAPE_LEFT, Titanium.UI.LANDSCAPE_RIGHT, Titanium.UI.PORTRAIT] 11 | }); 12 | 13 | var showGridItemInfo = function(e){ 14 | alert('Title is: ' + e.source.data.title + '. Image is: ' + e.source.data.image); 15 | }; 16 | 17 | var waterfall = Waterfall.init({ 18 | columns:3, 19 | space:5, 20 | delayTime:delay, 21 | gridBackgroundColor:'#E1E1E1', 22 | itemBackgroundColor:'#FFF', 23 | itemBorderColor:'transparent', 24 | itemBorderWidth:0, 25 | itemBorderRadius:5, 26 | onItemClick: showGridItemInfo 27 | }); 28 | self.add(waterfall); 29 | 30 | function createSampleData(){ 31 | sample_data = [ 32 | {title:'sample 1', image:'http://dummyimage.com/700x600/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 33 | {title:'sample 2', image:'http://dummyimage.com/900x1200/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 34 | {title:'sample 3', image:'http://dummyimage.com/400x300/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 35 | {title:'sample 4', image:'http://dummyimage.com/600x600/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 36 | {title:'sample 5', image:'http://dummyimage.com/400x310/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 37 | {title:'sample 6', image:'http://dummyimage.com/500x300/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 38 | {title:'sample 7', image:'http://dummyimage.com/300x300/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 39 | {title:'sample 8', image:'http://dummyimage.com/450x320/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 40 | {title:'sample 9', image:'http://dummyimage.com/523x424/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 41 | {title:'sample 10', image:'http://dummyimage.com/610x320/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 42 | {title:'sample 11', image:'http://dummyimage.com/450x450x/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 43 | {title:'sample 12', image:'http://dummyimage.com/620x420/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 44 | {title:'sample 13', image:'http://dummyimage.com/710x410/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 45 | {title:'sample 14', image:'http://dummyimage.com/500x500/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 46 | {title:'sample 1', image:'http://dummyimage.com/700x600/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 47 | {title:'sample 2', image:'http://dummyimage.com/900x1200/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 48 | {title:'sample 3', image:'http://dummyimage.com/400x300/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 49 | {title:'sample 4', image:'http://dummyimage.com/600x600/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 50 | {title:'sample 5', image:'http://dummyimage.com/400x310/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 51 | {title:'sample 6', image:'http://dummyimage.com/500x300/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 52 | {title:'sample 7', image:'http://dummyimage.com/300x300/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 53 | {title:'sample 8', image:'http://dummyimage.com/450x320/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 54 | {title:'sample 9', image:'http://dummyimage.com/523x424/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 55 | {title:'sample 10', image:'http://dummyimage.com/610x320/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 56 | {title:'sample 11', image:'http://dummyimage.com/450x450x/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 57 | {title:'sample 12', image:'http://dummyimage.com/620x420/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 58 | {title:'sample 13', image:'http://dummyimage.com/710x410/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 59 | {title:'sample 14', image:'http://dummyimage.com/500x500/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 60 | {title:'sample 1', image:'http://dummyimage.com/700x600/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 61 | {title:'sample 2', image:'http://dummyimage.com/900x1200/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 62 | {title:'sample 3', image:'http://dummyimage.com/400x300/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 63 | {title:'sample 4', image:'http://dummyimage.com/600x600/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 64 | {title:'sample 5', image:'http://dummyimage.com/400x310/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 65 | {title:'sample 6', image:'http://dummyimage.com/500x300/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 66 | {title:'sample 7', image:'http://dummyimage.com/300x300/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 67 | {title:'sample 8', image:'http://dummyimage.com/450x320/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 68 | {title:'sample 9', image:'http://dummyimage.com/523x424/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 69 | {title:'sample 10', image:'http://dummyimage.com/610x320/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 70 | {title:'sample 11', image:'http://dummyimage.com/450x450x/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 71 | {title:'sample 12', image:'http://dummyimage.com/620x420/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 72 | {title:'sample 13', image:'http://dummyimage.com/710x410/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 73 | {title:'sample 14', image:'http://dummyimage.com/500x500/cccccc/999999.jpg', subtitle:'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'}, 74 | ]; 75 | 76 | items = []; 77 | 78 | for (var x=0; x 4) { 115 | return; 116 | } else if (orientation == 1) { 117 | nColumn = 3; 118 | nSpace = 5; 119 | } else if (orientation == 2) { 120 | nColumn = 5; 121 | nSpace = 7; 122 | } 123 | } else { 124 | if (orientation < 1 || orientation > 4) { 125 | return; 126 | } else if (orientation == 1 || orientation == 2) { 127 | nColumn = 3; 128 | nSpace = 5; 129 | } else if (orientation == 3 || orientation == 4) { 130 | nColumn = 5; 131 | nSpace = 7; 132 | } 133 | } 134 | 135 | Waterfall.clearGrid(); 136 | Waterfall.init({ 137 | columns : nColumn, 138 | space : nSpace, 139 | delayTime : delay, 140 | gridBackgroundColor : '#E1E1E1', 141 | itemHeightDelta : 0, 142 | itemBackgroundColor : '#FFFFFF', 143 | itemBorderColor : 'transparent', 144 | itemBorderWidth : 0, 145 | itemBorderRadius : 5, 146 | onItemClick : showGridItemInfo 147 | }); 148 | 149 | createSampleData(); 150 | }); 151 | 152 | self.open(); 153 | -------------------------------------------------------------------------------- /waterfall.js: -------------------------------------------------------------------------------- 1 | var params, 2 | columns, 3 | space, 4 | data, 5 | screenWidth, 6 | newWidth, 7 | columnWidth, 8 | frameBGcolor, 9 | colViews, 10 | itemsOptions, 11 | onItemClick, 12 | currentCol, 13 | delayTime; 14 | 15 | var tdgMain = Titanium.UI.createView({ 16 | backgroundColor : '#fff', 17 | height : Ti.UI.FILL, 18 | width : Ti.UI.FILL 19 | }); 20 | 21 | var tdgWrapper = Titanium.UI.createView({ 22 | width : Ti.UI.FILL, 23 | height : Ti.UI.FILL, 24 | backgroundColor : 'transparent' 25 | }); 26 | tdgMain.add(tdgWrapper); 27 | 28 | var tdgScrollView = Titanium.UI.createScrollView({ 29 | width : Ti.UI.FILL, 30 | height : Ti.UI.FILL, 31 | contentHeight : Ti.UI.SIZE, 32 | contentWidth : Ti.UI.FILL, 33 | layout : 'horizontal', 34 | backgroundColor : 'transparent', 35 | scrollType : 'vertical' 36 | }); 37 | tdgWrapper.add(tdgScrollView); 38 | 39 | var init = function(opts) { 40 | params = opts || {}; 41 | columns = params.columns || 3; 42 | space = params.space || 3; 43 | data = params.data || {}; 44 | 45 | currentCol = 0; 46 | 47 | //FIX FOR GETTING RIGHT DIMENSIONS DEPENDING OS 48 | delayTime = params.delayTime || null; 49 | if (delayTime == null) { 50 | delayTime = (OS_ANDROID) ? 1000 : 500; 51 | } 52 | 53 | screenWidth = params.width || Ti.Platform.displayCaps.getPlatformWidth(); 54 | if (OS_ANDROID) { 55 | screenWidth = params.width || Ti.Platform.displayCaps.platformWidth/(OS_ANDROID ? Ti.Platform.displayCaps.logicalDensityFactor:1); 56 | } 57 | newWidth = screenWidth - space; 58 | columnWidth = (newWidth / columns) - space; 59 | 60 | //ADJUST THE SCROLLVIEW 61 | tdgScrollView.left = space; 62 | tdgScrollView.top = space; 63 | tdgScrollView.right = -1; 64 | 65 | //MAIN BG COLOR 66 | frameBGcolor = params.gridBackgroundColor || '#fff'; 67 | tdgMain.backgroundColor = frameBGcolor; 68 | 69 | //ITEMS OPTIONS 70 | itemsOptions = { 71 | backgroundColor : params.itemBackgroundColor || 'transparent', 72 | borderWidth : params.itemBorderWidth || 0, 73 | borderColor : params.itemBorderColor || 'transparent', 74 | borderRadius : params.itemBorderRadius || 0 75 | }; 76 | 77 | //ITEM CLICK FUNCTION 78 | onItemClick = params.onItemClick || 79 | function() { 80 | Ti.API.info('TiDynamicGrid -> onItemClick is not defined.'); 81 | }; 82 | 83 | colViews = []; 84 | 85 | for (var x = 0; x < columns; x++) { 86 | colViews[x] = Ti.UI.createView({ 87 | width : columnWidth, 88 | height : Ti.UI.SIZE, 89 | backgroundColor : 'transparent', 90 | top : 0, 91 | left : 0, 92 | right : space, 93 | bottom : space, 94 | layout : 'vertical' 95 | }); 96 | tdgScrollView.add(colViews[x]); 97 | } 98 | 99 | Ti.API.info('TiDynamicGrid -> Widget initialized.'); 100 | addGridItems(data); 101 | 102 | return tdgMain; 103 | }; 104 | 105 | var addGridItems = function(args) { 106 | //clearGrid(); 107 | data = args || {}; 108 | for (var x = 0; x < data.length; x++) { 109 | addGridItem(data[x]); 110 | } 111 | }; 112 | 113 | var addGridItem = function(item) { 114 | 115 | var tmpView = Ti.UI.createView({ 116 | width : columnWidth, 117 | height : Ti.UI.SIZE, 118 | visible : false 119 | }); 120 | tmpView.add(item.view); 121 | tdgMain.add(tmpView); 122 | 123 | setTimeout(function() { 124 | //Ti.API.info('Item Height is:' + tmpView.size.height); 125 | 126 | var frame = Ti.UI.createView({ 127 | width : Ti.UI.FILL, 128 | layout: 'vertical', 129 | height: Ti.UI.SIZE, 130 | //height : tmpView.size.height, 131 | backgroundColor : itemsOptions.backgroundColor, 132 | bottom : space, 133 | borderColor : itemsOptions.borderColor, 134 | borderRadius : itemsOptions.borderRadius, 135 | borderWidth : itemsOptions.borderWidth, 136 | data: item.data 137 | }); 138 | 139 | var lbTitle = Ti.UI.createLabel({ 140 | width : '90%', 141 | backgroundColor : 'transparent', 142 | zIndex : 2, 143 | text : item.view.title, 144 | textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT, 145 | color: '#2980b9', 146 | font:{ 147 | fontSize: '13sp' 148 | } 149 | }); 150 | 151 | var lbDescription = Ti.UI.createLabel({ 152 | width : '90%', 153 | backgroundColor : 'transparent', 154 | zIndex : 2, 155 | text : item.view.subtitle, 156 | textAlign: Titanium.UI.TEXT_ALIGNMENT_LEFT, 157 | color: '#575757', 158 | font:{ 159 | fontSize: '11sp' 160 | } 161 | }); 162 | 163 | var gridElement = item.view; 164 | 165 | //ADD CUSTOM FUNCTION ONCE AN ITEM IS CLICKED 166 | frame.addEventListener('click', function(e) { 167 | onItemClick(e); 168 | }); 169 | 170 | frame.add(gridElement); 171 | frame.add(lbTitle); 172 | frame.add(lbDescription); 173 | 174 | tdgMain.remove(tmpView); 175 | tmpView = null; 176 | 177 | tdgScrollView.children[currentCol].add(frame); 178 | currentCol++; 179 | 180 | if (currentCol == colViews.length) { 181 | currentCol = 0; 182 | } 183 | }, delayTime); 184 | }; 185 | 186 | var clearGrid = function() { 187 | Ti.API.info('TiDynamicGrid -> clearGrid ran.'); 188 | //tdgScrollView.removeAllChildren(); 189 | for(child in tdgScrollView.getChildren()){ 190 | tdgScrollView.children[child].removeAllChildren(); 191 | } 192 | }; 193 | 194 | var setOnItemClick = function(fnt) { 195 | onItemClick = fnt || 196 | function() { 197 | Ti.API.info('TiDynamicGrid -> onItemClick is not defined.'); 198 | }; 199 | }; 200 | 201 | exports.init = init; 202 | exports.addGridItems = addGridItems; 203 | exports.clearGrid = clearGrid; 204 | exports.addGridItem = addGridItem; 205 | exports.setOnItemClick = setOnItemClick; 206 | --------------------------------------------------------------------------------