-
Notifications
You must be signed in to change notification settings - Fork 51
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
PT-14783: Refactor attach image url (#714)
feat: Refactored the attachment of image URLs. Extracted "add external link" functionality to a separate interface. Introduced the catalog:add-external-image permission, providing access control for this feature. Only HTTPS links are now allowed for image attachments, prioritizing security.
- Loading branch information
Showing
9 changed files
with
226 additions
and
99 deletions.
There are no files selected for viewing
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
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
87 changes: 87 additions & 0 deletions
87
src/VirtoCommerce.CatalogModule.Web/Scripts/blades/images-add-external-link.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,87 @@ | ||
| angular.module('virtoCommerce.catalogModule') | ||
| .controller('virtoCommerce.catalogModule.imagesAddExternalLinkController', | ||
| ['$scope', '$translate', 'platformWebApp.bladeNavigationService', 'platformWebApp.settings', | ||
| function ($scope, $translate, bladeNavigationService, settings) { | ||
| var blade = $scope.blade; | ||
|
|
||
| blade.headIcon = 'fa fa-external-link'; | ||
|
|
||
| $scope.isValid = false; | ||
| blade.isLoading = false; | ||
|
|
||
| blade.refresh = function (item) { | ||
| initialize(item); | ||
| } | ||
|
|
||
| var promise = settings.getValues({ id: 'VirtoCommerce.Core.General.Languages' }).$promise; | ||
|
|
||
| $scope.languages = []; | ||
| function initialize(item) { | ||
| promise.then(function (promiseData) { | ||
| $scope.languages = promiseData; | ||
| }); | ||
|
|
||
| blade.item = item; | ||
| blade.title = 'catalog.blades.image-add-external-link.title'; | ||
| $scope.imageTypes = settings.getValues({ id: 'Catalog.ImageCategories' }); | ||
|
|
||
| blade.currentEntities = []; | ||
| } | ||
|
|
||
| $scope.addImageFromUrlHandler = function () { | ||
| $scope.isValid = true; | ||
|
|
||
| var image = { | ||
| isImage: true, | ||
| group: blade.imageType, | ||
| url: blade.newExternalImageUrl, | ||
| name: blade.newExternalImageUrl.split('/').pop(), | ||
| relativeUrl: blade.newExternalImageUrl | ||
| }; | ||
| blade.currentEntities.push(image); | ||
| }; | ||
|
|
||
| $scope.saveChanges = function () { | ||
| if (blade.onSelect) { | ||
| _.each(blade.currentEntities, function (entity) { | ||
| entity.languageCode = blade.selectedLanguageCode; | ||
| }); | ||
| blade.onSelect(blade.currentEntities); | ||
| } | ||
|
|
||
| $scope.bladeClose(); | ||
| }; | ||
|
|
||
| $scope.toggleImageSelect = function (e, image) { | ||
| if (e.ctrlKey == 1) { | ||
| image.$selected = !image.$selected; | ||
| } else { | ||
| if (image.$selected) { | ||
| image.$selected = false; | ||
| } else { | ||
| image.$selected = true; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| $scope.copyUrl = function (data) { | ||
| $translate('catalog.blades.images.labels.copy-url-prompt').then(function (promptMessage) { | ||
| window.prompt(promptMessage, data.url); | ||
| }); | ||
| } | ||
|
|
||
| $scope.openDictionarySettingManagement = function () { | ||
| var newBlade = { | ||
| id: 'settingDetailChild', | ||
| isApiSave: true, | ||
| currentEntityId: 'Catalog.ImageCategories', | ||
| parentRefresh: function (data) { $scope.imageTypes = data; }, | ||
| controller: 'platformWebApp.settingDictionaryController', | ||
| template: '$(Platform)/Scripts/app/settings/blades/setting-dictionary.tpl.html' | ||
| }; | ||
| bladeNavigationService.showBlade(newBlade, blade); | ||
| }; | ||
|
|
||
| initialize(blade.item); | ||
|
|
||
| }]); |
78 changes: 78 additions & 0 deletions
78
src/VirtoCommerce.CatalogModule.Web/Scripts/blades/images-add-external-link.tpl.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,78 @@ | ||
| <div class="blade-static __bottom" ng-include="'Modules/$(VirtoCommerce.Catalog)/Scripts/blades/common/templates/ok-cancel.tpl.html'"></div> | ||
| <div class="blade-content"> | ||
| <div class="blade-inner"> | ||
| <div class="inner-block"> | ||
| <form class="form" name="uploadForm"> | ||
| <div class="sub-t">{{ 'catalog.blades.images.labels.select-image-category' | translate }}</div> | ||
| <div class="columns clearfix"> | ||
| <div class="column"> | ||
| <div class="form-group"> | ||
| <label class="form-label">{{ 'catalog.blades.images.labels.image-category' | translate }} <a href="" ng-click="openDictionarySettingManagement()" class="form-edit" va-permission="catalog:imagetypes"><i class="form-ico fa fa-pencil"></i></a></label> | ||
| <div class="form-input"> | ||
| <ui-select ng-model="blade.imageType" on-select="changeImageCategory($item, $model)"> | ||
| <ui-select-match allow-clear="true" placeholder="{{ 'catalog.blades.images.placeholders.image-category' | translate }}">{{$select.selected}}</ui-select-match> | ||
| <ui-select-choices repeat="x in imageTypes | filter: $select.search"> | ||
| <span ng-bind-html="x | highlight: $select.search"></span> | ||
| </ui-select-choices> | ||
| </ui-select> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| <div class="column"> | ||
| <div class="form-group"> | ||
| <label class="form-label">{{ 'catalog.blades.images.labels.language' | translate }}</label> | ||
| <div class="form-input"> | ||
| <ui-select ng-model="blade.selectedLanguageCode" ng-disabled="disabled"> | ||
| <ui-select-match allow-clear placeholder="{{'catalog.blades.images.placeholders.language' | translate}}">{{$select.selected}}</ui-select-match> | ||
| <ui-select-choices repeat="x in languages | filter: $select.search"> | ||
| <span ng-bind-html="x | highlight: $select.search"></span> | ||
| </ui-select-choices> | ||
| </ui-select> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="sub-t">{{ 'catalog.blades.images.labels.external-link' | translate }}</div> | ||
|
|
||
| <div class="columns"> | ||
| <div class="column"> | ||
| <div class="form-group"> | ||
| <div class="__info list"> | ||
| <div class="list-descr">{{ 'catalog.blades.images.descr.external-link' | translate }}</div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div class="form-input __file form-group"> | ||
| <input ng-model="blade.newExternalImageUrl" required pattern="^https:\/\/.*$" placeholder="{{ 'catalog.blades.images.placeholders.image-url' | translate }}" tabindex="-1"> | ||
| <button class="btn __file" type="button" ng-click="addImageFromUrlHandler()" title="Add image by URL"> | ||
| <i class="btn-ico fas fa-plus"></i> | ||
| </button> | ||
| <div class="__info list"> | ||
| <div class="list-descr">{{ 'catalog.blades.images.descr.external-link-warning' | translate }}</div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <div ng-show="uploader.isUploading"> | ||
| <div class="sub-t">{{ 'catalog.blades.images.labels.progress' | translate }}</div> | ||
| <div class="progress-bar __aqua" ng-style="{'width': uploader.progress + '%'}"></div> | ||
| </div> | ||
|
|
||
| <!-- preview --> | ||
| <div class="sub-t" ng-show="blade.currentEntities.length">{{ 'catalog.blades.images.labels.preview' | translate }}</div> | ||
| <div class="tile-group triple __images-list"> | ||
| <div class="tile" ng-repeat="image in blade.currentEntities" ng-include="'imageTemplate.html'"></div> | ||
| </div> | ||
|
|
||
| </form> | ||
|
|
||
|
|
||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| <script type="text/ng-template" id="imageTemplate.html"> | ||
| <img class="tile-img" ng-src="{{image.url ? image.url : ''}}"> | ||
| </script> |
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.