mfajri
/
dojo_app
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
sample skeleton application with dojo toolkit & arcgis js api v 4.30
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.
4 Commits
1 Branch
0 Tags
92 MiB
 
 
 
 
 
 
Tree: 1fad51f74c
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '1fad51f74c'
${ noResults }
dojo_app/js/library/dojox/mobile/tests/test_Slider.html

529 lines
17 KiB
Raw Blame History

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<title>Mobile Slider unit tests</title>
<script type="text/javascript" src="../deviceTheme.js" data-dojo-config="mblThemeFiles: ['base','Slider']"></script>
<script src="../../../dojo/dojo.js" data-dojo-config="parseOnLoad:true, isDebug: true"></script>
<script type="text/javascript">
require([
"doh/runner",
"dojo/sniff",
"dojo/ready",
"dojo/_base/window",
"dojo/dom",
"dojo/dom-style",
"dojo/dom-geometry",
"dijit/registry",
"dojox/mobile",
"dojox/mobile/parser",
"dojox/mobile/compat",
"dojox/mobile/Slider"
], function(doh, has, ready, win, dom, domStyle, domGeometry, registry) {
ready(function(){
var hasTouch = has("touch");
var msPointer = navigator.msPointerEnabled;
var touchstart = msPointer?"MSPointerDown":"touchstart";
var touchmove = msPointer?"MSPointerMove":"touchmove";
var touchend = msPointer?"MSPointerUp":"touchend";
var transitionDuration = has("webkit")?"WebkitTransitionDuration":"transitionDuration";
function getZoom(widget){
var node = widget.domNode;
var bodyZoom = domStyle.get(win.body(), "zoom") || 1;
var nodeZoom = ((has("ie") || has("trident") > 6) ? parseFloat(domStyle.get(node).getPropertyValue("zoom"))/100 : domStyle.get(node, "zoom")) || 1;
return nodeZoom * bodyZoom;
}
function fireTouchEvent(type, widget, x, y, delay){
function doit(){
var node = widget.domNode;
var handle = widget.handle;
var zoom = getZoom(widget);
if(has("ie") || has("trident") > 6){
x *= zoom;
y *= zoom;
zoom = 1;
}
var scroll = domGeometry.docScroll();
var pos = domGeometry.position(node, false);
var handlePos = domGeometry.position(handle, false);
handlePos.l = handlePos.x * zoom + scroll.x;
handlePos.t = handlePos.y * zoom + scroll.y;
handlePos.r = handlePos.l + (handlePos.w - 1) * zoom;
handlePos.b = handlePos.t + (handlePos.h - 1) * zoom;
var touchX = (x + pos.x) * zoom + scroll.x;
var touchY = (y + pos.y) * zoom + scroll.y;
var target = widget.touchBox;
// see if handle is under the touch pos
if(touchX >= handlePos.l && touchX <= handlePos.r && touchY >= handlePos.t && touchY <= handlePos.b){
target = handle;
}
var e = document.createEvent ? document.createEvent('Events') : document.createEventObject();
if(!hasTouch&&!msPointer){
switch(type){
case touchstart: type = 'mousedown'; break;
case touchmove: type = 'mousemove'; break;
case touchend: type = 'mouseup'; break;
}
}
if(document.createEvent){
e.initEvent(type, true, true);
}
e.touches = [ { pageX: touchX, pageY: touchY } ];
e.pageX = touchX;
e.pageY = touchY;
e.changedTouches = e.touches;
if(document.createEvent){
target.dispatchEvent(e);
}else{
target.fireEvent("on"+type, e);
}
}
if(delay){
setTimeout(doit, delay);
}else{
doit();
}
}
var sh = registry.byId('sh');
var sh_width = sh.domNode.offsetWidth;
var sh_height = sh.domNode.offsetHeight;
var sh_handle_width = sh.handle.offsetWidth;
var sh_handle_height = sh.handle.offsetHeight;
var sv = registry.byId('sv');
var sv_width = sv.domNode.offsetWidth;
var sv_height = sv.domNode.offsetHeight;
var sv_handle_width = sv.handle.offsetWidth;
var sv_handle_height = sv.handle.offsetHeight;
var handle;
var speed = 0; // should be 0 unless it's a demo
domStyle.set(sh.handle, transitionDuration, (speed >> 1) + "ms");
domStyle.set(sv.handle, transitionDuration, (speed >> 1) + "ms");
doh.register("tap", [
{
name: "horizontal end",
timeout: 1000+speed,
runTest: function(){
function onChange(v){
d.getTestCallback(function(){
doh.is(v, sh.max);
})();
}
var d = new doh.Deferred();
handle = sh.connect(sh, 'onChange', onChange);
fireTouchEvent(touchstart, sh, sh_width, sh_height >> 1, speed);
return d;
},
tearDown: function(){
fireTouchEvent(touchend, sh, sh_width, sh_height >> 1);
sh.disconnect(handle);
}
},
{
name: "horizontal start",
timeout: 1000+speed,
runTest: function(){
function onChange(v){
d.getTestCallback(function(){
doh.is(v, sh.min);
})();
}
var d = new doh.Deferred();
handle = sh.connect(sh, 'onChange', onChange);
fireTouchEvent(touchstart, sh, 0, sh_height >> 1, speed);
return d;
},
tearDown: function(){
fireTouchEvent(touchend, sh, 0, sh_height >> 1);
sh.disconnect(handle);
}
},
{
name: "horizontal middle",
timeout: 1000+speed,
runTest: function(){
function onChange(v){
d.getTestCallback(function(){
doh.t(Math.abs(v - ((sh.max+sh.min) >> 1)) <= sh.step);
})();
}
var d = new doh.Deferred();
handle = sh.connect(sh, 'onChange', onChange);
fireTouchEvent(touchstart, sh, sh_width >> 1, sh_height >> 1, speed);
return d;
},
tearDown: function(){
fireTouchEvent(touchend, sh, sh_width >> 1, sh_height >> 1);
sh.disconnect(handle);
}
},
{
name: "vertical end",
timeout: 1000+speed,
runTest: function(){
function onChange(v){
d.getTestCallback(function(){
doh.is(v, sv.max);
})();
}
var d = new doh.Deferred();
handle = sv.connect(sv, 'onChange', onChange);
fireTouchEvent(touchstart, sv, sv_width >> 1, 0, speed);
return d;
},
tearDown: function(){
fireTouchEvent(touchend, sv, sv_width >> 1, 0);
sv.disconnect(handle);
}
},
{
name: "vertical start",
timeout: 1000+speed,
runTest: function(){
function onChange(v){
d.getTestCallback(function(){
doh.is(v, sv.min);
})();
}
var d = new doh.Deferred();
handle = sv.connect(sv, 'onChange', onChange);
fireTouchEvent(touchstart, sv, sv_width >> 1, sv_height, speed);
return d;
},
tearDown: function(){
fireTouchEvent(touchend, sv, sv_width >> 1, sv_height);
sv.disconnect(handle);
}
},
{
name: "vertical middle",
timeout: 1000+speed,
runTest: function(){
function onChange(v){
d.getTestCallback(function(){
doh.t(Math.abs(v - ((sv.max+sv.min) >> 1)) <= sv.step);
})();
}
var d = new doh.Deferred();
handle = sv.connect(sv, 'onChange', onChange);
fireTouchEvent(touchstart, sv, sv_width >> 1, sv_height >> 1, speed);
return d;
},
tearDown: function(){
fireTouchEvent(touchend, sv, sv_width >> 1, sv_height >> 1);
sv.disconnect(handle);
}
}
]);
doh.register("move", [
{
name: "horizontal right",
timeout: 1000+speed*2,
runTest: function(){
function onChange(v){
d.getTestCallback(function(){
doh.is(v, sh.max);
})();
}
var d = new doh.Deferred();
handle = sh.connect(sh, 'onChange', onChange);
fireTouchEvent(touchstart, sh, sh_width >> 1, sh_height >> 1);
fireTouchEvent(touchmove, sh, sh_width, sh_height >> 1, speed);
fireTouchEvent(touchend, sh, sh_width, sh_height >> 1, speed*2);
return d;
},
tearDown: function(){
sh.disconnect(handle);
}
},
{
name: "horizontal left",
timeout: 1000+speed*2,
runTest: function(){
function onChange(v){
d.getTestCallback(function(){
doh.is(v, sh.min);
})();
}
var d = new doh.Deferred();
handle = sh.connect(sh, 'onChange', onChange);
fireTouchEvent(touchstart, sh, sh_width, sh_height >> 1);
fireTouchEvent(touchmove, sh, 0, sh_height >> 1, speed);
fireTouchEvent(touchend, sh, 0, sh_height >> 1, speed*2);
return d;
},
tearDown: function(){
sh.disconnect(handle);
}
},
{
name: "vertical up",
timeout: 1000+speed,
runTest: function(){
function onChange(v){
d.getTestCallback(function(){
doh.is(v, sv.max);
})();
}
var d = new doh.Deferred();
handle = sv.connect(sv, 'onChange', onChange);
fireTouchEvent(touchstart, sv, sv_width >> 1, sv_height >> 1);
fireTouchEvent(touchmove, sv, sv_width >> 1, 0, speed);
return d;
},
tearDown: function(){
sv.disconnect(handle);
}
},
{
name: "vertical down",
timeout: 1000+speed,
runTest: function(){
function onChange(v){
d.getTestCallback(function(){
doh.is(v, sv.min);
})();
}
var d = new doh.Deferred();
handle = sv.connect(sv, 'onChange', onChange);
fireTouchEvent(touchmove, sv, sv_width >> 1, sv_height, speed);
return d;
},
tearDown: function(){
fireTouchEvent(touchend, sv, sv_width >> 1, sv_height);
sv.disconnect(handle);
}
}
]);
doh.register("click handle", [
{
name: "horizontal right",
timeout: 1000+speed,
runTest: function(){
var mid = (sh.max + sh.min) >> 1;
sh.set('value', mid, true);
doh.is(mid, sh.get('value'), 'initial value');
var d = new doh.Deferred();
fireTouchEvent(touchstart, sh, (sh_width >> 1) + (sh_handle_width >> 2), sh_height >> 1, speed);
fireTouchEvent(touchend, sh, (sh_width >> 1) + (sh_handle_width >> 2), sh_height >> 1, speed);
setTimeout(d.getTestCallback(function(){
doh.is(mid, sh.get('value'), 'right value');
}), 500+speed);
return d;
}
},
{
name: "horizontal left",
timeout: 1000+speed,
runTest: function(){
var mid = (sh.max + sh.min) >> 1;
sh.set('value', mid, true);
doh.is(mid, sh.get('value'), 'initial value');
var d = new doh.Deferred();
fireTouchEvent(touchstart, sh, (sh_width >> 1) - (sh_handle_width >> 2), sh_height >> 1);
fireTouchEvent(touchend, sh, (sh_width >> 1) - (sh_handle_width >> 2), sh_height >> 1);
setTimeout(d.getTestCallback(function(){
doh.is(mid, sh.get('value'), 'left value');
}), 500+speed);
return d;
}
},
{
name: "horizontal change right",
timeout: 1000+speed,
runTest: function(){
var mid = (sh.max + sh.min) >> 1;
sh.set('value', mid, true);
doh.is(mid, sh.get('value'), 'initial value');
var d = new doh.Deferred();
fireTouchEvent(touchstart, sh, (sh_width >> 1) + (sh_handle_width >> 1) + 2, sh_height >> 1, speed >> 1);
fireTouchEvent(touchend, sh, (sh_width >> 1) + (sh_handle_width >> 1) + 2, sh_height >> 1, speed >> 1);
setTimeout(d.getTestCallback(function(){
doh.t(sh.get('value') > mid, 'right changed value ' + sh.get('value'));
}), 500+speed);
return d;
}
},
{
name: "horizontal change left",
timeout: 1000+speed,
runTest: function(){
var mid = (sh.max + sh.min) >> 1;
sh.set('value', mid, true);
doh.is(mid, sh.get('value'), 'initial value');
var d = new doh.Deferred();
fireTouchEvent(touchstart, sh, (sh_width >> 1) - ((sh_handle_width >> 1) + 2), sh_height >> 1, speed >> 1);
fireTouchEvent(touchend, sh, (sh_width >> 1) - ((sh_handle_width >> 1) + 2), sh_height >> 1, speed >> 1);
setTimeout(d.getTestCallback(function(){
doh.t(sh.get('value') < mid, 'left changed value ' + sh.get('value'));
}), 500+speed);
return d;
}
},
{
name: "vertical bottom",
timeout: 1000+speed,
runTest: function(){
var mid = (sv.max + sv.min) >> 1;
sv.set('value', mid, true);
doh.is(mid, sv.get('value'), 'initial value');
var d = new doh.Deferred();
fireTouchEvent(touchstart, sv, sv_width >> 1, (sv_height >> 1) + (sv_handle_height >> 2), speed);
fireTouchEvent(touchend, sv, sv_width >> 1, (sv_height >> 1) + (sv_handle_height >> 2), speed);
setTimeout(d.getTestCallback(function(){
doh.is(mid, sv.get('value'), 'bottom value');
}), 500+speed);
return d;
}
},
{
name: "vertical top",
timeout: 1000+speed,
runTest: function(){
var mid = (sv.max + sv.min) >> 1;
sv.set('value', mid, true);
doh.is(mid, sv.get('value'), 'initial value');
var d = new doh.Deferred();
fireTouchEvent(touchstart, sv, sv_width >> 1, (sv_height >> 1) - (sv_handle_height >> 2));
fireTouchEvent(touchend, sv, sv_width >> 1, (sv_height >> 1) - (sv_handle_height >> 2));
setTimeout(d.getTestCallback(function(){
doh.is(mid, sv.get('value'), 'top value');
}), 500+speed);
return d;
}
},
{
name: "vertical change bottom",
timeout: 1000+speed,
runTest: function(){
var mid = (sv.max + sv.min) >> 1;
sv.set('value', mid, true);
doh.is(mid, sv.get('value'), 'initial value');
var d = new doh.Deferred();
fireTouchEvent(touchstart, sv, sv_width >> 1, (sv_height >> 1) + (sv_handle_height >> 1) + 2, speed >> 1);
fireTouchEvent(touchend, sv, sv_width >> 1, (sv_height >> 1) + (sv_handle_height >> 1) + 2, speed >> 1);
setTimeout(d.getTestCallback(function(){
doh.t(sv.get('value') < mid, 'bottom changed value ' + sv.get('value'));
}), 500+speed);
return d;
}
},
{
name: "vertical change top",
timeout: 1000+speed,
runTest: function(){
var mid = (sv.max + sv.min) >> 1;
sv.set('value', mid, true);
doh.is(mid, sv.get('value'), 'initial value');
var d = new doh.Deferred();
fireTouchEvent(touchstart, sv, sv_width >> 1, (sv_height >> 1) - ((sv_handle_height >> 1) + 2), speed >> 1);
fireTouchEvent(touchend, sv, sv_width >> 1, (sv_height >> 1) - ((sv_handle_height >> 1) + 2), speed >> 1);
setTimeout(d.getTestCallback(function(){
doh.t(sv.get('value') > mid, 'top changed value ' + sv.get('value'));
}), 500+speed);
return d;
}
}
]);
if(has("webkit") || has("ie") === 10 || (!has("ie") && has("trident") > 6)){
doh.register("animation", {
name: "horizontal 100%",
timeout: 2000,
runTest: function(){
var d = new doh.Deferred();
fireTouchEvent(touchstart, sh, 0, sh_height >> 1, 0);
fireTouchEvent(touchend, sh, 0, sh_height >> 1, 0);
var startX = Math.round(domGeometry.position(sh.handle).x), midX, endX;
domStyle.set(sh.handle, transitionDuration, "1000ms");
fireTouchEvent(touchstart, sh, sh_width, sh_height >> 1, 0);
fireTouchEvent(touchend, sh, sh_width, sh_height >> 1, 0);
sh.set('value', sh.max, true);
setTimeout(function(){
midX = domGeometry.position(sh.handle).x;
}, 400);
setTimeout(d.getTestCallback(function(){
endX = Math.round(domGeometry.position(sh.handle).x);
doh.t(midX > startX, "started sliding");
doh.t(midX < endX, "continued sliding");
var zoom = (has("ie") || has("trident") > 6) ? getZoom(sh) : 1;
doh.t(Math.abs(Math.abs(endX-startX)-sh_width*zoom) <= 3, "stopped sliding end="+endX+',start='+startX+',width='+sh_width*zoom);
}), 1100);
return d;
},
tearDown: function(){
domStyle.set(sh.handle, transitionDuration, "");
domStyle.set(sv.handle, transitionDuration, "");
}
})
}
doh.register("log", function(){
dom.byId('failures').innerHTML = doh._failureCount;
dom.byId('errors').innerHTML = doh._errorCount;
});
doh.run();
});
});
</script>
<style>
/* test overrides */
.mblSlider {
zoom: 1.1; /* for testing, to make it easier to touch the handle */
}
.mblSliderV {
width: 1px;
border: 0px none;
}
.mblSliderH .mblSliderProgressBar {
background:transparent url(images/progressBarAnim.gif) repeat;
}
.mblSliderV .mblSliderHandle {
background:transparent url(images/sliderVthumb.png) no-repeat;
border-width:0px;
border-radius:0;
}
.windows_theme .mblSliderV .mblSliderHandle {
background: white none;
}
.windows_theme .mblSliderH {
zoom: 0;
}
</style>
</head>
<body style="visibility:hidden;zoom:1.2;">
<form>
<br>
<center>
<table><tr>
<td>0</td>
<td><input id="sh" data-dojo-type="dojox/mobile/Slider" type="range" data-dojo-props='value:0, min:0, max:20, step:0.1, onChange:function(v){ document.getElementById("sh_val").innerHTML=this.value; }' style="width:200px;" /></td>
<td>20</td>
</tr><tr>
<td></td><td><center>Value:&nbsp;<span id="sh_val">0</span></center></td><td></td>
</tr></table>
</center>
<br>
<center>
<table><tr><td style="width:100px;">
<center>
20<br>
<input id="sv" name="sv" data-dojo-type="dojox/mobile/Slider" type="range" data-dojo-props='value:0, min:-20, max:20, step:1, intermediateChanges:true, onChange:function(v){ document.getElementById("sv_val").innerHTML=this.value; }' style="width:2px;height:200px;" />
-20
</center>
</td><td style="width:80px;">
Value:&nbsp;<span id="sv_val">0</span>
</td></tr></table>
</center>
<br>
<input type=submit>
</form>
Errors:&nbsp;<span id="errors">?</span><br>
Failures:&nbsp;<span id="failures">?</span>
</body>
</html>