@danielkalen/simplybind
Version:
Magically simple, framework-less one-way/two-way data binding for frontend/backend in ~5kb.
207 lines (175 loc) • 6.42 kB
JavaScript
function appendDiv(){
$('body').append('<div id="div"></div>');
}
function appendObject(){
$('#div').append('<div id="domObject" data-attr="blank"></div>');
}
function appendInputs(){
$('#div').append('<input type="text" id="input1" />');
$('#div').append('<input type="text" id="input2" />');
$('#div').append('<input type="text" id="input3" />');
window.$inputA = $('#input1');
window.$inputB = $('#input2');
window.$inputC = $('#input3');
window.inputA = $inputA[0];
window.inputB = $inputB[0];
window.inputC = $inputC[0];
}
function appendTextarea(){
$('#div').append('<textarea id="textarea"></textarea>');
window.$textarea = $('#textarea');
window.textarea = $textarea[0];
}
function appendSelect(){
$('#div').append('<select id="select"><option value=""></option><option value="valid">Valid</option><option value="valid2">Valid2</option></select>');
window.$select = $('#select');
window.select = $select[0];
}
function appendRadio(){
$('#div').append('<div id="radio"><input type="radio" name="radio" value="radioA" id="radioA" /><input type="radio" name="radio" value="radioB" id="radioB" /><input type="radio" name="radio" value="radioC" id="radioC" /></div>');
window.$radioFields = $('#radio');
window.radioFields = $radioFields[0].children;
$radioFields = $radioFields.children();
$radioFields.each(function(){
window['$'+this.id] = $(this);
window[this.id] = this;
});
}
function appendCheckbox(){
$('#div').append('<div id="checkbox"><input type="checkbox" name="checkbox" value="checkboxA" id="checkboxA" /><input type="checkbox" name="checkbox" value="checkboxB" id="checkboxB" /><input type="checkbox" name="checkbox" value="checkboxC" id="checkboxC" /></div>');
window.$checkboxFields = $('#checkbox');
window.checkboxFields = $checkboxFields[0].children;
$checkboxFields = $checkboxFields.children();
$checkboxFields.each(function(){
window['$'+this.id] = $(this);
window[this.id] = this;
});
}
function appendRegEls(){
$('#div').append('<div id="reg"><h1 id="reg-h1">The following <span id="reg-h1-span">text is {{verb}}</span> big and ugly</h1></div>');
$('#div').append('<div id="regTwo"><h1 id="regTwo-h1">The following <span id="regTwo-h1-span">text is {{verb}} {{nounOne}}</span> and {{nounTwo}}</h1></div>');
$('#div').append('<div id="regThree"><h1 id="regThree-h1">The following <span id="regThree-h1-span">text should have this: {{word}}, {{word}}</span> twice</h1></div>');
$('#div').append('<div id="regFour"><h1 id="regFour-h1">The following {{wordA}} <span id="regFour-h1-span">and {{wordB}}</span> replaced correctly</h1></div>');
window.$regA = $('#reg');
window.$regAH1 = $('#reg-h1');
window.$regAH1Span = $('#reg-h1-span');
window.$regB = $('#regTwo');
window.$regBH1 = $('#regTwo-h1');
window.$regBH1Span = $('#regTwo-h1-span');
window.$regC = $('#regThree');
window.$regCH1 = $('#regThree-h1');
window.$regCH1Span = $('#regThree-h1-span');
window.$regD = $('#regFour');
window.$regDH1 = $('#regFour-h1');
window.$regDH1Span = $('#regFour-h1-span');
window.regA = $regA[0];
window.regAH1 = $regAH1[0];
window.regAH1Span = $regAH1Span[0];
window.regB = $regB[0];
window.regBH1 = $regBH1[0];
window.regBH1Span = $regBH1Span[0];
window.regC = $regC[0];
window.regCH1 = $regCH1[0];
window.regCH1Span = $regCH1Span[0];
window.regD = $regD[0];
window.regDH1 = $regDH1[0];
window.regDH1Span = $regDH1Span[0];
}
function createObjects(){
window.noop = function(){};
window.objectA = {
prop1: "some string",
prop2: "another string",
prop3: 1,
prop4: 2,
prop5: function(){return "some function";},
prop6: function(){return "another function";},
};
window.objectB = {
prop1: "some string",
prop2: "another string",
prop3: 1,
prop4: 2,
prop5: function(){return "some function";},
prop6: function(){return "another function";},
};
window.objectC = {
prop1: "some string",
prop2: "another string",
prop3: 1,
prop4: 2,
prop5: function(){return "some function";},
prop6: function(){return "another function";},
};
}
function createArrays(){
window.arrayA = [0,1,2,3,4,5,6,7,8,9];
window.arrayB = [0,1,2,3,4,5,6,7,8,9];
window.arrayC = [0,1,2,3,4,5,6,7,8,9];
}
function createFns(){
window.fnA = function(){return true};
window.fnB = function(){return true};
window.fnC = function(){return true};
}
if (typeof window !== 'undefined') {
var createEventEmitters = function(){
window.eventEmitterA = regA;
window.eventEmitterB = regB;
window.eventEmitterC = regC;
window.$eventEmitterA = $regA;
window.$eventEmitterB = $regB;
window.$eventEmitterC = $regC;
HTMLElement.prototype.on = HTMLElement.prototype.addEventListener;
HTMLElement.prototype.removeListener = HTMLElement.prototype.removeEventListener;
HTMLElement.prototype.inheritedProp = 'someProp';
HTMLElement.prototype.emit = function(eventName){
var event = document.createEvent('Event');
event.initEvent(eventName, true, false);
this.dispatchEvent(event);
};
$eventEmitterA.customListener = $eventEmitterB.customListener = $eventEmitterC.customListener = $.fn.on
$eventEmitterA.customEmitter = $eventEmitterB.customEmitter = $eventEmitterC.customEmitter = $.fn.trigger
}
var startSandbox = function(){
appendDiv();
appendObject();
appendInputs();
appendTextarea();
appendSelect();
appendRadio();
appendCheckbox();
appendRegEls();
createObjects();
createArrays();
createFns();
createEventEmitters();
}
var restartSandbox = function(){
$('#div').remove();
startSandbox();
}
} else {
var createEventEmitters = function(){
Events = require('events');
window.eventEmitterA = new Events();
window.eventEmitterB = new Events();
window.eventEmitterC = new Events();
window.$eventEmitterA = new Events();
window.$eventEmitterB = new Events();
window.$eventEmitterC = new Events();
Events.prototype.inheritedProp = 'someProp';
$eventEmitterA.customListener = $eventEmitterB.customListener = $eventEmitterC.customListener = Events.prototype.on
$eventEmitterA.customEmitter = $eventEmitterB.customEmitter = $eventEmitterC.customEmitter = Events.prototype.emit
}
var startSandbox = function(){
createObjects();
createArrays();
createFns();
createEventEmitters();
}
var restartSandbox = function(){
startSandbox();
}
module.exports = {startSandbox:startSandbox, restartSandbox:restartSandbox};
}