如何将数据从Ruby循环传递到纯JavaScript模式（而不是Bootstrap）

Question

I want a grid of projects represented by cards. Clicking each card you get a modal with details for the project (title, banner image, description etc). I am using Middleman static site generator.

I created a projects.yml file in a data folder:

"Project 1":
     project_id: 1
     card:
         selector: HTML5-CSS3-JavaScript
         image: project1-card.jpg
         text: Middleman · HTML5 & CSS3 · Ruby
     modal:
         title: A personal website.
         img_banner: project1-modal.jpg
         description:
             title_left: What is it?
             text_left:  A portfolio built with Middleman
             title_right: Categories
             text_right: HTML CSS Ruby Javascript
             title_middle: whatever
         body:
             title_1: My personal website with Middleman
             text_1: Lorem ipsum dolor sit amet....
         etc.....

"Project 2":
    project_id: 2
    card:
        selector: RubyOnRails
        image: project2-card.jpg
        text: Rails · HTML5 & CSS3 · Ruby
    modal: 
        title: A yelp clone
        img_banner: project2-modal.jpg
        description:
            title_left: What is it?
            text_left:  A yelp clone
            title_right: Categories
            text_right: HTML CSS Ruby Rails
            title_middle: whatever
        body:
            title_1: A yelp clone built with Rails
            text_1: Lorem ipsum dolor sit amet....
        etc.....
etc....

In projects.html.erb my Ruby iteration is like this:

<div class="shuffle-grid">
<% data.projects.each do |project, details| %>
    <div class="item trigger" data-category="<%= details.card.selector %>" data-modal-title="<%= details.modal.title %>" data-modal-img-banner="<%= details.modal.img_banner %>" data-modal-description-title-left="<%= details.modal.description.title_left %>" data-modal-description-text-left="<%= details.modal.description.text_left %>" data-modal-description-title-right="<%= details.modal.description.title_right %>" data-modal-description-text-right="<%= details.modal.description.text_right %>" >
        <div class="padded-card">
            <div class="img-container"><%= image_tag <%= details.card.image %> %></div>
            <div class="text-padd">
                <div><h3><%= project %></h3></div>
                <div><h4><%= details.card.text %></h4></div>
            </div>
       </div>
  </div >
<% end %>
</div>

And right after comes the modal:

<div class="modal-overlay closed" id="modal-overlay"></div>
<div class="modal closed" id="modal">
    <button class="close-button" id="close-button">Close</button>
    <div class="modal-inner">
        <div id='title-id'></div>
        <div id='image-id'></div>
        <div id='description-title_left-id'></div>
        <div id='description-text_left-id'></div>
        <div id='description-title_right-id'></div>
        <div id='description-text_right-id'></div>
        etc...
    </div>
</div>

Obviously I know the solution I found is clunky passing all the parameters one by one in data-attributes and retrieving them in my javascript:

 window.onload = function () {
    'use strict';
     var modal = document.querySelector("#modal");
     var modalOverlay = document.querySelector("#modal-overlay");
     var closeButton = document.querySelector("#close-button");

     closeButton.addEventListener("click", function() {
         modal.classList.toggle("closed");
         modalOverlay.classList.toggle("closed");
     });

    $('.trigger').on('click', function() {
        $('#title-id').html($(this).data('modal-title'));
        var modal_img_banner = $(this).attr('data-modal-img-banner');
        var img_to_insert = "<img src=/images/" + modal_img_banner + ">";
        $('#image-id').html(img_to_insert);
        $('#description-title_left-id').html($(this).data('modal-description-title-left'));
        etc...
        modal.classList.toggle("closed");
        modalOverlay.classList.toggle("closed");
   });
};

What is the best solution in this situation? Is there a way to pass only the id of each project to the modal and then have this id populate each data directly into the view?

If I had used Bootstrap modal instead this is what I could have done using data-target:

<div class="shuffle-grid">
    <% data.projects.each do |project, details| %>
        <div class="item project_id-<%= project_id %>" data-category="<%= details.card.selector %>" data-toggle="modal" data-target="#modal-project-<%= project_id %>">
            <div class="padded-card">
                <div class="img-container"><%= image_tag <%= details.card.image %> %></div>
                <div class="text-padd">
                    <div><h3><%= project %></h3></div>
                    <div><h4><%= details.card.text %></h4></div>
                </div>
           </div>
      </div >
    <% end %>
</div>

And in the modal:

<div class="modal fade" id="modal-project-<%= project_id %>" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>

    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-container">
                <div class="modal-banner">
                    <h2 class="modal-title" id="myModalLabel"><%= details.modal.title %></h2>
                    <%= image_tag details.modal.img_banner %>
                </div>
                <div class="modal-description">
                    <div class="left-col flex1">
                        <div><h4><%= details.modal.description.title_left_1%></h4>
                etc....
                </div>
            </div>
        </div>
    </div>
</div>

What is the trick I am missing? Basically I'd like to do the same as with Bootstrap but with a vanilla JavaScript modal.

Thank you all !

Answer 1

Probably at the time I was overthinking it too much but there is nothing special about Middleman vs Rails. Based on a simple custom pop-up using jQuery and reusing all the code I mentioned above (including same projects.yml), this is I think one example of what I can do:

<div class="shuffle-grid">
  <% data.projects.each do |project, details| %>
  <div class="open-me" data-modal-idx="<%= details.project_id %>">
    <div class="padded-card">
      <div class="img-container"><%= image_tag <%= details.card.image %> %></div>
      <div class="text-padd">
        <div><h3><%= project %></h3></div>
        <div><h4><%= details.card.text %></h4></div>
      </div>
    </div>
  </div >
  <div style="display: none" class="pop-outer" id="pop-outer-<%= details.project_id %>">
    <div class="pop-inner">
      <button class="close-me">X</button>
      <h2>This is a custom pop-up example for card id n°<%= details.project_id %></h2>
      <p><%= details.modal.title %></p>
      <%= image_tag details.modal.img_banner %>
      (...)
    </div>
  </div>
  <% end %>
</div>

Modal is inside the card and jQuery is as follows:

$(document).ready(function(){
  $('.open-me').click(function(){
    var idx = $(this).attr('data-modal-idx');
    var modalOpenMe = $('#pop-outer-' + idx);
    modalOpenMe.fadeIn("slow");
    modalOpenMe.find('.close-me').click(function(){
      modalOpenMe.fadeOut("slow");
    });
  });
});

A bit of css for the pop-up:

.pop-outer {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.pop-inner {
  background-color: #ffff;
  width: 500px;
  height: 350px;
  padding: 30px;
  margin: 15% auto;
}