Add dialog type "select" and add selection for files handlers when multiples

Author: SamyPesse

client/core/files.js

@@ -34,6 +34,8 @@ define([
             throw "Invalid files handler format";
         }
 
+        handler.id = handlerId;
+
         if (handler.View) {
             handler.open = function(file) {
                 var path = file.path();
@@ -85,15 +87,24 @@ define([
             });
         }
 
-        var handlers = getHandlers(file);
-        if (_.size(handlers) == 0) {
+        var possibleHandlers = getHandlers(file);
+        if (_.size(possibleHandlers) == 0) {
             dialogs.alert("Can't open this file", "Sorry, No handler has been found to open this file. Try to find and install an addon to manage this file.");
             return Q.reject(new Error("No handler for this file"));
         }
 
-        // todo: dialog to choose the handler
-        var handler = _.first(handlers);
-        return Q(handler.open(file));
+        if (_.size(possibleHandlers) == 1) {
+            return Q(_.first(possibleHandlers).open(file));
+        }
+
+        var choices = {};
+        _.each(possibleHandlers, function(handler) {
+            choices[handler.id] = handler.name;
+        })
+        return dialogs.select("Open with...", "Select the handler to open this file", choices).then(function(value) {
+            var handler = handlers[value];
+            return Q(handler.open(file));
+        });
     };
 
     return {

client/resources/templates/dialogs/select.html

@@ -0,0 +1,19 @@
+<div class="modal-dialog">
+    <div class="modal-content">
+        <div class="modal-header">
+            <h4 class="modal-title"><%- options.title || "Select" %></h4>
+        </div>
+        <div class="modal-body">
+            <p><%= options.message %></p>
+            <select class="input form-control">
+                <% _.each(options.choices, function(choice, key) { %>
+                    <option value="<%- key %>" <% if (options.default == key) { %>selected<% } %>><%- choice %></option>
+                <% }); %>
+            </select>
+        </div>
+        <div class="modal-footer">
+            <button class="btn btn-default action-close">Close</button>
+            <button class="btn btn-success action-confirm">OK</button>
+        </div>
+    </div>
+</div>

client/utils/dialogs.js

@@ -42,6 +42,21 @@ define([
             });
         },
 
+        /*
+         *  Open a select dialog window
+         */
+        select: function(title, message, choices, defaultChoice) {
+            return Dialogs.open(null, {
+                "title": title,
+                "message": message,
+                "dialog": "select",
+                "default": defaultChoice,
+                "choices": choices,
+                "autoFocus": true,
+                "valueSelector": "selectorPrompt"
+            });
+        },
+
         /*
          *  Open a confirmation dialog windows
          *  @message : message to print