[TASK] Use younger selenium/standalone-chrome
[Packages/TYPO3.CMS.git] / typo3 / sysext / backend / Resources / Private / Templates / ImageManipulation / ImageManipulationWizard.html
1 <html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers"
2 xmlns:core="http://typo3.org/ns/TYPO3/CMS/Core/ViewHelpers">
3
4 <f:section name="Main">
5
6 <div class="modal-panel-main">
7 <div id="t3js-crop-image-container" class="cropper-image-container">
8 <f:image image="{image}" maxWidth="1000" maxHeight="1000" id="t3js-crop-image" additionalAttributes="{data-original-width: image.properties.width, data-original-height: image.properties.height}" />
9 </div>
10 </div>
11 <div class="modal-panel-sidebar">
12 <div class="panel-group" id="accordion-cropper-variants" role="tablist" aria-multiselectable="true">
13 <f:for each="{cropVariants}" as="cropVariant" iteration="cropVariantIterator">
14 <div class="panel panel-default">
15 <div class="panel-heading" role="tab" id="cropper-accordion-heading-{cropVariantIterator.cycle}">
16 <h4 class="panel-title">
17 <a role="button" data-bs-toggle="collapse" data-bs-parent="#accordion-cropper-variants"
18 href="#cropper-collapse-{cropVariantIterator.cycle}"
19 aria-expanded="{f:if(condition:cropVariantIterator.isFirst, then:'true', else:'false')}"
20 aria-controls="cropper-collapse-{cropVariantIterator.cycle}"
21 class="t3js-crop-variant-trigger {f:if(condition:cropVariantIterator.isFirst, then:'is-active', else:'collapsed')}"
22 data-crop-variant-id="{cropVariant.id}"
23 data-crop-variant>
24 <span><i class="fa fa-chevron-{f:if(condition:cropVariantIterator.isFirst, then:'up', else:'down')}"
25 aria-hidden="true"></i> {cropVariant.title -> f:translate(id: cropVariant.title)}</span>
26 <div
27 class="cropper-preview-thumbnail {f:if(condition:'{image.properties.width}>{image.properties.height}', then:'wide', else: 'tall')}">
28 <img class="cropper-preview-thumbnail-image"
29 src="{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}">
30 <div class="cropper-preview-thumbnail-crop-area t3js-cropper-preview-thumbnail-crop-area">
31 <img src="{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}"
32 class="cropper-preview-thumbnail-crop-image t3js-cropper-preview-thumbnail-crop-image">
33 <div class="cropper-preview-thumbnail-focus-area t3js-cropper-preview-thumbnail-focus-area"></div>
34 </div>
35 </div>
36 </a>
37 </h4>
38 </div>
39 <div id="cropper-collapse-{cropVariantIterator.cycle}"
40 class="panel-collapse collapse {f:if(condition:cropVariantIterator.isFirst, then:'in')}"
41 role="tabpanel"
42 aria-labelledby="cropper-accordion-heading-{cropVariantIterator.cycle}">
43 <div class="panel-body">
44 <form class="form">
45 <div class="form-group">
46 <f:if condition="{cropVariant.allowedAspectRatios}">
47 <label for="ratio-{cropVariantIterator.cycle}">
48 <f:translate id="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>
49 </label>
50 <div id="ratio-{cropVariantIterator.cycle}" class="ratio-buttons t3js-ratio-buttons"
51 data-bs-toggle="buttons">
52 <f:for each="{cropVariant.allowedAspectRatios}" as="ratio" iteration="ratioIterator">
53 <label class="btn btn-secondary" data-method="setAspectRatio" data-bs-option="{ratio.id}" title="{f:translate(id:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.set-aspect-ratio')}">
54 <input
55 class="sr-only" id="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
56 name="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}" value="{cropVariant.id}"
57 type="radio">
58 <span class="t3-js-ratio-title" data-ratio-id="{cropVariant.id}{ratio.id}">{ratio.title -> f:translate(id: ratio.title)}</span> <i class="fa fa-check"></i></label>
59 </f:for>
60 </div>
61 </f:if>
62 <label><f:translate key="LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.selection" /></label>
63 <div class="table-fit-block">
64 <table class="table table-no-borders table-transparent">
65 <tr>
66 <td class="t3js-cropper-info-crop"></td>
67 </tr>
68 </table>
69 </div>
70 <button class="btn btn-secondary" data-method="reset" data-crop-variant="{cropVariant -> f:format.json()}"
71 title="{f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}">
72 <i class="fa fa-refresh"></i>
73 {f:translate(key:'LLL:EXT:core/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}
74 </button>
75 </div>
76 </form>
77 </div>
78 </div>
79 </div>
80 </f:for>
81 </div>
82 </div>
83
84 </f:section>
85 </html>