← Snippets - Script

Insert Modal Links Inside Content Editor Table

For the times when there’s a table that has modals. This script does a few things in the CMS only.

  1. Insert a tip box below the content container where modal links will appear depending on how many columns in the table they have.
  2. After closing a modal, check if the modal has content. If it does, ask the user to either accept the link text based on the column header or enter a custom one.
  3. If the modal is empty, ask the user if they want to remove the link from the table.

Notes

  • This example is for a product table - so the editor area is within a container with an id of products-table.
  • This example has a max of 8 modals. If you have more or less available, change the 8 within if (c <= 8) in the script below.
  • BootStrap 4 classes are used
  • Reference Site (on their Checking/Savings pages): http://oakstarbank-new2021-uat.banno.com/

jQuery

place within section for inCms only

    // add links for inserting modal links on product tables
    $('#products-table .content').on('blur', function(){
      var $tbl = $(this).find('table');

      // only create these links if there is a table
      if ($tbl.length > 0){
        var colsNum = $('tbody > tr:last-child > td', $tbl).length + 1;

        $('#products-table').after('<div class="product-modal-btns mb-75 text-center p-2 container container--narrow"><em class="d-block mb-1 small">Edit modals available for this table based on the number of columns there are. To access more modals, first insert more columns in the table, then click out of the editor. You have up to 8 modals available. After closing a modal, you will be prompted to enter text for a modal link to replace content in the respective column on the last row of the table.</em></div>');

        // only insert modal links to match number of columns, up to 8 (not counting the first column)
        for (var c = 1; c < colsNum; c++){
          if (c <= 8){
            var colName = $('#products-table thead th:nth-child('+ (c+1) +')').text();
            $('.product-modal-btns').append('<a class="d-inline-block mt-2 mx-15" href="#modal'+ c +'" data-toggle="modal" aria-controls="modal'+ c +'" aria-haspopup="true">Edit "'+ colName + '" Modal</a>');
          }
        }
      }
    });

    // check modal after closing
    $('#products-table .modal').on('hide.bs.modal', function(){
      var col = $(this).index();
      var tblCell = $('#products-table tbody > tr:last-child td:nth-child('+ (col+1) +')');

      // if modal has content
      if ($.trim($('.content', this).text()).length){
        var defaultText = 'More on ' + $('#products-table thead th:nth-child('+ (col+1) +')').text();
        var customText = window.prompt('Enter custom text for this modal\'s trigger link: ', defaultText);
        var linkText = customText && $.trim(customText).length ? customText : defaultText;

        tblCell.html('<a href="#modal'+ col +'" data-toggle="modal" aria-controls="modal'+ col +'" aria-haspopup="true">'+ linkText +'</a>');
      } else {
        if (window.confirm('This modal has no content. Do you want to remove its corresponding link from the table?')){
          tblCell.html('');
        }
      }
    })

Html

Use this as a starting point for your modals. Include them within the container (products-table for this example). {% raw %}

<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="modal1Title">
  <div class="modal-dialog" role="document">
    <div class="modal__inner">
      <div class="content" data-content-block="modal1header" data-content="content" data-editable="editable">
        {{#page.modal1header}}
          {{& content}}
        {{/page.modal1header}}
        <!-- @if NODE_ENV!='production' -->
        <h2>Modal 1 Header</h2>
        <!-- @endif -->
      </div>
      <button class="icon icon-close ml-auto" data-dismiss="modal" aria-controls="modal1" aria-describedby="modal1Title">
        <span class="sr-only">Close</span>
      </button>
      <div class="w-100"></div>
      <div class="modal__body">
        <div class="content" data-content-block="modal1body" data-content="content" data-editable="editable">
          {{#page.modal1body}}
            {{& content}}
          {{/page.modal1body}}
          <!-- @if NODE_ENV!='production' -->
          <h3>Modal Sub Header (h3)</h3>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam optio, hic perferendis, voluptatem maiores eum voluptas cum similique, delectus, obcaecati vitae in reprehenderit nam quibusdam eius fuga odit iusto rerum!</div>
          <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magnam optio, hic perferendis, voluptatem maiores eum voluptas cum similique, delectus, obcaecati vitae in reprehenderit nam quibusdam eius fuga odit iusto rerum!</div>
          <!-- @endif -->
        </div>
      </div>
    </div>
  </div>
</div>

{% endraw %} Tags: BS4, Bootstrap 4, jQuery, Html, Modals, Banno, JavaScript