superdesk/superdesk-client-core

View on GitHub
scripts/apps/authoring/views/change-image.html

Summary

Maintainability
Test Coverage
<div class="modal__header modal__header--flex" data-test-id="change-image" data-theme="dark-ui">
    <h3 class="modal__heading modal__heading--no-grow" ng-if="!nav || nav === 'view'">{{ :: activity.label}}</h3>
    <h3 class="modal__heading modal__heading--no-grow" ng-if="nav === 'image-edit'">{{ :: 'Edit image' | translate }}</h3>
    <h3 class="modal__heading modal__heading--no-grow" ng-if="nav === 'crop'">{{ :: 'Edit Crops' | translate }}</h3>

    <div class="modal__header-buttons  modal__header-buttons--center modal__header-element-grow button-nav">
        <button class="button-nav__btn" ng-click="nav = 'view'; toggleShowMetadata(true)" ng-class="{'button-nav__btn--active' : !nav || nav === 'view'}" ng-show="tabs.includes('view')" ng-disabled="!isDoneEnabled()" translate>Details / Metadata</button>
        <button class="button-nav__btn" ng-click="nav = 'image-edit'; toggleShowMetadata(true)" ng-show="data.editable && tabs.includes('image-edit')" ng-class="{'button-nav__btn--active': nav === 'image-edit'}" ng-disabled="!isDoneEnabled()" translate>Edit image</button>
        <button class="button-nav__btn" ng-click="nav = 'crop'; toggleShowMetadata(false)" ng-show="data.editable && tabs.includes('crop')" ng-class="{'button-nav__btn--active': nav === 'crop'}" ng-disabled="!isDoneEnabled()" translate>Edit crops</button>
    </div>

    <div class="modal__header-buttons modal__header-buttons--right">
        <button
            class="btn btn--primary btn--hollow"
            ng-click="done()" ng-disabled="!isDoneEnabled() || isAoISelectionModeEnabled"
            translate
            data-test-id="done"
        >Done</button>
    </div>
</div>

<div class="modal__body modal__body--no-padding" data-theme="dark-ui">
    <div ng-if="loading" class="sd-loader"></div>
    <div class="sd-column-box--2">
        <div class="sd-column-box__main-column sd-column-box__main-column--photo-preview" ng-class="{'toolbar-offset': crops.isDirty, 'sd-column-box__main-column--expanded' : !showMetadata}">
            <a class="sd-photo-preview__slide-in-button" ng-show="!showMetadata && nav !== 'crop'" ng-click="toggleShowMetadata(true)" sd-tooltip="{{'Open metadata' | translate}}" flow="left">
                <i class="icon-backward-thin"></i>
            </a>
            <div ng-if="!nav || nav === 'view'">
                <div class="sd-photo-preview" ng-if="data.item.type === 'picture' || data.item.type === 'image'">
                    <div class="sd-photo-preview__image">
                        <img ng-src="{{data.item.renditions.original.href}}">
                    </div>
                </div>
                <div class="sd-photo-preview" ng-if="data.item.type === 'audio'">
                    <div class="sd-photo-preview__image">
                        <audio controls ng-src="{{data.item.renditions.original.href}}"></audio>
                    </div>
                </div>
                <div class="sd-photo-preview sd-photo-preview--view-video" ng-if="data.item.type === 'video'">
                    <div class="sd-photo-preview__video">
                        <div class="sd-photo-preview__video-inner">
                            <div class="sd-photo-preview__video-container">
                                <sd-video item="data.item"></sd-video>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="sd-photo-preview sd-photo-preview__edit-mode" ng-if="nav === 'image-edit'">
                <div class="sd-photo-preview__image sd-photo-preview__image--no-flex" ng-class="{'actioning': loaderForAoI || loaderForMediaEdit}">

                    <div sd-image-crop
                         data-show-min-size-error="true"
                         data-src="data.item.renditions.viewImage.href"
                         data-original="data.item.renditions.original"
                         data-crop-data="areaOfInterestData"
                         data-on-change="enableSaveAreaOfInterest()"
                         ng-if="isAoISelectionModeEnabled && !loaderForAoI">
                    </div>

                    <sd-image-modify
                        data-src="data.item.renditions.original.href"
                        data-brightness="controls.brightness"
                        data-contrast="controls.contrast"
                        data-saturate="controls.saturation"
                        data-rotate="controls.rotate"
                        data-fliph="controls.fliph"
                        data-flipv="controls.flipv"
                        ng-class="{'disable-transition' : !controls.isDirty}"
                        ng-if="!isAoISelectionModeEnabled && !loaderForAoI">
                    </sd-image-modify>

                </div>
            </div>
            <div class="sd-photo-preview sd-photo-preview__edit-mode" ng-if="nav === 'crop'">
                <div class="modal__sliding-toolbar" ng-if="crops.isDirty">
                    <div class="sliding-toolbar__inner"></div>
                    <a class="btn" ng-click="cancelCrops()" translate>Cancel</a>
                    <a class="btn btn--primary" ng-click="saveCrops()" translate>Save</a>
                </div>

                <div class="sd-photo-preview__image--with-strip" ng-if="!selectedRendition">
                    <sd-image-point
                        data-src="data.item.renditions.viewImage.href"
                        data-poi="data.poi"
                        data-on-change="crops.isDirty = true">
                    </sd-image-point>
                    <div>
                        <label class="sd-photo-preview__label">
                            <span translate>Original</span>
                            <span class="size">
                                {{ data.item.renditions.original.width}} x {{ data.item.renditions.original.height}}
                            </span>
                        </label>
                    </div>
                </div>
                <div class="crop-area selected sd-photo-preview__image--with-strip" ng-if="selectedRendition">
                    <div sd-image-crop
                         data-show-Min-Size-Error="true"
                         data-src="data.item.renditions.viewImage.href"
                         data-original="data.item.renditions.original"
                         data-rendition="selectedRendition"
                         data-crop-data="data.cropData[selectedRendition.name]"
                         data-on-change="onChange(renditionName, cropData)">
                    </div>
                    <div>
                        <label class="sd-photo-preview__label">{{ selectedRendition.name}}</label>
                    </div>
                </div>

                <div class="sd-photo-preview__thumb-strip">
                    <div class="sd-grid-list">

                        <div class="sd-grid-item sd-grid-item--with-click" ng-click="selectRendition()" ng-class="{active: selectedRendition === null}">
                            <div class="sd-grid-item__thumb">
                                <sd-image-point
                                    data-src="data.item.renditions.viewImage.href"
                                    data-poi="data.poi"
                                    data-on-change="crops.isDirty = true">
                                </sd-image-point>
                            </div>
                            <div class="sd-grid-item__content">
                                <span translate>Original</span>
                            </div>
                        </div>

                        <div class="sd-grid-item sd-grid-item--with-click sd-grid-item--overflow-v" ng-repeat="rendition in data.renditions track by rendition.name" ng-click="selectRendition(rendition)" ng-class="{active: rendition === selectedRendition}">
                            <div class="sd-grid-item__thumb">
                                <div sd-image-crop
                                     data-show-Min-Size-Error="true"
                                     data-src="data.item.renditions.viewImage.href"
                                     data-original="data.item.renditions.original"
                                     data-rendition="rendition"
                                     data-crop-init="data.item.renditions[rendition.name]"
                                     data-crop-data="data.cropData[rendition.name]"
                                     data-on-change="onChange(renditionName, cropData)">
                                </div>
                            </div>
                            <div class="sd-grid-item__content">
                                <span>{{rendition.name}}</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="sd-column-box__slide-in-column sd-column-box__slide-in-column--large" ng-class="{'sd-column-box__slide-in-column--closed' : !showMetadata}" ng-show="nav !== 'crop'">
            <div class="sd-column-box__slide-in-column-inner sd-slide-in-panel" ng-controller="MediaFieldsController as fields">
                <div class="sd-slide-in-panel__header">
                    <h3 class="sd-slide-in-panel__heading" ng-if="nav !== 'image-edit'" translate>Metadata</h3>
                    <h3 class="sd-slide-in-panel__heading" ng-if="nav === 'image-edit'" translate>Controls</h3>
                    <a class="icn-btn sd-slide-in-panel__close" sd-tooltip="{{'Close details' | translate}}" flow="left" ng-click="toggleShowMetadata(false)"><i class="icon-close-small"></i></a>
                </div>
                <div class="sd-slide-in-panel__content" ng-if="nav !== 'image-edit'">
                    <div class="sd-slide-in-panel__content-block sd-slide-in-panel__content-block--first">

                        <div class="modal__sliding-toolbar" ng-if="metadata.isDirty">
                            <div class="sliding-toolbar__inner"></div>
                            <a class="btn" ng-click="cancelMetadataChanges()" translate>Cancel</a>
                            <a class="btn btn--primary" ng-click="applyMetadataChanges()" translate>Apply</a>
                        </div>

                        <div sd-media-metadata-editor
                             data-item="data.metadata"
                             data-validator="validator"
                             data-boxed="true"
                             data-on-change="metadata.isDirty = true"
                             data-disabled="!data.editable"
                             data-associated="data.isAssociated"
                             data-fields="fields.fields"
                            >
                        </div>
                    </div>
                </div>
                <div sd-media-copy-metadata
                     class="sd-slide-in-panel__footer"
                     data-metadata="data.metadata"
                     data-validator="validator"
                     ng-if="nav === 'view'"
                     data-on-change="metadata.isDirty = true"
                     data-fields="fields.fields"
                     >
                </div>

                <div class="sd-slide-in-panel__content" ng-if="nav === 'image-edit'">
                    <div class="sd-slide-in-panel__content-block sd-slide-in-panel__content-block--first">

                        <div class="modal__sliding-toolbar" ng-if="isAoISelectionModeEnabled && !loaderForAoI">
                            <div class="sliding-toolbar__inner"></div>
                            <a class="btn" ng-click="showAreaOfInterestView(false)" translate>Cancel</a>
                            <a class="btn btn--primary" ng-click="saveAreaOfInterest(areaOfInterestData)" ng-disabled="!isAoIDirty" translate>Confirm crop</a>
                        </div>

                        <div class="modal__sliding-toolbar" ng-if="controls.isDirty">
                            <div class="sliding-toolbar__inner"></div>
                            <a class="btn" ng-click="cancelImageChanges()" translate>Cancel</a>
                            <a class="btn btn--primary" ng-click="applyImageChanges()" translate>Apply</a>
                        </div>

                        <h3 class="sd-slide-in-panel__heading sd-slide-in-panel__heading--marg-b16" translate>Change image settings</h3>
                        <div class="form__row">
                            <button class="btn  btn--hollow btn--icon-only btn--large" ng-click="showAreaOfInterestView()" ng-class="{'btn--active' : isAoISelectionModeEnabled}" sd-tooltip="{{ 'Crop' | translate }}" ng-disabled="controls.isDirty"><i class="icon-crop icon--white"></i></button>
                            <button class="btn  btn--hollow btn--icon-only btn--large" ng-click="rotateImage('left')" sd-tooltip="{{ 'Rotate left' | translate }}" ng-disabled="isAoISelectionModeEnabled"><i class="icon-rotate-left icon--white"></i></button>
                            <button class="btn  btn--hollow btn--icon-only btn--large" ng-click="rotateImage('right')" sd-tooltip="{{ 'Rotate right' | translate }}" ng-disabled="isAoISelectionModeEnabled"><i class="icon-rotate-right icon--white"></i></button>
                            <button class="btn  btn--hollow btn--icon-only btn--large" ng-click="flipImage('horizontal')" sd-tooltip="{{ 'Flip horizontal' | translate }}" ng-disabled="isAoISelectionModeEnabled"><i class="icon-flip-horizontal icon--white"></i></button>
                            <button class="btn  btn--hollow btn--icon-only btn--large" ng-click="flipImage('vertical')" sd-tooltip="{{ 'Flip vertical' | translate }}" ng-disabled="isAoISelectionModeEnabled"><i class="icon-flip-vertical icon--white"></i></button>
                        </div>
                    </div>
                    <div class="sd-slide-in-panel__content-block" ng-if="isAoISelectionModeEnabled">
                        <div class="form__row form__row--flex">
                            <div class="form__row-item">
                                <div class="sd-line-input sd-line-input--boxed sd-line-input--indent-l30">
                                    <span class="sd-line-input__info-left">W</span>
                                    <label class="sd-line-input__label" translate>Image size</label>
                                    <input ng-model="areaOfInterestData.CropRight" ng-change="resizeImage()" class="sd-line-input__input sd-line-input__input--center" type="number">
                                </div>
                            </div>
                            <div class="form__row-item form__row-item--no-grow">
                                <span>x</span>
                            </div>
                            <div class="form__row-item">
                                <div class="sd-line-input sd-line-input--boxed sd-line-input--indent-l30">
                                    <span class="sd-line-input__info-left">H</span>
                                    <input ng-model="areaOfInterestData.CropBottom" class="sd-line-input__input sd-line-input__input--center" type="number">
                                </div>
                            </div>
                        </div>
                        <div class="flex-grid flex-grid--boxed-small flex-grid--wrap-items flex-grid--small-2">
                            <button class="btn btn--hollow btn--large" ng-click="setRatio()" translate>Original</button>
                            <button class="btn btn--hollow btn--large" ng-click="setRatio('16:9')" >16 : 9</button>
                            <button class="btn btn--hollow btn--large" ng-click="setRatio('4:3')" >4 : 3</button>
                            <button class="btn btn--hollow btn--large" ng-click="setRatio('3:2')" >3 : 2</button>
                        </div>
                    </div>
                    <div class="sd-slide-in-panel__content-block" ng-if="!isAoISelectionModeEnabled">
                        <h3 class="sd-slide-in-panel__heading sd-slide-in-panel__heading--marg-b20" translate>Adjust colours</h3>
                        <div class="form__row form__row--small-padding">
                            <div class="form-label__container">
                                <label class="form-label" translate>Brightness</label>
                                <span class="form-label__info-block">{{controls.brightness * 100 - 100| number:0}}%</span>
                            </div>
                            <input type="range" class="sd-slider__range" min="0" max="2" step=".05" ng-model="controls.brightness" ng-dblclick="controls.brightness = 1" ng-change="controls.isDirty = true">
                        </div>
                        <div class="form__row form__row--small-padding">
                            <div class="form-label__container">
                                <label class="form-label" translate>Contrast</label>
                                <span class="form-label__info-block">{{controls.contrast * 100 - 100| number:0}}%</span>
                            </div>
                            <input type="range" class="sd-slider__range" min=".5" max="1.5" step=".05" ng-model="controls.contrast" ng-dblclick="controls.contrast = 1" ng-change="controls.isDirty = true">
                        </div>
                        <div class="form__row form__row--small-padding">
                            <div class="form-label__container">
                                <label class="form-label" translate>Saturation</label>
                                <span class="form-label__info-block">{{controls.saturation * 100 - 100| number:0}}%</span>
                            </div>
                            <input type="range" class="sd-slider__range" min="0" max="2" step=".05" ng-model="controls.saturation" ng-dblclick="controls.saturation = 1" ng-change="controls.isDirty = true">
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>