LimeJS 的 lime.ui.Scroller 沒有 ScrollBar！

lime.ui.Scroller 預設只能用游標按下拖拉滑動，比較像是觸控螢幕的使用行為，但是桌機還是比較習慣用 ScrollBar 啊！

goog.provide('silent');

goog.require('lime.Director');
goog.require('lime.Scene');
goog.require('lime.Layer');
goog.require('lime.ui.Scroller');
goog.require('lime.scheduleManager');

silent.start = function() {

  var director = new lime.Director(document.body, 1024, 768);
  var scene = new lime.Scene();

  // 加上向左 scroll 的功能
  var left = new lime.Sprite().setAnchorPoint(0,0).setPosition(0,0).setSize(30,30).setFill('#0c0');
  scene.appendChild(left);
  // 游標移上後，連續向左 scroll
  $(left.getDeepestDomElement()).mouseenter(function(){
    lime.scheduleManager.scheduleWithDelay(silent.scrollLeft, scroller, 100);
  });
  $(left.getDeepestDomElement()).mouseleave(function(){
    lime.scheduleManager.unschedule(silent.scrollLeft, scroller);
  });

  // 加上向右 scroll 的功能
  var right = new lime.Sprite().setAnchorPoint(0,0).setPosition(330,0).setSize(30,30).setFill('#0c0');
  scene.appendChild(right);
  // 游標移上後，連續向右 scroll
  $(right.getDeepestDomElement()).mouseenter(function(){
    lime.scheduleManager.scheduleWithDelay(silent.scrollRight, scroller, 100);
  });
  $(right.getDeepestDomElement()).mouseleave(function(){
    lime.scheduleManager.unschedule(silent.scrollRight, scroller);
  });
  
  // 加上 scroller
  var scroller = new lime.ui.Scroller().setAnchorPoint(0,0).setPosition(30,0).setSize(300,30).setDirection(lime.ui.Scroller.Direction.HORIZONTAL);
  scene.appendChild(scroller);
  for (var i=0; i<20; i++) {
    var block = new lime.Sprite().setAnchorPoint(0,0).setPosition(i*30+2,2).setSize(26,26).setFill(i*10,i*10,i*10);
    scroller.appendChild(block);
  }
  
  director.makeMobileWebAppCapable();
  director.replaceScene(scene);

};

silent.scrollLeft = function() {
  // 抽出共用的 silent.scroll
  // 但是 silent.scrollLeft 或 silent.scrollRight 裡的 this 很重要
  // 指的是呼叫 scheduleWithDelay 時傳進去的第二個參數，也就是執行第一個參數的 context 物件
  // 就是 scroller，用來操作 scroll 的動作
  // 但是在抽出時，不使用 call 或 apply 的話，會導致 silent.scroll 裡的 this 不是 silent.scrollLeft 裡的 this
  // 那就傷腦筋了
  silent.scroll.call(this, true);
};

silent.scrollRight = function() {
  silent.scroll.call(this, false);
};

silent.scroll = function(leftOrRight) {
  // 這是座標
  var x = this.moving_.getPosition().x;

  // 接下來是很重要的地方
  // 透過 moving_.getPosition() 得到的是 moving_ 的左上角座標
  // 這個座標和 scroll 的位置是不一樣的東西
  // 舉例說，以 x 軸來看，當 scroll 到 100 時，這時 moving_ 的 x 座標是 -100
  // 就是說，scroll 到 100，等於將 100 移到本來 0 的位置，那原本的 0 就會移到 -100
  
  // 正負互轉後，座標變成 scroll 的位置
  x = -x;
  if (leftOrRight) {
    x -= 10;
  }
  else {
    x += 10;
  }
  this.scrollTo(x);
};

goog.exportSymbol('silent.start', silent.start);

噹，完成！

---