Initial commit of the Macro editor's mockup.

macro.js

@@ -0,0 +1,70 @@
+$(function() {
+  var macroSettingsHtml = $('.macro-settings');
+  var toggleSpeed = 'fast';
+  var notActiveOpacity = '0.75';
+
+  var newMacroHtml = $('.new-macro-settings');
+
+  // List with handle
+  Sortable.create(listWithHandle, {
+    handle: '.move-handle',
+    filter: '.no-reorder',
+    draggable: '.list-group-item',
+    animation: 150
+  });
+
+
+  $('.action--edit').on('click', function(e) {
+    var $this = $(this);
+    var action = $this.parent('.list-group-item');
+    $('.action--item.active').removeClass('callout');
+    macroSettingsHtml.removeClass('callout');
+    if (macroSettingsHtml.is(':visible') && !action.hasClass('active')) {
+      macroSettingsHtml.slideToggle(toggleSpeed, function() {
+        $('.action--item:not(.active)').css('opacity', '1');
+        $('.action--item.active').removeClass('active');
+        action.toggleClass('active');
+        $('.action--item:not(.active)').css('opacity', notActiveOpacity);
+
+        $(this).detach().insertAfter(action).slideToggle(toggleSpeed, function () {
+          action.addClass('callout');
+          macroSettingsHtml.addClass('callout');
+        });
+      });
+    }
+    else {
+      if (!macroSettingsHtml.is(':visible')) {
+        action.addClass('active');
+      }
+      macroSettingsHtml.detach().insertAfter(action).slideToggle(toggleSpeed, function() {
+        if (macroSettingsHtml.is(':visible')) {
+          $('.action--item:not(.active)').css('opacity', notActiveOpacity);
+            action.addClass('callout');
+            macroSettingsHtml.addClass('callout');
+        }
+        else {
+          $('.action--item:not(.active)').css('opacity', '1');
+          action.removeClass('active');
+        }
+      });
+    }
+  });
+
+  $('.flex-button', '.macro-settings').on('click', function() {
+    $('.action--item.active .action--edit').click();
+  });
+
+  $('.flex-button', '.new-macro-settings').on('click', function() {
+    newMacroHtml.slideToggle(toggleSpeed, function() {
+      newMacroHtml.hide().detach();
+    });
+  });
+
+  $('.add-new__action-item').on('click', function() {
+    newMacroHtml.insertAfter($(this));
+    newMacroHtml.slideToggle(toggleSpeed);
+  });
+
+  // Detach and remove this item only after all event listhere has been registered on it.
+  newMacroHtml.hide().detach();
+});