httemplate/elements/template_image-dialog.html

   1 <%doc>
   2
   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.
   6
   7 Accepts the following options:
   8
   9 callback - pass the html for the selected img to this javascript function;
  10 if omitted, will only include fields for viewing/uploading image
  11
  12 url - to redirect to after upload, otherwise just refreshes dialog window
  13
  14 </%doc>
  15
  16 <% include('/elements/xmlhttp.html',
  17         'url'  => $fsurl.'misc/xmlhttp-template_image.cgi',
  18         'subs' => [ 'get_template_image' ],
  19    ) %>
  20
  21 <DIV ID="insert_image_dialog" title="Template Images">
  22
  23 <TABLE BORDER="0" STYLE="width: 100%"><TR><TD>
  24
  25 <FORM ID="insert_image_form">
  26
  27 <% &ntable("#cccccc", 2) %>
  28
  29   <TR>
  30     <TH>Image</TH>
  31     <TD>
  32       <SELECT ID="insert_image_imgnum" ONCHANGE="insertImageDialog($('#insert_image_imgnum').val())">
  33         <OPTION VALUE="">(select an image)</OPTION>
  34       </SELECT>
  35     </TD>
  36   </TR>
  37 % if ($opt{'callback'}) {
  38   <TR>
  39     <TH>Width</TH>
  40     <TD><INPUT TYPE="text" SIZE="5" ID="insert_image_width" ONCHANGE="previewInsertImage()"></TD>
  41   </TR>
  42   <TR>
  43     <TH>Height</TH>
  44     <TD><INPUT TYPE="text" SIZE="5" ID="insert_image_height" ONCHANGE="previewInsertImage()"></TD>
  45   </TR>
  46   <TR>
  47     <TH>Align</TH>
  48     <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>
  53       </SELECT>
  54     </TD>
  55   </TR>
  56   <TR>
  57     <TH>Alt Text</TH>
  58     <TD><INPUT TYPE="text" SIZE="20" ID="insert_image_alt" ONCHANGE="previewInsertImage()"></TD>
  59   </TR>
  60   <TR>
  61     <TD COLSPAN="2" ALIGN="center" STYLE="padding-top:6px">
  62       <INPUT TYPE="button" ID="insert_image_button" VALUE="Insert Image" ONCLICK="insertImage()">
  63     </TD>
  64   </TR>
  65 % } # if $opt{'callback'}
  66
  67 </TABLE>
  68
  69 </FORM>
  70
  71 % if ($canedit) {
  72
  73 <P><B><% emt('Upload New Image') %></B></P>
  74
  75 <% include('/elements/form-file_upload.html',
  76      'name'      => 'TemplateImageUploadForm',
  77      'id'        => 'TemplateImageUploadForm',
  78      'action'    => $fsurl.'misc/process/template_image-upload.cgi',
  79      'num_files' => 1,
  80      'fields'    => [ 'name', 'agentnum' ],
  81      'url'       => $opt{'url'} || 'javascript:refreshImageList(1)',
  82    )
  83  %>
  84
  85  <% &ntable("#cccccc", 2) %>
  86
  87   <% include( '/elements/tr-input-text.html',
  88                 'field' => 'name',
  89                 'label' => 'Name',
  90                 'required' => 1,
  91                 'id' => 'upload_form_name',
  92             )
  93   %>
  94
  95   <% include( '/elements/tr-select-agent.html',
  96                  'label'       => "<B>Agent</B>",
  97                  'empty_label' => '(global)',
  98                  'agent_virt'  => 1,
  99                  'agent_null_right' => 'Edit global templates',
 100              )
 101   %>
 102
 103   <% include( '/elements/tr-file-upload.html',
 104                 'field' => 'file',
 105                 'label' => 'File',
 106             )
 107   %>
 108
 109   <TR>
 110     <TD COLSPAN="2" ALIGN="center" STYLE="padding-top:6px">
 111       <INPUT TYPE    = "submit"
 112              NAME    = "submitButton"
 113              ID      = "submitButton"
 114              VALUE   = "Upload image"
 115       >
 116     </TD>
 117   </TR>
 118
 119 </TABLE>
 120
 121 </FORM>
 122
 123 % } #if canedit
 124
 125 </TD><TD width="100%">
 126
 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">
 131 </DIV>
 132
 133 </TD></TR></TABLE>
 134 </DIV>
 135
 136 <SCRIPT>
 137
 138 // initialize & close dialog window, initialize imgobj cache && image list
 139 $( '#insert_image_dialog' ).dialog({
 140   width: 800,
 141   height: 550,
 142   resizable: true,
 143   autoOpen: false,
 144 });
 145 var imgobj = new Object;
 146 refreshImageList(0);
 147
 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();
 157     imgnum = undefined;
 158   } else {
 159     $('#insert_image_form').show();
 160     $('#insert_image_preview_box').show();
 161   }
 162   if (imgnum && !imgobj[imgnum]) {
 163     clearInsertImageDialog();
 164     $('#insert_image_loading').show();
 165     $('#insert_image_imgnum').val(imgnum);
 166     get_template_image('imgnum',imgnum,
 167       function (result) {
 168         var images = JSON.parse(result) || [];
 169         for (i = 0; i < images.length; i++) {
 170           imgobj[images[i].imgnum] = images[i];
 171         }
 172         updateInsertImageDialog();
 173       }
 174     );
 175   } else if (imgnum) {
 176     $('#insert_image_imgnum').val(imgnum);
 177     updateInsertImageDialog();
 178   } else {
 179     clearInsertImageDialog();
 180   }
 181   if (!$( '#insert_image_dialog' ).dialog( 'isOpen' )) {
 182     $( '#insert_image_dialog' ).dialog( 'open' );
 183   }
 184 }
 185
 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();
 191 }
 192
 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();
 200 }
 201
 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());
 208 }
 209
 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])) {
 215     return '';
 216   }
 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 + '"';
 222   if (width) {
 223     imgtag += ' WIDTH="' + width + '"';
 224   }
 225   if (height) {
 226     imgtag += ' HEIGHT="' + height + '"';
 227   }
 228   if (alt) {
 229     imgtag += ' ALT="' + alt + '"';
 230   }
 231   if (float) {
 232     imgtag += ' STYLE="float: ' + float + '"';
 233   }
 234   imgtag += '>';
 235   <% $opt{'callback'} %>(imgtag);
 236   $( '#insert_image_dialog' ).dialog( 'close' );
 237 }
 238
 239 // uses xmlhttp request to initialize image list & refresh it after uploads
 240 function refreshImageList (fromupload) {
 241   get_template_image('no_src','1',
 242     function (result) {
 243       if (fromupload) {
 244         $("#TemplateImageUploadForm")[0].reset();
 245       }
 246       var images = JSON.parse(result) || [];
 247       var latest;
 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;
 252         }
 253       }
 254       if (fromupload) {
 255         location.hash = "insert_image_dialog";
 256         if (latest) {
 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);
 260         }
 261       }
 262     }
 263   );
 264 }
 265
 266 </SCRIPT>
 267
 268 <%init>
 269 my %opt = @_;
 270
 271 my $curuser = $FS::CurrentUser::CurrentUser;
 272
 273 die "access denied"
 274   unless $curuser->access_right([ 'View templates', 'View global templates',
 275                                   'Edit templates', 'Edit global templates', ]);
 276
 277 my $canedit = $curuser->access_right([ 'Edit templates', 'Edit global templates' ]);
 278 </%init>
 279