// Generated by CoffeeScript 2.0.0-beta4
(function() {
// ------------------------------------------------------------------------
// 變數與常數設置
// ------------------------------------------------------------------------
// 模組名稱。
var ClassName, EVENT_NAMESPACE, Error, Event, MODULE_NAMESPACE, NAME, Selector, Settings;
NAME = 'progress';
// 模組事件鍵名。
EVENT_NAMESPACE = `.${NAME}`;
// 模組命名空間。
MODULE_NAMESPACE = `module-${NAME}`;
// 模組設定。
Settings = {
// 消音所有提示,甚至是錯誤訊息。
silent: false,
// 顯示除錯訊息。
debug: true,
// 監聽 DOM 結構異動並自動重整快取。
observeChanges: true,
// 是否要在百分比達到 `100` 時,自動將進度條改為「成功」狀態。
autoSuccess: true,
// 緩衝條。
buffer: {
// 緩衝值。
value: 0
},
// 初始化的進度條值。
value: 0,
// 多個進度條的值。
// values
// 進度條的最大值,會以此作為百分比的推算。
total: 100,
// 是否要在進度條上顯示百分比。
text: false,
// 當數值變動時所會呼叫的回呼函式。
onChange: (percent, value, total) => {},
// 當達到成功狀態時所會呼叫的回呼函式。
onSuccess: (value, total) => {},
// 當啟用時所會呼叫的回呼函式。
onActive: (value, total) => {},
// 當狀態改為錯誤時所會呼叫的回呼函式。
onError: (value, total) => {},
// 當呈現為警告狀態時所會呼叫的回呼函式。
onWarning: (value, total) => {},
// 當處於緩衝時所會呼叫的回呼函式。
onBuffering: (bufferValue, value, total) => {},
// 處於未知狀態時所會呼叫的回呼函式。
onIndeterminate: () => {},
// 處於準備中所會呼叫的回呼函式。
onPreparing: () => {},
// 處於已請求但仍未知時所會呼叫的回呼函式。
onQueriedIndeterminate: () => {},
// 當進度達到全滿時所會呼叫的回呼函式。
onComplete: (total) => {}
};
// 事件名稱。
Event = {
CHANGE: `change${EVENT_NAMESPACE}`,
SUCCESS: `success${EVENT_NAMESPACE}`,
ACTIVE: `active${EVENT_NAMESPACE}`,
ERROR: `error${EVENT_NAMESPACE}`,
WARNING: `warning${EVENT_NAMESPACE}`,
BUFFERING: `buffering${EVENT_NAMESPACE}`,
INDETERMINATE: `indeterminate${EVENT_NAMESPACE}`,
PREPARING: `preparing${EVENT_NAMESPACE}`,
QUERIED_INDETERMINATE: `queriedindeterminate${EVENT_NAMESPACE}`,
COMPLETE: `complete${EVENT_NAMESPACE}`
};
// 樣式名稱。
ClassName = {
BUFFERING: 'buffering',
PREPARING: 'preparing',
ACTIVE: 'active',
QUERIED_INDETERMINATE: 'queried indeterminate',
INDETERMINATE: 'indeterminate',
SUCCESS: 'success',
ERROR: 'error',
WARNING: 'warning',
BAR: 'bar',
TEXT: 'text',
BUFFER: 'buffer'
};
// 選擇器名稱。
Selector = {
BAR: ':scope > .bar',
BUFFER: ':scope > .buffer.bar',
TEXT: ':scope > .bar > .text',
DIV: '
'
};
// 錯誤訊息。
Error = {};
// ------------------------------------------------------------------------
// 模組註冊
// ------------------------------------------------------------------------
ts.register({NAME, MODULE_NAMESPACE, Error, Settings}, ({$allModules, $this, element, debug, settings}) => {
var $bar, $buffer, $text, module;
// ------------------------------------------------------------------------
// 區域變數
// ------------------------------------------------------------------------
$bar = $this.find(Selector.BAR);
$buffer = $this.find(Selector.BUFFER);
$text = $this.find(Selector.TEXT);
// ------------------------------------------------------------------------
// 模組定義
// ------------------------------------------------------------------------
return module = {
is: {
success: () => {
return $this.hasClass(ClassName.SUCCESS);
},
error: () => {
return $this.hasClass(ClassName.ERROR);
},
warning: () => {
return $this.hasClass(ClassName.WARNING);
},
active: () => {
return $this.hasClass(ClassName.ACTIVE);
},
preparing: () => {
return $this.hasClass(ClassName.PREPARING);
},
buffering: () => {
return $this.hasClass(ClassName.BUFFERING);
},
buffer: {
complete: () => {
return module.get.buffer.percent() >= 100;
}
},
queried: {
indeterminate: () => {
return $this.hasClass(ClassName.QUERIED_INDETERMINATE);
}
},
indeterminate: () => {
return $this.hasClass(ClassName.INDETERMINATE);
},
complete: () => {
return module.get.percent() >= 100;
}
},
get: {
text: () => {
return $text.html();
},
percent: () => {
return parseInt(settings.value / settings.total * 100);
},
value: () => {
return settings.value;
},
total: () => {
return settings.total;
},
buffer: {
percent: () => {
return settings.buffer.value / settings.total * 100;
},
value: () => {
return settings.buffer.value;
},
bar: () => {
return $buffer.get();
}
},
bar: () => {
return $bar.get();
}
},
create: {
buffer: {
bar: () => {
if ($buffer.exists()) {
return;
}
return $buffer = ts(Selector.DIV).addClass(`${ClassName.BUFFER} ${ClassName.BAR}`).appendTo(element);
}
},
bar: () => {
return $bar = ts(Selector.DIV).addClass(ClassName.BAR).appendTo(element);
},
text: () => {
return $text = ts(Selector.DIV).addClass(ClassName.TEXT).appendTo($bar);
}
},
repaint: {
bar: () => {
var percent;
percent = Math.round(settings.value / settings.total * 100);
if (percent >= 100) {
$bar.css('width', "100%");
if (settings.autoSuccess) {
module.set.success();
module.remove.warning();
module.remove.error();
}
module.trigger.complete();
} else {
$bar.css('width', `${percent}%`);
if (settings.autoSuccess) {
module.remove.success();
module.remove.warning();
module.remove.error();
}
}
if (settings.text === true) {
return module.set.text(`${percent}%`);
}
},
buffer: () => {
var bufferPercent;
bufferPercent = Math.round(settings.buffer.value / settings.total * 100);
if (bufferPercent >= 100) {
return $buffer.css('width', "100%");
} else {
return $buffer.css('width', `${bufferPercent}%`);
}
}
},
set: {
percent: (percent) => {
if (percent === module.get.percent()) {
return $allModules;
}
settings.value = Math.round(percent / settings.total * 100);
module.repaint.bar();
module.trigger.change();
return $allModules;
},
value: (value) => {
if (value === module.get.value()) {
return $allModules;
}
settings.value = value;
module.repaint.bar();
module.trigger.change();
return $allModules;
},
increment: (value) => {
if (settings.value === settings.total) {
return $allModules;
}
settings.value = settings.value + value;
if (settings.value > settings.total) {
settings.value = settings.total;
}
module.repaint.bar();
module.trigger.change();
return $allModules;
},
decrement: (value) => {
if (settings.value === 0) {
return $allModules;
}
settings.value = settings.value - value;
if (settings.value < 0) {
settings.value = 0;
}
module.repaint.bar();
module.trigger.change();
return $allModules;
},
total: (total) => {
settings.total = total;
module.repaint.bar();
return $allModules;
},
active: () => {
$this.addClass(ClassName.ACTIVE);
module.trigger.active();
return $allModules;
},
warning: () => {
module.remove.success();
module.remove.error();
$this.addClass(ClassName.WARNING);
module.trigger.warning();
return $allModules;
},
success: () => {
module.remove.warning();
module.remove.error();
$this.addClass(ClassName.SUCCESS);
module.trigger.success();
return $allModules;
},
error: () => {
module.remove.success();
module.remove.warning();
$this.addClass(ClassName.ERROR);
module.trigger.error();
return $allModules;
},
preparing: () => {
module.reset();
$this.addClass(ClassName.PREPARING);
module.trigger.preparing();
return $allModules;
},
buffering: () => {
$this.addClass(ClassName.BUFFERING);
return $allModules;
},
buffer: {
percent: (percent) => {
if (percent === module.get.buffer.percent()) {
return $allModules;
}
module.set.buffering();
module.create.buffer.bar();
settings.buffer.value = Math.round(percent / settings.total * 100);
module.repaint.buffer();
module.trigger.buffering();
return $allModules;
},
value: (value) => {
if (value === module.get.buffer.value()) {
return $allModules;
}
module.set.buffering();
module.create.buffer.bar();
settings.buffer.value = value;
module.repaint.buffer();
module.trigger.buffering();
return $allModules;
},
increment: (value) => {
if (settings.buffer.value === settings.total) {
return $allModules;
}
module.set.buffering();
module.create.buffer.bar();
settings.buffer.value = settings.buffer.value + value;
if (settings.buffer.value > settings.total) {
settings.buffer.value = settings.total;
}
module.repaint.buffer();
module.trigger.buffering();
return $allModules;
},
decrement: (value) => {
if (settings.value === 0) {
return $allModules;
}
module.set.buffering();
module.create.buffer.bar();
settings.buffer.value = settings.buffer.value - value;
if (settings.buffer.value < 0) {
settings.buffer.value = 0;
}
module.repaint.buffer();
module.trigger.buffering();
return $allModules;
}
},
indeterminate: () => {
module.reset();
$this.addClass(ClassName.INDETERMINATE);
module.trigger.indeterminate();
return $allModules;
},
queried: {
indeterminate: () => {
module.reset();
$this.addClass(ClassName.QUERIED_INDETERMINATE);
module.trigger.queried.indeterminate();
return $allModules;
}
},
text: (text) => {
$text.html(text);
return $allModules;
}
},
remove: {
active: () => {
$this.removeClass(ClassName.ACTIVE);
return $allModules;
},
warning: () => {
$this.removeClass(ClassName.WARNING);
return $allModules;
},
success: () => {
$this.removeClass(ClassName.SUCCESS);
return $allModules;
},
error: () => {
$this.removeClass(ClassName.ERROR);
return $allModules;
},
preparing: () => {
$this.removeClass(ClassName.PREPARING);
return $allModules;
},
buffer: () => {
$this.removeClass(ClassName.BUFFERING);
settings.buffer.value = 0;
$buffer.remove();
return $allModules;
},
queried: {
indeterminate: () => {
$this.removeClass(ClassName.QUERIED_INDETERMINATE);
return $allModules;
}
},
indeterminate: () => {
$this.removeClass(ClassName.INDETERMINATE);
return $allModules;
}
},
complete: () => {
module.set.value(module.get.total());
return $allModules;
},
reset: () => {
module.remove.warning();
module.remove.success();
module.remove.error();
module.remove.active();
module.remove.buffer();
module.remove.preparing();
module.remove.queried.indeterminate();
module.remove.indeterminate();
module.set.value(0);
return $allModules;
},
trigger: {
change: () => {
return $this.trigger(Event.CHANGE);
},
success: () => {
return $this.trigger(Event.SUCCESS);
},
active: () => {
return $this.trigger(Event.ACTIVE);
},
error: () => {
return $this.trigger(Event.ERROR);
},
warning: () => {
return $this.trigger(Event.WARNING);
},
buffering: () => {
return $this.trigger(Event.BUFFERING);
},
indeterminate: () => {
return $this.trigger(Event.INDETERMINATE);
},
preparing: () => {
return $this.trigger(Event.PREPARING);
},
queried: {
indeterminate: () => {
return $this.trigger(Event.QUERIED_INDETERMINATE);
}
},
complete: () => {
return $this.trigger(Event.COMPLETE);
}
},
bind: {
events: () => {
$this.on(Event.CHANGE, () => {
debug('發生 CHANGE 事件', element, module.get.percent(), module.get.value(), module.get.total());
return settings.onChange.call(element, module.get.percent(), module.get.value(), module.get.total());
});
$this.on(Event.SUCCESS, () => {
debug('發生 SUCCESS 事件', element);
return settings.onSuccess.call(element, module.get.value(), module.get.total());
});
$this.on(Event.ACTIVE, () => {
debug('發生 ACTIVE 事件', element);
return settings.onActive.call(element, module.get.value(), module.get.total());
});
$this.on(Event.ERROR, () => {
debug('發生 ERROR 事件', element);
return settings.onError.call(element, module.get.value(), module.get.total());
});
$this.on(Event.WARNING, () => {
debug('發生 WARNING 事件', element);
return settings.onWarning.call(element, module.get.value(), module.get.total());
});
$this.on(Event.BUFFERING, () => {
debug('發生 BUFFERING 事件', element);
return settings.onBuffering.call(element, module.get.buffer.value(), module.get.value(), module.get.total());
});
$this.on(Event.INDETERMINATE, () => {
debug("發生 INDETERMINATE 事件", element);
return settings.onIndeterminate.call(element);
});
$this.on(Event.PREPARING, () => {
debug("發生 PREPARING 事件", element);
return settings.onPreparing.call(element);
});
$this.on(Event.QUERIED_INDETERMINATE, () => {
debug("發生 QUERIED_INDETERMINATE 事件", element);
return settings.onQueriedIndeterminate.call(element);
});
return $this.on(Event.COMPLETE, () => {
debug("發生 COMPLETE 事件", element);
return settings.onComplete.call(element, module.get.total());
});
}
},
// ------------------------------------------------------------------------
// 基礎方法
// ------------------------------------------------------------------------
initialize: () => {
debug('初始化進度條', element);
if (!$bar.exists()) {
module.create.bar();
}
if (!$text.exists()) {
module.create.text();
}
module.repaint.bar();
return module.bind.events();
},
instantiate: () => {
return debug('實例化進度條', element);
},
refresh: () => {
$bar = $this.find(Selector.BAR);
$text = $this.find(Selector.TEXT);
$buffer = $this.find(Selector.BUFFER);
return $allModules;
},
destroy: () => {
debug('摧毀進度條', element);
$this.removeData(MODULE_NAMESPACE).off(EVENT_NAMESPACE);
return $allModules;
}
};
});
}).call(this);