* [PATCH] toaster: disable/enable "Add layer" button according to input's content
@ 2016-03-30 9:10 Elliot Smith
2016-04-12 14:10 ` Joshua G Lock
0 siblings, 1 reply; 4+ messages in thread
From: Elliot Smith @ 2016-03-30 9:10 UTC (permalink / raw)
To: toaster
In the import layer page, the "Add layer" button in the layer dependencies
section doesn't accurately reflect whether the layer name in the
corresponding input can be added. A partial or empty layer name can
leave the button active, such that when it is clicked, a
previously-selected layer can be accidentally added.
Fix by keeping track of the items currently available in the typeahead,
only activating the "Add layer" button when the input matches the name
of one of those items.
[YOCTO #8511]
Signed-off-by: Elliot Smith <elliot.smith@intel.com>
---
.../toaster/toastergui/static/js/importlayer.js | 30 +++++++++++++++++++++-
.../lib/toaster/toastergui/static/js/libtoaster.js | 5 ++++
2 files changed, 34 insertions(+), 1 deletion(-)
diff --git a/bitbake/lib/toaster/toastergui/static/js/importlayer.js b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
index c68f366..5a59799 100644
--- a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
+++ b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
@@ -18,10 +18,38 @@ function importLayerPageInit (ctx) {
libtoaster.makeTypeahead(layerDepInput, libtoaster.ctx.layersTypeAheadUrl, { include_added: "true" }, function(item){
currentLayerDepSelection = item;
+ });
+
+ // choices available in the typeahead
+ var layerDepsChoices = {};
+
+ // when the typeahead choices change, store an array of the available layer
+ // choices locally, to use for enabling/disabling the "Add layer" button
+ layerDepInput.on("typeahead-choices-change", function (event, data) {
+ layerDepsChoices = {};
- layerDepBtn.removeAttr("disabled");
+ if (data.choices) {
+ data.choices.forEach(function (item) {
+ layerDepsChoices[item.name] = item;
+ });
+ }
});
+ // disable the "Add layer" button when the layer input typeahead is empty
+ // or not in the typeahead choices
+ layerDepInput.on("input change", function () {
+ // get the choices from the typeahead
+ var choice = layerDepsChoices[$(this).val()];
+
+ if (choice) {
+ layerDepBtn.removeAttr("disabled");
+ currentLayerDepSelection = choice;
+ }
+ else {
+ layerDepBtn.attr("disabled", "disabled");
+ currentLayerDepSelection = undefined;
+ }
+ });
/* We automatically add "openembedded-core" layer for convenience as a
* dependency as pretty much all layers depend on this one
diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
index b6b49b6..0e81f67 100644
--- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
+++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
@@ -21,6 +21,9 @@ var libtoaster = (function (){
var xhrReq;
jQElement.typeahead({
+ // each time the typeahead's choices change, a
+ // "typeahead-choices-change" event is fired with an object
+ // containing the available choices in a "choices" property
source: function(query, process){
xhrParams.search = query;
@@ -36,6 +39,8 @@ var libtoaster = (function (){
xhrReq = null;
+ jQElement.trigger("typeahead-choices-change", {choices: data.results});
+
return process(data.results);
});
},
--
1.9.3
---------------------------------------------------------------------
Intel Corporation (UK) Limited
Registered No. 1134945 (England)
Registered Office: Pipers Way, Swindon SN3 1RJ
VAT No: 860 2173 47
This e-mail and any attachments may contain confidential material for
the sole use of the intended recipient(s). Any review or distribution
by others is strictly prohibited. If you are not the intended
recipient, please contact the sender and delete all copies.
^ permalink raw reply related [flat|nested] 4+ messages in thread* Re: [PATCH] toaster: disable/enable "Add layer" button according to input's content
2016-03-30 9:10 [PATCH] toaster: disable/enable "Add layer" button according to input's content Elliot Smith
@ 2016-04-12 14:10 ` Joshua G Lock
2016-04-12 14:23 ` Smith, Elliot
0 siblings, 1 reply; 4+ messages in thread
From: Joshua G Lock @ 2016-04-12 14:10 UTC (permalink / raw)
To: Elliot Smith, toaster
Hi Elliot,
On Wed, 2016-03-30 at 10:10 +0100, Elliot Smith wrote:
> In the import layer page, the "Add layer" button in the layer
> dependencies
> section doesn't accurately reflect whether the layer name in the
> corresponding input can be added. A partial or empty layer name can
> leave the button active, such that when it is clicked, a
> previously-selected layer can be accidentally added.
>
> Fix by keeping track of the items currently available in the
> typeahead,
> only activating the "Add layer" button when the input matches the
> name
> of one of those items.
I tried your patch out and it seems to work nicely.
The only minor surprise is that if I select a matched layer from the
typeahead, then change my mind and begin deleting that layer text the
Add button remains active (with the same selection) until I've
completely deleted from the layer name field.
Is it possible to unselect from the typeahead when deletion begins?
Regards,
Joshua
>
> [YOCTO #8511]
>
> Signed-off-by: Elliot Smith <elliot.smith@intel.com>
> ---
> .../toaster/toastergui/static/js/importlayer.js | 30
> +++++++++++++++++++++-
> .../lib/toaster/toastergui/static/js/libtoaster.js | 5 ++++
> 2 files changed, 34 insertions(+), 1 deletion(-)
>
> diff --git a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> index c68f366..5a59799 100644
> --- a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> +++ b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> @@ -18,10 +18,38 @@ function importLayerPageInit (ctx) {
>
> libtoaster.makeTypeahead(layerDepInput,
> libtoaster.ctx.layersTypeAheadUrl, { include_added: "true" },
> function(item){
> currentLayerDepSelection = item;
> + });
> +
> + // choices available in the typeahead
> + var layerDepsChoices = {};
> +
> + // when the typeahead choices change, store an array of the
> available layer
> + // choices locally, to use for enabling/disabling the "Add layer"
> button
> + layerDepInput.on("typeahead-choices-change", function (event,
> data) {
> + layerDepsChoices = {};
>
> - layerDepBtn.removeAttr("disabled");
> + if (data.choices) {
> + data.choices.forEach(function (item) {
> + layerDepsChoices[item.name] = item;
> + });
> + }
> });
>
> + // disable the "Add layer" button when the layer input typeahead
> is empty
> + // or not in the typeahead choices
> + layerDepInput.on("input change", function () {
> + // get the choices from the typeahead
> + var choice = layerDepsChoices[$(this).val()];
> +
> + if (choice) {
> + layerDepBtn.removeAttr("disabled");
> + currentLayerDepSelection = choice;
> + }
> + else {
> + layerDepBtn.attr("disabled", "disabled");
> + currentLayerDepSelection = undefined;
> + }
> + });
>
> /* We automatically add "openembedded-core" layer for convenience
> as a
> * dependency as pretty much all layers depend on this one
> diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> index b6b49b6..0e81f67 100644
> --- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> +++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> @@ -21,6 +21,9 @@ var libtoaster = (function (){
> var xhrReq;
>
> jQElement.typeahead({
> + // each time the typeahead's choices change, a
> + // "typeahead-choices-change" event is fired with an object
> + // containing the available choices in a "choices" property
> source: function(query, process){
> xhrParams.search = query;
>
> @@ -36,6 +39,8 @@ var libtoaster = (function (){
>
> xhrReq = null;
>
> + jQElement.trigger("typeahead-choices-change", {choices:
> data.results});
> +
> return process(data.results);
> });
> },
> --
> 1.9.3
>
> ---------------------------------------------------------------------
> Intel Corporation (UK) Limited
> Registered No. 1134945 (England)
> Registered Office: Pipers Way, Swindon SN3 1RJ
> VAT No: 860 2173 47
>
> This e-mail and any attachments may contain confidential material for
> the sole use of the intended recipient(s). Any review or distribution
> by others is strictly prohibited. If you are not the intended
> recipient, please contact the sender and delete all copies.
>
^ permalink raw reply [flat|nested] 4+ messages in thread* Re: [PATCH] toaster: disable/enable "Add layer" button according to input's content
2016-04-12 14:10 ` Joshua G Lock
@ 2016-04-12 14:23 ` Smith, Elliot
2016-04-19 16:32 ` Michael Wood
0 siblings, 1 reply; 4+ messages in thread
From: Smith, Elliot @ 2016-04-12 14:23 UTC (permalink / raw)
To: Joshua G Lock; +Cc: toaster
[-- Attachment #1: Type: text/plain, Size: 5256 bytes --]
Thanks for the review.
Yes, that should be possible.
Note that I have to rework this a bit anyway because of the bootstrap 3
changes, which will have an impact on it. It might be best to hold off from
sending this patch upstream until those changes are done.
Elliot
On 12 April 2016 at 15:10, Joshua G Lock <joshua.g.lock@linux.intel.com>
wrote:
> Hi Elliot,
>
> On Wed, 2016-03-30 at 10:10 +0100, Elliot Smith wrote:
> > In the import layer page, the "Add layer" button in the layer
> > dependencies
> > section doesn't accurately reflect whether the layer name in the
> > corresponding input can be added. A partial or empty layer name can
> > leave the button active, such that when it is clicked, a
> > previously-selected layer can be accidentally added.
> >
> > Fix by keeping track of the items currently available in the
> > typeahead,
> > only activating the "Add layer" button when the input matches the
> > name
> > of one of those items.
>
> I tried your patch out and it seems to work nicely.
>
> The only minor surprise is that if I select a matched layer from the
> typeahead, then change my mind and begin deleting that layer text the
> Add button remains active (with the same selection) until I've
> completely deleted from the layer name field.
>
> Is it possible to unselect from the typeahead when deletion begins?
>
> Regards,
>
> Joshua
>
> >
> > [YOCTO #8511]
> >
> > Signed-off-by: Elliot Smith <elliot.smith@intel.com>
> > ---
> > .../toaster/toastergui/static/js/importlayer.js | 30
> > +++++++++++++++++++++-
> > .../lib/toaster/toastergui/static/js/libtoaster.js | 5 ++++
> > 2 files changed, 34 insertions(+), 1 deletion(-)
> >
> > diff --git a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> > b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> > index c68f366..5a59799 100644
> > --- a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> > +++ b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> > @@ -18,10 +18,38 @@ function importLayerPageInit (ctx) {
> >
> > libtoaster.makeTypeahead(layerDepInput,
> > libtoaster.ctx.layersTypeAheadUrl, { include_added: "true" },
> > function(item){
> > currentLayerDepSelection = item;
> > + });
> > +
> > + // choices available in the typeahead
> > + var layerDepsChoices = {};
> > +
> > + // when the typeahead choices change, store an array of the
> > available layer
> > + // choices locally, to use for enabling/disabling the "Add layer"
> > button
> > + layerDepInput.on("typeahead-choices-change", function (event,
> > data) {
> > + layerDepsChoices = {};
> >
> > - layerDepBtn.removeAttr("disabled");
> > + if (data.choices) {
> > + data.choices.forEach(function (item) {
> > + layerDepsChoices[item.name] = item;
> > + });
> > + }
> > });
> >
> > + // disable the "Add layer" button when the layer input typeahead
> > is empty
> > + // or not in the typeahead choices
> > + layerDepInput.on("input change", function () {
> > + // get the choices from the typeahead
> > + var choice = layerDepsChoices[$(this).val()];
> > +
> > + if (choice) {
> > + layerDepBtn.removeAttr("disabled");
> > + currentLayerDepSelection = choice;
> > + }
> > + else {
> > + layerDepBtn.attr("disabled", "disabled");
> > + currentLayerDepSelection = undefined;
> > + }
> > + });
> >
> > /* We automatically add "openembedded-core" layer for convenience
> > as a
> > * dependency as pretty much all layers depend on this one
> > diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> > b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> > index b6b49b6..0e81f67 100644
> > --- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> > +++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> > @@ -21,6 +21,9 @@ var libtoaster = (function (){
> > var xhrReq;
> >
> > jQElement.typeahead({
> > + // each time the typeahead's choices change, a
> > + // "typeahead-choices-change" event is fired with an object
> > + // containing the available choices in a "choices" property
> > source: function(query, process){
> > xhrParams.search = query;
> >
> > @@ -36,6 +39,8 @@ var libtoaster = (function (){
> >
> > xhrReq = null;
> >
> > + jQElement.trigger("typeahead-choices-change", {choices:
> > data.results});
> > +
> > return process(data.results);
> > });
> > },
> > --
> > 1.9.3
> >
> > ---------------------------------------------------------------------
> > Intel Corporation (UK) Limited
> > Registered No. 1134945 (England)
> > Registered Office: Pipers Way, Swindon SN3 1RJ
> > VAT No: 860 2173 47
> >
> > This e-mail and any attachments may contain confidential material for
> > the sole use of the intended recipient(s). Any review or distribution
> > by others is strictly prohibited. If you are not the intended
> > recipient, please contact the sender and delete all copies.
> >
>
--
Elliot Smith
Software Engineer
Intel Open Source Technology Centre
[-- Attachment #2: Type: text/html, Size: 6935 bytes --]
^ permalink raw reply [flat|nested] 4+ messages in thread* Re: [PATCH] toaster: disable/enable "Add layer" button according to input's content
2016-04-12 14:23 ` Smith, Elliot
@ 2016-04-19 16:32 ` Michael Wood
0 siblings, 0 replies; 4+ messages in thread
From: Michael Wood @ 2016-04-19 16:32 UTC (permalink / raw)
To: toaster
Sent to bitbake-devel and added to toaster-next
Thanks,
Michael
On 12/04/16 15:23, Smith, Elliot wrote:
> Thanks for the review.
>
> Yes, that should be possible.
>
> Note that I have to rework this a bit anyway because of the bootstrap
> 3 changes, which will have an impact on it. It might be best to hold
> off from sending this patch upstream until those changes are done.
>
> Elliot
>
> On 12 April 2016 at 15:10, Joshua G Lock
> <joshua.g.lock@linux.intel.com <mailto:joshua.g.lock@linux.intel.com>>
> wrote:
>
> Hi Elliot,
>
> On Wed, 2016-03-30 at 10:10 +0100, Elliot Smith wrote:
> > In the import layer page, the "Add layer" button in the layer
> > dependencies
> > section doesn't accurately reflect whether the layer name in the
> > corresponding input can be added. A partial or empty layer name can
> > leave the button active, such that when it is clicked, a
> > previously-selected layer can be accidentally added.
> >
> > Fix by keeping track of the items currently available in the
> > typeahead,
> > only activating the "Add layer" button when the input matches the
> > name
> > of one of those items.
>
> I tried your patch out and it seems to work nicely.
>
> The only minor surprise is that if I select a matched layer from the
> typeahead, then change my mind and begin deleting that layer text the
> Add button remains active (with the same selection) until I've
> completely deleted from the layer name field.
>
> Is it possible to unselect from the typeahead when deletion begins?
>
> Regards,
>
> Joshua
>
> >
> > [YOCTO #8511]
> >
> > Signed-off-by: Elliot Smith <elliot.smith@intel.com
> <mailto:elliot.smith@intel.com>>
> > ---
> > .../toaster/toastergui/static/js/importlayer.js | 30
> > +++++++++++++++++++++-
> > .../lib/toaster/toastergui/static/js/libtoaster.js | 5 ++++
> > 2 files changed, 34 insertions(+), 1 deletion(-)
> >
> > diff --git a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> > b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> > index c68f366..5a59799 100644
> > --- a/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> > +++ b/bitbake/lib/toaster/toastergui/static/js/importlayer.js
> > @@ -18,10 +18,38 @@ function importLayerPageInit (ctx) {
> >
> > libtoaster.makeTypeahead(layerDepInput,
> > libtoaster.ctx.layersTypeAheadUrl, { include_added: "true" },
> > function(item){
> > currentLayerDepSelection = item;
> > + });
> > +
> > + // choices available in the typeahead
> > + var layerDepsChoices = {};
> > +
> > + // when the typeahead choices change, store an array of the
> > available layer
> > + // choices locally, to use for enabling/disabling the "Add layer"
> > button
> > + layerDepInput.on("typeahead-choices-change", function (event,
> > data) {
> > + layerDepsChoices = {};
> >
> > - layerDepBtn.removeAttr("disabled");
> > + if (data.choices) {
> > + data.choices.forEach(function (item) {
> > + layerDepsChoices[item.name <http://item.name>] = item;
> > + });
> > + }
> > });
> >
> > + // disable the "Add layer" button when the layer input typeahead
> > is empty
> > + // or not in the typeahead choices
> > + layerDepInput.on("input change", function () {
> > + // get the choices from the typeahead
> > + var choice = layerDepsChoices[$(this).val()];
> > +
> > + if (choice) {
> > + layerDepBtn.removeAttr("disabled");
> > + currentLayerDepSelection = choice;
> > + }
> > + else {
> > + layerDepBtn.attr("disabled", "disabled");
> > + currentLayerDepSelection = undefined;
> > + }
> > + });
> >
> > /* We automatically add "openembedded-core" layer for convenience
> > as a
> > * dependency as pretty much all layers depend on this one
> > diff --git a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> > b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> > index b6b49b6..0e81f67 100644
> > --- a/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> > +++ b/bitbake/lib/toaster/toastergui/static/js/libtoaster.js
> > @@ -21,6 +21,9 @@ var libtoaster = (function (){
> > var xhrReq;
> >
> > jQElement.typeahead({
> > + // each time the typeahead's choices change, a
> > + // "typeahead-choices-change" event is fired with an object
> > + // containing the available choices in a "choices" property
> > source: function(query, process){
> > xhrParams.search = query;
> >
> > @@ -36,6 +39,8 @@ var libtoaster = (function (){
> >
> > xhrReq = null;
> >
> > + jQElement.trigger("typeahead-choices-change", {choices:
> > data.results});
> > +
> > return process(data.results);
> > });
> > },
> > --
> > 1.9.3
> >
> >
> ---------------------------------------------------------------------
> > Intel Corporation (UK) Limited
> > Registered No. 1134945 (England)
> > Registered Office: Pipers Way, Swindon SN3 1RJ
> > VAT No: 860 2173 47
> >
> > This e-mail and any attachments may contain confidential
> material for
> > the sole use of the intended recipient(s). Any review or
> distribution
> > by others is strictly prohibited. If you are not the intended
> > recipient, please contact the sender and delete all copies.
> >
>
>
>
>
> --
> Elliot Smith
> Software Engineer
> Intel Open Source Technology Centre
>
>
^ permalink raw reply [flat|nested] 4+ messages in thread
end of thread, other threads:[~2016-04-19 16:32 UTC | newest]
Thread overview: 4+ messages (download: mbox.gz follow: Atom feed
-- links below jump to the message on this page --
2016-03-30 9:10 [PATCH] toaster: disable/enable "Add layer" button according to input's content Elliot Smith
2016-04-12 14:10 ` Joshua G Lock
2016-04-12 14:23 ` Smith, Elliot
2016-04-19 16:32 ` Michael Wood
This is an external index of several public inboxes,
see mirroring instructions on how to clone and mirror
all data and code used by this external index.