diff --git a/src/c3nav/editor/static/editor/css/editor.css b/src/c3nav/editor/static/editor/css/editor.css index 98aad291..d7897f77 100644 --- a/src/c3nav/editor/static/editor/css/editor.css +++ b/src/c3nav/editor/static/editor/css/editor.css @@ -87,16 +87,24 @@ body { legend { margin: 0; } -.start-drawing { +#featuretype_dropdown_btn { + cursor:pointer; +} +#start-drawing, #cancel-drawing { display:none; + position: absolute; + right: 8px; + top: 8px; } .leaflet-editable-drawing .leaflet-overlay-pane .leaflet-interactive { cursor:crosshair; } +.feature_list { + display:none; +} .feature_level_list { list-style-type:none; display:none; - margin-bottom:15px; padding:0; } .feature_level_list li { diff --git a/src/c3nav/editor/static/editor/js/editor.js b/src/c3nav/editor/static/editor/js/editor.js index 1736d086..4ad01363 100644 --- a/src/c3nav/editor/static/editor/js/editor.js +++ b/src/c3nav/editor/static/editor/js/editor.js @@ -29,10 +29,15 @@ editor = { editor.get_sources(); }, + _feature_type: null, get_feature_types: function () { $.getJSON('/api/featuretypes/', function (feature_types) { var feature_type; - var editcontrols = $('#mapeditlist'); + var listcontainer = $('#mapeditlist fieldset'); + var dropdown = $('#featuretype_dropdown').on('click', 'a', function(e) { + e.preventDefault(); + editor.set_current_feature_type($(this).parent().attr('data-name')); + }); for (var i = 0; i < feature_types.length; i++) { feature_type = feature_types[i]; editor.feature_types[feature_type.name] = feature_type; @@ -40,17 +45,32 @@ editor = { feature_type.fillOpacity = 0.6; feature_type.smoothFactor = 0; editor.feature_types_order.push(feature_type.name); - editcontrols.append( - $('
').attr('name', feature_type.name).append( - $('').text(feature_type.title_plural).append( + listcontainer.append( + $('
').attr('name', feature_type.name) /*.append( + $('').append( + $('').text(feature_type.title_plural) + ).append( $('') ) + )*/ + ) + dropdown.append( + $('
  • ').attr('data-name', feature_type.name).append( + $('').text(feature_type.title_plural) ) ); } + editor.set_current_feature_type(editor.feature_types_order[0]); editor.get_levels(); }); }, + set_current_feature_type: function(feature_type) { + editor._feature_type = feature_type; + $('.feature_list').hide(); + $('.feature_list[name='+feature_type+']').show(); + $('#current_featuretype_title').text(editor.feature_types[feature_type].title_plural); + $('#create_featuretype_title').text(editor.feature_types[feature_type].title); + }, packages: {}, get_packages: function () { @@ -148,28 +168,10 @@ editor = { _creating: null, _editing: null, init_features: function () { - // Add drawing new features - L.DrawControl = L.Control.extend({ - options: { - position: 'topleft' - }, - onAdd: function () { - var container = L.DomUtil.create('div', 'leaflet-control leaflet-bar leaflet-drawbar'); - $('').appendTo(container).text('cancel').attr({ - href: '#', - title: 'cancel drawing', - name: '' - }).on('click', function (e) { - e.preventDefault(); - editor.cancel_creating(); - }); - return container; - } - }); - editor.map.addControl(new L.DrawControl()); + $('#start-drawing').click(editor._click_start_drawing); + $('#cancel-drawing').click(editor.cancel_creating); - $('#mapeditlist').on('click', '.start-drawing', editor._click_start_drawing) - .on('mouseenter', '.feature_level_list li', editor._hover_feature_detail) + $('#mapeditlist').on('mouseenter', '.feature_level_list li', editor._hover_feature_detail) .on('mouseleave', '.feature_level_list li', editor._unhover_feature_detail) .on('click', '.feature_level_list li', editor._click_feature_detail); @@ -224,7 +226,7 @@ editor = { ); } } - $('.start-drawing').show(); + $('#start-drawing').show(); $('#mapeditcontrols').addClass('list'); editor.set_current_level(editor._level); }); @@ -234,7 +236,7 @@ editor = { }, _click_start_drawing: function (e) { - editor.start_creating($(this).closest('fieldset').attr('name')); + editor.start_creating(editor._feature_type); }, _hover_feature_detail: function (e) { editor._highlight_layer.clearLayers(); @@ -298,20 +300,20 @@ editor = { } else if (options.geomtype == 'polyline') { editor.map.editTools.startPolyline(null, options); } - $('.leaflet-drawbar').show(); - $('.start-drawing').hide(); + $('#cancel-drawing').show(); + $('#start-drawing').hide(); $('body').removeClass('controls'); }, cancel_creating: function () { if (editor._creating === null || editor._editing !== null) return; editor.map.editTools.stopDrawing(); editor._creating = null; - $('.leaflet-drawbar').hide(); + $('#cancel-drawing').hide(); }, _canceled_creating: function (e) { if (editor._creating !== null && editor._editing === null) { e.layer.remove(); - $('.start-drawing').show(); + $('#start-drawing').show(); } }, done_creating: function(e) { @@ -320,7 +322,7 @@ editor = { editor._editing.disableEdit(); editor.map.fitBounds(editor._editing.getBounds()); - $('.leaflet-drawbar').hide(); + $('#cancel_drawing').hide(); var path = '/editor/features/' + editor._creating + '/add/'; $('#mapeditcontrols').removeClass('list'); $('body').addClass('controls'); diff --git a/src/c3nav/editor/templates/editor/map.html b/src/c3nav/editor/templates/editor/map.html index 00bbdd42..8c453029 100644 --- a/src/c3nav/editor/templates/editor/map.html +++ b/src/c3nav/editor/templates/editor/map.html @@ -13,7 +13,21 @@ {% block content %}
    -
    +
    +
    + + + + + +
    +
    {% endblock %}