Add experimental new home page.

This could replace the current home page at some point.

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();
+}