Skip to content

Instantly share code, notes, and snippets.

@blackjk3
Last active December 31, 2015 06:18
Show Gist options
  • Save blackjk3/7946199 to your computer and use it in GitHub Desktop.
Save blackjk3/7946199 to your computer and use it in GitHub Desktop.
RailsBuilder snippet
<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'
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment