From 468a58013554a5c658563cc1080c475dd5fb69e8 Mon Sep 17 00:00:00 2001 From: kornosaurus Date: Fri, 18 Mar 2016 09:41:53 +0100 Subject: [PATCH 1/3] Support for placeholder key on select type --- examples/data/titlemaps.json | 2 ++ src/bootstrap-decorator.js | 26 +++++++++++++++++++++++++- 2 files changed, 27 insertions(+), 1 deletion(-) diff --git a/examples/data/titlemaps.json b/examples/data/titlemaps.json index e56cc5f..cd99411 100644 --- a/examples/data/titlemaps.json +++ b/examples/data/titlemaps.json @@ -51,6 +51,7 @@ { "key": "select2", "type": "select", + "placeholder": "Please choose", "titleMap": { "a": "A", "b": "B", @@ -60,6 +61,7 @@ { "key": "noenum", "type": "select", + "placeholder": "Please choose", "titleMap": [ { "value":"a", "name": "A" }, { "value":"b", "name":"B" }, diff --git a/src/bootstrap-decorator.js b/src/bootstrap-decorator.js index 8c20653..37ae763 100644 --- a/src/bootstrap-decorator.js +++ b/src/bootstrap-decorator.js @@ -28,6 +28,30 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) { } }; + var selectPlaceholder = function(args) { + if (args.form.placeholder) { + var selectBox = args.fieldFrag.querySelector('select'); + var option = document.createElement('option'); + option.setAttribute('value', ''); + + // We only want the placeholder to show when we do not have a value on the model. + // We make ngModel builder replace all so we can use $$value$$. + option.setAttribute('sf-field-model', 'replaceAll'); + + // https://github.com/angular/angular.js/issues/12190#issuecomment-115277040 + // emptyOption.attr('selected', true) does not like the ng-if comment. + if (angular.version.major === 1 && angular.version.minor < 4) { + option.setAttribute('ng-if', '!$$value$$'); + } else { + option.setAttribute('ng-show', '!$$value$$'); + } + + option.textContent = args.form.placeholder; + + selectBox.appendChild(option); + } + }; + var defaults = [sfField, ngModel, ngModelOptions, condition]; decoratorsProvider.defineDecorator('bootstrapDecorator', { textarea: {template: base + 'textarea.html', builder: defaults}, @@ -38,7 +62,7 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) { section: {template: base + 'section.html', builder: [sfField, simpleTransclusion, condition]}, conditional: {template: base + 'section.html', builder: [sfField, simpleTransclusion, condition]}, actions: {template: base + 'actions.html', builder: defaults}, - select: {template: base + 'select.html', builder: defaults}, + select: {template: base + 'select.html', builder: [selectPlaceholder, sfField, ngModel, ngModelOptions, condition]}, checkbox: {template: base + 'checkbox.html', builder: defaults}, checkboxes: {template: base + 'checkboxes.html', builder: [sfField, ngModelOptions, ngModel, array, condition]}, number: {template: base + 'default.html', builder: defaults}, From 496932ff751ed26e52b207e9ac09f9a3da00c556 Mon Sep 17 00:00:00 2001 From: kornosaurus Date: Fri, 18 Mar 2016 09:50:04 +0100 Subject: [PATCH 2/3] Better comments inside selectPlaceholder builder --- src/bootstrap-decorator.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/bootstrap-decorator.js b/src/bootstrap-decorator.js index 37ae763..564458c 100644 --- a/src/bootstrap-decorator.js +++ b/src/bootstrap-decorator.js @@ -34,12 +34,15 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) { var option = document.createElement('option'); option.setAttribute('value', ''); - // We only want the placeholder to show when we do not have a value on the model. - // We make ngModel builder replace all so we can use $$value$$. + /* We only want the placeholder to show when we do not have a value on the model. + * We make ngModel builder replace all so we can use $$value$$. + */ option.setAttribute('sf-field-model', 'replaceAll'); - // https://github.com/angular/angular.js/issues/12190#issuecomment-115277040 - // emptyOption.attr('selected', true) does not like the ng-if comment. + /* https://github.com/angular/angular.js/issues/12190#issuecomment-115277040 + * angular > 1.4 does a emptyOption.attr('selected', true) + * which does not like the ng-if comment. + */ if (angular.version.major === 1 && angular.version.minor < 4) { option.setAttribute('ng-if', '!$$value$$'); } else { From 7c8e25dae859117b0fddfaa7ed5a27ddeb7d389d Mon Sep 17 00:00:00 2001 From: kornosaurus Date: Mon, 21 Mar 2016 13:20:09 +0100 Subject: [PATCH 3/3] $$value$$ could be something other than a string, like a boolean.. so we need to check if $$value$$ is undefined instead --- src/bootstrap-decorator.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/bootstrap-decorator.js b/src/bootstrap-decorator.js index 564458c..4f9ee32 100644 --- a/src/bootstrap-decorator.js +++ b/src/bootstrap-decorator.js @@ -44,9 +44,9 @@ function(decoratorsProvider, sfBuilderProvider, sfPathProvider) { * which does not like the ng-if comment. */ if (angular.version.major === 1 && angular.version.minor < 4) { - option.setAttribute('ng-if', '!$$value$$'); + option.setAttribute('ng-if', '$$value$$ === undefined'); } else { - option.setAttribute('ng-show', '!$$value$$'); + option.setAttribute('ng-show', '$$value$$ === undefined'); } option.textContent = args.form.placeholder;