superdesk/superdesk-client-core

View on GitHub
scripts/apps/authoring/views/item-carousel.html

Summary

Maintainability
Test Coverage
<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>