summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorJochen Topf <jochen@topf.org>2015-05-12 18:20:38 +0200
committerJochen Topf <jochen@topf.org>2015-05-12 18:20:38 +0200
commita338547eafeed14eae74befbe706eadcf6a9fb4e (patch)
tree3f6a30a61754e1d6c8b3559ce11cc4757d8561d1
parentdfb106fd58e2ff79ef9f035a135cc0f9492df7cf (diff)
downloadtaginfo-a338547eafeed14eae74befbe706eadcf6a9fb4e.tar
taginfo-a338547eafeed14eae74befbe706eadcf6a9fb4e.tar.gz
Add experimental new home page.
This could replace the current home page at some point.
-rwxr-xr-xweb/taginfo.rb7
-rw-r--r--web/views/test-index.erb141
-rw-r--r--web/viewsjs/test-index.js.erb53
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> &bull;
+ <a href="/reports/database_statistics">Database statistics</a> &bull;
+ <a href="/reports/historic_development">Historic development</a> &bull;
+ <a href="/reports/key_lengths">Key lengths</a> &bull;
+ <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 + '%;"> &bull; </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();
+}