added nunjucks clientside, registry is working, needs styles

mozilla · Dec 13, 2012 · d1132fe · d1132fe
1 parent b61e388
commit d1132fe
Show file tree

Hide file tree

Showing 5 changed files with 3,283 additions and 3 deletions.
diff --git a/app/views/layout.html b/app/views/layout.html
@@ -15,15 +15,18 @@
 		<link rel="stylesheet" type="text/css" href="/elements/panel/panel.css"/>
 		<link rel="stylesheet" type="text/css" href="/elements/ribbon/ribbon.css"/>
 		<link rel="stylesheet" type="text/css" href="/elements/code-prism/code-prism.css"/>
+		<link rel="stylesheet" type="text/css" href="/elements/template/template.css"/>
 		{% block styles %}{% endblock %}
 
 		<link type="text/css" rel="stylesheet" href="https://fonts.googleapis.com/css?family=Righteous" />
 
 		<script type="text/javascript" src="/js/x-tag.js"></script>
+		<script type="text/javascript" src="/js/nunjucks-dev.js"></script>
 		<script type="text/javascript" src="/elements/slidebox/slidebox.js"></script>
 		<script type="text/javascript" src="/elements/panel/panel.js"></script>
 		<script type="text/javascript" src="/elements/ribbon/ribbon.js"></script>
 		<script type="text/javascript" src="/elements/code-prism/code-prism.js"></script>
+		<script type="text/javascript" src="/elements/template/template.js"></script>
 	</head>
 
 <body>
@@ -144,11 +147,39 @@
 		},
 		'click:touch:delegate(#registry_elements)': function(){
 			slidePage(3);
+		}, 
+		'click:touch:delegate(#search)': function(){
+
+			var elem = document.getElementById('search_result_json_p');
+			if (!elem){
+				elem = document.createElement('script');
+				document.body.appendChild(elem);
+			}
+			category = [];
+			var query = document.getElementById('query').value.replace(/#(\w+)/g, function(match,group1,idx){
+				category.push(group1);
+				return '';
+			});
+
+			elem.src = "http://registry.x-tags.org/search?callback=search_results&query=" + 
+				query + "&category=" + category.join(',');
+
 		}
 	});
+
+	window.search_results = function(results){
+		var container = document.getElementById('search_results');
+		container.innerHTML = "";
+		results.data.forEach(function(row){
+			var item = document.createElement('x-search-result');
+			item.templateData = row;
+			container.appendChild(item);
+		});
+	}
 
 </script>
 
 {% block scripts %}{% endblock %}
+{% include "templates/search_result.html" %}
 
 </html>
diff --git a/app/views/registry.html b/app/views/registry.html
@@ -2,10 +2,18 @@
 {# extends "layout.html" #}
 
 {% block registry %}
+
+
 <div class="limit">
   	<div class="block">
     	<x-ribbon>Registry</x-ribbon>
-    	<p>Discover and share X-Tags on our registry at <a href="http://registry.x-tags.org">registry.x-tags.org</a>.</p>
+    	<br />
+    	<input id="query" type="text" /><button id="search">Search</button>
+    	<div id="search_results">
+    	</div>
 	</div>
 </div>
-{% endblock%}
+
+
+
+{% endblock %}
diff --git a/app/views/templates/search_result.html b/app/views/templates/search_result.html
@@ -0,0 +1,40 @@
+<x-template name="search-item">
+	<script type="template/script">
+	</script>
+	<script type="template/content">
+	{% raw %}
+		<div class="tag-header">
+			<h3>
+				<a class="tag-name" href="http://registry.x-tags.org/{{registry_path}}/view">{{ name }}</a>
+				<span class="tag-author">by <a target="_blank" href="{{repo}}">{{author}}</a>
+				</span>
+			</h3>
+			<ul class="tag-categories">
+				{% for cat in category %}
+					<li>{{ cat }}</li>
+				{% endfor %}
+			</ul>
+		</div>
+		<p class="tag-description">{{description}}</p>
+	{% endraw %}
+	</script>
+</x-template>
+
+<script type="text/javascript">
+
+	document.addEventListener('DOMComponentsLoaded', function(){
+		document.getElementsByName('search-item')[0].renderer = function(elem, template, data){
+			data.registry_path = data.repo.replace('https://github.com/','') + '/' + data.tag_name;
+			var tmpl = new nunjucks.Template(template);
+			return tmpl.render(data);
+		};	
+	});
+
+	xtag.register('x-search-result',{
+		mixins: ['template'],
+		onCreate: function(){
+			this.setAttribute('template','search-item');
+		}
+	});
+
+</script>
diff --git a/package.json b/package.json
@@ -8,6 +8,6 @@
     "settings": "0.1.0",
     "express": "3.0.3",
     "async": "0.1.22",
-    "nunjucks": "0.1.6"
+    "nunjucks": "git://github.com/jlongster/nunjucks.git#049cf8"
   }
 }