improve rename and new poupus

assets/src/css/main.css

@@ -7,6 +7,10 @@ body {
   padding-top: 3em;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 a {
   text-decoration: none;
   color: #1976D2;
@@ -466,6 +470,8 @@ fieldset input {
   width: 182%;
 }
 
+/* POPUS */
+
 .foreground {
   z-index: 99999;
   position: fixed;
@@ -476,7 +482,7 @@ fieldset input {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
-.input {
+.popup {
   z-index: 999999;
   position: fixed;
   margin: 0 auto;
@@ -492,7 +498,7 @@ fieldset input {
   box-shadow: 0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24);
 }
 
-.input input[type="text"] {
+.popup input[type="text"] {
   border-bottom: .15em solid white;
 }
 

assets/src/js/browse.js

@@ -1,36 +1,40 @@
 $(document).on('page:browse', function() {
-  $('body').off('click', '.rename').on('click', '.rename', function(event) {
+  var foreground = $('.foreground');
+
+  /* FILE UPLOAD */
+
+  $('input[type="file"]').on('change', function(event) {
     event.preventDefault();
-    button = $(this);
+    files = event.target.files;
 
-    var filename = prompt("New file name:");
+    // Create a formdata object and add the files
-
+    var data = new FormData();
-    if (filename == "") {
+    $.each(files, function(key, value) {
-      return false;
+      data.append(key, value);
-    }
+    });
-
-    if (filename.substring(0, 1) != "/") {
-        filename = window.location.pathname.replace("/admin/browse/", "") + '/' + filename;
-    }
-
-    var content = '{"filename": "' + filename + '"}';
 
     $.ajax({
-      type: 'PUT',
+      url: window.location.pathname,
-      url: button.data("file"),
+      type: 'POST',
-      data: content,
+      data: data,
+      cache: false,
       dataType: 'json',
-      encode: true
+      headers: {
+        'X-Upload': 'true',
+      },
+      processData: false,
+      contentType: false,
     }).done(function(data) {
+      notification({
+        text: "File(s) uploaded successfully.",
+        type: 'success',
+        timeout: 5000
+      });
+
       $.pjax({
         url: window.location.pathname,
         container: '#content'
-      });
+      })
-      notification({
-        text: button.data("message"),
-        type: 'success',
-        timeout: 5000
-      });
     }).fail(function(data) {
       notification({
         text: 'Something went wrong.',
@@ -38,68 +42,51 @@ $(document).on('page:browse', function() {
       });
       console.log(data);
     });
-
     return false;
   });
 
-  $('body').off('click', '.delete').on('click', '.delete', function(event) {
+  $("#upload").click(function(event) {
     event.preventDefault();
-    button = $(this);
+    $('.actions input[type="file"]').click();
-
-    $.ajax({
-      type: 'DELETE',
-      url: button.data("file")
-    }).done(function(data) {
-      button.parent().parent().fadeOut();
-      notification({
-        text: button.data("message"),
-        type: 'success',
-        timeout: 5000
-      });
-    }).fail(function(data) {
-      notification({
-        text: 'Something went wrong.',
-        type: 'error'
-      });
-      console.log(data);
-    });
-
     return false;
   });
 
+  /* NEW FILE */
+
+  var create = new Object();
+  create.form = $('form#new');
+  create.button = '';
+  create.url = '';
+
   $('.new').off('click').click(function(event) {
     event.preventDefault();
+    create.button = $(this);
 
     if ($(this).data("opened")) {
-      $('.foreground').fadeOut(200);
+      foreground.fadeOut(200);
-      $('#new-file-form').fadeOut(200);
+      create.form.fadeOut(200);
-      $(this).data("opened", false);
+      create.button.data("opened", false);
     } else {
-      $('.foreground').fadeIn(200);
+      foreground.fadeIn(200);
-      $('#new-file-form').fadeIn(200);
+      create.form.fadeIn(200);
-      $(this).data("opened", true);
+      create.button.data("opened", true);
     }
 
     return false;
   });
 
-  $('.foreground').off('click').click(function() {
+  create.form.find('input[type="text"]').off('keypress').keypress(function(event) {
-      $('.input').fadeOut(200);
-      $('.foreground').fadeOut(200);
-      $('.new').data("opened", false);
-  });
-
-  $('#new-file-name').off('keypress').keypress(function(event) {
     if (event.keyCode == 13) {
       event.preventDefault();
-      $('#new-file-form').submit();
+      $(create.form).submit();
       return false;
     }
   });
 
-  $('#new-file-form').submit(function(event) {
+  create.form.submit(function(event) {
     event.preventDefault();
-    var value = $('#new-file-name').val(),
+
+    var value = create.form.find('input[type="text"]').val(),
       splited = value.split(":"),
       filename = "",
       archetype = "";
@@ -146,7 +133,6 @@ $(document).on('page:browse', function() {
         container: '#content'
       })
     }).fail(function(data) {
-      // error types
       notification({
         text: 'Something went wrong.',
         type: 'error'
@@ -157,44 +143,71 @@ $(document).on('page:browse', function() {
     return false;
   });
 
-  $("#upload").click(function(event) {
+  /* RENAME FILE */
+
+  var rename = new Object();
+  rename.form = $('form#rename');
+  rename.button = '';
+  rename.url = '';
+
+  $('.rename').off('click').click(function(event) {
     event.preventDefault();
-    $('.actions input[type="file"]').click();
+    rename.button = $(this);
+
+    if ($(this).data("opened")) {
+      foreground.fadeOut(200);
+      rename.form.fadeOut(200);
+      rename.button.data("opened", false);
+    } else {
+      foreground.fadeIn(200);
+      rename.url = $(this).parent().parent().find('.filename').text();
+      rename.form.fadeIn(200);
+      rename.form.find('span').text(rename.url);
+      rename.form.find('input[type="text"]').val(rename.url);
+      rename.button.data("opened", true);
+    }
+
     return false;
   });
 
-  $('input[type="file"]').on('change', function(event) {
+  rename.form.find('input[type="text"]').off('keypress').keypress(function(event) {
-    event.preventDefault();
+    if (event.keyCode == 13) {
-    files = event.target.files;
+      event.preventDefault();
+      $(rename.form).submit();
+      return false;
+    }
+  });
 
-    // Create a formdata object and add the files
+  rename.form.off('submit').submit(function(event) {
-    var data = new FormData();
+    event.preventDefault();
-    $.each(files, function(key, value) {
+
-      data.append(key, value);
+    var filename = rename.form.find('input[type="text"]').val();
-    });
+    if (filename === "") {
+      return false;
+    }
+
+    if (filename.substring(0, 1) != "/") {
+      filename = window.location.pathname.replace("/admin/browse/", "") + '/' + filename;
+    }
+
+    var content = '{"filename": "' + filename + '"}';
 
     $.ajax({
-      url: window.location.pathname,
+      type: 'PUT',
-      type: 'POST',
+      url: rename.url,
-      data: data,
+      data: content,
-      cache: false,
       dataType: 'json',
-      headers: {
+      encode: true
-        'X-Upload': 'true',
-      },
-      processData: false,
-      contentType: false,
     }).done(function(data) {
-      notification({
-        text: "File(s) uploaded successfully.",
-        type: 'success',
-        timeout: 5000
-      });
-
       $.pjax({
         url: window.location.pathname,
         container: '#content'
-      })
+      });
+      notification({
+        text: rename.button.data("message"),
+        type: 'success',
+        timeout: 5000
+      });
     }).fail(function(data) {
       notification({
         text: 'Something went wrong.',
@@ -202,6 +215,42 @@ $(document).on('page:browse', function() {
       });
       console.log(data);
     });
+
     return false;
   });
+
+  $('body').off('click', '.delete').on('click', '.delete', function(event) {
+    event.preventDefault();
+    button = $(this);
+
+    $.ajax({
+      type: 'DELETE',
+      url: button.data("file")
+    }).done(function(data) {
+      button.parent().parent().fadeOut();
+      notification({
+        text: button.data("message"),
+        type: 'success',
+        timeout: 5000
+      });
+    }).fail(function(data) {
+      notification({
+        text: 'Something went wrong.',
+        type: 'error'
+      });
+      console.log(data);
+    });
+
+    return false;
+  });
+
+  /* FOREGROUND */
+
+  foreground.off('click').click(function() {
+    foreground.fadeOut(200);
+    create.form.fadeOut(200);
+    rename.form.fadeOut(200);
+    create.button.data("opened", false);
+    rename.button.data("opened", false);
+  });
 });

templates/browse.tmpl

@@ -40,9 +40,9 @@
       <tr>
         <td>
           {{if .IsDir}}
-          <i class="fa fa-folder"></i> <a data-pjax href="{{.URL}}">{{.Name}}</a> {{else}} {{ if CanBeEdited .URL }}
+          <i class="fa fa-folder"></i> <a data-pjax class="filename" href="{{.URL}}">{{.Name}}</a> {{else}} {{ if CanBeEdited .URL }}
-          <i class="fa fa-file"></i> <a data-pjax class="file" href="/admin/edit{{ $path }}{{.URL}}">{{.Name}}</a> {{ else }}
+          <i class="fa fa-file"></i> <a data-pjax class="file filename" href="/admin/edit{{ $path }}{{.URL}}">{{.Name}}</a> {{ else }}
-          <i class="fa fa-file"></i> {{.Name}} {{ end }} {{ end }}
+          <i class="fa fa-file"></i> <span class="filename">{{.Name}}</span> {{ end }} {{ end }}
         </td>
         <td class="right hideable">{{.HumanSize}}</td>
         <td class="right hideable">{{.HumanModTime "01/02/2006 3:04:05 PM"}}</td>
@@ -55,17 +55,21 @@
 
 <div class="foreground hidden"></div>
 
-<form id="new-file-form" class="input hidden">
+<form class="popup hidden" id="new">
   <h3>New file</h3>
   <p>Write the name of the new file. If you want to use an archetype, add <code>:archetype</code> in the end, replacing 'archetype' by its name.</p>
-  <input id="new-file-name" type="text" placeholder="Write here...">
+  <input type="text" placeholder="Write here...">
   <p class="right">
     <input type="submit" value="Create">
   </p>
 </form>
 
-<div class="input hidden" id="rename-form">
+<form class="popup hidden" id="rename">
   <h3>Rename file</h3>
-  <input id="new-file-name" type="text" placeholder="New name...">
+  <p>Write down the new name of "<span></span>".</p>
-</div>
+  <input type="text" placeholder="New name...">
+  <p class="right">
+    <input type="submit" value="Rename">
+  </p>
+</form>
 {{ end }}