Merge

vispa/extensions/file/static/js/base/bookmark.js

@@ -6,42 +6,42 @@ var Bookmark = Class.extend({
     self.instance = self.FileBase.instance;
     self.container = null;
     self.allowedSymbols = ["asterisk", "plus", "euro", "minus", "cloud", "envelope",
-                          "pencil", "glass", "music", "search", "heart", "star", "star-empty", 
-                          "user", "film", "th-large", "th", "th-list", "ok", "remove", "zoom-in", 
-                          "zoom-out", "off", "signal", "cog", "trash", "home", "file", "time", 
-                          "road", "download-alt", "download", "upload", "inbox", "play-circle", 
-                          "repeat", "refresh", "list-alt", "lock", "flag", "headphones", 
-                          "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag", 
-                          "tags", "book", "bookmark", "print", "camera", "font", "bold", "italic", 
-                          "text-height", "text-width", "align-left", "align-center", 
-                          "align-right", "align-justify", "list", "indent-left", "indent-right", 
-                          "facetime-video", "picture", "map-marker", "adjust", "tint", "edit", 
-                          "share", "check", "move", "step-backward", "fast-backward", "backward", 
-                          "play", "pause", "stop", "forward", "fast-forward", "step-forward", 
-                          "eject", "chevron-left", "chevron-right", "plus-sign", "minus-sign", 
-                          "remove-sign", "ok-sign", "question-sign", "info-sign", "screenshot", 
-                          "remove-circle", "ok-circle", "ban-circle", "arrow-left", "arrow-right", 
-                          "arrow-up", "arrow-down", "share-alt", "resize-full", "resize-small", 
-                          "exclamation-sign", "gift", "leaf", "fire", "eye-open", "eye-close", 
-                          "warning-sign", "plane", "calendar", "random", "comment", "magnet", 
-                          "chevron-up", "chevron-down", "retweet", "shopping-cart", 
-                          "folder-close", "folder-open", "resize-vertical", "resize-horizontal", 
-                          "hdd", "bullhorn", "bell", "certificate", "thumbs-up", "thumbs-down", 
-                          "hand-right", "hand-left", "hand-up", "hand-down", "circle-arrow-right", 
-                          "circle-arrow-left", "circle-arrow-up", "circle-arrow-down", "globe", 
-                          "wrench", "tasks", "filter", "briefcase", "fullscreen", "dashboard", 
-                          "paperclip", "heart-empty", "link", "phone", "pushpin", "usd", "gbp", 
-                          "sort", "sort-by-alphabet", "sort-by-alphabet-alt", "sort-by-order", 
-                          "sort-by-order-alt", "sort-by-attributes", "sort-by-attributes-alt", 
-                          "unchecked", "expand", "collapse-down", "collapse-up", "log-in", 
-                          "flash", "log-out", "new-window", "record", "save", "open", "saved", 
-                          "import", "export", "send", "floppy-disk", "floppy-saved", 
-                          "floppy-remove", "floppy-save", "floppy-open", "credit-card", 
-                          "transfer", "cutlery", "header", "compressed", "earphone", "phone-alt", 
-                          "tower", "stats", "sd-video", "hd-video", "subtitles", "sound-stereo", 
-                          "sound-dolby", "sound-5-1", "sound-6-1", "sound-7-1", "copyright-mark", 
-                          "registration-mark", "cloud-download", "cloud-upload", "tree-conifer", 
-                          "tree-deciduous"];
+      "pencil", "glass", "music", "search", "heart", "star", "star-empty",
+      "user", "film", "th-large", "th", "th-list", "ok", "remove", "zoom-in",
+      "zoom-out", "off", "signal", "cog", "trash", "home", "file", "time",
+      "road", "download-alt", "download", "upload", "inbox", "play-circle",
+      "repeat", "refresh", "list-alt", "lock", "flag", "headphones",
+      "volume-off", "volume-down", "volume-up", "qrcode", "barcode", "tag",
+      "tags", "book", "bookmark", "print", "camera", "font", "bold", "italic",
+      "text-height", "text-width", "align-left", "align-center",
+      "align-right", "align-justify", "list", "indent-left", "indent-right",
+      "facetime-video", "picture", "map-marker", "adjust", "tint", "edit",
+      "share", "check", "move", "step-backward", "fast-backward", "backward",
+      "play", "pause", "stop", "forward", "fast-forward", "step-forward",
+      "eject", "chevron-left", "chevron-right", "plus-sign", "minus-sign",
+      "remove-sign", "ok-sign", "question-sign", "info-sign", "screenshot",
+      "remove-circle", "ok-circle", "ban-circle", "arrow-left", "arrow-right",
+      "arrow-up", "arrow-down", "share-alt", "resize-full", "resize-small",
+      "exclamation-sign", "gift", "leaf", "fire", "eye-open", "eye-close",
+      "warning-sign", "plane", "calendar", "random", "comment", "magnet",
+      "chevron-up", "chevron-down", "retweet", "shopping-cart",
+      "folder-close", "folder-open", "resize-vertical", "resize-horizontal",
+      "hdd", "bullhorn", "bell", "certificate", "thumbs-up", "thumbs-down",
+      "hand-right", "hand-left", "hand-up", "hand-down", "circle-arrow-right",
+      "circle-arrow-left", "circle-arrow-up", "circle-arrow-down", "globe",
+      "wrench", "tasks", "filter", "briefcase", "fullscreen", "dashboard",
+      "paperclip", "heart-empty", "link", "phone", "pushpin", "usd", "gbp",
+      "sort", "sort-by-alphabet", "sort-by-alphabet-alt", "sort-by-order",
+      "sort-by-order-alt", "sort-by-attributes", "sort-by-attributes-alt",
+      "unchecked", "expand", "collapse-down", "collapse-up", "log-in",
+      "flash", "log-out", "new-window", "record", "save", "open", "saved",
+      "import", "export", "send", "floppy-disk", "floppy-saved",
+      "floppy-remove", "floppy-save", "floppy-open", "credit-card", "transfer",
+      "cutlery", "header", "compressed", "earphone", "phone-alt", "tower", "stats",
+      "sd-video", "hd-video", "subtitles", "sound-stereo", "sound-dolby",
+      "sound-5-1", "sound-6-1", "sound-7-1", "copyright-mark", "registration-mark",
+      "cloud-download", "cloud-upload", "tree-conifer", "tree-deciduous"
+    ];
 
     self.names = null;
     self.paths = null;
@@ -181,12 +181,19 @@ var Bookmark = Class.extend({
     $(".bookmarks", self.container).sortable({
       cursor: "move",
       delay: 150,
+      disabled: false,
       start: function(event, ui) {
         ui.item.startPos = ui.item.index();
         // suppress click event
         $($(".bookmark", self.container)[ui.item.startPos]).off();
+        // finish inline renameing
+        $(".input-bookmarkname", self.container).blur();
       },
       stop: function(event, ui) {
+        // prevent further sorting
+        $(".bookmarks", self.container).sortable({
+          "disabled": true
+        });
         // swap elements in array
         var index = ui.item.startPos;
         var newindex = ui.item.index();
@@ -240,9 +247,7 @@ var Bookmark = Class.extend({
     }
     // set new data to ini and update view
     this.saveBookmarks().done(function(res) {
-      if (res.success) {
-        self.editBookmark(self.names.length - 1);
-      } else {
+      if (!res.success) {
         self.instance.alert("Couldn't add bookmark.");
         self.names.splice(self.names.length - 1, 1);
         self.paths.splice(self.paths.length - 1, 1);
@@ -275,8 +280,6 @@ var Bookmark = Class.extend({
               self.saveBookmarks();
             }
           });
-        } else {
-          return;
         }
       }
     );
@@ -284,14 +287,34 @@ var Bookmark = Class.extend({
 
   editBookmark: function(index) {
     var self = this;
-    // prompt for new data
-    console.log(this.instance.prompt(
-      "Enter new name",
-      function(newdata) {
-        // change name
-        var oldname = self.names[index];
-        self.names[index] = String(newdata);
-        // set new data to ini and update view
+
+    var bookmark = $($(".bookmark-name", self.container)[index]);
+    var replaceWith = $("<input name='temp' class='input-bookmarkname' type='text' />");
+    // set length of input field
+    var inlineWidth = bookmark.innerWidth() + 20;
+    if (inlineWidth < 100) inlineWidth = 100;
+    replaceWith.css("width", inlineWidth);
+
+    // dump filename into rename input field, hide origin and show replace
+    replaceWith.attr("value", bookmark.html());
+    bookmark.hide();
+    bookmark.after(replaceWith);
+    replaceWith.focus();
+
+    // when clicking in input filed, do not open folder or file
+    var clicktype = vispa.device.hasTouch ? "tap" : "click";
+    replaceWith.on(clicktype, function(event) {
+      event.stopPropagation();
+    });
+
+    // rename on blur
+    replaceWith.blur(function(event) {
+      event.preventDefault();
+      // set new data
+      var oldname = self.names[index];
+      self.names[index] = String(replaceWith.val());
+      // write new data to ini and update view (if newname != oldname)
+      if (self.names[index] !== oldname) {
         self.saveBookmarks().done(function(res) {
           if (!res.success) {
             self.instance.alert("Couldn't rename bookmark.");
@@ -299,11 +322,17 @@ var Bookmark = Class.extend({
             self.saveBookmarks();
           }
         });
-      }, {
-        defaultValue: self.names[index],
-        header: "<i class='glyphicon glyphicon-pencil'></i> Edit bookmark"
       }
-    ));
+      replaceWith.remove();
+      bookmark.show();
+    });
+    // rename when pressing enter
+    replaceWith.keypress(function(event) {
+      if (event.which == 13) {
+        event.preventDefault();
+        this.blur();
+      }
+    });
   },
 
   editSymbol: function(index) {
@@ -312,7 +341,7 @@ var Bookmark = Class.extend({
     this.instance.prompt(
       "Enter new symbol (Bootstrap glyphicon name)",
       function(newdata) {
-        if (self.allowedSymbols.indexOf(newdata) == -1){
+        if (self.allowedSymbols.indexOf(newdata) == -1) {
           self.instance.alert("Glyphicon not found!");
           return;
         }
@@ -334,4 +363,4 @@ var Bookmark = Class.extend({
     );
   }
 
-});
+});
\ No newline at end of file