Difference between revisions of "Pie menu"
m (sp) |
(→Progress: Star menu started) |
||
Line 24: | Line 24: | ||
== Progress == | == Progress == | ||
+ | === Jan 30 - Link extraction === | ||
Ok the first easy bit has been done which is the [http://svn.organicdesign.co.nz/listing.php?repname=extensions&path=%2FLinkTree%2F LinkTree extension] that extracts the links out from the page to the requested depth. It adds a ''#linktree'' parser function which takes one parameter for the depth (defaults to 1). Here's a screenshot of how it's used, the last example shows how to use it with TreeAndMenu which will soon have a new ''#star'' function added. | Ok the first easy bit has been done which is the [http://svn.organicdesign.co.nz/listing.php?repname=extensions&path=%2FLinkTree%2F LinkTree extension] that extracts the links out from the page to the requested depth. It adds a ''#linktree'' parser function which takes one parameter for the depth (defaults to 1). Here's a screenshot of how it's used, the last example shows how to use it with TreeAndMenu which will soon have a new ''#star'' function added. | ||
{| style="border:1px solid #ccc;border-collapse" | {| style="border:1px solid #ccc;border-collapse" | ||
|[[File:LinkTreeExample.jpg]] | |[[File:LinkTreeExample.jpg]] | ||
|} | |} | ||
+ | |||
+ | === Jan 31 - Star menu started === | ||
+ | I've made a start on the complex stuff now, here's a screenshot of the results after the first session of adding the ''#star'' parser-function to the TreeAndMenu extension: | ||
+ | [[File:Star-progress-1.jpg]] | ||
+ | |||
+ | All the changes made to convert the menu from a standard bullet list to a star menu is done in JavaScript/jQuery, all the PHP does is wrap the bullet list in a class so that the JavaScript knows which bullet lists to convert. Here's the code which operates directly on the link elements composing the bullet list and re-positions them into a circle. | ||
+ | {{code|<js> | ||
+ | $( function() { | ||
+ | $('div.tam-star ul').css('list-style','none'); | ||
+ | $('div.tam-star').each( function() { | ||
+ | $('a', this).css('position','absolute') | ||
+ | .css('left', $(this).position().left+r).css('top', $(this).position().top+r).each( function() { | ||
+ | var e = $(this); | ||
+ | var i = e.parent().index(); // the index of the <li> that this <a> is in | ||
+ | var n = e.parent().parent().children().last().index() + 1; // the index of the last <li> + 1 | ||
+ | var a = Math.PI * 2 * i / n; | ||
+ | var y = Math.sin(a) * 100; | ||
+ | var x = Math.cos(a) * 100; | ||
+ | e.css('left', e.position().left+x-e.width()/2).css('top', e.position().top+y-e.height()/2); | ||
+ | }); | ||
+ | }); | ||
+ | }); | ||
+ | </js>}} | ||
[[Category:Projects]] | [[Category:Projects]] |
Revision as of 20:13, 31 January 2012
Contents
User story
As a user, I want to easily navigate to key points in an article so that I can see what other concepts are linked to in an article, and also see what key points (children) are related to the key points in the current article (parent). I also want to simply see what key points (grandchildren) are linked to children articles.
Example
http://www.woweb.ru/js/12/082/
Elaboration
- Given an article foo with [[ ]]links to articles foobar, bar and barfoo i want to see a concept menu that centers on foo (current article) and when i click on (+) next to foo, it will expand out dynamic indexed all hyperlinks in given article in an equidistant format.
- (+) will expand out nodes, instead of being indicated by color
- starburst or "concept map"
- initially, only 2 levels deep: parent (current article), child (links in article), grandchild (links in children article)
- if article bar contains links to a and b, then when i expand the foo node out to bar, and click on a (+) sign for bar, I will see a and b as the terminal (leaf) node.
- Dynamic: If I add a link to the article foo, then the "pie menu" will be autimatically updated
- call it pie because that is what is is in sims. also, will need to use pi to calculate the distribution of nodes
- with a large amount of links, may need to do a lighbox kinda thing and fade out bacground when the map is activated, and new nodes may be larger than parent nodes, and may need to fade out / overlap parent nodes.
Ideas
- different color of nodes?
- Base it on category instead of links
- Base it on headers instead of links
- n nodes, set terminus (leaf) node
- use with TreeAndMenu syntax
Progress
Jan 30 - Link extraction
Ok the first easy bit has been done which is the LinkTree extension that extracts the links out from the page to the requested depth. It adds a #linktree parser function which takes one parameter for the depth (defaults to 1). Here's a screenshot of how it's used, the last example shows how to use it with TreeAndMenu which will soon have a new #star function added.
I've made a start on the complex stuff now, here's a screenshot of the results after the first session of adding the #star parser-function to the TreeAndMenu extension:
All the changes made to convert the menu from a standard bullet list to a star menu is done in JavaScript/jQuery, all the PHP does is wrap the bullet list in a class so that the JavaScript knows which bullet lists to convert. Here's the code which operates directly on the link elements composing the bullet list and re-positions them into a circle.