【5日目】イベントリスナーを多様せずにスライドメニューのUI実装する方法

app.js

var Controller, controller, rowLabels, state, tab, tab1, tab1State, tab2, tab2State, tab3, tab3State, tabGroup, table, win;

Controller = require("controller");
tab1State = require("tab1State");
tab2State = require("tab2State");
tab3State = require("tab3State");

state = {
  "default": 1,
  slide: 2,
  end: 3
};

controller = new Controller();

Ti.App.Properties.setBool("state", state["default"]);

win = Ti.UI.createWindow({
  title: "main",
  backgroundColor: "#FFF"
});

rowLabels = [
  {
    title: "Row 1"
  }, {
    title: "Row 2"
  }, {
    title: "Row 3"
  }, {
    title: "Row 4"
  }
];

table = Ti.UI.createTableView({
  backgroundColor: '#666',
  separatorColor: '#ccc',
  zIndex: 10,
  width: 320,
  left: 32,
  top: 0,
  data: rowLabels
});

win.add(table);

tab1 = Ti.UI.createView({
  width: 30,
  height: 120,
  left: 0,
  top: 0,
  backgroundColor: "#666",
  zIndex: 1
});

tab1.addEventListener('click', function(e) {
  return controller.handleEvent(state["default"]);
});

tab2 = Ti.UI.createView({
  width: 30,
  height: 120,
  left: 0,
  top: 120,
  backgroundColor: "#ededed",
  zIndex: 1
});

tab2.addEventListener('click', function(e) {
  return controller.handleEvent(state.slide);
});

tab3 = Ti.UI.createView({
  width: 30,
  height: 120,
  left: 0,
  top: 240,
  backgroundColor: "#999",
  zIndex: 1
});

tab3.addEventListener('click', function(e) {
  return controller.handleEvent(state.end);
});

win.add(tab1);

win.add(tab2);

win.add(tab3);

tabGroup = Ti.UI.createTabGroup();

tab = Ti.UI.createTab({
  window: win
});

tabGroup.addTab(tab);

tabGroup.open();

controller.js

var Controller;

Controller = (function() {

  function Controller() {
    this.state = new tab1State();
  }

  Controller.prototype.handleEvent = function(event) {
    Ti.API.info(event);
    if (event === state["default"]) {
      return this.state = this.state.selectTab1();
    } else if (event === state.slide) {
      return this.state = this.state.selectTab2();
    } else {
      return this.state = this.state.selectTab3();
    }
  };

  return Controller;

})();

module.exports = Controller;

tab1State.js

var tab1State;

tab1State = (function() {

  function tab1State() {}

  tab1State.prototype.selectTab1 = function() {
    Ti.API.info("この状態では何もしない");
    return new tab1State();
  };

  tab1State.prototype.selectTab2 = function() {
    table.animate({
      duration: 300,
      left: 320,
      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    }, function() {
      table.backgroundColor = "#ededed";
      return table.animate({
        duration: 400,
        left: 30,
        curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
      });
    });
    return new tab2State();
  };

  tab1State.prototype.selectTab3 = function() {
    table.animate({
      duration: 300,
      left: 320,
      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    }, function() {
      table.backgroundColor = "#999";
      return table.animate({
        duration: 400,
        left: 30,
        curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
      });
    });
    return new tab3State();
  };

  return tab1State;

})();

module.exports = tab1State;

tab2State.js

var tab2State;

tab2State = (function() {

  function tab2State() {}

  tab2State.prototype.selectTab1 = function() {
    table.animate({
      duration: 300,
      left: 320,
      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    }, function() {
      table.backgroundColor = "#666";
      return table.animate({
        duration: 400,
        left: 30,
        curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
      });
    });
    return new tab1State();
  };

  tab2State.prototype.selectTab2 = function() {
    Ti.API.info("この状態では何もしない");
    return new tab2State();
  };

  tab2State.prototype.selectTab3 = function() {
    table.animate({
      duration: 300,
      left: 320,
      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    }, function() {
      table.backgroundColor = "#999";
      return table.animate({
        duration: 400,
        left: 30,
        curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
      });
    });
    return new tab3State();
  };

  return tab2State;

})();

module.exports = tab2State;

tab3State.js

var tab3State;

tab3State = (function() {

  function tab3State() {}

  tab3State.prototype.selectTab1 = function() {
    table.animate({
      duration: 300,
      left: 320,
      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    }, function() {
      table.backgroundColor = "#666";
      return table.animate({
        duration: 400,
        left: 30,
        curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
      });
    });
    return new tab1State();
  };

  tab3State.prototype.selectTab2 = function() {
    table.animate({
      duration: 300,
      left: 320,
      curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
    }, function() {
      table.backgroundColor = "#ededed";
      return table.animate({
        duration: 400,
        left: 30,
        curve: Ti.UI.ANIMATION_CURVE_EASE_IN_OUT
      });
    });
    return new tab2State();
  };

  tab3State.prototype.selectTab3 = function() {
    Ti.API.info("この状態では何もしない");
    return new tab3State();
  };

  return tab3State;

})();

module.exports = tab3State;