Skip to content

Instantly share code, notes, and snippets.

@jaydenlin

jaydenlin/hdf-local

Created March 21, 2014 13:03
Show Gist options
  • Save jaydenlin/9685721 to your computer and use it in GitHub Desktop.
Save jaydenlin/9685721 to your computer and use it in GitHub Desktop.
Download ZIP
hdf-local-use
Raw
hdf-local
<!-- saved from url=(0028)http://jaydenlin.tw/hdf.html -->
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Big5">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<style>
.fixed {
position: fixed;
top: 0px;
right: 0px;
}
</style>
</head>
<body>
<div class="container">
<form class="form-signin" role="form">
<h2 class="form-signin-heading">HDF Extractor</h2>
<h4>step 1 . Download this html file and put it in the same dir of your html sources</h4>
<h4>step 2 . Open this html file by browser</h4>
<h4>step 3 . Paste your html sources and submit it. You can click the elemet that you want to extract and see it in HDF format in console</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="#myModal">Click to Reset Counter</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">HDF Codes</h4>
</div>
<input class="input form-control groupName" placeholder="Group Name order here"></input>
<div class="modal-body"></div>
<div class="modal-footer">
<button class="btn btn-default saveGroupName" type="button" data-dismiss="modal">Save GroupName</button>
<button class="btn btn-primary clearModal" type="button" data-dismiss="modal">Clear Modal</button>
</div>
</div>
</div>
</div>
<script>
$(function() {
var input = $(".input"),
groupInput = $(".groupName"),
container = $('.container'),
generate = $('.generate'),
reset = $('.reset'),
saveGroupName = $('.saveGroupName'),
groupNameOrder = null,
clearModal = $('.clearModal'),
groupCount = 0,
textCount = 0,
output = "",
inputHTML;
reset.click(function(evt) {
$('.modal-body').append(output);
groupCount = 0;
textCount = 0;
console.log("reset counter");
output = "";
});
clearModal.click(function(evt) {
$('.modal-body').text("");
});
saveGroupName.click(function(evt) {
if (groupInput.val() !== "") {
groupNameOrder = groupInput.val().split(',');
} else {
groupNameOrder = null;
}
});
generate.click(function(evt) {
groupName = groupInput.val();
inputHTML = $("<div>" + input.val() + "</div>");
container.prepend(inputHTML);
//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 + "aText=" + a.text() + "<br/>\n";
output = output + "aHref=" + a.attr('href') + "<br/>\n";
output = output + "}<br/>\n";
console.log(output);
groupCount = groupCount + 1;
}
});
//span only text in span
container.delegate("span", "click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
var span = $(evt.target);
//maybe text is in the childern
if (span.children().size() === 0) {
output = output + "text" + textCount + "=" + span.text() + "<br/>\n";
console.log(output);
textCount = textCount + 1;
} else if (span.children().children().size() === 0) {
output = output + "text" + textCount + "=" + span.children().text() + "<br/>\n";
console.log(output);
textCount = textCount + 1;
}
});
//p only text in p
container.delegate("p", "click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
var p = $(evt.target);
if (p.children().size() === 0) {
output = output + "text" + textCount + "=" + p.text() + "<br/>\n";
console.log(output);
textCount = textCount + 1;
}
});
//tr only text in p
container.delegate("tr", "click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
var tr = $(evt.target);
if (tr.children().size() === 0) {
output = output + "text" + textCount + "=" + tr.text() + "<br/>\n";
console.log(output);
textCount = textCount + 1;
}
});
//tr only text in p
container.delegate("td", "click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
var td = $(evt.target);
if (td.children().size() === 0) {
output = output + "text" + textCount + "=" + td.text() + "<br/>\n";
console.log(output);
textCount = textCount + 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);
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 + "aHref=" + a.attr('href') + "<br/>\n";
output = output + "}\n<br/>";
console.log(output);
groupCount = groupCount + 1;
}
});
});
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment