diff options
Diffstat (limited to 'web')
| -rwxr-xr-x | web/taginfo.rb | 7 | ||||
| -rw-r--r-- | web/views/test-index.erb | 141 | ||||
| -rw-r--r-- | web/viewsjs/test-index.js.erb | 53 |
3 files changed, 200 insertions, 1 deletions
diff --git a/web/taginfo.rb b/web/taginfo.rb index 7dcec2c..778602a 100755 --- a/web/taginfo.rb +++ b/web/taginfo.rb @@ -9,7 +9,7 @@ # #------------------------------------------------------------------------------ # -# Copyright (C) 2010-2014 Jochen Topf <jochen@remote.org> +# Copyright (C) 2010-2015 Jochen Topf <jochen@remote.org> # # This program is free software; you can redistribute it and/or modify # it under the terms of the GNU General Public License as published by @@ -165,6 +165,11 @@ class Taginfo < Sinatra::Base erb :index end + get '/test-index' do + javascript "#{ r18n.locale.code }/test-index" + erb :'test-index' + end + #------------------------------------- %w(about download sources).each do |page| diff --git a/web/views/test-index.erb b/web/views/test-index.erb new file mode 100644 index 0000000..391efde --- /dev/null +++ b/web/views/test-index.erb @@ -0,0 +1,141 @@ +<% @nosearch = true + @css = <<'CSS' +div#menu { + position: relative; + margin: 0 auto; + width: 100%; + height: 30px; + border-bottom: 1px solid #a0a0a0; +} + +div#menuitems { + position: absolute; + width: 100%; +} + +div#menu .mitem { + position: relative; +} + +div#menu h2 { + text-transform: uppercase; + font-weight: normal; + margin: 2px 40px 2px 0px; + height: 26px; + float: left; +} + +div#menu h2:hover { + border-bottom: 3px solid #a0a0a0; +} + +div#menu h2 a { + text-decoration: none; +} + +div#menu div.mitem .mpop { + position: absolute; + visibility: hidden; + padding-top: 6px; + width: 100%; + height: 210px; + top: 31px; + background: -moz-linear-gradient(top, #ffffff, #f0f0f0); + border-radius: 4px; +} + +div#menu div.mitem .mpop p { + padding: 8px 16px; + max-width: 40em; +} + +div#menu div.mitem .mpop div { + padding: 8px 16px; +} + +div#menu div.mitem:hover .mpop { + visibility: visible; +} + +div#search_box { + text-align: center; +} + +div#search_box p { + max-width: 100%; + font-size: 80%; +} + +div#main input#search { + font-size: 140%; + padding: 2px 6px; +} +CSS +%> +<div class="resize"> + <div id="menu"><div id="menuitems"> + <div class="mitem"><h2><a href="/keys"><%= h(t.osm.keys) %></a></h2> + <div class="mpop"> + <p>All tag keys that exist in the database or in any of the other sources.</p> + <div id="key_list"></div> + <p class="emphasis"><a href="/keys"><%= h(t.pages.index.keys.listkeys) %></a></p> + </div> + </div> + <div class="mitem"><h2><a href="/tags"><%= h(t.osm.tags) %></a></h2> + <div class="mpop"> + <p>The most common tags in the database.</p> + <div id="tag_list"></div> + <p class="emphasis"><a href="/tags"><%= h(t.pages.index.tags.listtags) %></a></p> + </div> + </div> + <div class="mitem"><h2><a href="/relations"><%= h(t.osm.relation_types) %></a></h2> + <div class="mpop"> + <p>The different types of relations (indicated by the type tag).</p> + <div id="relation_list"></div> + <p class="emphasis"><a href="/relations"><%= h(t.pages.index.relations.listrelations) %></a></p> + </div> + </div> + <div class="mitem"><h2><a href="/projects"><%= h(t.taginfo.projects) %></a></h2> + <div class="mpop"> + <p>Projects that use OSM data in some way.</p> + <div> +<% @db.select('SELECT id, name, icon_url FROM projects.projects').execute().each do |project| %> + <a href="/projects/<%= project['id'] %>"><img width="20" height="20" src="<%= project['icon_url'] %>" alt="" title="<%= project['name'] %>"/></a> +<% end %> + </div> + <p class="emphasis"><a href="/projects">Show all projects...</a></p> + </div> + </div> + <div class="mitem"><h2><a href="/reports"><%= h(t.taginfo.reports) %></a></h2> + <div class="mpop"> + <p>Reports show the tag data from different angles. They often + bring together data from several sources in interesting ways. + Some of the reports can help with finding specific errors.</p> + <div> + <a href="/reports/characters_in_keys">Characters in keys</a> • + <a href="/reports/database_statistics">Database statistics</a> • + <a href="/reports/historic_development">Historic development</a> • + <a href="/reports/key_lengths">Key lengths</a> • + <a href="/reports/similar_keys">Similar keys</a> + </div> + <p class="emphasis"><a href="/reports"><%= h(t.pages.index.reports.listreports) %></a></p> + </div> + </div> + <div class="mitem"><h2><a href="/about"><%= h(t.taginfo.about) %></a></h2> + <div class="mpop"> + <p>OpenStreetMap uses tags to add meaning to geographic + objects. There is no fixed list of those tags. New tags can be + invented and used as needed. Taginfo tries to bring together + all information about tags to help you understand how they are + used and what they mean.</p> + <p class="emphasis"><a href="/about">More...</a></p> + </div> + </div> + </div></div> + <div style="clear: both; height: 240px;"></div> + <div id="search_box"> + <form id="search_form" action="/search"><input type="text" id="search" name="q" value="<%= h(params[:q]) %>"/></form> + <p>Search the taginfo database.<br/> + Formats: KEY, KEY=VALUE, =VALUE, ...</p> + </div> +</div> diff --git a/web/viewsjs/test-index.js.erb b/web/viewsjs/test-index.js.erb new file mode 100644 index 0000000..8920c3c --- /dev/null +++ b/web/viewsjs/test-index.js.erb @@ -0,0 +1,53 @@ +<% +# This is the maximum number of keys/tags/relations in the lists. Javascript +# code will only show as many of them as will fit in the window. +tagcloud_number_of_keys = 100 +tagcloud_number_of_tags = 100 +tagcloud_number_of_rels = 100 +keys = @db.select("SELECT key FROM popular_keys ORDER BY scale1 DESC LIMIT #{ tagcloud_number_of_keys }").execute() +tags = @db.select("SELECT skey, svalue FROM top_tags WHERE skey NOT IN ('source', 'source_ref', 'attribution') ORDER BY count_all DESC LIMIT #{ tagcloud_number_of_tags }").execute() +rels = @db.select("SELECT rtype FROM db.relation_types WHERE count >= 1000 ORDER BY count DESC LIMIT #{ tagcloud_number_of_rels }").execute() +%> + +var data = { + 'keys': <%= keys.map{ |tag| tag['key'] }.to_json %>, + 'tags': <%= tags.map{ |entry| [ entry['skey'], entry['svalue'] ] }.to_json %>, + 'rels': <%= rels.map{ |row| row['rtype'] }.to_json %> +}; + +up = function() {}; + +function create_list(element, max_height, data, decrease, func) { + var i = 0, + size = 160; + + while (element.innerHeight() < max_height && data[i]) { + element.append(func(data[i], size)); + element.append('<span style="font-size: ' + size + '%;"> • </span>'); + i++; + size -= decrease; + } + + element.append('...'); +} + +function resize_home() { + + create_list(jQuery('#key_list').empty(), 120, data.keys, 1, function(d, size) { + return link_to_key(d, { 'style': 'font-size: ' + size + "%;" }); + }); + + create_list(jQuery('#tag_list').empty(), 120, data.tags, 2, function(d, size) { + return '<span style="font-size: ' + size + '%;"> ' + link_to_tag(d[0], d[1]) + ' </span>' + }); + + create_list(jQuery('#relation_list').empty(), 120, data.rels, 5, function(d, size) { + return link_to_rtype(d, { 'style': 'font-size: ' + size + "%;" }); + }); + +} + +function page_init() { + jQuery(window).resize(resize_home); + resize_home(); +} |