Build a menu/dropdown polymer component

[1730wang]

We need a menu/dropdown polymer component to replace the current Selectize.js dropdown.

This is what the current Selectize.js dropdown looks like (it's used in dmx, attribute editor):

This is potentially what the new polymer dropdown will look like (there's a prototype in fmx, inport editor):

[1730wang]

these are the steps for your reference:

1. get the base component(f1-menu) working 1.1. create a test.htm page, where you can build the component and do testing. 1.2. add the existing f1-menu component to test.htm
2. make cosmetic mods to f1-menu 2.1 design a new/better look in html and css 2.2 apply the new look to the component
3. create event handlers 3.1 click events ( click to unfold, click to fold, click to select ) 3.2 scrolling events ( when there are more items that one screen can handle, what to do ) 3.3 ajax loading events ( click to unfold event triggers ajax loading )
4. apply the new component to DMX and FMX

[1730wang]

f1-menu is a clone of Polymer core-menu component, with modifications.

Here's the doc for core-menu: http://www.polymer-project.org/docs/elements/core-elements.html#core-menu

[1730wang]

This is eventually what we want:

To work on it, you want to break it down to smaller steps. if you are not sure how to break it down, i can help you.

[1730wang]

1. arrange items in a circle or oval shape. radius adjustable
2. make items move in a circle. speed, direction adjustable, start/stop
3. make item move one unit a time.(e.g. item 1 moves to item 0, that's one unit) 3hr
4. make item move one unit at a controlled speed (e.g. slow first, then fast) 4hr http://javascript.info/tutorial/animation
5. add mouse control, when an item is clicked, it goes to the base position(left middle of the circle) 3hr
6. add mouse control, when an item is being dragged, it goes along the circle/oval path. 4hr
7. code clean up, make it a reusable set of functions. add document. 1d
8. multiple level items

[j-gibbons]

All the steps are complete.The items move to the base position when clicked. The items are fully draggable. The next level of items can be viewed when an item is clicked. The buttons and the buttons functionality have been disabled as they are no longer needed. The speed of the items moving can be set as a constant speed or as a function. A lot of minor changes and fixes have also been added to the code

[1730wang]

step 6, dragging, when the item is released, the item close to the base position should keep moving to the base position.

[1730wang]

when you drag the item, the item always reposition itself to top right of the mouse cursor. we don't want that.

[1730wang]

double click to expend the 2nd level menu single click to rotate the items

[1730wang]

make the items fill only half(or certain percentage) of the circle. e.g. the percentage is set to 50%, there are 6 items, the circle will make 12 slots and fill the 6 items into slot 1 to slot 6, leaving slot 7 to slot 12 empty.

[1730wang]

apply above feature to 2nd level items.

[1730wang]

currently, drag event is listened on the item divs. i want you to make a big div, behind all the items, the big div contains all the items and drag event is handled on that big div so when you drag on the edge of the circle, the circle spinning speed is 1:1 (mouse moves 1px, circle moves 1px) when you drag close to the center of the circle, the circle spinning faster, say 1:5 (mouse moves 1px, circle moves 5px)

[1730wang]

click the base position rectangle to trigger the circle-menu. click on the item to select and then hide the circle-menu. click outside of the circle-menu to hide the circle-menu.

[1730wang]

make items moving along the circle path. currently, unfolding the menu is straight up .show(), and folding the menu, every item goes to the base position in a straight line. we want the items goes along the circle path, unfolding will be like a train coming out of a tunnel, and the previously selected item should remain at base position(if there's one selected) - in this case, the items before the selected item come out from the top tunnel, the items after the selected item come out from the bottom tunnel, at the same time. If there's none previously selected, all items come out in one direction, either top of bottom. folding will be similar to unfolding, just reverse the movements.

[1730wang]

code clean up.

1. remove 3rd party js dependencies(e.g. jquery)
2. move code into a namespace(f1menu)

a template for your reference:

f1menu.js

"use strict";

var f1menu = f1menu || {};

f1menu.globalVariable = null;

f1menu.someMethod = function() { console.log("f1menu.someMethod"); }

f1menu.css

/* use prefix for id */

f1menu_someItem {

background-color: #e6e6e6;

}

/* use prefix for class */ .f1menu_someItem { background-color: #e6e6e6; }