Skip to Content

Wiki source code of ImageEditorService

Version 3.1 by Thomas Coelho on 2022/12/01 09:41
Show last authors
1 {{velocity output='false'}}
2 #if ($xcontext.action == 'get')
3 #template('display_macros.vm')
4 #initRequiredSkinExtensions()
5 #end
6 {{/velocity}}
7
8 {{velocity}}
9 ##
10 ## Expected request parameters:
11 ## - isHTML5: true when htm5 is supported
12 ##
13 ## Check if the image styles are available.
14 #if ($services.imageStyle)
15 #set ($defaultImageStylesActive = true)
16 #else
17 #set ($defaultImageStylesActive = false)
18 #end
19 #if ($xcontext.action == 'get')
20 {{html clean='false'}}
21 <div>
22 <!-- Nav tabs -->
23 <ul class="nav nav-tabs" role="tablist">
24 <li role="presentation" class="active">
25 <a href="#standard" aria-controls="standard" role="tab" data-toggle="tab">
26 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.standardTab.title'))
27 </a>
28 </li>
29 <li role="presentation">
30 <a href="#advanced" aria-controls="advanced" role="tab" data-toggle="tab">
31 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.title'))
32 </a>
33 </li>
34 </ul>
35
36 <!-- Tab panes -->
37 <div class="tab-content">
38 <div role="tabpanel" class="tab-pane active" id="standard">
39 <form class="xform">
40 <dl>
41 #if ($defaultImageStylesActive)
42 <dt>
43 <label for="imageStyles">
44 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.standardTab.imageStyles.label'))
45 </label>
46 <span class="xHint">
47 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.standardTab.imageStyles.hint'))
48 </span>
49 </dt>
50 <dd>
51 #set ($discard = $xwiki.linkx.use($services.webjars.url('selectize.js', 'css/selectize.bootstrap3.css'),
52 {'type': 'text/css', 'rel': 'stylesheet'}))
53 #set ($discard = $xwiki.ssfx.use('uicomponents/suggest/xwiki.selectize.css', true))
54 #set ($discard = $xwiki.ssx.use('CKEditor.ImageEditorService'))
55 <select id="imageStyles"></select>
56 </dd>
57 #end
58 <dt>
59 <label for="altText">
60 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.standardTab.alt.label'))
61 </label>
62 <span class="xHint">
63 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.standardTab.alt.hint'))
64 </span>
65 </dt>
66 <dd>
67 <input id="altText" name="altText" value="" type="text" />
68 </dd>
69 #if ($request.isHTML5 == 'true')
70 <dt>
71 <label for="imageCaptionActivation">
72 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.standardTab.caption.label'))
73 </label>
74 <span class="xHint">
75 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.standardTab.caption.hint'))
76 </span>
77 </dt>
78 <dd>
79 <div class="input-group">
80 <input type="checkbox"
81 aria-label="$escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.standardTab.caption.ariaLabel'))"
82 id="imageCaptionActivation" />
83 <!-- TODO: Add support for editing the caption directly from the dialog (see CKEDITOR-435) -->
84 </dd>
85 #end
86 </dl>
87 </form>
88 </div>
89 <div role="tabpanel" class="tab-pane" id="advanced">
90 <form class="xform">
91 <dl>
92 <dt>
93 <label>
94 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.size.label'))
95 </label>
96 <span class="xHint">
97 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.size.hint'))
98 </span>
99 </dt>
100 <dd>
101 <label>
102 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.size.width.label'))
103 <input type="text" name="imageWidth" id="imageWidth" />
104 </label>
105 <label>
106 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.size.height.label'))
107 <input type="text" name="imageHeight" id="imageHeight" />
108 </label>
109 <button type="button" class="btn btn-default image-size-lock image-size-locked">
110 $services.icon.renderHTML('lock')
111 </button>
112 <button type="button" class="btn btn-default image-size-lock image-size-unlocked hidden">
113 $services.icon.renderHTML('unlock')
114 </button>
115 </dd>
116 <dt>
117 <label for="imageBorder">
118 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.border.label'))
119 </label>
120 <span class="xHint">
121 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.border.hint'))
122 </span>
123 </dt>
124 <dd>
125 <input type="checkbox" name="imageBorder" id="imageBorder" />
126 </dd>
127 <dt>
128 <label for="imageAlignment">
129 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.label'))
130 </label>
131 <span class="xHint">
132 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.hint'))
133 </span>
134 </dt>
135 <dd class="alignments">
136 <label>
137 #set ($noneOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.none')))
138 <input type="radio" name="alignment" value="none"/>$noneOptionLabel
139 </label>
140 <label>
141 #set ($startOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.start')))
142 <input type="radio" name="alignment" value="start"/>$startOptionLabel
143 </label>
144 <label>
145 #set ($centerOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.center')))
146 <input type="radio" name="alignment" value="center"/>$centerOptionLabel
147 </label>
148 <label>
149 #set ($endOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.end')))
150 <input type="radio" name="alignment" value="end"/>$endOptionLabel
151 </label>
152 </dd>
153 <dt>
154 <label for="textWrap">
155 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.textWrap.label'))
156 </label>
157 <span class="xHint">
158 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.textWrap.hint'))
159 </span>
160 </dt>
161 <dd>
162 <input type="checkbox" name="textWrap" id="textWrap" />
163 </dd>
164 </dl>
165 </form>
166 </div>
167 </div>
168 <input type="hidden" name="defaultImageStylesRestURL" id="defaultImageStylesRestURL"
169 value="$services.imageStyle.getDefaultImageStyleRestPath()" />
170 <input type="hidden" name="imageStylesRestURL" id="imageStylesRestURL"
171 value="$services.imageStyle.getImageStylesRestPath()" />
172 </div>
173 {{/html}}
174 #end
175 {{/velocity}}
176
177 {{velocity output='false'}}
178 #if ($xcontext.action == 'get')
179 #getRequiredSkinExtensions($requiredSkinExtensions)
180 #set ($discard = $response.setHeader('X-XWIKI-HTML-HEAD', $requiredSkinExtensions))
181 #end
182 {{/velocity}}