kahuna/public/js/image/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 side-padded clickable" ui-sref="search" title="Back to search"
           aria-label="Go to image search">
            <gr-icon-label gr-icon="youtube_searched_for">Back to search</gr-icon-label>
        </a>
    </gr-top-bar-nav>

    <gr-top-bar-actions role="region" aria-label="User actions and secondary navigation">

        <a class="results-toolbar-item top-bar-item results-toolbar-item--right"
           ng-click="ctrl.shareImage()">
            <gr-icon-label gr-icon="share">Share with URL</gr-icon-label>
        </a>

        <gr-delete-image class="top-bar-item clickable"
                         ng-if="ctrl.canBeDeleted && !ctrl.isDeleted"
                         images="[ctrl.image]">
        </gr-delete-image>

        <gr-downloader class="top-bar-item"
                       images="[ctrl.image]"
                       crop="ctrl.crop">
        </gr-downloader>

        <gr-archiver class="top-bar-item"
                     gr-image="ctrl.image">
        </gr-archiver>

        <gr-crop-image class="top-bar-item" image="ctrl.image" has-full-crop="ctrl.hasFullCrop" tracking-location="Top bar">
        </gr-crop-image>
    </gr-top-bar-actions>
</gr-top-bar>


<div class="image-details image-details--crop" role="complementary" aria-label="Image original and crops select">
    <div class="image-info image-details--scroll">
        <div class="image-info__group" role="region" aria-label="Original image">
            <dl>
                <dt class="image-info__heading">Original <span class="image-info__file-size"> {{:: ctrl.image.data.source.size | asFileSize}}</span></dt>
                    <dd class="image-info__heading--crops">
                        <div class="image-crop"
                             ng-class="{'image-crop--selected': !ctrl.crop}">
                            <a draggable="true"
                                ui-sref="{ crop: null }"
                                ui-drag-data="ctrl.image | asImageDragData"
                                aria-label="View original image">
                                <img class="image-crop__image"
                                     alt="original image thumbnail"
                                     ng-src="{{:: ctrl.image.data.thumbnail | assetFile }}" />
                                <div class="image-crop__aspect-ratio"
                                    ng-class="{'image-crop__aspect-ratio--selected': !ctrl.crop}">
                                    {{::ctrl.image.data.source.dimensions.width}} &times; {{::ctrl.image.data.source.dimensions.height}}
                                </div>
                                <asset-handle
                                    data-source="grid"
                                    data-source-type="original"
                                    data-thumbnail="{{:: ctrl.image.data.thumbnail | assetFile}}"
                                    data-embeddable-url="{{:: ctrl.image.data.id | embeddableUrl}}"
                                ></asset-handle>
                            </a>
                        </div>
                    </dd>
                </dt>
            </dl>
        </div>
        <div ng-if="ctrl.hasFullCrop" class="image-info__group" role="region" aria-label="Full frame">
            <dt class="image-info__heading">Full frame</dt>
            <dd>
                <div class="image-crop"
                     ng-init="crop = ctrl.fullCrop"
                     ng-class="{'image-crop--selected': crop == ctrl.crop}"
                     ng-switch="ctrl.allowCropSelection(crop)">
                    <a ng-switch-when="true"
                       draggable="true"
                       ng-init="extremeAssets = (crop | getExtremeAssets)"
                       ng-click="ctrl.cropSelected(crop)"
                       ui-sref="{ crop: crop.id }"
                       ui-drag-data="ctrl.image | asImageAndCropDragData:crop"
                       ui-drag-image="extremeAssets.smallest | assetFile">
                        <img class="image-crop__image"
                             alt="full frame image thumbnail"
                             ng-src="{{:: extremeAssets.smallest | assetFile }}"
                             ng-class="{'image-crop__image--disabled': !ctrl.allowCropSelection(crop) }"/>

                        <div class="flex-container image-crop__info image-crop__more-info"
                             ng-class="{'image-crop__info--selected': crop == ctrl.crop}">
                            {{:: crop.specification.bounds.width}} &times; {{:: crop.specification.bounds.height}}
                            <span class="flex-spacer"></span>
                            <span class="image-crop__creator" title="Cropped by {{:: crop.author}} at {{:: crop.date | date:'medium'}}">{{:: crop.author | getInitials}}</span>
                        </div>
                        <asset-handle
                            data-source="grid"
                            data-source-type="crop"
                            data-thumbnail="{{:: extremeAssets.smallest | assetFile}}"
                            data-embeddable-url="{{:: ctrl.image.data.id | embeddableUrl:crop.id}}"
                        ></asset-handle>
                    </a>
                    <div ng-switch-when="false"
                         draggable="false"
                         class="image-crop--disabled"
                         ng-init="extremeAssets = (crop | getExtremeAssets)"
                         gr-tooltip="{{:: ctrl.cropRatio}} crops only"
                         gr-tooltip-position="top">
                      <ng-include src="'/assets/js/image/crop.html'"></ng-include>
                    </div>
                </div>
            </dd>
        </div>
        <div class="image-info__group" ng-if="ctrl.hasCrops" role="region" aria-label="Image crops">
            <dl class="image-info__group--dl">
                <dt class="image-info__heading">Crops</dt>
                <dd class="image-info__heading--crops">
                    <ul class="image-crops">
                        <li class="image-crop"
                            ng-repeat="crop in ctrl.crops"
                            ng-switch="ctrl.allowCropSelection(crop)"
                            ng-class="{'image-crop--selected': crop == ctrl.crop}">
                            <div role="region"
                                 aria-label="{{crop.master.dimensions.width}} pixels by {{crop.master.dimensions.height}} pixels crop">
                                <a draggable="true"
                                   ng-init="extremeAssets = (crop | getExtremeAssets)"
                                   ng-switch-when="true"
                                   ng-click="ctrl.cropSelected(crop)"
                                   ui-sref="{crop: crop.id}"
                                   ui-drag-data="ctrl.image | asImageAndCropDragData:crop"
                                   ui-drag-image="extremeAssets.smallest | assetFile"
                                   aria-label="Go to {{crop.master.dimensions.width}} pixels by {{crop.master.dimensions.height}} pixels crop">

                                    <ng-include src="'/assets/js/image/crop.html'"></ng-include>
                                </a>
                                <div
                                    class="image-crop--disabled"
                                    draggable="false"
                                    ng-init="extremeAssets = (crop | getExtremeAssets)"
                                    ng-switch-when="false"
                                    gr-tooltip="{{:: ctrl.cropRatio}} crops only"
                                    gr-tooltip-position="top"
                                >
                                    <ng-include src="'/assets/js/image/crop.html'"></ng-include>
                                </div>
                            </div>
                        </li>
                    </ul>
                </dd>
            </dl>
        </div>
    </div>

    <gr-delete-crops
            class="image-details__delete-crops"
            gr-image="ctrl.image"
            gr-on-delete="ctrl.onCropsDeleted()"></gr-delete-crops>
</div>

<div class="image-details image-details--full-image" role="complementary" aria-label="Image information">
  <gr-metadata-validity gr-image="ctrl.image"></gr-metadata-validity>
  <gr-image-cost-message gr-image="ctrl.image"></gr-image-cost-message>
  <gr-radio-list gr-for="tabs" gr-options="ctrl.tabs" gr-selected-option="ctrl.selectedTab"></gr-radio-list>

  <div class="image-details image-details--scroll">
    <gr-image-metadata
        gr-images="ctrl.singleImageList"
        gr-user-can-edit="ctrl.canUserEdit"
        ng-if="ctrl.selectedTab === 'metadata'"></gr-image-metadata>
    <gr-image-usage gr-image="ctrl.image" ng-if="ctrl.selectedTab === 'usages'"></gr-image-usage>
  </div>
</div>

<div class="image-holder" role="main" aria-label="Image view">
    <div class="easel">
        <div class="easel__canvas"
             ng-if="!ctrl.crop"
             draggable="true"
             ui-drag-data="ctrl.image | asImageDragData">
          <img ng-class="{'easel__image':true,'easel__image--checkered__background': ctrl.image.data.optimisedPng }"
               crossorigin="anonymous"
               alt="preview of original image"
               ng-src="{{:: ctrl.optimisedImageUri}}"
               grid:track-image="ctrl.image"
               grid:track-image-location="original"
               grid:track-image-loadtime/>
        </div>

        <!-- TODO: As this loads async, add a loader -->
        <div class="easel__canvas" ng-if="ctrl.crop"
             draggable="true"
             ui-drag-data="ctrl.image | asImageAndCropDragData:ctrl.crop"
             ui-drag-image="extremeAssets.smallest | assetFile">
            <a class="easel__image-container"
               ng-init="extremeAssets = (ctrl.crop | getExtremeAssets)"
               ui-sref="{crop: ctrl.cropKey}">
                <!-- TODO: Add tracking to crop -->
                <img class="easel__image easel__image--checkered__background"
                     alt="cropped image"
                     ng-src="{{:: extremeAssets.largest | assetFile}}"
                />
            </a>
        </div>
    </div>
</div>