Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

#

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

navigation-fixes: #178

Merged
merged 6 commits into from
Sep 8, 2015
Merged

navigation-fixes: #178

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
8416038
navigation-fixes:
Aug 28, 2015
47d18eb
- default delimeter is changed (' '-> ',')
Aug 31, 2015
afdda4f
- multiple tags description is added
Aug 31, 2015
15925e6
- jshint warnings are fixed
Aug 31, 2015
bce261a
- missed check is added
Aug 31, 2015
f371adc
navigation-fixes polishing
Sep 7, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 66 additions & 54 deletions assets/js/modules/globalNav.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ define([
"showPreviews": false,
"sortType": "sortByDate",
"sortDirection":"forward",
"delimeter": ",",
"pageLimit": 999,
"ignorePages": [],
"thumbnailName": "thumbnail.png",
Expand Down Expand Up @@ -53,7 +54,8 @@ define([
"hidePreview": "Hide thumbnails",
"showPreview": "Show thumbnails",
"updateButton": "Update navigation"
}
},
"templates": {}
};

/**
Expand All @@ -68,7 +70,8 @@ define([
this.options.modulesOptions.globalNav,
JSON.parse(localStorage.getItem("source_enabledFilter")) || {}
);
$(function(){
this.initTemplates();
$(function() {
_this.init();
});
}
Expand All @@ -77,48 +80,50 @@ define([
GlobalNav.prototype.constructor = GlobalNav;

/**
* @Object templates. Contains basic navigation templates.
* @returns Object templates. Contains basic navigation templates.
* It uses lo-dash template function.
*/
GlobalNav.prototype.templates = {
catalogList: _.template([
'<ul class="<%= classes.catalogList %>">',
'<img src="/source/assets/i/process.gif" alt="<%= labels.loading %>"/>',
'</ul>'
].join("")),

catalogHeader: _.template('<h2 class="<%= classes.catalogListTitle %>"> <%= catalogMeta.title %></h2>'),

catalogMeta: _.template('<div class="<%= classes.catalogText %>"><%= catalogMeta.info %></div>'),

catalogLinkToAll: _.template([
'<li class="<%= classes.catalogListItem %> <%= classes.catalogListAll %>">',
'<a class="<%= classes.catalogLinkToAll %>" href="<%= url %>"><%= labels.linkToAllSpecs %> <%= length %> </a>',
'</li>'
].join("")),

navigationListItem: _.template([
'<li class="<%= classes.catalogListItem %>">',
'<a class="<%= classes.catalogListLink %> source_a_g" href="#">',
'<span class="<%= classes.catalogListTitle %>"></span>',
'<div class="<%= classes.catalogListDate %>"></div>',
'</a>',
'</li>'
].join("")),

catalogFilter: _.template('<div class="<%= classes.catalogFilter %>"></div>'),

togglePreviewLink: _.template('<button class="<%= classes.catalogImageThumbler %>"><%= togglePreviewLabel %></button>'),
updateButton: _.template('<button class="<%= classes.updateButton %>"><%= labels.updateButton %></button>'),

sortList: _.template([
'<ul class="source_sort-list">',
'<li class="source_sort-list_li">Sort by&nbsp;</li>',
'<li class="source_sort-list_li"><a class="source_sort-list_a" id="sortByAlph" href="#sort=alph">alphabet</a></li>',
'<li class="source_sort-list_li">&nbsp;or&nbsp;</li>',
'<li class="source_sort-list_li"><a class="source_sort-list_a" id="sortByDate" href="#sort=date">date</a></li>',
'</ul>'
].join(""))
GlobalNav.prototype.initTemplates = function() {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a short section in navigation docs about styling and changing templates.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Added

this.templates = $.extend(true, {
catalogList: _.template([
'<ul class="<%= classes.catalogList %>">',
'<img src="/source/assets/i/process.gif" alt="<%= labels.loading %>"/>',
'</ul>'
].join("")),

catalogHeader: _.template('<h2 class="<%= classes.catalogListTitle %>"> <%= catalogMeta.title %></h2>'),

catalogMeta: _.template('<div class="<%= classes.catalogText %>"><%= catalogMeta.info %></div>'),

catalogLinkToAll: _.template([
'<li class="<%= classes.catalogListItem %> <%= classes.catalogListAll %>">',
'<a class="<%= classes.catalogLinkToAll %>" href="<%= url %>"><%= labels.linkToAllSpecs %> <%= length %> </a>',
'</li>'
].join("")),

navigationListItem: _.template([
'<li class="<%= classes.catalogListItem %>">',
'<a class="<%= classes.catalogListLink %> source_a_g" href="#">',
'<span class="<%= classes.catalogListTitle %>"></span>',
'<div class="<%= classes.catalogListDate %>"></div>',
'</a>',
'</li>'
].join("")),

catalogFilter: _.template('<div class="<%= classes.catalogFilter %>"></div>'),

togglePreviewLink: _.template('<button class="<%= classes.catalogImageThumbler %>"><%= togglePreviewLabel %></button>'),
updateButton: _.template('<button class="<%= classes.updateButton %>"><%= labels.updateButton %></button>'),

sortList: _.template([
'<ul class="source_sort-list">',
'<li class="source_sort-list_li">Sort by&nbsp;</li>',
'<li class="source_sort-list_li"><a class="source_sort-list_a" id="sortByAlph" href="#sort=alph">alphabet</a></li>',
'<li class="source_sort-list_li">&nbsp;or&nbsp;</li>',
'<li class="source_sort-list_li"><a class="source_sort-list_a" id="sortByDate" href="#sort=date">date</a></li>',
'</ul>'
].join(""))
}, this.options.modulesOptions.globalNav.templates);
};

/**
Expand All @@ -145,7 +150,9 @@ define([
*/
var skipSpec = function(navListCat, obj) {
// obj["cat"] is an array; if cat has needed value
var inArray = !!obj["tag"] && obj["tag"].indexOf(navListCat) > -1;
var inArray = !!obj["tag"] && typeof(navListCat) === "string"
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's better to check if it's an array.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If not string, then it could be an object/number etc, which will fail or produce unexpected output.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

No, it can't. This is the internal function which is used with string or string.split (Array) as an argument.

? !!~obj["tag"].indexOf(navListCat)
: _.reduce(navListCat, function(inArray, item) { return inArray && !!~obj['tag'].indexOf(item);}, true);
// without-cat mode, showing all specs without cat field in info.json defined or
var isWithoutCat = navListCat === "without-tag" && (!obj["tag"] || obj["tag"].length === 0);
return !inArray && !isWithoutCat;
Expand Down Expand Up @@ -248,9 +255,11 @@ define([
*/
GlobalNav.prototype.renderNavigationList = function(catalog, data) {
var navOptions = this.options.modulesOptions.globalNav;
var delimeter = navOptions.delimeter;
var target = catalog.find("." + navOptions.classes.catalogList);
var navListDir = catalog.attr("data-nav");
var navListCat = catalog.attr("data-tag");
navListCat = navListCat && !!~navListCat.indexOf(delimeter) ? navListCat.split(delimeter) : navListCat;
var catalogHeaderURL = catalog.find("." + navOptions.classes.catalogListTitle + '>a').attr('href');

var filter = function(spec) {
Expand All @@ -267,7 +276,13 @@ define([
if(target && target.length === 1) {
var url = catalogHeaderURL && catalogHeaderURL.length && navOptions.useHeaderUrlForNavigation
? catalogHeaderURL : navListDir;
var itemsDocFragment = this.getNavigationItemsList(data, url, filter);
var itemsDocFragment = this.getNavigationItemsList(
_.reduce(data, function(result, item) {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please move it to separate var, to make it more readable.

filter(item["specFile"]) && result.push(item);
return result;
}, []),
url
);
target.html(itemsDocFragment);
}
};
Expand All @@ -281,9 +296,10 @@ define([
*
* @returns {Object} document fragment which contains list of navItems.
*/
GlobalNav.prototype.getNavigationItemsList = function(specifications, catalogUrl, isValid) {
GlobalNav.prototype.getNavigationItemsList = function(specifications, catalogUrl) {
// temporary container to hold navigation items.
var navigationItemsList = document.createDocumentFragment();
var self = this;
var navOptions = this.options.modulesOptions.globalNav;
var pageLimit = navOptions.pageLimit;
var classes = navOptions.classes;
Expand All @@ -292,14 +308,10 @@ define([
? specifications.length
: pageLimit;

for (var j = 0; j < lengthLimit; j++) {
var spec = specifications[j]["specFile"];
if (!isValid(spec)) {
continue;
}

navigationItemsList.appendChild(this.renderNavTreeItem(spec).get(0));
}
var specsToShow = specifications.slice(0, lengthLimit);
_.map(specsToShow, function(item) {
navigationItemsList.appendChild(self.renderNavTreeItem(item["specFile"]).get(0));
});

// Go to cat page link
if (specifications.length > lengthLimit) {
Expand Down Expand Up @@ -552,4 +564,4 @@ define([
};

return new GlobalNav();
});
});
4 changes: 2 additions & 2 deletions docs/data-nav/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -66,7 +66,7 @@ If there is no description, or you want to leave custom text, just use this extr

## Filtering by tag

As it's possible to define different tags for specs in `info.json` files (more in [docs](/docs/info-json/)), we can use them to filter custom navigation tree.
As it's possible to define different tags for specs in `info.json` files (more in [docs](/docs/info-json/)), we can use them to filter custom navigation tree. It is also possible to define more than one tag for each spec. You can use "," as a delimeter, e.g. `templates,navigation`. Delimeter is also configurable (you can change it in `globalNav` options object).
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Don't mention about delimiter configuration, it's too much.



```html
Expand All @@ -77,4 +77,4 @@ As it's possible to define different tags for specs in `info.json` files (more i
<h2>Specs with "templates" tag</h2>
</div>

To call all specs without a tags, you can filter by `"without-tag"` string.
To call all specs without a tags, you can filter by `"without-tag"` string.