--- /dev/null
+//= require ../vendor/jquery.js
+
+var selected_url = null;
+
+function fileSelected(event) {
+ event.preventDefault();
+
+ var row = $(this).closest('tr');
+ var url = row.data('url');
+ var filename = row.data('name');
+
+ selected_url = url;
+ $('#picname').show();
+ $('#id_old_name').val(filename);
+ $('#id_old_name2').val(filename);
+ $('#id_new_name').val(filename);
+
+ if (row.hasClass('image')) {
+ var img = $('#pic img');
+ img.attr('src', url);
+ img.show();
+ } else {
+ $('#pic img').hide();
+ }
+}
+
+function imagePreview() {
+ var mouseX = 0, mouseY = 0;
+
+ $('#changelist tr.image').on({
+ mouseover: function() {
+ var url = $(this).data('url');
+ $('#prop img').attr('src', url);
+ $('#prop').css('top', mouseY+5);
+ $('#prop').css('left', mouseX+10);
+ $('#prop').show();
+ },
+ mouseout: function() {
+ $('#prop').hide();
+ }
+ });
+
+ $(document).mousemove(function(event) {
+ mouseX = event.pageX;
+ mouseY = event.pageY;
+ $('#prop').css('top', mouseY+5);
+ $('#prop').css('left', mouseX+10);
+ });
+}
+
+function FileBrowserSelect() {
+ top.tinymce.activeEditor.windowManager.getParams().onSelect(encodeURI(selected_url));
+ top.tinymce.activeEditor.windowManager.close();
+}
+
+// init
+imagePreview();
+$('#changelist .file').on('click', fileSelected);
+
<link rel="stylesheet" type="text/css" href="{$STATIC_URL}css/admin-print.css" media="print">
<style>
{literal}
- a{color:#2B6FB6 !important;}
- a:hover{color:black !important;}
+ .breadcrumbs {padding:10px;}
+
+ a {color:#2B6FB6 !important;}
+ a:hover {color:black !important;}
+
+ #pic { border:2px solid white; width:240px; text-align:center; height: 150px; line-height: 150px; background: #888; }
+ #pic img { max-width: 240px; max-height: 150px; display:none; }
+
+ #prop { display:none; position:absolute; left:0; top:0; z-index:400000; border:2px solid #aaa;}
+ #prop img {width:100px}
{/literal}
</style>
<title>{$page_title} - IPF Administration</title>
</head>
-<body style="padding:0; margin:0;">
- <div class="breadcrumbs"><a href="/admin/filebrowser/">{trans 'Root'}</a>
- {foreach $path as $p}
- / <a href="{$p['cd']}">{$p['name']}</a>
- {/foreach}
+<body style="padding:0; margin:0;overflow:hidden">
+ <div class="breadcrumbs">
+ <a href="{url 'IPF_Admin_Views_FileBrowser', array('/')}">Root</a>
+ {foreach $path as $p}
+ {if $p['name']}
+ / <a href="{$p['cd']}">{$p['name']}</a>
+ {/if}
+ {/foreach}
</div>
{assign $zero_gif = "data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="}
<h3 style="border-top:1px dashed #a0a0a0; padding:5px 0;">File Option</h3>
<form method="post">
<input type="hidden" name="old_name" id="id_old_name">
- <input type="hidden" name="curr_dir" id="id_curr_dir">
+ <input type="hidden" name="curr_dir" id="id_curr_dir" value="{$curr_dir}">
<table cellpadding="0" cellspacing="0">
<tr>
<td><input name="new_name" id="id_new_name"></td>
<h3 style="border-top:1px dashed #a0a0a0; padding:5px 0;">View File</h3>
- <div style="border:2px solid white; width:240px; text-align:center;">
- <img id="pic" src="{$zero_gif}" width="240" height="150">
- </div>
+ <div id="pic"><img src="{$zero_gif}"></div>
<div class="submit-row">
<input type="button" value="Select & Close" onclick="FileBrowserSelect()">
</thead>
<tbody>
{foreach $dirs as $dir}
- <tr id="id_{$dir['id']}" onmouseover="line_over({$dir['id']},1,0,'SUB-DIR',0,'{$dir['name']}')" onmouseout="line_out()">
+ <tr>
<td><a href="{$dir['name']}/">{$dir['name']}</a></td>
<td colspan="2">SUB-DIR</td>
- <td>{if $dir['name']!='..'}<a href="?delete={$dir['name']}">delete</a>{/if}</td>
+ <td>{if $dir['name'] !== '..'}<a href="?delete={$dir['name']}">delete</a>{/if}</td>
</tr>
{/foreach}
{foreach $files as $file}
- <tr id="id_{$file['id']}" onmouseover="line_over({$file['id']},0,{$file['image']},'{$file['type']}',{$file['size']},'{$file['name']}')" onmouseout="line_out()">
- <td><a href="#" onclick="return click_file('{$file['name']}', '{$file['image']}', {$file['zw']}, {$file['zh']})">{$file['name']}</a></td>
+ <tr{if $file['image']} class="image"{/if} data-name="{$file['name']}" data-url="{$UPLOAD_URL}{$curr_dir}/{$file['name']}">
+ <td><a href="#" class="file">{$file['name']}</a></td>
<td>{$file['type']}</td>
<td>{$file['size']}</td>
<td><a href="?delete={$file['name']}">delete</a></td>
</table>
</div>
- <div id="prop" style="display:none; position:absolute; left:0; top:0; z-index:400000; background:white; border:2px solid #aaa;">wewfwf</div>
+ <div id="prop"><img src="{$zero_gif}"></div>
<!-- /content -->
</td>
</tr>
</table>
-<script src="{$STATIC_URL}js/admin.js"></script>
-<script src="{$STATIC_URL}admin/tinymce/tinymce.min.js"></script>
-
-<script type="text/javascript">
-var curr_dir = '{$curr_dir}';
-var upload_url = '{$upload_url}';
-var mouseX = 0;
-var mouseY = 0;
-{literal}
-
-$().mousemove( function(e) {
- mouseX = e.pageX;
- mouseY = e.pageY;
- $('#prop').css('top',mouseY+5);
- $('#prop').css('left',mouseX+10);
-});
-
-function click_file(filename, image, w, h){
- var fname = upload_url+curr_dir+'/'+filename;
- $('#picname').show();
- $('#id_old_name').val(filename);
- $('#id_old_name2').val(filename);
- $('#id_curr_dir').val(curr_dir);
- $('#id_new_name').val(filename);
- if (image=='1')
- $('#pic').attr('src',fname);
- else
- $('#pic').attr('src', '{/literal}{$zero_gif}{literal}');
- $('#pic').attr('width',w);
- $('#pic').attr('height',h);
- return false;
-}
-
-function line_over(id, is_dir, is_image, type, size, filename){
- if (is_image==1){
- $('#prop').hide();
- var fname = upload_url+curr_dir+'/'+filename;
- $('#prop').html('<img src="'+fname+'" width="100" />');
- $('#prop').css('top',mouseY+5);
- $('#prop').css('left',mouseX+10);
- $('#prop').show();
- }
-}
-
-function line_out(){
- $('#prop').hide();
-}
-
-function FileBrowserSelect() {
- var URL = upload_url + curr_dir +'/'+ $('#id_old_name').val();
- top.tinymce.activeEditor.windowManager.getParams().onSelect(encodeURI(URL));
- top.tinymce.activeEditor.windowManager.close();
-}
-{/literal}
-</script>
-
+ <script src="{$STATIC_URL}js/filebrowser_popup.js"></script>
+ <script src="{$STATIC_URL}admin/tinymce/tinymce.min.js"></script>
</body>
</html>