1 /**
  2  * progressbar ui
  3  * @author yiminghe@gmail.com
  4  */
  5 KISSY.add("editor/plugin/progressbar/index", function(S) {
  6 
  7     var DOM = S.DOM,Node = S.Node;
  8 
  9     function ProgressBar() {
 10         ProgressBar.superclass.constructor.apply(this, arguments);
 11         this._init();
 12     }
 13 
 14     ProgressBar.ATTRS = {
 15         container:{},
 16         width:{},
 17         height:{},
 18         //0-100
 19         progress:{
 20             value:0
 21         }
 22     };
 23     S.extend(ProgressBar, S.Base, {
 24         destroy:function() {
 25             var self = this;
 26             self.detach();
 27             self.el.remove();
 28         },
 29         _init:function() {
 30             var self = this,
 31                 h = self.get("height"),
 32                 el = new Node("<div" +
 33                     " class='ks-editor-progressbar' " +
 34                     " style='width:" +
 35                     self.get("width") +
 36                     ";" +
 37                     "height:" +
 38                     h +
 39                     ";'" +
 40                     "></div>"),
 41                 container = self.get("container"),
 42                 p = new Node(
 43                     "<div style='overflow:hidden;'>" +
 44                         "<div class='ks-editor-progressbar-inner' style='height:" + (parseInt(h) - 4) + "px'>" +
 45                         "<div class='ks-editor-progressbar-inner-bg'></div>" +
 46                         "</div>" +
 47                         "</div>"
 48                 ).appendTo(el),
 49                 title = new Node("<span class='ks-editor-progressbar-title'></span>").appendTo(el);
 50             if (container)
 51                 el.appendTo(container);
 52             self.el = el;
 53             self._title = title;
 54             self._p = p;
 55             self.on("afterProgressChange", self._progressChange, self);
 56             self._progressChange({newVal:self.get("progress")});
 57         },
 58 
 59         _progressChange:function(ev) {
 60             var self = this,
 61                 v = ev.newVal;
 62             self._p.css("width", v + "%");
 63             self._title.html(v + "%");
 64         }
 65     });
 66    return ProgressBar;
 67 });