3 Creates a jquery dialog box that opens when javascript function insertImageDialog
4 is called, allows user to select an image and specify attributes for it, then passes
5 img tag with base64 encoded data url to a callback javascript function.
7 Accepts the following options:
9 callback - pass the html for the selected img to this javascript function;
10 if omitted, will only include fields for viewing/uploading image
12 url - to redirect to after upload, otherwise just refreshes dialog window
16 <% include('/elements/xmlhttp.html',
17 'url' => $fsurl.'misc/xmlhttp-template_image.cgi',
18 'subs' => [ 'get_template_image' ],
21 <DIV ID="insert_image_dialog" title="Template Images">
23 <TABLE BORDER="0" STYLE="width: 100%"><TR><TD>
25 <FORM ID="insert_image_form">
27 <% &ntable("#cccccc", 2) %>
32 <SELECT ID="insert_image_imgnum" ONCHANGE="insertImageDialog($('#insert_image_imgnum').val())">
33 <OPTION VALUE="">(select an image)</OPTION>
37 % if ($opt{'callback'}) {
40 <TD><INPUT TYPE="text" SIZE="5" ID="insert_image_width" ONCHANGE="previewInsertImage()"></TD>
44 <TD><INPUT TYPE="text" SIZE="5" ID="insert_image_height" ONCHANGE="previewInsertImage()"></TD>
49 <SELECT ID="insert_image_float" ONCHANGE="previewInsertImage()">
50 <OPTION VALUE="none">inline</OPTION>
51 <OPTION VALUE="left">left</OPTION>
52 <OPTION VALUE="right">right</OPTION>
58 <TD><INPUT TYPE="text" SIZE="20" ID="insert_image_alt" ONCHANGE="previewInsertImage()"></TD>
61 <TD COLSPAN="2" ALIGN="center" STYLE="padding-top:6px">
62 <INPUT TYPE="button" ID="insert_image_button" VALUE="Insert Image" ONCLICK="insertImage()">
65 % } # if $opt{'callback'}
73 <P><B><% emt('Upload New Image') %></B></P>
75 <% include('/elements/form-file_upload.html',
76 'name' => 'TemplateImageUploadForm',
77 'id' => 'TemplateImageUploadForm',
78 'action' => $fsurl.'misc/process/template_image-upload.cgi',
80 'fields' => [ 'name', 'agentnum' ],
81 'url' => $opt{'url'} || 'javascript:refreshImageList(1)',
85 <% &ntable("#cccccc", 2) %>
87 <% include( '/elements/tr-input-text.html',
91 'id' => 'upload_form_name',
95 <% include( '/elements/tr-select-agent.html',
96 'label' => "<B>Agent</B>",
97 'empty_label' => '(global)',
99 'agent_null_right' => 'Edit global templates',
103 <% include( '/elements/tr-file-upload.html',
110 <TD COLSPAN="2" ALIGN="center" STYLE="padding-top:6px">
111 <INPUT TYPE = "submit"
112 NAME = "submitButton"
114 VALUE = "Upload image"
125 </TD><TD width="100%">
127 <DIV ID="insert_image_preview_box">
128 <P><B><% emt('Image Preview') %></B></P>
129 <SPAN ID="insert_image_loading"><B>(<% emt('Loading image...') %>)</B></SPAN>
130 <IMG SRC="" ID="insert_image_preview">
138 // initialize & close dialog window, initialize imgobj cache && image list
139 $( '#insert_image_dialog' ).dialog({
145 var imgobj = new Object;
148 // this is the main func to invoke from links outside this file.
149 // opens dialog if needed
150 // updates dialog with passed imgnum
151 // caches image info through an xmlhttp request if needed
152 // pass 'upload' as imgnum for upload-only view
153 function insertImageDialog (imgnum) {
154 if (imgnum == 'upload') {
155 $('#insert_image_form').hide();
156 $('#insert_image_preview_box').hide();
159 $('#insert_image_form').show();
160 $('#insert_image_preview_box').show();
162 if (imgnum && !imgobj[imgnum]) {
163 clearInsertImageDialog();
164 $('#insert_image_loading').show();
165 $('#insert_image_imgnum').val(imgnum);
166 get_template_image('imgnum',imgnum,
168 var images = JSON.parse(result) || [];
169 for (i = 0; i < images.length; i++) {
170 imgobj[images[i].imgnum] = images[i];
172 updateInsertImageDialog();
176 $('#insert_image_imgnum').val(imgnum);
177 updateInsertImageDialog();
179 clearInsertImageDialog();
181 if (!$( '#insert_image_dialog' ).dialog( 'isOpen' )) {
182 $( '#insert_image_dialog' ).dialog( 'open' );
186 // sets dialog values to a default "Loading..." state, including imgnum
187 function clearInsertImageDialog () {
188 $('#insert_image_imgnum').val('');
189 $('#insert_image_preview').attr('src','');
190 $('#insert_image_loading').hide();
193 // updates preview src from cache based on imgnum from form
194 // then calls previewInsertImage
195 function updateInsertImageDialog () {
196 var imgnum = $('#insert_image_imgnum').val();
197 $('#insert_image_loading').hide();
198 $('#insert_image_preview').attr('src',imgobj[imgnum].src);
199 previewInsertImage();
202 // updates preview width/height/alt/float based on current form values
203 function previewInsertImage () {
204 $('#insert_image_preview').css('width',$('#insert_image_width').val());
205 $('#insert_image_preview').css('height',$('#insert_image_height').val());
206 $('#insert_image_preview').css('float',$('#insert_image_float').val());
207 $('#insert_image_preview').attr('alt',$('#insert_image_alt').val());
210 // constructs html based on the form contents,
211 // passes it to callback & closes dialog
212 function insertImage() {
213 var imgnum = $('#insert_image_imgnum').val();
214 if (!(imgnum && imgobj[imgnum])) {
217 var width = $('#insert_image_width').val() || '';
218 var height = $('#insert_image_height').val() || '';
219 var alt = $('#insert_image_alt').val() || '';
220 var float = $('#insert_image_float').val();
221 var imgtag = '<IMG SRC="' + imgobj[imgnum].src + '"';
223 imgtag += ' WIDTH="' + width + '"';
226 imgtag += ' HEIGHT="' + height + '"';
229 imgtag += ' ALT="' + alt + '"';
232 imgtag += ' STYLE="float: ' + float + '"';
235 <% $opt{'callback'} %>(imgtag);
236 $( '#insert_image_dialog' ).dialog( 'close' );
239 // uses xmlhttp request to initialize image list & refresh it after uploads
240 function refreshImageList (fromupload) {
241 get_template_image('no_src','1',
244 $("#TemplateImageUploadForm")[0].reset();
246 var images = JSON.parse(result) || [];
248 for (i = 0; i < images.length; i++) {
249 if ( $("#insert_image_imgnum option[value='" + images[i].imgnum + "']").length == 0 ) {
250 $("#insert_image_imgnum").append('<OPTION VALUE="'+images[i].imgnum+'">'+images[i].name+'</OPTION>');
251 latest = images[i].imgnum;
255 location.hash = "insert_image_dialog";
257 // small risk of a race condition with other newly-uploaded images,
258 // but does no real damage (our image still shows up in the list)
259 insertImageDialog(latest);
271 my $curuser = $FS::CurrentUser::CurrentUser;
274 unless $curuser->access_right([ 'View templates', 'View global templates',
275 'Edit templates', 'Edit global templates', ]);
277 my $canedit = $curuser->access_right([ 'Edit templates', 'Edit global templates' ]);