add yellow page

Resources/ui/TabGroup.js

@@ -8,80 +8,108 @@ 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 currentPage, isOpen, maskView, menuWindow, offsetWidth, pages, refresh, tabGroup, touchStartX, touchStarted, _addWindow, _catchBubble, _removeWindow, _switchWindow, _toggleMenu, _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: {}
+      }
+    ];
+    currentPage = 0;
+    offsetWidth = 260;
+    isOpen = false;
     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();
-      }
-    }
     tabGroup = Ti.UI.createTabGroup(mix($$.tabGroup, {
-      tabs: tabs,
+      tabs: [Ti.UI.createTab($$.tab)],
       zIndex: 10
     }));
+    tabGroup.tabs[0].window = new (require("" + dir + "/" + pages[currentPage].dir + "/Window"))(tabGroup.tabs[0]);
+    menuWindow = new (require("" + dir + "/menu/Window"))();
+    menuWindow.open();
+    maskView = Ti.UI.createView({
+      width: Ti.UI.FILL,
+      height: Ti.UI.FILL,
+      zIndex: 100,
+      visible: false
+    });
+    refresh = function() {
+      _addWindow();
+      tabGroup.tabs[0].window.refresh();
+    };
     _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 nextPage;
+      switch (e.btype) {
+        case 'showMenu':
+          _toggleMenu('left', isOpen);
+          maskView.visible = true;
+          break;
+        case 'didSelectView':
+          nextPage = e.boptions.index;
+          if (nextPage === currentPage) {
+            _toggleMenu('left', true);
+          } else if (pages[nextPage].dir === pages[currentPage].dir) {
+            tabGroup.tabs[0].window.refresh(pages[nextPage].option);
+            _toggleMenu('left', true);
+            currentPage = nextPage;
+          } else {
+            _switchWindow(nextPage);
+          }
+          maskView.visible = false;
       }
     };
-    _toggleMenu = function(direction, isOpened) {
+    _toggleMenu = function(direction, isOpen) {
       var left;
       if (direction === 'left') {
-        left = !isOpened && offset || 0;
+        left = !isOpen && offsetWidth || 0;
       } else {
-        left = !isOpened && -offset || 0;
+        left = !isOpen && -offsetWidth || 0;
       }
       tabGroup.animate(mix($$.animation, {
         left: left
       }), function() {
-        isOpendMenu = !isOpened;
+        isOpen = !isOpen;
       });
     };
-    _switchTab = function(nextTabIndex) {
+    _switchWindow = function(nextPage) {
       var animation;
       animation = {
         left: 320,
         curve: Ti.UI.iOS.ANIMATION_CURVE_EASE_OUT,
         duration: 300
       };
       tabGroup.animate(animation, function() {
-        tabs[nextTabIndex].window.refresh();
-        tabGroup.setActiveTab(nextTabIndex);
+        var tab;
+        _removeWindow();
+        tab = Ti.UI.createTab($$.tab);
+        tab.window = new (require("" + dir + "/" + pages[nextPage].dir + "/Window"))(tab);
+        tab.window.refresh(pages[nextPage].option);
+        tabGroup.setTabs([tab]);
+        _addWindow();
+        tabGroup.setActiveTab(tab);
         tabGroup.animate(mix($$.animation, {
           left: 0
         }), function() {
-          currentTabIndex = nextTabIndex;
-          isOpendMenu = false;
+          currentPage = nextPage;
+          isOpen = false;
         });
       });
     };
@@ -96,7 +124,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 +137,47 @@ 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;
+              return isOpen = true;
             });
           } else {
             tabGroup.animate(mix($$.animation, {
               left: 0
             }), function() {
-              isOpendMenu = false;
-              return tabs[currentTabIndex].maskView.visible = false;
+              isOpen = false;
+              return maskView.visible = false;
             });
           }
       }
     };
+    _addWindow = function() {
+      var w;
+      w = tabGroup.tabs[0].window;
+      w.add(maskView);
+      w.addEventListener('bubble', _catchBubble);
+      w.addEventListener('touchstart', _touchHandler);
+      w.addEventListener('touchmove', _touchHandler);
+      w.addEventListener('touchend', _touchHandler);
+    };
+    _removeWindow = function() {
+      var w;
+      w = tabGroup.tabs[0].window;
+      w.remove(maskView);
+      w.removeEventListener('bubble', _catchBubble);
+      w.removeEventListener('touchstart', _touchHandler);
+      w.removeEventListener('touchmove', _touchHandler);
+      w.removeEventListener('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;
     });
+    tabGroup.refresh = refresh;
+    _addWindow();
+    tabGroup.tabs[0].window.refresh();
     trace("end constructor");
     return tabGroup;
   }

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;

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);

coffee/app.coffee

@@ -1,4 +1,4 @@
 do ->
-  win = new (require 'ui/TabGroup')()
-  win.open()
+  tabGroup = new (require 'ui/TabGroup')()
+  tabGroup.open()
   return