Skip to content

Instantly share code, notes, and snippets.

@zjn0505
Last active July 7, 2019 03:13
Show Gist options
  • Select an option

  • Save zjn0505/09ba410b211098ce16c28cf6c6896895 to your computer and use it in GitHub Desktop.

Select an option

Save zjn0505/09ba410b211098ce16c28cf6c6896895 to your computer and use it in GitHub Desktop.
xkcd Android app injected scripts
window.addEventListener('load', function(){
Array.from(document.getElementsByClassName('illustration')).forEach(
function(element, index, array) {
var longpress = false;
var presstimer = null;
var startScreenX, startScreenY;
var startWindowScale;
var cancel = function(e) {
if (presstimer !== null) {
clearTimeout(presstimer);
presstimer = null;
}
this.classList.remove("longpress");
};
var click = function(e) {
if (presstimer !== null) {
clearTimeout(presstimer);
presstimer = null;
}
this.classList.remove("longpress");
if (longpress) {
return false;
}
};
var start = function(e) {
if (e.type === "click" && e.button !== 0) {
return;
}
if (e.touches != undefined) {
startScreenX = e.touches[0].screenX;
startScreenY = e.touches[0].screenY;
startWindowScale = window.visualViewport.scale;
}
longpress = false;
this.classList.add("longpress");
if (presstimer === null) {
presstimer = setTimeout(function() {
longpress = true;
AndroidImg.doLongPress(element.title);
}, 500);
}
return false;
};
var move = function(e) {
if (e.touches != undefined) {
var newX = e.touches[0].screenX;
var newY = e.touches[0].screenY;
var moveX = Math.abs(startScreenX - newX);
var moveY = Math.abs(startScreenY - newY);
if (Math.max(moveX, moveY) > 20) {
clearTimeout(presstimer);
}
}
var pageHasZoom = Math.abs(startWindowScale - window.visualViewport.scale) / startWindowScale > 0.05;
if (pageHasZoom) {
clearTimeout(presstimer);
}
}
element.addEventListener("mousedown", start);
element.addEventListener("touchstart", start);
element.addEventListener("click", click);
element.addEventListener("mouseout", cancel);
element.addEventListener("touchend", cancel);
element.addEventListener("touchleave", cancel);
element.addEventListener("touchcancel", cancel);
element.addEventListener("touchmove", move);
element.addEventListener("mousemove", move);
}
)
}, false)
window.addEventListener('load', function(){
Array.from(document.getElementsByClassName('latex')).forEach(
function(element, index, array) {
var lastX;
element.addEventListener('touchmove', function(e){
var currentX = e.changedTouches[0].clientX
if (currentX > lastX) {
// pre
if (element.scrollLeft == 0) {
AndroidLatex.onTouch(3)
return
}
} else if (lastX > currentX) {
// next
if (element.scrollWidth - element.clientWidth == element.scrollLeft) {
AndroidLatex.onTouch(3)
return
}
}
lastX = currentX
if (element.scrollWidth - element.clientWidth > element.scrollLeft) {
AndroidLatex.onTouch(2)
} else {
AndroidLatex.onTouch(3)
}
}, false)
element.addEventListener('touchend', function(e){
AndroidLatex.onTouch(3);
}, false)
}
)
}, false)
body {
background: #3A3A3A;
}
p, blockquote, div, body ul li, body ol li, tbody tr td {
color: #EBEBEB;
}
a:link, #question, #attribute, .refnum, sup span {
color: #ADD8E6 !important;
}
.illustration {
background: #AAA;
}
window.addEventListener('load', function(){
Array.from(document.getElementsByClassName('refnum')).forEach(
function(element, index, array) {
element.addEventListener('click', function(e){
AndroidRef.refContent(element.nextSibling.innerHTML);
}, false)
}
)
}, false)
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,pre,a,abbr,acronym,address,big,cite,code,del,dfn,img,ins,kbd,q,s,samp,small,strike,tt,var,b,u,i,center,dl,dt,dd,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}body{line-height:1}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}table{border-collapse:collapse;border-spacing:0}.centered{margin:0 auto;min-width:960px}.clearfix:after{content:".";display:block;clear:both;visibility:hidden;line-height:0;height:0}.clearfix{display:inline-block}html[xmlns] .clearfix{display:block}* html .clearfix{height:1%}
body {
font-size: 1.3em;
line-height: 1.1em;
background: url('file:///android_asset/graph_tile.jpg');
padding: 1em;
}
div {
line-height: 1.1em;
font-weight: 700;
padding: 1em;
font-size: 1.6em;
}
div ul li {
font-size: 0.7em;
}
table {
line-height: 1.7em;
font-weight: 500;
}
body center table tbody tr td {
font-size: 1.4em;
line-height: 1.5;
}
sup {
font-family: Verdana, sans-serif;
}
.bulleted {
list-style-type: disc;
}
.bulleted li {
margin-left: 3em;
}
ul {
font-size: 1.5em;
}
body > ol {
font-size: 1.5em;
padding-left: 140px;
}
li {
line-height: 1.4;
}
p {
font-size: 1.5em;
font-family: Helvetica, Times, serif;
padding: .75em 0;
line-height: 1.7em;
color: #333333;
overflow: auto;
font-weight: 500;
}
a > h1 {
font-size: 1.5em;
}
blockquote, blockquote > p {
font-size: 1.0em;
font-style: italic;
line-height: 1.5em;
}
body > blockquote {
font-size: 1.7em;
}
td > ol > li {
font-size: 0.6em;
padding: .75em 0;
padding-left: 0px;
}
center > font {
font-size: 1.0em;
}
#news, .entry h1, .date-stamp, #question, .nav-buttons, footer p, footer a:link {
font-family: Verdana, Helvetica, Arial, sans-serif;
}
a:link {
color: #005994;
text-decoration: underline;
font-weight: 700;
}
a:visited {
color: #000;
}
#news {
border-top: 1px dotted black;
font-size: .8em;
padding: 1em 0;
text-transform: uppercase;
color: #005994;
text-align: center;
}
#question, #attribute {
font-style: italic;
font-weight: 700;
color: #005994;
}
#question {
padding-top: 1.5em;
padding-left: 0.2em;
padding-right: 0.2em;
}
#attribute {
padding-bottom: 1.5em;
text-align: right;
margin-right: 20%;
margin-top: -.7em;
font-family: Verdana, Helvetica, Arial, sans-serif;
}
.entry h1 {
font-size: 1.5em;
line-height: 1.1em;
font-weight: 700;
}
.date-stamp {
font-size: .7em;
color: #999;
}
.illustration {
max-width: 95%;
min-height: 15em;
width: auto !important;
object-fit: contain;
display: block;
margin: 0 auto;
padding: 0.7em 0;
}
.aside {
font-style: italic;
font-size: .9em;
padding-top: 0;
padding-bottom: 2.2em;
text-align: center;
}
/* the reference tooltips style starts here */
.ref {
position: relative;
vertical-align: baseline;
}
.refnum {
position: relative;
left: 2px;
bottom: 1ex;
font-family: Verdana, sans-serif;
color: #005994;
font-size: .7em;
font-weight: bold;
text-decoration: underline;
cursor: pointer;
}
.refbody {
font-family: Verdana, sans-serif;
font-size: .7em;
line-height: 1.1;
display: block;
min-width: 20em;
position: absolute;
left: 25px;
bottom: 5px ;
border: 1px solid;
padding: 5px;
background-color: #fff;
word-wrap: break-word;
z-index: 9999;
overflow: auto;
visibility: hidden;
}
/* the archive style starts here */
#archive-wrapper {
margin: 0 auto;
padding: 2em;
border-radius: 1em;
background: #fff;
width: 70%;
text-align: center;
}
#archive-wrapper:after {
content: " ";
display: block;
height: 0;
clear: both;
}
.archive-entry {
display: inline-block;
height: 15em;
width: 9em;
vertical-align: middle;
margin: .5em;
}
h1.archive-title a {
text-decoration: none;
}
.archive-entry a:visited {
color: #999;
}
a:visited .archive-image {
border: 1px solid #999;
}
.archive-image {
height: 8em;
width: 8em;
border: 1px solid #005994;
margin: .5em auto;
}
.archive-title {
font-family: Verdana, Helvetica, Arial, sans-serif;
font-size: 1em;
line-height: 1.2;
}
.archive-date {
font-size: .8em;
padding-top: .3em;
}
/* The book page style starts here */
#book-links {
margin-bottom: -2em;
}
#book-links li {
font-family: verdana, tahoma, sans-serif;
}
#book-wrapper{
margin: 0 auto;
width: 90%;
border-radius: 1em;
background: #fff;
padding: .5em 2em;
}
#intro {
margin: 0 auto;
width: 70%;
padding-bottom: 1.5em;
}
#intro img {
margin-top: 1.5em;
}
#intro p {
text-align: center;
}
#book-wrapper h2 {
border-top: 1px solid #ccc;
text-align: center;
padding-top: 2em;
margin-top: 2em;
font-family: verdana;
font-weight: bold;
font-size: 1.25em;
}
#book-wrapper h3 {
font-family: verdana, tahoma, sans-serif;
text-align: center;
text-transform: uppercase;
font-weight: normal;
font-size: .9em;
margin: .5em 0 1em 0;
}
#tour-info p{
font-family: verdana, tahoma, sans-serif;
font-size: .8em;
margin-left: 20%;
}
#tour-info {
margin-bottom: 3em;
}
.map {
width: 100%;
border-radius: 15em;
border: 1px dotted #ccc;
}
#editions {
list-style-type: disc;
margin-left: 15%;
padding-top: 2em;
padding-bottom: 3em;
}
#editions li {
font-family: verdana, sans-serif;
font-size: .9em;
padding-bottom: .5em;
}
/* #Media Queries
================================================== */
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-device-width: 480px) {
.refbody { min-width: 0}
#news {
font-size: .8em;
text-transform: none;
}
body {
font-size: 2em;
}
#book-wrapper {
padding: 0;
}
.entry {
padding: 1em;
}
#submit {
font-size: 1.5em;
width: 70%;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment