dojox
Version:
Dojo eXtensions, a rollup of many useful sub-projects and varying states of maturity – from very stable and robust, to alpha and experimental. See individual projects contain README files for details.
153 lines (147 loc) • 5.86 kB
HTML
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
<title>EdgeToEdgeStoreList</title>
<script type="text/javascript" src="../../../deviceTheme.js"
data-dojo-config="mblThemeFiles: ['base']"></script>
<script type="text/javascript" src="../../../../../dojo/dojo.js"
data-dojo-config="async: true, parseOnLoad: true"></script>
<script type="text/javascript" src="../TestUtil.js"></script>
<script type="text/javascript">
require([
"dojo/ready",
"doh/runner",
"dojo/query",
"dojo/_base/lang",
"dojo/_base/array",
"dojo/store/Memory",
"dojo/store/Observable",
"dijit/registry",
"dojox/mobile/parser",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/EdgeToEdgeStoreList"
], function(ready, runner, query, lang, array, Memory, Observable, registry){
var static_data1 = [
{ id: 1, text: "Category 1", header: true },
{ id: 2, text: "Wi-Fi", profile_image_url: "../../images/i-icon-1.png", moveTo: "wifi" },
{ id: 3, text: "Brightness & Wallpaper", profile_image_url: "../../images/i-icon-2.png", moveTo: "bright" },
{ id: 4, text: "Picture Frame", profile_image_url: "../../images/i-icon-3.png", moveTo: "picture" },
{ id: 5, text: "General", profile_image_url: "../../images/i-icon-4.png", moveTo: "general", "selected": "true" },
{ id: 6, text: "Mail, Contacts, Calendars", profile_image_url: "../../images/i-icon-5.png", moveTo: "wifi" },
{ id: 7, text: "Safari", profile_image_url: "../../images/i-icon-6.png", moveTo: "bright" },
{ id: 8, text: "iPod", profile_image_url: "../../images/i-icon-7.png", moveTo: "picture" },
{ id: 9, text: "Category 2", header: true },
{ id: 10, text: "Video", profile_image_url: "../../images/i-icon-8.png", moveTo: "general" },
{ id: 11, text: "Photos", profile_image_url: "../../images/i-icon-9.png", moveTo: "wifi" },
{ id: 12, text: "Store", profile_image_url: "../../images/i-icon-10.png", moveTo: "bright" }
];
var static_data2 = [
{id: 1, label: "Apple", moveTo: "dummy"},
{id: 2, label: "Banana", moveTo: "dummy"},
{id: 3, label: "Cherry", moveTo: "dummy"},
{id: 4, label: "Grape", moveTo: "dummy"},
{id: 5, label: "Kiwi", moveTo: "dummy"},
{id: 6, label: "Lemon", moveTo: "dummy"},
{id: 7, label: "Melon", moveTo: "dummy"},
{id: 8, label: "Orange", moveTo: "dummy"},
{id: 9, label: "Peach", moveTo: "dummy"}
];
store1 = Observable(new Memory({data: static_data1}));
store2 = Observable(new Memory({data: static_data2}));
store1.__counter = store2.__counter = 1;
store = store1;
// switch to the selected store
switchTo = function(store){
window.store = store;
registry.byId("list").setStore(store);
};
// add a new item
add1 = function(){
store.add({
id: 100 + store.__counter,
label: "New Item "+(store.__counter++),
icon: "images/i-icon-1.png",
moveTo: "dummy"
});
};
// update all items text or label
update1 = function(){
array.forEach(store.query({}), function(item, i){
var newItem = lang.clone(item);
if(newItem.text){
newItem.text = newItem.text+"-Updated";
}else{
newItem.label = newItem.label+"-Updated";
}
store.put(newItem);
});
};
// delete the added item
delete1 = function(){
if(store.__counter > 1){
store.remove(100 + (--store.__counter));
}
};
// Tests
ready(function(){
runner.register("dojox.mobile.test.doh.scrollablepane.ScrollablePaneTests", [
{
name: "Verify that ticket #17093 is fixed",
timeout: 4000,
runTest: function(){
var referenceValues = lang.clone(static_data1);
var nodeIndex = 0;
// Verify what is displayed
var nodes = query(".mblListItemLabel", "list");
runner.assertEqual(referenceValues.length, nodes.length,
"Before update, number of elements in the list is not the expected one");
nodes.forEach(function(node){
var text = node.textContent || node.innerText;
runner.assertEqual(text, referenceValues[nodeIndex].text);
nodeIndex++;
});
// Click the update button
fireOnClick(document.getElementById("updateButton"));
// Verify what is displayed
var def = new runner.Deferred();
setTimeout(def.getTestCallback(function(){
nodeIndex = 0;
var nodes = query(".mblListItemLabel", "list");
runner.assertEqual(referenceValues.length, nodes.length,
"After update, number of elements in the list is not the expected one");
nodes.forEach(function(node){
var text = node.textContent || node.innerText;
runner.assertEqual(text, referenceValues[nodeIndex].text + "-Updated");
nodeIndex++;
});
}), 2000);
return def;
}
}
]);
runner.run();
});
});
</script>
</head>
<body style="visibility:hidden;">
<div data-dojo-type="dojox/mobile/View">
<h1 data-dojo-type="dojox/mobile/Heading">EdgeToEdgeStoreList</h1>
<ul data-dojo-type="dojox/mobile/EdgeToEdgeStoreList" id="list"
data-dojo-props='store:store, query:{}, itemMap:{text:"label", profile_image_url:"icon"}'>
</ul>
<p>show the different set:<br>
<input type="button" value="Set1" onclick="switchTo(store1)">
<input type="button" value="Set2" onclick="switchTo(store2)">
<p>alter the object store:<br>
<input type="button" value="Add" onclick="add1()">
<input type="button" id="updateButton" value="Update" onclick="update1()">
<input type="button" value="Delete" onclick="delete1()">
</div>
</body>
</html>