Skip to content

Commit

Permalink
Update for iPad iOS 8.4
Browse files Browse the repository at this point in the history
Integrate changes by speedyankur
(orthlieb#4)

Also, still working on Android.

Having « bug » with the Popover width (full width !!), investigating…
  • Loading branch information
Mac Mini committed Jul 22, 2015
1 parent 663a4fe commit dfadd78
Show file tree
Hide file tree
Showing 4 changed files with 124 additions and 94 deletions.
69 changes: 43 additions & 26 deletions app/widgets/com.orthlieb.combobox/controllers/pickerview.js
Original file line number Diff line number Diff line change
@@ -1,42 +1,47 @@
// Load up the picker. We also populate an id entry to allow for easy back mapping on the trigger.
var choices = arguments[0].choices, id = arguments[0].id;
var choices = arguments[0].choices,
id = arguments[0].id;
$.title = arguments[0].title;
$.parentField = arguments[0].parentField;
$.parentView = arguments[0].parentView;

var rows = [], i, count = -1, selected = -1;
var rows = [],
i,
count = -1,
selected = -1;
for (i in choices) {
choices[i].id = i;
rows.push(Ti.UI.createPickerRow(choices[i]));
if (id) { // Goofy stuff to map key to index.
count++;
if (id === i)
selected = count;
count = count + 1;
if (id === i) {
selected = count;
}
}
}
$.picker.add(rows);

if (!Alloy.isTablet) {
$.pickerview.bottom = -Ti.Platform.displayCaps.platformHeight; // Offscreen
} else {
$.popover.title = $.title;
$.popover.rightNavButton = $.done;
$.popover.leftNavButton = $.cancel;
$.popover.width = Ti.Platform.displayCaps.platformHeight * 0.5;
$.winPopover.title = $.title;
//DEPRECATED $.popover.width = Ti.Platform.displayCaps.platformHeight * 0.5;
$.winPopover.width = Ti.Platform.displayCaps.platformWidth * 0.5;
}

if (selected != -1)
if (selected !== -1) {
$.picker.setSelectedRow(0, selected, true);
}

function PickerButtonClick(event) {
if (event.source.id == 'done') {
if (event.source.id === 'done') {
// Trigger a change event for the picker.
var selectedRow = $.picker.getSelectedRow(0);
$.trigger('change', {
source: $,
type: 'change',
value: selectedRow.title,
id: selectedRow.id
$.trigger('change', {
source: $,
type: 'change',
value: selectedRow.title,
id: selectedRow.id
});
}

Expand All @@ -46,23 +51,35 @@ function PickerButtonClick(event) {
type: 'done'
});
if (!Alloy.isTablet) {
$.pickerview.animate({ bottom: -Ti.Platform.displayCaps.platformHeight, duration: 500 });
$.pickerview.animate({
bottom: -Ti.Platform.displayCaps.platformHeight,
duration: 500
});
$.parentView.remove($.pickerview);
} else {
$.popover.hide({ animated:true });
$.popover.hide({
animated: true
});
}
}

function hidePopOver() {
$.trigger('done', {
source: $,
type: 'done'
});
}
exports.open = function (choices, id) {
if (!Alloy.isTablet) {
$.parentView.add($.pickerview);
$.pickerview.animate({ bottom: 0, duration: 500 });
$.pickerview.animate({
bottom: 0,
duration: 500
});
} else {
$.popover.show({
animated:true,
view: $.parentField
});
$.popover.show({
animated: true,
view: $.parentField
});
}
$.picker.selectionIndicator = true;
};

};
122 changes: 65 additions & 57 deletions app/widgets/com.orthlieb.combobox/controllers/widget.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,12 @@
* The Combobox widget provides a field that allows the user to pick from a list of items.
* See the documentation in the docs directory for more details.
*/

var defaults = {
editable: false,
rightButtonMode: Ti.UI.INPUT_BUTTONMODE_ALWAYS
};
var dimensions = [ "left", "top", "right", "bottom", "center", "width", "height" ];
var properties = [ "choices", "id", "parentView" ];
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 args = _.defaults(arguments[0], defaults);
Expand All @@ -18,44 +17,47 @@ if (OS_IOS) {
_.extend($.dropButton, args.dropButton);
$.field.rightButton = $.dropButton;
} else {
_.extend($.field, _.omit(args, properties));
_.extend($.field, _.omit(args, properties));
}

var comboBoxClick,
createPicker;
/**
* @method init
* Initializes the combobox.
* @param {TiUIWindow} [parentView] Parent view/window to display the picker in.
*/
exports.init = function (parentView) {
$.parentView = parentView || Alloy.Globals.mainWindow;
$.parentView = parentView || Alloy.Globals.mainWindow;
};

// id is currently selected item in the combobox.
Object.defineProperty($, "id", {
get: function() {
return $._id;
get: function () {
return $._id;
},
set: function(id) {
$._id = id;
if (OS_IOS) {
// Keep text field in sync with the id change.
$.field.value = ($._id && $._choices && $._choices[$._id]) ? $._choices[$._id].title : "";
} else {
// Loop through the entries and convert the id based selector to an integer one.
// Update the picker accordingly.
if ($.picker) {
set: function (id) {
$._id = id;
if (OS_IOS) {
// Keep text field in sync with the id change.
$.field.value = ($._id && $._choices && $._choices[$._id]) ? $._choices[$._id].title : "";
} else {
// Loop through the entries and convert the id based selector to an integer one.
// Update the picker accordingly.
if ($.picker) {
var rows = [], i, count = -1, selected = -1;
for (i in $.choices) {
count++;
count = count + 1;
if ($._id === i) {
// Found the selected item.
selected = count;
}
}
if (selected != -1)
if (selected !== -1) {
$.picker.setSelectedRow(0, selected, true);
}
}
}
}
}
});

Expand All @@ -64,48 +66,53 @@ Object.defineProperty($, "choices", {
get: function () {
return $._choices;
},
set: function(choices) {
set: function (choices) {
$._choices = choices;
if (OS_IOS) {
$.field.value = ($._id && $._choices && $._choices[$._id]) ? $._choices[$._id].title : ""; // Keep text field in sync.
$.field.value = ($._id && $._choices && $._choices[$._id]) ? $._choices[$._id].title : ""; // Keep text field in sync.
} else {
// Pickers must be destroyed and then recreated if you change their choices.
if ($.picker)
$.field.remove($.picker);
$.picker = null;
CreatePicker();
}
// Pickers must be destroyed and then recreated if you change their choices.
if ($.picker) {
$.field.remove($.picker);
}
$.picker = null;
createPicker();
}
}
});

if (OS_IOS) {
function ComboBoxClick (event) {
comboBoxClick = function (event) {
// Debounce in case the user clicks multiple times on the dropdown button.
if (!$.debounce && $.choices) {
$.debounce = true;

// ALLOYBUG: Would rather use createController but it is tied to the app directory and not the widget directory.
var pickerView = new (require("alloy/widgets/com.orthlieb.combobox/controllers/pickerview"))( {
choices: $.choices, id: $.id, title: $.field.hintText, parentField: $.field, parentView: $.parentView
});
pickerView.on('change', function (e) {
$.id = e.id;
// Trigger a change event for the combobox.
$.trigger('change', {
source: $,
type: 'change',
value: e.value,
id: e.id
});
});
pickerView.on('done', function(e) {
$.debounce = false;
});
pickerView.open();
var pickerView = new (require("alloy/widgets/com.orthlieb.combobox/controllers/pickerview"))({
choices: $.choices,
id: $.id,
title: $.field.hintText,
parentField: $.field,
parentView: $.parentView
});
pickerView.on('change', function (e) {
$.id = e.id;
// Trigger a change event for the combobox.
$.trigger('change', {
source: $,
type: 'change',
value: e.value,
id: e.id
});
});
pickerView.on('done', function (e) {
$.debounce = false;
});
pickerView.open();
}
}
};
} else {
function CreatePicker() {
createPicker = function () {
// Pickers are slightly bizarre. You can't change the choices once they are instantiated. So we
// 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 });
Expand All @@ -121,27 +128,28 @@ if (OS_IOS) {
$.choices[i].id = i;
rows.push(Ti.UI.createPickerRow($.choices[i]));
// Goofy stuff to map key to index.
count++;
count = count + 1;
if ($.id === i) {
selected = count;
}
}
$.picker.add(rows);

if (selected != -1)
if (selected !== -1) {
$.picker.setSelectedRow(0, selected, true);
}

$.picker.addEventListener('change', function(event) {
$.picker.addEventListener('change', function (event) {
// Trigger a change event for the picker.
var selectedRow = $.picker.getSelectedRow(0);
$.trigger('change', {
source: $,
type: 'change',
value: selectedRow.title,
id: selectedRow.id
$.trigger('change', {
source: $,
type: 'change',
value: selectedRow.title,
id: selectedRow.id
});
});

$.field.add($.picker);
}
}
};
}
13 changes: 6 additions & 7 deletions app/widgets/com.orthlieb.combobox/docs/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,8 +17,8 @@ On Android, this is a plain picker control.
![Android Picker](img/Screen%20Shot%204.png)

##Manifest
* Version: 1.1 (stable)
* Github: https://www.github.com/orthlieb/widget_combobox
* Version: 2.1 (unstable)
* Github: https://www.github.com/Pyreweb/widget_combobox
* License: [Apache 2.0](http://www.apache.org/licenses/LICENSE-2.0.html)
* Author: Carl Orthlieb
* Supported Platforms: iOS (iPhone/iPad), Android
Expand All @@ -29,7 +29,7 @@ On Android, this is a plain picker control.

```
"dependencies": {
"com.orthlieb.combobox":"1.1"
"com.orthlieb.combobox":"2.1"
}
```

Expand Down Expand Up @@ -85,10 +85,9 @@ var colors = {
violet: { title: "Violet", rgb: "#9400D3" }
};
$.color.init({
choices: colors,
id: $.color.id
}, colors, $.color.id);
$.color.init($.getViews());
$.color.choices = colors;
$.color.id = 'red'; //Or whatever you want to be selected
```
### Initialization Parameters

Expand Down
14 changes: 10 additions & 4 deletions app/widgets/com.orthlieb.combobox/views/pickerview.xml
Original file line number Diff line number Diff line change
@@ -1,8 +1,14 @@
<Alloy>
<Popover id='popover' ns="Ti.UI.iPad" platform="ios" formFactor="tablet">
<Button id="cancel" onClick="PickerButtonClick">Cancel</Button>
<Button id="done" onClick="PickerButtonClick">Done</Button>
<Picker id="picker"/>
<Popover id='popover' ns="Ti.UI.iPad" platform="ios" formFactor="tablet" onHide="hidePopOver">
<ContentView id='insidePopover'>
<NavigationWindow id='naviPopover'>
<Window id='winPopover'>
<LeftNavButton id="cancel" onClick="PickerButtonClick" title="Cancel"/>
<RightNavButton id="done" onClick="PickerButtonClick" title="Done"/>
<Picker id="picker"/>
</Window>
</NavigationWindow>
</ContentView>
</Popover>

<View id="pickerview" platform="ios" formFactor="handheld">
Expand Down

0 comments on commit dfadd78

Please sign in to comment.