[ARVADOS] updated: 1.1.2-45-g3fc4aae
Git user
git at public.curoverse.com
Mon Jan 15 15:48:58 EST 2018
Summary of changes:
.../app/assets/javascripts/application.js | 4 +-
.../app/assets/javascripts/components/edit_tags.js | 140 +++++----------------
.../app/assets/stylesheets/application.css.scss | 8 +-
apps/workbench/npm_packages | 4 +-
4 files changed, 42 insertions(+), 114 deletions(-)
via 3fc4aaee466529bd8ed7fad664d2eb61b37d6864 (commit)
via 8cca38ff5e4d05c85dfb137b29c419e5df8299e0 (commit)
from e5b7fb12522636f24d9b23ea587b8d12e13c50c2 (commit)
Those revisions listed above that are new to this repository have
not appeared on any other notification email; so we list those
revisions in full, below.
commit 3fc4aaee466529bd8ed7fad664d2eb61b37d6864
Author: Lucas Di Pentima <ldipentima at veritasgenetics.com>
Date: Mon Jan 15 17:46:31 2018 -0300
12479: Replaced selectize widget with awesomplete to solve some
issues when navigating fields with TAB key.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <ldipentima at veritasgenetics.com>
diff --git a/apps/workbench/app/assets/javascripts/application.js b/apps/workbench/app/assets/javascripts/application.js
index 184c14b..b90081f 100644
--- a/apps/workbench/app/assets/javascripts/application.js
+++ b/apps/workbench/app/assets/javascripts/application.js
@@ -33,9 +33,7 @@
//= require jquery.number.min
//= require npm-dependencies
//= require mithril/stream/stream
-//= require microplugin
-//= require sifter
-//= require selectize
+//= require awesomplete
//= require_tree .
Es6ObjectAssign.polyfill()
diff --git a/apps/workbench/app/assets/javascripts/components/edit_tags.js b/apps/workbench/app/assets/javascripts/components/edit_tags.js
index bea0697..dbbce15 100644
--- a/apps/workbench/app/assets/javascripts/components/edit_tags.js
+++ b/apps/workbench/app/assets/javascripts/components/edit_tags.js
@@ -9,10 +9,9 @@ window.SimpleInput = {
width: '100%',
},
type: 'text',
- placeholder: vnode.attrs.placeholder,
+ placeholder: 'Add ' + vnode.attrs.placeholder,
value: vnode.attrs.value,
onchange: function() {
- console.log(this.value)
if (this.value != '') {
vnode.attrs.value(this.value)
}
@@ -27,56 +26,45 @@ window.SimpleInput = {
}
window.SelectOrAutocomplete = {
- onFocus: function(vnode) {
- // Allow the user to edit an already entered value by removing it
- // and filling the input field with the same text. (non-strict listings)
- var activeSelect = vnode.state.selectized[0].selectize
- value = activeSelect.getValue()
- if (vnode.attrs.create && value.length > 0) {
- activeSelect.clear(silent = true)
- activeSelect.setTextboxValue(value)
- }
- },
view: function(vnode) {
- return m("input", {
+ return m("input.form-control", {
style: {
width: '100%'
},
type: 'text',
- value: vnode.attrs.value
+ value: vnode.attrs.value,
+ placeholder: (vnode.attrs.create ? 'Add or select ': 'Select ') + vnode.attrs.placeholder,
}, vnode.attrs.value)
},
oncreate: function(vnode) {
- vnode.state.selectized = $(vnode.dom).selectize({
- labelField: 'value',
- valueField: 'value',
- searchField: 'value',
- sortField: 'value',
- persist: false,
- hideSelected: true,
- openOnFocus: !vnode.attrs.create,
- createOnBlur: true,
- // selectOnTab: true,
- maxItems: 1,
- placeholder: (vnode.attrs.create ? 'Add or select ': 'Select ') + vnode.attrs.placeholder,
- create: vnode.attrs.create ? function(input) {
- return {value: input}
- } : false,
- items: [vnode.attrs.value()],
- options: vnode.attrs.options.map(function(option) {
- return {value: option}
- }),
- onChange: function(val) {
- if (val != '') {
- vnode.attrs.value(val)
+ var awesomplete = new Awesomplete(vnode.dom, {
+ list: vnode.attrs.options,
+ minChars: 0,
+ autoFirst: true,
+ })
+ // Option is selected from the list.
+ $(vnode.dom).on('awesomplete-selectcomplete', function(event) {
+ vnode.attrs.value(this.value)
+ })
+ $(vnode.dom).on('change', function(event) {
+ if (!vnode.attrs.create && !(this.value in vnode.attrs.options)) {
+ this.value = vnode.attrs.value()
+ } else {
+ if (vnode.attrs.value() !== this.value) {
+ vnode.attrs.value(this.value)
}
- },
- onFocus: function() {
- vnode.state.onFocus(vnode)
+ }
+ })
+ $(vnode.dom).on('focusin', function(event) {
+ // Open list when focusing on empty strict fields
+ if (!vnode.attrs.create && this.value === '') {
+ // minChars = 0 && evaluate() makes the list open without
+ // input events
+ awesomplete.evaluate()
}
})
if (vnode.attrs.setFocus) {
- vnode.state.selectized[0].selectize.focus()
+ $(vnode.dom).focus()
}
}
}
@@ -99,9 +87,6 @@ window.TagEditorRow = {
'values' in vnode.attrs.vocabulary().tags[vnode.attrs.name()]) {
valueOpts = vnode.attrs.vocabulary().tags[vnode.attrs.name()].values
}
- if (vnode.attrs.value() != '') {
- valueOpts.push(vnode.attrs.value())
- }
}
return m("tr", [
// Erase tag
@@ -114,19 +99,17 @@ window.TagEditorRow = {
onclick: function(e) { vnode.attrs.removeTag() }
}, m('i.fa.fa-fw.fa-trash-o')))
]),
- // Tag name
+ // Tag key
m("td", [
vnode.attrs.editMode ?
- m("div", {key: 'name-'+vnode.attrs.name()},[
+ m("div", [
m(inputComponent, {
options: nameOpts,
value: vnode.attrs.name,
// Allow any tag name unless "strict" is set to true.
create: !vnode.attrs.vocabulary().strict,
- placeholder: 'name',
- // Focus on tag name field when adding a new tag that's
- // not the first one.
- setFocus: vnode.attrs.name() === ''
+ placeholder: 'key',
+ setFocus: false
})
])
: vnode.attrs.name
@@ -186,7 +169,7 @@ window.TagEditorTable = {
vocabulary: vnode.attrs.vocabulary
})
})
- : m("tr", m("td[colspan=3]", m("center","loading tags...")))
+ : m("tr", m("td[colspan=3]", m("center", "Loading tags...")))
]),
])
}
@@ -240,7 +223,7 @@ window.TagEditorApp = {
vnode.state.dirty.map(function() {
if (!vnode.state.editMode) { return }
lastTag = vnode.state.tags.slice(-1).pop()
- if (lastTag === undefined || (lastTag.name() !== '' && lastTag.value() !== '')) {
+ if (lastTag === undefined || (lastTag.name() !== '' || lastTag.value() !== '')) {
vnode.state.appendTag(vnode, '', '')
}
})
diff --git a/apps/workbench/app/assets/stylesheets/application.css.scss b/apps/workbench/app/assets/stylesheets/application.css.scss
index b0c0100..c803764 100644
--- a/apps/workbench/app/assets/stylesheets/application.css.scss
+++ b/apps/workbench/app/assets/stylesheets/application.css.scss
@@ -16,8 +16,7 @@
*= require bootstrap
*= require bootstrap3-editable/bootstrap-editable
*= require morris
- *= require selectize
- *= require selectize.default
+ *= require awesomplete
*= require_tree .
*/
@@ -322,3 +321,8 @@ ul.nav.nav-tabs {
{
width: 98%!important;
}
+
+/* Needed for awesomplete to play nice with bootstrap */
+div.awesomplete {
+ display: block;
+}
\ No newline at end of file
diff --git a/apps/workbench/npm_packages b/apps/workbench/npm_packages
index 1aa2575..c126b55 100644
--- a/apps/workbench/npm_packages
+++ b/apps/workbench/npm_packages
@@ -7,9 +7,7 @@
# Browserify is required.
npm 'browserify', require: false
npm 'jquery'
-npm 'microplugin'
-npm 'sifter'
-npm 'selectize'
+npm 'awesomplete'
npm 'mithril'
npm 'es6-object-assign'
commit 8cca38ff5e4d05c85dfb137b29c419e5df8299e0
Author: Lucas Di Pentima <ldipentima at veritasgenetics.com>
Date: Mon Jan 8 17:52:50 2018 -0300
12479: Removed plugin. Fixed onFocus() behavior on strict listings.
Arvados-DCO-1.1-Signed-off-by: Lucas Di Pentima <ldipentima at veritasgenetics.com>
diff --git a/apps/workbench/app/assets/javascripts/components/edit_tags.js b/apps/workbench/app/assets/javascripts/components/edit_tags.js
index 583047c..bea0697 100644
--- a/apps/workbench/app/assets/javascripts/components/edit_tags.js
+++ b/apps/workbench/app/assets/javascripts/components/edit_tags.js
@@ -2,60 +2,6 @@
//
// SPDX-License-Identifier: AGPL-3.0
-// Plugin taken from: https://gist.github.com/thiago-negri/132bf33b5312e2da823c
-// This behavior seems to be planned to be integrated on the next selectize release
-Selectize.define('no_results', function(options) {
- var self = this;
-
- options = $
- .extend({message: 'No results found.', html: function(data) {
- return ('<div class="selectize-dropdown ' + data.classNames + ' dropdown-empty-message">' + '<div class="selectize-dropdown-content" style="padding: 3px 12px">' + data.message + '</div>' + '</div>');
- }}, options);
-
- self.displayEmptyResultsMessage = function() {
- this.$empty_results_container.css('top', this.$control.outerHeight());
- this.$empty_results_container.css('width', this.$control.outerWidth());
- this.$empty_results_container.show();
- };
-
- self.on('type', function(str) {
- if (str && !self.hasOptions) {
- self.displayEmptyResultsMessage();
- } else {
- self.$empty_results_container.hide();
- }
- });
-
- self.onKeyDown = (function() {
- var original = self.onKeyDown;
-
- return function(e) {
- original.apply(self, arguments);
- this.$empty_results_container.hide();
- }
- })();
-
- self.onBlur = (function() {
- var original = self.onBlur;
-
- return function() {
- original.apply(self, arguments);
- this.$empty_results_container.hide();
- };
- })();
-
- self.setup = (function() {
- var original = self.setup;
- return function() {
- original.apply(self, arguments);
- self.$empty_results_container = $(options.html(
- $.extend({classNames: self.$input.attr('class')}, options)));
- self.$empty_results_container.insertBefore(self.$dropdown);
- self.$empty_results_container.hide();
- };
- })();
-});
-
window.SimpleInput = {
view: function(vnode) {
return m("input.form-control", {
@@ -83,10 +29,10 @@ window.SimpleInput = {
window.SelectOrAutocomplete = {
onFocus: function(vnode) {
// Allow the user to edit an already entered value by removing it
- // and filling the input field with the same text
+ // and filling the input field with the same text. (non-strict listings)
var activeSelect = vnode.state.selectized[0].selectize
value = activeSelect.getValue()
- if (value.length > 0) {
+ if (vnode.attrs.create && value.length > 0) {
activeSelect.clear(silent = true)
activeSelect.setTextboxValue(value)
}
@@ -102,7 +48,6 @@ window.SelectOrAutocomplete = {
},
oncreate: function(vnode) {
vnode.state.selectized = $(vnode.dom).selectize({
- plugins: ['no_results'],
labelField: 'value',
valueField: 'value',
searchField: 'value',
-----------------------------------------------------------------------
hooks/post-receive
--
More information about the arvados-commits
mailing list