Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Loads templates from external files

  • Loading branch information...
commit d0f1bfaf38f8ca35a4c0a31c2585ded0e1d611e8 1 parent 15730ba
@Ferdev Ferdev authored
View
4 app.rb
@@ -62,6 +62,10 @@
File.read(File.join('js', 'backbone/routers', params[:file]))
end
+get '/OGPLocator/js/backbone/templates/:file' do
+ File.read(File.join('js', 'backbone/templates', params[:file]))
+end
+
get '/OGPLocator/img/:file' do
File.read(File.join('img', params[:file]))
end
View
2  css/style.css
@@ -291,7 +291,7 @@ a:hover {text-decoration:underline; color:#C93B00;}
padding: 30px 0 0 32px;
}
- #openbudget .two_columns .right div {
+ #openbudget .two_columns .right > div {
padding-bottom: 12px;
margin-bottom: 22px;
border-bottom: 1px solid rgba(0, 102, 153, 0.10);
View
353 index.html
@@ -21,298 +21,6 @@
</head>
<body>
- <script id="index" type="text/html">
- <header>
- <h2>Experience Locator</h2>
- <nav>
- <ul>
- <li class="menu">
- <a class="filter">countries</a>
- <div class="filters countries">
- <img src="/OGPLocator/img/menu_top.png" alt="" class="border_top" />
- <ul></ul>
- <img src="/OGPLocator/img/menu_bottom.png" alt="" class="border_bottom" />
- </div>
- </li>
- <li class="menu">
- <a class="filter">Topics</a>
- <div class="filters topics">
- <img src="/OGPLocator/img/menu_top.png" alt="" class="border_top" />
- <ul>
- </ul>
- <img src="/OGPLocator/img/menu_bottom.png" alt="" class="border_bottom" />
- </div>
- </li>
- <li class="menu">
- <a class="filter">categories</a>
- <div class="filters categories">
- <img src="/OGPLocator/img/menu_top.png" alt="" class="border_top" />
- <ul>
- </ul>
- <img src="/OGPLocator/img/menu_bottom.png" alt="" class="border_bottom" />
- </div>
- </li>
- <li class="menu">
- <a class="filter">challenges</a>
- <div class="filters challenges">
- <img src="/OGPLocator/img/menu_top.png" alt="" class="border_top" />
- <ul>
- </ul>
- <img src="/OGPLocator/img/menu_bottom.png" alt="" class="border_bottom" />
- </div>
- </li>
- </ul>
- </nav>
- </header>
-
- <div id="map"></div>
-
- <div class="two_columns">
-
- <div id="results" class="left">
-
- <div class="search container">
-
- <form action="">
- <img src="/OGPLocator/img/search_field_left.png" alt="" /><input class="search_box" type="text" value="" placeholder="Enter a search term..." /><img src="/OGPLocator/img/search_field_right.png" alt="" />
- <input class="mag_glass" type="submit" value="" />
- </form>
-
- <div class="summary"></div>
-
- <ul></ul>
-
- </div>
-
- </div>
-
- <div class="right">
-
- <div>
- <h4>About the locator</h4>
- <p>This tool allows the explotation of different Open Government implementation experiences around the world.</p>
- <p>Data provided by XXX.</p>
- </div>
- <div class="last">
- <h4>Can you contribute?</h4>
- <p>We are continuously enhancing our open government experiences database with cases distributed by any person. Can you help us?</p>
- <a href="#">Recommend an experience</a>
- </div>
-
- </div>
-
- </div>
-
-
- </script>
-
- <script id="index_summary" type="text/html">
- <div>
- {{number_of_cases}} experiences <span class="for"></span><span class="in"></span><span class="clear">&nbsp;(<a>clear</a>)</span>
- </div>
- </script>
-
- <script id="index_list_item" type="text/html">
- <li>
- <h3><a href="detail/{{cartodb_id}}">{{title}}</a></h3>
- <a href="detail/{{cartodb_id}}" class="desc">{{subtitle}}</a>
- {{#subtitle_country}}
- <span>&middot;</span>
- {{/subtitle_country}}
- <a href="detail/{{cartodb_id}}" class="where">Open Budget in {{country}}</a>
- </li>
- </script>
-
- <script id="filter_list_item" type="text/html">
- <li><a href="{{url}}" class="{{type}}_{{cartodb_id}}">{{name}}</a></li>
- </script>
-
- <script id="detail" type="text/html">
-
- <header>
- <a id="back" href="/OGPLocator/">Back to explorer</a>
- </header>
-
- <div id="case_detail" class="two_columns">
-
- <div class="left">
-
- <div class="container">
-
- <header>
- <h1>{{title}}</h1>
- <span>{{subtitle}}</span>
- </header>
-
- <div>
- <h4>Overview</h4>
- {{{overview_html}}}
- </div>
-
- <div>
- <h4>Background</h4>
- {{{background_html}}}
- </div>
-
- <div class="video">
- </div>
-
- <div>
- <h4>Implementation</h4>
- {{{implementation_html}}}
- </div>
-
- <div>
- <h4>Critical issues & Achievements</h4>
- {{{critical_issues_html}}}
- </div>
-
- </div>
-
- <div id="experiencies" class="container">
- <h4>Related experiences</h4>
- <ul></ul>
- </div>
-
- </div>
-
- <div class="sidebar right">
- <div id="mini_map">
- <img src="https://chart.googleapis.com/chart?cht=map:auto=50,50,50,50&chs=298x348&chld={{country_iso}}&chco=D0EAF5%7CF4FCFF&chf=bg,s,B6DDEE" alt="" />
- <p>{{country}}</p>
- </div>
-
- {{#classification}}
- <div>
- <h4>Classification</h4>
-
- <ul>
- {{#category}}
- <li>
- <h6>Category</h6>
- <span>{{category}}</span>
- </li>
- {{/category}}
- {{#topic}}
- <li>
- <h6>Topic</h6>
- <span>{{topic}}</span>
- </li>
- {{/topic}}
- </ul>
-
- </div>
- {{/classification}}
-
- {{#implementing_partners_html}}
- <div>
- <h4>Implementing partners</h4>
- <p>{{{implementing_partners_html}}}</p>
- </div>
- {{/implementing_partners_html}}
-
- {{#relevant_networks_html}}
- <div>
- <h4>Relevant Networks</h4>
- <p>{{{relevant_networks_html}}}</p>
- </div>
- {{/relevant_networks_html}}
-
- {{#contact}}
- <div>
- <h4>Contact</h4>
- <ul>
- <li>
- <h6>Contact Information</h6>
- <p>{{{contact_information_html}}}</p>
- </li>
- <li>
- <h6>Web Site</h6>
- <p>{{website}}</p>
- </li>
- </ul>
- </div>
- {{/contact}}
-
-
- {{#resources}}
- <div>
- <h4>Related resources</h4>
- <ul>
-
- {{#resources_media_html}}
- <li>
- <h6>Media</h6>
- <p>{{{resources_media_html}}}</p>
- </li>
- {{/resources_media_html}}
-
- {{#resources_document_html}}
- <li>
- <h6>Documents</h6>
- <p>{{{resources_document_html}}}</p>
- </li>
- {{/resources_document_html}}
-
- {{#resources_links_html}}
- <li>
- <h6>Links & Further reading</h6>
- <p>{{{resources_links_html}}}</p>
- </li>
- {{/resources_links_html}}
-
- </ul>
- </div>
- {{/resources}}
-
- <div class="last">
- <ul>
- <li><a href="#">PDF version</a></li>
- <li><a href="#">Translate it</a></li>
- <li><a href="#">Tweet it</a></li>
- <li><a href="#">Share it on Facebook</a></li>
- </ul>
- </div>
-
- </div>
-
- </div>
-
- </script>
-
- <script id="detail_related_item" type="text/html">
- <li>
- <h3><a href="detail/{{cartodb_id}}">{{title}}</a></h3>
- <span>{{subtitle}}</span>
- {{#subtitle_country}}
- <span>&middot;</span>
- {{/subtitle_country}}
- <span>Open Budget in {{country}}</span>
- </li>
- </script>
-
- <script id="paragraph" type="text/html">
- <div>
- {{#paragraphs}}
- <p>{{.}}</p>
- {{/paragraphs}}
- </div>
- </script>
-
- <script id="infobox" type="text/html">
- <div class="box">
- <div class="content">
- <div class="header">
- <hgroup>
- <h3><a href="detail/{{cartodb_id}}">{{title}}</a></h3>
- <p>{{category}} &middot; {{country}}</p>
- </hgroup>
- </div>
- </div>
- <a href="#" class="close">x</a>
- <div class="t"></div><div class="b"></div>
- </div>
- </script>
<!--[if lt IE 7]><p class=chromeframe>Your browser is <em>ancient!</em> <a href="http://browsehappy.com/">Upgrade to a different browser</a> or <a href="http://www.google.com/chromeframe/?redirect=true">install Google Chrome Frame</a> to experience this site.</p><![endif]-->
<div id="header">
@@ -322,44 +30,45 @@
<div id="openbudget">
</div>
-<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
+ <script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false">
-<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
-<script>window.jQuery || document.write('<script src="/OGPLocator/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
+ <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
+ <script>window.jQuery || document.write('<script src="/OGPLocator/js/libs/jquery-1.7.1.min.js"><\/script>')</script>
-<script src="//documentcloud.github.com/underscore/underscore-min.js"></script>
-<script>window._ || document.write('<script src="/OGPLocator/js/libs/underscore-min.js"><\/script>')</script>
+ <script src="//documentcloud.github.com/underscore/underscore-min.js"></script>
+ <script>window._ || document.write('<script src="/OGPLocator/js/libs/underscore-min.js"><\/script>')</script>
-<script src="//documentcloud.github.com/backbone/backbone-min.js"></script>
-<script>window.Backbone || document.write('<script src="/OGPLocator/js/libs/backbone-min.js"><\/script>')</script>
+ <script src="//documentcloud.github.com/backbone/backbone-min.js"></script>
+ <script>window.Backbone || document.write('<script src="/OGPLocator/js/libs/backbone-min.js"><\/script>')</script>
-<script src="/OGPLocator/js/libs/ICanHaz.min.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/libs/json2.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/libs/backbone.cartodb.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/libs/infobox.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/libs/mercatorProjection.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/libs/ICanHaz.min.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/libs/json2.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/libs/backbone.cartodb.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/libs/infobox.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/libs/mercatorProjection.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/libs/jquery.url.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/backbone/cartodb.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/backbone/routers/main_router.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/backbone/models/case_study.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/backbone/collections/countries.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/backbone/collections/categories.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/backbone/collections/topics.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/backbone/collections/challenges.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/backbone/collections/case_studies.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/backbone/views/index.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/backbone/views/detail.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/backbone/cartodb.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/backbone/routers/main_router.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/backbone/models/case_study.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/backbone/collections/countries.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/backbone/collections/categories.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/backbone/collections/topics.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/backbone/collections/challenges.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/backbone/collections/case_studies.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/backbone/views/index.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/backbone/views/detail.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/map.js" type="text/javascript"></script>
-<script src="/OGPLocator/js/script.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/map.js" type="text/javascript"></script>
+ <script src="/OGPLocator/js/script.js" type="text/javascript"></script>
-<script>
- var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
- (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
- g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
- s.parentNode.insertBefore(g,s)}(document,'script'));
-</script>
+ <script>
+ var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
+ (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
+ g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
+ s.parentNode.insertBefore(g,s)}(document,'script'));
+ </script>
</body>
View
150 js/backbone/templates/detail.js
@@ -0,0 +1,150 @@
+<header>
+ <a id="back" href="/OGPLocator/">Back to explorer</a>
+</header>
+
+<div id="case_detail" class="two_columns">
+
+ <div class="left">
+
+ <div class="container">
+
+ <header>
+ <h1>{{title}}</h1>
+ <span>{{subtitle}}</span>
+ </header>
+
+ <div>
+ <h4>Overview</h4>
+ {{{overview_html}}}
+ </div>
+
+ <div>
+ <h4>Background</h4>
+ {{{background_html}}}
+ </div>
+
+ <div class="video">
+ </div>
+
+ <div>
+ <h4>Implementation</h4>
+ {{{implementation_html}}}
+ </div>
+
+ <div>
+ <h4>Critical issues & Achievements</h4>
+ {{{critical_issues_html}}}
+ </div>
+
+ </div>
+
+ <div id="experiencies" class="container">
+ <h4>Related experiences</h4>
+ <ul></ul>
+ </div>
+
+ </div>
+
+ <div class="sidebar right">
+ <div id="mini_map">
+ <img src="https://chart.googleapis.com/chart?cht=map:auto=50,50,50,50&chs=298x348&chld={{country_iso}}&chco=D0EAF5%7CF4FCFF&chf=bg,s,B6DDEE" alt="" />
+ <p>{{country}}</p>
+ </div>
+
+ {{#classification}}
+ <div>
+ <h4>Classification</h4>
+
+ <ul>
+ {{#category}}
+ <li>
+ <h6>Category</h6>
+ <span>{{category}}</span>
+ </li>
+ {{/category}}
+ {{#topic}}
+ <li>
+ <h6>Topic</h6>
+ <span>{{topic}}</span>
+ </li>
+ {{/topic}}
+ </ul>
+
+ </div>
+ {{/classification}}
+
+ {{#implementing_partners_html}}
+ <div>
+ <h4>Implementing partners</h4>
+ <p>{{{implementing_partners_html}}}</p>
+ </div>
+ {{/implementing_partners_html}}
+
+ {{#relevant_networks_html}}
+ <div>
+ <h4>Relevant Networks</h4>
+ <p>{{{relevant_networks_html}}}</p>
+ </div>
+ {{/relevant_networks_html}}
+
+ {{#contact}}
+ <div>
+ <h4>Contact</h4>
+ <ul>
+ <li>
+ <h6>Contact Information</h6>
+ <p>{{{contact_information_html}}}</p>
+ </li>
+ <li>
+ <h6>Web Site</h6>
+ <p>{{website}}</p>
+ </li>
+ </ul>
+ </div>
+ {{/contact}}
+
+
+ {{#resources}}
+ <div>
+ <h4>Related resources</h4>
+ <ul>
+
+ {{#resources_media_html}}
+ <li>
+ <h6>Media</h6>
+ <p>{{{resources_media_html}}}</p>
+ </li>
+ {{/resources_media_html}}
+
+ {{#resources_document_html}}
+ <li>
+ <h6>Documents</h6>
+ <p>{{{resources_document_html}}}</p>
+ </li>
+ {{/resources_document_html}}
+
+ {{#resources_links_html}}
+ <li>
+ <h6>Links & Further reading</h6>
+ <p>{{{resources_links_html}}}</p>
+ </li>
+ {{/resources_links_html}}
+
+ </ul>
+ </div>
+ {{/resources}}
+
+ <div class="last">
+ <ul>
+ <li><a href="#">PDF version</a></li>
+ <li><a href="#">Translate it</a></li>
+ <li><a href="#">Tweet it</a></li>
+ <li><a href="#">Share it on Facebook</a></li>
+ </ul>
+ </div>
+
+ </div>
+
+</div>
+
+
View
8 js/backbone/templates/detail_related_item.js
@@ -0,0 +1,8 @@
+<li>
+ <h3><a href="detail/{{cartodb_id}}">{{title}}</a></h3>
+ <span>{{subtitle}}</span>
+ {{#subtitle_country}}
+ <span>&middot;</span>
+ {{/subtitle_country}}
+ <span>Open Budget in {{country}}</span>
+</li>
View
1  js/backbone/templates/filter_list_item.js
@@ -0,0 +1 @@
+<li><a href="{{url}}" class="{{type}}_{{cartodb_id}}">{{name}}</a></li>
View
83 js/backbone/templates/index.js
@@ -0,0 +1,83 @@
+ <header>
+ <h2>Experience Locator</h2>
+ <nav>
+ <ul>
+ <li class="menu">
+ <a class="filter">countries</a>
+ <div class="filters countries">
+ <img src="/OGPLocator/img/menu_top.png" alt="" class="border_top" />
+ <ul></ul>
+ <img src="/OGPLocator/img/menu_bottom.png" alt="" class="border_bottom" />
+ </div>
+ </li>
+ <li class="menu">
+ <a class="filter">Topics</a>
+ <div class="filters topics">
+ <img src="/OGPLocator/img/menu_top.png" alt="" class="border_top" />
+ <ul>
+ </ul>
+ <img src="/OGPLocator/img/menu_bottom.png" alt="" class="border_bottom" />
+ </div>
+ </li>
+ <li class="menu">
+ <a class="filter">categories</a>
+ <div class="filters categories">
+ <img src="/OGPLocator/img/menu_top.png" alt="" class="border_top" />
+ <ul>
+ </ul>
+ <img src="/OGPLocator/img/menu_bottom.png" alt="" class="border_bottom" />
+ </div>
+ </li>
+ <li class="menu">
+ <a class="filter">challenges</a>
+ <div class="filters challenges">
+ <img src="/OGPLocator/img/menu_top.png" alt="" class="border_top" />
+ <ul>
+ </ul>
+ <img src="/OGPLocator/img/menu_bottom.png" alt="" class="border_bottom" />
+ </div>
+ </li>
+ </ul>
+ </nav>
+ </header>
+
+ <div id="map"></div>
+
+ <div class="two_columns">
+
+ <div id="results" class="left">
+
+ <div class="search container">
+
+ <form action="">
+ <img src="/OGPLocator/img/search_field_left.png" alt="" /><input class="search_box" type="text" value="" placeholder="Enter a search term..." /><img src="/OGPLocator/img/search_field_right.png" alt="" />
+ <input class="mag_glass" type="submit" value="" />
+ </form>
+
+ <div class="summary"></div>
+
+ <ul></ul>
+
+ </div>
+
+ </div>
+
+ <div class="right">
+
+ <div>
+ <h4>About the locator</h4>
+ <p>This tool allows the explotation of different Open Government implementation experiences around the world.</p>
+ <p>Data provided by XXX.</p>
+ </div>
+ <div class="last">
+ <h4>Can you contribute?</h4>
+ <p>We are continuously enhancing our open government experiences database with cases distributed by any person. Can you help us?</p>
+ <a href="#">Recommend an experience</a>
+ </div>
+
+ </div>
+
+ </div>
+
+
+
View
8 js/backbone/templates/index_list_item.js
@@ -0,0 +1,8 @@
+<li>
+ <h3><a href="detail/{{cartodb_id}}">{{title}}</a></h3>
+ <a href="detail/{{cartodb_id}}" class="desc">{{subtitle}}</a>
+ {{#subtitle_country}}
+ <span>&middot;</span>
+ {{/subtitle_country}}
+ <a href="detail/{{cartodb_id}}" class="where">Open Budget in {{country}}</a>
+</li>
View
3  js/backbone/templates/index_summary.js
@@ -0,0 +1,3 @@
+<div>
+ {{number_of_cases}} case studies<span class="for"></span><span class="in"></span><span class="clear">&nbsp;(<a>clear</a>)</span>
+</div>
View
12 js/backbone/templates/infobox.js
@@ -0,0 +1,12 @@
+<div class="box">
+ <div class="content">
+ <div class="header">
+ <hgroup>
+ <h3><a href="detail/{{cartodb_id}}">{{title}}</a></h3>
+ <p>{{category}} &middot; {{country}}</p>
+ </hgroup>
+ </div>
+ </div>
+ <a href="#" class="close">x</a>
+ <div class="t"></div><div class="b"></div>
+</div>
View
5 js/backbone/templates/paragraph.js
@@ -0,0 +1,5 @@
+<div>
+ {{#paragraphs}}
+ <p>{{.}}</p>
+ {{/paragraphs}}
+</div>
View
3  js/backbone/templates/url.js
@@ -0,0 +1,3 @@
+<div>
+ <a href="{{url}}">{{label}}</a>
+</div>
View
17 js/script.js
@@ -6,6 +6,23 @@ var Topics = new TopicsCollection();
var Categories = new CategoriesCollection();
var Case = null;
+var templates_list = ['index',
+ 'index_summary',
+ 'index_list_item',
+ 'filter_list_item',
+ 'detail',
+ 'detail_related_item',
+ 'paragraph',
+ 'url',
+ 'infobox'
+ ];
+
+_.each(templates_list, function(template_name){
+ $.get('/OGPLocator/js/backbone/templates/' + template_name + '.js', function (template) {
+ ich.addTemplate(template_name, template);
+ });
+})
+
$(function(){
Countries.fetch();
Challenges.fetch();
Please sign in to comment.
Something went wrong with that request. Please try again.