Make BrowserCompat Editable

How to get data back from rendered BrowserCompat HTML partial

by Renoir Boulanger

HTML

<link rel="stylesheet" href="https://stephaniehobson.github.io/browsercompat/4.0/compat.css">
<link rel="stylesheet" href="https://stephaniehobson.github.io/browsercompat/wiki-min.css">
<table class="bc-table">
    <thead>
        <tr class="bc-mediums">
            <td></td>
            <th class="" colspan="5">
                <abbr class="only-icon" title="Desktop">
                    <span>Desktop</span>
                    <i aria-hidden="true" class="ic-desktop"></i>
                </abbr>
            </th>
            <th colspan="5" class="bc-browsers-safari">
                <abbr class="only-icon" title="Opera Mobile">
                    <span>Opera Mobile</span>
                    <i aria-hidden="true" class="ic-mobile"></i>
                </abbr>
            </th>
        </tr>
        <tr class="bc-browsers">
            <td></td>
            <th class="bc-browser-chrome">
                <abbr class="only-icon" title="Chrome for Desktop">
                    <span>Chrome for Desktop</span>
                    <i aria-hidden="true" class="ic-chrome"></i>
                </abbr>
            </th>

            <th class="bc-browser-firefox">
                <abbr class="only-icon" title="Firefox for Desktop">
                    <span>Firefox for Desktop</span>
                    <i aria-hidden="true" class="ic-firefox"></i>
                </abbr>
            </th>

            <th class="bc-browser-internet-explorer">
                <abbr class="only-icon" title="Internet Explorer for Desktop">
                    <span>Internet Explorer for Desktop</span>
                    <i aria-hidden="true" class="ic-ie"></i>
                </abbr>
            </th>

            <th class="bc-browser-opera">
                <abbr class="only-icon" title="Opera for Desktop">
                    <span>Opera for Desktop</span>
                    <i aria-hidden="true" class="ic-opera"></i>
                </abbr>
            </th>

            <th...

CSS

.black_overlay{
  display: none;
  position: fixed;
  top: 0%;
  left: 0%;
  width: 100%;
  height: 100%;
  background-color: black;
  z-index:1001;
  -moz-opacity: 0.8;
  opacity:.80;
  filter: alpha(opacity=80);
}

.content_overlay {
  display: none;
  position: fixed;
  top: 25%;
  left: 25%;
  padding: 10px;
  border: 10px solid #EAEFF2;
  background-color: white;
  z-index:1002;
  overflow: auto;
}

JavaScript

var editButtonTemplate = '<button name="edit" class="button positive btn-edit" title="edit"><i class="icon-edit" aria-hidden="true" title="Edit"></i></button>',
        lightboxTemplate = '<div id="compatLightbox" class="content_overlay"><h2>Edit this table</h2><form id="editCompatForm"></form><a href="#" data-trigger="close">Close</a></div><div id="fade" class="black_overlay"></div>';


    $(document).one('mouseover', '.bc-table', function(event) {
        var currentTarget = $(event.currentTarget),
            isTransformed = currentTarget.data('transformed') || false;

        if (isTransformed === false) {

            /**
             * Add edit button
             */
            currentTarget.find('.bc-mediums td:first-child').each(function(index, domObj) {
                var newButton = $(editButtonTemplate).appendTo(domObj);
                $(domObj).css('text-align', 'left'); // Temporary visual adjustment
            });

            /**
             * Add metadata to browser colums
             *
             * Each browser column represent a browser, lets create an index map to merge them up
             * later.
             */
            currentTarget.find('thead .bc-browsers th').each(function(browserColIndex, browserHeading) {
                var slug = $(browserHeading).attr('class').replace('bc-browser-', '');
                $(browserHeading)
                    .attr('data-browsers', browserColIndex)
                    .attr('data-item-slug', escape(slug));
            });

            /**
             * Each row represent a child-feature "supports"
             *
             * Add index mapping of features, each of them will have a list of browser
             * with a matching browser
             */
            currentTarget.find('tbody tr').each(function(featureIndex, featureRowObj) {
                var currFeatureLabel = $(featureRowObj).find('th:first-child');
                if (!!currFeatureLabel[0]) {
                    var...