Skip to content
Browse files

rudimentary IE9 support

  • Loading branch information...
1 parent 6c54a82 commit 6b3fd4dddd7c4fb8772c1969a6e34f4cdc6a2d17 @LeaVerou committed Nov 8, 2012
Showing with 74 additions and 28 deletions.
  1. +3 −0 .gitignore
  2. +3 −2 code/dabblet.js
  3. +9 −2 code/global.js
  4. +46 −20 code/utopia.js
  5. +2 −2 index.html
  6. +1 −0 result/index.php
  7. +5 −2 style/global.css
  8. +5 −0 style/style.css
View
3 .gitignore
@@ -0,0 +1,3 @@
+oauth.php
+sources/
+thesis/
View
5 code/dabblet.js
@@ -459,8 +459,8 @@ document.onkeydown = function(evt) {
}
};
-// Supports sliders?
-(function(){
+(function() {
+ // Supports sliders?
var slider = $u.element.create('input', {
prop: {
type: 'range'
@@ -470,4 +470,5 @@ document.onkeydown = function(evt) {
if(slider.type === 'range') {
document.documentElement.classList.add('supports-range');
}
+
})();
View
11 code/global.js
@@ -350,8 +350,9 @@ document.addEventListener('DOMContentLoaded', function() {
}
});
-// If only :focus and :checked bubbled...
(function() {
+
+ // If only :focus and :checked bubbled...
function ancestorClass(action, className, element) {
var ancestor = element;
@@ -370,4 +371,10 @@ document.addEventListener('DOMContentLoaded', function() {
ancestorClass('remove', 'focus', this);
}
});
-})();
+
+ // Supports CORS?
+ if (!('withCredentials' in new XMLHttpRequest)) {
+ document.documentElement.classList.add('no-cors');
+ }
+
+})();
View
66 code/utopia.js
@@ -204,7 +204,10 @@ var _ = window.Utopia = {
prop: function (element, properties) {
if (properties) {
for (var prop in properties) {
- element[prop] = properties[prop];
+ try { // Bloody IE <= 9
+ element[prop] = properties[prop];
+ }
+ catch(e) {}
}
}
@@ -343,47 +346,70 @@ var _ = window.Utopia = {
method = o.method || 'GET',
data = o.data || '';
- xhr.open(method, o.url + (method === 'GET' && data? '?' + data : ''), true);
-
o.headers = o.headers || {};
- if(method !== 'GET' && !o.headers['Content-type'] && !o.headers['Content-Type']) {
+ xhr.open(method, o.url + (method === 'GET' && data? '?' + data : ''), !o.sync);
+
+ if (method !== 'GET' && !o.headers['Content-type'] && !o.headers['Content-Type']) {
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
}
for (var header in o.headers) {
xhr.setRequestHeader(header, o.headers[header]);
}
- xhr.onreadystatechange = function(){
+ var callback = function() {
+ document.body.removeAttribute('data-loading');
- if(xhr.readyState === 4) {
- document.body.removeAttribute('data-loading');
-
- o.callback(xhr);
+ o.callback(xhr);
+ };
+
+ xhr.onreadystatechange = function(){
+ if (xhr.readyState === 4) {
+ callback();
}
};
xhr.send(method === 'GET'? null : data);
-
+
return xhr;
},
/**
* Lazy loads an external script
*/
- script: function(url, callback, doc) {
+ script: function(url, callback, doc, sync) {
doc = doc || document;
- return _.element.create({
- tag: 'script',
- properties: {
- src: url,
- async: true,
- onload: callback
- },
- inside: doc.documentElement
- });
+ var code;
+
+ if (sync) {
+ _.xhr({
+ url: url,
+ callback: function (xhr) { code = xhr.responseText; },
+ sync: true
+ });
+ }
+
+ var script = document.createElement('script');
+
+ if (sync) {
+ script.innerHTML = code;
+ script.onload = callback;
+ }
+ else {
+ script.src = url;
+ script.async = true;
+ }
+
+ doc.documentElement.appendChild(script);
+
+ if (sync) {
+ // console.log(url, document.body.classList);
+ callback && callback.call(script);
+ }
+
+ return script;
},
/**
View
4 index.html
@@ -68,7 +68,7 @@
</form>
</div>
- <div class="with-dropdown">
+ <div class="with-dropdown" id="cloud">
<button id="save-button" class="with-symbol" title="Save">☁</button>
<menu class="dropdown">
<a href="/" onclick="Dabblet.wipe()" class="command" data-keyboard="⌘N">New dabblet</a>
@@ -167,11 +167,11 @@
<script src="/code/util.js"></script><!-- to be removed -->
<script src="/code/utopia.js"></script>
-<script>!!document.createElement("a").classList || $u.script("/code/classList.min.js");</script>
<script src="/code/selection.js"></script>
<script src="/code/code-highlight.js"></script>
<script src="/code/editor.js"></script>
+<!--[if lte IE 9]><script src="/code/classList.min.js"></script><![endif]-->
<script src="/code/global.js"></script>
<script src="/code/dabblet.js"></script>
View
1 result/index.php
@@ -10,6 +10,7 @@
if($gist_id) {
preg_match('#\bgist\/[\da-f]+\/([\da-f]+)#i', $_SERVER['REQUEST_URI'], $gist_rev);
+
$gist_rev = $gist_rev[1];
$uri = "https://api.github.com/gists/$gist_id";
View
7 style/global.css
@@ -85,7 +85,6 @@ button,
padding: .45em .6em;
border: 0;
border-radius: .3em;
- background: inherit;
color: inherit;
font: inherit;
text-align: center;
@@ -99,8 +98,8 @@ button {
float: left;
border: 1px solid rgba(0,0,0,.4);
margin: 0 .2em;
+ background: url(/img/noise.png);
white-space: nowrap;
- background-image: url(/img/noise.png);
box-shadow: rgba(255, 255, 255, .4) 0 1px 0 inset,
rgba(255, 255, 255, .3) 0 25px 30px -12px inset,
rgba(0, 0, 0, .6) 0 1px 2px;
@@ -220,6 +219,10 @@ body > header.focus {
text-overflow: ellipsis;
}
+ .no-cors #currentuser {
+ display: none;
+ }
+
@media (max-width: 1000px) {
#currentuser {
max-width: 8em;
View
5 style/style.css
@@ -165,6 +165,10 @@ html.supports-range label.slider {
border-left: 0;
border-right: 0;
}
+
+.no-cors #cloud {
+ display: none;
+}
.amp {
font: italic 160%/.5 Baskerville, 'Palatino Linotype', 'Goudy Old Style', Constantia, Palatino, serif;
@@ -300,6 +304,7 @@ body[data-page="result"] > #result {
right: 0;
padding-left: .6em;
margin-top: 1em;
+ background: url(/img/noise.png) hsla(24, 20%, 50%,.05);
background: url(/img/noise.png), linear-gradient(left, hsla(24, 20%, 50%,.08) 70%, hsla(24, 20%, 50%,0));
}

0 comments on commit 6b3fd4d

Please sign in to comment.
Something went wrong with that request. Please try again.