Skip to Content

Wiki source code of ImageEditorService

Last modified by Thomas Coelho (local) on 2023/07/26 11:23
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 <dd class='hidden has-warning'>
117 <span class="help-block outscaleWarning"></span>
118 </dd>
119 <dt>
120 <label for="imageBorder">
121 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.border.label'))
122 </label>
123 <span class="xHint">
124 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.border.hint'))
125 </span>
126 </dt>
127 <dd>
128 <input type="checkbox" name="imageBorder" id="imageBorder" />
129 </dd>
130 <dt>
131 <label for="imageAlignment">
132 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.label'))
133 </label>
134 <span class="xHint">
135 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.hint'))
136 </span>
137 </dt>
138 <dd class="alignments">
139 <label>
140 #set ($noneOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.none')))
141 <input type="radio" name="alignment" value="none"/>$noneOptionLabel
142 </label>
143 <label>
144 #set ($startOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.start')))
145 <input type="radio" name="alignment" value="start"/>$startOptionLabel
146 </label>
147 <label>
148 #set ($centerOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.center')))
149 <input type="radio" name="alignment" value="center"/>$centerOptionLabel
150 </label>
151 <label>
152 #set ($endOptionLabel = $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.end')))
153 <input type="radio" name="alignment" value="end"/>$endOptionLabel
154 </label>
155 </dd>
156 <dt>
157 <label for="textWrap">
158 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.textWrap.label'))
159 </label>
160 <span class="xHint">
161 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.textWrap.hint'))
162 </span>
163 </dt>
164 <dd>
165 <input type="checkbox" name="textWrap" id="textWrap" />
166 </dd>
167 </dl>
168 </form>
169 </div>
170 </div>
171 </div>
172 {{/html}}
173 #end
174 {{/velocity}}
175
176 {{velocity output='false'}}
177 #if ($xcontext.action == 'get')
178 #getRequiredSkinExtensions($requiredSkinExtensions)
179 #set ($discard = $response.setHeader('X-XWIKI-HTML-HEAD', $requiredSkinExtensions))
180 #end
181 {{/velocity}}