Ticket #1231: arrayModel.html

File arrayModel.html, 6.0 KB (added by martinkou, 6 years ago)

Proof-of-concept implementation of the array list model, and doing indentations with it.

Line 
1<html>
2        <head>
3                <title>Array model of HTML lists</title>
4                <script type="text/javascript">
5String.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
23var 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
122function addMessage( msg )
123{
124        var para = document.createElement( 'p' ) ;
125        para.innerHTML = msg ;
126        document.body.appendChild( para ) ;
127}
128
129function 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>
© 2003 – 2012 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy