Skip to content

Instantly share code, notes, and snippets.

/shell.html

Created November 10, 2016 23:09
Show Gist options
  • Save anonymous/d00e42b65b16dfb09de37f7bbd1a4c33 to your computer and use it in GitHub Desktop.
Save anonymous/d00e42b65b16dfb09de37f7bbd1a4c33 to your computer and use it in GitHub Desktop.
Download ZIP
20161110mpt shell w/dataStore stuff
Raw
shell.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Demo: Layout with StackContainer</title>
<link rel="stylesheet" href="http://dojotoolkit.org/documentation/tutorials/1.10/_common/demo.css" media="screen">
<link rel="stylesheet" href="http://dojotoolkit.org/documentation/tutorials/1.10/dijit_layout/demo/style.css" media="screen">
<link href="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css" media="screen" rel="stylesheet" type="text/css">
<script>
var djConfig = {
isDebug: true,
popup:true,
parseOnLoad: true,
useCustomLogger:true
};
var mData = [
{ UNID: 1, id: "root", name: "Root", type: "base", population: "6 billion"},
{ UNID: 2, id: "dev", name: "dev", type: "layer1", population: "6 billion", parent: "root"},
{ UNID: 3, id: "rec", name: "rec", type: "layer1", population: "6 billion", parent: "root"},
{ UNID: 4, id: "nyc", name: "nyc", type: "layer2", population: "6 billion", parent: "misc"},
{ UNID: 5, id: "misc", name: "misc", type: "layer1", population: "6 billion", parent: "root"},
{ UNID: 6, id: "devDomino", name: "Domino", type: "layer2", population: "900 million", area: "30,221,532 sq km",
timezone: "-1 UTC to +4 UTC", parent: "dev"},
{ UNID: 7, id: "devJava", name: "Java", type: "layer2", parent: "dev" },
{ UNID: 8, id: "devWeb", name: "Web", type: "layer2", parent: "dev" },
{ UNID: 9, id: "devOther", name: "Other", type: "layer2", parent: "dev" },
{ UNID: 10, id: "fin", name: "Finance", type: "layer2", parent: "misc" },
{ UNID: 11, id: "furniture", name: "Furniture", type: "layer2", parent: "misc" },
{ UNID: 12, id: "audio", name: "Audio / HT", type: "layer2", parent: "rec" },
{ UNID: 13, id: "sartorial", name: "Sartorial", type: "layer2", parent: "misc" },
{ UNID: 14, id: "planning", name: "Planning/Org", type: "layer2", parent: "misc" },
{ UNID: 15, id: "film", name: "Film", type: "layer2", parent: "rec" },
{ UNID: 16, id: "miscFood", name: "Food", type: "layer2", parent: "misc" },
{ UNID: 17, id: "miscOther", name: "Other", type: "layer2", parent: "misc" },
{ UNID: 18, id: "re", name: "Real Estate", type: "layer3", parent: "nyc" },
{ UNID: 19, id: "NYCStorage", name: "Storage", type: "layer3", parent: "nyc" },
{ UNID: 20, id: "NYCdesi", name: "Desi Stuff", type: "layer3", parent: "nyc" },
{ UNID: 21, id: "NYCmisc", name: "Misc", type: "layer3", parent: "nyc" },
{ UNID: 22, id: "devJavaLinks", name: "Links", type: "layer3", parent: "devJava" },
{ UNID: 23, id: "devJavaIDE", name: "IDE", type: "layer3", parent: "devJava" },
{ UNID: 24, id: "devJavaServlets", name: "Servlets", type: "layer3", parent: "devJava" },
{ UNID: 25, id: "devJavaOther1", name: "URLRdr", type: "layer3", parent: "devJava" },
{ UNID: 26, id: "devJavaOther2", name: "Other", type: "layer3", parent: "devJava" },
{ UNID: 27, id: "devWebLinks", name: "Links", type: "layer3", parent: "devWeb" },
{ UNID: 28, id: "devWebDojo", name: "Dojo", type: "layer3", parent: "devWeb" },
{ UNID: 29, id: "devWebDojoLinks", name: "Links", type: "layer4", parent: "devWebDojo" },
{ UNID: 30, id: "devWebDojoJSONP", name: "dojo JSONP", type: "layer4", parent: "devWebDojo" },
{ UNID: 31, id: "devWebOther1", name: "Other", type: "layer3", parent: "devWeb" },
{ UNID: 32, id: "consoleDiv", name: "Console", type: "layer3", parent: "devWeb" }
];
</script>
<script src="https://ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/dojo.js">
</script>
<script>
require(["dojo/parser", "dojo/json", "dojo/on", "dijit/registry", "dojo/dom",
"dijit/layout/BorderContainer", "dijit/layout/ContentPane",
"dijit/layout/StackContainer", "dijit/layout/StackController",
"dijit/Dialog", "dijit/form/DropDownButton", "dijit/TooltipDialog",
"dijit/form/Form", "dijit/form/TextBox", "dijit/form/Button",
"dojo/dom-form",
/* store */
"dojo/store/Memory",
"dojo/domReady!"],
function(parser, JSON, on, registry, dom, Dialog, domForm, Memory, ObjStoreModel){
var domTestBtn = dom.byId("btn2");
var regTestBtn = registry.byId("btn2");
var strLogp = "";
var mAdminMode = false;
mAdminChk = function(){
if(!mAdminMode){
mADlg.show();
};
}
visChk = function(){
alert(dojo.byId('tmpDiv').style.visibility);
if (dojo.byId('tmpDiv').style.visibility !== 'hidden') {
dojo.byId('tmpDiv').style.visibility='hidden';
} else {
dojo.byId('tmpDiv').style.visibility='visible';
};
}
dataStore = new dojo.store.Memory({
data: mData,
// idProperty: String
// Indicates the property to use as the identity property. The values of this
// property should be unique.
idProperty: "UNID"
});
getDomData = function(){
//var resObj = dataStore.get(1);
var resObj = dataStore.query({ id: "devOther" });
alert(JSON.stringify(resObj));
}
addTestData = function(){
var newStrHTML = JSON.stringify(dom.byId('appLayout').innerHTML);
alert(newStrHTML);
var newObj = dataStore.put({ id: "test", name: "testDiv", type: "Admin", innerHTML: "newStrHTML" });
//add returns #
alert('trying to put ' + JSON.stringify(dataStore.get(newObj)));
}
parser.parse();
});
</script>
</head>
<body class="claro">
<div id="appLayout" class="demoLayout" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design: 'sidebar'">
<div class="centerPanel" data-dojo-type="dijit/layout/StackContainer" data-dojo-props="region: 'center',id: 'contentStack'">
<div data-dojo-type="dijit/layout/ContentPane" title="Group 1">
<h4>Group 1 Content</h4>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et
dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.</p>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Group Two">
<h4>Group 2 Content</h4>
</div>
<div data-dojo-type="dijit/layout/ContentPane" title="Long Tab Label for this One">
<h4>Group 3 Content</h4>
</div>
</div>
<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'top'">Header content (top)</div>
<div class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'bottom'">
<div data-dojo-type="dijit/layout/StackController" data-dojo-props="containerId:'contentStack'"></div>
</div>
<div id="leftCol" class="edgePanel" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region: 'left', splitter: true">
Sidebar content (left)
<div id="leftAccordian" data-dojo-type="dijit/layout/AccordionContainer" style="height: 300px;">
<div id="leftAccPane1" data-dojo-id="leftAccPane1" data-dojo-type="dijit/layout/ContentPane" title="Group 1">
<h4>Group 1 Content</h4>
<button data-dojo-id="btn1" data-dojo-type="dijit/form/Button" onClick="alert('test');">Alert!</button>
<br>
<button data-dojo-id="btn2" data-dojo-type="dijit/form/Button" onClick="alert(JSON.stringify(mData));">ConfigVar</button>
<br><button data-dojo-id="btn3" data-dojo-type="dijit/form/Button" onClick="visChk();">ToggleVis</button>
<br>
<br><button data-dojo-id="btn4" data-dojo-type="dijit/form/Button" onClick="getDomData();">storeGet</button>
<br>
<button data-dojo-id="btn5" data-dojo-type="dijit/form/Button" onClick="addDomData();">storeAdd</button>
<br><br>
<div id='tmpDiv'>Visible Div</div>
</div>
<div id="leftAccPane2" data-dojo-type="dijit/layout/ContentPane" onShow="mAdminChk();" title="Group Two">
<h4>Group 2 Content</h4>
</div>
<div id="leftAccPane3" data-dojo-type="dijit/layout/ContentPane" title="Long Tab Label for this One">
<h4>Group 3 Content</h4>
</div>
</div>
</div>
</div>
<!-- div mADlg -->
<section>
<div data-dojo-id="mADlg" data-dojo-type="dijit/Dialog" title="Check">
<div data-dojo-type="dijit/form/DropDownButton">
<span>Admin mode</span>
<div data-dojo-type="dijit/form/Form" id="myAdminForm" data-dojo-id="myAdminForm">
<div data-dojo-type="dijit/TooltipDialog" id="tooltipDlg">
<table>
<tr>
<td><label for="Adminpwd">Password:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" required="true" type="password" id="Adminpwd" name="Adminpwd"></td>
</tr>
<tr>
<td colspan="2">
<button data-dojo-type="dijit/form/Button" type="submit" name="submit">Login</button></td>
</tr>
</table>
</div>
<script type="dojo/on" data-dojo-event="submit">
if(this.validate()){
mSetAdminMode();
};
return false;
</script>
<script>
require(["dojo/dom-form", "dojo/dom", "dojo/on", "dojo/parser",
"dijit/form/Form", "dijit/form/Button",
"dojo/domReady!"],
function(domForm, dom, on){
mSetAdminMode = function(value, constraints){
var pw = domForm.fieldToObject("Adminpwd");
var tmpVar = window.atob("dGVzdGluZw==");
var date = new Date();
var myRe = new RegExp(tmpVar, "g");
if(myRe.test(pw)){
mAdminMode = true;
mADlg.hide();
alert('Form contains valid data.');
return true;
}else{
alert('Form contains invalid data. Please correct first');
return false;
}
}
});
</script>
</div>
</div>
<div id="mAlertTxt" data-dojo-props="style: {overflow: 'auto', padding: 0, height:'80%', width:'80%'}" data-dojo-type="dijit/layout/ContentPane">
</div>
</div></section>
<!-- div mADlg -->
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment