kahuna/public/js/crop/view.html

<gr-top-bar role="banner" aria-label="Top bar">
    <gr-top-bar-nav role="navigation" aria-label="Primary">
        <a class="top-bar-item clickable side-padded"
           ui-sref="image({ imageId: ctrl.image.data.id })"
           gr-tooltip="Go back to image [esc]"
           aria-label="Go back to image">
            <gr-icon-label gr-icon="cancel">Back</gr-icon-label></a>
    </gr-top-bar-nav>

    <gr-top-bar-actions role="region" aria-label="User actions and secondary navigation">
        <div class="top-bar-item side-padded crop-dimensions">
            x:
            <form class="top-bar-item__form">
                <input
                    data-cy="crop-x-value-input"
                    type="number"
                    min="0"
                    max="{{ctrl.maxInputX()}}"
                    class="top-bar-item__form__input"
                    ng-model="ctrl.inputX"
                    ng-change="ctrl.broadcastXChange()"/>
            </form>
            y:
            <form class="top-bar-item__form">
                <input
                  data-cy="crop-y-value-input"
                  type="number"
                    min="0"
                    max="{{ctrl.maxInputY()}}"
                    class="top-bar-item__form__input"
                    ng-model="ctrl.inputY"
                    ng-change="ctrl.broadcastYChange()"/>
            </form>
        </div>

        <div class="top-bar-item side-padded crop-dimensions">
            <form class="top-bar-item__form">
                <input
                  data-cy="crop-width-input"
                  type="number"
                    min="1"
                    max="{{ctrl.originalWidth}}"
                    class="top-bar-item__form__input"
                    ng-model="ctrl.inputWidth"
                    ng-change="ctrl.broadcastWidthChange()"/>
            </form>
            &times;
            <form class="top-bar-item__form" ng-disabled="ctrl.freeRatio">
                <input
                  data-cy="crop-height-input"
                  type="number"
                    min="1"
                    max="{{ctrl.originalHeight}}"
                    class="top-bar-item__form__input"
                    ng-model="ctrl.inputHeight"
                    ng-change="ctrl.broadcastHeightChange()"/>
            </form>
        </div>

        <div class="inline-block side-padded">
          <gr-radio-list data-cy="crop-options" gr-for="crop" gr-options="ctrl.cropOptions" gr-selected-option="ctrl.cropType"></gr-radio-list>
        </div>

        <div class="top-bar-item" ng-switch="ctrl.image.data.cost">
            <div ng-switch-when="pay"
                 class="cost cost--pay">
                Pay to use
            </div>

            <div ng-switch-when="overquota"
                 class="cost cost--pay">
                Quota exceeded for this supplier
            </div>

            <div ng-switch-when="conditional"
                 class="cost cost--conditional"
                 title="restricted use: {{ctrl.image.data.usageRights.restrictions}}">
                <!-- As `conditional` can only be set with usageRights, let's
                     just assume it's here. We might need to revisit this. -->
                <gr-icon>flag</gr-icon>
                <span class="top-bar-item__label">Restricted use</span>
                <gr-icon>help</gr-icon>
            </div>
        </div>

        <div class="top-bar-item side-padded">
            <button class="button crop__action"
                    type="button"
                    ng-click="ctrl.callCrop()"
                    ng-disabled="ctrl.cropping"
                    gr-tooltip="Crop [enter]"
                    aria-label="Crop image">
                <gr-icon-label gr-icon="crop" gr-loading="{{ctrl.cropping}}">Crop<span ng-show="ctrl.cropping">ping…</span></gr-icon-label>
            </button>
        </div>
    </gr-top-bar-actions>
</gr-top-bar>

<div class="warning" ng-if="ctrl.cropSizeWarning()">
    This crop is very small and will result in a low-quality image.
    Please try to use a larger crop or an alternative image.
</div>

<div class="warning status--info" ng-if="ctrl.shouldShowVerticalWarningGutters">
    Although this is a 5:3 crop, it might be used in a 5:4 space, so please ensure
    there is nothing important in the striped sides<sup>
        <a ng-click="ctrl.shouldHideVerticalWarningGutters = !ctrl.shouldHideVerticalWarningGutters">
            [{{ctrl.shouldHideVerticalWarningGutters ? "show" : "hide"}}]
        </a>
    </sup>
    as these might be clipped.
</div>

<div class="circular-mask-toggle-container" ng-if="ctrl.shouldShowCircularGuideline && ctrl.isSquareCrop">
    <label>
        Apply circular mask
        <input type="checkbox" ng-model="ctrl.shouldUseCircularMask">
    </label>
</div>

<div class="easel" role="main" aria-label="Image cropper" ng-class="{
    'vertical-warning-gutters': ctrl.shouldShowVerticalWarningGutters,
    'hide-vertical-warning-gutters': ctrl.shouldHideVerticalWarningGutters,
    'circular-guideline': ctrl.shouldShowCircularGuideline && !ctrl.shouldUseCircularMask,
    'circular-mask': ctrl.shouldShowCircularGuideline && ctrl.shouldUseCircularMask
}">
    <div class="easel__canvas">
        <div class="easel__image-container" oncontextmenu="return false;">
            <img class="easel__image easel__image--cropper"
                 crossorigin="anonymous"
                 oncontextmenu="return false;"
                 alt="original image to crop"
                 ng-src="{{ctrl.optimisedImageUri}}"
                 ui-crop-box="ctrl.coords"
                 ui-crop-box-original-width="ctrl.originalWidth"
                 ui-crop-box-original-height="ctrl.originalHeight"
                 ui-crop-box-crop-type="ctrl.cropType"

                 grid:track-image="ctrl.image"
                 grid:track-image-location="original-cropping"
                 grid:track-image-loadtime
            />
        </div>
    </div>
</div>