Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

mobile option for Pulldown.UI

  • Loading branch information...
commit b5c7aad0cd920f8e1dc6d32ed54bb713ab372a7d 1 parent 4728120
@jcarrig jcarrig authored
View
4 src/css/menu.css
@@ -60,3 +60,7 @@
background-color:#e9d4c7;
text-decoration:none;
}
+
+.menu select.mobile {
+ opacity:0;
+}
View
4 src/css/text_field.css
@@ -28,4 +28,8 @@
border:0;
outline:none;
font-size:13px;
+ margin:0;
+ -moz-box-sizing:border-box;
+ -webkit-box-sizing:border-box;
+ box-sizing:border-box;
}
View
64 src/js/menu.js
@@ -25,32 +25,56 @@
this._observeModel(this.render);
this._observeCollection(this.render);
- // create a new list of items
- var list = $.el.ul();
+ if(!this.options.mobile){
+ // create a new list of items
+ var list = $.el.ul();
- // add entry for the empty model if it exists
- if(!!this.options.emptyItem) {
- this._addItemToMenu(list, this.options.emptyItem);
- }
+ // add entry for the empty model if it exists
+ if(!!this.options.emptyItem) {
+ this._addItemToMenu(list, this.options.emptyItem);
+ }
- var selectedItem = this._determineSelectedItem();
+ var selectedItem = this._determineSelectedItem();
- _(this._collectionArray()).each(function(item) {
- var selectedValue = this._valueForItem(selectedItem);
- var itemValue = this._valueForItem(item);
- this._addItemToMenu(list, item, _(selectedValue).isEqual(itemValue));
- }, this);
+ _(this._collectionArray()).each(function(item) {
+ var selectedValue = this._valueForItem(selectedItem);
+ var itemValue = this._valueForItem(item);
+ this._addItemToMenu(list, item, _(selectedValue).isEqual(itemValue));
+ }, this);
- // wrap them up in a scroller
- this.scroller = new Backbone.UI.Scroller({
- content : list
- }).render();
+ // wrap them up in a scroller
+ this.scroller = new Backbone.UI.Scroller({
+ content : list
+ }).render();
- // Prevent scroll events from percolating out to the enclosing doc
- $(this.scroller.el).bind('mousewheel', function(){return false;});
- $(this.scroller.el).addClass('menu_scroller');
+ // Prevent scroll events from percolating out to the enclosing doc
+ $(this.scroller.el).bind('mousewheel', function(){return false;});
+ $(this.scroller.el).addClass('menu_scroller');
- this.el.appendChild(this.scroller.el);
+ this.el.appendChild(this.scroller.el);
+ }
+ else {
+
+ this.select = $.el.select({className : 'mobile'});
+
+ _(this._collectionArray()).each(function(item){
+ this.select.appendChild($.el.option({value : this._valueForItem(item)},
+ this._labelForItem(item)));
+ }, this);
+
+ $(this.select).val(this._valueForItem(this._determineSelectedItem()));
+
+ $(this.select).change(_(function(){
+ var itemValue = $(this.select).val();
+ var itemLabel = $('option:selected', this.select).text();
+ var item = {};
+ item[this.options.altLabelContent] = itemLabel;
+ item[this.options.altValueContent] = itemValue;
+ this._setSelectedItem(_(item).isEqual(this.options.emptyItem) ? null : item);
+ }).bind(this));
+
+ this.el.appendChild(this.select);
+ }
return this;
},
View
45 src/js/pulldown.js
@@ -23,7 +23,10 @@
// an additional item to render at the top of the menu to
// denote the lack of a selection
- emptyItem : null
+ emptyItem : null,
+
+ // Set mobile to true for iOS device compatibility
+ mobile : false
},
initialize : function() {
@@ -56,20 +59,26 @@
render : function() {
$(this.el).empty();
-
+
this._observeModel(this.render);
this._observeCollection(this.render);
- var item = this._menu.selectedItem;
- var label = this._labelForItem(item);
- this.button = new Backbone.UI.Button({
- className : item ? 'pulldown_button' : 'pulldown_button placeholder',
- model : {label : this._labelForItem(item)},
- content : 'label',
- onClick : _.bind(this.showMenu, this)
- }).render();
- this.el.appendChild(this.button.el);
-
+
+ //if(!this.options.mobile) {
+ var item = this._menu.selectedItem;
+ var label = this._labelForItem(item);
+ this.button = new Backbone.UI.Button({
+ className : item ? 'pulldown_button' : 'pulldown_button placeholder',
+ model : {label : this._labelForItem(item)},
+ content : 'label',
+ onClick : this.options.mobile ? _(this.tapMenu).bind(this) : _(this.showMenu).bind(this)
+ }).render();
+ this.el.appendChild(this.button.el);
+ // }
+ // else {
+ // $(this._menu.el).show();
+ // }
+
return this;
},
@@ -109,6 +118,18 @@
if(this.options.onMenuShow) this.options.onMenuShow(e);
this._menu.scrollToSelectedItem();
},
+
+ //forces the menu to show for mobile
+ tapMenu : function(e) {
+ var anchor = this.button.el;
+ var showOnTop = $(window).height() - ($(anchor).offset().top - document.body.scrollTop) < 150;
+ var position = (this.options.alignRight ? '-right' : '-left') + (showOnTop ? 'top' : ' bottom');
+ $(this._menu.el).alignTo(anchor, position, 0, 1);
+ $(this._menu.el).show();
+ //if(this.options.onMenuShow) this.options.onMenuShow(e);
+ $(this._menu.select).focus();
+ // this._menu.scrollToSelectedItem();
+ },
_onItemSelected : function(item) {
if(!!this.button) {
View
3  src/js/text_field.js
@@ -35,7 +35,7 @@
this.input = $.el.input({maxLength : this.options.maxLength});
- $(this.input).keyup(_(function(e) {
+ $(this.input).input(_(function(e) {
if(_(this.options.onKeyPress).exists() && _(this.options.onKeyPress).isFunction()) {
this.options.onKeyPress(e, this);
}
@@ -58,6 +58,7 @@
id : this.options.name,
tabIndex : this.options.tabIndex,
placeholder : this.options.placeholder,
+ pattern : this.options.pattern,
value : value});
// insert text_wrapper
Please sign in to comment.
Something went wrong with that request. Please try again.