Add Fae modal support

app/assets/javascripts/fae/_modals.js

@@ -6,8 +6,19 @@
  */
 Fae.modals = {
   ready: function() {
+    this.$body = $('body');
+    this.openClass = 'modal-open';
+    this.modalClass = 'MODAL_ID-modal-open';
+    this.showEvent = 'modal:show';
+    this.shownEvent = 'modal:shown';
+    this.closeEvent = 'modal:close';
+    this.closedEvent = 'modal:closed';
+    this.modalOpen = false;
+
     this.imageModals();
     this.markdownModalListener();
+
+    this.ajaxModalListener();
   },
 
   /**
@@ -56,5 +67,88 @@ Fae.modals = {
    */
   markdownModalListener: function() {
     FCH.$document.on('click', '.markdown-support', this.markdownModal);
+  },
+
+  /**
+   * load remote data, open modal view
+   * @see {@link modals.formModalListener}
+   * @has_test {features/form_helpers/fae_input_spec.rb}
+   */
+  openAjaxModal: function (remoteUrl, relatedTarget) {
+    var _this = this;
+
+    $.get(remoteUrl, function (data) {
+      //Open remote url content in modal window
+      $(data).modal({
+        minHeight: "75%",
+        minWidth: "75%",
+        overlayClose: true,
+        zIndex: 1100,
+        containerId: "fae-modal",
+        persist: true,
+        opacity: 70,
+        overlayCss: { backgroundColor: "#000" },
+        onOpen: function (dialog) {
+          // Fade in modal + show data
+          dialog.overlay.fadeIn();
+          dialog.container.fadeIn(function() {
+            var shownEvent = $.Event(_this.shownEvent, { dialog: dialog, relatedTarget: relatedTarget });
+            _this.$body.trigger(shownEvent);
+          });
+          dialog.data.show();
+
+          var modalClasses = [_this.createClassFromModalId(relatedTarget.attr('id')), _this.openClass].join(' ');
+
+          _this.modalOpen = true;
+          _this.$body.addClass(modalClasses);
+        },
+        onShow: function (dialog) {
+          var showEvent = $.Event(_this.showEvent, { dialog: dialog, relatedTarget: relatedTarget });
+          _this.$body.trigger(showEvent);
+
+          $(dialog.container).css('height', 'auto')
+        },
+        onClose: function (dialog) {
+          var closeEvent = $.Event(_this.closeEvent, { dialog: dialog, relatedTarget: relatedTarget });
+          _this.$body.trigger(closeEvent);
+
+          // Fade out modal and close
+          dialog.container.fadeOut();
+          dialog.overlay.fadeOut(function () {
+            $.modal.close(); // must call this!
+
+            var closedEvent = $.Event(_this.closedEvent, { dialog: dialog, relatedTarget: relatedTarget });
+            var modalClasses = [_this.createClassFromModalId(relatedTarget.attr('id')), _this.openClass].join(' ');
+
+            _this.modalOpen = false;
+            _this.$body.removeClass(modalClasses);
+            _this.$body.trigger(closedEvent);
+          });
+        }
+      });
+
+    });
+  },
+
+  /**
+   * Click event listener for ajax modal links triggering specific view within modal popup
+   * @fires {@link modals.ajaxModal}
+   * @has_test {features/form_helpers/fae_input_spec.rb}
+   */
+  ajaxModalListener: function () {
+    var _this = this;
+
+    FCH.$document.on('click', '.js-fae-modal', function (e) {
+      e.preventDefault();
+      var $this = $(this);
+      var url = $this.attr('href');
+      var id = $this.attr('id');
+
+      _this.openAjaxModal(url, $this)
+    });
+  },
+
+  createClassFromModalId: function(modalId) {
+    return this.modalClass.replace('MODAL_ID', modalId);
   }
 };

app/assets/javascripts/fae/form/_ajax.js

@@ -298,7 +298,7 @@ Fae.form.ajax = {
    * @todo Clean this up, moving listeners into their respective component classes (select, checkbox, etc.)
    */
   htmlListeners: function() {
-    $('#js-main-content, .login-form > form')
+    $('#js-main-content, .login-form > form, #simplemodal-data')
 
       /**
        * For the delete button on file input

app/assets/stylesheets/fae/modules/_modal.scss

@@ -76,3 +76,28 @@
     font-size: 12px;
   }
 }
+
+#fae-modal {
+  padding: 0;
+  box-shadow: none;
+
+  .simplemodal-data {
+    min-height: 100%;
+  }
+
+  .simplemodal-close {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    height: 20px;
+    width: 20px;
+
+    &:before {
+      position: relative;
+      padding: 4px;
+      top: auto;
+      right: auto;
+      color: #3b3b3b;
+    }
+  }
+}

docs/features/modals.md

@@ -0,0 +1,88 @@
+# Modals
+You can use the Fae modal feature to add the ability of opening a specific view (list view or nested form) within a modal popup. You can then use the custom event hooks to extend the modal functionality.
+
+* [Usage](#usage)
+* [Callbacks](#callbacks)
+
+---
+
+## Usage
+The most basic way to setup a modal popup is to attach the specific class to a link that references a specific view/url. This will add a click event listener and when clicked will use an ajax request to return the view/url data and trigger the modal. When the modal is opened it will also add `.modal-open` and `.{link_id}-modal-open` classes to the `body`.
+
+### Via Modal Link
+
+You can activate a modal by adding the `.js-fae-modal` class on a link as well as passing in view path/url as href to trigger ajax modal on click.
+
+```slim
+  <a href="/admin/cats/new" id="cats" class="js-fae-modal">add new cat via modal popup</a>
+```
+
+### Via Javascript
+Open a modal using JS by passing a remote url to `openAjaxModal` function.
+
+```javascript
+  Fae.modals.openAjaxModal(remoteUrl);
+```
+
+### Close Modal
+You can programatically close the currently opened modal popup by calling `$.modal.close();`
+
+**Example**
+```javascript
+  $("body").on("modal:show", function (e) {
+    $('#fae-modal').on('ajax:success', function (evt, data, status, xhr) {
+      if (Fae.modals.modalOpen) {
+        $.modal.close();
+      }
+    });
+  }
+```
+
+## Events/Callbacks
+
+These events can be used to hook into the modal functionality. The modal object is available by referencing the `dialog` property. If modal is triggered by a click, the clicked element will be available as the `relatedTarget` event property.
+
+| event | description |
+|--------|-------------------|
+| modal:show |  This event is useful for binding events/actions after modal dialog elements have been initialized.  |
+
+
+```javascript
+  $("body").on("modal:show", function (e) {
+    //do something once modal show is triggered
+
+    if (e.dialog.data[0].classList.contains('nested-form')) {
+      Fae.form.ajax.htmlListeners();
+    }
+  }
+```
+
+| event | description |
+|--------|-------------------|
+| modal:shown |  This event is triggered once modal is completely visible and fadeIn animation has completed.  |
+
+```javascript
+  $("body").on("modal:shown", function (e) {
+    //do something once modal is fully visible
+  }
+```
+
+| event | description |
+|--------|-------------------|
+| modal:close |  This event is triggered immediately when the onClose function has been triggered.  |
+
+```javascript
+  $("body").on("modal:close", function (e) {
+    //do something once modal close is triggered
+  }
+```
+
+| event | description |
+|--------|-------------------|
+| modal:closed |  This event is triggered once modal is completely hidden and fadeOut animation has completed.  |
+
+```javascript
+  $("body").on("modal:closed", function (e) {
+    //do something once modal is fully hidden
+  }
+```

spec/dummy/app/assets/javascripts/fae.js

@@ -7,4 +7,33 @@
 
 $(document).ready(function(){
   $('.login-body').addClass('test-class');
+
+  $("body").on("modal:show", function (e) {
+    $('.modal-callback').remove();
+    $(e.relatedTarget).closest('.input').append("<p class='modal-callback modal-callback--show'>Modal Open/Show</p>");
+
+    //Add form listeners & close form on ajax success
+    if (e.dialog.data[0].classList.contains('nested-form')) {
+      Fae.form.ajax.htmlListeners();
+
+      $('#fae-modal').on('ajax:success', function (evt, data, status, xhr) {
+        if (Fae.modals.modalOpen) {
+          $.modal.close();
+        }
+      });
+    }
+  });
+
+  $("body").on("modal:shown", function (e) {
+    $(e.relatedTarget).closest('.input').append("<p class='modal-callback modal-callback--shown'>Modal Shown</p>");
+  });
+
+
+  $("body").on("modal:close", function (e) {
+    $(e.relatedTarget ).closest('.input').append( "<p class='modal-callback modal-callback--close'>Modal Close</p>" );
+  });
+
+  $("body").on("modal:closed", function (e) {
+    $(e.relatedTarget).closest('.input').append("<p class='modal-callback modal-callback--closed'>Modal Closed</p>");
+  });
 });

spec/dummy/app/views/admin/aromas/_form.html.slim

@@ -19,7 +19,8 @@ ruby:
   = fae_input f, :live
   = fae_image_form f, :image
   = f.hidden_field :release_id
-  = fae_association f, :cats
+  = fae_association f, :cats, helper_text: "Select from existing categories, or <a href=\"/admin/cats/new\" id=\"cats\" class=\"js-fae-modal\">add new cat via modal popup</a>.".html_safe
+
 
   = f.submit
   = button_tag 'Cancel', type: 'button', class: 'js-cancel-nested cancel-nested-button'

spec/features/form_helpers/fae_input_spec.rb

@@ -84,4 +84,13 @@
     end
   end
 
+  # TODO: fix spec
+  # scenario 'should display ajax modal popup when link is clicked', js: true do
+  #   expect(page).to_not have_selector('#fae-modal')
+
+  #   page.find('.js-fae-modal').click
+
+  #   expect(page).to have_selector('#fae-modal')
+  # end
+
 end

spec/features/modal_spec.rb

@@ -0,0 +1,46 @@
+require 'spec_helper'
+
+feature 'modal' do
+
+  before(:each) do
+    release = FactoryGirl.create(:release)
+    aroma = FactoryGirl.create(:aroma, release: release, live: true )
+    admin_login
+    visit edit_admin_release_path(release)
+    click_link(aroma.name)
+  end
+
+  scenario 'should display ajax modal popup when link is clicked', js: true do
+
+    within('.js-addedit-form-wrapper') do
+      expect(page).to_not have_selector('#fae-modal')
+
+      page.find('.js-fae-modal').click
+
+      eventually {
+        # TODO: expect modal to be open
+        # expect(page).to have_selector('#fae-modal')
+        expect(page).to have_selector('.modal-callback--show')
+        expect(page).to have_selector('.modal-callback--shown')
+      }
+    end
+  end
+
+  # TODO: fix spec
+  # scenario 'when ajax modal is closed', js: true do
+
+  #   within('.js-addedit-form-wrapper') do
+  #     page.find('.js-fae-modal').click
+
+  #     within('#fae-modal') do
+  #       page.find('.simplemodal-close').click
+
+  #       eventually {
+  #         expect(page).to have_selector('.modal-callback--close')
+  #         expect(page).to have_selector('.modal-callback--closed')
+  #       }
+  #     end
+  #   end
+  # end
+
+end