You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
165 lines
5.9 KiB
165 lines
5.9 KiB
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<meta http-equiv="Content-type" content="text/html; charset=utf-8"> |
|
<title>_AttachMixin Test</title> |
|
|
|
<script src="boilerplate.js"></script> |
|
|
|
<style type="text/css"> |
|
/* Make our tests stand out as easily identifiable content */ |
|
.testcontainer { |
|
border: 10px yellow; |
|
border-style: dashed; |
|
padding: 1em; |
|
margin: 1em; |
|
} |
|
.testcontainer > p { |
|
padding: 0 1em; |
|
font-weight: bold; |
|
} |
|
</style> |
|
|
|
<script type="text/javascript"> |
|
require([ |
|
"doh/runner", "dojo/_base/declare", "dojo/dom", "dojo/html", "dojo/on", "dojo/parser", |
|
"dijit/registry", "dijit/_WidgetBase", "dijit/_AttachMixin", "dijit/_TemplatedMixin", |
|
"dijit/form/Button", "dijit/Editor", "dojo/domReady!" |
|
], function(doh, declare, dom, html, on, parser, |
|
registry, _WidgetBase, _AttachMixin, _TemplatedMixin, Button, Editor) { |
|
|
|
doh.register("_AttachMixin", [ |
|
function basic() { |
|
|
|
/*** TEST _AttachMixin on a simple _WidgetBase ***/ |
|
var WidgetWithAttachMagic = declare([ _WidgetBase, _AttachMixin ], { |
|
postCreate: function() { |
|
html.set(this.heading, "I am an attach point, hear me raar!"); |
|
this.field.value = "Value is objective."; |
|
}, |
|
_fieldChanged: function(e) { |
|
html.set(this.heading, "Oooh! Saucy! Now I am '" + e.target.value + "'"); |
|
} |
|
}); |
|
|
|
var mydijit = new WidgetWithAttachMagic({}, dom.byId("attachMe")); |
|
mydijit.startup(); |
|
|
|
doh.t(mydijit.heading, "heading"); |
|
doh.t(mydijit.field, "field"); |
|
doh.is("I am an attach point, hear me raar!", mydijit.heading.innerHTML, "Initial value"); |
|
|
|
// Simulate a change |
|
mydijit.field.value = 'something new'; |
|
on.emit(mydijit.field, "keyup", {bubbles: true}); |
|
|
|
doh.is("Oooh! Saucy! Now I am 'something new'", mydijit.heading.innerHTML, "Post-op value"); |
|
}, |
|
|
|
function attachScope() { |
|
/*** Test an inner dijit's attach-point and attach-event behaviour being attached to a |
|
* different widget instance, in this case the outer one. |
|
*/ |
|
var InnerDijit = declare([ _WidgetBase, _TemplatedMixin ], { |
|
declaredClass: "InnerDijit", // for debugging |
|
templateString: "<div><input data-dojo-attach-point='field' data-dojo-attach-event='onkeyup: inputKeyUp'></div>" |
|
}); |
|
|
|
var OuterDijit = declare([ _WidgetBase, _TemplatedMixin ], { |
|
declaredClass: "OuterDijit", // for debugging |
|
templateString: |
|
"<div>" + |
|
"<h2 data-dojo-attach-point='heading'>Initial value</h2>" + |
|
"<div data-dojo-attach-point='content'></div>" + |
|
"</div>", |
|
buildRendering: function() { |
|
this.inherited(arguments); |
|
this.iw = new InnerDijit({ |
|
attachScope: this // Cause attach points in inner dijit to attach to us |
|
}); |
|
// NB don't own as we will do a destroy test later this.own(id); |
|
this.iw.placeAt(this.content, 'last'); |
|
}, |
|
// This handler is attached to the field in our inner dijit |
|
inputKeyUp: function(e) { |
|
var target = e.target; |
|
html.set(this.heading, "Event: " + e.type + " value: " + target.value); |
|
} |
|
}); |
|
|
|
var od = new OuterDijit({}, dom.byId('destthree')); |
|
od.startup(); |
|
|
|
// Confirm that the outer dijit has attached points both |
|
// from its own template, and the inner dijit. |
|
doh.t(od.heading, "heading"); |
|
doh.t(od.field, "field"); |
|
doh.is("Initial value", od.heading.innerHTML, "Initial value"); |
|
|
|
// Simulate a change on the field in the inner dijit |
|
od.field.value = 'something new'; |
|
on.emit(od.field, "keyup", {bubbles: true}); |
|
|
|
// Confirm the change ran the event handler in the outer dijit |
|
doh.is("Event: keyup value: something new", od.heading.innerHTML, "Post-op value"); |
|
|
|
// Now destroy the inner dijit and ensure its attach points on the parent |
|
// were removed. |
|
od.iw.destroy(); |
|
delete od.iw; |
|
doh.t(od.heading, "heading remains"); // heading remains |
|
doh.f(od.field, "inner content was detached"); // inner content was detached |
|
}, |
|
|
|
function containerNode(){ |
|
// Test that code inside of containerNode isn't scanned |
|
var WidgetWithAttachMagic = declare([ _WidgetBase, _AttachMixin ]); |
|
var cd = new WidgetWithAttachMagic({}, dom.byId("attachMeFive")); |
|
doh.t(cd.heading, "heading attach point set up"); |
|
doh.f("mybutton" in cd, "attach point inside containerNode ignored"); |
|
} |
|
]); |
|
|
|
doh.run(); |
|
}); |
|
</script> |
|
</head> |
|
<body> |
|
|
|
<h1 class="testTitle">Dijit _AttachMixin Test</h1> |
|
|
|
<div class="testcontainer"> |
|
<p>This markup may have come from a server side templating engine like Catalyst. |
|
The aim is to allow us to use data-dojo-attach-* magic on the content.<br> |
|
Change the input value to see attach event and attach point at work.</p> |
|
<div id="attachMe"> |
|
<h2 data-dojo-attach-point="heading"></h2> |
|
<label for="${id}_field">You say "Hello":</label> |
|
<input id="${id}_field" placeHolder="I say 'Goodbye'" |
|
data-dojo-attach-point="field" |
|
data-dojo-attach-event="onkeyup: _fieldChanged"> |
|
</div> |
|
</div> |
|
|
|
<div class="testcontainer"> |
|
<p>This test shows an inner dijit being created with attachScope referencing its enclosing dijit.</p> |
|
<div id="destthree"></div> |
|
</div> |
|
|
|
<!-- Test that data-dojo-attach-point etc. inside containerNode are ignored --> |
|
<div class="testcontainer"> |
|
<p>This tests that nodes inside of data-dojo-attach-point="containerNode" are ignored<br> |
|
<div id="attachMeFive"> |
|
<h2 data-dojo-attach-point='heading'></h2> |
|
<div data-dojo-attach-point='containerNode'> |
|
<span data-dojo-type='AnotherAttachPointWidget'> |
|
<button data-dojo-attach-point='mybutton' |
|
data-dojo-attach-event='onClick: _buttonClicked'>A button |
|
</button> |
|
</span> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
</body> |
|
</html>
|
|
|