Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- module createAppLoginWidget {
- declare var kendo;
- declare var ui;
- declare var $;
- var ui = kendo.ui, Widget = ui.Widget
- var appLoginWidget = {
- options: {
- name: "AppLogin",
- currentUserName: ""
- },
- showView: function ($showView) {
- // simple view handler
- this.ViewArray.forEach(function ($view) { if ($view != $showView) $view.hide() });
- $showView.show();
- },
- refreshCustomBindings: function () {
- this.$CurrentUserName.text(this.options.currentUserName);
- },
- doLogout: function (evt) {
- var widget = $(evt.target).parents("[data-role]").first().data("handler");
- // some async logout
- widget.showView(widget.$StatusView);
- setTimeout(function () {
- widget.options.currentUserName = "";
- widget.showView(widget.$LoginView);
- }, 1000);
- },
- doTryLogin: function (evt) {
- var widget = $(evt.target).parents("[data-role]").first().data("handler")
- // some async login
- widget.showView(widget.$StatusView);
- setTimeout(function () {
- widget.options.currentUserName = widget.$UserName.val();
- widget.$UserName.val("");
- widget.$Password.val("");
- widget.refreshCustomBindings();
- widget.showView(widget.$LoggedInView);
- }, 1000);
- },
- $UserName: null,
- $Password: null,
- $CurrentUserName: null,
- $LoginView: null,
- $LoggedInView: null,
- $StatusView: null,
- ViewArray:null,
- init: function (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.ViewArray = [this.$LoginView, this.$LoggedInView, this.$StatusView];
- this.showView(this.$LoginView);
- // Append to DOM
- $(element).append(this.ViewArray);
- }
- }
- ui.plugin(Widget.extend(appLoginWidget));
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement