]> git.andy128k.dev Git - ipf.git/commitdiff
extract file browser js code
authorAndrey Kutejko <andy128k@gmail.com>
Sun, 14 Dec 2014 16:48:32 +0000 (18:48 +0200)
committerAndrey Kutejko <andy128k@gmail.com>
Sun, 14 Dec 2014 16:48:32 +0000 (18:48 +0200)
ipf/admin/app.php
ipf/admin/assets/js/filebrowser_popup.js [new file with mode: 0644]
ipf/admin/templates/admin/filebrowser.html

index 56c9b44e06253f3325b37897899b47fb0c4a9fc9..94a83d60fb4abb752d43dbbc6382adc17f2a4d5d 100644 (file)
@@ -60,6 +60,7 @@ class IPF_Admin_App extends IPF_Application
     {
         return array(
             'assets/js/admin.js' => 'js/admin.js',
+            'assets/js/filebrowser_popup.js' => 'js/filebrowser_popup.js',
             'assets/css/admin.css' => 'css/admin.css',
             'assets/css/print.css' => 'css/admin-print.css',
             'assets/css/login.css' => 'css/login.css',
diff --git a/ipf/admin/assets/js/filebrowser_popup.js b/ipf/admin/assets/js/filebrowser_popup.js
new file mode 100644 (file)
index 0000000..a9d4ae9
--- /dev/null
@@ -0,0 +1,59 @@
+//= 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);
+
index 3d319b5d5a96e211a32ea2ec2df72592d6d287e4..d5fed3aff48d062706c05a30f271b891182b1da8 100644 (file)
@@ -7,18 +7,29 @@
   <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=="}
@@ -47,7 +58,7 @@
           <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>
@@ -70,9 +81,7 @@
 
         <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>