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.
515 lines (470 loc) • 17.7 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>MVC Repeat with Selectable RoundRectList - Multiple Select</title>
<script type="text/javascript" src="../../../../dojox/mobile/deviceTheme.js" data-dojo-config="mblThemeFiles: ['base']"></script>
<!-- required: dojo.js -->
<script type="text/javascript" src="../../../../dojo/dojo.js"
data-dojo-config="isDebug: true, async: true, parseOnLoad: false, mvc: {debugBindings: true}"></script>
<script type="text/javascript">
require([
"dojo/_base/lang",
"dojo/_base/declare",
"dojo/_base/connect",
"dijit/registry",
"dojo/dom",
"dojox/mobile/parser",
"dojo/store/Memory",
"dojo/ready",
"dojo/when",
"dojo/Stateful",
"dojox/mvc/getStateful",
"dojo/data/ItemFileWriteStore",
"dojo/store/Memory",
"dojox/mvc/EditStoreRefController",
"dojox/mvc/ListController",
"dojox/mvc/at",
"dojox/mvc/Group",
"dojox/mvc/Repeat",
"dojox/mvc/Output",
"dojox/mobile",
"dojox/mobile/compat",
"dojox/mobile/FixedSplitter",
"dojox/mobile/Container",
"dojox/mobile/ListItem",
"dojox/mobile/Button",
"dojox/mobile/ToolBarButton",
"dojox/mobile/TextBox",
"dojox/mobile/CheckBox",
"dojox/mobile/EdgeToEdgeDataList",
// "dojox/mobile/TextArea",
"dojox/mobile/View",
"dojox/mobile/ScrollableView",
"dojox/mobile/SimpleDialog",
// "dojox/mobile/FixedSplitter",
// "dojox/mobile/EdgeToEdgeList",
// "dojox/mobile/EdgeToEdgeCategory",
// "dojox/mobile/RoundRectCategory",
"dojox/mobile/Heading",
"dojox/mobile/deviceTheme"
], function(lang, declare, connect, registry, dom, parser, MemoryStore, ready, when, Stateful,
getStateful, ItemFileWriteStore, Memory, EditStoreRefController, ListController, at){
window.at = at;
_addNewItem = function(e){
console.log("_addNewItem called");
//event.stop(e);
//var datamodel = app.loadedModels.itemlistmodel;
//var datamodel = app.loadedModels.itemlistcontroller;
var datamodel = currentctrl;
var parentId;
try {
parentId = datamodel.model[0].parentId;
}
catch (e) {
console.log("Warning: itemlistmodel is empty, get parentId from listsmodel");
parentId = app.loadedModels.listsmodel[window.selected_configuration_item].id;
}
var index = datamodel.model.length;
var insert = new Stateful({
"id": (new Date().getTime()),
"parentId": parentId,
"title": "",
"notes": "To do",
"due": "2010-10-15T11:03:47.681Z",
"completionDate": "",
"reminder": "2010-10-15T11:03:47.681Z",
"repeat": 0,
"priority": 0,
"hidden": false,
"completed": false,
"deleted": false
});
datamodel.model.push(insert);
datamodel.commit(); //need to commit after delete. TODO: need to enhance the performance
var r = registry.byId("todomain");
r.performTransition("details", 1, "none");
movedTo(index);
//update cache
//app.loadedModels.itemlistsmodel[parentId] = datamodel.model;
//refresh view
//window.showData(datamodel.model);
};
completeConverter = {
format: function(value){
console.log("****in completeConverter format value = "+value);
//return "dijitMenuItemLabel" + (value ? " complete" : "");
//ctrl.set("completed", false);
//ctrlComplete.set("completed", true);
//for(var a = this.source.inModel, i = 0; i < a.length; i++){
// if(a[i].id == this.target.id){
console.log("****in completeConverter format this.source.id = "+this.source.id);
console.log(this.source);
//return a[i];
// }
//}
return value;
},
parse: function(value){
console.log("****in completeConverter parse value = "+value);
console.log("****in completeConverter parse this.source.id = "+this.source.id);
console.log(this.source);
var model = ctrlComplete.model;
if(value){
model = currentctrl.model;
}
for(var a = model, i = 0; i < a.length; i++){
if(a[i].id == this.source.id){
if(value){ // remove from list and move to completed
window.setTimeout(moveToComplete(currentctrl.model, ctrlComplete.model, i, value), 500);
}else{
window.setTimeout(moveFromComplete(ctrlComplete.model, currentctrl.model, i, value), 500);
}
}
}
//throw new Error(); // Stop copying the new value for unchecked case
if(!value){ throw new Error(); } // Stop copying the new value for unchecked case
return value;
}
};
var listData =
{
"identifier": "id",
"items": [
{
"id": 100,
"parentId":1,
"title": "item 1 to do for 1",
"notes": "To do",
"due": "2010-10-15T11:03:47.681Z",
"completionDate": "",
"reminder": "2010-10-15T11:03:47.681Z",
"repeat": 0,
"priority": 0,
"hidden": false,
"completed": false,
"deleted": false
},
{
"id": 103,
"parentId":1,
"title": "item 3 to do for 1",
"notes": "To do",
"due": "2010-10-15T11:03:47.681Z",
"completionDate": "",
"reminder": "2010-10-15T11:03:47.681Z",
"repeat": 2,
"priority": 2,
"hidden": false,
"completed": false,
"deleted": false
}
]
};
var listData1 =
{
"identifier": "id",
"items": [
{
"id": 101,
"parentId":2,
"title": "item 1 to do for 2",
"notes": "To do",
"priority": 0,
"due": "2010-10-15T11:03:47.681Z",
"completionDate": "",
"reminder": "2010-10-15T11:03:47.681Z",
"repeat": 0,
"hidden": false,
"completed": false,
"deleted": false
},
{
"id": 103,
"parentId":2,
"title": "item 3 else to do for 2",
"notes": "To do",
"priority": 0,
"due": "2010-10-15T11:03:47.681Z",
"completionDate": "",
"reminder": "2010-10-15T11:03:47.681Z",
"repeat": 0,
"hidden": false,
"completed": false,
"deleted": false
}
]
};
var completedListData =
{
"identifier": "id",
"items": [
{
"id": 102,
"parentId":2,
"title": "item 2 to do for 0",
"notes": "To do",
"due": "2010-10-15T11:03:47.681Z",
"completionDate": "",
"reminder": "2010-10-15T11:03:47.681Z",
"repeat": 0,
"priority": 1,
"hidden": false,
"completed": true,
"deleted": false
} ]
};
var allListsData =
{
"identifier": "id",
"items": [
{
"title":"Reminders",
"id":0,
"parentId":null,
"itemsurl":"../resources/data/items-for-0.json"
},
{
"title":"Work Items",
"id":1,
"parentId":null,
"itemsurl":"../resources/data/items-for-1.json"
}
]
};
var inited,
ctrlClass = declare([EditStoreRefController, ListController], {
cursorIndex: 0,
completed: "",
completedTyped: "",
_refModelProp: "model",
addEmpty: function(){
this.model.push(new Stateful({First: "", Last: "", Location: "", Office: "", Email: "", Tel: "", Fax: ""}));
this.set("cursorIndex", this.get("length") - 1);
},
remove: function(idx){
this.model.splice(idx, 1);
if(this.get("cursorIndex") < 0){
this.set("cursorIndex", this.get("length") - 1);
}
},
_setCompletedAttr: function(value){
this.set("completedTyped", value);
console.log("_setCompletedAttr called for completedTyped="+this.completedTyped +" with value="+value);
when(this.queryStore(), function(){
if(inited){
parser.parse();
//inited = true;
var d = registry.byId("addbutton");
connect.connect(d, "onClick", this, _addNewItem);
}
});
this._set("completed", value);
}
});
ctrlListsClass = declare([EditStoreRefController, ListController], {
cursorIndex: 0,
_refModelProp: "model"
});
listsCtrls = [];
ctrlComplete = new ctrlClass({store: new Memory({data: completedListData})});
listsCtrls.push(ctrlComplete);
currentctrl = new ctrlClass({store: new Memory({data: listData})});
listsCtrls.push(currentctrl);
ctrl1 = new ctrlClass({store: new Memory({data: listData1})});
listsCtrls.push(ctrl1);
listsCtrl = new ctrlListsClass({store: new Memory({data: allListsData})});
when(listsCtrl.queryStore(), function(){
listsCtrls[0].set("completed", true);
//currentctrl.set("completed", false);
listsCtrls[1].set("completed", false);
inited = true;
listsCtrls[2].set("completed", false);
});
// called when showing item details
movedTo = function(index) {
console.log("movedTo called with index"+index);
currentctrl.set('cursorIndex', index);
var g = registry.byId("detailsGroup");
g.set("target", at(currentctrl, 'cursor'));
var h = registry.byId("detailsHeading");
h.set("label","To-Do Details");
var h2 = dom.byId("detailsHeading2");
h2.innerHTML="To Do Item";
};
// called when showing item details for a completed item
movedToCompleted = function(index) {
console.log("movedToCompleted called with index"+index);
ctrlComplete.set('cursorIndex', index);
var g = registry.byId("detailsGroup");
g.set("target", at(ctrlComplete, 'cursor'));
var h = registry.byId("detailsHeading");
h.set("label","Completed To-Do");
var h2 = dom.byId("detailsHeading2");
h2.innerHTML="Completed Item";
};
// called when an item is completed
moveToComplete = function(fromModel, toModel, i, value) {
console.log("****in moveToComplete value = "+value);
var t = fromModel.splice(i, 1);
t[0].set("completed", value);
toModel.push(t[0]);
};
// called when a completed items is unchecked
moveFromComplete = function(fromModel, toModel, i, value) {
console.log("****in moveFromComplete value = "+value);
var t = fromModel.splice(i, 1);
t[0].set("completed", value);
toModel = listsCtrls[t[0].get('parentId')].model;
toModel.push(t[0]);
};
// called when a different list is selected
selectList = function(index) {
if(index != -1){
index = parseInt(index)+1;
}else{
index = '0';
}
console.log("selectList called with index"+index);
listsCtrl.set('cursorIndex', index);
//listsCtrl.set('cursorIndex', index);//listItems
var r = registry.byId("listItems");
currentctrl = listsCtrls[index];
r.set("children", at(currentctrl, 'model'));
};
// called to delete the selected item
deleteSelected = function() {
console.log("deleteSelected called with currentctrl.cursorIndex="+currentctrl.cursorIndex);
console.log("deleteSelected called with currentctrl.cursor.title="+currentctrl.cursor.title);
currentctrl.model.splice(currentctrl.cursorIndex, 1);
var r = registry.byId("details");
r.performTransition("todomain", 1, "none");
};
showDlg = function(dlg){
registry.byId(dlg).show();
};
hideDlg = function(dlg){
registry.byId(dlg).hide();
};
resetAll = function() {
console.log("resetAll called");
};
});
</script>
</head>
<body style="visibility:hidden;">
<script type="dojo/require">at: "dojox/mvc/at"</script>
<div data-dojo-type="dojox.mobile.FixedSplitter" data-dojo-props='orientation:"H"'>
<div data-dojo-type="dojox.mobile.Container" style="width:300px;border-right:1px solid black;">
<div id="settings" data-dojo-type="dojox.mobile.ScrollableView">
<!-- <h1 data-dojo-type="dojox.mobile.Heading" data-dojo-props='fixed:"top"'>Configure</h1> -->
<h2 data-dojo-type="dojox.mobile.Heading" region="top">Configure
<img style="position: absolute; display: block; width: 32px; height: 32px; right: 0; top: 0" onClick="editConfiguration();"
src="../images/settings.png" />
</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem" clickable="true"
data-dojo-props="onClick: function(){console.log('selected list ', '-1'); selectList('-1');}">
Completed
</li>
</ul>
<ul data-dojo-type="dojox.mobile.RoundRectList"
data-dojo-mixins="dojox.mvc.Repeat"
data-dojo-props="exprchar:'#', children: at(listsCtrl, 'model')">
<li class="mblVariableHeight"
data-dojo-type="dojox.mobile.ListItem" clickable="true"
data-dojo-props="label:at('rel:#{this.index}','title'),
onClick: function(){console.log('selected list ', '#{this.index}'); selectList('#{this.index}');}">
<!-- <table><tr>
<td data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at('rel:#{this.index}','title')"></td>
</tr></table>
-->
</li>
</ul>
</div>
</div>
<div data-dojo-type="dojox.mobile.Container">
<div id="main">
<div id="leftNav"></div>
<div id="mainContent">
<div id="todomain" data-dojo-type="dojox.mobile.View" selected="true">
<div data-dojo-type="dojox.mvc.Group"
data-dojo-props="target: at(listsCtrl, 'cursor')">
<div data-dojo-type="dojox.mobile.Heading" region="top"
data-dojo-props="label: at('rel:','title')">
<span id="addbutton" data-dojo-type="dojox.mobile.ToolBarButton"
data-dojo-props='icon:"mblDomButtonWhitePlus"' style="float:right;"
onclick="console.log('+ was clicked')"></span>
</div>
</div>
<ul data-dojo-type="dojox.mobile.RoundRectList" id="listItems"
data-dojo-mixins="dojox.mvc.Repeat"
data-dojo-props="exprchar:'#', children: at(currentctrl, 'model')">
<li class="mblVariableHeight" moveTo="details" callback="function(){movedTo('#{this.index}')}"
data-dojo-type="dojox.mobile.ListItem" clickable="true"
data-dojo-props="onClick: function(){console.log('select item ', '#{this.index}'); window.selected_item = this.index;}"
transitionOptions="{title: 'Detail', target: 'details,detail'}">
<table><tr>
<td><input preventTouch='true' type='checkbox'
data-dojo-type="dojox.mobile.CheckBox"
data-dojo-props="checked: at('rel:#{this.index}','completed').transform(completeConverter)"/></td>
<td data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at('rel:#{this.index}','title')"></td>
</tr></table>
</li>
</ul>
<!--
<h2 data-dojo-type="dojox.mobile.Heading" region="top">
<span>Completed Items</span>
</h2>
<ul data-dojo-type="dojox.mobile.RoundRectList"
data-dojo-mixins="dojox.mvc.Repeat"
data-dojo-props="exprchar:'#', children: at(ctrlComplete, 'model')">
<li class="mblVariableHeight" moveTo="details" callback="function(){movedToCompleted('#{this.index}')}"
data-dojo-type="dojox.mobile.ListItem" clickable="true"
data-dojo-props="onClick: function(){console.log('select item ', '#{this.index}'); window.selected_item = this.index;}"
transitionOptions="{title: 'Detail', target: 'details,detail'}">
<table><tr>
<td><input preventTouch='true' type='checkbox'
data-dojo-type="dojox.mobile.CheckBox"
data-dojo-props="checked: at('rel:#{this.index}','completed').transform(completeConverter)"/></td>
<td data-dojo-type="dojox.mvc.Output"
data-dojo-props="value: at('rel:#{this.index}','title')"></td>
</tr></table>
</li>
</ul>
-->
</div>
<div id="details" data-dojo-type="dojox.mobile.ScrollableView">
<h1 id="detailsHeading" data-dojo-type="dojox.mobile.Heading" back="Back" moveTo="todomain">To-Do Details</h1>
<div id="detailsGroup" class="fieldset" data-dojo-type="dojox.mvc.Group"
data-dojo-props="target: at(currentctrl, 'cursor')">
<h2 id="detailsHeading2">Completed Items</h2>
<div class="field-row">
<span>To Do</span>
<input id="todo" data-dojo-type="dojox.mobile.TextBox"
placeholder="To do placeholder"
data-dojo-props="value: at('rel:', 'title')"/>
</div>
<ul data-dojo-type="dojox.mobile.RoundRectList">
<li data-dojo-type="dojox.mobile.ListItem"
data-dojo-props="clickable: true, noArrow: true,
onClick: function(){console.log('delete item '); showDlg('dlg_confirm');}">
Delete
</li>
</ul>
</div>
</div>
</div>
</div>
<div id="dlg_confirm" data-dojo-type="dojox.mobile.SimpleDialog">
<div class="mblSimpleDialogTitle">Delete Confirmation</div>
<div class="mblSimpleDialogText">Are you sure you want to delete this item?</div>
<button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton" onclick="hideDlg('dlg_confirm')">No</button>
<button data-dojo-type="dojox.mobile.Button" class="mblSimpleDialogButton mblBlueButton" onclick="hideDlg('dlg_confirm');deleteSelected();">Yes</button>
</div>
</body>
</html>