-
Notifications
You must be signed in to change notification settings - Fork 5
/
Copy pathdom.html
143 lines (133 loc) · 3.17 KB
/
dom.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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
<!DOCTYPE html>
<html lang="en">
<head>
<style>
*{margin: 0;padding: 0;}
div.tag{
margin-left: 20px;
overflow:hidden;
}
.foldBtn {
float:left;
display : block;
cursor : pointer;
width : 10px;
}
.tagCon{
display : block;
margin-left :10px;
}
.text {
font-size : 12px;
color :rgb(135,206,250 )
}
#domTree {
margin-right : 500px;font-size: 14px;
}
#stylePnl {
position :fixed;
right : 0 ;
top : 3px;
overflow: auto;
width : 500px;
height: 90%;
max-height:
font-size: 14px;
border:1px solid #ccc;
background:rgba(255,255,224 , .6)
}
.csstext {
border-left:1px solid #ccc;
}
.showing {
background:rgba(255,228,196 , .6)
}
}
</style>
</head>
<body>
<div id="domTree">
</div>
<div id="stylePnl">
</div>
</body>
<script src=js/jquery-2.1.1.js></script>
<script>
var htmlparser = require("htmlparser2")
,querystring = require('querystring')
var domTree = document.getElementById('domTree')
,stylePnl = document.getElementById('stylePnl')
function show(con){
domTree.innerHTML = ''
var table = ''
var tab = 0
var parser = new htmlparser.Parser({
onopentag: function(name, attribs){
var OE_id = attribs.oe_id || ''
delete attribs.oe_id
var attrs = []
for (var attr in attribs){
var attrval = attribs[attr]
try {
attrval = decodeURIComponent(attrval)
}catch(err){
}
attrs.push( attr + '="' + attrval + '"' )
}
attrs = attrs.length ? ' ' + attrs.join(' ') : ''
table += '<div class="tag" tab="' + tab+ '" OE_id="' + OE_id + '"> <span class="foldBtn unfold ">-</span><div class="tagCon"><' + name + attrs + '>'
tab++
},
ontext: function(text){
table += '<div class="text">' + text + '</div>'
},
onclosetag: function(tagname){
tab--
table += '</' + tagname + '></div></div>'
}
})
parser.write(con)
parser.end()
domTree.innerHTML = table
}
function cssRules(rules , OE_id){
if (!OE_id || !$('[OE_id=' + OE_id + ']').length) return
rules = querystring.parse(rules , ';',':')
$('.showing').removeClass('showing')
stylePnl.innerHTML = ''
var table = '<table>'
for (var name in rules){
table += '<tr><td>' + name + '<td class="csstext">' + rules[name].trim()
}
table += '<tr><td><input id=newCssName OE_id="' + OE_id +'" /><td class="csstext"><input id="newCssVal" />'
stylePnl.innerHTML = table
$('[OE_id=' + OE_id + ']').addClass('showing')[0].scrollIntoView()
}
$('#domTree').on('click' , '.foldBtn' , function(){
var foldBtn = $(this)
if (foldBtn.is('.unfold')){
foldBtn.html('+').removeClass('unfold').addClass('fold')
.parent().height(20)
}else{
foldBtn.html('-').removeClass('fold').addClass('unfold')
.parent().height('auto')
}
return false
})
$('#stylePnl').on('change' , '#newCssVal' , function(){
var newCssVal = $('#newCssVal').val().trim()
,newCssName = $('#newCssName').val().trim()
,OE_id = $('#newCssName').attr('OE_id')
if (!OE_id || !newCssName || !newCssVal) return
var newStyle = {}
newStyle[newCssName] = newCssVal
window.opener.snapStyle(OE_id ,_winid ,newStyle)
})
$('#domTree').on('click' , '.tag' , function(){
var OE_id = $(this).attr('OE_id')
OE_id && window.opener.snapStyle(OE_id ,_winid)
return false
})
</script>
<script src=js/contextmenu.js></script>
</html>