-
Notifications
You must be signed in to change notification settings - Fork 2.7k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add umb-search-filter component (#8179)
- Loading branch information
Showing
6 changed files
with
142 additions
and
44 deletions.
There are no files selected for viewing
84 changes: 84 additions & 0 deletions
84
...Umbraco.Web.UI.Client/src/common/directives/components/forms/umbsearchfilter.directive.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /** | ||
| @ngdoc directive | ||
| @name umbraco.directives.directive:umbSearchFilter | ||
| @restrict E | ||
| @scope | ||
| @description | ||
| <b>Added in Umbraco version 8.7.0</b> Use this directive to render an umbraco search filter. | ||
| <h3>Markup example</h3> | ||
| <pre> | ||
| <div ng-controller="My.Controller as vm"> | ||
| <umb-search-filter | ||
| name="checkboxlist" | ||
| value="{{key}}" | ||
| model="true" | ||
| text="{{text}}"> | ||
| </umb-search-filter> | ||
| </div> | ||
| </pre> | ||
| @param {boolean} model Set to <code>true</code> or <code>false</code> to set the checkbox to checked or unchecked. | ||
| @param {string} inputId Set the <code>id</code> of the checkbox. | ||
| @param {string} text Set the text for the checkbox label. | ||
| @param {string} labelKey Set a dictinary/localization string for the checkbox label | ||
| @param {callback} onChange Callback when the value of the checkbox change by interaction. | ||
| @param {boolean} autoFocus Add autofocus to the input field | ||
| @param {boolean} preventSubmitOnEnter Set the enter prevent directive or not | ||
| **/ | ||
|
|
||
| (function () { | ||
| 'use strict'; | ||
|
|
||
| function UmbSearchFilterController($timeout, localizationService) { | ||
|
|
||
| var vm = this; | ||
|
|
||
| vm.$onInit = onInit; | ||
| vm.change = change; | ||
|
|
||
| function onInit() { | ||
| vm.inputId = vm.inputId || "umb-check_" + String.CreateGuid(); | ||
|
|
||
| // If a labelKey is passed let's update the returned text if it's does not contain an opening square bracket [ | ||
| if (vm.labelKey) { | ||
| localizationService.localize(vm.labelKey).then(function (data) { | ||
| if(data.indexOf('[') === -1){ | ||
| vm.text = data; | ||
| } | ||
| }); | ||
| } | ||
| } | ||
|
|
||
| function change() { | ||
| if (vm.onChange) { | ||
| $timeout(function () { | ||
| vm.onChange({ model: vm.model, value: vm.value }); | ||
| }, 0); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| var component = { | ||
| templateUrl: 'views/components/forms/umb-search-filter.html', | ||
| controller: UmbSearchFilterController, | ||
| controllerAs: 'vm', | ||
| transclude: true, | ||
| bindings: { | ||
| model: "=", | ||
| inputId: "@", | ||
| text: "@", | ||
| labelKey: "@?", | ||
| onChange: "&?", | ||
| autoFocus: "<?", | ||
| preventSubmitOnEnter: "<?" | ||
| } | ||
| }; | ||
|
|
||
| angular.module('umbraco.directives').component('umbSearchFilter', component); | ||
|
|
||
| })(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
28 changes: 28 additions & 0 deletions
28
src/Umbraco.Web.UI.Client/src/views/components/forms/umb-search-filter.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <div class="umb-control-group -no-border"> | ||
| <div class="form-search form-search-filter"> | ||
| <label for="{{vm.inputId}}" class="sr-only">{{vm.text}}</label> | ||
| <i class="icon-search" aria-hidden="true"></i> | ||
| <input | ||
| ng-if="vm.preventSubmitOnEnter" | ||
| id="{{vm.inputId}}" | ||
| type="text" | ||
| ng-change="vm.change()" | ||
| ng-model="vm.model" | ||
| class="umb-search-field search-query search-input input-block-level" | ||
| placeholder="{{vm.text}}" | ||
| umb-auto-focus="{{vm.autoFocus === true}}" | ||
| prevent-enter-submit | ||
| no-dirty-check /> | ||
|
|
||
| <input | ||
| ng-if="!vm.preventSubmitOnEnter" | ||
| id="{{vm.inputId}}" | ||
| type="text" | ||
| ng-change="vm.change()" | ||
| ng-model="vm.model" | ||
| class="umb-search-field search-query search-input input-block-level" | ||
| placeholder="{{vm.text}}" | ||
| umb-auto-focus="{{vm.autoFocus === true}}" | ||
| no-dirty-check /> | ||
| </div> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters