Nuria has submitted this change and it was merged.
Change subject: Cleanup style and behavior
......................................................................
Cleanup style and behavior
Adds matching on project codes like 'enwiki' and 'dewiki'.
Fixes sorting and sizing of the autocomplete.
Removes some unnecessary html code and cleans up some bindings.
Change-Id: Idc5754df6c7ec7e4fed314e754a8644cddbc12ef
---
M src/app/require.config.js
M src/components/metric-selector/metric-selector.js
M src/components/project-selector/bindings.js
M src/components/project-selector/project-selector.html
M src/components/project-selector/project-selector.js
M src/css/styles.css
A src/lib/utils.js
7 files changed, 78 insertions(+), 32 deletions(-)
Approvals:
Nuria: Verified; Looks good to me, approved
diff --git a/src/app/require.config.js b/src/app/require.config.js
index 1399878..a0728c0 100644
--- a/src/app/require.config.js
+++ b/src/app/require.config.js
@@ -24,7 +24,8 @@
'logger' : 'lib/logger',
'wikimetricsApi' : 'app/apis/wikimetrics',
'typeahead' :
'bower_modules/typeahead.js/dist/typeahead.bundle',
- 'ajaxWrapper' : 'lib/ajaxWrapper'
+ 'ajaxWrapper' : 'lib/ajaxWrapper',
+ 'utils' : 'lib/utils'
},
shim: {
'ajaxWrapper': {
diff --git a/src/components/metric-selector/metric-selector.js
b/src/components/metric-selector/metric-selector.js
index 96104f9..7824277 100644
--- a/src/components/metric-selector/metric-selector.js
+++ b/src/components/metric-selector/metric-selector.js
@@ -22,15 +22,10 @@
'use strict';
var ko = require('knockout'),
- templateMarkup = require('text!./metric-selector.html');
+ templateMarkup = require('text!./metric-selector.html'),
+ utils = require('utils');
require('./bindings');
-
- /* helper to sort named objects */
- function sortByName (a, b) {
- return a.name === b.name ?
- 0 : a.name > b.name ? 1 : -1;
- }
function MetricSelector(params) {
var self = this;
@@ -62,13 +57,13 @@
this.categories = ko.computed(function(){
var unwrap = ko.unwrap(this.metricsByCategory) || [],
copy = unwrap.slice(),
- categories = copy.sort(sortByName);
+ categories = copy.sort(utils.sortByNameIgnoreCase);
categories.splice(0, 0, {
name: 'All metrics',
metrics: [].concat.apply([], categories.map(function(c) {
return c.metrics;
- })).sort(sortByName)
+ })).sort(utils.sortByNameIgnoreCase)
});
if (categories.length) {
diff --git a/src/components/project-selector/bindings.js
b/src/components/project-selector/bindings.js
index b50a08e..e15ec6b 100644
--- a/src/components/project-selector/bindings.js
+++ b/src/components/project-selector/bindings.js
@@ -1,9 +1,15 @@
-define(['knockout', 'typeahead'], function (ko) {
+define(['knockout', 'utils', 'typeahead'], function (ko, utils) {
'use strict';
+
// Data is an array of option objects
- function substringMatcher(data) {
+ function substringMatcher(data, minLength) {
return function findMatches(query, callback) {
var matches, substrRegex;
+
+ if (minLength && query.length < minLength) {
+ callback([]);
+ return;
+ }
// regex used to determine if a string contains "query"
substrRegex = new RegExp(query, 'i');
@@ -11,7 +17,7 @@
// an array that will be populated with substring matches
matches = data.filter(function (item) {
return substrRegex.test(item.name);
- });
+ }).sort(utils.sortByName);
callback(matches);
};
@@ -36,6 +42,7 @@
var value = ko.unwrap(valueAccessor());
var projectOptions = ko.unwrap(value.projectOptions);
var languageOptions = ko.unwrap(value.languageOptions);
+ var codeOptions = ko.unwrap(value.codeOptions);
// to destroy typeaheads: $('.typeahead').typeahead('destroy');
if (projectOptions.length > 0 && languageOptions.length > 0) {
@@ -54,9 +61,21 @@
displayKey: 'value',
templates: makeTemplate('Languages'),
source: substringMatcher(languageOptions)
+ }, {
+ name: 'codes',
+ displayKey: 'value',
+ templates: makeTemplate('Codes'),
+ source: substringMatcher(codeOptions, 5)
}
).bind('typeahead:selected', value.select.bind(viewModel));
+
+ $(element).on('blur', function () {
+ // Without this timeout, blur will happen before the click
+ // that selects the project, so the click will happen after
+ // the close and therefore miss the target.
+ setTimeout(value.blur.bind(viewModel), 100);
+ });
} //end update
} // end projectAutocomplete
};
diff --git a/src/components/project-selector/project-selector.html
b/src/components/project-selector/project-selector.html
index 7260bfd..23bdbdd 100644
--- a/src/components/project-selector/project-selector.html
+++ b/src/components/project-selector/project-selector.html
@@ -6,24 +6,15 @@
data-bind="projectAutocomplete: {
projectOptions: projectOptions,
languageOptions: languageOptions,
- select: displaySecondLevel
- }, event: {
- blur: function(data,event){
- // TODO: this has to be in the binding, not here
- setTimeout(hideSecondLevel.bind($data), 500)
- }
- }"/>
+ codeOptions: codeOptions,
+ select: displaySecondLevel,
+ blur: hideSecondLevel
+ }"/>
<i class="search icon"></i>
</div>
<span class="tt-dropdown-menu"
- data-bind="css: {open: displaySuboptions},
- event: {
- blur: function(data,event){
- // TODO: this has to be in the binding, not here
- setTimeout(hideSecondLevel.bind($data),200);
- }
- }">
+ data-bind="css: {open: displaySuboptions}">
<div class="tt-dataset-suboptions">
<span class="header" data-bind="text: selectedOption"></span>
<hr/>
diff --git a/src/components/project-selector/project-selector.js
b/src/components/project-selector/project-selector.js
index 70ad0d6..506dbb9 100644
--- a/src/components/project-selector/project-selector.js
+++ b/src/components/project-selector/project-selector.js
@@ -1,6 +1,11 @@
/* jshint -W098 */
-define(['knockout', 'text!./project-selector.html', './bindings'], function
(ko, templateMarkup) {
+define(function (require) {
'use strict';
+
+ var ko = require('knockout'),
+ templateMarkup = require('text!./project-selector.html'),
+ utils = require('utils');
+ require('./bindings');
function ProjectSelector(params) {
this.selectedProjects = params.selectedProjects;
@@ -13,6 +18,13 @@
this.displaySuboptions = ko.observable(false);
this.selectedOption = ko.observable();
this.suboptions = ko.observable([]);
+
+ this.codeOptions = ko.computed(function () {
+ var reverse = ko.unwrap(this.reverseLookup);
+ return Object.getOwnPropertyNames(reverse).map(function (code) {
+ return {name: code, description: ''};
+ });
+ }, this);
var self = this,
updateDefault = function () {
@@ -66,11 +78,18 @@
this.displaySuboptions(true);
this.selectedOption(selection.name);
- if (datasetName === 'projects') {
- options = makeOptions(selection.languages);
- } else {
- options = makeOptions(selection.projects,
ko.unwrap(this.prettyProjectNames));
+ switch (datasetName) {
+ case 'projects':
+ options = makeOptions(selection.languages);
+ break;
+ case 'languages':
+ options = makeOptions(selection.projects,
ko.unwrap(this.prettyProjectNames));
+ break;
+ case 'codes':
+ this.addProject({project: selection.name});
+ return;
}
+ options.sort(utils.sortByNameIgnoreCase);
this.suboptions(options);
};
diff --git a/src/css/styles.css b/src/css/styles.css
index 6a348fa..b8f09b7 100644
--- a/src/css/styles.css
+++ b/src/css/styles.css
@@ -48,6 +48,9 @@
border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 8px;
box-shadow: 0 5px 10px rgba(0,0,0,.2);
+ max-height: 24em;
+ overflow-y: scroll;
+ overflow-x: hidden;
}
.tt-suggestion {
padding: 3px 20px;
diff --git a/src/lib/utils.js b/src/lib/utils.js
new file mode 100644
index 0000000..a2473a4
--- /dev/null
+++ b/src/lib/utils.js
@@ -0,0 +1,18 @@
+/**
+ * Look into doing this with Lodash if we can make a slim enough build
+ **/
+define([], function () {
+ 'use strict';
+
+ return {
+ sortByName: function (a, b) {
+ // NOTE: this purposefully sorts uppercase before lowercase
+ return a.name === b.name ?
+ 0 : a.name > b.name ? 1 : -1;
+ },
+ sortByNameIgnoreCase: function (a, b) {
+ return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+ }
+ };
+});
+
--
To view, visit https://gerrit.wikimedia.org/r/160050
To unsubscribe, visit https://gerrit.wikimedia.org/r/settings
Gerrit-MessageType: merged
Gerrit-Change-Id: Idc5754df6c7ec7e4fed314e754a8644cddbc12ef
Gerrit-PatchSet: 4
Gerrit-Project: analytics/dashiki
Gerrit-Branch: master
Gerrit-Owner: Milimetric <[email protected]>
Gerrit-Reviewer: Nuria <[email protected]>
_______________________________________________
MediaWiki-commits mailing list
[email protected]
https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits
