Skip to content

Instantly share code, notes, and snippets.

@voidw0rd

voidw0rd/gist:3156317

Created July 21, 2012 16:24
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save voidw0rd/3156317 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save voidw0rd/3156317 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
gistfile1.html
<html>
<head>
<title></title>
<script src="http://194.102.63.56:9999/jquery-1.7.1.min.js"></script>
<script src="http://194.102.63.56:9999/jquery-ui-1.8.17.custom.min.js"></script>
<script>
$(document).ready(function(){
function Class( __proto__ ) {
var Class = __proto__.hasOwnProperty("constructor") ? __proto__.constructor : (__proto__.constructor = function(){});
Class.prototype = __proto__;
return Class;
}
var BasicException = new Class({
// ------------------------------------------------------------------------------
// members
error: null,
// ------------------------------------------------------------------------------
// ------------------------------------------------------------------------------
// methods
constructor: function(msg) {
if(msg) {
this.error = msg;
}
else {
this.error = "Unknown exception";
}
},
message: function() {
return this.error;
},
});
var InputWidget = new Class({
// ------------------------------------------------------------------------------
// members
self: this,
type: "inputField",
htmlElement: null,
cssClasses: [],
value: null,
valid: false,
placeHolder: "",
readyToRender: false,
// ------------------------------------------------------------------------------
// ------------------------------------------------------------------------------
// methods
constructor: function(config) {
if(config.type != this.type) {
throw new BasicException("Unexpected type: " + "\"" + config.type + "\"");
}
if(config.css instanceof Array) {
this.cssClasses.concat(config.css);
}
else if(typeof(config.css) == 'string') {
this.cssClasses.push(config.css);
}
},
makeElement: function() {
var self = this;
var el = $("<input/>", {
change: function() {
self.value = $(this).val();
},
placeHolder: self.placeHolder,
});
this.htmlElement = el;
return el;
},
setPlaceHolder: function(placeHolder) {
this.placeHolder = placeHolder;
this.readyToRender = true;
return this.readyToRender;
},
render: function() {
if(this.readyToRender) {
return this.makeElement();
}
return this.render;
},
validate: function() {
var element = $(this.htmlElement);
// TODO: toggle invalid css classes... and set this.valid to reflect that.
}
});
// ------------------------------------------------------------------------------
// ------------------------------------------------------------------------------
var Widget = new Class({
// ------------------------------------------------------------------------------
// members
widgets: {"inputField": InputWidget},
identifier: null,
input: null,
output: null,
widget: null,
valid: false,
enabled: false,
binding: null,
// ------------------------------------------------------------------------------
// ------------------------------------------------------------------------------
// methods
constructor: function(config) {
var self = this;
$.each(config, function(key, value){
switch(key) {
case "type":
try {
var _widget = self.widgets[value];
self.widget = new _widget({"type": value, "css": config.css});
break;
} catch(Exception) {
console.log(Exception);
}
break;
case "identifier":
self.identifier = value;
break;
case "input":
self.input = value;
break;
}; // switch
}); // each
}, // constructor
setIdentifier: function(identifier){
this.identifier = identifier;
return identifier;
},
setInput: function(input) {
this.input = input;
return input;
},
setOutput: function(output) {
this.output = output;
return output;
},
setValid: function(valid) {
this.valid = valid;
return valid;
},
setEnabled: function(enabled) {
this.enabled = enabled;
return enabled;
},
setWidget: function(config) {
},
setBinding: function(binding) {
this.binding = binding;
return binding;
},
getBinding: function() {
return this.binding;
}
// ------------------------------------------------------------------------------
});
// ----------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------
var Bindings = new Class({
// ------------------------------------------------------------------------------
// members
bindings: [], // {key, {provide: func, dependencies: [...]}}
// ------------------------------------------------------------------------------
// ------------------------------------------------------------------------------
// methods
constructor: function(config) {
},
define: function(newBinding) {
this.bindings.push(newBinding);
},
getByKey: function(key) {
var binding = null;
$.each(this.bindings, function(index, bind) {
if(bind[key]) {
binding = bind[key];
}
})
return binding;
},
});
// ----------------------------------------------------------------------------------
// ----------------------------------------------------------------------------------
var FormPanel = new Class({
// ------------------------------------------------------------------------------
// members
bindings: null, // {key, {provide: func, dependencies: [...]}}
widgets: [],
element: null,
// ------------------------------------------------------------------------------
// ------------------------------------------------------------------------------
// methods
constructor: function(bindings, widgets, element) {
var self = this;
this.element = element;
if(bindings instanceof Bindings)
self.bindings = bindings;
if(widgets instanceof Array)
self.widgets = widgets;
if(self.bindings.bindings.length == 0 || self.widgets.length == 0)
throw BasicException("Invalid bindings or widgets format...");
$.each(widgets, function(index, widget) {
switch(widget.widget.type) {
case "inputField":
var bind = bindings.getByKey(widget.input);
bind.provide(widget, widget.widget.setPlaceHolder);
}
});
},
render: function() {
$.each(this.widgets, function(index, widget) {
$(this.element).append(widget.widget.render());
console.log(widget.widget);
});
}
});
var x = new Widget({"identifier": "test", "type": "inputField", "input": "test"});
var bind = new Bindings({});
bind.define({
"test": {
provide: function(context, callback) {
context.widget.setPlaceHolder("bbb");
console.log(context);
console.log("Inside provide.");
var x = callback("Enter text");
console.log("Callback return " + x);
},
dependencies: []
}
});
var element = $("#zz-container");
var form = new FormPanel(bind, new Array(x), element);
form.widgets[0].widget.setPlaceHolder("aaaaaaaa");
form.render();
console.log(form.widgets[0].widget.placeHolder);
});
</script>
<style>
body {
background: #000;
}
#zz-container {
background: #222;
width: 300px;
height: 300px;
margin: auto;
margin-top: 20px;
}
</style>
</head>
<body>
<div id="zz-container">
</div>
</body>
</html>​
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment