Skip to content

Instantly share code, notes, and snippets.

@joeriks
Created February 11, 2013 12:28
Show Gist options
  • Save joeriks/4754169 to your computer and use it in GitHub Desktop.
Save joeriks/4754169 to your computer and use it in GitHub Desktop.
Sample custom KendoUI widget using Typescript - with intellisense niceness. Showing html creation, event handling, public element referencing and subviews (show/hide). Simplicity.
module createAppLoginWidget {
declare var kendo;
declare var ui;
declare var $;
var ui = kendo.ui, Widget = ui.Widget
class AppLoginWidget {
options = {
name: "AppLogin",
currentUserName: ""
}
$UserName;
$Password;
$CurrentUserName;
$LoginView;
$LoggedInView;
$StatusView;
subViews;
showSubView($showSubView) {
// simple view handler
this.subViews.forEach(function ($view) { if ($view != $showSubView) $view.hide() });
$showSubView.show();
}
refreshCustomBindings() {
this.$CurrentUserName.text(this.options.currentUserName);
}
doLogout(evt) {
var widget = <AppLoginWidget>$(evt.target).parents("[data-role]").first().data("handler");
// some async logout
widget.showSubView(widget.$StatusView);
setTimeout(function () {
widget.options.currentUserName = "";
widget.showSubView(widget.$LoginView);
}, 1000);
}
doTryLogin(evt) {
var widget = <AppLoginWidget>$(evt.target).parents("[data-role]").first().data("handler")
// some async login
widget.showSubView(widget.$StatusView);
setTimeout(function () {
widget.options.currentUserName = widget.$UserName.val();
widget.$UserName.val("");
widget.$Password.val("");
widget.refreshCustomBindings();
widget.showSubView(widget.$LoggedInView);
}, 1000);
}
init(element, options?) {
if (typeof (options) == "undefined") options = this.options;
// base call to widget initialization
Widget.fn.init.call(this, element, options);
// Create HTML elements
// Some are public ("this.$name")
// Elements are separated into "views" which can be hidden/shown
//
// Login view:
//
this.$UserName = $("<input>").attr({ type: 'text', placeholder: 'Username' });
this.$Password = $("<input>").attr({ type: 'password', placeholder: 'Password' });
var buttonLogin = $("<input>").attr({ type: 'button', value: 'Login' });
// Attach event
buttonLogin.on("click", this.doTryLogin);
this.$LoginView = $("<div>").append([this.$UserName, this.$Password, buttonLogin]);
//
// Logged in view:
//
this.$CurrentUserName = $("<span>");
var loggedInAs = $("<span>").text("Logged in as ").append(this.$CurrentUserName);
var buttonLogout = $("<input>").attr({ type: 'button', value: 'Logout' });
buttonLogout.on("click", this.doLogout);
this.$LoggedInView = $("<div>").append([loggedInAs, buttonLogout]);
//
// Status view:
//
this.$StatusView = $("<div>").text("Wait...");
// Add views to array and hide all but one
this.subViews = [this.$LoginView, this.$LoggedInView, this.$StatusView];
this.showSubView(this.$LoginView);
// Append to DOM
$(element).append(this.subViews);
}
}
ui.plugin(Widget.extend(new AppLoginWidget()));
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment