[BUGFIX] Update selected ratio in preview element
[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 <div class="modal-header">
6 <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span>
7 </button>
8 <h4 class="modal-title">
9 {f:render(partial: 'ModalTitle', section:'Main', arguments: _all)}
10 </h4>
11 </div>
12 <div class="cropper modal-panel">
13 <div class="modal-panel-body">
14 <div id="t3js-crop-image-container" class="cropper-image-container">
15 <f:image image="{image}" maxWidth="1000" maxHeight="1000" id="t3js-crop-image" class="cropper-image-container-image" additionalAttributes="{data-original-width: image.properties.width, data-original-height: image.properties.height}" />
16 </div>
17 </div>
18 <div class="modal-panel-sidebar modal-panel-sidebar-right">
19 <div class="modal-body">
20 <div class="panel-group" id="accordion-cropper-variants" role="tablist" aria-multiselectable="true">
21 <f:for each="{cropVariants}" as="cropVariant" iteration="cropVariantIterator">
22 <div class="panel panel-default">
23 <div class="panel-heading" role="tab" id="cropper-accordion-heading-{cropVariantIterator.cycle}">
24 <h4 class="panel-title">
25 <a role="button" data-toggle="collapse" data-parent="#accordion-cropper-variants"
26 href="#cropper-collapse-{cropVariantIterator.cycle}"
27 aria-expanded="{f:if(condition:cropVariantIterator.isFirst, then:'true', else:'false')}"
28 aria-controls="cropper-collapse-{cropVariantIterator.cycle}"
29 class="t3js-crop-variant-trigger {f:if(condition:cropVariantIterator.isFirst, then:'is-active', else:'collapsed')}"
30 data-crop-variant-id="{cropVariant.id}"
31 data-crop-variant>
32 <span><i class="fa fa-chevron-{f:if(condition:cropVariantIterator.isFirst, then:'up', else:'down')}"
33 aria-hidden="true"></i> {cropVariant.title -> f:translate(id: cropVariant.title)}</span>
34 <div
35 class="cropper-preview-thumbnail {f:if(condition:'{image.properties.width}>{image.properties.height}', then:'wide', else: 'tall')}">
36 <img class="cropper-preview-thumbnail-image"
37 src="{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}">
38 <div class="cropper-preview-thumbnail-crop-area t3js-cropper-preview-thumbnail-crop-area">
39 <img src="{f:uri.image(image:image, maxWidth:'300', maxHeight: '300')}"
40 class="cropper-preview-thumbnail-crop-image t3js-cropper-preview-thumbnail-crop-image">
41 <div class="cropper-preview-thumbnail-focus-area t3js-cropper-preview-thumbnail-focus-area"></div>
42 </div>
43 </div>
44 </a>
45 </h4>
46 </div>
47 <div id="cropper-collapse-{cropVariantIterator.cycle}"
48 class="panel-collapse collapse {f:if(condition:cropVariantIterator.isFirst, then:'in')}"
49 role="tabpanel"
50 aria-labelledby="cropper-accordion-heading-{cropVariantIterator.cycle}">
51 <div class="panel-body">
52 <form class="form">
53 <div class="form-group">
54 <f:if condition="{cropVariant.allowedAspectRatios}">
55 <label for="ratio-{cropVariantIterator.cycle}">
56 <f:translate id="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.aspect-ratio"/>
57 </label>
58 <div id="ratio-{cropVariantIterator.cycle}" class="ratio-buttons t3js-ratio-buttons"
59 data-toggle="buttons">
60 <f:for each="{cropVariant.allowedAspectRatios}" as="ratio" iteration="ratioIterator">
61 <label class="btn btn-secondary" data-method="setAspectRatio" data-option="{ratio.id}" title="{f:translate(id:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.set-aspect-ratio')}">
62 <input
63 class="sr-only" id="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}"
64 name="aspectRatio-{cropVariantIterator.cycle}-{ratioIterator.cycle}" value="{cropVariant.id}"
65 type="radio">
66 <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>
67 </f:for>
68 </div>
69 </f:if>
70 <label><f:translate key="LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.selection" /></label>
71 <div class="table-fit-block">
72 <table class="table table-no-borders table-transparent">
73 <tr>
74 <td class="t3js-cropper-info-crop"></td>
75 </tr>
76 </table>
77 </div>
78 <button class="btn btn-secondary" data-method="reset" data-crop-variant="{cropVariant -> f:format.json()}"
79 title="{f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}">
80 <i class="fa fa-refresh"></i>
81 {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.reset')}
82 </button>
83 </div>
84 </form>
85 </div>
86 </div>
87 </div>
88 </f:for>
89 </div>
90 </div>
91 </div>
92 </div>
93 <div class="modal-footer">
94 <button class="btn btn-default pull-left" data-method="preview" title="Preview"><i
95 class="fa fa-eye"></i>
96 Preview
97 </button>
98 <button class="btn btn-default" data-method="dismiss"
99 title="{f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}">
100 <i class="fa fa-remove"></i>
101 {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.cancel')}
102 </button>
103 <button class="btn btn-primary" data-method="save"
104 title="{f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.accept')}">
105 <i class="fa fa-check"></i>
106 {f:translate(key:'LLL:EXT:lang/Resources/Private/Language/locallang_wizards.xlf:imwizard.accept')}
107 </button>
108 </div>
109 </f:section>
110 </html>