├── .gitignore ├── README.md ├── com.appcelerator.browser ├── controllers │ └── widget.js ├── styles │ └── widget.tss ├── views │ └── widget.xml └── widget.json ├── com.appcelerator.grid ├── controllers │ └── widget.js ├── styles │ └── widget.tss ├── views │ └── widget.xml └── widget.json ├── com.appcelerator.login ├── assets │ └── images │ │ ├── facebook-btn-loading.png │ │ ├── facebook-btn.png │ │ ├── header.png │ │ ├── header@2x.png │ │ ├── help-btn.png │ │ └── help-btn@2x.png ├── controllers │ └── widget.js ├── styles │ └── widget.tss ├── views │ └── widget.xml └── widget.json ├── com.appcelerator.timeline ├── controllers │ ├── timeLineRow.js │ ├── timeLineSection.js │ └── widget.js ├── lib │ └── config.json ├── styles │ ├── timeLineRow.tss │ ├── timeLineSection.tss │ └── widget.tss ├── views │ ├── timeLineRow.xml │ ├── timeLineSection.xml │ └── widget.xml └── widget.json ├── com.appcelerator.ui.listview ├── assets │ └── images │ │ ├── commentbtn.png │ │ ├── likebtn.png │ │ └── likebtnOn.png ├── controllers │ ├── productList.js │ ├── statusList.js │ └── widget.js ├── styles │ ├── productList.tss │ ├── statusList.tss │ └── widget.tss ├── views │ ├── productList.xml │ ├── statusList.xml │ └── widget.xml └── widget.json ├── com.leorbrenman.tigauge ├── README ├── controllers │ └── widget.js ├── styles │ └── widget.tss ├── views │ └── widget.xml └── widget.json ├── com.leorbrenman.tismallbarchart ├── README ├── controllers │ ├── axisLabel.js │ └── widget.js ├── styles │ ├── axisLabel.tss │ └── widget.tss ├── views │ ├── axisLabel.xml │ └── widget.xml └── widget.json ├── com.leorbrenman.tistackbar ├── README ├── controllers │ ├── legendItem.js │ └── widget.js ├── styles │ ├── legendItem.tss │ └── widget.tss ├── views │ ├── legendItem.xml │ └── widget.xml └── widget.json └── screenshots ├── barchart.png ├── com.leorbrenman.tistackbar.png ├── gauge.png └── login.png /.gitignore: -------------------------------------------------------------------------------- 1 | # Build folder and log file 2 | build/ 3 | build.log 4 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | widgets 2 | ======= 3 | 4 | Widget library leveraged by the Appcelerator SE Team for demonstration purposes 5 | -------------------------------------------------------------------------------- /com.appcelerator.browser/controllers/widget.js: -------------------------------------------------------------------------------- 1 | var _args = arguments[0] || {}; 2 | 3 | var COLOR_DISABLED = "#CCC"; 4 | var COLOR_ENABLED = "#999"; 5 | 6 | var MIN_NAVBAR_HEIGHT = 40; 7 | var NAVBAR_OFFSET = (OS_IOS && parseInt(Ti.Platform.version.split(".")[0], 10) >=7) ? 20 : 0; 8 | 9 | $.header.height = MIN_NAVBAR_HEIGHT+NAVBAR_OFFSET; 10 | 11 | /** 12 | * Callback function place holders 13 | */ 14 | var onCloseCallback = _args.onClose || null; 15 | var onLoadCallback = _args.onload || null; 16 | var onErrorCallback = _args.onerror || null; 17 | var onBeforeLoadCallback = _args.onbeforeload || null; 18 | 19 | /** 20 | * Expose Browser navigation functions 21 | */ 22 | exports.goBack = $.webView.goBack; 23 | exports.goForward = $.webView.goForward; 24 | exports.canGoBack = $.webView.canGoBack; 25 | exports.canGoForward = $.webView.canGoForward; 26 | 27 | 28 | exports.setHtml = function setHTML(_html){ 29 | $.webView.html = _html; 30 | }; 31 | exports.getHTML = function getHTML(){ 32 | return $.webView.html; 33 | }; 34 | 35 | exports.setURL = function setURL(_url){ 36 | $.webView.url = _url; 37 | }; 38 | 39 | exports.getURL = function getURL(){ 40 | return $.webView.url; 41 | }; 42 | 43 | /** 44 | * Sets onClose event callback 45 | */ 46 | exports.onClose = function(f){ 47 | onCloseCallback = f; 48 | }; 49 | 50 | /** 51 | * Sets onError event callback 52 | */ 53 | exports.onError = function(f){ 54 | onErrorCallback = f; 55 | }; 56 | 57 | /** 58 | * Sets onLoad event callback 59 | */ 60 | exports.onLoad = function(f){ 61 | onLoad = f; 62 | }; 63 | 64 | /** 65 | * Sets onBeforeLoadCallback event callback 66 | */ 67 | exports.onBeforeLoadCallback = function(f){ 68 | onBeforeLoadCallback = f; 69 | }; 70 | 71 | /** 72 | * Click event on Back Button 73 | */ 74 | $.backBtn.addEventListener('click', function(e){ 75 | $.webView.goBack(); 76 | }); 77 | 78 | $.forwardBtn.addEventListener('click', function(e){ 79 | $.webView.goForward(); 80 | }); 81 | 82 | $.closeBtn.addEventListener('click', function(e){ 83 | Ti.API.debug('ON CLOSE'); 84 | 85 | $.webView.stopLoading(); 86 | 87 | onCloseCallback && onCloseCallback(e); 88 | }); 89 | 90 | /** 91 | * Browser Event Listener - load 92 | * Fired when browser has completed laoding the webpage 93 | */ 94 | $.webView.addEventListener('load', function(e){ 95 | Ti.API.debug('ON LOAD'); 96 | /** 97 | * Update navigation UI 98 | */ 99 | $.webView.canGoBack() && $.backBtn.setColor(COLOR_ENABLED) || $.backBtn.setColor(COLOR_DISABLED); 100 | $.webView.canGoForward() && $.forwardBtn.setColor(COLOR_ENABLED) || $.forwardBtn.setColor(COLOR_DISABLED); 101 | 102 | /** 103 | * Set the Title of the Website 104 | */ 105 | $.title.text = $.webView.evalJS('document.title'); 106 | 107 | onLoadCallback && (typeof(onLoadCallback) === "function") && onLoadCallback(e); 108 | }); 109 | 110 | /** 111 | * Browser Event Listener - Error 112 | * Fired when there is an error loading the page 113 | */ 114 | $.webView.addEventListener('error', function(e){ 115 | Ti.API.debug('ON ERROR'); 116 | onErrorCallback && (typeof(onErrorCallback) === "function") && onErrorCallback(e); 117 | }); 118 | 119 | /** 120 | * Browser Event Listener - beforeload 121 | * Fired right before the browser starts to load a new url. 122 | * Can cancel the browser activity at this point 123 | */ 124 | $.webView.addEventListener('beforeload', function(e){ 125 | Ti.API.debug('ON BEFORELOAD'); 126 | /** 127 | * Enable the Stop Button 128 | */ 129 | onBeforeLoadCallback && (typeof(onBeforeLoadCallback) === "function") && onBeforeLoadCallback(e); 130 | }); -------------------------------------------------------------------------------- /com.appcelerator.browser/styles/widget.tss: -------------------------------------------------------------------------------- 1 | "Label":{ 2 | color: "#ccc", 3 | font: { 4 | fontFamily: "Arial", 5 | fontSize: 24 6 | }, 7 | left: 5 8 | }, 9 | "#wrapper":{ 10 | layout:"vertical" 11 | }, 12 | 13 | "#header":{ 14 | backgroundColor: "#ececec", 15 | height: 50 16 | }, 17 | 18 | "#browserNavigation":{ 19 | left: 5, 20 | bottom: 5, 21 | height: Ti.UI.SIZE, 22 | width: 100, 23 | layout:"horizontal" 24 | }, 25 | 26 | "#title":{ 27 | left: 75, 28 | right: 75, 29 | bottom: 10, 30 | height: 20, 31 | borderRadius: 5, 32 | backgroundColor: "#ccc", 33 | color: "#999", 34 | font:{ 35 | fontSize: 10, 36 | fontFamily: "Arial" 37 | }, 38 | textAlign:"center" 39 | } 40 | 41 | "#closeBtn":{ 42 | right: 5, 43 | bottom:5, 44 | height: Ti.UI.SIZE, 45 | color: "#999" 46 | }, 47 | 48 | "#backBtn[platform=android]":{ 49 | font:{ 50 | fontSize:18 51 | }, 52 | bottom: 3 53 | }, 54 | 55 | "#forwardBtn[platform=android]":{ 56 | font:{ 57 | fontSize:18 58 | }, 59 | bottom: 3 60 | }, 61 | 62 | "#webView":{ 63 | willHandleTouches:false 64 | } 65 | 66 | 67 | 68 | 69 | -------------------------------------------------------------------------------- /com.appcelerator.browser/views/widget.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 9 | 10 | 11 | 14 | 17 | 18 | 19 | 20 | 21 | -------------------------------------------------------------------------------- /com.appcelerator.browser/widget.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "com.appcelerator.browser", 3 | "name": "com.appcelerator.browser", 4 | "description" : "Lightweight modal browser for use in any Appcelerator application", 5 | "author": "Bert Grantges", 6 | "version": "1.0", 7 | "copyright":"Copyright (c) 2014", 8 | "license":"Public Domain", 9 | "min-alloy-version": "1.0", 10 | "min-titanium-version":"2.1", 11 | "tags":"", 12 | "platforms":"android,blackberry,ios,mobileweb,tizen" 13 | } -------------------------------------------------------------------------------- /com.appcelerator.grid/controllers/widget.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @class Widgets.grid 3 | * 4 | * The **Grid** widget provides a cross-platform grid of views that automatically lay themselves out in the view similar to the iOS native Dashboard control. 5 | * 6 | * ## Manifest 7 | * * Version: 1.0 (stable) 8 | * * Supported Platforms: iOS, Android, Mobile Web 9 | * 10 | * ## Adding the Grid Widget to Your Alloy Project 11 | * 12 | * In your application's config.json file you will want to include the following line in your dependencies: 13 | * 14 | * "dependencies": { 15 | * "com.appcelerator.grid":"1.0" 16 | * } 17 | * 18 | * ### Creating a Local Copy 19 | * To create a copy local to your application so that you can further modify it, then you will need to: 20 | * 21 | * 1. Create a widgets directory in your app directory if it does not already exist. 22 | * 2. Copy the com.appcelerator.grid folder into your `app/widgets` directory. 23 | * 24 | * ## Create a Grid in the View 25 | * 26 | * You can add a Grid to a view by *requiring* the Grid widget. 27 | * 28 | * 29 | * 30 | * Assign it an ID that you can use in your controller, for example, `id="grid"`. 31 | * You can now access the Grid using `$.grid` in your controller. 32 | * 33 | * ## Initializing the Grid in the Controller 34 | * 35 | * The grid does not have any items in it until you initialize it in your controller. 36 | * Before you open your window, you will want to call the grid with the `init` method. For example: 37 | * 38 | * $.grid.init({ 39 | * items: [ 40 | * { id : '1', click: function (e) { alert("clicked!"); }, crossClick: function (e) { alert("cross clicked!"); }, backgroundImage : '/images/photo.png'}, 41 | * { id : '2'}, 42 | * { id : '3', click: function (e) { alert("clicked!"); }}, 43 | * { id : '4', click: function (e) { alert("clicked!"); }, crossClick: function (e) { alert("cross clicked!"); }}, 44 | * { id : '5', click: function (e) { alert("clicked!"); }, crossClick: function (e) { alert("cross clicked!"); }, backgroundImage : '/images/photo.png'}, 45 | * { id : '6', click: function (e) { alert("clicked!"); }, crossClick: function (e) { alert("cross clicked!"); }, backgroundColor : 'gray'}, 46 | * ], 47 | * itemWidth: Alloy.isTablet ? 200: 100, 48 | * itemHeight: Alloy.isTablet ? 200 : 100, 49 | * backgroundColor: red, 50 | * backgroundSelectedColor: brightred 51 | * }); 52 | * 53 | * ## Relaying out the Grid 54 | * If you ever have a need to relayout the Grid for a reason other than orientation (which is automatically supported), you can call the `relayout` method directly. 55 | * 56 | * $.grid.relayout(); 57 | * 58 | * The grid will calculate a new gutter between the items and animate the items into place one at a time. 59 | * **Note**: If you use autoLayout="true" (default) then a Ti.Gesture event handler will be used to relayout 60 | * the widget based on orientation changes. To avoid any potential memory leaks associated with using these 61 | * global event handlers, you must call the **destroy()** function on the widget when you are done using it. 62 | * This will free all memory resources associated with the widget. If you have autoLayout="false", then you are 63 | * not required to call **destroy()** when you are done with the widget. 64 | */ 65 | 66 | var TEXTSIZE = 10; 67 | 68 | var defaults = { 69 | itemWidth : 50, 70 | itemHeight : 75, 71 | assetDir : '/images/' // Subdirectory to find the item assets. 72 | }; 73 | /** 74 | * @method init 75 | * Initializes the item grid. 76 | * @param {Boolean} [autoLayout=true] If true, the widget will automatically adjust the layout for orientation events, which requires you to execute destroy() when you are done. if false, the widget does not adjust its layout automatically, and you are not required to call destroy() when finished using it. 77 | * @param {Array.} items The items array is an array of item objects each of which describes an item to create in the grid. 78 | * @param {String} items.id Unique id for this item. This id also selects the image icons for this item. The Grid expects to find the image at app/assets/images/\.png. 79 | * @param {function(Object)} [items.click] The callback to call when the item is clicked. The function has an event parameter similar to that used for Titanium.UI.View.click. Overrides the global click callback, if any. 80 | * @param {function(Object)} [items.crossClick] The callback to call when the cross is clicked. The function has an event parameter similar to that used for Titanium.UI.View.click. Overrides the global click callback, if any. 81 | * @param {String} [items.backgroundColor=transparent] RGB triplet or named color to use as the background for the item. This overrides any Grid level backgroundColor. 82 | * @param {Number} itemWidth Width of a item in pixels. 83 | * @param {Number} itemHeight Height of a item in pixels. 84 | * @param {String} [backgroundColor=transparent] RGB triplet or named color to use as the background for the item. This can be overridden by item definition itself. 85 | * @param {String} [backgroundSelectedColor=transparent] RGB triplet or named color to use as the background for the item when it is selected. This can be overridden by item definition itself. 86 | * @param {Number} [duration=2000] Duration, in milliseconds, for the grid to animate when relaying out on orientation change. 87 | * @param {String} [assetDir='/images/'] Directory where assets for the item grid can be found. 88 | * @param {function(Object)} [click] The general callback to call when any item is clicked. The function has an event parameter similar to that used for Titanium.UI.View.click. Can be overridden by the individual item click callbacks. 89 | */ 90 | exports.init = function GridInit(args) { 91 | $._items = args.items; 92 | if (args.confirmationMessage != null && args.confirmationMessage != '') { 93 | $.confirmationMessage = args.confirmationMessage; 94 | } 95 | 96 | $._params = _.defaults(args, defaults); 97 | 98 | _.each($._items, function(item, index) { 99 | Ti.API.info('Grid: creating item ' + item.id); 100 | 101 | var itemProps = _.defaults(item, { 102 | center : { 103 | x : "50%", 104 | y : "50%" 105 | }, 106 | borderRadius: 10, 107 | backgroundImage : $._params.assetDir + item.id + '.png', 108 | backgroundColor : $._params.backgroundColor || 'transparent', 109 | backgroundSelectedColor : $._params.backgroundSelectedColor || 'transparent', 110 | top: 10, 111 | right: 10, 112 | click : $._params.click 113 | }); 114 | 115 | var crossProps = { 116 | right : 0, 117 | top : 0, 118 | height : 30, 119 | width : 30, 120 | bubbleParent : false, 121 | backgroundImage : "/images/tilecross.png" 122 | }; 123 | 124 | // Create and add the item to the scroll view. 125 | $._items[index].b = Ti.UI.createView({ 126 | width : $._params.itemWidth, 127 | height : $._params.itemHeight, 128 | }); 129 | 130 | $._items[index].v = Ti.UI.createView(itemProps); 131 | $._items[index].b.add($._items[index].v); 132 | 133 | $._items[index].c = Ti.UI.createView(crossProps); 134 | 135 | if (item.click) { 136 | $._items[index].v.addEventListener('singletap', function(e) { 137 | // Fixes a bug due to removing the title in iOS because 138 | // the text field cannot handle Ti.UI.TEXT_VERTICAL_ALIGNMENT_BOTTOM 139 | // We still want this accessible to the click function, though. 140 | var source = _.clone(e.source); 141 | var temp = e.source; 142 | source.title = e.source.title || e.source._title; 143 | e.source = source; 144 | item.click(e); 145 | e.source = temp; 146 | }); 147 | } 148 | 149 | if (item.crossClick) { 150 | $._items[index].b.add($._items[index].c); 151 | $._items[index].c.addEventListener('singletap', function(e) { 152 | Ti.API.info('Grid: deleting item ' + item.id); 153 | //If confirmationMessage message is not set, don't show the confirmation dialog and delete the item directly. 154 | if ($.confirmationMessage != null && $.confirmationMessage != '') { 155 | //Dialog to take user confirmation prior deleting the selected document from briefcase. 156 | var dialog = Ti.UI.createAlertDialog({ 157 | title : $.confirmationMessage, 158 | buttonNames : ['Cancel', 'OK'] 159 | }); 160 | dialog.addEventListener('click', function(event) { 161 | if (event.index == 1) { 162 | $.deleteItem(item); 163 | } else { 164 | //Dialog Cancel event: Do nothing 165 | } 166 | }); 167 | dialog.show(); 168 | } else { 169 | //confirmationMessage not set 170 | $.deleteItem(item); 171 | } 172 | 173 | }); 174 | 175 | } 176 | 177 | $.scrollview.add($._items[index].b); 178 | }); 179 | 180 | var autoLayout = $._params.autoLayout || typeof $._params.autoLayout === 'undefined'; 181 | if (autoLayout) { 182 | Ti.Gesture.addEventListener("orientationchange", exports.relayout); 183 | } 184 | exports.relayout(); 185 | }; 186 | 187 | /** 188 | * @method deleteItem 189 | * Deletes the item from briefcase. 190 | * @param {Object} item Item to be deleted. 191 | */ 192 | $.deleteItem = function(item) { 193 | item.v.removeEventListener('singletap', item.click); 194 | $.scrollview.remove(item.b); 195 | 196 | //Finding the index of item from array to splice removed item element 197 | for (var i = 0; i < $._items.length; i++) { 198 | if ($._items[i].id === item.id) { 199 | item.crossClick({ 200 | index : i, 201 | callback : function() { 202 | $._items.splice(i, 1); 203 | } 204 | }); 205 | } 206 | } 207 | item.b = null; 208 | 209 | //Re layout after deletion 210 | exports.relayout(); 211 | }; 212 | 213 | /** 214 | * @method destroy 215 | * Frees all resources associated with the item grid when done using it. 216 | * This function should be called when the item grid is no longer being 217 | * used to ensure that all memory allocated to it is released. 218 | */ 219 | exports.destroy = function() { 220 | Ti.Gesture.removeEventListener('orientationchange', exports.relayout); 221 | _.each($._items, function(item) { 222 | if (item.click) { 223 | item.v.removeEventListener('singletap', item.click); 224 | } 225 | $.scrollview.remove(item.b); 226 | item.b = null; 227 | }); 228 | }; 229 | 230 | /** Set the confirmation message **/ 231 | exports.setConfirmationMessage = function(message) { 232 | if (message != null && message != '') { 233 | $.confirmationMessage = message; 234 | } 235 | }; 236 | 237 | /** 238 | * @method relayout 239 | * Redraws the items grid. 240 | * @param {Object} e Unused. 241 | */ 242 | exports.relayout = function GridRelayout(e) { 243 | Ti.API.info("Grid: relayout"); 244 | var duration = $._params.duration || 2000; 245 | var contentWidth = Ti.Platform.displayCaps.getPlatformWidth() - 80; 246 | $.scrollview.contentWidth = contentWidth; 247 | $.scrollview.width = contentWidth; 248 | $.scrollview.contentHeight = "auto"; 249 | 250 | // Calculate the new gutter. 251 | var w = contentWidth; 252 | var n = Math.floor(w / $._params.itemWidth); 253 | var gutter = (w - n * $._params.itemWidth) / (n + 1); 254 | var left = gutter, top = gutter; 255 | 256 | // Animate the items into place. 257 | _.each($._items, function(item) { 258 | //Orientation animation not working on android post SDK 3.1.3 GA. 259 | //Hence its checked and direct points are applied for android. 260 | if (OS_IOS) { 261 | item.b.animate({ 262 | left : left, 263 | top : top, 264 | duration : duration 265 | }); 266 | } else { 267 | item.b.left = left; 268 | item.b.top = top; 269 | } 270 | 271 | left += gutter + $._params.itemWidth; 272 | if (left >= w) { 273 | left = gutter; 274 | top += gutter + $._params.itemHeight; 275 | } 276 | }); 277 | }; 278 | 279 | exports.getItem = function(id) { 280 | for (var i in $._items) { 281 | if ($._items[i].id == id) 282 | return $._items[i].b; 283 | } 284 | 285 | return false; 286 | }; 287 | -------------------------------------------------------------------------------- /com.appcelerator.grid/styles/widget.tss: -------------------------------------------------------------------------------- 1 | "#scrollview": { 2 | showVerticalScrollIndicator: true, 3 | bottom: 0 4 | } -------------------------------------------------------------------------------- /com.appcelerator.grid/views/widget.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | -------------------------------------------------------------------------------- /com.appcelerator.grid/widget.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "com.appcelerator.grid", 3 | "name": "com.appcelerator.grid", 4 | "description" : "", 5 | "author": "", 6 | "version": "1.0", 7 | "copyright":"Copyright (c) 2012", 8 | "license":"Public Domain", 9 | "min-alloy-version": "1.0", 10 | "min-titanium-version":"2.1", 11 | "tags":"", 12 | "platforms":"android,blackberry,ios,mobileweb,tizen" 13 | } -------------------------------------------------------------------------------- /com.appcelerator.login/assets/images/facebook-btn-loading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.login/assets/images/facebook-btn-loading.png -------------------------------------------------------------------------------- /com.appcelerator.login/assets/images/facebook-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.login/assets/images/facebook-btn.png -------------------------------------------------------------------------------- /com.appcelerator.login/assets/images/header.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.login/assets/images/header.png -------------------------------------------------------------------------------- /com.appcelerator.login/assets/images/header@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.login/assets/images/header@2x.png -------------------------------------------------------------------------------- /com.appcelerator.login/assets/images/help-btn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.login/assets/images/help-btn.png -------------------------------------------------------------------------------- /com.appcelerator.login/assets/images/help-btn@2x.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.login/assets/images/help-btn@2x.png -------------------------------------------------------------------------------- /com.appcelerator.login/controllers/widget.js: -------------------------------------------------------------------------------- 1 | var _args = arguments[0] || {}; 2 | 3 | var settings = {}; 4 | var actInd; 5 | var actIndParent; 6 | 7 | /** 8 | * Try to load Facebook Module 9 | */ 10 | var facebook = undefined; 11 | try { 12 | facebook = require('facebook'); 13 | } 14 | catch (e) { 15 | Ti.API.info("Facebook module is not available."); 16 | } 17 | 18 | $.init = function(params) { 19 | settings.loginCallback = params.loginCallback; 20 | settings.remindCallback = params.remindCallback; 21 | settings.createCallback = params.createCallback; 22 | settings.allowFacebook = (params.facebookAppId && params.facebookPermissions) ? true : false; 23 | settings.facebookAppId = params.facebookAppId || null; 24 | settings.facebookPermissions = params.facebookPermissions || null; 25 | 26 | if(settings.facebookAppId){ 27 | facebook.appid = settings.facebookAppId; 28 | } 29 | if(settings.facebookPermissions){ 30 | facebook.permissions = settings.facebookPermissions; 31 | } 32 | }; 33 | 34 | // Initialize based on passed in arguments, init can be called again if needed. 35 | $.init(_args); 36 | 37 | $.loginClick = function() { 38 | loginClick(); 39 | }; 40 | 41 | //Create activity indicator for buttons 42 | function activityIndicator(){ 43 | var style; 44 | if (OS_IOS){ 45 | style = Ti.UI.iPhone.ActivityIndicatorStyle.DARK; 46 | } 47 | else { 48 | style = Ti.UI.ActivityIndicatorStyle.DARK; 49 | } 50 | return Ti.UI.createActivityIndicator({ 51 | color:"#ffffff", 52 | style:style, 53 | height:Ti.UI.SIZE, 54 | width:Ti.UI.SIZE 55 | }); 56 | 57 | } 58 | 59 | function loginClick() { 60 | if ($.usernameTxt.value && $.passwordTxt.value) { 61 | $.usernameTxt.blur(); 62 | $.passwordTxt.blur(); 63 | //$.loginLbl.text = ""; 64 | if (!actInd) { 65 | actInd = activityIndicator(); 66 | } 67 | 68 | $.loginBtn.add(actInd); 69 | actIndParent = 'loginBtn'; 70 | actInd.show(); 71 | 72 | settings.loginCallback && settings.loginCallback({ 73 | username : $.usernameTxt.value, 74 | password : $.passwordTxt.value 75 | }); 76 | } else { 77 | alert("Please provide your credentials."); 78 | } 79 | } 80 | 81 | function loginFacebook(e){ 82 | 83 | $.facebookBtn.image = WPATH("/images/facebook-btn-loading.png"); 84 | if(!actInd){ 85 | actInd = activityIndicator(); 86 | } 87 | $.facebookBtnWrapper.add(actInd); 88 | actIndParent = "facebookBtnWrapper"; 89 | actInd.top =20; 90 | actInd.show(); 91 | 92 | if(settings.allowFacebook && facebook){ 93 | facebook.addEventListener('login', function(e) { 94 | if(e.success){ 95 | settings.loginCallback && settings.loginCallback({ 96 | accessToken: facebook.accessToken, 97 | success: e.success 98 | }); 99 | } 100 | }); 101 | 102 | facebook.authorize(); 103 | } 104 | } 105 | 106 | 107 | //Hide the activity indicator placed on the login button. 108 | $.hideActivityIndicator = function(){ 109 | if(actInd != null){ 110 | $[actIndParent].remove(actInd); 111 | } 112 | }; 113 | 114 | function forgotClick(e) { 115 | Ti.API.info('FORGOT CLICK'); 116 | resetLoginForm(); 117 | $.loginView.animate({ opacity:0.0, duration:250 }, function() { 118 | $.passworReminderView.visible = true; 119 | $.passworReminderView.animate({ opacity:1.0, duration:250 }); 120 | OS_BLACKBERRY && ($.passworReminderView.opacity=1.0) && ($.passworReminderView.visible=true); 121 | 122 | $.loginContainer.height = 337; 123 | }); 124 | } 125 | 126 | function remindClick(e) { 127 | if ($.emailTxt.value) { 128 | if(!actInd){ 129 | actInd = activityIndicator(); 130 | } 131 | $.emailBtn.add(actInd); 132 | $.emailBtn.title = ""; 133 | actIndParent = 'emailBtn'; 134 | actInd.show(); 135 | 136 | settings.remindCallback && settings.remindCallback(); 137 | } else { 138 | alert("Please provide your email."); 139 | } 140 | } 141 | 142 | function cancelClick(e) { 143 | 144 | $.passworReminderView.animate({ opacity:0.0, duration:250 }, function() { 145 | $.passworReminderView.visible = false; 146 | $.loginView.animate({ opacity:1.0, duration:250 }); 147 | 148 | OS_BLACKBERRY && ($.loginView.opacity=1.0) && ($.loginView.visible=true); 149 | 150 | $.loginContainer.height = 440; 151 | }); 152 | 153 | resetEmailForm(); 154 | } 155 | 156 | 157 | function resetEmailForm(){ 158 | $.emailTxt.value = ''; 159 | } 160 | 161 | function resetAccountForm(){ 162 | $.accountLbl.text = ''; 163 | $.usernameNew.value = ''; 164 | $.passwordNew.value = ''; 165 | $.passwordConfirm.value = ''; 166 | } 167 | 168 | function resetLoginForm(){ 169 | $.usernameTxt.value = ''; 170 | $.passwordTxt.value = ''; 171 | } 172 | 173 | function focusStyle(evt){ 174 | //evt.source.backgroundImage = WPATH("/images/field-bg-focused.png"); 175 | 176 | } 177 | 178 | function blurStyle(evt){ 179 | //evt.source.backgroundImage = WPATH("/images/field-bg.png"); 180 | } 181 | 182 | function focusPassword(){ 183 | $.passwordTxt.focus(); 184 | } 185 | 186 | Ti.App.addEventListener("keyboardframechanged",moveLoginContainer); 187 | 188 | function moveLoginContainer(evt){ 189 | if (Ti.App.keyboardVisible) { 190 | $.loginContainer.animate({ 191 | center: { 192 | x: Ti.Platform.displayCaps.platformWidth / 2, 193 | // Accomodate status bar height on iPad... 194 | y: (Ti.Platform.osname === "ipad") ? ((Ti.Platform.displayCaps.platformHeight - evt.keyboardFrame.height) / 2) - 10 : ((Ti.Platform.displayCaps.platformHeight - evt.keyboardFrame.height) / 2) 195 | }, 196 | duration: 250 197 | }); 198 | } else{ 199 | $.loginContainer.animate({ 200 | center: { 201 | x: Ti.Platform.displayCaps.platformWidth / 2, 202 | y: Ti.Platform.displayCaps.platformHeight / 2 203 | }, 204 | duration: 250 205 | }); 206 | } 207 | } 208 | 209 | $.open = function(){ 210 | 211 | $.wrapper.open(); 212 | 213 | /* Check to see if we need to allow Facebook Button */ 214 | if(settings.allowFacebook){ 215 | $.facebookOptionView.visible = true; 216 | } 217 | 218 | 219 | if(OS_IOS){ 220 | setTimeout(function() { 221 | // timeout only to delay initial animation (fake start) 222 | $.loginContainer.animate({ 223 | height: settings.allowFacebook ? 500 : 440, 224 | duration: 250 225 | }, function() { 226 | $.loginView.animate({ opacity:1.0, duration:250 }); 227 | //$.divider.animate({ opacity:1.0, duration: 250 }); 228 | $.loginContainer.height = settings.allowFacebook ? 500 : 440; 229 | }); 230 | }, 1000); 231 | } else { 232 | $.loginContainer.height = settings.allowFacebook ? 500 : 440; 233 | $.loginView.opacity = 1.0; 234 | //$.divider.opacity =1.0; 235 | } 236 | 237 | Ti.API.info($.loginContainer.height); 238 | }; 239 | 240 | $.close = function(){ 241 | 242 | Ti.App.removeEventListener("keyboardframechanged",moveLoginContainer); 243 | $.destroy(); 244 | Alloy.CFG.skipLogin = false; 245 | }; 246 | 247 | $.open(); 248 | -------------------------------------------------------------------------------- /com.appcelerator.login/styles/widget.tss: -------------------------------------------------------------------------------- 1 | ".loginLbl" : { 2 | height:25, 3 | color: "#606060", 4 | font: {fontSize: 12}, 5 | shadowOffset: 1, 6 | shadowColor: "#363636" 7 | }, 8 | ".loginLblTxt":{ 9 | color: "#fff", 10 | height: 30, 11 | top: 10, 12 | left: 20, 13 | width: Ti.UI.SIZE, 14 | }, 15 | ".loginLblTxt[platform=ios]":{ 16 | color: "#fff", 17 | }, 18 | 19 | ".loginTxt" : { 20 | color: "#fff", 21 | height: 50, 22 | left: 20, 23 | right: 20, 24 | backgroundColor: "#2D3442", 25 | paddingLeft:15, 26 | autocapitalize:false, 27 | autocorrect:false, 28 | borderWidth: 0 29 | }, 30 | ".button" : { 31 | height:44, 32 | top:0, 33 | backgroundColor: "#5A86AF", 34 | borderRadius: 5 35 | }, 36 | ".buttonLabel" : { 37 | color:"#fff", 38 | font:{fontSize:14}, 39 | textAlign:"center", 40 | height:Ti.UI.SIZE, 41 | width:Ti.UI.SIZE 42 | }, 43 | "#wrapper" : { 44 | backgroundColor: "#000", 45 | height: Ti.UI.FILL, 46 | width: Ti.UI.FILL, 47 | navBarHidden: true 48 | }, 49 | "#loginContainer" : { 50 | backgroundColor: "#141925", 51 | width:319, 52 | height:164, 53 | layout:"vertical" 54 | }, 55 | "#bodyContainer" : { 56 | top:0, 57 | height:Ti.UI.SIZE 58 | }, 59 | "#loginView" : { 60 | top:0, 61 | height: Ti.UI.SIZE, 62 | width: Ti.UI.FILL, 63 | layout: "vertical", 64 | opacity:0.0 65 | }, 66 | "#passworReminderView" : { 67 | height: Ti.UI.SIZE, 68 | width: Ti.UI.FILL, 69 | layout: "vertical", 70 | opacity: 0, 71 | visible: false, 72 | top:0 73 | }, 74 | "#createAccountView" : { 75 | height: Ti.UI.SIZE, 76 | width: Ti.UI.FILL, 77 | layout: 'vertical', 78 | opacity: 0 79 | }, 80 | "#header" : { 81 | height:140, 82 | width:Ti.UI.SIZE, 83 | top:20, 84 | image:WPATH("/images/header.png") 85 | }, 86 | "#header[platform=blackberry]":{ 87 | width: 309 88 | }, 89 | ".controlContainer" : { 90 | top : 17, 91 | left: 20, 92 | right: 20, 93 | height:Ti.UI.SIZE 94 | }, 95 | "#loginBtn" : { 96 | width:100, 97 | right:3 98 | }, 99 | "#facebookOptionView":{ 100 | width: Ti.UI.FILL, 101 | height: 100, 102 | layout: 'vertical' 103 | }, 104 | "#facebookBtnWrapper":{ 105 | height:Ti.UI.SIZE, 106 | width: Ti.UI.SIZE 107 | }, 108 | "#facebookBtn":{ 109 | top: 10, 110 | image:WPATH("/images/facebook-btn.png"), 111 | height: 41, 112 | width: Ti.UI.SIZE 113 | }, 114 | ".separator":{ 115 | top: 20, 116 | height: 1, 117 | width:"90%", 118 | backgroundColor: "#fff", 119 | opacity:0.5 120 | }, 121 | 122 | "#helpImg" : { 123 | height:25, 124 | width:25, 125 | top:10, 126 | left:0, 127 | image:WPATH("/images/help-btn.png") 128 | }, 129 | "#helpImg[platform=blackberry]":{ 130 | top: 10, 131 | left:0, 132 | }, 133 | "#forgotLbl" : { 134 | top:10, 135 | left:26, 136 | color:"#999" 137 | }, 138 | "#forgotLbl[platform=blackberry]" : { 139 | top:10, 140 | left: 26 141 | } 142 | "#cancelBtn" : { 143 | left:3, 144 | width:130, 145 | color:"#fff", 146 | backgroundColor: "#6a6a6a", 147 | borderRadius: 5 148 | }, 149 | "#emailBtn" : { 150 | width:130, 151 | right:3, 152 | color: "#fff" 153 | }, 154 | "#usernameTxt" : { 155 | top: 4, 156 | returnKeyType:Ti.UI.RETURNKEY_NEXT 157 | }, 158 | "#passwordTxt" : { 159 | top: 4, 160 | passwordMask: true 161 | }, 162 | "#emailTxt" : { 163 | top:4, 164 | }, 165 | "#usernameNew" : { 166 | hintText: "Email" 167 | }, 168 | "#passwordNew" : { 169 | hintText: "Password", 170 | passwordMask: true 171 | }, 172 | "#passwordConfirm" : { 173 | hintText: "Confirm Password", 174 | passwordMask: true 175 | } -------------------------------------------------------------------------------- /com.appcelerator.login/views/widget.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 57 | 58 | 59 | 60 | -------------------------------------------------------------------------------- /com.appcelerator.login/widget.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "com.appcelerator.login", 3 | "name": "Appcelerator Login Widget", 4 | "description" : "A simple but elegant login widget for streamlining how users sign into your application.", 5 | "author": "Bert Grantges, Betty Tran", 6 | "version": "2.1", 7 | "copyright":"Copyright (c) 2014", 8 | "license":"Public Domain", 9 | "min-alloy-version": "1.3.1", 10 | "min-titanium-version":"3.2.1GA", 11 | "tags":"authentication, login, user management", 12 | "platforms":"android,ios,mobileweb" 13 | } -------------------------------------------------------------------------------- /com.appcelerator.timeline/controllers/timeLineRow.js: -------------------------------------------------------------------------------- 1 | var _args = arguments[0] || {}; 2 | 3 | _args.label = _args.label || "COMMENT"; 4 | 5 | var LABEL = { 6 | COMMENT: {text:"COMMENT", color: "#9AD97B"}, 7 | FILE: {text:"FILE", color: "#8CD8DD"}, 8 | TASK: {text:"TASK", color: "#F19A92"}, 9 | REPLY:{text:"REPLY", color: "#AFA4DF"}, 10 | }; 11 | 12 | if(_args.label){ 13 | $.label.backgroundColor = LABEL[_args.label].color || "#9AD97B"; 14 | $.label.text = LABEL[_args.label].text || "COMMENT"; 15 | } -------------------------------------------------------------------------------- /com.appcelerator.timeline/controllers/timeLineSection.js: -------------------------------------------------------------------------------- 1 | 2 | 3 | var _args = arguments[0] || {}; 4 | 5 | 6 | $.label.text = _args.text || "", 7 | $.label.backgroundColor = _args.fillColor || "#fff"; 8 | -------------------------------------------------------------------------------- /com.appcelerator.timeline/controllers/widget.js: -------------------------------------------------------------------------------- 1 | /** 2 | * JS Libs 3 | */ 4 | var moment = require('alloy/moment'); 5 | 6 | /** 7 | * Passed In Arguments 8 | */ 9 | var _args = arguments[0] || {}; 10 | 11 | 12 | $.init = function init(_timelineObject){ 13 | var footerView = Alloy.createWidget("com.appcelerator.timeline", "timeLineSection", {fillColor: "#a9a9a9"}).getView(); 14 | $.tableView.footerView = footerView; 15 | 16 | 17 | var sections = []; 18 | 19 | var todayHv = Alloy.createWidget("com.appcelerator.timeline", "timeLineSection", {text: "Today", fillColor: "#dcdcdc"}).getView(); 20 | var todaySection = Ti.UI.createTableViewSection({ 21 | headerView:todayHv 22 | }); 23 | todaySection.add(Alloy.createWidget("com.appcelerator.timeline", "timeLineRow" ).getView()); 24 | todaySection.add(Alloy.createWidget("com.appcelerator.timeline", "timeLineRow").getView()); 25 | sections.push(todaySection); 26 | 27 | 28 | for(var i=0;i<=5;i++){ 29 | var hv = Alloy.createWidget("com.appcelerator.timeline", "timeLineSection", {text: "Day+"+i}).getView(); 30 | var section = Ti.UI.createTableViewSection({ 31 | headerView:hv 32 | }); 33 | 34 | section.add(Alloy.createWidget("com.appcelerator.timeline", "timeLineRow", {label: "FILE"}).getView()); 35 | section.add(Alloy.createWidget("com.appcelerator.timeline", "timeLineRow", {label: "TASK"}).getView()); 36 | section.add(Alloy.createWidget("com.appcelerator.timeline", "timeLineRow", {label: "REPLY"}).getView()); 37 | 38 | sections.push(section); 39 | } 40 | $.tableView.data = sections; 41 | 42 | 43 | setTimeout($.addItem, 5000); 44 | }; 45 | 46 | /** 47 | * Adds an item to the timeline 48 | * @param {Object} _item - an item object consists of properties for TIMESTAMP, a LABEL type, an ICON type 49 | */ 50 | $.addItem = function addItem(_item){ 51 | alert('Add Item'); 52 | 53 | $.tableView.touchEnabled = false; 54 | $.tableView.visible = false; 55 | $.snapshot.image = $.tableView.toImage(); 56 | $.snapshot.visible = true; 57 | $.loading.visible = true; 58 | 59 | setTimeout(function(e){ 60 | alert("Done Loading"); 61 | $.snapshot.image = null; 62 | $.snapshot.visible = false; 63 | $.loading.visible = false; 64 | $.tableView.visible = true; 65 | $.tableView.touchEnabled = true; 66 | },3000); 67 | //TODO Add an item to the data set 68 | 69 | // Validate Item properties 70 | 71 | // Add Item to Array 72 | 73 | // Take current Image snapshot of TableView 74 | 75 | // Show Snapshot View 76 | 77 | // Show Loading View 78 | 79 | // Sort Array 80 | 81 | // Rebuild TableView 82 | 83 | // Hide Snapshot 84 | 85 | // Hide Loading View 86 | 87 | }; 88 | 89 | /** 90 | * Removes a particular item from the Timeline based on the row index of the item 91 | * @param {Integer} _index 92 | */ 93 | $.removeItem = function removeItem(_index){ 94 | // TODO remove an item 95 | }; 96 | 97 | /** 98 | * Additionally another way to build the timeline is to do a full JSON import 99 | * @param {Object} _json 100 | */ 101 | $.createFromJSON = function createFromJSON(_json){ 102 | 103 | //TODO Import Data into Timeline from JSON Object 104 | }; 105 | 106 | $.init(); 107 | 108 | -------------------------------------------------------------------------------- /com.appcelerator.timeline/lib/config.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.timeline/lib/config.json -------------------------------------------------------------------------------- /com.appcelerator.timeline/styles/timeLineRow.tss: -------------------------------------------------------------------------------- 1 | "TableViewRow":{ 2 | selectionStyle:"Titanium.UI.iPhone.TableViewCellSelectionStyle.NONE", 3 | height:50 4 | }, 5 | 6 | "TableViewRow[platform=mobileweb]":{ 7 | top:-15 8 | }, 9 | 10 | "#message":{ 11 | font:{ 12 | fontSize:12 13 | } 14 | }, 15 | 16 | "#label":{ 17 | left:0, 18 | width:50, 19 | height:30, 20 | borderRadius:5, 21 | textAlign:"center", 22 | color:"#fff", 23 | width: 75, 24 | font:{ 25 | fontSize:10, 26 | fontWeight:"bold" 27 | } 28 | } 29 | -------------------------------------------------------------------------------- /com.appcelerator.timeline/styles/timeLineSection.tss: -------------------------------------------------------------------------------- 1 | 2 | ".container":{ 3 | backgroundColor:"transparent", 4 | height: 65, 5 | width: Ti.UI.FILL 6 | }, 7 | 8 | "#gradient":{ 9 | backgroundColor:"#FFF", 10 | opacity: 0.5, 11 | height: 65, 12 | width: Ti.UI.FILL 13 | } 14 | 15 | "#circle":{ 16 | backgroundColor: "#fff", 17 | height: 66, 18 | width: 66, 19 | left: 10, 20 | borderRadius: 33, 21 | borderWidth:5, 22 | borderColor: "#a9a9a9" 23 | }, 24 | 25 | "#circle[platform=android]":{ 26 | borderRadius: 66, 27 | } 28 | 29 | "#label":{ 30 | width: 56, 31 | height: 56, 32 | borderRadius: 28, 33 | borderWidth:1, 34 | //backgroundColor:"#dcdcdc", 35 | borderColor: "#FFF", 36 | color: "#666", 37 | textAlign:"center" 38 | } 39 | 40 | "#label[platform=android]":{ 41 | borderRadius: 56, 42 | } 43 | -------------------------------------------------------------------------------- /com.appcelerator.timeline/styles/widget.tss: -------------------------------------------------------------------------------- 1 | "Label": { 2 | color: '#000', 3 | font: { 4 | fontSize: 18, 5 | fontWeight: 'bold' 6 | }, 7 | height: Ti.UI.SIZE, 8 | width: Ti.UI.SIZE 9 | } 10 | 11 | "#tableView":{ 12 | separatorStyle:0, 13 | separatorColor:"transparent" 14 | } 15 | 16 | "#tableView[platform=mobileweb]":{ 17 | seaparatorStyle:Titanium.UI.MobileWeb.TableViewSeparatorStyle.NONE 18 | } 19 | -------------------------------------------------------------------------------- /com.appcelerator.timeline/views/timeLineRow.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /com.appcelerator.timeline/views/timeLineSection.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /com.appcelerator.timeline/views/widget.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | -------------------------------------------------------------------------------- /com.appcelerator.timeline/widget.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "com.appcelerator.timeline", 3 | "name": "com.appcelerator.timeline", 4 | "description" : "", 5 | "author": "", 6 | "version": "1.0", 7 | "copyright":"Copyright (c) 2012", 8 | "license":"Public Domain", 9 | "min-alloy-version": "1.0", 10 | "min-titanium-version":"2.1", 11 | "tags":"", 12 | "platforms":"android,blackberry,ios,mobileweb,tizen" 13 | } -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/assets/images/commentbtn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.ui.listview/assets/images/commentbtn.png -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/assets/images/likebtn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.ui.listview/assets/images/likebtn.png -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/assets/images/likebtnOn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.ui.listview/assets/images/likebtnOn.png -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/controllers/productList.js: -------------------------------------------------------------------------------- 1 | /** 2 | * This is customized ListView leveraging a high quality UI design allowing for complex swiping gestures and multiple interface points. 3 | * 4 | * @class productList 5 | * @widget com.appcelerator.ui.listview 6 | */ 7 | 8 | /** 9 | * stores arguments passed into the view on creation 10 | */ 11 | var _args = arguments[0] || {}; 12 | 13 | /** 14 | * Sections of the ListView 15 | * 16 | * @Array 17 | * @private 18 | */ 19 | var _sections = []; 20 | 21 | /** 22 | * Items associated with the ListView 23 | * 24 | * @Array 25 | * @private 26 | */ 27 | var _items = []; 28 | 29 | /** 30 | * Slides the detailview out of the picture 31 | * 32 | * @private 33 | * @param {Object} _evt The javascript object passed by the event 34 | */ 35 | function onListItemTouchMove(_evt){ 36 | 37 | 38 | 39 | if(OS_IOS){ 40 | Ti.API.info(JSON.stringify(_evt)); 41 | 42 | var left = Math.round(_evt.source.convertPointToView({x:_evt.x,y:_evt.y},_evt.source.parent).x); 43 | _evt.source.left = left > 0 ? left : 0; 44 | 45 | //TODO - Need to move animations into a lib or functional mixin 46 | var hiddenLbl = _evt.source.parent.children[0].children[0]; 47 | if((_evt.source.left > 100) && hiddenLbl.text === "Slide >"){ 48 | hiddenLbl.animate({ 49 | opacity: 0.0, 50 | duration: 125 51 | }, function(){ 52 | hiddenLbl.text = "Release +"; 53 | hiddenLbl.animate({ 54 | opacity: 1.0, 55 | duration: 125 56 | }); 57 | }) ; 58 | } 59 | else if((_evt.source.left < 100) && hiddenLbl.text !== "Slide >"){ 60 | hiddenLbl.animate({ 61 | opacity: 0.0, 62 | duration: 125 63 | }, function(){ 64 | hiddenLbl.text = "Slide >"; 65 | hiddenLbl.animate({ 66 | opacity: 1.0, 67 | duration: 110 68 | }); 69 | }) ; 70 | } 71 | hiddenLbl.left = left-125; 72 | _evt.cancelBubble=true; 73 | } 74 | 75 | } 76 | 77 | function onListItemTouchMoveAndroid(_evt){ 78 | Ti.API.info(JSON.stringify(_evt.source.apiName)); 79 | Ti.API.info(JSON.stringify(_evt.source.id)); 80 | var left = _evt.x; 81 | 82 | ( _evt.source.children[1].id == "detailView" ) && (_evt.source.children[1].left = left > 0 ? left : 0); 83 | 84 | } 85 | 86 | /** 87 | * Callback function for the `touchend` on each List Item. Checks position of the detailview and either slides it back 88 | * into original position OR pushes it out of the way and closes the list Item 89 | * 90 | * @private 91 | * @param {Object} _evt - _evt The javascript object passed by the event 92 | */ 93 | function onListItemTouchEnd(_evt){ 94 | 95 | if(_evt.source.left > 100){ 96 | //TODO - Need to move animations into a lib or functional mixin 97 | var hiddenLbl = _evt.source.parent.children[0].children[0]; 98 | hiddenLbl.animate({ 99 | opacity: 0.0, 100 | duration: 125 101 | }, function(){ 102 | hiddenLbl.applyProperties({ 103 | text: "You have added it!", 104 | width: Ti.UI.FILL, 105 | left: 0, 106 | textAlign: "center" 107 | }); 108 | hiddenLbl.animate({ 109 | opacity: 1.0, 110 | duration: 125, 111 | curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT 112 | }); 113 | }) ; 114 | 115 | /** 116 | * Animation to move the detailView out of the way 117 | */ 118 | _evt.source.animate({ 119 | left: _evt.source.width, 120 | duration: 250, 121 | curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT 122 | }, function(){ 123 | 124 | Ti.API.info('[NEW LEFT] - '+_evt.source.left); 125 | /** 126 | * brief timeout to allow for the background message to be seen/noticed 127 | */ 128 | setTimeout(function(){ 129 | 130 | /** 131 | * After the timeout, lets fade out the ListItem view as a whole before we remove it 132 | */ 133 | _evt.source.parent.parent.animate({ 134 | opacity: 0.0, 135 | duration: 250, 136 | curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT 137 | }, function(){ 138 | 139 | /** 140 | * All done, remove the ListItem from the ListSection/ListView 141 | */ 142 | var section = $.wrapper.sections[_evt.sectionIndex]; 143 | section.deleteItemsAt(_evt.itemIndex, 1, false); 144 | }); 145 | }, 250); 146 | }); 147 | 148 | } else { 149 | 150 | /** 151 | * Else Statement accounts for a pop-back effect 152 | */ 153 | _evt.source.animate({ 154 | left: 0, 155 | duration: 250, 156 | curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT 157 | }); 158 | }; 159 | } 160 | 161 | /** 162 | * Slides the top layer of the ListView over to the right and fades it out before 163 | * removing it 164 | * @param {Object} _evt - object passed in by event handler 165 | */ 166 | function onButtonClick(_evt){ 167 | 168 | Ti.API.info(JSON.stringify(_evt)); 169 | 170 | if(OS_IOS && _evt.source.parent){ 171 | 172 | //TODO - Need to move animations into a lib or functional mixin 173 | var hiddenLbl = _evt.source.parent.parent.children[0].children[0]; 174 | hiddenLbl.applyProperties({ 175 | text: "You have added it!", 176 | left:0, 177 | width:Ti.UI.FILL, 178 | textAlign: "center" 179 | }); 180 | 181 | _evt.source.parent.width = 220; 182 | _evt.source.parent.animate({ 183 | left: 220, 184 | duration: 250 185 | }, function(){ 186 | _evt.source.parent.parent.parent.animate({ 187 | opacity: 0.0, 188 | duration: 500 189 | },function(){ 190 | var section = $.wrapper.sections[_evt.sectionIndex]; 191 | section.deleteItemsAt(_evt.itemIndex, 1, false); 192 | }); 193 | 194 | }); 195 | } 196 | }; 197 | 198 | /** 199 | * Handled any associated callback for clicking on the icon 200 | * 201 | * @param {object} _evt - the event object passed by the triggering object. 202 | * @private 203 | */ 204 | function onIconClick(_evt){ 205 | Ti.API.info('addItListView::[ICON CLICK EVENT] - '+JSON.stringify(_evt)); 206 | _args.iconClickCallback && _args.iconClickCallback(_evt); 207 | } 208 | 209 | /** 210 | * 211 | */ 212 | 213 | /** 214 | * Add a new list item to the ListView 215 | * 216 | * @param {array} _item - array of ListItem parameters 217 | * @param {integer} _section - (optional) Index of the section to which you want to add the item. Defaults to 0. 218 | * @public 219 | */ 220 | function addItems(_items, _section){ 221 | /** 222 | * Default to 0 if no section index is specified 223 | */ 224 | _section = _section || 0; 225 | 226 | /** 227 | * Make sure that items is a valid array and then add item(s) to the specified section 228 | */ 229 | //_items && _items.length && $.wrapper.sections[_section].insertItemsAt($.wrapper.sections[_section].items.length, _items, false); 230 | _items && _items.length && $.wrapper.sections[_section].insertItemsAt(0,_items); 231 | } 232 | $.addItems = addItems; 233 | 234 | 235 | 236 | /** 237 | * Public method to handle orientation if this controller 238 | * is opened via {@link core#openScreen} or if 239 | * {@link core#bindOrientationEvents} is applied to this controller 240 | * @param {Object} _event 241 | */ 242 | $.handleOrientation = function(_event) { 243 | Ti.API.debug(_event.orientation); 244 | }; -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/controllers/statusList.js: -------------------------------------------------------------------------------- 1 | var args = arguments[0] || {}; 2 | 3 | 4 | 5 | function onClickLikeButton(_evt){ 6 | 7 | _evt.source.isLiked ? (_evt.source.image = WPATH("/images/likebtn.png")) : (_evt.source.image = WPATH("/images/likebtnOn.png")); 8 | 9 | }; 10 | -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/controllers/widget.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/appcelerator-se/widgets/c735401a68f9d13963124d10643fd1be6a7c975e/com.appcelerator.ui.listview/controllers/widget.js -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/styles/productList.tss: -------------------------------------------------------------------------------- 1 | "#wrapper": { 2 | width: Ti.UI.FILL, 3 | height: Ti.UI.FILL, 4 | landscape: { 5 | backgroundColor: "#EEE" 6 | }, 7 | portrait: { 8 | backgroundColor: "#222" 9 | } 10 | }, 11 | "ListView":{ 12 | backgroundColor: "#EEE" 13 | }, 14 | "ListView[platform=ios]":{ 15 | separatorStyle: Titanium.UI.iPhone.ListViewSeparatorStyle.NONE 16 | }, 17 | "ItemTemplate":{ 18 | top:5, 19 | height: 70, 20 | backgroundColor: "#EEE" 21 | }, 22 | "ItemTemplate[platform=ios]":{ 23 | selectionStyle:Titanium.UI.iPhone.ListViewCellSelectionStyle.NONE 24 | }, 25 | "Label":{ 26 | touchEnabled:false 27 | }, 28 | "#iconWrapper":{ 29 | top:10, 30 | left:15, 31 | height: 60, 32 | width: 60, 33 | backgroundColor: "#fff", 34 | touchEnabled:false 35 | }, 36 | "#detailWrapper":{ 37 | top:10, 38 | left:85, 39 | height: Ti.UI.FILL, 40 | right: 15, 41 | backgroundColor: "#fff" 42 | }, 43 | "#buttonWrapper":{ 44 | width: 40, 45 | height: Ti.UI.FILL, 46 | right:0, 47 | backgroundColor:"#fbfbfb" 48 | }, 49 | "#detailView":{ 50 | backgroundColor: "#fff", 51 | left:0, 52 | width: 220 53 | }, 54 | "#detailView[platform=android]":{ 55 | width: Ti.UI.FILL 56 | }, 57 | "#hiddenView":{ 58 | backgroundColor: "#0196D7", 59 | touchEnabled:false 60 | }, 61 | "#icon" : { 62 | width: 30, 63 | height: 30, 64 | touchEnabled:false 65 | }, 66 | "#title" : { 67 | color: 'black', 68 | font: { fontFamily:'Arial', fontSize: 14, fontWeight:'bold' }, 69 | left: 10, 70 | top: 10, 71 | width: 200 72 | }, 73 | "#subtitle" : { 74 | color: 'black', 75 | font: { fontFamily:'Arial', fontSize: 10 }, 76 | left: 10, 77 | top: 30, 78 | width: 200 79 | }, 80 | "#meta" : { 81 | color: 'gray', 82 | font: { fontFamily:'Arial', fontSize: 10 }, 83 | left: 10, 84 | top: 45, 85 | width: 200 86 | }, 87 | "#hiddenLbl":{ 88 | width:100, 89 | left:0, 90 | height: Ti.UI.FILL, 91 | color: "#fff", 92 | textAlign:"right", 93 | font: {fontFamily: "Arial", fontSize: 14} 94 | }, 95 | "#rightButton":{ 96 | color: "#999", 97 | borderColor:"#999", 98 | borderWidth: 3, 99 | borderRadius:15, 100 | width:30, 101 | height: 30, 102 | font: {fontFamily: "Arial", fontSize: 25}, 103 | textAlign:"center", 104 | touchEnabled: false 105 | }, 106 | "#rightButton[platform=android]":{ 107 | borderRadius: 30, 108 | }, 109 | ".itemContainer":{ 110 | backgroundColor: "#EEE" 111 | } 112 | -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/styles/statusList.tss: -------------------------------------------------------------------------------- 1 | "ListView":{ 2 | backgroundColor: "#EEE" 3 | }, 4 | "ListView[platform=ios]":{ 5 | separatorStyle: Titanium.UI.iPhone.ListViewSeparatorStyle.NONE 6 | }, 7 | "ItemTemplate":{ 8 | height: "160dp", 9 | className:"listRow" 10 | }, 11 | "ItemTemplate[platform=ios]":{ 12 | selectionStyle:Titanium.UI.iPhone.ListViewCellSelectionStyle.NONE 13 | }, 14 | "#itemContainer":{ 15 | borderColor: "#cacdd8", 16 | borderRadius: 3, 17 | borderWidth: 1, 18 | left: "5dp", 19 | top: "5dp", 20 | right: "5dp", 21 | height: "150dp", 22 | width: Ti.UI.FILL, 23 | backgroundColor: "#fff" 24 | }, 25 | "#profilePic":{ 26 | width:"66dp", 27 | height:"66dp", 28 | image:"/bert_appc_lecture.jpg", 29 | top:"5dp", 30 | left:"5dp" 31 | }, 32 | "#profileName":{ 33 | top: "5dp", 34 | left: "80dp", 35 | color: "#941100", 36 | font: { 37 | fontSize : "16dp", 38 | fontWeight: "bold" 39 | } 40 | }, 41 | "#timeAgo":{ 42 | top: "5dp", 43 | right: "5dp", 44 | color: "#bbbbbb", 45 | font: { 46 | fontSize : "12dp" 47 | } 48 | }, 49 | "#status":{ 50 | width: Ti.UI.SIZE, 51 | left: "80dp", 52 | right: "5dp", 53 | top: "25dp", 54 | font: { 55 | fontSize : "16dp" 56 | } 57 | }, 58 | "#bottomActions":{ 59 | bottom: 0, 60 | height: "50dp", 61 | width: Ti.UI.FILL, 62 | backgroundColor: "#eff2f5", 63 | layout: "horizontal" 64 | }, 65 | ".itemActionButton":{ 66 | width: "50%", 67 | height: "50dp" 68 | }, 69 | "#likeBtn":{ 70 | width: "76dp", 71 | height: "20dp", 72 | image: WPATH("/images/likebtn.png") 73 | }, 74 | "#commentBtn":{ 75 | width: "76dp", 76 | height: "20dp", 77 | image: WPATH("/images/commentbtn.png") 78 | } 79 | -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/styles/widget.tss: -------------------------------------------------------------------------------- 1 | ".wrapper":{ 2 | height: Ti.UI.FILL, 3 | width: Ti.UI.FILL 4 | }, 5 | "TextArea": { 6 | color: '#999', 7 | backgroundColor:'#ececec', 8 | borderRadius: 5, 9 | left: 10, 10 | right: 10, 11 | 12 | font: { 13 | fontSize: 12, 14 | }, 15 | height: Ti.UI.SIZE, 16 | width: Ti.UI.SIZE, 17 | }, 18 | ".smokedglass":{ 19 | height: Ti.UI.FILL, 20 | width: Ti.UI.FILL, 21 | backgroundColor: "#000", 22 | opacity: 0.6 23 | } 24 | -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/views/productList.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 21 | 22 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/views/statusList.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 10 | 11 | 12 | 13 | 14 | 28 | 29 | 30 | 31 | 32 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/views/widget.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | -------------------------------------------------------------------------------- /com.appcelerator.ui.listview/widget.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "com.appcelerator.ui.listview", 3 | "name": "com.appcelerator.ui.listview", 4 | "description" : "", 5 | "author": "", 6 | "version": "1.0", 7 | "copyright":"Copyright (c) 2012", 8 | "license":"Public Domain", 9 | "min-alloy-version": "1.0", 10 | "min-titanium-version":"2.1", 11 | "tags":"", 12 | "platforms":"android,blackberry,ios,mobileweb,tizen" 13 | } -------------------------------------------------------------------------------- /com.leorbrenman.tigauge/README: -------------------------------------------------------------------------------- 1 | Gauge Widget 2 | 3 | Modeled after the Mint iPhone app Budget Visualization gauge 4 | 5 | Widget height is programmable and width fills to parent container size 6 | 7 | Widget has a default setting and can be configured at instantiation time via XML, TSS or JS and can also be modified at run time using built-in methods in JS 8 | 9 | 10 | * Arguments: 11 | percent 12 | gaugeColor 13 | gaugeBGColor 14 | overlayText 15 | overlayTextColor 16 | gaugeHeight 17 | isAnimationOn 18 | titleText 19 | titleRightText 20 | isAnimationOn (animation can only be enabled on iOS) 21 | 22 | 23 | * Methods: 24 | setPercent 25 | getPercent 26 | setGaugeColor 27 | getGaugeColor 28 | setGaugeBackgroundColor 29 | getGaugeBackgroundColor 30 | setOverlayText 31 | getOverlayText 32 | setOverlayTextColor 33 | getOverlayTextColor 34 | enableAnimation 35 | disableAnimation 36 | getAnimationSetting 37 | setGaugeHeight 38 | getGaugeHeight 39 | setTitle 40 | getTitle 41 | clearTitle 42 | setTitleRight 43 | getTitleRight 44 | clearTitleRight 45 | 46 | 47 | Sample instantiation: 48 | 49 | * Add Widget com.leorbrenman.gtigauge to project/app/widgets folder 50 | 51 | * Add dependency to config.json 52 | 53 | "dependencies": { 54 | "com.leorbrenman.tigauge": "1.0" 55 | } 56 | 57 | * Add widget to screen as follows: 58 | 59 | (A) In XML 60 | 61 | 62 | and position and size in a view as follows: 63 | 64 | 65 | 66 | 67 | 68 | or 69 | 70 | (B) In JS 71 | var myGauge = Alloy.createWidget("com.leorbrenman.tigauge", { 72 | percent: 33, 73 | color: "pink", 74 | titleText: "Budget: July", 75 | overlayText: "33%" 76 | }); 77 | $.sv.add(myGauge.getView()); 78 | 79 | or 80 | 81 | (C) Combination: 82 | 83 | 84 | 85 | AND 86 | 87 | $.myGauge2.setPercent("88"); 88 | $.myGauge2.setBackgroundColor("black"); 89 | $.myGauge2.setOverlayText("88%"); 90 | 91 | OR 92 | 93 | "#myGauge1": { 94 | gaugeColor: "#4ba90a", 95 | percent: "40", 96 | overlayText: "$200M", 97 | } 98 | -------------------------------------------------------------------------------- /com.leorbrenman.tigauge/controllers/widget.js: -------------------------------------------------------------------------------- 1 | var _args = arguments[0] || {}; 2 | 3 | var _percent="0"; 4 | var _isAnimationOn = true; 5 | var defaultPercent = "50"; 6 | var defaultGaugeHeight = "25"; 7 | 8 | // Ti.API.info("_args.percent = "+_args.percent); 9 | 10 | $.tiGaugeMeterVw.backgroundColor = _args.gaugeColor || "#4ba90a"; 11 | $.tiGaugeOverlayLbl.text = _args.overlayText || ""; 12 | $.tiGaugeOverlayLbl.color = _args.overlayTextColor || "white"; 13 | $.tiGaugeBGVw.backgroundColor = _args.gaugeBGColor || "#e5e5e5"; 14 | $.tiGaugeBGVw.height = _args.gaugeHeight || defaultGaugeHeight; 15 | $.tiGaugeMeterVw.height = _args.gaugeHeight || defaultGaugeHeight; 16 | $.tiGaugeTitleLbl.text = _args.titleText || null; 17 | $.tiGaugeTitleRightLbl.text = _args.titleRightText || null; 18 | _isAnimationOn = _args.isAnimationOn || true; 19 | 20 | $.setPercent = function (percent) { 21 | _percent = percent; 22 | 23 | $.tiGaugeMeterVw.right = "99%"; 24 | 25 | if(_isAnimationOn && OS_IOS) { 26 | var animation = Titanium.UI.createAnimation(); 27 | animation.right = (100-parseInt(percent)).toString()+"%"; 28 | animation.duration = 1000; 29 | $.tiGaugeMeterVw.animate(animation); 30 | } else { 31 | $.tiGaugeMeterVw.right = (100-parseInt(percent)).toString()+"%"; 32 | } 33 | 34 | if($.tiGaugeTitleLbl.text || $.tiGaugeTitleRightLbl.text) { 35 | $.tiGaugeTitleVw.height=Ti.UI.SIZE; 36 | } else { 37 | $.tiGaugeTitleVw.height="0"; 38 | } 39 | }; 40 | 41 | $.getPercent = function () { 42 | return _percent; 43 | }; 44 | 45 | $.setGaugeBackgroundColor = function (backgroundColor) { 46 | $.tiGaugeBGVw.backgroundColor = backgroundColor; 47 | $.setPercent(_percent); 48 | }; 49 | 50 | $.getGaugeBackgroundColor = function () { 51 | return $.tiGaugeBGVw.backgroundColor; 52 | }; 53 | 54 | $.setGaugeColor = function (backgroundColor) { 55 | $.tiGaugeMeterVw.backgroundColor = backgroundColor; 56 | $.setPercent(_percent); 57 | }; 58 | 59 | $.getGaugeColor = function () { 60 | return $.tiGaugeMeterVw.backgroundColor; 61 | }; 62 | 63 | $.setOverlayText = function (overlayText) { 64 | $.tiGaugeOverlayLbl.text = overlayText; 65 | $.setPercent(_percent); 66 | }; 67 | 68 | $.clearOverlayText = function () { 69 | $.tiGaugeOverlayLbl.text = ""; 70 | $.setPercent(_percent); 71 | }; 72 | 73 | $.getOverlayText = function () { 74 | return $.tiGaugeOverlayLbl.text; 75 | }; 76 | 77 | $.setOverlayTextColor = function (overlayTextColor) { 78 | $.tiGaugeOverlayLbl.color = overlayColor; 79 | $.setPercent(_percent); 80 | }; 81 | 82 | $.getOverlayTextColor = function () { 83 | return $.tiGaugeOverlayLbl.color; 84 | }; 85 | 86 | $.enableAnimation = function () { 87 | _isAnimationOn = true; 88 | $.setPercent(_percent); 89 | }; 90 | 91 | $.disableAnimation = function () { 92 | _isAnimationOn = false; 93 | $.setPercent(_percent); 94 | }; 95 | 96 | $.getAnimationSetting = function () { 97 | return _isAnimationOn; 98 | }; 99 | 100 | $.setGaugeHeight = function (height) { 101 | $.tiGaugeBGVw.height = height; 102 | $.tiGaugeMeterVw.height = height; 103 | $.setPercent(_percent); 104 | }; 105 | 106 | $.getGaugeHeight = function () { 107 | return $.tiGaugeBGVw.height; 108 | }; 109 | 110 | $.setTitle = function (titleText) { 111 | $.tiGaugeTitleLbl.text = titleText; 112 | $.setPercent(_percent); 113 | }; 114 | 115 | $.getTitle = function () { 116 | return $.tiGaugeTitleLbl.text; 117 | }; 118 | 119 | $.clearTitle = function () { 120 | $.tiGaugeTitleLbl.text = null; 121 | $.setPercent(_percent); 122 | }; 123 | 124 | $.setTitleRight = function (titleRightText) { 125 | $.tiGaugeTitleRightLbl.text = titleRightText; 126 | $.setPercent(_percent); 127 | }; 128 | 129 | $.clearTitleRight = function () { 130 | $.tiGaugeTitleRightLbl.text = null; 131 | $.setPercent(_percent); 132 | }; 133 | 134 | $.getTitleRight = function () { 135 | return $.tiGaugeTitleRightLbl.text; 136 | }; 137 | 138 | if(_args.percent) { 139 | $.setPercent(_args.percent); 140 | } else { 141 | $.setPercent(defaultPercent); 142 | } -------------------------------------------------------------------------------- /com.leorbrenman.tigauge/styles/widget.tss: -------------------------------------------------------------------------------- 1 | "Label": { 2 | color: '#333', 3 | font: { 4 | fontSize: 16, 5 | fontWeight: 'bold' 6 | }, 7 | height: Ti.UI.SIZE, 8 | width: Ti.UI.SIZE 9 | } 10 | "#tiGaugeOverlayLbl": { 11 | color: 'white', 12 | left: '5' 13 | } 14 | "#tiGaugeVw": { 15 | //height: '40', 16 | height: Ti.UI.SIZE, 17 | width: '100%', 18 | top: '5', 19 | layout: "vertical" 20 | } 21 | "#tiGaugeTitleVw": { 22 | height: Ti.UI.SIZE, 23 | width: '100%', 24 | } 25 | "#tiGaugeTitleLbl": { 26 | color: 'black', 27 | left: 0 28 | } 29 | "#tiGaugeTitleRightLbl": { 30 | color: 'black', 31 | right: 0, 32 | font: { 33 | fontWeight: 'normal' 34 | } 35 | } 36 | "#tiGaugeBGVw": { 37 | height: "25", 38 | backgroundColor: '#e5e5e5', 39 | borderRadius: '4' 40 | } 41 | "#tiGaugeMeterVw": { 42 | height: "25", 43 | backgroundColor: '#4ba90a', 44 | borderRadius: '4', 45 | right: '99%' 46 | } -------------------------------------------------------------------------------- /com.leorbrenman.tigauge/views/widget.xml: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 7 | 8 | 9 | 10 | 12 | 13 | -------------------------------------------------------------------------------- /com.leorbrenman.tigauge/widget.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "com.leorbrenman.tigauge", 3 | "name": "com.leorbrenman.tigauge", 4 | "description" : "", 5 | "author": "", 6 | "version": "1.0", 7 | "copyright":"Copyright (c) 2012", 8 | "license":"Public Domain", 9 | "min-alloy-version": "1.0", 10 | "min-titanium-version":"2.1", 11 | "tags":"", 12 | "platforms":"android,blackberry,ios,mobileweb,tizen" 13 | } -------------------------------------------------------------------------------- /com.leorbrenman.tismallbarchart/README: -------------------------------------------------------------------------------- 1 | Bar Chart Widget 2 | 3 | Modeled after the Mint Bar Chart Visualization 4 | 5 | Widget size can be set or will fills to parent container size 6 | 7 | Widget has a default setting and can be configured at instantiation time via XML, TSS or JS and can also be modified at run time using built-in methods in JS 8 | 9 | 10 | * Arguments: 11 | height 12 | width 13 | negativeColor 14 | displayLegend 15 | displaySpacers 16 | colors 17 | data 18 | labelColor 19 | 20 | 21 | * Methods: 22 | setLegendOnStatus 23 | setColors 24 | setNegativeColor 25 | setSize 26 | setData 27 | 28 | 29 | Sample instantiation: 30 | 31 | * Add Widget com.leorbrenman.tismallbarchart to project/app/widgets folder 32 | 33 | * Add dependency to config.json 34 | 35 | "dependencies": { 36 | "com.leorbrenman.tismallbarchart": "1.0" 37 | } 38 | 39 | * Add widget to screen as follows: 40 | 41 | (A) In XML 42 | 43 | 44 | and position and size in a view as follows: 45 | 46 | 47 | 48 | 49 | 50 | 51 | or 52 | 53 | (B) In JS 54 | var myChart = Alloy.createWidget("com.leorbrenman.tismallbarchart", {}); 55 | $.sv.add(myChart.getView()); 56 | 57 | or 58 | 59 | (C) Combination: 60 | 61 | 62 | 63 | AND 64 | 65 | $.myChart.setColors(["#168039"]); 66 | $.myChart.setData([{"month": "Jan", "val": -3}, {"month": "Feb", "val": 11}, {"month": "Mar", "val": 4}, {"month": "Apr", "val": 2} , {"month": "May", "val": -1} , {"month": "May", "val": 7} , {"month": "Jun", "val": 5}]); 67 | 68 | OR 69 | 70 | "#mySmallBarChart2": { 71 | data: [{"month": "Jan", "val": 3}, {"month": "Feb", "val": 11}, {"month": "Mar", "val": 4}, {"month": "Apr", "val": 2} , {"month": "May", "val": -11} , {"month": "May", "val": 7} , {"month": "Jun", "val": 5}, {"month": "Jul", "val": -5}], 72 | negativeColor: "#D74B4B", 73 | colors: "#354B5E" 74 | } 75 | -------------------------------------------------------------------------------- /com.leorbrenman.tismallbarchart/controllers/axisLabel.js: -------------------------------------------------------------------------------- 1 | var _args = arguments[0] || {}; 2 | 3 | // Ti.API.info("_args.text = "+_args.text); 4 | 5 | $.axisLabel.text = _args.text || null; 6 | $.axisLabel.bottom = _args.bottom || null; 7 | $.axisLabel.top = _args.top || null; 8 | $.axisLabel.right = _args.right || null; 9 | $.axisLabel.left = _args.left || null; 10 | $.axisLabel.color = _args.color || null; -------------------------------------------------------------------------------- /com.leorbrenman.tismallbarchart/controllers/widget.js: -------------------------------------------------------------------------------- 1 | var _args = arguments[0] || {}; 2 | 3 | var defaultColors = ["#00261C", "#168039", "#45BF55"]; 4 | var defaultData = [{"month": "1", "val": 2}, {"month": "2", "val": 2}, {"month": "3", "val": 3}, {"month": "4", "val": 4} , {"month": "5", "val": 5}]; 5 | var defaultNegativeColor = "red"; 6 | var defaultFontSize = 14; 7 | var _fontSize = defaultFontSize; 8 | var legendOn = false; 9 | var spacersOn = false; 10 | 11 | // Ti.API.info("_args.height = "+_args.height); 12 | // Ti.API.info("_args.width = "+_args.width); 13 | // Ti.API.info("_args.negativeColor = "+_args.negativeColor); 14 | // Ti.API.info("_args.displayLegend = "+_args.displayLegend); 15 | // Ti.API.info("_args.displaySpacers = "+_args.displaySpacers); 16 | // Ti.API.info("_args.data = "+_args.data); 17 | 18 | $.tiChartVw.height = _args.height || Ti.UI.FILL; 19 | $.tiChartVw.width = _args.width || Ti.UI.FILL; 20 | var negativeColor = _args.negativeColor || defaultNegativeColor; 21 | // var colors = _args.colors || defaultColors; 22 | var data = _args.data || defaultData; 23 | var labelColor = _args.labelColor || "black"; 24 | var chartTitle = _args.chartTitle || null; 25 | 26 | var colors; 27 | 28 | // process color as string or array of strings 29 | if(_args.colors) { 30 | if(typeof _args.colors === "string") { 31 | colors = [_args.colors]; 32 | } else { 33 | colors = _args.colors; 34 | } 35 | } else { 36 | colors = defaultColors; 37 | } 38 | 39 | // Ti.API.info("$.tiChartVw.height = "+$.tiChartVw.height); 40 | // Ti.API.info("$.tiChartVw.width = "+$.tiChartVw.width); 41 | // Ti.API.info("negativeColor = "+negativeColor); 42 | // Ti.API.info("legendOn = "+legendOn); 43 | // Ti.API.info("spacersOn = "+spacersOn); 44 | 45 | function clearChartView(){ 46 | _.each($.barChartVw.children, function(view) { 47 | $.barChartVw.remove(view); 48 | }); 49 | _.each($.barChartYLegendVw.children, function(view) { 50 | $.barChartYLegendVw.remove(view); 51 | }); 52 | _.each($.barChartXLegendVw.children, function(view) { 53 | $.barChartXLegendVw.remove(view); 54 | }); 55 | }; 56 | 57 | $.setData = function (_data) { 58 | data = _data; 59 | // Ti.API.info("setData()"); 60 | // Ti.API.info("data = "+data); 61 | 62 | var attrNameArray = []; 63 | var attrNameArrayIndex=0; 64 | 65 | for (var attrName in data[0]) { 66 | // Ti.API.info("data attribute name = "+attrName); 67 | attrNameArray[attrNameArrayIndex++] = attrName; 68 | } 69 | 70 | var maxVal = _.max(_.pluck(data, attrNameArray[1])); 71 | var minVal = _.min(_.pluck(data, attrNameArray[1])); 72 | var dataLen = data.length; 73 | var hasNegative = false; 74 | var rangeVal; 75 | 76 | clearChartView(); 77 | 78 | // Ti.API.info("colors = "+colors); 79 | var colorIndex = 0; 80 | var numColors = colors.length; 81 | 82 | // Ti.API.info("length data = "+dataLen); 83 | // Ti.API.info("max data = "+maxVal); 84 | // Ti.API.info("min data = "+minVal); 85 | 86 | if(chartTitle) { 87 | $.chartTitleLbl.text = chartTitle; 88 | $.chartTitleLbl.height = Ti.UI.SIZE; 89 | } else { 90 | $.chartTitleLbl.text = null; 91 | $.chartTitleLbl.height = "0"; 92 | } 93 | 94 | if(minVal<0) { 95 | // Ti.API.info("Has negative Vals"); 96 | hasNegative = true; 97 | rangeVal = maxVal - minVal; 98 | } else { 99 | rangeVal = maxVal; 100 | } 101 | 102 | // Ti.API.info("range = "+rangeVal); 103 | 104 | // Ti.API.info("max data (after check) = "+maxVal); 105 | 106 | var barWidth = 100/dataLen; 107 | var barWidthFill = 0; 108 | 109 | if(spacersOn){ 110 | barWidth = 100/((2*dataLen)-1); 111 | } 112 | 113 | // Ti.API.info("barWidth = "+barWidth); 114 | 115 | if(legendOn){ 116 | $.barChartYLegendVw.width = "20%"; 117 | $.barChartXLegendVw.height = "20%"; 118 | $.barChartContVw.height = "80%"; 119 | } else { 120 | $.barChartYLegendVw.width = "0%"; 121 | $.barChartXLegendVw.height = "0%"; 122 | $.barChartContVw.height = "100%"; 123 | } 124 | 125 | for(var i=0;i=0){ 153 | // Ti.API.info("Data val positive check true"); 154 | barVw.bottom = (-100*minVal/rangeVal).toString()+"%"; 155 | } else { 156 | // Ti.API.info("Data val positive check false"); 157 | barVw.backgroundColor = negativeColor; 158 | barVw.bottom = (-100*(minVal-data[i][attrNameArray[1]])/rangeVal).toString()+"%"; 159 | barVw.height = (-barHeight).toString()+"%"; 160 | } 161 | } 162 | 163 | // Ti.API.info("barVw.bottom = "+barVw.bottom); 164 | 165 | barWidthFill += barWidth; 166 | $.barChartVw.add(barVw); 167 | 168 | if((spacersOn) && (i 2 |