Skip to content

Instantly share code, notes, and snippets.

@fischgeek
Created August 10, 2017 22:24
Show Gist options
  • Save fischgeek/dcd6cad07bce920cbd03aa6d6dc1e125 to your computer and use it in GitHub Desktop.
Save fischgeek/dcd6cad07bce920cbd03aa6d6dc1e125 to your computer and use it in GitHub Desktop.
class ActionButton {
Title = ko.observable<string>();
OriginalTitle: string;
WorkingTitle = ko.observable<string>("Loading...");
FailedTitle = ko.observable<string>("Failure!");
SuccessTitle = ko.observable<string>("Success!");
private IsIdle = ko.observable<boolean>(true);
SetIdle = () => {
this.IsWorking(false);
this.IsIdle(true);
this.IsSuccess(false);
this.IsFail(false);
}
private IsWorking = ko.observable<boolean>(false);
SetWorking = () => {
this.Title(this.WorkingTitle());
this.IsWorking(true);
this.IsIdle(false);
this.IsSuccess(false);
this.IsFail(false);
}
private IsSuccess = ko.observable<boolean>(false);
SetSuccess = () => {
this.Title(this.SuccessTitle());
this.IsWorking(false);
this.IsIdle(false);
this.IsSuccess(true);
this.IsFail(false);
this.Reset();
}
private IsFail = ko.observable<boolean>(false);
SetFail = () => {
this.Title(this.FailedTitle());
this.IsWorking(false);
this.IsIdle(false);
this.IsSuccess(false);
this.IsFail(true);
this.Reset();
}
Reset = () => {
var x = this;
setTimeout(function () {
x.SetIdle();
x.Title(x.OriginalTitle);
}, 3000);
}
State = ko.computed(() => {
if (this.IsIdle() || this.IsWorking()) {
return 'btn-primary';
} else if (this.IsSuccess()) {
return 'btn-success';
} else if (this.IsFail()) {
return 'btn-danger';
}
});
Glyph = ko.computed(() => {
if (this.IsIdle()) {
return '';
} else if (this.IsWorking()) {
return 'glyphicon-refresh';
} else if (this.IsSuccess()) {
return 'glyphicon-ok';
} else if (this.IsFail()) {
return 'glyphicon-remove';
}
});
WorkMethod = ko.observable<() => void>();
constructor(title: string = "Action Button") {
this.Title(title);
this.OriginalTitle = this.Title();
}
}
interface KnockoutBindingHandlers {
actionButton: KnockoutBindingHandler;
}
ko.bindingHandlers.actionButton = {
init: function (element, valueAccessor, allBindingsAccessor, data, context) {
var value = valueAccessor();
if (typeof value === 'object') {
throw (`${value.Title()} binding must be a string.`);
}
var options = allBindingsAccessor().abOptions || {};
$(element).attr('type', 'submit');
$(element).addClass('btn');
$(element).append(`<span data-bind="text: ${value}.Title()"></span>&nbsp;`);
$(element).append(`<span class="glyphicon" data-bind="css: ${value}.Glyph()"></span>`);
data[value].Title(options.Title || data[value].Title());
ko.applyBindingsToNode(element, { css: data[value].State(), click: data[value].WorkMethod() });
},
update: function (element, valueAccessor, allBindingsAccessor, data, context) {
var value = valueAccessor();
ko.applyBindingsToNode(element, { css: data[value].State(), click: data[value].WorkMethod() });
}
};
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment