From a1a2c2a6ab071e67072752742823e09270317e56 Mon Sep 17 00:00:00 2001 From: Carl Orthlieb Date: Mon, 25 Mar 2013 18:18:13 -0700 Subject: [PATCH] Update to 2.0 --- CHANGELOG.txt | 1 + app/config.json | 2 +- app/controllers/index.js | 6 ++- app/styles/index.tss | 14 ++++++- .../controllers/widget.js | 42 +++++++++---------- .../styles/pickerview.tss | 2 +- .../com.orthlieb.combobox/styles/widget.tss | 19 +++++++-- .../com.orthlieb.combobox/views/widget.xml | 6 ++- app/widgets/com.orthlieb.combobox/widget.json | 2 +- tiapp.xml | 1 + 10 files changed, 60 insertions(+), 35 deletions(-) diff --git a/CHANGELOG.txt b/CHANGELOG.txt index 5641e62..0bc4131 100644 --- a/CHANGELOG.txt +++ b/CHANGELOG.txt @@ -1,2 +1,3 @@ 01/18/2013 orthlieb Version 1.0: Initial commit 02/04/2013 orthlieb Version 1.1: Remove dependency on Alloy.Globals.mainWindow (evil) and use a parameter instead. Also support parent styling through .tss file. +03/25/2013 orthlieb Version 2.0: You can now style the dropButton on the combobox via the parent tss file. Passing in choices and the selected id is no longer supported at init() time, you need to do this explicitly in your code. Styling the combobox is no longer supported at init() time, you need to do this explicitly in the parent .tss file. diff --git a/app/config.json b/app/config.json index 5402c42..7fa9d41 100644 --- a/app/config.json +++ b/app/config.json @@ -6,6 +6,6 @@ "os:ios": {}, "os:android": {}, "dependencies": { - "com.orthlieb.combobox": "1.0" + "com.orthlieb.combobox": "2.0" } } \ No newline at end of file diff --git a/app/controllers/index.js b/app/controllers/index.js index 5572228..2714de8 100644 --- a/app/controllers/index.js +++ b/app/controllers/index.js @@ -55,7 +55,8 @@ var countries = { esh: { title: 'Western Sahara' }, yem: { title: 'Yemen' }, zmb: { title: 'Zambia' }, zwe: { title: 'Zimbabwe' } } -$.country.init({ choices: countries, id: $.country.id, parentView: $.getView() }); +$.country.init($.getView()); +$.country.choices = countries; $.country.on('change', function (event) { alert('Country changed: ' + event.id + " => " + event.value); @@ -75,7 +76,8 @@ var colors = { violet: { title: "Violet", rgb: "#9400D3" } }; -$.color.init({ choices: colors, id: $.color.id, parentView: $.getView() }); +$.color.init($.getView()); +$.color.choices = colors; $.color.on('change', function (event) { $.swatch.backgroundColor = colors[event.id].rgb; diff --git a/app/styles/index.tss b/app/styles/index.tss index 685e690..065955b 100644 --- a/app/styles/index.tss +++ b/app/styles/index.tss @@ -18,7 +18,12 @@ right: 5, height: 40, borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED, - hintText: 'Select a Country' + hintText: 'Select a Country', + dropButton: { + color: "black", + selectedColor: "yellow", + style: Ti.UI.iPhone.SystemButtonStyle.PLAIN + } }, "#color": { @@ -27,5 +32,10 @@ right: 5, height: 40, borderStyle: Ti.UI.INPUT_BORDERSTYLE_ROUNDED, - hintText: 'Select a Color' + hintText: 'Select a Color', + dropButton: { + color: "black", + selectedColor: "yellow", + style: Ti.UI.iPhone.SystemButtonStyle.PLAIN + } } diff --git a/app/widgets/com.orthlieb.combobox/controllers/widget.js b/app/widgets/com.orthlieb.combobox/controllers/widget.js index d00a733..6e4d30c 100644 --- a/app/widgets/com.orthlieb.combobox/controllers/widget.js +++ b/app/widgets/com.orthlieb.combobox/controllers/widget.js @@ -5,36 +5,29 @@ var defaults = { editable: false, - rightButtonMode:Ti.UI.INPUT_BUTTONMODE_ALWAYS + rightButtonMode: Ti.UI.INPUT_BUTTONMODE_ALWAYS }; +var dimensions = [ "left", "top", "right", "bottom", "center", "width", "height" ]; +var properties = [ "choices", "id", "parentView" ]; // Allow parameters to be brought in through the parent tss file. -var comboBoxArgs = _.defaults(arguments[0], defaults); -_.extend($.field, _.omit(comboBoxArgs, ["choices", "id", "parentView"])); +var args = _.defaults(arguments[0], defaults); +if (OS_IOS) { + _.extend($.field, _.chain(args).omit(properties).omit(dimensions).value()); + _.extend($.container, _.pick(args, dimensions)); + _.extend($.dropButton, args.dropButton); + $.field.rightButton = $.dropButton; +} else { + _.extend($.field, _.omit(args, properties)); +} /** * @method init * Initializes the combobox. - * @param {Object} comboBoxArgs Standard properties for a Ti.UI.TextField. - * @param {Object} [choices] Dictionary of entries where the key is a selectable id and the value is an object suitable for use in a TiUIPickerRow. Must have a title entry for each item. - * @param {String} [id] Key of the selected item in the combobox. * @param {TiUIWindow} [parentView] Parent view/window to display the picker in. - * NOTE: The comboBoxArgs are for backwards compatibility only. It is better to include the view based properties of the combobox in the parent view's tss file. - * The last three parameters can now be included in the comboBoxArgs objects or in place of the comboBoxArgs as named arguments. */ -exports.init = function (comboBoxArgs, choices, id) { - comboBoxArgs = _.defaults(comboBoxArgs, defaults); - _.extend($.field, _.omit(comboBoxArgs, ["choices", "id", "parentView"])); - - $.choices = choices || comboBoxArgs.choices; - $.id = id || comboBoxArgs.id; - $.parentView = comboBoxArgs.parentView || Alloy.Globals.mainWindow; - - if (OS_IOS) { - // In IOS the combobox is a text field with a right drop down button. - $.dropbutton.transform = Ti.UI.create2DMatrix().rotate(90); - $.field.rightButton = $.dropbutton; - } +exports.init = function (parentView) { + $.parentView = parentView || Alloy.Globals.mainWindow; }; // id is currently selected item in the combobox. @@ -79,7 +72,7 @@ Object.defineProperty($, "choices", { // Pickers must be destroyed and then recreated if you change their choices. if ($.picker) $.field.remove($.picker); - $.picker = null; + $.picker = null; CreatePicker(); } } @@ -117,6 +110,11 @@ if (OS_IOS) { // create the picker on the fly and destroy/recreate when the choices change. $.picker = Ti.UI.createPicker({ left: 0, top: 0, width: Ti.UI.FILL, height: Ti.UI.FILL }); + // Degenerate case, no choices yet. You still need to create a picker! + if (!$._choices || !_.keys($._choices).length) { + $._choices = { dg: { title: $.field.hintText || "Choose..." } }; + } + // Load up the picker. We also populate an id entry to allow for easy back mapping on the trigger. var rows = [], i, count = -1, selected = -1; for (i in $.choices) { diff --git a/app/widgets/com.orthlieb.combobox/styles/pickerview.tss b/app/widgets/com.orthlieb.combobox/styles/pickerview.tss index ef2b519..02e943a 100644 --- a/app/widgets/com.orthlieb.combobox/styles/pickerview.tss +++ b/app/widgets/com.orthlieb.combobox/styles/pickerview.tss @@ -12,7 +12,7 @@ left: 0, width: Ti.UI.FILL, height: 45, - barColor : '#515151' // Putty + barColor : '#26688b' // Putty }, "#cancel": { top: 5, diff --git a/app/widgets/com.orthlieb.combobox/styles/widget.tss b/app/widgets/com.orthlieb.combobox/styles/widget.tss index 79e0c28..3ed143b 100644 --- a/app/widgets/com.orthlieb.combobox/styles/widget.tss +++ b/app/widgets/com.orthlieb.combobox/styles/widget.tss @@ -1,7 +1,18 @@ -"#dropbutton[platform=ios]": { - right : 0, - bottom : 0, +"#container[platform=ios]": { + width: Ti.UI.SIZE, + height: Ti.UI.SIZE +}, + +"#field[platform=ios]": { + left: 0, + center: { y: "50%" }, + width: Ti.UI.FILL +}, + +"#dropButton[platform=ios]": { + right: 0, width : Ti.UI.SIZE, height : Ti.UI.SIZE, - style : Ti.UI.iPhone.SystemButton.DISCLOSURE + title: '\u25BC', + backgroundColor: 'transparent' } diff --git a/app/widgets/com.orthlieb.combobox/views/widget.xml b/app/widgets/com.orthlieb.combobox/views/widget.xml index 9e845ae..60f1f71 100644 --- a/app/widgets/com.orthlieb.combobox/views/widget.xml +++ b/app/widgets/com.orthlieb.combobox/views/widget.xml @@ -1,5 +1,7 @@ - -