<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dojo/resources/dojo.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/dijit.css" />
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/dojo/1.11.2/dijit/themes/claro/claro.css" />
<link rel="stylesheet" href="//cdn.rawgit.com/SitePen/dgrid/v1.0.0/css/skins/claro.css" />
<link rel="stylesheet" href="site.css" />
<link rel="stylesheet" href="index.css" />
</head>
<body class="claro">
<div id="loadingOverlay" class="pageOverlay"></div>
<div id="rootLayout" data-dojo-type="dijit/layout/LayoutContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
Testing obj.getBoundingClientRect() in IE to confirm that it does throw an error when the object is not in the document. <br />
Clicking the button will use dojo/dom-construct to create a paragraph element, and then call getBoundingClientRect() for that element.<br />
In FireFox, Chrome, etc. an object with 0 in all the values is returned, but IE throws an Unspecified Error and Edge returns an empty object.<br />
I'm using a try/catch to return the 0's value in IE.
<br />
<br />
<button id="clickButton" data-dojo-type="dijit/form/Button" type="button">getBoundingClientRect</button>
<br />
<br />
<b>Output:</b>
<div id="resultOutput"></div>
</div>
</div>
<script src="dojoInit.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/dojo/1.10.8/dojo/dojo.js"></script>
<script src="dijitInit.js"></script>
<script src="index.js"></script>
</body>
</html>
window.dojoConfig = {
has: {
"dojo-debug-messages": true
},
packages: [{
name: 'app',
location: window.location.href + "./app"
}],
parseOnLoad: false,
async: true
};
window.ui = {};
(function() {
var waitIndicator = null;
require(['app/WaitIndicator'], function(WaitIndicator) {
waitIndicator = new WaitIndicator({}, 'loadingOverlay');
showLoading();
});
window.showLoading = function() {
if (waitIndicator) {
waitIndicator.show();
}
};
window.hideLoading = function() {
if (waitIndicator) {
waitIndicator.hide();
}
};
})();
require([
'dojo/parser',
'dojo/ready',
'dijit/registry',
'dojo/_base/array',
], function(parser, ready, registry, array) {
ready(100, function() {
parser
.parse()
.then(function() {
array.forEach(registry.toArray(), function(instance) {
ui[instance.id] = instance;
});
ready(function() {
window.hideLoading();
});
})
.otherwise(function(e) {
alert('Error parsing document: '); // + e.message);
});
});
});
define([
"dojo/_base/declare",
"dojo/_base/fx",
"dojo/dom-style",
"dojo/on",
"dijit/_WidgetBase",
"dijit/_TemplatedMixin"
],
function (declare, fx, domStyle, on, WidgetBase, TemplatedMixin) {
var d = declare("app.WaitIndicator", [WidgetBase, TemplatedMixin], {
opacity: 1,
templateString: "<div class='pageOverlay' style='display:none'><div class='loadingMessage'>Loading...</div></div>",
isShowing: false,
referenceCounter: 0,
showOnUnload: true,
hidingTimeout: 0,
hideDelay: 100,
postCreate: function () {
if (this.showOnUnload) {
on(document, "unload", function() {
this.show();
});
}
},
show: function () {
var c = this.referenceCounter, n = c + 1;
if (c !== n) {
this.set("referenceCounter", n);
}
},
hide: function () {
var c = this.referenceCounter, n = c > 1 ? c - 1 : 0;
if (c !== n) {
this.set("referenceCounter", n);
}
},
_setReferenceCounterAttr: function (value) {
this.referenceCounter = value;
var s = this.isShowing;
var shouldBeShowing = value > 0;
if (s !== shouldBeShowing) {
this.set("isShowing", shouldBeShowing);
}
},
_setIsShowingAttr: function (value) {
this.isShowing = value;
value ? this._show() : this._hide();
},
_show: function () {
if (this.hidingTimeout) {
clearTimeout(this.hidingTimeout);
this.hidingTimeout = 0;
}
domStyle.set(this.domNode, { display: "block", opacity: this.opacity });
},
_hide: function () {
if (this.hidingTimeout > 0) { return; }
var wi = this;
this.hidingTimeout = setTimeout(function () {
wi.hidingTimeout = 0;
try {
fx.fadeOut({
node: wi.domNode,
onEnd: function(node) {
domStyle.set(node, "display", "none");
}
}).play();
} catch (ex) {
domStyle.set(wi.domNode, "display", "none");
}
}, this.hideDelay);
}
});
return d;
});
html, body {
height: 100%;
padding: 0;
margin: 0;
background-color: white;
color: black;
}
.pageOverlay {
top: 0;
left: 0;
position: absolute;
height: 100%;
width: 100%;
z-index: 1001;
display: block;
background: #fff;
}
.loadingMessage {
background: #fff url('//ajax.googleapis.com/ajax/libs/dojo/1.10.4/dijit/themes/claro/images/loadingAnimation.gif') no-repeat 10px 23px;
padding: 25px 40px;
color: #A99;
top: 50%;
left: 50%;
position: absolute;
}
#rootLayout {
height: 100%;
}
require(["dojo/ready", "dojo/dom", "dojo/dom-class", "dojo/dom-construct", "dojo/_base/lang", "dojo/request/util",
"dojo/domReady!",
"dijit/layout/LayoutContainer", "dijit/layout/ContentPane", "dijit/form/Button"
],
function(ready, dom, domClass, domConstruct, lang, util) {
ready(function() {
ui.clickButton.on("click", function() {
domConstruct.place("<br /><div>Button Clicked</div>", "resultOutput", "last");
domConstruct.place("<div>Create object</div>", "resultOutput", "last");
var obj = domConstruct.create("p", { innerText: "Test Value" });
domConstruct.place("<div>Call getBoundingClientRect</div>", "resultOutput", "last");
var retEmpty = {x:0, y:0, width:0, height:0, top:0, right:0, bottom:0, left:0};
var ret
try {
ret = obj.getBoundingClientRect() || retEmpty;
} catch (e) {
domConstruct.place('<div style="color: #ff0000">ERROR on obj.getBoundingClientRect(): ' + e.description + "</div>", "resultOutput", "last");
ret = retEmpty;
}
if (typeof ret.x === "undefined") {
ret = retEmpty;
}
domConstruct.place("<div>" + JSON.stringify(ret) + "</div>", "resultOutput", "last");
});
});
});