Flat version

Flattened single widget

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>
        <button id="btnGeoocate">Current Location</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', {
                
        _create: function() {
            var that = this;

            $(this.element).sortable({
                update: function(event, ui) {
                    that.recalc();
                }
            });
            
            this.addWaypoint({value: '', cssClass: 'first', label: 'From'});
            this.addWaypoint({value: '', 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();
                
                //console.log(index + ' ' + item.data.label);
                item.data.label = 'Via';
                if (index == 0)
                {
                    item.data.label = 'FROM';
                }
                if (index == count-1)
                {
                    item.data.label = 'TO';
                }
                
                item.data.value = $(item.nodes[0]).find('.searchBox').val();
                
                item.update();
                
                var tmplElement = $(item.nodes[0]);
                
                // rebind event handlers
                var btn = tmplElement.find('#removePointButton');
                if (count == 2) {
                    console.log('hide this button');
                    btn.hide();               
                }
                else {
                    console.log('show this button');
                    btn.show();  
                }
                
                btn.bind('click', function(e) {
                    console.log('delete');
                    $(e.target).parent('li').remove();
                    
                   ...