Skip to Content

Wiki source code of ImageEditorService

Version 1.1 by Thomas Coelho (local) on 2022/05/27 15:18
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.jsx.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="number" 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="number" name="imageHeight" id="imageHeight" />
108 </label>
109 </dd>
110 <dt>
111 <label for="imageBorder">
112 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.border.label'))
113 </label>
114 <span class="xHint">
115 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.border.hint'))
116 </span>
117 </dt>
118 <dd>
119 <input type="checkbox" name="imageBorder" id="imageBorder" />
120 </dd>
121 <dt>
122 <label for="imageAlignment">
123 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.label'))
124 </label>
125 <span class="xHint">
126 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.hint'))
127 </span>
128 </dt>
129 <dd>
130 <label>
131 <input type="radio" name="alignment" value="none"/>
132 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.none'))
133 </label>
134 <label>
135 <input type="radio" name="alignment" value="start"/>
136 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.start'))
137 </label>
138 <label>
139 <input type="radio" name="alignment" value="center"/>
140 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.center'))
141 </label>
142 <label>
143 <input type="radio" name="alignment" value="end"/>
144 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.alignment.option.end'))
145 </label>
146 </dd>
147 <dt>
148 <label for="textWrap">
149 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.textWrap.label'))
150 </label>
151 <span class="xHint">
152 $escapetool.xml($services.localization.render('ckeditor.plugin.image.imageEditor.advancedTab.textWrap.hint'))
153 </span>
154 </dt>
155 <dd>
156 <input type="checkbox" name="textWrap" id="textWrap" />
157 </dd>
158 </dl>
159 </form>
160 </div>
161 </div>
162 <input type="hidden" name="defaultImageStylesRestURL" id="defaultImageStylesRestURL"
163 value="$services.imageStyle.getDefaultImageStyleRestPath()" />
164 <input type="hidden" name="imageStylesRestURL" id="imageStylesRestURL"
165 value="$services.imageStyle.getImageStylesRestPath()" />
166 </div>
167 {{/html}}
168 #end
169 {{/velocity}}
170
171 {{velocity output='false'}}
172 #if ($xcontext.action == 'get')
173 #getRequiredSkinExtensions($requiredSkinExtensions)
174 #set ($discard = $response.setHeader('X-XWIKI-HTML-HEAD', $requiredSkinExtensions))
175 #end
176 {{/velocity}}