[Script.aculo.us] Customize Effect

Script.aculo.us คือ javascript library
ที่ช่วยในการ ทำ Effect ต่างๆ
เช่น Fade, SlideDown, Highlight, ...

ช่่วงนี้ ผมอยู่ระหว่าง design UI ของโปรเจคใหม่อยู่
มี effect บางอย่างที่ผมต้องการ แต่ไม่มีอยู่ใน library ของ Script.aculo.us
ก็เลยต้องหาวิธีว่าจะ implement Effect ได้ง่ายๆได้อย่างไร
โชคดีที่ตัว library ของ Script.aculo.us ออกแบบมาดี
ทำให้เราสามารถ extend class เพือสร้าง customize effect ของเราได้

ตัวอย่างที่จะทำให้ดู ก็คือ Effect ที่ทำการ slide ในแนวนอน
ยกตัวอย่าง use case การใช้ ก็อย่างเช่น
ช่วยให้ web application เรามี navigation ด้านข้างที่สามารถเลื่อนแสดงหรือซ่อนได้



โดยผมกำหนด style sheet ของ sidebar และ content ดังนี้

#sidebar {
  width: 20%;
  height: 100%;
  background-color: #ccc;
  float: left;
}

#content {
  display:block;
  width: 99%;
  float:right;
}

เริ่มเขียน Effect โดยการ สร้าง class ขึ้นมาก่อน

Effect.BarSlide = Class.create();

จากนั้นก็สั่ง extend จาก class Effect.Base
(javascript ที่เขียนนี้ จะยึด pattern ตามที่ Prototype.js
วาง pattern ไว้)

Effect.BarSlide = Class.create();
Object.extend(Object.extend(Effect.BarSlide.prototype, Effect.Base.prototype), {
  // method (function) go here..
});

function หลักๆที่เราต้อง implement มีอยู่แค่ 2 function
คือ initialize กับ update

• function initlialize ทำหน้าที่เป็น constructor ของ class เรา
  โดยกำหนดให้ pass ค่า Object ID ของ content กับ sidebar เข้ามา
  รวมทั้งขนาดของ sidebar (ระบุเป็น % ของขนาดหน้าจอ)
  

    initialize: function(left, right, percent) {
      var options = arguments[3] || {};
      this.left = left;
      this.right = right;
      this.percent = percent;
      this.start(options);
    },

  
  บรรทัดสุดท้ายเป็นบรรทัดที่สั่งให้ effect เริ่มทำงาน
  ส่วน arguments[3] คือ optional argument เช่น
  ช่วงเวลาที่ใช้เลื่อน
  
• function update
  function นี้จะถูกเรียกใช้ตามจำนวน FPS (frame per second) * ช่วงเวลา (duration) ที่กำหนด
  โดยเรามีหน้าที่ render ว่า frame ณ จุดนั้นๆ มีหน้าตาเป็นอย่างไร
  ค่า parameter position ที่ pass เข้ามา จะอยู่ในช่วง 0 ถึง 1
  

    update: function(position) {
      var value = this.percent * position;
      $(this.left).style.width = value + "%";
      $(this.right).style.width = (100 - value) + "%";
      $(this.left).style.display = 'block';
    }

  จะเห็นว่าผมแค่สั่งเพ่ิมความกว้างของ slidebar กับ ลดความกว้างของตัว content ไปเรื่อยๆ
  โดยคิดเป็นอัตราส่วนตาม position ที่ pass เข้ามา
  

การนำไปใช้งาน ก็แค่สั่ง

function show() {
  new Effect.BarSlide('sidebar','content',20, {duration:0.5});
}