Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: ofl/TiLeftMenu
base: dbc74df727
...
head fork: ofl/TiLeftMenu
compare: 0bef46705a
  • 2 commits
  • 12 files changed
  • 0 commit comments
  • 1 contributor
Commits on Apr 27, 2012
@ofl add yellow page d4f93b4
Commits on Apr 28, 2012
@ofl fix _switchWindow() 0bef467
View
6 Resources/app.js
@@ -1,5 +1,5 @@
(function() {
- var win;
- win = new (require('ui/TabGroup'))();
- win.open();
+ var tabGroup;
+ tabGroup = new (require('ui/TabGroup'))();
+ tabGroup.open();
})();
View
164 Resources/ui/TabGroup.js
@@ -8,80 +8,106 @@ trace = function(mes) {
mix = (require('helpers/util')).mix;
TabGroup = (function() {
function TabGroup() {
- var currentTabIndex, i_, isOpendMenu, isOpened, menuWindow, nextTabIndex, offset, tab, tabGroup, tabs, touchStartX, touchStarted, win, windowDir, _catchBubble, _i, _len, _len2, _switchTab, _toggleMenu, _touchHandler;
+ var index, maskView, menuWindow, offsetWidth, pages, tabGroup, tabs, touchStartX, touchStarted, _addWindowEvent, _catchBubble, _switchWindow, _toggleOpenMenu, _touchHandler;
trace("start constructor");
- windowDir = ['red', 'blue'];
- tabs = [];
- currentTabIndex = 0;
- nextTabIndex = 0;
- offset = 260;
- isOpened = false;
+ pages = [
+ {
+ title: 'Red',
+ dir: 'red',
+ option: {}
+ }, {
+ title: 'Blue(A)',
+ dir: 'blue',
+ option: {
+ name: 'A'
+ }
+ }, {
+ title: 'Blue(B)',
+ dir: 'blue',
+ option: {
+ name: 'B'
+ }
+ }, {
+ title: 'Yellow',
+ dir: 'yellow',
+ option: {}
+ }
+ ];
+ offsetWidth = 260;
+ tabs = {};
+ index = 0;
touchStartX = 0;
touchStarted = false;
- isOpendMenu = false;
- menuWindow = new (require("" + dir + "/menu/Window"))();
- menuWindow.open();
- for (i_ = 0, _len = windowDir.length; i_ < _len; i_++) {
- win = windowDir[i_];
- tabs.push(Ti.UI.createTab($$.tab));
- tabs[i_].window = new (require("" + dir + "/" + win + "/Window"))(tabs[i_]);
- tabs[i_].maskView = Ti.UI.createView({
- width: Ti.UI.FILL,
- height: Ti.UI.FILL,
- zIndex: 100,
- visible: false
- });
- tabs[i_].window.add(tabs[i_].maskView);
- if (i_ === 0) {
- tabs[0].window.refresh();
- }
- }
+ tabs[pages[index].dir] = Ti.UI.createTab($$.tab);
tabGroup = Ti.UI.createTabGroup(mix($$.tabGroup, {
- tabs: tabs,
- zIndex: 10
+ tabs: [tabs[pages[index].dir]],
+ zIndex: 10,
+ left: 0
}));
+ tabs[pages[index].dir].window = new (require("" + dir + "/" + pages[index].dir + "/Window"))(tabs[pages[index].dir]);
+ menuWindow = new (require("" + dir + "/menu/Window"))();
+ menuWindow.open();
+ maskView = Ti.UI.createView({
+ width: Ti.UI.FILL,
+ height: Ti.UI.FILL,
+ zIndex: 100,
+ visible: false
+ });
_catchBubble = function(e) {
- if (e.btype === 'didSelectView') {
- nextTabIndex = e.boptions.index;
- if (nextTabIndex === currentTabIndex) {
- _toggleMenu('left', true);
- } else {
- _switchTab(nextTabIndex);
- }
- tabs[currentTabIndex].maskView.visible = false;
- } else if (e.btype === 'showMenu') {
- _toggleMenu('left', isOpendMenu);
- tabs[currentTabIndex].maskView.visible = true;
+ var nextIndex;
+ switch (e.btype) {
+ case 'showMenu':
+ _toggleOpenMenu();
+ maskView.visible = true;
+ break;
+ case 'didSelectMenu':
+ nextIndex = e.boptions.index;
+ if (nextIndex === index) {
+ _toggleOpenMenu(true);
+ } else if (pages[nextIndex].dir === pages[index].dir) {
+ tabs[pages[nextIndex].dir].window.refresh(pages[nextIndex].option);
+ _toggleOpenMenu(true);
+ index = nextIndex;
+ } else {
+ _switchWindow(nextIndex);
+ }
+ maskView.visible = false;
}
};
- _toggleMenu = function(direction, isOpened) {
+ _toggleOpenMenu = function() {
var left;
- if (direction === 'left') {
- left = !isOpened && offset || 0;
- } else {
- left = !isOpened && -offset || 0;
- }
+ left = tabGroup.left < 100 ? offsetWidth : 0;
tabGroup.animate(mix($$.animation, {
left: left
}), function() {
- isOpendMenu = !isOpened;
+ tabGroup.left = left;
});
};
- _switchTab = function(nextTabIndex) {
- var animation;
- animation = {
+ _switchWindow = function(nextIndex) {
+ var a;
+ a = {
left: 320,
curve: Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT,
duration: 300
};
- tabGroup.animate(animation, function() {
- tabs[nextTabIndex].window.refresh();
- tabGroup.setActiveTab(nextTabIndex);
+ tabGroup.animate(a, function() {
+ var d;
+ tabs[pages[index].dir].window.remove(maskView);
+ d = pages[nextIndex].dir;
+ if (typeof tabs[d] === 'undefined') {
+ tabs[d] = Ti.UI.createTab($$.tab);
+ tabs[d].window = new (require("" + dir + "/" + pages[nextIndex].dir + "/Window"))(tabs[d]);
+ tabs[d].window.refresh(pages[nextIndex].option);
+ tabGroup.addTab(tabs[d]);
+ _addWindowEvent(nextIndex);
+ }
+ tabs[d].window.add(maskView);
+ tabGroup.setActiveTab(tabs[d]);
tabGroup.animate(mix($$.animation, {
left: 0
}), function() {
- currentTabIndex = nextTabIndex;
- isOpendMenu = false;
+ index = nextIndex;
+ tabGroup.left = 0;
});
});
};
@@ -96,7 +122,7 @@ TabGroup = (function() {
x = parseInt(e.globalPoint.x, 10);
newLeft = x - touchStartX;
if (touchStarted) {
- if (newLeft <= offset) {
+ if (newLeft <= offsetWidth) {
tabGroup.left = newLeft;
}
}
@@ -109,34 +135,36 @@ TabGroup = (function() {
touchStarted = false;
if (tabGroup.left >= 140) {
tabGroup.animate(mix($$.animation, {
- left: offset
+ left: offsetWidth
}), function() {
- tabs[currentTabIndex].maskView.visible = true;
- return isOpendMenu = true;
+ maskView.visible = true;
+ tabGroup.left = offsetWidth;
});
} else {
tabGroup.animate(mix($$.animation, {
left: 0
}), function() {
- isOpendMenu = false;
- return tabs[currentTabIndex].maskView.visible = false;
+ maskView.visible = false;
+ tabGroup.left = 0;
});
}
}
};
+ _addWindowEvent = function(idx) {
+ var w;
+ w = tabs[pages[idx].dir].window;
+ w.addEventListener('bubble', _catchBubble);
+ w.addEventListener('touchstart', _touchHandler);
+ w.addEventListener('touchmove', _touchHandler);
+ w.addEventListener('touchend', _touchHandler);
+ };
menuWindow.addEventListener('bubble', _catchBubble);
- for (_i = 0, _len2 = tabs.length; _i < _len2; _i++) {
- tab = tabs[_i];
- win = tab.window;
- win.addEventListener('bubble', _catchBubble);
- win.addEventListener('touchstart', _touchHandler);
- win.addEventListener('touchmove', _touchHandler);
- win.addEventListener('touchend', _touchHandler);
- }
tabGroup.addEventListener('open', function() {
- menuWindow.refresh();
+ menuWindow.refresh(pages);
menuWindow.visible = true;
});
+ _addWindowEvent(index);
+ tabs[pages[index].dir].window.refresh();
trace("end constructor");
return tabGroup;
}
View
15 Resources/ui/blue/Window.js
@@ -8,7 +8,7 @@ trace = function(mes) {
mix = (require('helpers/util')).mix;
Window = (function() {
function Window(tab) {
- var menuBtn, refresh, window, _bubble;
+ var label, menuBtn, refresh, window, _bubble;
trace("start constructor");
window = Ti.UI.createWindow(mix($$.window, {
title: "Blue",
@@ -16,7 +16,18 @@ Window = (function() {
}));
menuBtn = Ti.UI.createButton($$.menuBtn);
window.setLeftNavButton(menuBtn);
- refresh = function() {};
+ label = Ti.UI.createLabel({
+ right: 20,
+ width: 100,
+ height: 200,
+ font: {
+ fontSize: 128
+ }
+ });
+ window.add(label);
+ refresh = function(option) {
+ label.text = option.name;
+ };
_bubble = function(type, options, propagation, source) {
window.fireEvent('bubble', {
btype: type,
View
17 Resources/ui/menu/Window.js
@@ -20,18 +20,11 @@ BaseWindow = (function() {
backgroundColor: '#333'
}));
window.add(tableView);
- refresh = function() {
- var data, item, row, rows, _i, _len;
- data = [
- {
- title: 'Red'
- }, {
- title: 'Blue'
- }
- ];
+ refresh = function(pages) {
+ var item, row, rows, _i, _len;
rows = [];
- for (_i = 0, _len = data.length; _i < _len; _i++) {
- item = data[_i];
+ for (_i = 0, _len = pages.length; _i < _len; _i++) {
+ item = pages[_i];
row = Ti.UI.createTableViewRow({
title: item.title,
color: '#fff',
@@ -50,7 +43,7 @@ BaseWindow = (function() {
});
};
tableView.addEventListener('click', function(e) {
- _bubble('didSelectView', {
+ _bubble('didSelectMenu', {
index: e.index
});
});
View
38 Resources/ui/yellow/Window.js
@@ -0,0 +1,38 @@
+var $$, Window, dir, mix, mod, trace;
+dir = 'ui/yellow';
+mod = "" + dir + "/Window";
+$$ = (require("" + dir + "/style")).style;
+trace = function(mes) {
+ return Ti.API.info("" + mod + ":" + mes);
+};
+mix = (require('helpers/util')).mix;
+Window = (function() {
+ function Window(tab) {
+ var menuBtn, refresh, window, _bubble;
+ trace("start constructor");
+ window = Ti.UI.createWindow(mix($$.window, {
+ title: "Yellow",
+ backgroundColor: 'yellow'
+ }));
+ menuBtn = Ti.UI.createButton($$.menuBtn);
+ window.setLeftNavButton(menuBtn);
+ refresh = function() {};
+ _bubble = function(type, options, propagation, source) {
+ window.fireEvent('bubble', {
+ btype: type,
+ boptions: options || {},
+ bpropagation: typeof propagation === 'undefined' && true || propagation,
+ bsource: source || mod
+ });
+ };
+ menuBtn.addEventListener('click', function(e) {
+ _bubble('showMenu');
+ });
+ window.refresh = refresh;
+ trace("end constructor");
+ return window;
+ }
+ return Window;
+})();
+trace("end load");
+module.exports = Window;
View
5 Resources/ui/yellow/style.js
@@ -0,0 +1,5 @@
+var base, mix, style;
+base = (require('ui/style')).style;
+mix = (require('helpers/util')).mix;
+style = {};
+exports.style = mix(base, style);
View
4 coffee/app.coffee
@@ -1,4 +1,4 @@
do ->
- win = new (require 'ui/TabGroup')()
- win.open()
+ tabGroup = new (require 'ui/TabGroup')()
+ tabGroup.open()
return
View
156 coffee/ui/TabGroup.coffee
@@ -11,87 +11,97 @@ mix = (require 'helpers/util').mix
class TabGroup
constructor: ()->
- trace "start constructor"
+ trace "start constructor"
- # Local Variables
-
- windowDir = ['red', 'blue']
+ #configuration
+ pages = [
+ {title: 'Red', dir: 'red', option:{}}
+ {title: 'Blue(A)', dir: 'blue', option:{name:'A'}}
+ {title: 'Blue(B)', dir: 'blue', option:{name:'B'}}
+ {title: 'Yellow', dir: 'yellow', option:{}}
+ ]
+ offsetWidth = 260
- tabs = []
- currentTabIndex = 0
- nextTabIndex = 0
- offset = 260
+ # Local Variables
- isOpened = false
+ tabs = {} #tabs['red'], tabs['blue']
+ index = 0
touchStartX = 0
touchStarted = false
- isOpendMenu = false
# UI
- menuWindow = new (require "#{dir}/menu/Window")()
- menuWindow.open()
- for win, i_ in windowDir
- tabs.push Ti.UI.createTab $$.tab
- tabs[i_].window = new (require "#{dir}/#{win}/Window")(tabs[i_])
- tabs[i_].maskView = Ti.UI.createView
- width: Ti.UI.FILL
- height: Ti.UI.FILL
- zIndex: 100
- visible: false
- tabs[i_].window.add tabs[i_].maskView
- if i_ is 0
- tabs[0].window.refresh()
-
+ tabs[pages[index].dir] = Ti.UI.createTab $$.tab
tabGroup = Ti.UI.createTabGroup mix $$.tabGroup,
- tabs: tabs
+ tabs: [tabs[pages[index].dir]]
zIndex: 10
+ left: 0
+ tabs[pages[index].dir].window = new (require "#{dir}/#{pages[index].dir}/Window")(tabs[pages[index].dir])
+
+ menuWindow = new (require "#{dir}/menu/Window")()
+ menuWindow.open()
+
+ maskView = Ti.UI.createView
+ width: Ti.UI.FILL
+ height: Ti.UI.FILL
+ zIndex: 100
+ visible: false
+
# sh.Shadow tabGroup,
# shadowRadius: 2
# shadowOpacity: 0.6
- # shadowOffset: {x: -5, y: 5}
+ # shadowoffsetWidth: {x: -5, y: 5}
# Functions
-
+
_catchBubble = (e)->
- if e.btype is 'didSelectView'
- nextTabIndex = e.boptions.index
- if nextTabIndex is currentTabIndex
- _toggleMenu 'left', true
- else
- _switchTab nextTabIndex
- tabs[currentTabIndex].maskView.visible = false
- else if e.btype is 'showMenu'
- _toggleMenu 'left', isOpendMenu
- tabs[currentTabIndex].maskView.visible = true
+ switch e.btype
+ when 'showMenu'
+ _toggleOpenMenu()
+ maskView.visible = true
+
+ when 'didSelectMenu'
+ nextIndex = e.boptions.index
+ if nextIndex is index
+ _toggleOpenMenu true
+ else if pages[nextIndex].dir is pages[index].dir
+ tabs[pages[nextIndex].dir].window.refresh pages[nextIndex].option
+ _toggleOpenMenu true
+ index = nextIndex
+ else
+ _switchWindow nextIndex
+ maskView.visible = false
return
- _toggleMenu = (direction, isOpened)->
- if direction is 'left'
- left = !isOpened && offset || 0
- else
- left = !isOpened && -offset || 0
-
- tabGroup.animate mix($$.animation, left: left)
- , ()->
- isOpendMenu = !isOpened
- return
+ _toggleOpenMenu = ()->
+ left = if tabGroup.left < 100 then offsetWidth else 0
+ tabGroup.animate mix($$.animation, left: left), ()->
+ tabGroup.left = left
+ return
return
- _switchTab = (nextTabIndex)->
- animation =
+ _switchWindow = (nextIndex)->
+ a =
left: 320
curve: Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT
duration: 300
- tabGroup.animate animation, ()->
- tabs[nextTabIndex].window.refresh()
- tabGroup.setActiveTab nextTabIndex
+ tabGroup.animate a, ()->
+ tabs[pages[index].dir].window.remove maskView
+ d = pages[nextIndex].dir
+ if typeof tabs[d] is 'undefined'
+ tabs[d] = Ti.UI.createTab $$.tab
+ tabs[d].window = new (require "#{dir}/#{pages[nextIndex].dir}/Window")(tabs[d])
+ tabs[d].window.refresh pages[nextIndex].option
+ tabGroup.addTab tabs[d]
+ _addWindowEvent nextIndex
+ tabs[d].window.add maskView
+ tabGroup.setActiveTab tabs[d]
tabGroup.animate mix($$.animation, left: 0), ()->
- currentTabIndex = nextTabIndex
- isOpendMenu = false
+ index = nextIndex
+ tabGroup.left = 0
return
return
return
@@ -106,7 +116,7 @@ class TabGroup
x = parseInt e.globalPoint.x, 10
newLeft = x - touchStartX
if touchStarted
- if newLeft <= offset
+ if newLeft <= offsetWidth
tabGroup.left = newLeft
if newLeft > 30
touchStarted = true
@@ -114,31 +124,40 @@ class TabGroup
when 'touchend'
touchStarted = false
if tabGroup.left >= 140
- tabGroup.animate mix($$.animation, left: offset), ()->
- tabs[currentTabIndex].maskView.visible = true
- isOpendMenu = true
+ tabGroup.animate mix($$.animation, left: offsetWidth), ()->
+ maskView.visible = true
+ tabGroup.left = offsetWidth
+ return
else
tabGroup.animate mix($$.animation, left: 0), ()->
- isOpendMenu = false
- tabs[currentTabIndex].maskView.visible = false
+ maskView.visible = false
+ tabGroup.left = 0
+ return
return
+ _addWindowEvent = (idx)->
+ w = tabs[pages[idx].dir].window
+ w.addEventListener 'bubble', _catchBubble
+ w.addEventListener 'touchstart', _touchHandler
+ w.addEventListener 'touchmove', _touchHandler
+ w.addEventListener 'touchend', _touchHandler
+ return
# Event Listeners
menuWindow.addEventListener 'bubble', _catchBubble
- for tab in tabs
- win = tab.window
- win.addEventListener 'bubble', _catchBubble
- win.addEventListener 'touchstart', _touchHandler
- win.addEventListener 'touchmove', _touchHandler
- win.addEventListener 'touchend', _touchHandler
-
tabGroup.addEventListener 'open', ()->
- menuWindow.refresh()
+ menuWindow.refresh pages
menuWindow.visible = true #起動時ちらつき防止のため
return
+
+
+ # Disclose
+
+ # Load
+ _addWindowEvent index
+ tabs[pages[index].dir].window.refresh()
trace "end constructor"
@@ -147,4 +166,3 @@ class TabGroup
trace "end load"
module.exports = TabGroup
-
View
17 coffee/ui/blue/Window.coffee
@@ -20,12 +20,19 @@ class Window
menuBtn = Ti.UI.createButton $$.menuBtn
window.setLeftNavButton menuBtn
-
- # Functions
-
-
- refresh = ()->
+ label = Ti.UI.createLabel
+ right: 20
+ width: 100
+ height: 200
+ font:{fontSize:128}
+ window.add label
+
+
+ # Functions
+
+ refresh = (option)->
+ label.text = option.name
return
_bubble = (type, options, propagation, source)->
View
15 coffee/ui/menu/Window.coffee
@@ -28,23 +28,20 @@ class BaseWindow
backgroundColor: '#333'
window.add tableView
-
+
# Functions
- refresh = ()->
+ refresh = (pages)->
# window.visible = true
-
- data = [
- {title: 'Red'}
- {title: 'Blue'}
- ]
+
rows = []
- for item in data
+ for item in pages
row = Ti.UI.createTableViewRow
title: item.title
color: '#fff'
height: 40
+
rows.push row
tableView.setData rows
@@ -62,7 +59,7 @@ class BaseWindow
# Event Listeners
tableView.addEventListener 'click', (e)->
- _bubble 'didSelectView', index: e.index
+ _bubble 'didSelectMenu', {index: e.index}
return
# Disclose
View
57 coffee/ui/yellow/Window.coffee
@@ -0,0 +1,57 @@
+# Shortcuts
+
+dir = 'ui/yellow'
+mod = "#{dir}/Window"
+
+$$ = (require "#{dir}/style").style
+trace = (mes)-> Ti.API.info "#{mod}:#{mes}"
+mix = (require 'helpers/util').mix
+
+class Window
+ constructor: (tab)->
+ trace "start constructor"
+
+
+ # UI
+
+ window = Ti.UI.createWindow mix $$.window,
+ title: "Yellow"
+ backgroundColor: 'yellow'
+
+ menuBtn = Ti.UI.createButton $$.menuBtn
+ window.setLeftNavButton menuBtn
+
+
+ # Functions
+
+
+ refresh = ()->
+ return
+
+ _bubble = (type, options, propagation, source)->
+ window.fireEvent 'bubble',
+ btype: type
+ boptions: options || {}
+ bpropagation: typeof propagation == 'undefined' && true || propagation
+ bsource: source || mod
+ return
+
+
+ # Event Listeners
+
+ menuBtn.addEventListener 'click', (e)->
+ _bubble 'showMenu'
+ return
+
+
+ # Disclose
+
+ window.refresh = refresh
+
+ trace "end constructor"
+ return window
+
+trace "end load"
+
+module.exports = Window
+
View
6 coffee/ui/yellow/style.coffee
@@ -0,0 +1,6 @@
+base = (require 'ui/style').style
+mix = (require 'helpers/util').mix
+
+style = {}
+
+exports.style = mix base, style

No commit comments for this range

Something went wrong with that request. Please try again.