Skip to content

Instantly share code, notes, and snippets.

@EddieRingle
Created February 1, 2012 15:20
Show Gist options
  • Save EddieRingle/1717498 to your computer and use it in GitHub Desktop.
Save EddieRingle/1717498 to your computer and use it in GitHub Desktop.
###
UI Element classes
Written by Eddie Ringle
###
class Button extends HTMLButtonElement
constructor: (@className, value) ->
@innerHTML = value
setValue: (value) ->
@innerHTML = value
class ImageButton extends Button
img: new HTMLImageElement
constructor: (@className, imgsrc) ->
@img.src = imgsrc
@appendChild @img
class TitleBar extends HTMLDivElement
closeBtn: new Button 'close', 'X'
minimizeBtn: new Button 'minimize', '_'
titleNode: new Text
constructor: (title) ->
@className = 'window-titlebar'
@appendChild @closeBtn
@appendChild @minimizeBtn
@titleNode.nodeValue = title
setTitle: (newTitle) ->
@titleNode.nodeValue = newTitle
class WindowContent extends HTMLDivElement
constructor: ->
@className = 'window-content'
class Window extends HTMLDivElement
titlebar: new TitleBar
content: new WindowContent
constructor: (@id, title = '', @frame = on) ->
@className = (@frame is on) ? 'window' : 'window no-frame'
@appendChild @titlebar
@appendChild @content
@titlebar.setTitle title
class Dialog extends Window
message: new HTMLDivElement
okBtn: new Button 'okay-btn', 'OK'
cancelBtn: new Button 'cancel-btn', 'Cancel'
constructor: (@id, title = '', @frame = on) ->
super @id, title, @frame
@content.appendChild @message
@content.appendChild @okBtn
@content.appendChild @cancelBtn
/*
UI Element classes
Written by Eddie Ringle
*/
var Button, Dialog, ImageButton, TitleBar, Window, WindowContent,
__hasProp = Object.prototype.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor; child.__super__ = parent.prototype; return child; };
Button = (function(_super) {
__extends(Button, _super);
function Button(className, value) {
this.className = className;
this.innerHTML = value;
}
Button.prototype.setValue = function(value) {
return this.innerHTML = value;
};
return Button;
})(HTMLButtonElement);
ImageButton = (function(_super) {
__extends(ImageButton, _super);
ImageButton.prototype.img = new HTMLImageElement;
function ImageButton(className, imgsrc) {
this.className = className;
this.img.src = imgsrc;
this.appendChild(this.img);
}
return ImageButton;
})(Button);
TitleBar = (function(_super) {
__extends(TitleBar, _super);
TitleBar.prototype.closeBtn = new Button('close', 'X');
TitleBar.prototype.minimizeBtn = new Button('minimize', '_');
TitleBar.prototype.titleNode = new Text;
function TitleBar(title) {
this.className = 'window-titlebar';
this.appendChild(this.closeBtn);
this.appendChild(this.minimizeBtn);
this.titleNode.nodeValue = title;
}
TitleBar.prototype.setTitle = function(newTitle) {
return this.titleNode.nodeValue = newTitle;
};
return TitleBar;
})(HTMLDivElement);
WindowContent = (function(_super) {
__extends(WindowContent, _super);
function WindowContent() {
this.className = 'window-content';
}
return WindowContent;
})(HTMLDivElement);
Window = (function(_super) {
__extends(Window, _super);
Window.prototype.titlebar = new TitleBar;
Window.prototype.content = new WindowContent;
function Window(id, title, frame) {
var _ref;
this.id = id;
if (title == null) title = '';
this.frame = frame != null ? frame : true;
this.className = (_ref = this.frame === true) != null ? _ref : {
'window': 'window no-frame'
};
this.appendChild(this.titlebar);
this.appendChild(this.content);
this.titlebar.setTitle(title);
}
return Window;
})(HTMLDivElement);
Dialog = (function(_super) {
__extends(Dialog, _super);
Dialog.prototype.message = new HTMLDivElement;
Dialog.prototype.okBtn = new Button('okay-btn', 'OK');
Dialog.prototype.cancelBtn = new Button('cancel-btn', 'Cancel');
function Dialog(id, title, frame) {
this.id = id;
if (title == null) title = '';
this.frame = frame != null ? frame : true;
Dialog.__super__.constructor.call(this, this.id, title, this.frame);
this.content.appendChild(this.message);
this.content.appendChild(this.okBtn);
this.content.appendChild(this.cancelBtn);
}
return Dialog;
})(Window);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment