Skip to content

T
todomvc
Commit 17b9f93e authored by Sindre Sorhus's avatar Sindre Sorhus
Browse files
Options

Remove JavaScriptMVC app, replaced by CanJS

parent d87b2b21
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 0 additions and 86823 deletions
labs/architecture-examples/javascriptmvc/jquery/README deleted 100644 → 0
View file @ d87b2b21
TOC:
A. How to get (and contribute) to JMVC
A. How to get (and contribute) JMVC
1. Start a new project in git.
2. Fork ....
http://github.com/jupiterjs/steal and
http://github.com/jupiterjs/jquerymx
3. Add steal and javascriptmvc as submodules of your project...
git submodule add git@github.com:_YOU_/steal.git steal
git submodule add git@github.com:_YOU_/jquerymx.git jquery
* Notice javascriptmvc is under the jquery folder
4. Learn a little more about submodules ...
http://johnleach.co.uk/words/archives/2008/10/12/323/git-submodules-in-n-easy-steps
5. Make changes in steal or jmvc, and push them back to your fork.
6. Make a pull request to your fork.
labs/architecture-examples/javascriptmvc/jquery/build.js deleted 100644 → 0
View file @ d87b2b21
// load('jquery/build.js')
load('steal/rhino/steal.js')
var i, fileName, cmd,
plugins = [
"class" ,
"controller",
{
plugin: "controller/subscribe",
exclude: ["jquery/controller/controller.js",
"jquery/class/class.js",
"jquery/lang/lang.js",
"jquery/event/destroyed/destroyed.js",
"jquery/controller/controller.js"]},
"event/default",
"event/destroyed",
"event/drag",
"event/pause",
"event/resize",
{
plugin: "event/drag/limit",
exclude: ["jquery/lang/vector/vector.js", "jquery/event/livehack/livehack.js", "jquery/event/drag/drag.js"]},
{
plugin: "event/drag/scroll",
exclude: ["jquery/dom/within/within.js", "jquery/dom/compare/compare.js", "jquery/event/drop/drop.js","jquery/lang/vector/vector.js", "jquery/event/livehack/livehack.js", "jquery/event/drag/drag.js"]},
{
plugin: "event/drop",
exclude: ["jquery/lang/vector/vector.js", "jquery/event/livehack/livehack.js", "jquery/event/drag/drag.js"]},
"event/hover",
"view/ejs",
"dom/closest",
"dom/compare",
{
plugin: "dom/dimensions",
fileName: "jquery.dimensions.etc.js"
},
"dom/fixture",
"dom/form_params",
"dom/within",
"dom/cur_styles",
"model",
{
plugin: "model/associations",
exclude: ["jquery/class/class.js",
"jquery/lang/lang.js",
"jquery/event/destroyed/destroyed.js",
"jquery/lang/openajax/openajax.js",
"jquery/model/model.js"]
},
{
plugin: "model/backup",
exclude: ["jquery/class/class.js",
"jquery/lang/lang.js",
"jquery/event/destroyed/destroyed.js",
"jquery/lang/openajax/openajax.js",
"jquery/model/model.js"]
},
{
plugin: "model/list",
exclude: ["jquery/class/class.js",
"jquery/lang/lang.js",
"jquery/event/destroyed/destroyed.js",
"jquery/lang/openajax/openajax.js",
"jquery/model/model.js"]
},
{
plugin: "model/list/cookie",
exclude: ["jquery/class/class.js",
"jquery/lang/lang.js",
"jquery/event/destroyed/destroyed.js",
"jquery/lang/openajax/openajax.js",
"jquery/model/model.js",
"jquery/model/list/list.js"]
},
{
plugin: "model/list/local",
exclude: ["jquery/class/class.js",
"jquery/lang/lang.js",
"jquery/event/destroyed/destroyed.js",
"jquery/lang/openajax/openajax.js",
"jquery/model/model.js",
"jquery/model/list/list.js"]
},
{
plugin: "model/validations",
exclude: ["jquery/class/class.js",
"jquery/lang/lang.js",
"jquery/event/destroyed/destroyed.js",
"jquery/lang/openajax/openajax.js",
"jquery/model/model.js"]
},
"view",
"view/ejs",
"view/jaml",
"view/micro",
"view/tmpl"
]
steal.plugins('steal/build/pluginify').then( function(s){
var plugin, exclude, fileDest, fileName;
for(i=0; i<plugins.length; i++){
plugin = plugins[i];
exclude = [];
fileName = null;
if (typeof plugin != "string") {
fileName = plugin.fileName;
exclude = plugin.exclude || [];
plugin = plugin.plugin;
}
fileName = fileName || "jquery."+plugin.replace(/\//g, ".").replace(/dom\./, "").replace(/\_/, "")+".js";
fileDest = "jquery/dist/"+fileName
s.build.pluginify("jquery/"+plugin,{
nojquery: true,
destination: fileDest,
exclude: exclude.length? exclude: false
})
var outBaos = new java.io.ByteArrayOutputStream();
var output = new java.io.PrintStream(outBaos);
runCommand("java", "-jar", "steal/build/scripts/compiler.jar", "--compilation_level", "SIMPLE_OPTIMIZATIONS", "--warning_level", "QUIET", "--js", fileDest, {
output: output
});
var minFileDest = fileDest.replace(".js", ".min.js")
new steal.File(minFileDest).save(outBaos.toString());
}
})
/*
for (i = 0; i < plugins.length; i++) {
plugin = plugins[i];
exclude = [];
fileName = null;
if (typeof plugin != "string") {
fileName = plugin.fileName;
exclude = plugin.exclude || [];
plugin = plugin.plugin;
}
fileName = fileName || "jquery." + plugin.replace(/\//g, ".").replace(/dom\./, "").replace(/\_/, "") + ".js";
fileDest = "jquery/dist/" + fileName
// compress
var outBaos = new java.io.ByteArrayOutputStream();
var output = new java.io.PrintStream(outBaos);
runCommand("java", "-jar", "steal/build/scripts/compiler.jar", "--compilation_level", "SIMPLE_OPTIMIZATIONS", "--warning_level", "QUIET", "--js", fileDest, {
output: output
});
var minFileDest = fileDest.replace(".js", ".min.js")
new steal.File(minFileDest).save(outBaos.toString());
print("***" + fileName + " pluginified and compressed")
}*/
labs/architecture-examples/javascriptmvc/jquery/buildAll.js deleted 100644 → 0
View file @ d87b2b21
// load('jquery/build.js')
load('steal/rhino/steal.js')
// load every plugin in a single app
// get dependency graph
// generate single script
steal.plugins('steal/build/pluginify','steal/build/apps','steal/build/scripts').then( function(s){
var ignore = /\.\w+|test|generate|dist|qunit|fixtures|pages/
var plugins = [];
s.File('jquery').contents(function( name, type, current ) {
if (type !== 'file' && !ignore.test(name)) {
var folder = current+"/"+name;
print(folder);
plugins.push(folder);
steal.File(folder).contents(arguments.callee, folder)
//steal.File(path + "/" + (current ? current + "/" : "") + name).contents(arguments.callee, (current ? current + "/" : "") + name);
}
},"jquery");
// tell it to load all plugins into this page
rhinoLoader = {
callback: function( s ) {
s.plugins.apply(s,plugins);
}
};
steal.win().build_in_progress = true;
print(" LOADING APP ")
var pageSteal = steal.build.open("steal/rhino/empty.html").steal,
steals = pageSteal.total,
//hash of names to steals
files = {},
depends = function(stl, steals){
if(stl.dependencies){
for (var d = 0; d < stl.dependencies.length; d++) {
var depend = stl.dependencies[d];
if(!steals[depend.path]){
steals[depend.path] = true;
print("123 " + depend.path);
//depends(depend, steals);
}
}
}
},
all = function(c){
for(var i =0; i < steals.length; i++){
var pSteal =steals[i];
if(!pSteal.func){
c(pSteal)
}
}
};
print(" LOADED, GETTING DEPENDS");
all(function(stl){
files[stl.path] = stl;
})
all(function(stl){
print(stl.path)
var dependencies = files[stl.path] = [];
if(stl.dependencies){
for (var d = 0; d < stl.dependencies.length; d++) {
var depend = stl.dependencies[d];
if (depend.path !== "jquery/jquery.js") {
dependencies.push(depend.path);
}
}
}
})
steal.File("jquery/dist/standalone").mkdir();
steal.File("jquery/dist/standalone/dependencies.json").save($.toJSON(files));
//get each file ...
print("Creating jquery/dist/standalone/")
var compressor = steal.build.builders.scripts.compressors[ "localClosure"]()
for(var path in files){
if(path == "jquery/jquery.js"){
continue;
}
var content = readFile(path);
var funcContent = s.build.pluginify.getFunction(content);
if(typeof funcContent == "undefined"){
content = "";
} else {
content = "("+s.build.pluginify.getFunction(content)+")(jQuery);";
}
var out = path.replace(/\/\w+\.js/,"").replace(/\//g,".");
content = steal.build.builders.scripts.clean(content);
print(" "+out+"");
content = steal.build.builders.scripts.clean(content);
s.File("jquery/dist/standalone/"+out+".js").save(content);
s.File("jquery/dist/standalone/"+out+".min.js").save(compressor(content));
}
})
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/class/class.html deleted 100644 → 0
View file @ d87b2b21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>jQuery.Class Demo</title>
<style type='text/css'>
body {font-family: verdana}
.tabs, .history_tabs {
padding: 0px; margin: 20px 0 0 0;
}
li {
float: left;
padding: 10px;
background-color: #F6F6F6;
list-style: none;
margin-left: 10px;
}
li a {
color: #1C94C4;
font-weight: bold;
text-decoration: none;
}
li.active a {
color: #F6A828;
cursor: default;
}
.tab {
border: solid 1px #F6A828;
}
/* clearfix from jQueryUI */
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
</style>
</head>
<body>
<p>jQuery.Class Demo shows a tabs controller extended to work with history.</p>
<div id="demo-html">
<h2>Basic Tabs</h2>
<ul id='tabs1' class='ui-helper-clearfix''>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1' class='tab'>Tab 1 Content</div>
<div id='tab2' class='tab'>Tab 2 Content</div>
<div id='tab3' class='tab'>Tab 3 Content</div>
<h2>History Tabs</h2>
<ul id='tabs2' class='ui-helper-clearfix''>
<li><a href='#tab4'>Tab 4</a></li>
<li><a href='#tab5'>Tab 5</a></li>
<li><a href='#tab6'>Tab 6</a></li>
</ul>
<div id='tab4' class='tab'>Tab 4 Content</div>
<div id='tab5' class='tab'>Tab 5 Content</div>
<div id='tab6' class='tab'>Tab 6 Content</div>
</div>
<script type='text/javascript'>DEMO_HTML = document.getElementById('demo-html').innerHTML</script>
<script type='text/javascript' src='../../steal/steal.js'></script>
<script type='text/javascript'>
steal.plugins('jquery/controller/history').start();
</script>
<script type='text/javascript' id="demo-source">
$.Controller.extend("Tabs",{
init : function(){
this.element.children("li:first").addClass('active')
var tab = this.tab;
this.element.children("li:gt(0)").each(function(){
tab($(this)).hide()
})
},
tab : function(li){
return $(li.find("a").attr("href"))
},
"li click" : function(el, ev){
ev.preventDefault();
this.activate(el)
},
activate : function(el){
this.tab(this.find('.active').removeClass('active')).hide()
this.tab(el.addClass('active')).show();
}
})
//inherit from tabs
Tabs.extend("HistoryTabs",{
// ignore clicks
"li click" : function(){},
// listen for history changes
"history.** subscribe" : function(called){
var hash = window.location.hash;
this.activate(hash === '' || hash === '#' ?
this.element.find("li:first") :
this.element.find("a[href="+hash+"]").parent()
)
}
})
//adds the controller to the element
$("#tabs1").tabs();
$("#tabs2").history_tabs();
</script>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/class/class_test.js deleted 100644 → 0
View file @ d87b2b21
steal
.plugins("jquery/class") //load your app
.plugins('funcunit/qunit').then(function(){
module("jquery/class");
test("Creating", function(){
jQuery.Class.extend("Animal",
{
count: 0,
test: function() {
return this.match ? true : false
}
},
{
init: function() {
this.Class.count++;
this.eyes = false;
}
}
);
Animal.extend("Dog",
{
match : /abc/
},
{
init: function() {
this._super();
},
talk: function() {
return "Woof";
}
});
Dog.extend("Ajax",
{
count : 0
},
{
init: function( hairs ) {
this._super();
this.hairs = hairs;
this.setEyes();
},
setEyes: function() {
this.eyes = true;
}
});
new Dog();
new Animal();
new Animal();
var ajax = new Ajax(1000);
equals(2, Animal.count, "right number of animals");
equals(1, Dog.count, "right number of animals")
ok(Dog.match, "right number of animals")
ok(!Animal.match, "right number of animals")
ok(Dog.test(), "right number of animals")
ok(!Animal.test(), "right number of animals")
equals(1, Ajax.count, "right number of animals")
equals(2, Animal.count, "right number of animals");
equals(true, ajax.eyes, "right number of animals");
equals(1000, ajax.hairs, "right number of animals");
})
test("new instance",function(){
var d = Ajax.newInstance(6);
equals(6, d.hairs);
})
test("namespaces",function(){
var fb = $.Class.extend("Foo.Bar")
ok(Foo.Bar === fb, "returns class")
equals(fb.shortName, "Bar", "short name is right");
equals(fb.fullName, "Foo.Bar","fullName is right")
})
test("setups", function(){
var order = 0,
staticSetup,
staticSetupArgs,
staticInit,
staticInitArgs,
protoSetup,
protoInitArgs,
protoInit,
staticProps = {
setup: function() {
staticSetup = ++order;
staticSetupArgs = arguments;
return ["something"]
},
init: function() {
staticInit = ++order;
staticInitArgs = arguments;
}
},
protoProps = {
setup: function( name ) {
protoSetup = ++order;
return ["Ford: "+name];
},
init: function() {
protoInit = ++order;
protoInitArgs = arguments;
}
}
$.Class.extend("Car",staticProps,protoProps);
var geo = new Car("geo");
equals(staticSetup, 1);
equals(staticInit, 2);
equals(protoSetup, 3);
equals(protoInit, 4);
same($.makeArray(staticInitArgs), ["something"] )
same($.makeArray(protoInitArgs),["Ford: geo"] )
same($.makeArray(staticSetupArgs),[$.Class, "Car",staticProps, protoProps] ,"static construct");
//now see if staticSetup gets called again ...
Car.extend("Truck");
equals(staticSetup, 5, "Static setup is called if overwriting");
});
test("callback", function(){
var curVal = 0;
$.Class.extend("Car",{
show: function( value ) {
equals(curVal, value)
}
},{
show: function( value ) {
}
})
var cb = Car.callback('show');
curVal = 1;
cb(1)
curVal = 2;
var cb2 = Car.callback('show',2)
cb2();
});
test("callback error", 1,function(){
$.Class.extend("Car",{
show: function( value ) {
equals(curVal, value)
}
},{
show: function( value ) {
}
})
try{
Car.callback('huh');
ok(false, "I should have errored")
}catch(e){
ok(true, "Error was thrown")
}
})
test("Creating without extend", function(){
$.Class("Bar",{
ok : function(){
ok(true, "ok called")
}
});
new Bar().ok();
Bar("Foo",{
dude : function(){
ok(true, "dude called")
}
});
new Foo().dude(true);
})
/* Not sure I want to fix this yet.
test("Super in derived when parent doesn't have init", function(){
$.Class("Parent",{
});
Parent("Derived",{
init : function(){
this._super();
}
});
try {
new Derived();
ok(true, "Can call super in init safely")
} catch (e) {
ok(false, "Failed to call super in init with error: " + e)
}
})*/
});
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/class/qunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../funcunit/qunit/qunit.css" />
</head>
<body>
<h1 id="qunit-header">Class Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
<script type='text/javascript' src='../../steal/steal.js?jquery/class/class_test.js'></script>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/controller.html deleted 100644 → 0
View file @ d87b2b21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Controller Example</title>
<style type='text/css'>
body {font-family: verdana}
.tabs {
padding: 0px; margin: 0px;
}
.tabs li {
float: left;
padding: 10px;
background-color: #F6F6F6;
list-style: none;
margin-left: 10px;
}
.tabs li a {
color: #1C94C4;
font-weight: bold;
text-decoration: none;
}
.tabs li.active a {
color: #F6A828;
cursor: default;
}
.tab {
border: solid 1px #F6A828;
}
/* clearfix from jQueryUI */
.ui-helper-clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.ui-helper-clearfix { display: inline-block; }
/* required comment for clearfix to work in Opera \*/
* html .ui-helper-clearfix { height:1%; }
.ui-helper-clearfix { display:block; }
/* end clearfix */
</style>
</head>
<body>
<div id="demo-html">
<ul id='tabs' class='ui-helper-clearfix''>
<li><a href='#tab1'>Tab 1</a></li>
<li><a href='#tab2'>Tab 2</a></li>
<li><a href='#tab3'>Tab 3</a></li>
</ul>
<div id='tab1' class='tab'>Tab 1 Content</div>
<div id='tab2' class='tab'>Tab 2 Content</div>
<div id='tab3' class='tab'>Tab 3 Content</div>
</div>
<script type='text/javascript' src='../../steal/steal.js'></script>
<script type='text/javascript'>
steal.plugins("jquery/controller").start();
</script>
<script type='text/javascript' id="demo-source">
// create a new Tabs class
$.Controller("Tabs",{
// initialize widget
init : function(el){
// activate the first tab
$(el).children("li:first").addClass('active')
// hide the other tabs
var tab = this.tab;
this.element.children("li:gt(0)").each(function(){
tab($(this)).hide()
})
},
// helper function finds the tab for a given li
tab : function(li){
return $(li.find("a").attr("href"))
},
// hides old active tab, shows new one
"li click" : function(el, ev){
ev.preventDefault();
this.tab(this.find('.active').removeClass('active')).hide()
this.tab(el.addClass('active')).show();
}
})
// adds the controller to the element
$("#tabs").tabs();
</script>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/controller_test.js deleted 100644 → 0
View file @ d87b2b21
steal
.plugins("jquery/controller",'jquery/controller/subscribe') //load your app
.plugins('funcunit/qunit') //load qunit
.then(function(){
module("jquery/controller")
test("subscribe testing works", function(){
var ta = $("<div/>").appendTo( $("#qunit-test-area") )
ta.html("click here")
var clicks = 0, destroys = 0;
var subscribes = 0;
$.Controller.extend("MyTest",{
click: function() {
clicks++
},
"a.b subscribe" : function() {
subscribes++
},
destroy: function() {
this._super()
destroys++;
}
})
ta.my_test();
ta.trigger("click")
equals(clicks,1, "can listen to clicks")
OpenAjax.hub.publish("a.b",{})
equals(subscribes,1, "can subscribe")
var controllerInstance = ta.controller('my_test')
ok( controllerInstance.Class == MyTest, "can get controller" )
controllerInstance.destroy()
equals(destroys,1, "destroy called once")
ok(!ta.controller(), "controller is removed")
OpenAjax.hub.publish("a.b",{})
equals(subscribes,1, "subscription is torn down")
ta.trigger("click")
equals(clicks,1, "No longer listening")
ta.my_test();
ta.trigger("click")
OpenAjax.hub.publish("a.b",{})
equals(clicks,2, "can listen again to clicks")
equals(subscribes,2, "can listen again to subscription")
ta.remove();
ta.trigger("click")
OpenAjax.hub.publish("a.b",{})
equals(clicks,2, "Clicks stopped")
equals(subscribes,2, "Subscribes stopped")
})
test("document and main controllers", function(){
var a = $("<div id='test'><span/></div>").appendTo($("#qunit-test-area")),
a_inner = a.find('span'),
b = $("<div><span/></div>").appendTo($("#qunit-test-area")),
b_inner = b.find('span'),
doc_outer_clicks = 0,
doc_inner_clicks = 0,
main_outer_clicks = 0,
main_inner_clicks = 0;
$.Controller.extend("TestController", { onDocument: true }, {
click: function() {
doc_outer_clicks++;
},
"span click" : function() {
doc_inner_clicks++;
}
})
a_inner.trigger("click");
equals(doc_outer_clicks,1,"document controller handled (no-selector) click inside listening element");
equals(doc_inner_clicks,1,"document controller handled (selector) click inside listening element");
b_inner.trigger("click");
equals(doc_outer_clicks,1,"document controller ignored (no-selector) click outside listening element");
equals(doc_inner_clicks,1,"document controller ignored (selector) click outside listening element");
$(document.documentElement).controller('test').destroy();
$.Controller.extend("MainController", { onDocument: true }, {
click: function() {
main_outer_clicks++;
},
"span click" : function() {
main_inner_clicks++;
}
})
b_inner.trigger("click");
equals(main_outer_clicks,1,"main controller handled (no-selector) click");
equals(main_inner_clicks,1,"main controller handled (selector) click");
$(document.documentElement).controller('main').destroy();
a.remove();
b.remove();
})
test("bind to any special", function(){
jQuery.event.special.crazyEvent = {
}
var called = false;
jQuery.Controller.extend("WeirdBind",{
crazyEvent: function() {
called = true;
}
})
var a = $("<div id='crazy'></div>").appendTo($("#qunit-test-area"))
a.weird_bind();
a.trigger("crazyEvent")
ok(called, "heard the trigger");
$("#qunit-test-area").html("")
})
test("parameterized actions", function(){
var called = false;
jQuery.Controller.extend("WeirderBind",{
"{parameterized}" : function() {
called = true;
}
})
var a = $("<div id='crazy'></div>").appendTo($("#qunit-test-area"))
a.weirder_bind({parameterized: "sillyEvent"});
a.trigger("sillyEvent")
ok(called, "heard the trigger")
$("#qunit-test-area").html("")
})
test("windowresize", function(){
var called = false;
jQuery.Controller.extend("WindowBind",{
"{window} resize" : function() {
called = true;
}
})
$("#qunit-test-area").html("<div id='weird'>")
$("#weird").window_bind();
$(window).trigger('resize')
ok(called,"got window resize event");
$("#qunit-test-area").html("")
})
// this.delegate(this.cached.header.find('tr'), "th", "mousemove", "th_mousemove");
test("delegate", function(){
var called = false;
jQuery.Controller.extend("DelegateTest",{
click: function() {}
})
var els = $("<div><span><a href='#'>click me</a></span></div>").appendTo($("#qunit-test-area"))
var c = els.delegate_test();
c.controller().delegate(els.find("span"), "a", "click", function(){
called = true;
})
els.find("a").trigger('click')
ok(called, "delegate works")
$("#qunit-test-area").html("")
})
test("inherit", function(){
var called = false;
$.Controller.extend( "Parent", {
click: function(){
called = true;
}
})
Parent.extend( "Child", {
})
var els = $("<div><span><a href='#'>click me</a></span></div>").appendTo($("#qunit-test-area"))
els.child();
els.find("a").trigger('click')
ok(called, "inherited the click method")
$("#qunit-test-area").html("")
});
test("objects in action", function(){
$.Controller('Thing',{
"{item} someEvent" : function(thing, ev){
ok(true, "called");
equals(ev.type, "someEvent","correct event")
equals(this.Class.fullName, "Thing", "This is a controller isntance")
equals(thing.name,"Justin","Raw, not jQuery wrapped thing")
}
});
var thing1 = {name: "Justin"};
var ta = $("<div/>").appendTo( $("#qunit-test-area") )
ta.thing({item : thing1});
$(thing1).trigger("someEvent");
$("#qunit-test-area").html("");
});
test("dot",function(){
$.Controller("Dot",{
"foo.bar" : function(){
ok(true,'called')
}
});
var ta = $("<div/>").appendTo( $("#qunit-test-area") );
ta.dot().trigger("foo.bar");
$("#qunit-test-area").html("");
})
// HTMLFormElement[0] breaks
test("the right element", 1, function(){
$.Controller('FormTester',{
init : function(){
equals(this.element[0].nodeName.toLowerCase(), "form" )
}
})
$("<form><input name='one'/></form>").appendTo( $("#qunit-test-area") )
.form_tester();
$("#qunit-test-area").html("")
})
});
labs/architecture-examples/javascriptmvc/jquery/controller/history/history.html deleted 100644 → 0
View file @ d87b2b21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>hover</title>
<style type='text/css'>
body {font-family: verdana}
.error {border: solid 1px red;}
.error_text { color: red; font-size: 10px;}
td {padding: 3px;}
.list-test, .object-list-test, .nested-object-test {color: blue; cursor: pointer; text-decoration: underline;}
</style>
</head>
<body>
<div id="history_demo">
<a href="#first&param=I">First</a>
<a href="#second&param=love">Second</a>
<a href="#third&param=jmvc!">Third</a>
<a class="list-test">Fourth</a>
<a class="object-list-test">Fifth</a>
<a class="nested-object-test">Sixth</a>
</div>
<script type='text/javascript' src='../../../steal/steal.js?steal[app]=jquery/controller/history&steal[env]=development'>
</script>
<script type='text/javascript'>
$.Controller.extend('HistoryDemoController',{
},
{
"history.first.index subscribe" : function(called, data) {
alert("First[param] : " + data.param);
},
"history.second.index subscribe" : function(called, data) {
alert("Second[param] : " + data.param);
},
"history.third.index subscribe" : function(called, data) {
alert("Third[param] : " + data.param);
},
"history.fourth.index subscribe" : function(called, data) {
alert("Fourth[myList] : [" + data.myList.join(', ') + "]");
},
"history.fifth.index subscribe" : function(called, data) {
var obj_list = [];
$.each(data.myObjectList, function(i, obj) {
var params = [];
$.each(obj, function(key, val) {params.push(key + ": " + val);});
obj_list.push("{" + params.join(", ") + "}");
});
alert("Fourth[myObjectList] : [" + obj_list.join(", ") + "]");
},
"history.sixth.index subscribe" : function(called, data) {
var params = [];
// myObject.a (object)
var vars_a = [];
$.each(data.myObject.a, function(key, val) {vars_a.push(key + ": "+val)});
params.push("a: {" + vars_a.join(", ") + "}");
// myObject.b (array)
params.push("b: [" + data.myObject.b.join(", ") + "]");
// myObject.c (array of objects)
var obj_list = [];
$.each(data.myObject.c, function(i, obj) {
var obj_params = [];
$.each(obj, function(key, val) {obj_params.push(key + ": " + val);});
obj_list.push("\t{" + obj_params.join(", ") + "}");
});
params.push("c: [\n" + obj_list.join(",\n ") + "\t\n]");
alert("Fourth[myObject] : {\n" + params.join(",\n") + "\n}");
},
".list-test click" : function(el, ev){
this.history_add({controller:'fourth', myList:[1,2,3]});
},
".object-list-test click" : function(el, ev){
var myObjectList = [
{
one: 1,
two: 2,
three: 3
},
{
four: 4,
five: 5,
six: 6
}
];
this.history_add({controller:'fifth', myObjectList:myObjectList});
},
".nested-object-test click" : function(el, ev) {
var myObject = {
a: {
one: 1,
two: 2,
three: 3
},
b: [1, 2, 3],
c: [
{
one: 1,
two: 2,
three: 3
},
{
four: 4,
five: 5,
six: 6
}
]
};
this.history_add({controller:'sixth', myObject:myObject});
}
});
$("#history_demo").history_demo();
</script>
</body>
</html>
labs/architecture-examples/javascriptmvc/jquery/controller/history/history.js deleted 100644 → 0
View file @ d87b2b21
steal.plugins('jquery/controller/subscribe',
'jquery/event/hashchange',
'jquery/lang/deparam').then(function($){
/**
* @page jquery.controller.history History Events
* @parent jQuery.Controller
* @plugin jquery/controller/history
* The jquery/controller/history plugin adds
* browser hash (#) based history support.
*
* It allows you to listen to hashchange events with OpenAjax.hub.
*
* Typically you subscribe to a history event in your controllers:
*
* $.Controller("MyHistory",{
* "history.pagename subscribe" : function(called, data){
* //called when hash = #pagename
* }
* })
*
* ## Event Names
*
* When a history event happens, an OpenAjax message is produced that
* starts with "history.". The remainder of the message name depends on the
* value of the "hash".
*
* The following shows hash values and
* the corresponding published message and data.
*
* "#foo=bar" -> "history.index" {foo: bar}
* "#foo/bar" -> "history.foo.bar" {}
* "#foo&bar=baz" -> "history.foo" {bar: baz}
*
* Essentially, if the hash starts with something like #foo/bar, this gets
* added to the message name as "foo.bar". Once "&" is found, it adds the remainder
* as name-value pairs to the message data.
*
* ## Controller Helper Functions
*
* The methods on the left are added to Controller.prototype and make it easier to
* make changes to history.
*
*/
var keyBreaker = /([^\[\]]+)|(\[\])/g;
$.Controller.History = {
/**
* @hide
* returns the pathname part
*
* // if the url is "#foo/bar&foo=bar"
* $.Controller.History.pathname() -> 'foo/bar'
*
*/
pathname : function(path) {
var parts = path.match(/#([^&]*)/);
return parts ? parts[1] : null
},
/**
* @hide
* returns the search part, but without the first &
*
* // if the url is "#foo/bar&foo=bar"
* $.Controller.History.search() -> 'foo=bar'
*/
search : function(path) {
var parts = path.match(/#[^&]*&(.*)/);
return parts ? parts[1] : null
},
/**
* @hide
* Returns the data
* @param {Object} path
*/
getData: function(path) {
var search = $.Controller.History.search(path),
digitTest = /^\d+$/;
if(! search || ! search.match(/([^?#]*)(#.*)?$/) ) {
return {};
}
// Support the legacy format that used MVC.Object.to_query_string that used %20 for
// spaces and not the '+' sign;
search = search.replace(/\+/g,"%20")
return $.String.deparam(search);
}
};
jQuery(function($) {
$(window).bind('hashchange',function() {
var data = $.Controller.History.getData(location.href),
folders = $.Controller.History.pathname(location.href) || 'index',
hasSlash = (folders.indexOf('/') != -1);
if( !hasSlash && folders != 'index' ) {
folders += '/index';
}
OpenAjax.hub.publish("history."+folders.replace("/","."), data);
});
setTimeout(function(){
$(window).trigger('hashchange')
},1) //immediately after ready
})
/**
* @add jQuery.Controller.prototype
*/
$.extend($.Controller.prototype, {
/**
* @parent jquery.controller.history
* Redirects to another page.
* @plugin 'dom/history'
* @param {Object} options an object that will turned into a url like #controller/action&param1=value1
*/
redirectTo: function(options){
var point = this._get_history_point(options);
location.hash = point;
},
/**
* @parent jquery.controller.history
* Redirects to another page by replacing current URL with the given one. This
* call will not create a new entry in the history.
* @plugin 'dom/history'
* @param {Object} options an object that will turned into a url like #controller/action&param1=value1
*/
replaceWith: function(options){
var point = this._get_history_point(options);
location.replace(location.href.split('#')[0] + point);
},
/**
* @parent jquery.controller.history
* Adds history point to browser history.
* @plugin 'dom/history'
* @param {Object} options an object that will turned into a url like #controller/action&param1=value1
* @param {Object} data extra data saved in history -- NO LONGER SUPPORTED
*/
historyAdd : function(options, data) {
var point = this._get_history_point(options);
location.hash = point;
},
/**
* @hide
* @parent jquery.controller.history
* Creates a history point from given options. Resultant history point is like #controller/action&param1=value1
* @plugin 'dom/history'
* @param {Object} options an object that will turned into history point
*/
_get_history_point: function(options) {
var controller_name = options.controller || this.Class.underscoreName;
var action_name = options.action || 'index';
/* Convert the options to parameters (removing controller and action if needed) */
if(options.controller)
delete options.controller;
if(options.action)
delete options.action;
var paramString = (options) ? $.param(options) : '';
if(paramString.length)
paramString = '&' + paramString;
return '#' + controller_name + '/' + action_name + paramString;
},
/**
* @parent jquery.controller.history
* Provides current window.location parameters as object properties.
* @plugin 'dom/history'
*/
pathData :function() {
return $.Controller.History.getData(location.href);
}
});
});
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/history/html5/html5.js deleted 100644 → 0
View file @ d87b2b21
steal.plugins('jquery/controller/subscribe').then(function($){
var hasHistoryManagementSupport = !!(window.history && history.pushState);
if (hasHistoryManagementSupport) {
steal.dev.log("WARNING: The current browser does not support HTML5 History Management.");
} else {
window.onpopstate = function(event) {
OpenAjax.hub.publish("history."+location.href, (event && event.state) || {});
};
setTimeout(function(){
window.onpopstate();
}, 1); // immediately after ready
$.extend($.Controller.prototype, {
redirectTo: function(url, data, title) {
data = data || {};
window.history.pushState(data, title, url);
this.publish("history." + url, data);
}
});
$.Controller.processors["windowpopstate"] = function(el, event, selector, cb) {
$(window).bind("popstate", cb);
return function(){
$(window).unbind("popstate", cb);
}
};
}
})
labs/architecture-examples/javascriptmvc/jquery/controller/history/html5/qunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../../funcunit/qunit/qunit.css" />
<style>
body {
margin: 0px; padding: 0px;
}
</style>
<script type='text/javascript' src='../../../../steal/steal.js?steal[app]=jquery/controller/history/html5/qunit'></script>
</head>
<body>
<h1 id="qunit-header">HTML5 History Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<div id="test-content"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
</body>
</html>
labs/architecture-examples/javascriptmvc/jquery/controller/history/html5/qunit/qunit.js deleted 100755 → 0
View file @ d87b2b21
steal.plugins("funcunit/qunit", "jquery/controller/history/html5").then(function($){
module("jquery/controller/history/html5",{
setup: function(){
}
})
$.Controller.extend("HTML5HistoryTestController", {
},
{
"history.** subscribe": function(event_name, params) {
this["gotHistory"](event_name.replace("history.", ""), params);
},
gotHistory: $.noop,
"window windowpopstate": function(ev) {
this["gotPopState"](location.href, (ev.originalEvent && ev.originalEvent.state) || {});
},
gotPopState: $.noop
});
var originalLocation = location.href;
asyncTest("Controller redirect should work", function(){
expect(1);
var testController = new HTML5HistoryTestController($("<div />").get(0));
var testLocation = "/test/location";
testController["gotHistory"] = function(location, state) {
start();
equals(location, testLocation);
testController["gotHistory"] = $.noop;
testController.redirectTo(originalLocation);
};
stop();
testController.redirectTo(testLocation);
});
asyncTest("State data should persist", function(){
expect(1);
var testController = new HTML5HistoryTestController($("<div />").get(0));
testController["gotHistory"] = function(location, state) {
start();
equals(state.hi, "mom");
testController["gotHistory"] = $.noop;
testController.redirectTo(originalLocation);
};
stop();
testController.redirectTo("/test/location", { hi: "mom" });
});
asyncTest("Should listen to windowpopstate", function(){
expect(2);
var testController = new HTML5HistoryTestController($("<div />").get(0));
testController["gotPopState"] = function(location, state) {
start();
ok(location.indexOf("/test/location") !== -1);
equals(state.hi, "mom");
testController["gotPopState"] = $.noop;
testController.redirectTo(originalLocation);
};
stop();
testController.redirectTo("/test/location", { hi: "mom" });
testController["gotHistory"] = function(location, state) {
testController["gotHistory"] = $.noop;
window.history.back();
};
testController.redirectTo("/test/location2", { hi: "mom2" });
});
});
labs/architecture-examples/javascriptmvc/jquery/controller/history/qunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../funcunit/qunit/qunit.css" />
<style>
body {
margin: 0px; padding: 0px;
}
</style>
<script type='text/javascript' src='../../../steal/steal.js?steal[app]=jquery/controller/history/qunit'></script>
</head>
<body>
<h1 id="qunit-header">Model Store Cookie Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<div id="test-content"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/history/qunit/qunit.js deleted 100644 → 0
View file @ d87b2b21
steal.plugins('funcunit/qunit','jquery/controller/history').then(function($){
module("jquery/controller/history",{
setup: function(){
}
})
test("Basic getData",function(){
var data = $.Controller.History.getData("#foo/bar&a=b");
equals(data.a,"b")
var data = $.Controller.History.getData("#foo/bar&a=b&c=d");
equals(data.a,"b")
equals(data.c,"d")
})
test("Nested getData",function(){
var data = $.Controller.History.getData("#foo/bar&a[b]=1&a[c]=2");
equals(data.a.b,1)
equals(data.a.c,2)
var data = $.Controller.History.getData("#foo/bar&a[]=1&a[]=2");
equals(data.a[0],1)
equals(data.a[1],2)
var data = $.Controller.History.getData("#foo/bar&a[b][]=1&a[b][]=2");
equals(data.a.b[0],1)
equals(data.a.b[1],2)
var data = $.Controller.History.getData("#foo/bar&a[0]=1&a[1]=2");
equals(data.a[0],1)
equals(data.a[1],2)
})
})
labs/architecture-examples/javascriptmvc/jquery/controller/pages/document.js deleted 100644 → 0
View file @ d87b2b21
/**
@page jquery.controller.documentcontrollers Document Controllers
@parent jQuery.Controller
Document Controllers delegate on the
documentElement. You don't have to attach an instance as this will be done
for you when the controller class is created. Document Controllers, with the
exception of MainControllers,
add an implicit '#CONTROLLERNAME' before every selector.
To create a document controller, you just have to set
the controller's [jQuery.Controller.static.onDocument static onDocument]
property to true.
@codestart
$.Controller.extend('TodosController',
{onDocument: true},
{
".todo mouseover" : function( el, ev ) { //matches #todos .todo
el.css("backgroundColor","red")
},
".todo mouseout" : function( el, ev ) { //matches #todos .todo
el.css("backgroundColor","")
},
".create click" : function() { //matches #todos .create
this.find("ol").append("&lt;li class='todo'>New Todo&lt;/li>");
}
})
@codeend
DocumentControllers should be used sparingly. They are not very reusable.
They should only be used for glueing together other controllers and page
layout.
Often, a Document Controller's <b>"ready"</b> event will be used to create
necessary Element Controllers.
@codestart
$.Controller.extend('SidebarController',
{onDocument: true},
{
<b>ready</b> : function() {
$(".slider").slider()
},
"a.tag click" : function() {..}
})
@codeend
## MainControllers
MainControllers are documentControllers that do not add '#CONTROLLERNAME' before every selector. This controller
should only be used for page wide functionality and setup.
@codestart
$.Controller.extend("MainController",{
hasActiveElement : document.activeElement || false
},{
focus : funtion(el){
if(!this.Class.hasActiveElement)
document.activeElement = el[0] //tracks active element
}
})
@codeend
*/
//
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/pages/listening.js deleted 100644 → 0
View file @ d87b2b21
/**
@page jquery.controller.listening Listening To Events
@parent jQuery.Controller
Controllers make creating and tearing down event handlers extremely
easy. The tearingdown of event handlers is especially important
in preventing memory leaks in long lived applications.
## Automatic Binding
When a [jQuery.Controller.prototype.setup new controller is created],
contoller checks its prototype methods for functions that are named like
event handlers. It binds these functions to the
controller's [jQuery.Controller.prototype.element element] with
event delegation. When
the controller is destroyed (or it's element is removed from the page), controller
will unbind its event handlers automatically.
For example, each of the following controller's functions will automatically
bound:
$.Controller("Crazy",{
// listens to all clicks on this element
"click" : function(el, ev){},
// listens to all mouseovers on
// li elements withing this controller
"li mouseover" : function(el, ev){}
// listens to the window being resized
"{window} resize" : function(window, ev){}
})
Controller will bind function names with spaces, standard DOM events, and
event names in $.event.special.
In general, Controller will know automatically when to bind event handler functions except for
one case - event names without selectors that are not in $.event.special.
But to correct for this, you just need to add the
function to the [jQuery.Controller.static.listensTo listensTo]
property. Here's how:
$.Controller.extend("MyShow",{
listensTo: ["show"]
},{
show: function( el, ev ) {
el.show();
}
})
$('.show').my_show().trigger("show");
## Callback parameters
Event handlers bound with controller are called back with the element and the event
as parameters. <b>this</b> refers to the controller instance. For example:
$.Controller("Tabs",{
// li - the list element that was clicked
// ev - the click event
"li click" : function(li, ev){
this.tab(li).hide()
},
tab : function(li){
return $(li.find("a").attr("href"))
}
})
## Templated Event Bindings
One of Controller's most powerful features is templated event
handlers. You can parameterize the event name,
the selector, or event the root element.
### Templating event names and selectors:
Often, you want to make a widget's behavior
configurable. A common example is configuring which event
a menu should show a sub-menu (ex: on click or mouseenter). The
following controller lets you configure when a menu should show
sub-menus:
The following makes two buttons. One says hello on click,
the other on a 'tap' event.
$.Controller("Menu",{
"li {showEvent}" : function(el){
el.children('ul').show()
}
})
$("#clickMe").menu({showEvent : "click"});
$("#touchMe").menu({showEvent : "mouseenter"});
$.Controller replaces value in <code>{}</code> with
values in a
controller's [jQuery.Controller.prototype.options options]. This means
we can easily provide a default <code>showEvent</code> value and create
a menu without providing a value like:
$.Controller("Menu",
{
defaults : {
showEvent : "click"
}
},
{
"li {showEvent}" : function(el){
el.children('ul').show()
}
});
$("#clickMe").menu(); //defaults to using click
Sometimes, we might might want to configure our widget to
use different elements. The following makes the menu widget's
<code>button</code> elements configurable:
$.Controller("Menu",{
"{button} {showEvent}" : function(el){
el.children('ul').show()
}
})
$('#buttonMenu').menu({button: "button"});
### Templating the root element.
Finally, controller lets you bind to objects outside
of the [jQuery.Controller.prototype.element controller's element].
The following listens to clicks on the window:
$.Controller("HideOnClick",{
"{window} click" : function(){
this.element.hide()
}
})
The following listens to Todos being created:
$.Controller("NewTodos",{
"{App.Models.Todo} created" : function(Todo, ev, newTodo){
this.element.append("newTodos.ejs", newTodo)
}
});
But instead of making NewTodos only work with the Todo model,
we can make it configurable:
$.Controller("Newbie",{
"{model} created" : function(Model, ev, newItem){
this.element.append(this.options.view, newItem)
}
});
$('#newItems').newbie({
model: App.Models.Todo,
view: "newTodos.ejs"
})
### How Templated events work
When looking up a value to replace <code>{}</code>,
controller first looks up the item in the options, then it looks
up the value in the window object. It does not use eval to look up the
object. Instead it uses [jQuery.String.getObject].
## Subscribing to OpenAjax messages and custom bindings
The jquery/controller/subscribe plugin allows controllers to listen
to OpenAjax.hub messages like:
$.Controller("Listener",{
"something.updated subscribe" : function(called, data){
}
})
You can create your own binders by adding to [jQuery.Controller.static.processors].
## Manually binding to events.
The [jQuery.Controller.prototype.bind] and [jQuery.Controller.prototype.delegate]
methods let you listen to events on other elements. These event handlers will
be unbound when the controller instance is destroyed.
*/
//
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/pages/plugin.js deleted 100644 → 0
View file @ d87b2b21
/**
@page jquery.controller.plugin The generated jQuery plugin
@parent jQuery.Controller
When you create a controller, it creates a jQuery plugin that can be
used to:
- Create controllers on an element or elements
- Call controller methods
- Update a controller
For example, the following controller:
$.Controller("My.Widget",{
say : function(){
alert(this.options.message);
}
})
creates a <code>jQuery.fn.my_widget</code> method that you can use like:
// create my_widget on each .thing
$(".thing").my_widget({message : "Hello"})
// alerts "Hello"
$(".thing").my_widget("say");
// updates the message option
$(".thing").my_widget({message : "World"});
// alerts "World"
$(".thing").my_widget("say");
Note that in every case, the my_widget plugin
returns the original jQuery collection for chaining (<code>$('.thing')</code>). If you want to
get a value from a controller, use the [jQuery.fn.controllers] or [jQuery.fn.controller].
## Creating controllers
When a controller's jQuery plugin helper is used on a jQuery collection, it goes to each
element and tests if it has a controller instance on the element. If it does not, it creates one.
It calls <code>new YourController</code> with the element and any additional arguments you passed
to the jQuery plugin helper. So for example, say there are 2 elements in <code>$('.thing')</code>.
This:
$(".thing").my_widget({message : "Hello"})
Does the exact same thing as:
var things = $('.thing'),
options = {message : "Hello"};
new My.Widget(things[0],options);
new My.Widget(things[1],options);
Note, when a <code>new Class</code> is created, it calls your
class's prototype setup and init methods. Read [jQuery.Controller.prototype.setup controller's setup]
for the details on what happens when a new controller is created.
## Calling methods on controllers
Once a Controller is already on an element, you can call methods on it with the same jQuery
helper. The first param to the helper is the name of the method, the following params are
passed to the jQuery function. For example:
$.Controller("Adder",{
sum : function(first, second, third){
this.element.text(first+second+third);
}
})
// add an adder to the page
$("#myadder").adder()
// show the sum of 1+2+3
$("#myadder").adder("sum",1,2,3);
## Naming
By default, a controller's jQuery helper is the controller name:
- [jQuery.String.underscore underscored]
- "." replaced with "_"
- with Controllers removed.
Here are some examples:
$.Controller("Foo") // -> .foo()
$.Controller("Foo.Bar") // -> .foo_bar()
$.Controller("Foo.Controllers.Bar") // -> .foo_bar()
You can overwrite the Controller's default name by setting a static pluginName property:
$.Controller("My.Tabs",
{
pluginName: "tabs"
},
{ ... })
$("#tabs").tabs()
*/
//
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/qunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../funcunit/qunit/qunit.css" />
<style>
body {
margin: 0px; padding: 0px;
}
</style>
<script type='text/javascript' src='../../steal/steal.js?jquery/controller/controller_test.js'></script>
</head>
<body>
<h1 id="qunit-header">Controller Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<div id="test-content"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/subscribe/funcunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../steal/test/qunit/qunit.css" />
<style>
body {
margin: 0px; padding: 0px;
}
</style>
<script type='text/javascript' src='../../../steal/steal.js?steal[app]=jquery/controller/subscribe/test/funcunit'></script>
</head>
<body>
<h1 id="qunit-header">subscribe Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<div id="test-content"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/subscribe/subscribe.html deleted 100644 → 0
View file @ d87b2b21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>hover</title>
<style type='text/css'>
body {font-family: verdana}
.error {border: solid 1px red;}
.error_text { color: red; font-size: 10px;}
td {padding: 3px;}
.subscribe, .subscribes {
border: solid 1px green;
}
.subscribed {
background-color: yellow;
}
.mysubscribe {
border: solid 1px red;
}
</style>
</head>
<body>
<div id="testSubscribe">
<div id="subscribe1">
subscribe me
</div>
<h2><a href="#" id="off">Turn OFF Above</a></h2>
</div>
<script type='text/javascript'
src='../../../steal/steal.js?steal[app]=jquery/controller/subscribe&steal[env]=development'
package='main.js'
compress='false'>
</script>
<script type='text/javascript'>
$.Controller.extend('subscribeTest',{
onDocument: false
},
{
"#subscribe1 click": function(el, ev){
ev.stopPropagation();
this.publish("oaSubscribe1", {"params":"Hola Mundo"});
},
"oaSubscribe1 subscribe": function(called, data){
alert("subscribe1 " + data.params + " : " + this.Class.shortName);
}
});
var subscribeController = new subscribeTest($("#testSubscribe")[0]);
$("#off").bind("click",function(){
subscribeController.destroy();
})
</script>
</body>
</html>
labs/architecture-examples/javascriptmvc/jquery/controller/subscribe/subscribe.js deleted 100644 → 0
View file @ d87b2b21
/*global OpenAjax: true */
steal.plugins('jquery/controller', 'jquery/lang/openajax').then(function() {
/**
* @function jQuery.Controller.static.processors.subscribe
* @parent jQuery.Controller.static.processors
* @plugin jquery/controller/subscribe
* Adds OpenAjax.Hub subscribing to controllers.
*
* $.Controller("Subscriber",{
* "recipe.updated subscribe" : function(called, recipe){
*
* },
* "todo.* subscribe" : function(called, todo){
*
* }
* })
*
* You should typically be listening to jQuery triggered events when communicating between
* controllers. Subscribe should be used for listening to model changes.
*
* ### API
*
* This is the call signiture for the processor, not the controller subscription callbacks.
*
* @param {HTMLElement} el the element being bound. This isn't used.
* @param {String} event the event type (subscribe).
* @param {String} selector the subscription name
* @param {Function} cb the callback function
*/
jQuery.Controller.processors.subscribe = function( el, event, selector, cb ) {
var subscription = OpenAjax.hub.subscribe(selector, cb);
return function() {
var sub = subscription;
OpenAjax.hub.unsubscribe(sub);
};
};
/**
* @add jQuery.Controller.prototype
*/
//breaker
/**
* @function publish
* @hide
* Publishes a message to OpenAjax.hub.
* @param {String} message Message name, ex: "Something.Happened".
* @param {Object} data The data sent.
*/
jQuery.Controller.prototype.publish = function() {
OpenAjax.hub.publish.apply(OpenAjax.hub, arguments);
};
});
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/view/qunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../funcunit/qunit/qunit.css" />
<style>
body {
margin: 0px; padding: 0px;
}
</style>
<script type='text/javascript' src='../../../steal/steal.js?jquery/controller/view/test/qunit/controller_view_test.js'></script>
</head>
<body>
<h1 id="qunit-header">Controller Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<div id="test-content"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/controller/view/test/qunit/controller_view_test.js deleted 100644 → 0
View file @ d87b2b21
steal.plugins('jquery/controller/view','jquery/view/micro','funcunit/qunit') //load qunit
.then(function(){
module("jquery/controller/view");
test("this.view", function(){
$.Controller.extend("jquery.Controller.View.Test.Qunit",{
init: function() {
this.element.html(this.view())
}
})
jQuery.View.ext = ".micro";
$("#qunit-test-area").append("<div id='cont_view'/>");
new jquery.Controller.View.Test.Qunit( $('#cont_view') );
ok(/Hello World/i.test($('#cont_view').text()),"view rendered")
});
});
labs/architecture-examples/javascriptmvc/jquery/controller/view/test/qunit/qunit.js deleted 100644 → 0
View file @ d87b2b21
//we probably have to have this only describing where the tests are
steal
.plugins('jquery/controller/view','jquery/view/micro') //load your app
.plugins('funcunit/qunit') //load qunit
.then("controller_view_test")
labs/architecture-examples/javascriptmvc/jquery/controller/view/view.js deleted 100644 → 0
View file @ d87b2b21
steal.plugins('jquery/controller', 'jquery/view').then(function( $ ) {
jQuery.Controller.getFolder = function() {
return jQuery.String.underscore(this.fullName.replace(/\./g, "/")).replace("/Controllers", "");
};
var calculatePosition = function( Class, view, action_name ) {
var slashes = Class.fullName.replace(/\./g, "/"),
hasControllers = slashes.indexOf("/Controllers/" + Class.shortName) != -1,
path = jQuery.String.underscore(slashes.replace("/Controllers/" + Class.shortName, "")),
controller_name = Class._shortName,
suffix = (typeof view == "string" && view.match(/\.[\w\d]+$/)) || jQuery.View.ext;
//calculate view
if ( typeof view == "string" ) {
if ( view.substr(0, 2) == "//" ) { //leave where it is
} else {
view = "//" + new steal.File('views/' + (view.indexOf('/') !== -1 ? view : (hasControllers ? controller_name + '/' : "") + view)).joinFrom(path) + suffix;
}
} else if (!view ) {
view = "//" + new steal.File('views/' + (hasControllers ? controller_name + '/' : "") + action_name.replace(/\.|#/g, '').replace(/ /g, '_')).joinFrom(path) + suffix;
}
return view;
};
var calculateHelpers = function( myhelpers ) {
var helpers = {};
if ( myhelpers ) {
if ( jQuery.isArray(myhelpers) ) {
for ( var h = 0; h < myhelpers.length; h++ ) {
jQuery.extend(helpers, myhelpers[h]);
}
}
else {
jQuery.extend(helpers, myhelpers);
}
} else {
if ( this._default_helpers ) {
helpers = this._default_helpers;
}
//load from name
var current = window;
var parts = this.Class.fullName.split(/\./);
for ( var i = 0; i < parts.length; i++ ) {
if ( typeof current.Helpers == 'object' ) {
jQuery.extend(helpers, current.Helpers);
}
current = current[parts[i]];
}
if ( typeof current.Helpers == 'object' ) {
jQuery.extend(helpers, current.Helpers);
}
this._default_helpers = helpers;
}
return helpers;
};
/**
* @add jQuery.Controller.prototype
*/
jQuery.Controller.prototype.
/**
* @tag view
* Renders a View template with the controller instance. If the first argument
* is not supplied,
* it looks for a view in /views/controller_name/action_name.ejs.
* If data is not provided, it uses the controller instance as data.
* @codestart
* TasksController = $.Controller.extend('TasksController',{
* click: function( el ) {
* // renders with views/tasks/click.ejs
* el.html( this.view() )
* // renders with views/tasks/under.ejs
* el.after( this.view("under", [1,2]) );
* // renders with views/shared/top.ejs
* el.before( this.view("shared/top", {phrase: "hi"}) );
* }
* })
* @codeend
* @plugin controller/view
* @return {String} the rendered result of the view.
* @param {String} [optional1] view The view you are going to render. If a view isn't explicity given
* this function will try to guess at the correct view as show in the example code above.
* @param {Object} [optional2] data data to be provided to the view. If not present, the controller instance
* is used.
* @param {Object} [optional3] myhelpers an object of helpers that will be available in the view. If not present
* this controller class's "Helpers" property will be used.
*
*/
view = function( view, data, myhelpers ) {
//shift args if no view is provided
if ( typeof view != "string" && !myhelpers ) {
myhelpers = data;
data = view;
view = null;
}
//guess from controller name
view = calculatePosition(this.Class, view, this.called);
//calculate data
data = data || this;
//calculate helpers
var helpers = calculateHelpers.call(this, myhelpers);
return jQuery.View(view, data, helpers); //what about controllers in other folders?
};
});
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/closest/closest.js deleted 100644 → 0
View file @ d87b2b21
/**
* @add jQuery.fn
*/
steal.plugins('jquery/dom').then(function(){
/**
* @function closest
* @parent dom
* Overwrites closest to allow open > selectors. This allows controller actions such as:
* @codestart
* ">li click" : function( el, ev ) { ... }
* @codeend
*/
var oldClosest = jQuery.fn.closest;
jQuery.fn.closest = function(selectors, context){
var rooted = {}, res, result, thing, i, j, selector, rootedIsEmpty = true, selector, selectorsArr = selectors;
if(typeof selectors == "string") selectorsArr = [selectors];
$.each(selectorsArr, function(i, selector){
if(selector.indexOf(">") == 0 ){
if(selector.indexOf(" ") != -1){
throw " closest does not work with > followed by spaces!"
}
rooted[( selectorsArr[i] = selector.substr(1) )] = selector;
if(typeof selectors == "string") selectors = selector.substr(1);
rootedIsEmpty = false;
}
})
res = oldClosest.call(this, selectors, context);
if(rootedIsEmpty) return res;
i =0;
while(i < res.length){
result = res[i], selector = result.selector;
if (rooted[selector] !== undefined) {
result.selector = rooted[selector];
rooted[selector] = false;
if(typeof result.selector !== "string" || result.elem.parentNode !== context ){
res.splice(i,1);
continue;
}
}
i++;
}
return res;
}
})
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/compare/compare.html deleted 100644 → 0
View file @ d87b2b21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Compare Element Positions</title>
<style type='text/css'>
body {font-family: verdana}
div {
border: solid 1px black;
margin: 5px;
padding: 5px;
font-size: 12px;
}
.red {
background-color: red;
}
.green {
background-color: green;
}
.hide {
display: none;
}
h3 {
margin: 20px 0px 0px 0px;
}
th {
padding: 0px 5px;
color: gray;
}
td {
padding: 0px 5px;
}
</style>
</head>
<body>
<p>Click 2 elements to compare them.</p>
<pre>
<code>$('.red').compare($('.green')) = <span id='result'></span></code>
</pre>
<div id="demo-html">
<div>
A
<div>A.1</div>
<div>A.2</div>
</div>
<div>
B
</div>
</div>
<h3 class='hide'>Key</h3>
<table class='hide'>
<tr><th>Bits</th><th>Number</th><th>Meaning</th></tr>
<tr><td>000000</td><td>0</td><td>Elements are identical.</td></tr>
<tr><td>000001</td><td>1</td><td>The nodes are in different documents (or one is outside of a document).</td></tr>
<tr><td>000010</td><td>2</td><td>Node B precedes Node A.</td></tr>
<tr><td>000100</td><td>4</td><td>Node A precedes Node B.</td></tr>
<tr><td>001000</td><td>8</td><td>Node B contains Node A.</td></tr>
<tr><td>010000</td><td>16</td><td>Node A contains Node B.</td></tr>
</table>
<script type='text/javascript'
src='../../../steal/steal.js?jquery/dom/compare/compare.js'>
</script>
<script id="demo-source" type='text/javascript'>
var placing = 'red'
//on click, set red and green and compare positions
$('div').click(function(ev){
var next = placing == 'red' ? 'green' : 'red';
$('.'+placing).removeClass(placing)
$(this).addClass(placing)
placing = next
ev.stopPropagation();
//don't worry about repeat queries for simple example
if($('.green').length){
$("#result").text( $('.red').compare($('.green')) )
}
})
</script>
<script type='text/javascript'>
$(function(){
if(window.parent == window){
$('.hide').show()
}
})
</script>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/compare/compare.js deleted 100644 → 0
View file @ d87b2b21
/**
* @add jQuery.fn
*/
steal.plugins('jquery/dom').then(function($){
/**
* @function compare
* @parent dom
* @download http://jmvcsite.heroku.com/pluginify?plugins[]=jquery/dom/compare/compare.js
*
* Compares the position of two nodes and returns a bitmask detailing how they are positioned
* relative to each other.
*
* $('#foo').compare($('#bar')) //-> Number
*
* You can expect it to return the same results as
* [http://www.w3.org/TR/DOM-Level-3-Core/core.html#Node3-compareDocumentPosition | compareDocumentPosition].
* Parts of this documentation and source come from [http://ejohn.org/blog/comparing-document-position | John Resig].
*
* ## Demo
* @demo jquery/dom/compare/compare.html
* @test jquery/dom/compare/qunit.html
* @plugin dom/compare
*
*
* @param {HTMLElement|jQuery} element an element or jQuery collection to compare against.
* @return {Number} A bitmap number representing how the elements are positioned from each other.
*
* If the code looks like:
*
* $('#foo').compare($('#bar')) //-> Number
*
* Number is a bitmap with with the following values:
* <table class='options'>
* <tr><th>Bits</th><th>Number</th><th>Meaning</th></tr>
* <tr><td>000000</td><td>0</td><td>Elements are identical.</td></tr>
* <tr><td>000001</td><td>1</td><td>The nodes are in different
* documents (or one is outside of a document).</td></tr>
* <tr><td>000010</td><td>2</td><td>#bar precedes #foo.</td></tr>
* <tr><td>000100</td><td>4</td><td>#foo precedes #bar.</td></tr>
* <tr><td>001000</td><td>8</td><td>#bar contains #foo.</td></tr>
* <tr><td>010000</td><td>16</td><td>#foo contains #bar.</td></tr>
* </table>
*/
jQuery.fn.compare = function(element){ //usually
//element is usually a relatedTarget, but element/c it is we have to avoid a few FF errors
try{ //FF3 freaks out with XUL
element = element.jquery ? element[0] : element;
}catch(e){
return null;
}
if (window.HTMLElement) { //make sure we aren't coming from XUL element
var s = HTMLElement.prototype.toString.call(element)
if (s == '[xpconnect wrapped native prototype]' || s == '[object XULElement]') return null;
}
if(this[0].compareDocumentPosition){
return this[0].compareDocumentPosition(element);
}
if(this[0] == document && element != document) return 8;
var number = (this[0] !== element && this[0].contains(element) && 16) + (this[0] != element && element.contains(this[0]) && 8),
docEl = document.documentElement;
if(this[0].sourceIndex){
number += (this[0].sourceIndex < element.sourceIndex && 4)
number += (this[0].sourceIndex > element.sourceIndex && 2)
number += (this[0].ownerDocument !== element.ownerDocument ||
(this[0] != docEl && this[0].sourceIndex <= 0 ) ||
(element != docEl && element.sourceIndex <= 0 )) && 1
}else{
var range = document.createRange(),
sourceRange = document.createRange(),
compare;
range.selectNode(this[0]);
sourceRange.selectNode(element);
compare = range.compareBoundaryPoints(Range.START_TO_START, sourceRange);
}
return number;
}
});
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/compare/compare_test.js deleted 100644 → 0
View file @ d87b2b21
steal
.plugins("jquery/dom/compare") //load your app
.plugins('funcunit/qunit').then(function(){
module("jquery/dom/compare")
test("Compare cases", function(){
$(document.body).append("<div id='outer'><div class='first'></div><div class='second'></div>")
var outer = $("#outer"),
first= outer.find(".first"), second = outer.find('.second')
equals(outer.compare(outer) , 0, "identical elements")
var outside = document.createElement("div")
ok(outer.compare(outside) & 1, "different documents")
equals(outer.compare(first), 20, "A container element");
equals(outer.compare(second), 20, "A container element");
equals(first.compare(outer), 10, "A parent element");
equals(second.compare(outer), 10, "A parent element");
equals(first.compare(second), 4, "A sibling elements");
equals(second.compare(first), 2, "A sibling elements");
outer.remove()
});
});
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/compare/qunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<link rel="stylesheet" type="text/css" href="../../../funcunit/qunit/qunit.css" />
<style>
body {
margin: 0px; padding: 0px;
}
</style>
</head>
<body>
<h1 id="qunit-header">jQuery Dom Compare Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<ol id="qunit-tests"></ol>
<script type='text/javascript' src='../../../steal/steal.js?jquery/dom/compare/compare_test.js'></script>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/cookie/cookie.js deleted 100644 → 0
View file @ d87b2b21
steal.plugins('jquery/lang/json').then(function() {
// break
/**
* @function jQuery.cookie
* @parent dom
* @author Klaus Hartl/klaus.hartl@stilbuero.de
*
* <h3>Cookie plugin</h3>
*
*
* <p>
* Copyright (c) 2006 Klaus Hartl (stilbuero.de)<br />
* Dual licensed under the MIT and GPL licenses:<br />
* http://www.opensource.org/licenses/mit-license.php<br />
* http://www.gnu.org/licenses/gpl.html
* </p>
* <p>
* Create a cookie with the given name and value and other optional parameters.
* / Get the value of a cookie with the given name.
* </p>
* <h3>Quick Examples</h3>
*
* Set the value of a cookie.
* @codestart
* * $.cookie('the_cookie', 'the_value');
* @codeend
*
* Create a cookie with all available options.
* @codestart
* $.cookie('the_cookie', 'the_value',
* { expires: 7, path: '/', domain: 'jquery.com', secure: true });
* @codeend
*
* Create a session cookie.
* @codestart
* $.cookie('the_cookie', 'the_value');
* @codeend
*
* Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain
* used when the cookie was set.
* @codestart
* $.cookie('the_cookie', null);
* @codeend
*
* Get the value of a cookie.
* @codestart
* $.cookie('the_cookie');
* @codeend
*
*
* @param {String} [name] The name of the cookie.
* @param {String} [value] The value of the cookie.
* @param {Object} [options] An object literal containing key/value pairs to provide optional cookie attributes.<br />
* @param {Number|Date} [expires] Either an integer specifying the expiration date from now on in days or a Date object.
* If a negative value is specified (e.g. a date in the past), the cookie will be deleted.
* If set to null or omitted, the cookie will be a session cookie and will not be retained
* when the the browser exits.<br />
* @param {String} [path] The value of the path atribute of the cookie (default: path of page that created the cookie).<br />
* @param {String} [domain] The value of the domain attribute of the cookie (default: domain of page that created the cookie).<br />
* @param {Boolean} secure If true, the secure attribute of the cookie will be set and the cookie transmission will
* require a secure protocol (like HTTPS).<br />
* @return {String} or {undefined} when setting the cookie.
*/
jQuery.cookie = function(name, value, options) {
if (typeof value != 'undefined') { // name and value given, set cookie
options = options ||
{};
if (value === null) {
value = '';
options.expires = -1;
}
if (typeof value == 'object' && jQuery.toJSON) {
value = jQuery.toJSON(value);
}
var expires = '';
if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {
var date;
if (typeof options.expires == 'number') {
date = new Date();
date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));
}
else {
date = options.expires;
}
expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE
}
// CAUTION: Needed to parenthesize options.path and options.domain
// in the following expressions, otherwise they evaluate to undefined
// in the packed version for some reason...
var path = options.path ? '; path=' + (options.path) : '';
var domain = options.domain ? '; domain=' + (options.domain) : '';
var secure = options.secure ? '; secure' : '';
document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');
}
else { // only name given, get cookie
var cookieValue = null;
if (document.cookie && document.cookie != '') {
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = jQuery.trim(cookies[i]);
// Does this cookie string begin with the name we want?
if (cookie.substring(0, name.length + 1) == (name + '=')) {
cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
break;
}
}
}
if (jQuery.evalJSON && cookieValue && cookieValue.match(/^\s*\{/)) {
try {
cookieValue = jQuery.evalJSON(cookieValue);
}
catch (e) {
}
}
return cookieValue;
}
};
});
labs/architecture-examples/javascriptmvc/jquery/dom/cur_styles/cur_styles.html deleted 100644 → 0
View file @ d87b2b21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>CurStyles Performance Test/Demo</title>
<style type='text/css'>
body {font-family: verdana}
#content {height: 100px; width: 300px;
margin: 20px;
padding: 10px;
border: solid 1px black;
cursor: pointer;
}
</style>
</head>
<body>
<h1>CurStyles Performance</h1>
<p>This demo shows how $.curStyles out-performs $.curCSS</p>
<div id="demo-html">
<div id='content'>
Click To Run
</div>
</div>
<script type='text/javascript'
src='../../../steal/steal.js'></script>
<script type='text/javascript'>
steal.plugins('jquery/dom/cur_styles').start()
</script>
<script type='text/javascript' id="demo-source">
$.fn.fastHeight = function(){
var sum = this[0] && this[0].offsetHeight;
$.each(this.curStyles(
"borderTopWidth",
"borderBottomWidth",
"paddingTop",
"paddingBottom"), function(name, val){
sum -= parseInt(val) || 0;
});
return sum;
}
var test = function(func){
var start = new Date(),
content = $("#content");
for(var i =0; i < 2000; i++){
content[func]()
}
return ( new Date() - start );
}
$("#content").click(function(){
var height = test("height"),
fastheight = test("fastHeight");
$("#content").html("jQuery's height: <b>"+
height+
"</b>ms<br/>fastHeight: <b>"+
fastheight+
"</b>ms"
)
})
</script>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/cur_styles/cur_styles.js deleted 100644 → 0
View file @ d87b2b21
steal.plugins('jquery/dom').then(function( $ ) {
var getComputedStyle = document.defaultView && document.defaultView.getComputedStyle,
rupper = /([A-Z])/g,
rdashAlpha = /-([a-z])/ig,
fcamelCase = function( all, letter ) {
return letter.toUpperCase();
},
getStyle = function( elem ) {
if ( getComputedStyle ) {
return getComputedStyle(elem, null);
}
else if ( elem.currentStyle ) {
return elem.currentStyle;
}
},
rfloat = /float/i,
rnumpx = /^-?\d+(?:px)?$/i,
rnum = /^-?\d/;
/**
* @add jQuery
*/
//
/**
* @function curStyles
* @param {HTMLElement} el
* @param {Array} styles An array of style names like <code>['marginTop','borderLeft']</code>
* @return {Object} an object of style:value pairs. Style names are camelCase.
*/
$.curStyles = function( el, styles ) {
if (!el ) {
return null;
}
var currentS = getStyle(el),
oldName, val, style = el.style,
results = {},
i = 0,
left, rsLeft, camelCase, name;
for (; i < styles.length; i++ ) {
name = styles[i];
oldName = name.replace(rdashAlpha, fcamelCase);
if ( rfloat.test(name) ) {
name = jQuery.support.cssFloat ? "float" : "styleFloat";
oldName = "cssFloat";
}
if ( getComputedStyle ) {
name = name.replace(rupper, "-$1").toLowerCase();
val = currentS.getPropertyValue(name);
if ( name === "opacity" && val === "" ) {
val = "1";
}
results[oldName] = val;
} else {
camelCase = name.replace(rdashAlpha, fcamelCase);
results[oldName] = currentS[name] || currentS[camelCase];
if (!rnumpx.test(results[oldName]) && rnum.test(results[oldName]) ) { //convert to px
// Remember the original values
left = style.left;
rsLeft = el.runtimeStyle.left;
// Put in the new values to get a computed value out
el.runtimeStyle.left = el.currentStyle.left;
style.left = camelCase === "fontSize" ? "1em" : (results[oldName] || 0);
results[oldName] = style.pixelLeft + "px";
// Revert the changed values
style.left = left;
el.runtimeStyle.left = rsLeft;
}
}
}
return results;
};
/**
* @add jQuery.fn
*/
$.fn
/**
* @parent dom
* @plugin jquery/dom/cur_styles
* @download http://jmvcsite.heroku.com/pluginify?plugins[]=jquery/dom/cur_styles/cur_styles.js
* @test jquery/dom/cur_styles/qunit.html
* Use curStyles to rapidly get a bunch of computed styles from an element.
* <h3>Quick Example</h3>
* @codestart
* $("#foo").curStyles('float','display') //->
* // {
* // cssFloat: "left", display: "block"
* // }
* @codeend
* <h2>Use</h2>
* <p>An element's <b>computed</b> style is the current calculated style of the property.
* This is different than the values on <code>element.style</code> as
* <code>element.style</code> doesn't reflect styles provided by css or the browser's default
* css properties.</p>
* <p>Getting computed values individually is expensive! This plugin lets you get all
* the style properties you need all at once.</p>
* <h2>Demo</h2>
* <p>The following demo illustrates the performance improvement curStyle provides by providing
* a faster 'height' jQuery function called 'fastHeight'.</p>
* @demo jquery/dom/cur_styles/cur_styles.html
* @param {String} style pass style names as arguments
* @return {Object} an object of style:value pairs
*/
.curStyles = function() {
return $.curStyles(this[0], $.makeArray(arguments));
};
});
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/cur_styles/cur_styles_test.js deleted 100644 → 0
View file @ d87b2b21
steal
.plugins("jquery/dom/dimensions",'jquery/view/micro') //load your app
.plugins('funcunit/qunit').then(function(){
module("jquery/dom/curStyles");
test("reading", function(){
$("#qunit-test-area").html("//jquery/dom/cur_styles/test/curStyles.micro",{})
var res = $.curStyles( $("#styled")[0],
["padding-left",
'position',
'display',
"margin-top",
"borderTopWidth",
"float"] );
equals(res.borderTopWidth, "2px","border top");
equals(res.display, "block","display");
equals(res.cssFloat, "left","float");
equals(res.marginTop, "10px","margin top");
equals(res.paddingLeft, "5px","padding left");
equals(res.position, "relative","position");
$("#qunit-test-area").html("")
});
})
labs/architecture-examples/javascriptmvc/jquery/dom/cur_styles/qunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<title>CurStyles Test Suite</title>
<link rel="stylesheet" type="text/css" href="../../../funcunit/qunit/qunit.css" />
<style>
body {
margin: 0px; padding: 0px;
}
</style>
<script type='text/javascript' src='../../../steal/steal.js?jquery/dom/cur_styles/cur_styles_test.js'></script>
</head>
<body>
<h1 id="qunit-header">CurStyles Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<div id="test-content"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/cur_styles/test/curStyles.micro deleted 100644 → 0
View file @ d87b2b21
<div style='margin-top: 10px; padding-left: 5px; position: relative; float: left; border: solid 2px black;' id='styled'>
Here is some content;
</div>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/dimensions/dimensions.html deleted 100644 → 0
View file @ d87b2b21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Dimensions Demo</title>
<style type='text/css'>
body {font-family: verdana}
#inner {
height: 100%;
width: 100%;
background-color: red;
}
#block {
height: 200px;
width: 200px;
padding: 0 40px 40px 0;
margin: 0 10px 10px 0;
background-color: blue;
border-right: solid 20px green;
border-bottom: solid 20px green;
}
#wrapper {
border: dashed 1px gray;
float: left;
clear: left;
background-color: yellow;
}
#width { background-color: red;}
#paddingRight {background-color: blue;}
#borderRightWidth {background-color: green;}
#innerWidth {color: #000080;}
#outerWidth {color: #008000;}
#marginRight {background-color: yellow}
input {
text-align: right;
font-size: 14pt;
font-weight: bold;
width: 100px;
}
label {
display: inline-block;
width: 100px;
text-align: right;
}
</style>
</head>
<body>
<div id="demo-html">
<p>Adjust The red box's layout properties.</p>
<label> Width</label> <input id='width'/><br/>
<label>+ Padding </label> <input id='paddingRight'/><br/>
<label>= Inner</label> <input id='innerWidth'/><br/>
<label>+ Border</label> <input id='borderRightWidth'/><br/>
<label>= Outer</label> <input id='outerWidth'/><br/>
<label> Margin</label> <input id='marginRight'/><br/>
<br/>
<div id='wrapper'>
<div id='block'>
<div id='inner'>
Adjust My Layout Properties
</div>
</div>
</div>
</div>
<div style='clear:both'></div>
<script type='text/javascript'
src='../../../steal/steal.js'>
</script>
<script type='text/javascript'>
steal.plugins('jquery/dom/dimensions').start()
</script>
<script type='text/javascript' id="demo-source">
// sets the values in the input boxes
var set = function() {
var block = $('#block');
//get with .fn helpers
$("#outerWidth, #innerWidth, #width").each(function(){
$(this).val( block[this.id]() )
})
//use curStyles
$.each($('#block').curStyles("paddingRight",
"borderRightWidth",
"marginRight"), function(name, val){
$("#"+name).val( parseInt(val) )
});
}
set();
// updates the dimensions of the block
var update = function( ev ) {
var name = ev.target.id,
val = parseInt( $(ev.target).val() ),
opposite = {Width: "Height", Right: "Bottom"},
// the opposite dimension name
otherName = name.replace(/width|right/i, function(part, i){
return i == 0 ? "height" : opposite[part];
}),
block = $('#block'),
css = {};
if( block[name] ) {
// set with innerHeight, outerHeight, etc
block[name]( val )[otherName](val)
}else{
// set as css property
css[name] = val+"px"
css[otherName] = val+"px"
block.css(css)
}
set();
};
// call update on change or after
// typing has stopped for a second
var timer;
$("input").live('change',update)
$("input").live('keyup',function(ev) {
clearTimeout(timer)
timer = setTimeout(function() {
update(ev)
},1400)
})
</script>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/dimensions/dimensions.js deleted 100644 → 0
View file @ d87b2b21
steal.plugins('jquery/dom/cur_styles').then(function($) {
/**
* @page dimensions dimensions
* @parent dom
* <h1>jquery/dom/dimensions <span class="Constructor type">Plugin</span></h1>
* The dimensions plugin adds support for setting+animating inner+outer height and widths.
* <h3>Quick Examples</h3>
@codestart
$('#foo').outerWidth(100).innerHeight(50);
$('#bar').animate({outerWidth: 500});
@codeend
* <h2>Use</h2>
* <p>When writing reusable plugins, you often want to
* set or animate an element's width and height that include its padding,
* border, or margin. This is especially important in plugins that
* allow custom styling.
* The dimensions plugin overwrites [jQuery.fn.outerHeight outerHeight],
* [jQuery.fn.outerWidth outerWidth], [jQuery.fn.innerHeight innerHeight]
* and [jQuery.fn.innerWidth innerWidth]
* to let you set and animate these properties.
* </p>
* <h2>Demo</h2>
* @demo jquery/dom/dimensions/dimensions.html
*/
var weird = /button|select/i, //margin is inside border
getBoxes = {},
checks = {
width: ["Left", "Right"],
height: ['Top', 'Bottom'],
oldOuterHeight: $.fn.outerHeight,
oldOuterWidth: $.fn.outerWidth,
oldInnerWidth: $.fn.innerWidth,
oldInnerHeight: $.fn.innerHeight
};
/**
* @add jQuery.fn
*/
$.each({
/*
* @function outerWidth
* @parent dimensions
* Lets you set the outer height on an object
* @param {Number} [height]
* @param {Boolean} [includeMargin]
*/
width:
/*
* @function innerWidth
* @parent dimensions
* Lets you set the inner height of an object
* @param {Number} [height]
*/
"Width",
/*
* @function outerHeight
* @parent dimensions
* Lets you set the outer height of an object where: <br/>
* <code>outerHeight = height + padding + border + (margin)</code>.
* @codestart
* $("#foo").outerHeight(100); //sets outer height
* $("#foo").outerHeight(100, true); //uses margins
* $("#foo").outerHeight(); //returns outer height
* $("#foo").outerHeight(true); //returns outer height with margins
* @codeend
* When setting the outerHeight, it adjusts the height of the element.
* @param {Number|Boolean} [height] If a number is provided -> sets the outer height of the object.<br/>
* If true is given -> returns the outer height and includes margins.<br/>
* If no value is given -> returns the outer height without margin.
* @param {Boolean} [includeMargin] Makes setting the outerHeight adjust for margin.
* @return {jQuery|Number} If you are setting the value, returns the jQuery wrapped elements.
* Otherwise, returns outerHeight in pixels.
*/
height:
/*
* @function innerHeight
* @parent dimensions
* Lets you set the outer width on an object
* @param {Number} [height]
*/
"Height" }, function(lower, Upper) {
//used to get the padding and border for an element in a given direction
getBoxes[lower] = function(el, boxes) {
var val = 0;
if (!weird.test(el.nodeName)) {
//make what to check for ....
var myChecks = [];
$.each(checks[lower], function() {
var direction = this;
$.each(boxes, function(name, val) {
if (val)
myChecks.push(name + direction+ (name == 'border' ? "Width" : "") );
})
})
$.each($.curStyles(el, myChecks), function(name, value) {
val += (parseFloat(value) || 0);
})
}
return val;
}
//getter / setter
$.fn["outer" + Upper] = function(v, margin) {
if (typeof v == 'number') {
this[lower](v - getBoxes[lower](this[0], {padding: true, border: true, margin: margin}))
return this;
} else {
return checks["oldOuter" + Upper].call(this, v)
}
}
$.fn["inner" + Upper] = function(v) {
if (typeof v == 'number') {
this[lower](v - getBoxes[lower](this[0], { padding: true }))
return this;
} else {
return checks["oldInner" + Upper].call(this, v)
}
}
//provides animations
var animate = function(boxes){
return function(fx){
if (fx.state == 0) {
fx.start = $(fx.elem)[lower]();
fx.end = fx.end - getBoxes[lower](fx.elem,boxes);
}
fx.elem.style[lower] = (fx.pos * (fx.end - fx.start) + fx.start) + "px"
}
}
$.fx.step["outer" + Upper] = animate({padding: true, border: true})
$.fx.step["outer" + Upper+"Margin"] = animate({padding: true, border: true, margin: true})
$.fx.step["inner" + Upper] = animate({padding: true})
})
})
labs/architecture-examples/javascriptmvc/jquery/dom/dimensions/qunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<title>Dimensions Test Suite</title>
<link rel="stylesheet" type="text/css" href="../../../funcunit/qunit/qunit.css" />
<style>
body {
margin: 0px; padding: 0px;
}
</style>
<script type='text/javascript' src='../../../steal/steal.js?steal[app]=jquery/dom/dimensions/test/qunit'></script>
</head>
<body>
<h1 id="qunit-header">Dimensions Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<div id="test-content"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/dimensions/test/qunit/curStyles.micro deleted 100644 → 0
View file @ d87b2b21
<div style='margin-top: 10px; padding-left: 5px; position: relative; float: left; border: solid 2px black;' id='styled'>
Here is some content;
</div>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/dimensions/test/qunit/dimensions_test.js deleted 100644 → 0
View file @ d87b2b21
module("jquery/dom/dimensions");
test("outerHeight and width",function(){
$("#qunit-test-area").html("//jquery/dom/dimensions/test/qunit/curStyles.micro",{})
})
labs/architecture-examples/javascriptmvc/jquery/dom/dimensions/test/qunit/qunit.js deleted 100644 → 0
View file @ d87b2b21
steal
.plugins("jquery/dom/dimensions",'jquery/view/micro') //load your app
.plugins('funcunit/qunit') //load qunit
.then("dimensions_test")
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/dom.js deleted 100644 → 0
View file @ d87b2b21
/**
@page dom DOM Helpers
@tag core
JavaScriptMVC adds a bunch of useful
jQuery extensions for the dom. Check them out on the left.
## [dimensions Dimensions]
Set and animate the inner and outer height and width of elements.
$('#foo').outerWidth(100);
$('#bar').animate({innerWidth: 500});
This is great when you want to include padding and margin in
setting the dimensions of elements.
## [jQuery.cookie Cookie]
Set and get cookie values:
$.cookie('cookie','value');
## [jQuery.fixture Fixture]
Simulate Ajax responses.
$.fixture("/services/tasks.php','fixtures/tasks.json');
Works with jQuery's Ajax converters!
## [jQuery.fn.compare Compare]
Compare the location of two elements rapidly.
$('#foo').compare($('#bar')) & 2 // true if #bar is before #foo
## [jQuery.fn.curStyles CurStyles]
Get multiple css properties quickly.
$('#foo').curStyles('left','top') //-> {left:'20px',top:'10px'}
## [jQuery.fn.formParams FormParams]
Serializes a form into a JSON-like object:
$('form').formParams() //-> {name: 'Justin', favs: ['JS','Ruby']}
## [jQuery.fn.selection Selection]
Gets or sets the current text selection.
// gets selection info
$('pre').selection() //-> {start: 22, end: 57, range: range}
// sets the selection
$('div').selection(20,22)
## [jQuery.fn.within Within]
Returns elements that have a point within their boundaries.
$('.drop').within(200,200) //-> drops that touch 200,200
## [jQuery.Range Range]
Text range utilities.
$('#copy').range() //-> text range that has copy selected
*/
steal.plugins('jquery');
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/fixture/fixture.html deleted 100644 → 0
View file @ d87b2b21
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title>Fixture Demo</title>
<style type='text/css'>
body {font-family: verdana}
#messages {height: 200px; overflow-y: auto;}
#content {height: 551px; overflow: hidden;}
</style>
</head>
<body>
<div id="demo-html">
<div id='content'></div>
</div>
<script type='text/javascript'
src='../../../steal/steal.js'></script>
<script type='text/javascript'>
steal.plugins('jquery/dom/fixture','jquery/dom/form_params').start()
</script>
<script type='text/javascript' id="demo-source">
// gets content from a fixture
$.get("/messages.php",
function(html){
// put the result in content
$('#content').html(html)
},
'text',
'fixtures/messages.html');
// makes 20 messages in a fixture
$.fixture.make(["messages","message"],20, function(i, messages){
return {
subject: "This is message "+i,
body: "Here is some text for this message",
user: "Justin",
createdAt: String(new Date( Math.random() * new Date().getTime() ))
}
});
// gets messages on submit
$("#getMessages").live("submit",function(ev){
ev.preventDefault();
//get the limit and offset
var params = $(this).formParams().params;
//use -messages fixture created by make
$.ajax({
url: "/messages.json",
data: params,
success: function(json){
$("#messages").html( messagesHTML(json) )
},
dataType: "json",
fixture: "-messages"
})
});
// a fixture for creating messages
$.fixture["-createMessage"] = function(settings, cbType){
// add to the message data what the server would add
var message = $.extend({
id: arguments.callee.count++,
user: "Justin",
createdAt: String(new Date())
}, settings.data);
message.id = $.fixture["~messages"].length;
// adds the message to the fixture data
$.fixture["~messages"].push(message);
// return the data for the callback
return [message];
};
// creates a message on submit
$("#message").live("submit", function(ev){
ev.preventDefault();
// get message data
var message = $(this).formParams().message;
// uses -createMessage fixture
$.post("/message.json", message,function(json){
//clear the message form
$('[name*=message]').val("");
//show the new message
$('[name*=offset]').val(json.id)
$('[name*=limit]').val(1)
$("#getMessages").submit();
},'json',"-createMessage")
})
//creates the html from message data
var messagesHTML = function(json){
var html = ["<h4>Messages (count=",
json.count,
")</h4>",
"<table>",
"<tr>"],
cols = ["subject",
"body",
"user",
"createdAt"];
// html for the column headers
$.each(cols, function(i, prop){
html.push("<th>"+prop+"</th>")
})
html.push("</tr>")
// html for the messages
$.each(json.data, function(m, message){
html.push("<tr>")
$.each(cols, function(i, prop){
html.push("<td>"+message[prop]+"</td>")
})
html.push("</tr>")
})
html.push("</table>");
return html.join("");
}
</script>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/fixture/fixtures/messages.html deleted 100644 → 0
View file @ d87b2b21
<h2>Create a Message</h2>
<p>Create a message, it will show up in "Get Messages".</p>
<form id='message'>
<table>
<tr>
<td>From:</td>
<td><input type='text' name='message[user]' value=''/></td>
</tr>
<tr>
<td>Subject:</td>
<td><input type='text' name='message[subject]' value=''/></td>
</tr>
<tr>
<td>Body:</td>
<td><textarea name='message[body]'></textarea></td>
</tr>
<tr>
<td></td><td><input type='submit' value="Create"></td>
</tr>
</table>
</form>
<h2>Get Messages</h2>
<p>Enter a limit and offset to get a range of messages.
</p>
<form id='getMessages'>
Offset <input type='text' name='params[offset]' value='0'/>
Limit <input type='text' name='params[limit]' value='5'/>
<input type="submit" value="Get Messages"/>
</form>
<div id='messages'></div>
labs/architecture-examples/javascriptmvc/jquery/dom/fixture/qunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<title>Fixtures Test Suite</title>
<link rel="stylesheet" type="text/css" href="../../../funcunit/qunit/qunit.css" />
<style>
body {
margin: 0px; padding: 0px;
}
</style>
<script type='text/javascript' src='../../../steal/steal.js?jquery/dom/fixture/fixture_test.js'></script>
</head>
<body>
<h1 id="qunit-header">Fixtures Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<div id="test-content"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/form_params/qunit.html deleted 100644 → 0
View file @ d87b2b21
<html>
<head>
<title>Form Params Test Suite</title>
<link rel="stylesheet" type="text/css" href="../../../funcunit/qunit/qunit.css" />
<style>
body {
margin: 0px; padding: 0px;
}
</style>
<script type='text/javascript' src='../../../steal/steal.js?steal[app]=jquery/dom/form_params/test/qunit'></script>
</head>
<body>
<h1 id="qunit-header">Fixtures Test Suite</h1>
<h2 id="qunit-banner"></h2>
<div id="qunit-testrunner-toolbar"></div>
<h2 id="qunit-userAgent"></h2>
<div id="test-content"></div>
<ol id="qunit-tests"></ol>
<div id="qunit-test-area"></div>
</body>
</html>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/form_params/test/qunit/qunit.js deleted 100644 → 0
View file @ d87b2b21
steal
.plugins("jquery/dom/form_params") //load your app
.plugins('funcunit/qunit','jquery/view/micro') //load qunit
.then("form_params_test")
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/dom/form_params/test/qunit/truthy.micro deleted 100644 → 0
View file @ d87b2b21
<form id='fp' action="">
<input type='checkbox' name='foo' value='true'/>
<input type='checkbox' name='bar[abc]' checked="checked" value='true'/>
<input type='checkbox' name='bar[def]' checked="checked" value='true'/>
<input type='checkbox' name='bar[ghi]' value='true'/>
</form>
\ No newline at end of file
labs/architecture-examples/javascriptmvc/jquery/update deleted 100644 → 0
View file @ d87b2b21
This diff is collapsed.
labs/architecture-examples/javascriptmvc/readme.md deleted 100644 → 0
View file @ d87b2b21
This diff is collapsed.
labs/architecture-examples/javascriptmvc/steal/README deleted 100644 → 0
View file @ d87b2b21
This diff is collapsed.
labs/architecture-examples/javascriptmvc/steal/buildjs deleted 100644 → 0
View file @ d87b2b21
This diff is collapsed.
labs/architecture-examples/javascriptmvc/steal/cleanjs deleted 100644 → 0
View file @ d87b2b21
This diff is collapsed.
labs/architecture-examples/javascriptmvc/steal/end.js deleted 100644 → 0
View file @ d87b2b21
This diff is collapsed.
labs/architecture-examples/javascriptmvc/steal/getjs deleted 100644 → 0
View file @ d87b2b21
This diff is collapsed.
labs/architecture-examples/javascriptmvc/steal/js deleted 100755 → 0
View file @ d87b2b21
This diff is collapsed.
labs/architecture-examples/javascriptmvc/steal/js.bat deleted 100644 → 0
View file @ d87b2b21
This diff is collapsed.
labs/architecture-examples/javascriptmvc/steal/make.js deleted 100644 → 0
View file @ d87b2b21
This diff is collapsed.
labs/architecture-examples/javascriptmvc/steal/update deleted 100644 → 0
View file @ d87b2b21
This diff is collapsed.
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment
GitLab Nexedi Edition | About GitLab | About Nexedi | 沪ICP备2021021310号-2 | 沪ICP备2021021310号-7