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