Flat version

Flattened single widget. Working.

by junto

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.templates/beta1/jquery.tmpl.min.js"></script>
<ul id="routeContainer" class="test"></ul>
<button id="getRoute">Show Map</button>
<button id="reverseRoute">Reverse Route</button>
<button id="addWaypoint">Add Waypoint</button>

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" />

<script id="waypointTemplate" type="text/x-jquery-tmpl">
    <li class="ui-state-default ${cssClass}" id="templateItem">
        <span class="ui-icon ui-icon-arrowthick-2-n-s"></span>
        
        <input class="searchBox" type="text" value="${value}" />
        <button id="removePointButton">Remove</button>
        <span class="paddthis">[${label}]</span>
    </li>
</script>

CSS

body{font-size:10px;}
#routeContainer { list-style-type: none; margin: 0; padding: 0; width: 60%; }
#routeContainer li { margin: 0 3px 3px 3px; padding: 0.4em; padding-left: 1.5em; font-size: 1.4em; height: 18px; }
#routeContainer li span { position: absolute; margin-left: -1.3em; }
.paddthis { display: inline-block; padding-left: 20px; margin: 2px; }

JavaScript

$.fn.reverse = [].reverse;

(function($, undefined) {
    $.widget('rac.route', {
        // definition of the widget goes here
        
        // sorting drag and drop
        // reverse
        // add point
        // remove point
        // set location as...
                
        _create: function() {
            var that = this;

            $(this.element).sortable({
                update: function(event, ui) {
                    that.recalc();
                }
            });
            
            this.addWaypoint({value: '1', cssClass: 'first', label: 'From'});
            this.addWaypoint({value: '2', cssClass: 'last', label: 'To'});
        },
        recalc: function() {
            var that = this;

            // get count
            var count = $(this.element).find('li').length;
            console.log('count: ' + count);
           
            // 
            $(this.element).find('li').each(function(index, element){

                var item = $(element).tmplItem();
                var tmplElement = $(item.nodes[0]);
                var btn = tmplElement.find('#removePointButton');
                var input = tmplElement.find('.searchBox');
                
                // default to via
                item.data.label = 'Via';
                
                // default 1st item to 'From'
                if (index == 0)
                {
                    item.data.label = 'FROM';
                }
                
                // default last item to 'To'
                if (index == count-1)
                {
                    item.data.label = 'TO';
                }
                
                // overide data value
                item.data.value = $(input).val();
                
                // update template
                item.update();              
                
                
                // hide buttons when only two available                
                if (count == 2) {
                   ...