Skip to content
Browse files

Make the tocresult links have hrefs, and handler ignores click with m…

…odifiers.

By setting href, the search result links are now keyboard-accessible.
Also, the click handler now ignores right-click and Ctrl-click
(Cmd-click) so the user can open the link in a new tab.

In order to calculate the fragment, languageview must pass languageName
to searchresults, which passes it to mozdevcssprop. Similarly,
pagescrapedlanguageview sends languageName to pagesearchresults, which
sends it to mozdevcssprop to render..
  • Loading branch information...
1 parent 6f513c6 commit 4ff9c3135ab506c3109fde89bb36b2c3be21c2b5 @yonran yonran committed Apr 6, 2012
View
2 static/js/models/pageelement.js
@@ -10,6 +10,8 @@ define([
'domId' : '',
'page' : null,
+ 'lowerCaseTitle' : '', // queries and fragments; set in initialize
+
// Display properties
'tocVisible' : false,
},
View
1 static/js/models/sectionscrape.js
@@ -14,6 +14,7 @@ define([
'url' : '',
'sectionNames' : [],
'sectionHTMLs' : [],
+ 'lowerCaseTitle' : '', // queries and fragments; set in initialize
// display properties
'tocVisible' : false,
View
1 static/js/views/jquerysearchresults.js
@@ -16,6 +16,7 @@ define([
this.collection.each(function(model) {
var view = new MozDevCSSPropView({
model: model,
+ languageName: self.options.languageName,
template: self.options.itemTemplate,
visibleField: self.options.visibleField
});
View
2 static/js/views/languageview.js
@@ -51,6 +51,7 @@ define([
collection: this.collection,
itemTemplate: tocResultTemplate,
itemViewOptions: { tagName: 'li' },
+ languageName: this.languageName,
visibleField: 'tocVisible'
});
@@ -64,6 +65,7 @@ define([
this.options.mainResultTemplate :
fullResultTemplate,
visibleField: 'mainVisible',
+ languageName : this.languageName,
spinner: true
});
});
View
2 static/js/views/mozdevcssprop.js
@@ -27,9 +27,11 @@ define([
// A LOT faster to set css display: none BEFORE setting the HTML.
$thisEl.css('display', 'none'); // Default hidden, only search makes things visible
+ var href = '#' + this.options.languageName.toLowerCase() + '/' + this.model.get('lowerCaseTitle');
$thisEl.html(this.template({
_ : _,
model : this.model,
+ href: href
}));
return this;
},
View
2 static/js/views/pagescrapedlanguageview.js
@@ -42,6 +42,7 @@ define([
collection: this.collection,
itemTemplate: pageTemplate,
visibleField: 'mainVisible',
+ languageName : this.languageName,
spinner: true
});
@@ -89,6 +90,7 @@ define([
el : '#toc-results',
collection : this.pageElements,
itemTemplate : tocResultTemplate,
+ languageName : this.languageName,
visibleField : 'tocVisible'
});
this.tocResultsView.render();
View
11 static/js/views/pagetocbar.js
@@ -26,6 +26,11 @@ define([
},
onClick: function(e) {
+ if (e.button > 0)
+ return;
+ if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
+ return;
+
// If no query, make everything in the search results invisible before
// showing the page of the one that was clicked.
var query = $.trim(this.$searchBox.val()).toLowerCase();
@@ -48,8 +53,10 @@ define([
this.$searchResults.scrollTop(this.$searchResults.scrollTop() + topVal - 60);
// Set url
- Backbone.history.navigate(this.lowercaseLanguageName + '/' + elementName,
- {trigger: false});
+ var href = $elt.attr('href'); // not HTMLLinkElement.href, which is absolute
+ Backbone.history.navigate(href, {trigger: false});
+
+ e.preventDefault();
}
});
View
3 static/js/views/searchresults.js
@@ -69,6 +69,7 @@ define([
var options = {
model: model,
template: self.options.itemTemplate,
+ languageName: self.options.languageName,
visibleField: self.options.visibleField
};
if ('itemViewOptions' in self.options)
@@ -78,7 +79,7 @@ define([
});
return this;
- },
+ }
});
return SearchResultsView;
View
13 static/js/views/tocbar.js
@@ -13,7 +13,6 @@ define([
initialize: function() {
_.bindAll(this, 'render', 'addBindings', 'removeBindings');
this.template = _.template(tocTemplate);
- this.lowercaseLanguageName = this.options.languageName.toLowerCase();
this.$searchBox = this.$('#search-box');
this.$searchResults = $('#search-results');
@@ -33,6 +32,11 @@ define([
},
onClick: function(e) {
+ if (e.button > 0)
+ return;
+ if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey)
+ return;
+
// If no query, make everything in the search results invisible before
// showing the one that was clicked.
var query = $.trim(this.$searchBox.val()).toLowerCase();
@@ -43,7 +47,6 @@ define([
}
});
}
-
var $elt = this.$(e.currentTarget);
var modelid = $elt.attr('data-model-id');
this.collection.get(modelid).set({ mainVisible: true });
@@ -53,8 +56,10 @@ define([
this.$searchResults.scrollTop(searchResultsTopVal + topVal - 60);
// Set url
- var clickedItemName = $elt.text().trim();
- Backbone.history.navigate(this.lowercaseLanguageName + '/' + clickedItemName, false);
+ var href = $elt.attr('href'); // not HTMLLinkElement.href, which is absolute
+ Backbone.history.navigate(href, false);
+
+ e.preventDefault();
}
});
View
2 static/templates/tocpagescraperesult.html
@@ -1 +1 @@
-<a data-model-id="<%= model.get('domId') %>" style="line-height:12px" class="pointer"><%= model.get('name') %></a>
+<a href="<%= href %>" data-model-id="<%= model.get('domId') %>" style="line-height:12px" class="pointer"><%= model.get('name') %></a>
View
2 static/templates/tocresult.html
@@ -1 +1 @@
-<a data-model-id="<%= model.id %>" style="line-height:12px" class="pointer"><%= model.get('title') %></a>
+<a href="<%= href %>" data-model-id="<%= model.id %>" style="line-height:12px" class="pointer"><%= model.get('title') %></a>

0 comments on commit 4ff9c31

Please sign in to comment.
Something went wrong with that request. Please try again.