-
Notifications
You must be signed in to change notification settings - Fork 122
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #4139 from bbc/1443-add-keywords-uploadpage
- Loading branch information
Showing
10 changed files
with
375 additions
and
15 deletions.
There are no files selected for viewing
30 changes: 30 additions & 0 deletions
30
kahuna/public/js/components/gr-add-keyword/gr-add-keyword.css
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,30 @@ | ||
| gr-add-keyword{ | ||
| display: flex; | ||
| height: 25px; | ||
| margin-bottom: 2px; | ||
| } | ||
|
|
||
| gr-add-keyword:hover { | ||
| color: white; | ||
| } | ||
|
|
||
| gr-add-keyword .small { | ||
| border: none; | ||
| padding: 0; | ||
| } | ||
|
|
||
| .gr-add-keyword__form { | ||
| display: flex; | ||
| } | ||
|
|
||
| .gr-add-keyword__form__input { | ||
| width: 370px; | ||
| } | ||
|
|
||
| .gr-add-keyword__form__buttons { | ||
| display: flex; | ||
| } | ||
|
|
||
| .gr-add-keyword__form__buttons__button-cancel, .gr-add-keyword__form__buttons__button-save{ | ||
| margin-left: 5px; | ||
| } |
51 changes: 51 additions & 0 deletions
51
kahuna/public/js/components/gr-add-keyword/gr-add-keyword.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,51 @@ | ||
| <button data-cy="it-add-keyword-button" | ||
| ng-class="{'small': ctrl.grSmall}" | ||
| ng-click="ctrl.active = true" | ||
| ng-disabled="ctrl.adding" | ||
| ng-if="!ctrl.active" | ||
| gr-tooltip="Add keywords" | ||
| gr-tooltip-position="left" | ||
| aria-label="Add keywords to image"> | ||
|
|
||
| <gr-icon ng-class="{'spin': ctrl.adding}">add_box</gr-icon> | ||
| <span> | ||
| <span ng-show="ctrl.adding">Adding...</span> | ||
| </span> | ||
| </button> | ||
| <form class="gr-add-keyword__form" | ||
| ng-if="ctrl.active" | ||
| ng-submit="ctrl.save()"> | ||
| <gr-datalist | ||
| class="job-info--editor__input" | ||
| gr-search="ctrl.keywordSearch(q)"> | ||
|
|
||
| <input data-cy="keyword-input" | ||
| type="text" | ||
| class="text-input gr-add-keyword__form__input show-no-error" | ||
| placeholder="keyword1, keyword2, keyword3…" | ||
| gr-datalist-input | ||
| gr-datalist-input-on-cancel="ctrl.cancel()" | ||
| gr-datalist-input-selector="ctrl.selectLastKeyword($value)" | ||
| gr-datalist-input-updater="ctrl.keywordAppend($currentValue, $selectedValue)" | ||
| gr-auto-focus | ||
| required | ||
| ng-model="ctrl.newKeyword" | ||
| ng-disabled="ctrl.adding" /> | ||
| </gr-datalist> | ||
|
|
||
| <span class="gr-add-keyword__form__buttons"> | ||
| <button class="gr-add-keyword__form__buttons__button-cancel button-cancel" type="button" ng-click="ctrl.cancel()" title="Close"> | ||
| <gr-icon-label gr-icon="close"><span ng-hide="ctrl.grSmall">Cancel</span></gr-icon-label> | ||
| </button> | ||
| <button | ||
| data-cy="save-new-keyword-button" | ||
| class="gr-add-keyword__form__buttons__button-save button-save" | ||
| type="submit" | ||
| title="Save new keyword" | ||
| ng-disabled="ctrl.adding"> | ||
| <gr-icon-label gr-icon="check"> | ||
| <span ng-hide="ctrl.grSmall">Save</span> | ||
| </gr-icon-label> | ||
| </button> | ||
| </span> | ||
| </form> |
129 changes: 129 additions & 0 deletions
129
kahuna/public/js/components/gr-add-keyword/gr-add-keyword.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,129 @@ | ||
| import angular from 'angular'; | ||
|
|
||
| import '../../services/image-accessor'; | ||
| import '../../edits/service'; | ||
| import '../../forms/datalist'; | ||
|
|
||
| import './gr-add-keyword.css'; | ||
| import template from './gr-add-keyword.html'; | ||
|
|
||
| import '../../directives/gr-auto-focus'; | ||
| import {overwrite} from "../../util/constants/editOptions"; | ||
|
|
||
| export var addKeyword = angular.module('gr.addKeyword', [ | ||
| 'gr.image.service', | ||
| 'kahuna.edits.service', | ||
| 'gr.autoFocus', | ||
| 'kahuna.forms.datalist' | ||
| ]); | ||
|
|
||
| addKeyword.controller('GrAddKeywordCtrl', [ | ||
| '$window', '$scope', '$q', 'imageAccessor', 'editsService', | ||
| function ($window, $scope, $q, imageAccessor, editsService) { | ||
|
|
||
| let ctrl = this; | ||
| ctrl.active = false; | ||
| ctrl.descriptionOption = overwrite.key; | ||
|
|
||
| const updateImages = (images, metadataFieldName, valueFn) => { | ||
| let uptodateImages = []; | ||
| images.map((image) => { | ||
| editsService.batchUpdateMetadataField( | ||
| [image], | ||
| metadataFieldName, | ||
| valueFn(image), | ||
| ctrl.descriptionOption | ||
| ); | ||
|
|
||
| //-ensure metadata in image is up-to-date- | ||
| let tmpImages = $scope.$parent.ctrl.imageAsArray.filter(img => img.uri == image.uri); | ||
| if (tmpImages.length > 0) { | ||
| let uptodateImage = tmpImages[0]; | ||
| uptodateImage.data.metadata.keywords = valueFn(image); | ||
| uptodateImages.push(uptodateImage); | ||
| } | ||
| }); | ||
|
|
||
| return Promise.resolve(uptodateImages); | ||
| }; | ||
|
|
||
| const addXToImages = (metadataFieldName, accessor) => (images, addedX) => { | ||
| return updateImages( | ||
| images, | ||
| metadataFieldName, | ||
| (image) => { | ||
| const currentXInImage = accessor(image); | ||
| return currentXInImage ? [...currentXInImage, ...addedX] : [...addedX]; | ||
| } | ||
| ); | ||
| }; | ||
|
|
||
| ctrl.keywordAccessor = (image) => imageAccessor.readMetadata(image).keywords; | ||
| ctrl.addKeywordToImages = addXToImages('keywords', ctrl.keywordAccessor); | ||
|
|
||
| ctrl.save = () => { | ||
| let keywordList = ctrl.newKeyword.split(',').map(e => e.trim()); | ||
| let imageArray = $scope.$parent.ctrl.imageAsArray; | ||
|
|
||
| if (keywordList) { | ||
| save(keywordList, imageArray); | ||
| } | ||
| }; | ||
|
|
||
| ctrl.cancel = reset; | ||
|
|
||
| function save(keyword, imageArray) { | ||
| ctrl.adding = true; | ||
| ctrl.active = false; | ||
| ctrl.addKeywordToImages(imageArray, keyword) | ||
| .then(() => { | ||
| reset(); | ||
| }) | ||
| .catch(saveFailed) | ||
| .finally(() => ctrl.adding = false); | ||
| } | ||
|
|
||
| function saveFailed(e) { | ||
| console.error(e); | ||
| $window.alert('Something went wrong when saving, please try again!'); | ||
| ctrl.active = true; | ||
| } | ||
|
|
||
| function reset() { | ||
| ctrl.newKeyword = ''; | ||
| ctrl.active = false; | ||
| } | ||
|
|
||
| ctrl.keywordSearch = (q) => { | ||
| //-current search always resolves to empty but retained as possible extension point- | ||
| let a = q ? [] : []; | ||
| return $q.resolve(a); | ||
| }; | ||
|
|
||
| ctrl.keywordAppend = (currentVal, selectedVal) => { | ||
| const beforeLastComma = currentVal.split(/, ?/).slice(0, -1); | ||
| const fullText = beforeLastComma.concat(selectedVal); | ||
| return fullText.join(', '); | ||
| }; | ||
|
|
||
| ctrl.selectLastKeyword = (value) => { | ||
| const afterComma = value.split(',').slice(-1)[0].trim(); | ||
| return afterComma; | ||
| }; | ||
|
|
||
| } | ||
| ]); | ||
|
|
||
| addKeyword.directive('grAddKeyword', [function () { | ||
| return { | ||
| restrict: 'E', | ||
| scope: { | ||
| grSmall: '=?', | ||
| active: '=?' | ||
| }, | ||
| controller: 'GrAddKeywordCtrl', | ||
| controllerAs: 'ctrl', | ||
| bindToController: true, | ||
| template: template | ||
| }; | ||
| }]); |
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
Oops, something went wrong.