-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathhtml.html
124 lines (124 loc) · 3.96 KB
/
html.html
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
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html><html><head>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-38277515-1']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
</script>
<link rel="stylesheet" type="text/css" href="cssreset-min.css">
<link rel="stylesheet" type="text/css" href="editor.css">
<script src="jquery-ui-1.9.2.custom/js/jquery-1.8.3.min.js"></script><script>
// Static Config
var jqueryUrls = [
'http://code.jquery.com/jquery.min.js', // 0
'jquery-ui-1.9.2.custom/js/jquery-1.8.3.min.js', // 1
'http://online-xslt-transformer.googlecode.com/svn/trunk/jquery-ui-1.9.2.custom/js/jquery-1.8.3.min.js']; // 2
var jqueryUrl = jqueryUrls[0];
var frameDefs = {
"html": '<b><i>Bold italics</i></b><br/>\n'
+'<input id="button" type="button" value="Foobar" />\n'
+'<div id="test">abc</div>\n',
"css": 'b{color:blue;}\n'
+'i{text-decoration:underline;}\n',
"js": 'var foobar = function() { alert("hello"); };\n'
+'$("#button").click(function(){\n'
+'foobar();\n'
+'});\n'
+'$("#test").css("border","3px solid red");\n',
"target": ""
};
var frameNames = Object.keys(frameDefs);
var targetFrameIndex = 3;
// Variables
var frameMap = {};
var taMap = {};
$(document).ready(function(){
init();
});
function init(){
// build frames and textareas...
if (typeof(Storage)!=="undefined"){
$('body').append($("<div>").addClass('toolbar').append($("<input>").attr('type','button').val('Clear Cache').click(function(){
localStorage.clear();
resetValues();
})));
}
var fs2 = $('<frameset>').attr('cols','50%,*').attr('rows','50%,*');
$('body').append(fs2);
$.each(frameNames, function(index,frame){
var f = $("<frame>").attr("id",frame);
fs2.append(f);
frameMap[frame] = f[0];
if (index != targetFrameIndex){
taMap[frame] = buildFrame(frame);
}
});
resetValues();
}
function resetValues(){
$.each(frameNames, function(index,frame){
if (index != targetFrameIndex){
// use local storage or default values, to populate textareas...
var value = typeof(Storage)!=="undefined" && localStorage[frame]
? localStorage[frame] : frameDefs[frame];
taMap[frame].val(value);
}
});
taMap['html'].focus();
render();
}
// code to build the contents of the frame
function buildFrame(id){
var doc = frameMap[id].contentWindow.document;
doc.open();
doc.close();
$('head',doc).append($('<link>').attr('rel','stylesheet').attr('href','editor.css'));
$('body',doc).append($("<h1>").addClass('header').html(id));
var ta = $('<textarea>',doc).keyup(render).blur(function(){
$('h1',doc).fadeTo('slow',1);
}).focus(function(){
$('h1',doc).fadeTo('slow',0.2);
}).blur();
$('body',doc).append(ta);
return ta;
}
var scriptLoaded = false;
var docLoaded = false;
function render(){
var frame = frameMap[frameNames[targetFrameIndex]];
var doc = frameMap[frameNames[targetFrameIndex]].contentWindow.document;
var vhtml = taMap['html'].val();
var vcss = taMap['css'].val();
var vjs = taMap['js'].val();
// store vals to local storage...
if (typeof(Storage)!=="undefined"){
localStorage.html = vhtml;
localStorage.css = vcss;
localStorage.js = vjs;
}
if (!docLoaded){
doc.open();
doc.close();
docLoaded = true;
}
// apply css, then html, then js...
$('head style',doc).remove();
$('head',doc).append($('<style>').html(vcss));
$('body',doc).html(vhtml);
if (scriptLoaded){
frame.contentWindow.eval(vjs);
} else {
var script = $('<script>').attr('type','text/javascript').attr('src',jqueryUrl).get(0);
script.onload = function(){
frame.contentWindow.eval(vjs);
console.debug("loading inner script... complete");
};
doc.head.appendChild(script);
scriptLoaded = true;
}
};
</script></head><body/></html>