Created
April 17, 2014 22:59
-
-
Save leniency/11016173 to your computer and use it in GitHub Desktop.
This creates a global point for KendoUI notifications. Call as core.notify.success('yay!');
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/// <reference path="typings/jquery/jquery.d.ts" /> | |
/// <reference path="typings/kendo.all.d.ts" /> | |
interface JQuery { | |
kendoNotification(options: any): JQuery; | |
} | |
module core { | |
/** | |
* Global notifications | |
* This wraps a kendoNotification and automatically creates it for | |
* global use. | |
*/ | |
export class Notification { | |
_kendoNotification: any; | |
// Statically track if this has been initialized or not. Only allow a | |
// singleton | |
private static _isInitialized: boolean = false; | |
constructor() { } | |
/** | |
* Initialize the notification container and inner Kendo object. | |
*/ | |
private Initialize() { | |
// Check if this has already been initialized or not. | |
if (!Notification._isInitialized) { | |
Notification._isInitialized = true; | |
var container = $('<div></div>'); | |
this._kendoNotification = container.kendoNotification({ | |
position: { | |
pinned: true, | |
bottom: 20, | |
right: 0 | |
}, | |
autoHideAfter: 5000, | |
stacking: 'top', | |
templates: [{ | |
type: 'info', | |
template: "<div class='toast'><i class='pull-left glyph-fw glyph glyph-info'></i><strong>#: title #</strong><p>#: message #</p></div>" | |
}, { | |
type: 'success', | |
template: "<div class='toast'><i class='pull-left glyph-fw glyph glyph-ok'></i><strong>#: title #</strong><p>#: message #</p></div>" | |
}, { | |
type: 'warning', | |
template: "<div class='toast'><i class='pull-left glyph-fw glyph glyph-exclamation'></i><strong>#: title #</strong><p>#: message #</p></div>" | |
}, { | |
type: 'error', | |
template: "<div class='toast'><i class='pull-left glyph-fw glyph glyph-warning-sign'></i><strong>#: title #</strong><p>#: message #</p></div>" | |
}] | |
}).data("kendoNotification"); | |
$('body').append(container); | |
} | |
} | |
private notify(title: string, message?: string, type?: string) { | |
this.Initialize(); | |
if (message == undefined) { | |
message = title; | |
title = undefined; | |
} | |
this._kendoNotification.show({ title: title || '', message: message || '' }, type); | |
} | |
success(title: string, message?: string) { | |
this.notify(title, message, "success"); | |
} | |
info(title: string, message?: string) { | |
this.notify(title, message, "info"); | |
} | |
warning(title: string, message?: string) { | |
this.notify(title, message, "warning"); | |
} | |
error(title: string, message?: string) { | |
this.notify(title, message, "error"); | |
} | |
} | |
// Attach a new notification globally. | |
export var notify = new Notification(); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment