Permalink
Browse files

Refactored tabbed bar

  • Loading branch information...
1 parent 6e04cd9 commit fc693e06f9075bad50a99814aa14a96566968fe7 @trabianmatt trabianmatt committed May 9, 2012
View
@@ -1,6 +1,6 @@
{
"name": "titanium-backbone",
- "version": "0.2.2",
+ "version": "0.2.3",
"homepage": "https://github.com/trabian/titanium-backbone",
"description": "Framework for Titanium apps built with Backbone",
"dependencies": {
@@ -9,3 +9,11 @@ module.exports = class ViewPresenterList extends Backbone.Collection
fetch: (options = {}) =>
@trigger 'reset'
options.success? @
+
+ selectOne: (selected) =>
+
+ @each (presenter) ->
+ presenter.set
+ selected: presenter is selected
+
+ @trigger 'select', selected
@@ -1,89 +0,0 @@
-styles = require('styles').ui.tabbedBar
-
-View = require 'views/base'
-
-ViewPresenter = require 'presenters/view'
-
-# Platform Independent Tabbed Bar
-#
-# Creates a bar of buttons that maintains a
-# selected state
-#
-# Takes akes an array of labels on view creation,
-# but will also take an object that has an icon, like:
-# new TabbedBar
-# labels: [ 'First', {title :'Second', icon: '/images/second.png'} ]
-# index: 0
-
-module.exports = class TabbedBar extends View
-
- attributes: styles.view
-
- initialize: ->
-
- @presenter = new ViewPresenter
- currentIndex: @options.index
-
- render: =>
- wrapper = @make 'View', styles.wrapper
-
- @view.add wrapper
-
- count = @options.labels.length
-
- width = (100 / count) - 0.3
-
- index = 0
-
- for label in @options.labels
-
- unless index is 0
- wrapper.add @make 'View', styles.divider
-
- wrapper.add @renderLabel label, width, index++
- @
-
- renderLabel: (label, width, index) =>
-
- wrapper = @make 'View', styles.label.inactive,
- width: "#{width}%"
-
- text = if _.isString label
- label
- else
- label.title
-
- labelView = @make 'Label', styles.label.text,
- text: text
-
- if _.isObject(label) && label.icon?
- wrapper.add @make 'View', styles.label.icon,
- backgroundImage: label.icon
-
- # offset the label for the icon
- labelView.left = 20
-
- wrapper.add labelView
-
- updateState= =>
-
- if index is @presenter.get 'currentIndex'
- wrapper.backgroundGradient = styles.label.active.backgroundGradient
- else
- wrapper.backgroundGradient = styles.label.inactive.backgroundGradient
-
- @bindTo @presenter, 'change:currentIndex', updateState
-
- updateState()
-
- wrapper.addEventListener 'click', =>
-
- @presenter.set
- currentIndex: index
-
- # this appears not to work...
- @trigger 'click', index
-
- return
-
- wrapper
@@ -0,0 +1,42 @@
+styles = require('styles').ui.tabbedBar
+
+CollectionView = require 'views/base/collection'
+
+TabbedBarLabel = require './label'
+
+ViewPresenter = require 'presenters/view'
+
+# Platform Independent Tabbed Bar
+#
+# Creates a bar of buttons that maintains a
+# selected state
+#
+# Takes akes an array of labels on view creation,
+# but will also take an object that has an icon, like:
+# new TabbedBar
+# labels: [ 'First', {title :'Second', icon: '/images/second.png'} ]
+# index: 0
+
+module.exports = class TabbedBar extends CollectionView
+
+ attributes: styles.view
+
+ addAll: =>
+
+ @view.add @wrapper = @make 'View', styles.wrapper
+
+ @width = (100 / @collection.length) - 0.3
+
+ super
+
+ addOne: (presenter, index) =>
+
+ @wrapper.add (new TabbedBarLabel
+ presenter: presenter
+ controller: @controller
+ style:
+ width: "#{@width}%"
+ ).render().view
+
+ if index
+ @wrapper.add @make 'View', styles.divider
@@ -0,0 +1,35 @@
+styles = require('styles').ui.tabbedBar.label
+
+View = require 'views/base'
+
+module.exports = class TabbedBarLabel extends View
+
+ attributes: styles.inactive
+
+ events: =>
+ click: =>
+ @presenter.collection.selectOne @presenter
+
+ initialize: ->
+
+ @bindToAndTrigger @presenter, 'change:selected', =>
+ @updateState @presenter.get 'selected'
+
+ updateState: (selected) =>
+
+ gradientStyle = if selected then 'active' else 'inactive'
+
+ @view.backgroundGradient = styles[gradientStyle].backgroundGradient
+
+ render: =>
+
+ if icon = @presenter.get 'icon'
+
+ @view.add @make 'View', styles.icon,
+ backgroundImage: icon
+
+ @view.add @make 'Label', styles.text,
+ text: @presenter.get 'label'
+ left: 20 if icon
+
+ @

0 comments on commit fc693e0

Please sign in to comment.