| Index: trunk/extensions/TreeAndMenu/star.js |
| — | — | @@ -1,13 +1,23 @@ |
| | 2 | +/** |
| | 3 | + * Initalise bullet lists with class "tam-star" |
| | 4 | + */ |
| 2 | 5 | window.stars = []; |
| 3 | 6 | $( function() { |
| 4 | | - $('div.tam-star ul').css('list-style','none'); |
| 5 | 7 | $('div.tam-star').each( function() { |
| 6 | | - $(this).css('width','400px').css('height','400px').css('background','yellow'); |
| | 8 | + var tree = $(this); |
| | 9 | + var root = 'starnode' + window.stars.length; |
| | 10 | + tree.html( '<ul><li><a href="https://www.mediawiki.org/">root</a>' + tree.html() + '</li></ul>' ); |
| | 11 | + $('ul', tree).css('list-style','none'); |
| | 12 | + tree.css('width','400px').css('height','400px').css('background','white').css('border','1px solid green'); |
| 7 | 13 | $('a', this).each( function() { |
| 8 | 14 | |
| 9 | 15 | // Initialise the <a> element |
| 10 | 16 | var e = $(this); |
| 11 | | - e.css('position','absolute').css('background','pink').css('padding','0 5px'); |
| | 17 | + e.css('position','absolute') |
| | 18 | + .css('background','url( /wiki/extensions/TreeAndMenu/img/star-node-sml-grn.png ) top center no-repeat' ) |
| | 19 | + .css('padding','15px 5px 0px 5px') |
| | 20 | + .css('display','none') |
| | 21 | + .attr('href','javascript:'); |
| 12 | 22 | |
| 13 | 23 | // Get the depth of this element |
| 14 | 24 | var li = e.parent(); |
| — | — | @@ -17,34 +27,93 @@ |
| 18 | 28 | d++; |
| 19 | 29 | } |
| 20 | 30 | |
| 21 | | - // Get the parent <a> or <div> |
| | 31 | + // Get the parent <a> or <div> and add item to parents children |
| 22 | 32 | var p = e.parent().parent().parent(); |
| 23 | | - if( d > 1 ) p = p.children().first(); |
| | 33 | + if( d > 1 ) { |
| | 34 | + p = p.children().first(); |
| | 35 | + window.stars[p.attr('id').substr(8)].children.push(e); |
| | 36 | + } |
| 24 | 37 | |
| | 38 | + // Set initial position to parent |
| | 39 | + var ox = p.position().left + p.width() / 2; |
| | 40 | + var oy = p.position().top + p.height() / 2; |
| | 41 | + e.css('left', ox - e.width() / 2).css('top', oy - e.height() / 2); |
| | 42 | + |
| 25 | 43 | // Create a unique ID and persistent data for this element |
| 26 | 44 | e.attr('id', 'starnode' + window.stars.length); |
| 27 | | - window.stars.push( { parent: p, depth: d } ); |
| | 45 | + window.stars.push( { |
| | 46 | + children: [], |
| | 47 | + parent: p, |
| | 48 | + depth: d, |
| | 49 | + open: false |
| | 50 | + }); |
| 28 | 51 | |
| 29 | | - // Animate the element from the parent to the circumference |
| 30 | | - var r = 120; |
| 31 | | - if( d == 2 ) r = 70; |
| 32 | | - if( d == 3 ) r = 30; |
| 33 | | - e.animate( { foo: r }, { |
| 34 | | - duration: 1000, |
| 35 | | - easing: 'swing', |
| 36 | | - step: function(now, fx) { |
| 37 | | - var e = $(fx.elem); |
| 38 | | - var p = window.stars[e.attr('id').substr(8)].parent; |
| 39 | | - var ox = p.position().left + p.width() / 2; |
| 40 | | - var oy = p.position().top + p.height() / 2; |
| 41 | | - var i = e.parent().index(); |
| 42 | | - var n = e.parent().parent().children().last().index() + 1; |
| 43 | | - var a = Math.PI * 2 * i / n; |
| 44 | | - var y = Math.sin(a) * now; |
| 45 | | - var x = Math.cos(a) * now; |
| 46 | | - e.css('left', ox + x - e.width() / 2).css('top', oy + y - e.height() / 2); |
| 47 | | - } |
| | 52 | + // Set a callback to open or close the node when clicked |
| | 53 | + e.click( function() { |
| | 54 | + $(this).animate( { t: 100 }, { |
| | 55 | + duration: 500, |
| | 56 | + easing: 'swing', |
| | 57 | + step: function(now, fx) { |
| | 58 | + var t = fx.pos; |
| | 59 | + var e = $(fx.elem); |
| | 60 | + var data = window.stars[e.attr('id').substr(8)]; |
| | 61 | + var display = 'block'; |
| | 62 | + var o = t; |
| | 63 | + |
| | 64 | + // Set origin for the children to this elements center |
| | 65 | + var ox = e.position().left + e.width() / 2; |
| | 66 | + var oy = e.position().top + e.height() / 2; |
| | 67 | + |
| | 68 | + // Hide the labels during animation |
| | 69 | + var col = t < 0.9 ? 'white' : 'black'; |
| | 70 | + |
| | 71 | + // If closing flip t, and hide items at end |
| | 72 | + if( data.open ) { |
| | 73 | + if( t > 0.9 ) display = 'none'; |
| | 74 | + t = 1 - t; |
| | 75 | + o = 1 + o; |
| | 76 | + } |
| | 77 | + |
| | 78 | + |
| | 79 | + // Current radius for this elements children |
| | 80 | + var d = data.depth; |
| | 81 | + var r = 120; |
| | 82 | + if( d == 2 ) r = 90; |
| | 83 | + else if( d == 3 ) r = 40; |
| | 84 | + else if( d > 3 ) r = 20; |
| | 85 | + r = r * t; |
| | 86 | + |
| | 87 | + // Position the children to their locations around the parent |
| | 88 | + var k = Math.PI * 2 / data.children.length; |
| | 89 | + for( var i in data.children ) { |
| | 90 | + var child = data.children[i]; |
| | 91 | + var a = k * i + o; |
| | 92 | + var x = Math.cos(a) * r; |
| | 93 | + var y = Math.sin(a) * r; |
| | 94 | + child.css( 'display','block' ) |
| | 95 | + .css('left', ox + x - child.width() / 2) |
| | 96 | + .css('top', oy + y - child.height() / 2) |
| | 97 | + .css('color', col) |
| | 98 | + .css('display', display); |
| | 99 | + } |
| | 100 | + }, |
| | 101 | + |
| | 102 | + // Toggle the status on completion |
| | 103 | + complete: function() { |
| | 104 | + var e = $(this); |
| | 105 | + var data = window.stars[e.attr('id').substr(8)]; |
| | 106 | + data.open = !data.open; |
| | 107 | + } |
| | 108 | + }); |
| 48 | 109 | }); |
| 49 | | - }) |
| | 110 | + }); |
| | 111 | + |
| | 112 | + // Make the root node visible |
| | 113 | + var e = $('#'+root); |
| | 114 | + var data = window.stars[0]; |
| | 115 | + var p = data.parent; |
| | 116 | + var ox = p.position().left + p.width() / 2; |
| | 117 | + var oy = p.position().top + p.height() / 2; |
| | 118 | + e.css('display','block').css('left',tree.left + tree.width()/2).css('top',tree.top + tree.height()/2); |
| 50 | 119 | }); |
| 51 | 120 | }); |