VRFS-3245 : Instrument selector dialog -- incremental.

web/app/assets/javascripts/dialog/instrumentSelectorDialog.js

@@ -0,0 +1,83 @@
+(function(context,$) {
+
+  "use strict";
+  context.JK = context.JK || {};
+  context.JK.InstrumentSelectorDialog = function(app, type, instruments, callback) {
+    var logger = context.JK.logger;
+    var rest = context.JK.Rest();
+    var $dialog = null;
+    var dialogId = 'instrument-selector-dialog';
+    var $screen = $('#' + dialogId);
+    var $btnSelect = $screen.find(".btn-select-instruments");
+    var $instructions = $screen.find('.instructions');
+    var $instruments = $screen.find('.instruments');    
+
+    function beforeShow(data) {
+    }
+
+    function afterShow(data) {
+      var instrumentList = context.JK.instruments;
+
+      $instruments.empty();
+
+      if (instrumentList) {
+        $.each(instrumentList, function(index, val) {        
+          $instruments.append('<li>');
+          var checked = '';
+          if (instruments && $.inArray(val.id, instruments) > -1) {
+            checked = 'checked';
+          }
+
+          $instruments.append('<input type="checkbox" value="' + val.id + '" ' + checked + ' />' + val.description);
+          $instruments.append('</li>');
+        });
+      }
+    }
+
+    function afterHide() {
+      $btnSelect.unbind("click")
+    }
+
+    function showDialog() {
+      return app.layout.showDialog(dialogId);
+    }
+
+    function events() {
+      $btnSelect.unbind("click").bind("click", function(evt) {
+        evt.preventDefault();
+        var selectedInstruments = [];
+        $instruments.find('input[type=checkbox]:checked').each(function(index) {
+          selectedInstruments.push($(this).val());
+        });
+
+        if (callback) {
+          callback(selectedInstruments);
+        }
+
+        app.layout.closeDialog(dialogId);
+
+        return false;
+
+      });
+    }
+
+    function initialize() {
+      var dialogBindings = {
+        'beforeShow' : beforeShow,
+        'afterShow' : afterShow,
+        'afterHide': afterHide
+      };
+
+      app.bindDialog(dialogId, dialogBindings);
+
+      $instructions.html('Select one or more instruments for ' + type + ':');
+
+      events();
+    }
+
+    this.initialize = initialize;
+    this.showDialog = showDialog;
+  }
+
+  return this;
+})(window,jQuery);

web/app/assets/javascripts/ui_helper.js

@@ -62,6 +62,12 @@
       });
     }
 
+    function launchInstrumentSelectorDialog(type, instruments, callback) {
+      var instrumentSelectorDialog = new JK.InstrumentSelectorDialog(JK.app, type, instruments, callback);
+      instrumentSelectorDialog.initialize();
+      return instrumentSelectorDialog.showDialog();
+    }
+
     function launchGenreSelectorDialog(type, genres, callback) {
       var genreSelectorDialog = new JK.GenreSelectorDialog(JK.app, type, genres, callback);
       genreSelectorDialog.initialize();

web/app/views/dialogs/_dialogs.html.haml

@@ -38,6 +38,7 @@
 = render 'dialogs/loginRequiredDialog'
 = render 'dialogs/jamtrackPaymentHistoryDialog'
 = render 'dialogs/singlePlayerProfileGuard'
+= render 'dialogs/instrumentSelectorDialog'
 = render 'dialogs/genreSelectorDialog'
 = render 'dialogs/recordingSelectorDialog'
 = render 'dialogs/soundCloudPlayerDialog'

web/app/views/dialogs/_instrumentSelectorDialog.html.haml

@@ -0,0 +1,16 @@
+.dialog.dialog-overlay-sm{layout: 'dialog', 'layout-id' => 'instrument-selector-dialog', id: 'instrument-selector-dialog'}
+  .content-head
+    = image_tag "content/icon_checkmark_circle.png", {:width => 20, :height => 20, :class => 'content-icon' }
+    %h1
+      = 'select instrument'
+  .dialog-inner
+    %strong
+      .instructions
+    %br{:clear => "all"}/
+    .content-body 
+      .content-body-scroller
+        %ul.instruments.three-column-list-container
+
+  .right.action-buttons
+    %a.button-grey.btn-cancel-dialog{'layout-action' => 'cancel'} CANCEL
+    %a.button-orange.btn-select-instruments SELECT