diff options
Diffstat (limited to 'httemplate/elements')
| -rw-r--r-- | httemplate/elements/form-file_upload.html | 1 | ||||
| -rw-r--r-- | httemplate/elements/images/ui-icons_ef8c08_256x240.png | bin | 0 -> 4369 bytes | |||
| -rw-r--r-- | httemplate/elements/template_image-dialog.html | 279 |
3 files changed, 280 insertions, 0 deletions
diff --git a/httemplate/elements/form-file_upload.html b/httemplate/elements/form-file_upload.html index 45b6c97f2..3542a5a8e 100644 --- a/httemplate/elements/form-file_upload.html +++ b/httemplate/elements/form-file_upload.html @@ -69,6 +69,7 @@ Example: <div style="display:none:" id="uploadError"></div> <FORM NAME = "<% $opt{name} %>" + ID = "<% $opt{id} %>" ACTION = "<% $fsurl %>misc/file-upload.html" METHOD = "POST" ENCTYPE = "multipart/form-data" diff --git a/httemplate/elements/images/ui-icons_ef8c08_256x240.png b/httemplate/elements/images/ui-icons_ef8c08_256x240.png Binary files differnew file mode 100644 index 000000000..85e63e9f6 --- /dev/null +++ b/httemplate/elements/images/ui-icons_ef8c08_256x240.png diff --git a/httemplate/elements/template_image-dialog.html b/httemplate/elements/template_image-dialog.html new file mode 100644 index 000000000..5691d52b5 --- /dev/null +++ b/httemplate/elements/template_image-dialog.html @@ -0,0 +1,279 @@ +<%doc> + +Creates a jquery dialog box that opens when javascript function insertImageDialog +is called, allows user to select an image and specify attributes for it, then passes +img tag with base64 encoded data url to a callback javascript function. + +Accepts the following options: + +callback - pass the html for the selected img to this javascript function; +if omitted, will only include fields for viewing/uploading image + +url - to redirect to after upload, otherwise just refreshes dialog window + +</%doc> + +<% include('/elements/xmlhttp.html', + 'url' => $p.'misc/xmlhttp-template_image.cgi', + 'subs' => [ 'get_template_image' ], + ) %> + +<DIV ID="insert_image_dialog" title="Template Images"> + +<TABLE BORDER="0" STYLE="width: 100%"><TR><TD> + +<FORM ID="insert_image_form"> + +<% &ntable("#cccccc", 2) %> + + <TR> + <TH>Image</TH> + <TD> + <SELECT ID="insert_image_imgnum" ONCHANGE="insertImageDialog($('#insert_image_imgnum').val())"> + <OPTION VALUE="">(select an image)</OPTION> + </SELECT> + </TD> + </TR> +% if ($opt{'callback'}) { + <TR> + <TH>Width</TH> + <TD><INPUT TYPE="text" SIZE="5" ID="insert_image_width" ONCHANGE="previewInsertImage()"></TD> + </TR> + <TR> + <TH>Height</TH> + <TD><INPUT TYPE="text" SIZE="5" ID="insert_image_height" ONCHANGE="previewInsertImage()"></TD> + </TR> + <TR> + <TH>Align</TH> + <TD> + <SELECT ID="insert_image_float" ONCHANGE="previewInsertImage()"> + <OPTION VALUE="none">inline</OPTION> + <OPTION VALUE="left">left</OPTION> + <OPTION VALUE="right">right</OPTION> + </SELECT> + </TD> + </TR> + <TR> + <TH>Alt Text</TH> + <TD><INPUT TYPE="text" SIZE="20" ID="insert_image_alt" ONCHANGE="previewInsertImage()"></TD> + </TR> + <TR> + <TD COLSPAN="2" ALIGN="center" STYLE="padding-top:6px"> + <INPUT TYPE="button" ID="insert_image_button" VALUE="Insert Image" ONCLICK="insertImage()"> + </TD> + </TR> +% } # if $opt{'callback'} + +</TABLE> + +</FORM> + +% if ($canedit) { + +<P><B><% emt('Upload New Image') %></B></P> + +<% include('/elements/form-file_upload.html', + 'name' => 'TemplateImageUploadForm', + 'id' => 'TemplateImageUploadForm', + 'action' => $p.'misc/process/template_image-upload.cgi', + 'num_files' => 1, + 'fields' => [ 'name', 'agentnum' ], + 'url' => $opt{'url'} || 'javascript:refreshImageList(1)', + ) + %> + + <% &ntable("#cccccc", 2) %> + + <% include( '/elements/tr-input-text.html', + 'field' => 'name', + 'label' => 'Name', + 'required' => 1, + 'id' => 'upload_form_name', + ) + %> + + <% include( '/elements/tr-select-agent.html', + 'label' => "<B>Agent</B>", + 'empty_label' => 'Select agent', + 'agent_virt' => 1, + 'agent_null_right' => 'Edit global templates', + ) + %> + + <% include( '/elements/tr-file-upload.html', + 'field' => 'file', + 'label' => 'File', + ) + %> + + <TR> + <TD COLSPAN="2" ALIGN="center" STYLE="padding-top:6px"> + <INPUT TYPE = "submit" + NAME = "submitButton" + ID = "submitButton" + VALUE = "Upload image" + > + </TD> + </TR> + +</TABLE> + +</FORM> + +% } #if canedit + +</TD><TD width="100%"> + +<DIV ID="insert_image_preview_box"> + <P><B><% emt('Image Preview') %></B></P> + <SPAN ID="insert_image_loading"><B>(<% emt('Loading image...') %>)</B></SPAN> + <IMG SRC="" ID="insert_image_preview"> +</DIV> + +</TD></TR></TABLE> +</DIV> + +<SCRIPT> + +// initialize & close dialog window, initialize imgobj cache && image list +$( '#insert_image_dialog' ).dialog({ + width: 800, + height: 550, + resizable: true, + autoOpen: false, +}); +var imgobj = new Object; +refreshImageList(0); + +// this is the main func to invoke from links outside this file. +// opens dialog if needed +// updates dialog with passed imgnum +// caches image info through an xmlhttp request if needed +// pass 'upload' as imgnum for upload-only view +function insertImageDialog (imgnum) { + if (imgnum == 'upload') { + $('#insert_image_form').hide(); + $('#insert_image_preview_box').hide(); + imgnum = undefined; + } else { + $('#insert_image_form').show(); + $('#insert_image_preview_box').show(); + } + if (imgnum && !imgobj[imgnum]) { + clearInsertImageDialog(); + $('#insert_image_loading').show(); + $('#insert_image_imgnum').val(imgnum); + get_template_image('imgnum',imgnum, + function (result) { + var images = JSON.parse(result) || []; + for (i = 0; i < images.length; i++) { + imgobj[images[i].imgnum] = images[i]; + } + updateInsertImageDialog(); + } + ); + } else if (imgnum) { + $('#insert_image_imgnum').val(imgnum); + updateInsertImageDialog(); + } else { + clearInsertImageDialog(); + } + if (!$( '#insert_image_dialog' ).dialog( 'isOpen' )) { + $( '#insert_image_dialog' ).dialog( 'open' ); + } +} + +// sets dialog values to a default "Loading..." state, including imgnum +function clearInsertImageDialog () { + $('#insert_image_imgnum').val(''); + $('#insert_image_preview').attr('src',''); + $('#insert_image_loading').hide(); +} + +// updates preview src from cache based on imgnum from form +// then calls previewInsertImage +function updateInsertImageDialog () { + var imgnum = $('#insert_image_imgnum').val(); + $('#insert_image_loading').hide(); + $('#insert_image_preview').attr('src',imgobj[imgnum].src); + previewInsertImage(); +} + +// updates preview width/height/alt/float based on current form values +function previewInsertImage () { + $('#insert_image_preview').css('width',$('#insert_image_width').val()); + $('#insert_image_preview').css('height',$('#insert_image_height').val()); + $('#insert_image_preview').css('float',$('#insert_image_float').val()); + $('#insert_image_preview').attr('alt',$('#insert_image_alt').val()); +} + +// constructs html based on the form contents, +// passes it to callback & closes dialog +function insertImage() { + var imgnum = $('#insert_image_imgnum').val(); + if (!(imgnum && imgobj[imgnum])) { + return ''; + } + var width = $('#insert_image_width').val() || ''; + var height = $('#insert_image_height').val() || ''; + var alt = $('#insert_image_alt').val() || ''; + var float = $('#insert_image_float').val(); + var imgtag = '<IMG SRC="' + imgobj[imgnum].src + '"'; + if (width) { + imgtag += ' WIDTH="' + width + '"'; + } + if (height) { + imgtag += ' HEIGHT="' + height + '"'; + } + if (alt) { + imgtag += ' ALT="' + alt + '"'; + } + if (float) { + imgtag += ' STYLE="float: ' + float + '"'; + } + imgtag += '>'; + <% $opt{'callback'} %>(imgtag); + $( '#insert_image_dialog' ).dialog( 'close' ); +} + +// uses xmlhttp request to initialize image list & refresh it after uploads +function refreshImageList (fromupload) { + get_template_image('no_src','1', + function (result) { + if (fromupload) { + $("#TemplateImageUploadForm")[0].reset(); + } + var images = JSON.parse(result) || []; + var latest; + for (i = 0; i < images.length; i++) { + if ( $("#insert_image_imgnum option[value='" + images[i].imgnum + "']").length == 0 ) { + $("#insert_image_imgnum").append('<OPTION VALUE="'+images[i].imgnum+'">'+images[i].name+'</OPTION>'); + latest = images[i].imgnum; + } + } + if (fromupload) { + location.hash = "insert_image_dialog"; + if (latest) { + // small risk of a race condition with other newly-uploaded images, + // but does no real damage (our image still shows up in the list) + insertImageDialog(latest); + } + } + } + ); +} + +</SCRIPT> + +<%init> +my %opt = @_; + +my $curuser = $FS::CurrentUser::CurrentUser; + +die "access denied" + unless $curuser->access_right([ 'View templates', 'View global templates', + 'Edit templates', 'Edit global templates', ]); + +my $canedit = $curuser->access_right([ 'Edit templates', 'Edit global templates' ]); +</%init> + |
