RailsBuilder snippet

gistfile1.txt

<div class="rails-builder-snippet">
    <iframe src="/rails_builder?request=<%= request.uuid %>" id="rails-builder-iframe" scrolling="no" seamless="seamless" style="position:absolute; width: 400px; height: 100%; right: 0; top: 0; z-index: 9999999; overflow-y: hidden;"></iframe>
  </div>
  <div id="rails-builder-selected-element" style="position:absolute;top:0;left:0;border: 1px solid grey; background: rgba(0,131,204,0.5);"></div>
  <script type="text/javascript">
    var RailsBuilder = RailsBuilder || {};
    RailsBuilder.request_id = "<%= request.uuid %>";

    ;(function () {
      $(function() {
        var sel_element = $("#rails-builder-selected-element");
        var current_element, props;
        var iframe = document.getElementById("rails-builder-iframe");
        var content = iframe.contentWindow;

        console.log(document.getElementById("rails-builder-selected-element").contentWindow);
        $('body').on('click', 'a, button, input, select', function(e) {
          e.preventDefault();
          e.stopImmediatePropagation();

          current_element = $(this);
          props = current_element[0].getBoundingClientRect();
          sel_element.css(props);
          console.log(current_element);
          content.postMessage(JSON.stringify({ id: current_element[0].id, classNames: current_element[0].className, tagName: current_element[0].tagName.toLowerCase() }), 'http://studyfinder.local/');
        });
      });
    })();
  </script>
  
  IN routes...
  
  mount RailsBuilder::Engine => '/rails_builder/', :as => 'rails_builder'