Changeset 31616e3 in osmose-frontend


Ignore:
Timestamp:
Mar 18, 2014 10:08:57 PM (6 years ago)
Author:
Frédéric Rodrigo <fred.rodrigo@…>
Branches:
master
Children:
5ceb062
Parents:
72ad8d8
git-author:
Frédéric Rodrigo <fred.rodrigo@…> (03/03/2014 18:54:30)
git-committer:
Frédéric Rodrigo <fred.rodrigo@…> (18/03/2014 22:08:57)
Message:

Osmose tag editor

Files:
5 edited
1 moved

Legend:

Unmodified
Added
Removed
  • static/map/Osmose.Editor.css

    r1c3085e r31616e3  
     1.leaflet-sidebar > #editor { 
     2  padding: 5px; 
     3} 
     4 
     5#editor h1 { 
     6  margin: 0; 
     7} 
     8 
     9#editor a { 
     10  display: block; 
     11  text-align: right; 
     12  font-size: 80%; 
     13} 
     14 
    115#editor .same span { 
    216  color: white; 
     
    1327} 
    1428 
     29#editor .tags { 
     30  border: solid 1px gray; 
     31  background: #EEE; 
     32} 
    1533 
    16 #editor span { 
     34#editor .line span:first-child { 
    1735  display: inline-block; 
    1836  background: black; 
     
    2240} 
    2341 
    24 #editor .tags { 
    25   border: solid 1px gray; 
    26   background: #EEE; 
    27 } 
    28  
    2942#editor input[type="text"] { 
    3043  font-family: monospace; 
     
    3245  border: none; 
    3346  width: 95%; 
     47  padding-left: 5px; 
    3448} 
    3549 
    3650#editor .old { 
     51  position: absolute; 
     52  right: 0; 
    3753  font-style: italic; 
     54  font-family: monospace; 
    3855  text-decoration: line-through; 
    3956} 
    4057 
    41 #editor #validate { 
     58#editor #buttons { 
    4259  float: right; 
    4360} 
     61 
     62#menu-editor-save { 
     63  background: green; 
     64} 
  • static/map/Osmose.Editor.js

    r1c3085e r31616e3  
    88  includes: L.Mixin.Events, 
    99 
     10  _editedObjectStack: {}, 
     11 
    1012  initialize: function (placeholder, options) { 
    1113    this._$container = $("#" + placeholder); 
    1214 
    1315    var self = this; 
    14     $(".validate").click(function () { 
    15       self._validate(this); 
     16    $("#menu-editor-save").click(function () { 
     17      self._save(this); 
    1618    }); 
    1719 
     
    2628    }).done(function (data) { 
    2729      var template = $('#editorTpl').html(), 
    28         content = $(Mustache.render(template, data)), 
    29         reftags = {}; 
    30       $.each(data.elems[0].tags, function (i, e) { 
    31         reftags[e.k] = e.v; 
     30        content = $(Mustache.render(template, data)); 
     31      self._$container.html(content); 
     32      $("#validate", self._$container).click(function () { 
     33        self._validate(this); 
    3234      }); 
    33       self._$container.html(content); 
    34       $("form", self._$container).data('reftags', reftags); 
    35       self._build(reftags, reftags); 
    36       self.toggle(); 
     35      $("#cancel", self._$container).click(function () { 
     36        self._cancel(this); 
     37      }); 
     38 
     39      $.each(data.elems, function (i, elem) { 
     40        var reftags = {}; 
     41        $.each(elem.tags, function (i, e) { 
     42          reftags[e.k] = e.v; 
     43        }); 
     44        self._build(elem.type, elem.id, reftags, reftags); 
     45        $('.tags[data-type="' + elem.type + '"][data-id="' + elem.id + '"]', self._$container).data('reftags', reftags); 
     46      }); 
     47      $('form .tags[data-type="' + type + '"][data-id="' + id + '"] input[type="text"]:last', self._$container).focus(); 
     48      self.show(); 
    3749    }); 
    3850  }, 
    3951 
    40   validate: function (e) {}, 
     52  _save: function (e) { 
     53    var self = this; 
     54    $.ajax({ 
     55      url: "../editor/save", 
     56      type: "POST", 
     57      data: JSON.stringify(self._editedObjectStack), 
     58    }).done(function () { 
     59      alert("Save OK"); //////////////////// TODO 
     60    }).fail(function () { 
     61      alert("Save Fail"); ////////////////// TODO 
     62    }); 
     63  }, 
     64 
     65  _cancel: function (e) { 
     66    this.hide(); 
     67  }, 
     68 
     69  _validate: function (e) { 
     70    var self = this; 
     71    $.each(this._extractData(), function (i, e) { 
     72      if (e.touched) { 
     73        self._editedObjectStack[i] = e; 
     74        delete self._editedObjectStack[i]['touched']; 
     75      } 
     76    }); 
     77    this.hide(); 
     78    var n = Object.keys(this._editedObjectStack).length, 
     79      es = $("#menu-editor-save"); 
     80    if (n > 0) { 
     81      es.show(); 
     82      es.find("#menu-editor-save-number").text(Object.keys(this._editedObjectStack).length); 
     83    } 
     84  }, 
     85 
     86  _extractData: function () { 
     87    var data = {}; 
     88    $('.tags', this._$container).each(function (iii, eee) { 
     89      var elem = {}; 
     90      $("div:not(.del)", eee).each(function (ii, ee) { 
     91        $(" input[type='text']", ee).each(function (i, e) { 
     92          if (e.value && e.dataset.key) { 
     93            elem[e.dataset.key] = e.value.split("=")[1]; 
     94          } 
     95        }); 
     96      }); 
     97      data[eee.dataset.type + eee.dataset.id] = { 
     98        type: eee.dataset.type, 
     99        id: eee.dataset.id, 
     100        touched: eee.dataset.touched == "true", 
     101        tags: elem 
     102      }; 
     103    }); 
     104    return data; 
     105  }, 
    41106 
    42107  _change: function (e) { 
     
    46111    } 
    47112 
    48     var edited = cur_value.split("="); 
    49113    var edited_key = e.target.dataset.key; 
    50114    if (!edited_key && cur_value.indexOf("=") >= 0) { 
     115      var edited = cur_value.split("="); 
    51116      edited_key = edited[0].trim(); 
     117      $("input[type='text'][data-key='" + edited_key + "'", this._$container).attr('data-key', null); 
     118      e.target.dataset.key = edited_key; 
    52119    } 
    53120 
    54     var data = {}; 
    55     $("form div div:not(.del) input[type='text']", this._$container).each(function (i, e) { 
    56       if (e.value && e.dataset.key && e.dataset.key != edited_key) { 
    57         data[e.dataset.key] = e.value.split("=")[1]; 
     121    var tags = $(e.target).closest(".tags"); 
     122    this._build(tags.data('type'), tags.data('id'), tags.data('reftags'), this._extractData()[tags.data('type') + tags.data('id')].tags); 
     123  }, 
     124 
     125  _build: function (type, id, reftags, data) { 
     126    var tags = $('.tags[data-type="' + type + '"][data-id="' + id + '"]', this._$container), 
     127      touched = false; 
     128 
     129    var del = $('.del', tags); 
     130    del.empty(); 
     131    $.each(reftags, function (e) { 
     132      if (!data[e]) { 
     133        var value = $('<div/>').text(e + '=' + reftags[e]).html(), 
     134          key = $('<div/>').text(e).html(); 
     135        del.append($('<span class="line"><span>-</span><input type="text" name="tags_del[]" value="' + value + '" data-key="' + key + '"/></span>')); 
     136        touched = true; 
    58137      } 
    59138    }); 
    60139 
    61     if (edited[1]) { 
    62       data[edited_key] = edited[1].trim(); 
    63     } 
    64  
    65     var reftags = $("form", this._$container).data('reftags'); 
    66  
    67     this._build(reftags, data); 
    68   }, 
    69  
    70   _build: function (reftags, data) { 
    71     var del = $('.del', this._$container); 
    72     del.empty(); 
     140    var same = $('.same', tags); 
     141    same.empty(); 
    73142    $.each(reftags, function (e) { 
    74       if (!data[e]) { 
    75         //////////:::: FIXME " 
    76         del.append($('<span>-</span><input type="text" name="tags_del[]" value="' + e + '=' + reftags[e] + '" data-key="' + e + '"/>')); 
     143      if (data[e] && data[e] == reftags[e]) { 
     144        var value = $('<div/>').text(e + '=' + reftags[e]).html(), 
     145          key = $('<div/>').text(e).html(); 
     146        same.append($('<span class="line"><span>=</span><input type="text" name="tags_del[]" value="' + value + '" data-key="' + key + '"/></span>')); 
    77147      } 
    78148    }); 
    79149 
    80     var same = $('.same', this._$container); 
    81     same.empty(); 
     150    var mod = $('.mod', tags); 
     151    mod.empty(); 
    82152    $.each(reftags, function (e) { 
    83       if (data[e] && data[e] == reftags[e]) { 
    84         //////////:::: FIXME " 
    85         same.append($('<span>=</span><input type="text" name="tags_del[]" value="' + e + '=' + reftags[e] + '" data-key="' + e + '"/>')); 
     153      if (data[e] && data[e] != reftags[e]) { 
     154        var value = $('<div/>').text(e + '=' + data[e]).html(), 
     155          key = $('<div/>').text(e).html(), 
     156          old = $('<div/>').text(reftags[e]).html(); 
     157        mod.append($('<span class="line"><span>~</span><input type="text" name="tags_mod[]" value="' + value + '" data-key="' + key + '"/><span class="old">(' + old + ')</span></span>')); 
     158        touched = true; 
    86159      } 
    87160    }); 
    88161 
    89     var mod = $('.mod', this._$container); 
    90     mod.empty(); 
    91     $.each(reftags, function (e) { 
    92       if (data[e] && data[e] != reftags[e]) { 
    93         //////////:::: FIXME " 
    94         mod.append($('<span>~</span><input type="text" name="tags_mod[]" value="' + e + '=' + data[e] + '" data-key="' + e + '"/><span class="old">(' + reftags[e] + ')</span>')); 
    95       } 
    96     }); 
    97  
    98     var add = $('.add', this._$container); 
     162    var add = $('.add', tags); 
    99163    add.empty(); 
    100164    $.each(data, function (e) { 
    101165      if (!reftags[e]) { 
    102         //////////:::: FIXME " 
    103         add.append($('<span>+</span><input type="text" name="tags_add[]" value="' + e + '=' + data[e] + '" data-key="' + e + '"/>')); 
     166        var value = $('<div/>').text(e + '=' + data[e]).html(), 
     167          key = $('<div/>').text(e).html(); 
     168        add.append($('<span class="line"><span>+</span><input type="text" name="tags_add[]" value="' + value + '" data-key="' + key + '"/></span>')); 
     169        touched = true; 
    104170      } 
    105171    }); 
    106     add.append($('<span>+</span><input type="text" name="tags_add[]" value="">')); 
     172    add.append($('<span class="line"><span>+</span><input type="text" name="tags_add[]" value=""></span>')); 
     173 
     174    tags.attr('data-touched', touched); 
    107175 
    108176    var self = this; 
    109     $("input[type='text']", this._$container).change(function (e) { 
     177    $("input[type='text']", tags).change(function (e) { 
    110178      self._change(e); 
    111179    }); 
    112     $("input[type='text']", this._$container).keypress(function (e) { 
     180    $("input[type='text']", tags).keypress(function (e) { 
    113181      self._keypress(e); 
    114182    }); 
  • static/map/Osmose.Menu.css

    rab4a1cd r31616e3  
    136136} 
    137137 
    138 .leaflet-sidebar > .leaflet-control { 
     138.leaflet-sidebar > #menu { 
    139139  padding: 8px 0 5px 5px; 
    140140} 
  • tools/assets.py

    r72ad8d8 r31616e3  
    1212    'map/leaflet-sidebar/src/L.Control.Sidebar.css', 
    1313    'map/leaflet-control-geocoder/Control.Geocoder.css', 
    14     'map/editor.css', 
     14    'map/Osmose.Editor.css', 
    1515    'map/style.css', 
    1616    'map/Osmose.Menu.css', 
  • views/map/editor.tpl

    r1c3085e r31616e3  
    11{{!mustache_delimiter}} 
    2 <h1>{{_("Editor")}}</h1> 
    3 <%#elems%> 
     2<h1>{{_("Tags Editor")}}</h1> 
     3<form> 
     4  <%#elems%> 
    45  <a target="_blank" href="http://www.openstreetmap.org/browse/<%type%>/<%id%>"><%type%> <%id%></a> 
    5   <form> 
    6     <div class="tags"> 
    7       <div class="del"> 
    8       </div> 
    9       <div class="same"> 
    10       </div> 
    11       <div class="mod"> 
    12       </div> 
    13       <div class="add"> 
    14       </div> 
     6  <div class="tags" data-type="<%type%>" data-id="<%id%>"> 
     7    <div class="del"> 
    158    </div> 
     9    <div class="same"> 
     10    </div> 
     11    <div class="mod"> 
     12    </div> 
     13    <div class="add"> 
     14    </div> 
     15  </div> 
     16  <%/elems%> 
     17  </br> 
     18  <div id="buttons"> 
     19    <input type="button" id="cancel" value="{{_("Cancel")}}"/> 
    1620    <input type="button" id="validate" value="{{_("Ok")}}"/> 
    17   </form> 
    18 <%/elems%> 
     21  </div> 
     22</form> 
  • views/map/index.tpl

    r1c3085e r31616e3  
    167167%end 
    168168</li> 
     169 
     170<li id="menu-editor-save" style="display:none"> 
     171  <a href="#">{{_("Save")}} (<span id="menu-editor-save-number"></span>)</a> 
     172</li> 
     173 
    169174</ul> 
    170175</div> 
Note: See TracChangeset for help on using the changeset viewer.