scripts/apps/authoring/views/item-carousel.html
<button
tabindex="{{tabindex}}"
class="item-association"
ng-if="!carouselItems.length"
ng-class="{'item-association--preview': item[item.fieldId], 'item-association--loading': loading}"
ng-click="associations.isMediaEditable() && !item[item.fieldId] && upload()"
ng-disabled="!editable"
data-test-id="media-gallery--upload-placeholder"
>
<span class="item-association__text-label" translate>Drop items here or click to upload</span>
</button>
<div class="sd-media-carousel" ng-if="carouselItems.length">
<div class="sd-media-carousel__dialog">
<a ng-click="navPrev()" class="sd-media-carousel__nav-button sd-media-carousel__nav-button--prev-inner"></a>
<a ng-click="navNext()" class="sd-media-carousel__nav-button sd-media-carousel__nav-button--next-inner"></a>
<div class="sd-media-carousel__content owl-carousel">
<div class="sd-media-carousel__page" ng-repeat="carouselItem in carouselItems" data-test-id="media-gallery-image">
<figure
class="item-association"
ng-class="{'item-association--preview': carouselItem[carouselItem.fieldId], 'item-association--loading': loading}"
ng-click="editable && associations.isMediaEditable() && !carouselItem[carouselItem.fieldId] && upload()"
>
<a
ng-if="carouselItem[carouselItem.fieldId] && editable"
class="item-association__remove-item"
ng-click="remove(carouselItem); $event.stopPropagation()"
data-test-id="media-gallery-image--remove"
>
<i class="icon-close-small"></i>
</a>
<!-- video -->
<div class="item-association__video-container" ng-if="carouselItem[carouselItem.fieldId] && carouselItem[carouselItem.fieldId].type === 'video'">
<sd-video item="carouselItem[carouselItem.fieldId]"></sd-video>
<div class="item-association__metadata item-association__metadata--plain">
<span>
<em>{{:: 'Credit:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].byline || ('[No Value]' | translate)}}
</span>
<span>
<em>{{:: 'Copyright holder:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].copyrightholder || ('[No Value]' | translate)}}
</span>
<span>
<em>{{:: 'Assign rights:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].usageterms || ('[No Value]' | translate)}}
</span>
<span>
<em>{{:: 'Copyright notice:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].copyrightnotice || ('[No Value]' | translate)}}
</span>
</div>
<div class="item-association__action-bar" ng-if="carouselItem[carouselItem.fieldId] && editable">
<a class="btn btn--hollow btn--small" ng-click="associations.isMediaEditable() && associations.edit(this, carouselItem[carouselItem.fieldId]); $event.stopPropagation()"><span translate>Edit metadata</span></a>
</div>
</div>
<!-- audio -->
<div class="item-association__audio-container" ng-if="carouselItem[carouselItem.fieldId] && carouselItem[carouselItem.fieldId].type === 'audio'" >
<audio controls="controls">
<source vsrc="{{rendition.href}}"
ng-repeat="(key, rendition) in carouselItem[carouselItem.fieldId].renditions"
ng-if="associations.checkRenditions.isAudio(rendition)" html5vfix>
</audio>
<div class="item-association__metadata item-association__metadata--plain">
<span>
<em>{{:: 'Credit:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].byline || ('[No Value]' | translate)}}
</span>
<span>
<em>{{:: 'Copyright holder:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].copyrightholder || ('[No Value]' | translate)}}
</span>
<span>
<em>{{:: 'Assign rights:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].usageterms || ('[No Value]' | translate)}}
</span>
<span>
<em>{{:: 'Copyright notice:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].copyrightnotice || ('[No Value]' | translate)}}
</span>
</div>
<div class="item-association__action-bar" ng-if="carouselItem[carouselItem.fieldId] && editable">
<a class="btn btn--hollow btn--small" ng-click="associations.isMediaEditable() && associations.edit(this, carouselItem[carouselItem.fieldId]); $event.stopPropagation()"><span translate>Edit metadata</span></a>
</div>
</div>
<!-- image -->
<div class="item-association__image-container" ng-if="carouselItem[carouselItem.fieldId] && (carouselItem[carouselItem.fieldId].type === 'picture' || carouselItem[carouselItem.fieldId].type === 'graphic')">
<div class="item-association__image-overlay" ng-if="carouselItem[carouselItem.fieldId]">
<div class="item-association__metadata item-association__metadata--top-overlay">
<span>
<em>{{:: 'Title:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].headline || ('[No Value]' | translate)}}
</span>
</div>
<div class="item-association__icons-block" ng-if="associations.isMediaEditable(carouselItem[carouselItem.fieldId])">
<a class="item-association__image-action" ng-if="carouselItem[carouselItem.fieldId] && editable" ng-click="associations.edit(this, carouselItem[carouselItem.fieldId], {defaultTab: 'view'}); $event.stopPropagation()" sd-tooltip="{{'Edit metadata' | translate}}" data-test-id="media-gallery-image--edit"><i class="icon-pencil"></i></a>
<a class="item-association__image-action" ng-if="carouselItem[carouselItem.fieldId] && editable" ng-click="associations.edit(this, carouselItem[carouselItem.fieldId], {defaultTab: 'image-edit'}); $event.stopPropagation()" sd-tooltip="{{'Edit image' | translate}}"><i class="icon-switches"></i></a>
<a class="item-association__image-action" ng-if="carouselItem[carouselItem.fieldId] && editable" ng-click="associations.edit(this, carouselItem[carouselItem.fieldId], {defaultTab: 'crop', showMetadata: false}); $event.stopPropagation()" sd-tooltip="{{'Edit crops' | translate}}"><i class="icon-crop"></i></a>
</div>
<div class="item-association__metadata item-association__metadata--bottom-overlay">
<span>
<em>{{:: 'Alt text:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].alt_text || ('[No Value]' | translate)}}
</span>
<span>
<em>{{:: 'Credit:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].byline || ('[No Value]' | translate)}}
</span>
<span>
<em>{{:: 'Copyright holder:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].copyrightholder || ('[No Value]' | translate)}}
</span>
<span>
<em>{{:: 'Assign rights:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].usageterms || ('[No Value]' | translate)}}
</span>
<span>
<em>{{:: 'Copyright notice:' | translate}}</em>
{{carouselItem[carouselItem.fieldId].copyrightnotice || ('[No Value]' | translate)}}
</span>
</div>
</div>
<img ng-src="{{ carouselItem[carouselItem.fieldId].renditions.viewImage.href}}"
ng-class="{'not-editable': !associations.isMediaEditable() || !editable}">
</div>
</figure>
<sd-line-input
ng-if="carouselItem[carouselItem.fieldId] && showTitle"
ng-model="carouselItem[carouselItem.fieldId].headline"
class="sd-media-carousel__media-title"
data-onchange="onchange()"
data-placeholder="Add title"
data-disabled="!editable"
data-textarea="false"
data-sync="true"
tansa-scope-sync
></sd-line-input>
<div
ng-if="carouselItem[carouselItem.fieldId]"
class="sd-line-input sd-media-carousel__media-caption"
>
<sd-plain-text-editor
on-change="handleInputChange"
on-change-data="{association: carouselItem.fieldId, field: 'description_text'}"
value="carouselItem[carouselItem.fieldId].description_text"
classes="'sd-line-input__input'"
spellcheck="true"
language="item.language"
placeholder="'Add caption'"
/>
</div>
<div sd-item-crops
data-item="item.associations[fieldVersion.fieldId]"
ng-if="editor[field._id].showCrops && features.editFeaturedImage &&
!!field.field_options.allowed_types.picture">
</div>
</div>
</div>
<div style="margin-top: 20px">
<button
ng-disabled="carouselItems.length >= maxUploads"
ng-attr-title="{{getUploadButtonTitle()}}"
ng-click="upload()"
class="btn btn--small btn--hollow btn--primary"
translate
>
Upload new
</button>
</div>
<div class="sd-media-carousel__thumb-strip">
<div class="sd-media-carousel__thumb-strip-item" ng-repeat="carouselItem in carouselItems">
<div class="sd-media-carousel__thumb" ng-click="goTo($index)" ng-if="carouselItem[carouselItem.fieldId] && carouselItem[carouselItem.fieldId].type === 'picture'">
<img ng-src="{{carouselItem[carouselItem.fieldId].renditions.thumbnail.href}}">
</div>
<div class="sd-media-carousel__thumb" ng-click="goTo($index)" ng-if="carouselItem[carouselItem.fieldId] && carouselItem[carouselItem.fieldId].type === 'audio'">
<i class="icon--2x icon-audio"></i>
</div>
<div class="sd-media-carousel__thumb" ng-click="goTo($index)" ng-if="carouselItem[carouselItem.fieldId] && carouselItem[carouselItem.fieldId].type === 'video'">
<i class="icon--2x icon-video" ng-if="!carouselItem[carouselItem.fieldId].renditions.thumbnail"></i>
<img ng-if="carouselItem[carouselItem.fieldId] && carouselItem[carouselItem.fieldId].renditions.thumbnail" ng-src="{{carouselItem[carouselItem.fieldId].renditions.thumbnail.href}}">
</div>
</div>
</div>
</div>
</div>