233 lines
7.2 KiB
JavaScript
233 lines
7.2 KiB
JavaScript
/* Cytyle - iOS Interface Cascading Style Sheet
|
|
* Copyright (C) 2007-2013 Jay Freeman (saurik)
|
|
*/
|
|
|
|
(function() {
|
|
var uncytyle = function(e, d) {
|
|
e.className = e.className.replace(new RegExp('(\\s|^)' + d + '(\\s|$)'), ' ');
|
|
};
|
|
|
|
var find = function(e) {
|
|
for (var item = e.target; item != null && item.nodeName != 'A'; item = item.parentNode);
|
|
if (item != null && item.href == '')
|
|
return null;
|
|
return item;
|
|
};
|
|
|
|
if ('ontouchstart' in document.documentElement) {
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
FastClick.attach(document.body);
|
|
|
|
document.addEventListener('click', function(e) {
|
|
var item = find(e);
|
|
if (item == null)
|
|
return;
|
|
|
|
if (typeof cydia != 'undefined')
|
|
if (item.href.substr(0, 32) == 'http://cydia.saurik.com/package/')
|
|
item.href = 'cydia://package/' + item.href.substr(32);
|
|
|
|
item.className += ' cytyle-dn';
|
|
uncytyle(item, 'cytyle-in');
|
|
});
|
|
}, false);
|
|
|
|
var timeout = null;
|
|
var clear = function() {
|
|
if (timeout == null)
|
|
return;
|
|
clearTimeout(timeout);
|
|
timeout = null;
|
|
};
|
|
|
|
document.addEventListener('touchstart', function(e) {
|
|
var item = find(e);
|
|
if (item == null)
|
|
return;
|
|
|
|
uncytyle(item, 'cytyle-up');
|
|
timeout = setTimeout(function() {
|
|
if (timeout != null)
|
|
item.className += ' cytyle-in';
|
|
}, 50);
|
|
});
|
|
|
|
var stop = function(e) {
|
|
var item = find(e);
|
|
if (item == null)
|
|
return;
|
|
|
|
clear();
|
|
uncytyle(item, 'cytyle-in');
|
|
};
|
|
|
|
document.addEventListener('touchmove', stop);
|
|
document.addEventListener('touchend', stop);
|
|
} else {
|
|
document.addEventListener('click', function(e) {
|
|
var item = find(e);
|
|
if (item == null)
|
|
return;
|
|
item.className += ' cytyle-dn';
|
|
uncytyle(item, 'cytyle-in');
|
|
});
|
|
|
|
document.addEventListener('mousedown', function(e) {
|
|
var item = find(e);
|
|
if (item == null)
|
|
return;
|
|
|
|
uncytyle(item, 'cytyle-up');
|
|
item.className += ' cytyle-in';
|
|
});
|
|
|
|
var stop = function(e) {
|
|
var item = find(e);
|
|
if (item == null)
|
|
return;
|
|
|
|
uncytyle(item, 'cytyle-in');
|
|
};
|
|
|
|
document.addEventListener('mousemove', stop);
|
|
document.addEventListener('mouseup', stop);
|
|
}
|
|
|
|
var wipe = function(e) {
|
|
var items = document.getElementsByClassName('cytyle-dn');
|
|
for (var i = items.length, e = 0; i != e; --i) {
|
|
var item = items.item(i - 1);
|
|
uncytyle(item, 'cytyle-in');
|
|
item.className += ' cytyle-up';
|
|
uncytyle(item, 'cytyle-dn');
|
|
}
|
|
};
|
|
|
|
var page = function(e) {
|
|
window.removeEventListener('pageshow', page);
|
|
window.addEventListener('pageshow', wipe);
|
|
};
|
|
|
|
if (typeof cydia != 'undefined')
|
|
document.addEventListener("CydiaViewWillAppear", wipe);
|
|
else if (typeof window.onpageshow != 'undefined')
|
|
window.addEventListener('pageshow', page);
|
|
})();
|
|
|
|
if (navigator.userAgent.search(/Cydia/) == -1)
|
|
document.write('<base target="_top"/>');
|
|
else {
|
|
document.write('<style type="text/css"> body.pinstripe { background: none !important; } </style>');
|
|
document.write('<base target="_blank"/>');
|
|
}
|
|
|
|
// XXX: this might just fail on Chrome everywhere, even Mac :(
|
|
// https://code.google.com/p/chromium/issues/detail?id=168646
|
|
if (navigator.userAgent.search(/Linux/) != -1)
|
|
document.write('<style type="text/css"> p { text-rendering: optimizeSpeed !important; } </style>');
|
|
|
|
(function() {
|
|
var cytyle = window.location.search;
|
|
cytyle = cytyle.match(/^\?cytyle=(.*)$/);
|
|
|
|
if (cytyle != null)
|
|
cytyle = ' cytyle-' + cytyle[1];
|
|
else {
|
|
cytyle = navigator.userAgent;
|
|
cytyle = cytyle.match(/.*; CPU (?:iPhone )?OS ([0-9_]*) like Mac OS X[;)]/);
|
|
cytyle = cytyle == null ? '7.0' : cytyle[1].replace(/_/g, '.');
|
|
cytyle = parseInt(cytyle);
|
|
cytyle = cytyle >= 7 ? ' cytyle-flat' : ' cytyle-faux';
|
|
}
|
|
|
|
var body = document.documentElement;
|
|
body.className += cytyle;
|
|
|
|
if (window.devicePixelRatio && devicePixelRatio >= 2) {
|
|
var test = document.createElement('div');
|
|
test.style.border = '.5px solid transparent';
|
|
body.appendChild(test);
|
|
if (test.offsetHeight == 1)
|
|
body.className += ' cytyle-hair';
|
|
body.removeChild(test);
|
|
}
|
|
})();
|
|
|
|
(function() {
|
|
var update = function() {
|
|
if (window.parent != window)
|
|
parent.postMessage({cytyle: {name: "iframe-y", value: document.body.scrollHeight}}, "*");
|
|
};
|
|
|
|
window.addEventListener('message', function(event) {
|
|
var message = event.data.cytyle;
|
|
if (message == undefined)
|
|
return;
|
|
|
|
switch (message.name) {
|
|
case "iframe-y":
|
|
var height = message.value;
|
|
var iframes = document.getElementsByTagName("iframe");
|
|
if (iframes.length != 1)
|
|
return;
|
|
var iframe = iframes.item(0);
|
|
iframe.style.height = height + 'px';
|
|
update();
|
|
break;
|
|
}
|
|
}, false);
|
|
|
|
window.addEventListener('load', update, false);
|
|
})();
|
|
|
|
(function() {
|
|
var text = document.createElement("span");
|
|
text.appendChild(document.createTextNode("My"));
|
|
|
|
var block = document.createElement("div");
|
|
block.style.display = "inline-block";
|
|
block.style.height = "0px";
|
|
block.style.width = "1px";
|
|
|
|
var div = document.createElement("div");
|
|
div.id = 'cytyle-metric';
|
|
div.style.lineHeight = "normal";
|
|
|
|
div.appendChild(text);
|
|
div.appendChild(block);
|
|
|
|
var body = document.documentElement;
|
|
body.appendChild(div); try {
|
|
var full = text.offsetHeight;
|
|
|
|
var style = div.currentStyle;
|
|
if (typeof style == 'undefined')
|
|
style = window.getComputedStyle(div, null);
|
|
var font = parseInt(style.fontSize);
|
|
|
|
block.style.verticalAlign = "baseline";
|
|
var base = block.offsetTop - text.offsetTop;
|
|
// XXX: on iOS 3 I am unable to do this?
|
|
if (base == 0)
|
|
base = 14;
|
|
} finally {
|
|
body.removeChild(div);
|
|
}
|
|
|
|
var top = base - font * 0.75;
|
|
|
|
//var down = (font - base) / font / 2;
|
|
//alert(down + "em = (" + font + " - " + base + ") / " + font + " / 2");
|
|
var down = ((full - (base - top)) / 2 - top) / font;
|
|
//alert(down + "em = ((" + full + " - (" + base + " - " + top + ")) / 2 - " + top + ") / " + font);
|
|
|
|
//var over = 4.0; // Modern
|
|
//var over = 2.5; // Legacy
|
|
//var over = 3.5; // Chrome
|
|
//var over = 3.0; // Medium
|
|
//var desc = font * 0.25;
|
|
//var down = (desc - over) / font;
|
|
|
|
document.write('<style type="text/css"> p, input[type="password"], input[type="text"], select { top: ' + down + 'em; } </style>');
|
|
})();
|