https://www.mediawiki.org/wiki/Special:Code/MediaWiki/115366
Revision: 115366
Author: nad
Date: 2012-05-13 15:39:13 +0000 (Sun, 13 May 2012)
Log Message:
-----------
too confusing having multiple levels open in star menu, change method to one
open and centered at a time
Modified Paths:
--------------
trunk/extensions/TreeAndMenu/TreeAndMenu.php
trunk/extensions/TreeAndMenu/star.js
Modified: trunk/extensions/TreeAndMenu/TreeAndMenu.php
===================================================================
--- trunk/extensions/TreeAndMenu/TreeAndMenu.php 2012-05-13 07:42:20 UTC
(rev 115365)
+++ trunk/extensions/TreeAndMenu/TreeAndMenu.php 2012-05-13 15:39:13 UTC
(rev 115366)
@@ -34,7 +34,7 @@
'width' => '100%',
'height' => 600,
'spokes' => true,
- 'spokev' => 8
+ 'spokev' => 30
);
$wgExtensionFunctions[] = 'wfSetupTreeAndMenu';
Modified: trunk/extensions/TreeAndMenu/star.js
===================================================================
--- trunk/extensions/TreeAndMenu/star.js 2012-05-13 07:42:20 UTC (rev
115365)
+++ trunk/extensions/TreeAndMenu/star.js 2012-05-13 15:39:13 UTC (rev
115366)
@@ -6,13 +6,17 @@
$('div.tam-star').each( function() {
var tree = $(this);
var root = 'starnode' + window.stars.length;
+ var w = window.star_config.width;
+ var h = window.star_config.height;
tree.html( '<ul><li><a href="/">' + window.star_config.root +
'</a>' + tree.html() + '</li></ul>' ).css({
- width: window.star_config.width,
- height: window.star_config.height
+ width: w,
+ height: h
});
$('ul', tree).css('list-style','none');
- if( window.star_config.spokes ) tree.append('<svg
xmlns="http://www.w3.org/2000/svg"; version="1.1" id="spokes" width="1000"
height="1000">');
+ if( window.star_config.spokes ) tree.append(
+ '<svg xmlns="http://www.w3.org/2000/svg"; version="1.1"
id="spokes" width="' + w + '" height="' + h + '">'
+ );
// Change all the bullet list li's content into star nodes
(divs with an image, a spoke and the li content)
$('a', this).each( function() {
@@ -36,6 +40,9 @@
$('div.starnode', this).each( function() {
var e = $(this);
+ // Allow all nodes to access tree root data
+ var root;
+
// Get the depth of this element
var li = e.parent();
var d = 0;
@@ -49,7 +56,9 @@
if( d > 1 ) {
p = p.children().first();
$('img', p).attr('src', window.tamBaseUrl +
window.star_config.img_node);
- getData(p).children.push(e);
+ var pdata = getData(p);
+ pdata.children.push(e);
+ root = pdata.root;
// Set initial position to parent
var ox = p.position().left + p.width() / 2;
@@ -60,30 +69,36 @@
});
}
- // If root, set position to half width/height
- else e.css({
- left: window.star_config.width / 2,
- top: window.star_config.height / 2
- });
+ // If root, main dev center and initialise the common
tree root data
+ else {
+ var div = e.parent().parent().parent();
+ root = {
+ x: div.width() / 2,
+ y: div.height() / 2,
+ crumbs: []
+ };
+ //e.css({
+ // left: root.x,
+ // top: root.y
+ //});
+ }
- // Add spoke
+ // Add spoke for this node
var spoke = false;
if( window.star_config.spokes ) {
-
var spoke =
document.createElementNS('http://www.w3.org/2000/svg', 'line');
spoke.setAttribute('x1',0);
spoke.setAttribute('y1',0);
spoke.setAttribute('x2',0);
spoke.setAttribute('y2',0);
-
spoke.setAttribute('style',"stroke:rgb(128,128,255);stroke-width:2");
+ spoke.setAttribute('style', 'stroke:
rgb(128,128,255); stroke-width: 1');
document.getElementById('spokes').appendChild(spoke);
-
}
- //e.append('<svg xmlns="http://www.w3.org/2000/svg";
version="1.1"><line x1="100" y1="100" x2="1000" y2="1000"
style="stroke:rgb(0,0,255);stroke-width:2" /></svg>');
// Create a unique ID and persistent data for this
element
e.attr('id', 'starnode' + window.stars.length);
window.stars.push( {
+ root: root,
children: [],
parent: p,
depth: d,
@@ -116,14 +131,11 @@
var t = fx.pos;
var e = $(fx.elem);
var data = getData(e);
+ var root = data.root;
var display = 'block';
var o = t * window.star_config.out_spin;
var d = data.depth;
- // Set origin for the children to this elements center
- var ox = e.position().left + e.width() / 2;
- var oy = e.position().top + e.height() / 2;
-
// Hide the labels during animation
var col = t < 0.9 ? 'white' : 'black';
@@ -135,27 +147,36 @@
t = 1 - t;
}
- // If opening, change icon to "minus" and check
siblings to see if one needs to be closed
+ // If opening, change icon to "minus", close any other
open node
else if( fx.pos == 0 ) {
$('img', e).attr('src', window.tamBaseUrl +
window.star_config.img_open);
- if( d > 1 ) {
- var pdata = getData(data.parent);
- for( var i in pdata.children ) {
- var sibling = pdata.children[i];
- var sdata = getData(sibling);
- if( sdata.open )
animateNode(sibling);
+ //if( d > 1 ) {
+ for( var i = 0; i <
window.stars.length; i++ ) {
+ var id = 'starnode' + i;
+ if( id != e.attr('id') ) {
+ var ndata =
window.stars[i];
+ if( ndata.open )
animateNode($('#'+id));
+ }
}
- }
+ //}
}
- // Position the children to their locations around the
parent
+ // Set origin for the children to this elements center
animating to the root center
+ var ox = e.position().left + e.width() / 2;
+ var oy = e.position().top + e.height() / 2;
+ ox += ( root.x - ox ) * t;
+ oy += ( root.y - oy ) * t;
+
+ // Position the children to their locations around the
origin
var n = data.children.length;
var k = Math.PI * 2 / n;
var r = t * n * 15;
- if( r < 50 ) r = 50;
+ //if( r < 50 ) r = 50;
for( var i in data.children ) {
var child = data.children[i];
var cdata = getData(child);
+
+ // Update this childs node position
var a = k * i + o;
var x = Math.cos(a) * r;
var y = Math.sin(a) * r;
@@ -166,19 +187,20 @@
color: col
});
+ // Update this childs spoke position
var spoke = cdata.spoke;
if( spoke ) {
if( display == 'none' ) $(spoke).attr({
x1: 0, y1: 0, x2: 0, y2: 0 });
else $(spoke).attr({
x1: ox,
- y1: oy - 8,
+ y1: oy -
window.star_config.spokev,
x2: ox + x,
- y2: oy + y - 8
+ y2: oy + y -
window.star_config.spokev
})
}
// If closing, and this is the first iteration,
close this child too if open
- if( data.open && fx.pos == 0 && cdata.open )
animateNode(child);
+ //if( data.open && fx.pos == 0 && cdata.open )
animateNode(child);
}
},
_______________________________________________
MediaWiki-CVS mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-cvs
