[extensions-web] extensions, js: Render extensions list client-side with Mustache
- From: Jasper St. Pierre <jstpierre src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [extensions-web] extensions, js: Render extensions list client-side with Mustache
- Date: Sat, 31 Mar 2012 20:48:35 +0000 (UTC)
commit 1bb4f5fb98a19e99b6b57cc5b442e83b35d82daf
Author: Jasper St. Pierre <jstpierre mecheye net>
Date: Fri Mar 30 21:17:55 2012 -0400
extensions, js: Render extensions list client-side with Mustache
sweettooth/extensions/tests.py | 4 +-
sweettooth/extensions/urls.py | 1 -
sweettooth/extensions/views.py | 15 +---
sweettooth/static/js/main.js | 8 +-
sweettooth/static/js/paginator.js | 100 +++++---------------
sweettooth/static/js/paginatorUtils.js | 53 ++++++++++
.../static/js/templates/extensions/info.mustache | 23 +-----
.../js/templates/extensions/info_contents.mustache | 22 +++++
.../js/templates/extensions/info_list.mustache | 7 ++
sweettooth/static/js/templates/templatedata.js | 2 +-
10 files changed, 114 insertions(+), 121 deletions(-)
---
diff --git a/sweettooth/extensions/tests.py b/sweettooth/extensions/tests.py
index aa87b38..4aba371 100644
--- a/sweettooth/extensions/tests.py
+++ b/sweettooth/extensions/tests.py
@@ -543,7 +543,9 @@ class QueryExtensionsTest(BasicUserTestCase, TestCase):
if 'sort' not in params:
params['sort'] = 'name'
- return [details['uuid'] for details in self.get_response(params)]
+ response = self.get_response(params)
+ extensions = response['extensions']
+ return [details['uuid'] for details in extensions]
def create_extension(self, name, **kwargs):
metadata = dict(uuid=name + "@mecheye.net", name=name)
diff --git a/sweettooth/extensions/urls.py b/sweettooth/extensions/urls.py
index a0a7c1c..d40f0d0 100644
--- a/sweettooth/extensions/urls.py
+++ b/sweettooth/extensions/urls.py
@@ -15,7 +15,6 @@ ajax_patterns = patterns('',
dict(newstatus=models.STATUS_ACTIVE), name='extensions-ajax-set-status-active'),
url(r'^set-status/inactive/', views.ajax_set_status_view,
dict(newstatus=models.STATUS_INACTIVE), name='extensions-ajax-set-status-inactive'),
- url(r'^extensions-list/', views.ajax_extensions_list),
url(r'^adjust-popularity/', views.ajax_adjust_popularity_view),
)
diff --git a/sweettooth/extensions/views.py b/sweettooth/extensions/views.py
index 550e891..c1ed5fa 100644
--- a/sweettooth/extensions/views.py
+++ b/sweettooth/extensions/views.py
@@ -178,18 +178,6 @@ def ajax_query_search_query(request, n_per_page=10):
return extensions, num_pages
@ajax_view
-def ajax_extensions_list(request):
- if request.GET.get('search', ''):
- func = ajax_query_search_query
- else:
- func = ajax_query_params_query
-
- object_list, num_pages = func(request)
-
- return dict(html=render_to_string('extensions/list_bare.html', dict(extension_list=object_list)),
- numpages=num_pages)
-
- ajax_view
def ajax_query_view(request):
if request.GET.get('search', ''):
func = ajax_query_search_query
@@ -198,7 +186,8 @@ def ajax_query_view(request):
object_list, num_pages = func(request)
- return [ajax_details(e) for e in object_list]
+ return dict(extensions=[ajax_details(e) for e in object_list],
+ numpages=num_pages)
@model_view(models.Extension)
def extension_view(request, obj, **kwargs):
diff --git a/sweettooth/static/js/main.js b/sweettooth/static/js/main.js
index e3e23a4..198015d 100644
--- a/sweettooth/static/js/main.js
+++ b/sweettooth/static/js/main.js
@@ -117,17 +117,13 @@ require(['jquery', 'messages', 'modal',
$('#extension_shell_versions_info').buildShellVersionsInfo();
- function injectSearch() {
- return { search: $('#search_input').val() };
- }
-
var $extensionsList = $('#extensions-list').
- paginatorify('/ajax/extensions-list/', injectSearch).
+ paginatorify().
bind('page-loaded', function() {
$('li.extension').grayOutIfOutOfDate();
// If we're searching, don't add FSUI for now.
- if (!injectSearch().search)
+ if (!$('search_input').val())
$('#extensions-list .before-paginator').fsUIify();
// Scroll the page back up to the top.
diff --git a/sweettooth/static/js/paginator.js b/sweettooth/static/js/paginator.js
index 881b21f..55e4621 100644
--- a/sweettooth/static/js/paginator.js
+++ b/sweettooth/static/js/paginator.js
@@ -1,21 +1,17 @@
"use strict";
-define(['jquery', 'hashparamutils', 'dbus!_', 'templates',
- 'jquery.hashchange'], function($, hashparamutils, dbusProxy, templates) {
+define(['jquery', 'hashparamutils', 'paginatorUtils', 'dbus!_', 'templates'], function($, hashparamutils, paginatorUtils, dbusProxy, templates) {
- $.fn.paginatorify = function(url, additionalHashParams, context) {
+ $.fn.paginatorify = function(context) {
if (!this.length)
return this;
- var hashParams = {};
-
if (context === undefined)
context = 3;
var $loadingPageContent = $(templates.paginator.loading_page());
var $elem = $(this);
- var numPages = 0;
var $beforePaginator = null;
var $afterPaginator = null;
@@ -25,19 +21,20 @@ define(['jquery', 'hashparamutils', 'dbus!_', 'templates',
$elem.addClass('loading');
$loadingPageContent.prependTo($elem);
- var hashCopy;
- if (additionalHashParams)
- hashCopy = $.extend(additionalHashParams(), hashParams);
- else
- hashCopy = hashParams;
-
if (currentRequest !== null)
currentRequest.abort();
+ var queryParams = hashparamutils.getHashParams();
+ if (queryParams.page === undefined)
+ queryParams.page = 1;
+ if (queryParams.shell_version === undefined)
+ queryParams.shell_version = dbusProxy.ShellVersion;
+ queryParams.search = $('#search_input').val();
+
currentRequest = $.ajax({
- url: url,
+ url: '/extension-query/',
dataType: 'json',
- data: hashCopy,
+ data: queryParams,
type: 'GET'
}).done(function(result) {
if ($beforePaginator)
@@ -47,12 +44,20 @@ define(['jquery', 'hashparamutils', 'dbus!_', 'templates',
$loadingPageContent.detach();
- numPages = result.numpages;
+ var page = queryParams.page;
+ var numPages = result.numpages;
- $beforePaginator = buildPaginator().addClass('before-paginator');
- $afterPaginator = buildPaginator().addClass('after-paginator');
+ var $paginator = paginatorUtils.buildPaginator(page, numPages, context);
+ $beforePaginator = $paginator.clone().addClass('before-paginator');
+ $afterPaginator = $paginator.clone().addClass('after-paginator');
+ $paginator.empty();
- var $newContent = $(result.html);
+ // Serialize out the svm as we want it to be JSON in the data attribute.
+ $.each(result.extensions, function() {
+ this.shell_version_map = JSON.stringify(this.shell_version_map);
+ });
+
+ var $newContent = $(templates.extensions.info_list(result));
$elem.
removeClass('loading').
@@ -64,65 +69,6 @@ define(['jquery', 'hashparamutils', 'dbus!_', 'templates',
});
}
- function makeLink(pageNumber, styleClass, text) {
- styleClass = styleClass === undefined ? "" : styleClass;
- text = text === undefined ? pageNumber.toString() : text;
-
- var hp = $.extend({}, hashParams);
- hp.page = pageNumber;
-
- return $('<a>', {'class': 'number ' + styleClass,
- 'href': '#' + $.param(hp)}).text(text);
- }
-
- function buildPaginator() {
- var number = hashParams.page;
- var contextLeft = Math.max(number-context, 2);
- var contextRight = Math.min(number+context+2, numPages);
-
- var $elem = $('<div>', {'class': 'paginator-content'});
-
- if (number > 1) {
- makeLink(number-1, 'prev', '\u00ab').appendTo($elem);
- makeLink(1, 'first').appendTo($elem);
- if (number-context > 2)
- $elem.append($('<span>', {'class': 'ellipses'}).text("..."));
-
- for (var i = contextLeft; i < number; i++)
- makeLink(i).appendTo($elem);
- }
-
- $elem.append($('<span>', {'class': 'current number'}).text(number));
-
- if (number < numPages) {
- for (var i = number+1; i < contextRight; i++)
- makeLink(i).appendTo($elem);
-
- if (numPages - (number+context) > 2)
- $elem.append($('<span>', {'class': 'ellipses'}).text("..."));
-
- makeLink(numPages, 'last').appendTo($elem);
- makeLink(number+1, 'prev', '\u00bb').appendTo($elem);
- }
-
- return $('<div>', {'class': 'paginator'}).append($elem);
- }
-
- $(window).hashchange(function() {
- hashParams = hashparamutils.getHashParams();
- if (hashParams.page === undefined)
- hashParams.page = 1;
- else
- hashParams.page = parseInt(hashParams.page);
-
- if (hashParams.shell_version === undefined && dbusProxy.ShellVersion !== undefined)
- hashParams.shell_version = dbusProxy.ShellVersion;
-
- loadPage();
- });
-
- $(window).hashchange();
-
this.bind('load-page', loadPage);
return this;
diff --git a/sweettooth/static/js/paginatorUtils.js b/sweettooth/static/js/paginatorUtils.js
new file mode 100644
index 0000000..2f99677
--- /dev/null
+++ b/sweettooth/static/js/paginatorUtils.js
@@ -0,0 +1,53 @@
+"use strict";
+
+define(['jquery', 'hashparamutils'], function($, hashparamutils) {
+
+ var module = {};
+
+ var makeLink = module.makeLink = function(pageNumber, styleClass, text) {
+ styleClass = styleClass === undefined ? "" : styleClass;
+ text = text === undefined ? pageNumber.toString() : text;
+
+ var hp = hashparamutils.getHashParams();
+ hp.page = pageNumber;
+
+ return $('<a>', {'class': 'number ' + styleClass,
+ 'href': '#' + $.param(hp)}).text(text);
+ };
+
+ var buildPaginator = module.buildPaginator = function(page, numPages, context) {
+ var number = page;
+ var contextLeft = Math.max(number-context, 2);
+ var contextRight = Math.min(number+context+2, numPages);
+
+ var $elem = $('<div>', {'class': 'paginator-content'});
+
+ if (number > 1) {
+ makeLink(number-1, 'prev', '\u00ab').appendTo($elem);
+ makeLink(1, 'first').appendTo($elem);
+ if (number-context > 2)
+ $elem.append($('<span>', {'class': 'ellipses'}).text("..."));
+
+ for (var i = contextLeft; i < number; i++)
+ makeLink(i).appendTo($elem);
+ }
+
+ $elem.append($('<span>', {'class': 'current number'}).text(number));
+
+ if (number < numPages) {
+ for (var i = number+1; i < contextRight; i++)
+ makeLink(i).appendTo($elem);
+
+ if (numPages - (number+context) > 2)
+ $elem.append($('<span>', {'class': 'ellipses'}).text("..."));
+
+ makeLink(numPages, 'last').appendTo($elem);
+ makeLink(number+1, 'prev', '\u00bb').appendTo($elem);
+ }
+
+ return $('<div>', {'class': 'paginator'}).append($elem);
+ };
+
+ return module;
+
+});
diff --git a/sweettooth/static/js/templates/extensions/info.mustache b/sweettooth/static/js/templates/extensions/info.mustache
index d7b7f1d..5fe63fa 100644
--- a/sweettooth/static/js/templates/extensions/info.mustache
+++ b/sweettooth/static/js/templates/extensions/info.mustache
@@ -1,24 +1,3 @@
<div class="extension" data-uuid="{{uuid}}">
- <div class="switch"></div>
- <img class="icon" src="{{icon}}">
- <h3 class="extension-name">
- {{#link}}
- <a href="{{link}}" class="title-link"> <img src="{{icon}}" class="icon"> {{name}} </a>
- {{/link}}
- {{^link}}
- {{name}}
- {{/link}}
- </h3>
- {{#creator}}
- <span class="author">by <a href="{{creator_url}}"> {{creator}} </a></span>
- {{/creator}}
- {{#want_configure}}
- {{>extensions.configure_button}}
- {{/want_configure}}
- <p class="description">
- {{description}}
- </p>
- {{#want_uninstall}}
- <button class="uninstall" title="Uninstall">Uninstall</button>
- {{/want_uninstall}}
+ {{>extensions.info_contents}}
</div>
diff --git a/sweettooth/static/js/templates/extensions/info_contents.mustache b/sweettooth/static/js/templates/extensions/info_contents.mustache
new file mode 100644
index 0000000..c16e54c
--- /dev/null
+++ b/sweettooth/static/js/templates/extensions/info_contents.mustache
@@ -0,0 +1,22 @@
+<div class="switch"></div>
+<img class="icon" src="{{icon}}">
+<h3 class="extension-name">
+ {{#link}}
+ <a href="{{link}}" class="title-link"> <img src="{{icon}}" class="icon"> {{name}} </a>
+ {{/link}}
+ {{^link}}
+ {{name}}
+ {{/link}}
+</h3>
+{{#creator}}
+ <span class="author">by <a href="{{creator_url}}"> {{creator}} </a></span>
+{{/creator}}
+{{#want_configure}}
+ {{>extensions.configure_button}}
+{{/want_configure}}
+<p class="description">
+ {{description}}
+</p>
+{{#want_uninstall}}
+ <button class="uninstall" title="Uninstall">Uninstall</button>
+{{/want_uninstall}}
diff --git a/sweettooth/static/js/templates/extensions/info_list.mustache b/sweettooth/static/js/templates/extensions/info_list.mustache
new file mode 100644
index 0000000..8edece8
--- /dev/null
+++ b/sweettooth/static/js/templates/extensions/info_list.mustache
@@ -0,0 +1,7 @@
+<ul class="extensions">
+{{#extensions}}
+ <li class="extension" data-svm="{{shell_version_map}}">
+ {{>extensions.info_contents}}
+ </li>
+{{/extensions}}
+</ul>
diff --git a/sweettooth/static/js/templates/templatedata.js b/sweettooth/static/js/templates/templatedata.js
index 6a1f89d..ec95714 100644
--- a/sweettooth/static/js/templates/templatedata.js
+++ b/sweettooth/static/js/templates/templatedata.js
@@ -1,4 +1,4 @@
"use strict";
-define({"paginator": {"loading_page": "<div class=\"loading-page\">\n Loading page... please wait.\n</div>"}, "messages": {"cannot_list_errors": "GNOME Shell Extensions cannot automatically detect any errors.", "cannot_list_local": "GNOME Shell Extensions cannot list your installed extensions.", "dummy_proxy": "You do not appear to have an up to date version of GNOME3. You won't be able to install extensions from here. See the <a href=\"about/#old-version\">about page</a> for more information."}, "upgrade": {"need_upgrade": "You have version {{current_version}} of \"{{extension_name}}\". The latest version is version {{latest_version}}. Click here to upgrade.", "latest_version": "You have the latest version of {{extension_name}}."}, "extensions": {"info": "<div class=\"extension\" data-uuid=\"{{uuid}}\">\n <div class=\"switch\"></div>\n <img class=\"icon\" src=\"{{icon}}\">\n <h3 class=\"extension-name\">\n {{#link}}\n <a href=\"{{link}}\" class=\"title-link\"> <
img src=\"{{icon}}\" class=\"icon\"> {{name}} </a>\n {{/link}}\n {{^link}}\n {{name}}\n {{/link}}\n </h3>\n {{#creator}}\n <span class=\"author\">by <a href=\"{{creator_url}}\"> {{creator}} </a></span>\n {{/creator}}\n {{#want_configure}}\n {{>extensions.configure_button}}\n {{/want_configure}}\n <p class=\"description\">\n {{description}}\n </p>\n {{#want_uninstall}}\n <button class=\"uninstall\" title=\"Uninstall\">Uninstall</button>\n {{/want_uninstall}}\n</div>", "configure_button": "<span class=\"launch-prefs-button\">Configure</span>", "error_report_template": "What's wrong?\n\n\n\nWhat have you tried?\n\n\n\nAutomatically detected errors:\n\n{{#errors}}\n {{.}}\n\n================\n{{/errors}}\n{{^errors}}\nGNOME Shell Extensions did not detect any errors with this extension.\n{{/errors}}\n\nVersion information:\n\n Shell version: {{sv}}\n Extension version: {{#ev}}{{ev}}{{/ev}}{{^ev}}Unknown{{/ev}}", "uninstall": "You uninstall
ed <b>{{name}}. <a href=\"#\">Undo?</a>"}});
+define({"paginator": {"loading_page": "<div class=\"loading-page\">\n Loading page... please wait.\n</div>"}, "messages": {"cannot_list_errors": "GNOME Shell Extensions cannot automatically detect any errors.", "cannot_list_local": "GNOME Shell Extensions cannot list your installed extensions.", "dummy_proxy": "You do not appear to have an up to date version of GNOME3. You won't be able to install extensions from here. See the <a href=\"about/#old-version\">about page</a> for more information."}, "upgrade": {"need_upgrade": "You have version {{current_version}} of \"{{extension_name}}\". The latest version is version {{latest_version}}. Click here to upgrade.", "latest_version": "You have the latest version of {{extension_name}}."}, "extensions": {"info": "<div class=\"extension\" data-uuid=\"{{uuid}}\">\n {{>extensions.info_contents}}\n</div>", "error_report_template": "What's wrong?\n\n\n\nWhat have you tried?\n\n\n\nAutomatically detected errors:\n\n{{#errors}}\n {{.}}
\n\n================\n{{/errors}}\n{{^errors}}\nGNOME Shell Extensions did not detect any errors with this extension.\n{{/errors}}\n\nVersion information:\n\n Shell version: {{sv}}\n Extension version: {{#ev}}{{ev}}{{/ev}}{{^ev}}Unknown{{/ev}}", "info_list": "<ul class=\"extensions\">\n{{#extensions}}\n <li class=\"extension\" data-svm=\"{{shell_version_map}}\">\n {{>extensions.info_contents}}\n </li>\n{{/extensions}}\n</ul>", "info_contents": "<div class=\"switch\"></div>\n<img class=\"icon\" src=\"{{icon}}\">\n<h3 class=\"extension-name\">\n {{#link}}\n <a href=\"{{link}}\" class=\"title-link\"> <img src=\"{{icon}}\" class=\"icon\"> {{name}} </a>\n {{/link}}\n {{^link}}\n {{name}}\n {{/link}}\n</h3>\n{{#creator}}\n <span class=\"author\">by <a href=\"{{creator_url}}\"> {{creator}} </a></span>\n{{/creator}}\n{{#want_configure}}\n {{>extensions.configure_button}}\n{{/want_configure}}\n<p class=\"description\">\n {{description}}\n</p>\n{{#want_uninstall}
}\n <button class=\"uninstall\" title=\"Uninstall\">Uninstall</button>\n{{/want_uninstall}}", "configure_button": "<span class=\"launch-prefs-button\">Configure</span>", "uninstall": "You uninstalled <b>{{name}}. <a href=\"#\">Undo?</a>"}});
[
Date Prev][
Date Next] [
Thread Prev][
Thread Next]
[
Thread Index]
[
Date Index]
[
Author Index]
