Skip to content

Instantly share code, notes, and snippets.

@jaydenlin

jaydenlin/HDF Extractor

Last active August 29, 2015 13:57
Show Gist options
  • Save jaydenlin/9707618 to your computer and use it in GitHub Desktop.
Save jaydenlin/9707618 to your computer and use it in GitHub Desktop.
Download ZIP
HDF Extractor
Raw
HDF Extractor
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
.fixed {
position: fixed;
top: 0px;
right: 0px;
}
.fixed2 {
position: fixed;
top: 0px;
right: 150px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">HDF Extractor</h2>
<h4>step 1 . Press Setting to set HDF filename</h4>
<h4>step 2 . Paste your html sources and submit it. You can click the elemet that you want to extract</h4>
<h4>step 3 . Press Done to see ouput. You can see HDF codes and CS codes :)</h4>
<textarea class="input form-control" rows="10" placeholder="Partial HTML Source"></textarea>
</form>
<button class="generate btn btn-lg btn-primary btn-block" type="submit">Submit Static HTML Codes</button>
</div>
<button type="submit" class="btn btn-default reset fixed" data-toggle="modal" data-target="#resetModal">Done to see ouput</button>
<button type="submit" class="btn btn-primary setting fixed2" data-toggle="modal" data-target="#settingModal">Setting</button>
<!-- Reset Modal -->
<div class="modal fade" id="resetModal" tabindex="-1" role="dialog" aria-labelledby="resetModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="resetModalLabel">Go to 'Setting' and start extraction for another HDF file</h4>
</div>
<h5 class="modal-title hdfCodesHint">HDF Codes (Paste the codes to HDF File that you set in 'Setting')</h5>
<textarea class="form-control hdfCodesOuput" rows="10" placeholder="HDF codes will show up here"></textarea>
<h5 class="modal-title">Current CS Codes (Paste the codes to your index CS file)</h5>
<textarea class="form-control csCodesOutput" rows="10" placeholder="CS codes will show up here"></textarea>
<div class="modal-footer">
<button class="btn btn-primary clearModal" type="button" data-dismiss="modal">Clear Modal</button>
</div>
</div>
</div>
</div>
<!-- Setting Modal -->
<div class="modal fade" id="settingModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title" id="myModalLabel">Setting</h4>
</div>
<input class="input form-control hdfFilename" placeholder="HDF File Name here (Required)" />
<input class="input form-control groupName" placeholder="Group Name order here (Optional)" />
<div class="modal-footer">
<button class="btn btn-default saveFilenameAndGroupName" type="button" data-dismiss="modal">Save HDF Filename and GroupName</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
var input = $(".input"),
groupInput = $(".groupName"),
hdfFilenameInput = $(".hdfFilename"),
container = $('.container'),
generate = $('.generate'),
reset = $('.reset'),
setting = $('.setting'),
saveFilenameAndGroupName = $('.saveFilenameAndGroupName'),
groupNameOrder = null,
hdfFilename = null,
clearModal = $('.clearModal'),
hdfCodesHint = $('.hdfCodesHint'),
groupCount = 0,
textCount = 0,
output = "",
inputHTML="",
currentHTML="";
reset.click(function(evt) {
$('.hdfCodesOuput').append(output);
$('.csCodesOutput').val(currentHTML.html().replace(/&lt;/g, "<").replace(/&gt;/g, ">"));
hdfCodesHint.text('HDF Codes (Paste the codes to '+hdfFilenameInput.val()+'.hdf)');
console.log(currentHTML.html());
//reset
groupCount = 0;
textCount = 0;
console.log("reset counter");
output = "";
});
clearModal.click(function(evt) {
$('.hdfCodesOuput').text("");
//$('.csCodesOutput').val("");
});
saveFilenameAndGroupName.click(function(evt) {
if(hdfFilenameInput.val() !=="") {
hdfFilename = hdfFilenameInput.val();
}else{
alert("You have to set hdfFilename");
}
if (groupInput.val() !== "") {
groupNameOrder = groupInput.val().split(',');
} else {
groupNameOrder = null;
}
});
generate.click(function(evt) {
groupName = groupInput.val();
inputHTML = $("<div class='currentHTML'>" + input.val() + "</div>");
container.prepend(inputHTML);
currentHTML = $('.currentHTML');
//a
//only a (href,text)
container.delegate("a", "click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
var a = $(evt.target),
name = groupNameOrder === null ? groupCount : groupNameOrder[groupCount];
//only a
if (a.children().size() === 0) {
output = output + name + "{<br/>\n";
output = output + "aTitle=" + a.attr('title') + "<br/>\n";
output = output + "aText=" + a.text() + "<br/>\n";
output = output + "aHref=" + a.attr('href') + "<br/>\n";
output = output + "tc=<br/>\n";
output = output + "}<br/>\n";
console.log(output);
//replace
a.attr('title','<?cs var:'+hdfFilename+'.data.'+groupCount+'.aTitle?>');
a.text('<?cs var:'+hdfFilename+'.data.'+groupCount+'.aText?>');
a.attr('href','<?cs var:'+hdfFilename+'.data.'+groupCount+'.aHref?><?cs var:'+hdfFilename+'.data.'+groupCount+'.tc?>');
//counter
groupCount = groupCount + 1;
}
});
//img 1. only img 2.img with link
container.delegate("img", "click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
var img = $(evt.target),
a,
name = groupNameOrder === null ? groupCount : groupNameOrder[groupCount];
//only img
if (img.parent('a').size() === 0) {
output = output + name + "{\n<br/>";
output = output + "imgSrc=" + img.attr('src') + "<br/>\n";
output = output + "imgTitle=" + img.attr('title') + "<br/>\n";
output = output + "imgAlt=" + img.attr('alt') + "<br/>\n";
output = output + "imgOnclick=" + img.attr('onclick') + "<br/>\n";
output = output + "}<br/>\n";
console.log(output);
//replace
img.attr('src','<?cs var:'+hdfFilename+'.data.'+groupCount+'.imgSrc?>');
img.attr('title','<?cs var:'+hdfFilename+'.data.'+groupCount+'.imgTitle?>');
img.attr('alt','<?cs var:'+hdfFilename+'.data.'+groupCount+'.imgAlt?>');
img.attr('onclick','<?cs var:'+hdfFilename+'.data.'+groupCount+'.imgOnclick?>');
//counter
groupCount = groupCount + 1;
}
// a with img
if (img.parent('a').size() === 1) {
a = img.parent('a');
output = output + name + "{<br/>\n";
output = output + "imgSrc=" + img.attr('src') + "<br/>\n";
output = output + "imgTitle=" + img.attr('title') + "<br/>\n";
output = output + "imgAlt=" + img.attr('alt') + "<br/>\n";
output = output + "imgOnclick=" + img.attr('onclick') + "<br/>\n";
output = output + "aTitle=" + a.attr('title') + "<br/>\n";
output = output + "aHref=" + a.attr('href') + "<br/>\n";
output = output + "tc=<br/>\n";
output = output + "}\n<br/>";
console.log(output);
//replace
img.attr('src','<?cs var:'+hdfFilename+'.data.'+groupCount+'.imgSrc?>');
img.attr('title','<?cs var:'+hdfFilename+'.data.'+groupCount+'.imgTitle?>');
img.attr('alt','<?cs var:'+hdfFilename+'.data.'+groupCount+'.imgAlt?>');
img.attr('onclick','<?cs var:'+hdfFilename+'.data.'+groupCount+'.imgOnclick?>');
a.attr('title','<?cs var:'+hdfFilename+'.data.'+groupCount+'.aTitle?>');
a.attr('href','<?cs var:'+hdfFilename+'.data.'+groupCount+'.aHref?><?cs var:'+hdfFilename+'.data.'+groupCount+'.tc?>');
//counter
groupCount = groupCount + 1;
}
});
//span only text in span
container.delegate("span", "click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
var span = $(evt.target),
name = groupNameOrder === null ? groupCount : groupNameOrder[groupCount];
//maybe text is in the childern
if (span.children().size() === 0) {
output = output + name + "{<br/>\n";
output = output + "text=" + span.text() + "<br/>\n";
output = output + "}\n<br/>";
console.log(output);
groupCount = groupCount +1;
textCount = textCount + 1;
} else if (span.children().children().size() === 0) {
output = output + name + "{<br/>\n";
output = output + "text=" + span.children().text() + "<br/>\n";
output = output + "}\n<br/>";
console.log(output);
groupCount = groupCount +1;
textCount = textCount + 1;
}
});
//p only text in p
container.delegate("p", "click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
var p = $(evt.target),
name = groupNameOrder === null ? groupCount : groupNameOrder[groupCount];
if (p.children().size() === 0) {
output = output + name + "{<br/>\n";
output = output + "text=" + p.text() + "<br/>\n";
output = output + "}\n<br/>";
console.log(output);
groupCount = groupCount +1;
textCount = textCount + 1;
}
});
//tr only text in tr
container.delegate("tr", "click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
var tr = $(evt.target),
name = groupNameOrder === null ? groupCount : groupNameOrder[groupCount];
if (tr.children().size() === 0) {
output = output + name + "{<br/>\n";
output = output + "text=" + tr.text() + "<br/>\n";
output = output + "}\n<br/>";
console.log(output);
groupCount = groupCount +1;
textCount = textCount + 1;
}
});
//td only text in td
container.delegate("td", "click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
var td = $(evt.target),
name = groupNameOrder === null ? groupCount : groupNameOrder[groupCount];
if (td.children().size() === 0) {
output = output + name + "{<br/>\n";
output = output + "text=" + td.text() + "<br/>\n";
output = output + "}\n<br/>";
console.log(output);
groupCount = groupCount +1;
textCount = textCount + 1;
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment