Skip to content

Instantly share code, notes, and snippets.

/EaQrJV.markdown

Created February 20, 2015 12:58
Show Gist options
  • Save anonymous/46e29169413a015a7c7a to your computer and use it in GitHub Desktop.
Save anonymous/46e29169413a015a7c7a to your computer and use it in GitHub Desktop.
Download ZIP
EaQrJV
Raw
index.html
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<div class="split">
<div id="first">
<div id="lines"></div>
<div id="highlight"></div>
<textarea placeholder="HTML HERE" id="code" onkeydown="update()" onkeyup="update()" onscroll="update()" onclick="update()"></textarea>
<div id="lines2"></div>
<textarea placeholder="CSS HERE" id="code_css" onkeydown="update1()" onkeyup="update1()" onscroll="update1()" onclick="update1()"></textarea>
<input type="text" placeholder="HTML save" id="htmlSave" onkeydown="loadHTML()"></input>
<input type="text" placeholder="CSS save" id="cssSave" onkeydown="loadCSS()"></input>
<input type="text" placeholder="Load Save" id="save"></input>
<input type="submit" class="save"></input>
</div>
<div id="second">
</div>
</div>
<body>
</html>
Raw
script.js
function update() {
var x = document.getElementById("code").value;
var code = document.getElementById('code');
var first = document.getElementById('lines');
var num = code.value.split(/\n/).length;
if(code.value.split(/\n/)[0] == "showHTML=true") {
document.getElementById("second").innerText = x;
} else {
document.getElementById("second").innerHTML = x;
}
first.scrollTop = code.scrollTop + 5;
//console.log(code.scroll);
//first.scrollLeft = code.scrollWidth;
//for(var i = 0; i < num; i++) {
if(document.getElementById(num) == null) {
first.innerHTML += '<pre id=' + num + '>' + (num) + '</pre>';
} else if(document.getElementById(num).length == 1) {
first.innerHTML += '<pre id=' + num + '>' + (num) + '</pre>';
}
var line = code.value.substr(0, code.selectionStart).split("\n").length;
for(var i = 1; i < num; i++) {
document.getElementById(i).style.color = "black";
}
document.getElementById(line).style.color = "red";
//if(document.getElementById(line).offsetTop < 300) {
//document.getElementById('highlight').style.top = document.getElementById(line).offsetTop + "px";
//} else {
//console.log(code.scrollTop);
document.getElementById('highlight').style.top = document.getElementById(line).offsetTop - code.scrollTop - 5 + "px";
var enc = window.btoa(code.value);
//console.log(enc);
document.getElementById('htmlSave').value = enc;
}
function update1() {
var x = document.getElementById("code_css").value;
var code = document.getElementById('code_css');
var first = document.getElementById('lines2');
var num = code.value.split(/\n/).length;
if(code.value.split(/\n/)[0] == "showHTML=true") {
x = "#second " + x;
document.getElementById("second").innerHTML += "<style type=\"text/css\">" + x + "</style>";
} else {
x = "#second " + x;
document.getElementById("second").innerHTML += "<style type=\"text/css\">" + x + "</style>";
}
first.scrollTop = code.scrollTop + 5;
//console.log(code.scroll);
//first.scrollLeft = code.scrollWidth;
//for(var i = 0; i < num; i++) {
if(document.getElementById("css_" + num) == null) {
first.innerHTML += '<pre id=css_' + num + '>' + (num) + '</pre>';
} else if(document.getElementById(num).length == 1) {
first.innerHTML += '<pre id=css_' + num + '>' + (num) + '</pre>';
}
var line = code.value.substr(0, code.selectionStart).split("\n").length;
//for(var i = 0; i < num; i++) {
//document.getElementById("css_" + i + 1).style.color = "black";
//}
// document.getElementById("css_" + line).style.color = "red";
//if(document.getElementById(line).offsetTop < 300) {
//document.getElementById('highlight').style.top = document.getElementById(line).offsetTop + "px";
//} else {
//console.log(code.scrollTop);
//document.getElementById('highlight').style.top = document.getElementById("css_" + line).offsetTop - code.scrollTop - 5 + "px";
var enc = window.btoa(code.value);
//console.log(enc);
document.getElementById('cssSave').value = enc;
}
function loadHTML() {
var code = document.getElementById('code');
var dec = window.atob(document.getElementById('htmlSave').value);
code.value = dec;
}
function loadCSS() {
var code = document.getElementById('code_css');
var dec = window.atob(document.getElementById('cssSave').value);
code.value = dec;
}
function getSave(url) {
$.ajax({
url: url,
type: 'GET',
dataType: 'json'
})
.success( function(e) {
console.log(e['files']['css.txt']['content']);
var code = document.getElementById('code');
var dec = window.atob(e['files']['html.txt']['content']);
code.value = dec;
var code2 = document.getElementById('code_css');
var decs = window.atob(e['files']['css.txt']['content']);
code2.value = decs;
//$('#save').attr('value', e['url']);
})
.error( function(e) {
console.warn("gist save error", e);
});
}
$('#save').keydown(function() {
getSave($('#save')[0].value);
})
$('#save').keyup(function() {
getSave($('#save')[0].value);
})
//getSave('https://api.github.com/gists/ce00eb9863a756a86a36');
function save() {
var data = {
"description": "posting gist test",
"public": true,
"files": {
"html.txt": {
"content": document.getElementById('htmlSave').value
},
"css.txt": {
"content": document.getElementById('cssSave').value
}
}
}
$.ajax({
url: 'https://api.github.com/gists',
type: 'POST',
dataType: 'json',
data: JSON.stringify(data)
})
.success( function(e) {
$('#save')[0].value = e['url'];
console.log(e);
})
.error( function(e) {
console.warn("gist save error", e);
});
}
$(document).ready(function() {
$('.save').click(function() {
save();
})
})
Raw
style.css
#first #code, #code_css {
resize: none;
width: 97%;
height: 100%;
display: block;
border: none;
border-right: solid 1px black;
z-index: 10;
background-color: transparent;
padding-left: 32px;
color: red;
}
.split {
height: 200px;
z-index: -1;
}
.split #first {
width: 50%;
z-index: -1;
height: 300px;
display: inline-block;
}
.split #second {
float: right;
width: 50%;
overflow: scroll;
height: 300px;
display: inline-block;
z-index: 2;
}
body {
background-color: white;
}
#highlight {
background-color: rgba(255, 0, 0, 0.4);
width: 49.55%;
display: block;
position: absolute;
height: 15px;
top: 13px;
z-index: -1;
}
#lines, #lines2 {
width: 5px;
background-color: none;
overflow: hidden;
border-right: 1px solid black;
padding-right: 25px;
height: 300px;
white-space: pre; /* paragraph to one line */
display: inline-block;
margin: 0px 0px 0px 0px;
position: absolute;
}
#lines pre, #lines2 pre {
line-height: 0px;
}
#htmlSave, #cssSave {
display: none;
}
#save {
width: 49%;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment