forked from benkeen/responsive-design-bookmarklet-generator
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathscript.js
54 lines (47 loc) · 2.07 KB
/
script.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
$(function() {
$("#bm_generate .sortable").sortable({
axis: "y",
handle: ".sort"
});
$("#add_row_link").bind("click", bm_ns.add_row);
$(".del").live("click", bm_ns.delete_row);
$("#generate_btn").bind("click", function() { bm_ns.generate_bookmarklet(true) });
// generate it for them automatically
bm_ns.generate_bookmarklet(false);
});
var bm_ns = {};
bm_ns.add_row = function(e) {
$("#bm_generate .sortable").append(
'<div class="row">' +
'<ul>' +
'<li class="col0 sort"> </li>' +
'<li class="col1"><input type="text" value="" /></li>' +
'<li class="col2"><input type="text" value="" /></li>' +
'<li class="col3"><input type="text" value="" /></li>' +
'<li class="col4 colN del">x</li>' +
'</ul>' +
'<div class="clear"></div>' +
'</div>');
}
bm_ns.delete_row = function(e) {
$(e.target).closest(".row").remove();
}
bm_ns.generate_bookmarklet = function(highlight) {
var link = "javascript:document.write('<!DOCTYPE html><html><head><meta charset="utf-8"><title>Responsive Design Testing</title><style>body { margin: 20px; font-family: sans-serif; overflow-x: scroll; }.wrapper { width: 6000px; }.frame { float: left; }h2 { margin: 0 0 5px 0; }iframe { margin: 0 20px 20px 0; border: 1px solid #666; }</style></head><body><div class="wrapper">";
$("#bm_generate .sortable .row").each(function() {
var width = $(this).find(".col1 input").val();
var height = $(this).find(".col2 input").val();
var label = $(this).find(".col3 input").val();
if (label) {
label = "(" + label + ")";
}
link += "<div class="frame"><h2>" + width + "<span> x " + height + "</span> <small>" + label + "</small></h2>"
+ "<iframe src="' + window.location + '" sandbox="allow-same-origin allow-forms" seamless "
+ "width="" + width + "" height="" + height + ""></iframe></div>"
});
link += "</div></body></html>')";
$("#bookmarklet_link").html('<a href="' + link + '">Responsive Design Test</a>');
if (highlight) {
$("#bookmarklet_link").effect("highlight", { color: "#00ff00" }, 2000);
}
}