1 | <html> |
---|
2 | <head> |
---|
3 | <title>Array model of HTML lists</title> |
---|
4 | <script type="text/javascript"> |
---|
5 | String.prototype.IEquals = function() |
---|
6 | { |
---|
7 | var thisUpper = this.toUpperCase() ; |
---|
8 | |
---|
9 | var aArgs = arguments ; |
---|
10 | |
---|
11 | // The arguments could also be a single array. |
---|
12 | if ( aArgs.length == 1 && aArgs[0].pop ) |
---|
13 | aArgs = aArgs[0] ; |
---|
14 | |
---|
15 | for ( var i = 0 ; i < aArgs.length ; i++ ) |
---|
16 | { |
---|
17 | if ( thisUpper == aArgs[i].toUpperCase() ) |
---|
18 | return true ; |
---|
19 | } |
---|
20 | return false ; |
---|
21 | } |
---|
22 | |
---|
23 | var ArrayModel = |
---|
24 | { |
---|
25 | ListToArray : function( listNode, baseArray, baseIndentLevel ) |
---|
26 | { |
---|
27 | if ( ! listNode.nodeName.IEquals( ['ul', 'ol'] ) ) |
---|
28 | return [] ; |
---|
29 | |
---|
30 | if ( baseIndentLevel == undefined ) |
---|
31 | baseIndentLevel = 0 ; |
---|
32 | if ( baseArray == undefined ) |
---|
33 | baseArray = [] ; |
---|
34 | // Iterate over all list items to get their contents and look for inner lists. |
---|
35 | for ( var i = 0 ; i < listNode.childNodes.length ; i++ ) |
---|
36 | { |
---|
37 | var listItem = listNode.childNodes[i] ; |
---|
38 | if ( ! listItem.nodeName.IEquals( 'li' ) ) |
---|
39 | continue ; |
---|
40 | var itemObj = { 'parent' : listNode, 'indent' : baseIndentLevel, 'contents' : [] } ; |
---|
41 | baseArray.push( itemObj ) ; |
---|
42 | for ( var j = 0 ; j < listItem.childNodes.length ; j++ ) |
---|
43 | { |
---|
44 | var child = listItem.childNodes[j] ; |
---|
45 | if ( child.nodeName.IEquals( ['ul', 'ol'] ) ) |
---|
46 | { |
---|
47 | // Note the recursion here, it pushes inner list items with +1 indentation in the correct |
---|
48 | // order. |
---|
49 | this.ListToArray( child, baseArray, baseIndentLevel + 1 ) ; |
---|
50 | break ; |
---|
51 | } |
---|
52 | else |
---|
53 | itemObj.contents.push( child ) ; |
---|
54 | } |
---|
55 | } |
---|
56 | return baseArray ; |
---|
57 | }, |
---|
58 | |
---|
59 | PrintArray : function( listArray, doc ) |
---|
60 | { |
---|
61 | var s = [] ; |
---|
62 | for ( var i = 0 ; i < listArray.length ; i++ ) |
---|
63 | { |
---|
64 | for ( var j in listArray[i] ) |
---|
65 | { |
---|
66 | if ( j != 'contents' ) |
---|
67 | s.push( j + ":" + listArray[i][j] + "; " ) ; |
---|
68 | else |
---|
69 | { |
---|
70 | var docFrag = doc.createDocumentFragment() ; |
---|
71 | var tmpNode = doc.createElement( 'span' ) ; |
---|
72 | for ( var k = 0 ; k < listArray[i][j].length ; k++ ) |
---|
73 | docFrag.appendChild( listArray[i][j][k].cloneNode( true ) ) ; |
---|
74 | tmpNode.appendChild( docFrag ) ; |
---|
75 | s.push( j + ":" + tmpNode.innerHTML + "; ") ; |
---|
76 | } |
---|
77 | } |
---|
78 | s.push( '\n' ) ; |
---|
79 | } |
---|
80 | alert( s.join('') ) ; |
---|
81 | }, |
---|
82 | |
---|
83 | ArrayToList : function( listArray, baseIndex ) |
---|
84 | { |
---|
85 | if ( baseIndex == undefined ) |
---|
86 | baseIndex = 0 ; |
---|
87 | if ( ! listArray || listArray.length < baseIndex + 1 ) |
---|
88 | return null ; |
---|
89 | var rootNode = listArray[baseIndex].parent.cloneNode( false ) ; |
---|
90 | var currentIndex = baseIndex ; |
---|
91 | var indentLevel = listArray[baseIndex].indent ; |
---|
92 | var currentListItem = null ; |
---|
93 | while ( true ) |
---|
94 | { |
---|
95 | var item = listArray[currentIndex] ; |
---|
96 | if ( item.indent == indentLevel ) |
---|
97 | { |
---|
98 | if ( listArray[currentIndex].parent.nodeName != rootNode.nodeName ) |
---|
99 | break ; |
---|
100 | currentListItem = rootNode.ownerDocument.createElement( 'li' ) ; |
---|
101 | rootNode.appendChild( currentListItem ) ; |
---|
102 | for ( var i = 0 ; i < item.contents.length ; i++ ) |
---|
103 | currentListItem.appendChild( item.contents[i].cloneNode( true ) ) ; |
---|
104 | currentIndex++ ; |
---|
105 | } |
---|
106 | else if ( item.indent == indentLevel + 1 ) |
---|
107 | { |
---|
108 | var listData = this.ArrayToList( listArray, currentIndex ) ; |
---|
109 | currentListItem.appendChild( listData.listNode ) ; |
---|
110 | currentIndex = listData.nextIndex ; |
---|
111 | } |
---|
112 | else |
---|
113 | break ; |
---|
114 | |
---|
115 | if ( listArray.length <= currentIndex || listArray[currentIndex].indent < indentLevel ) |
---|
116 | break ; |
---|
117 | } |
---|
118 | return { 'listNode' : rootNode, 'nextIndex' : currentIndex } ; |
---|
119 | } |
---|
120 | } ; |
---|
121 | |
---|
122 | function addMessage( msg ) |
---|
123 | { |
---|
124 | var para = document.createElement( 'p' ) ; |
---|
125 | para.innerHTML = msg ; |
---|
126 | document.body.appendChild( para ) ; |
---|
127 | } |
---|
128 | |
---|
129 | function init() |
---|
130 | { |
---|
131 | var listNode = document.getElementById( 'listNode' ) ; |
---|
132 | var listArray = ArrayModel.ListToArray( listNode ) ; |
---|
133 | //ArrayModel.PrintArray( listArray, document ) ; |
---|
134 | listNode = ArrayModel.ArrayToList( listArray ) ; |
---|
135 | addMessage( 'The following lists are automatically generated from the array model.' ) ; |
---|
136 | |
---|
137 | addMessage( 'First, let\'s try to generate the original list.' ) ; |
---|
138 | document.body.appendChild( listNode.listNode ) ; |
---|
139 | |
---|
140 | addMessage( 'Now, let\'s try to outdent item 2 and all its children.' ) ; |
---|
141 | var baseIndent = listArray[1].indent ; |
---|
142 | for ( var i = 1 ; i < listArray.length && listArray[i].indent >= baseIndent ; i++ ) |
---|
143 | listArray[i].indent-- ; |
---|
144 | document.body.appendChild( ArrayModel.ArrayToList(listArray).listNode ) ; |
---|
145 | |
---|
146 | addMessage( 'How about this, indent item 2 only?' ) ; |
---|
147 | listArray[1].indent++ ; |
---|
148 | document.body.appendChild( ArrayModel.ArrayToList(listArray).listNode ) ; |
---|
149 | |
---|
150 | addMessage( 'Lets indent item 4!' ) ; |
---|
151 | listArray[3].indent++ ; |
---|
152 | document.body.appendChild( ArrayModel.ArrayToList(listArray).listNode ) ; |
---|
153 | |
---|
154 | addMessage( 'Indent item 4 again!' ) ; |
---|
155 | listArray[3].indent++ ; |
---|
156 | document.body.appendChild( ArrayModel.ArrayToList(listArray).listNode ) ; |
---|
157 | |
---|
158 | addMessage( 'And I can outdent item 2 alone with a click of my finger!' ) ; |
---|
159 | listArray[1].indent-- ; |
---|
160 | document.body.appendChild( ArrayModel.ArrayToList(listArray).listNode ) ; |
---|
161 | } |
---|
162 | </script> |
---|
163 | </head> |
---|
164 | <body onload="init();"> |
---|
165 | <p>The list below is the original list we have in HTML code.</p> |
---|
166 | <ul id="listNode"> |
---|
167 | <li>item1 |
---|
168 | <ul> |
---|
169 | <li> |
---|
170 | indented <b>item2</b> |
---|
171 | <ol> |
---|
172 | <li>indented item3</li> |
---|
173 | </ol> |
---|
174 | </li> |
---|
175 | <li>indented item4</li> |
---|
176 | </ul> |
---|
177 | </li> |
---|
178 | <li>item5</li> |
---|
179 | </ul> |
---|
180 | </body> |
---|
181 | </html> |
---|