'responsive' option for embed; X-Frame-Options:DENY for non-embed URL

app.py

 import os
-from flask import Flask, jsonify, render_template, request, abort
+from flask import Flask, jsonify, make_response, render_template, request, abort
 from flask.ext.bower import Bower
 from jinja2.exceptions import TemplateNotFound
 from sqlalchemy.orm import joinedload
@@ -26,7 +26,9 @@ def map():
     # TODO: serve different agency depending on cookie (or special domain)
     agency_tag = app.config['AGENCIES'][0]
     agency = db.session.query(Agency).filter(Agency.tag==agency_tag).one()
-    return render_template('map.html', agency=agency, config=app.config)
+    r = make_response(render_template('map.html', agency=agency, config=app.config))
+    r.headers.add('X-Frame-Options', 'DENY')
+    return r
 
 @app.route('/e')
 def map_embed():

static/js/embed.js

 /* Logic for embed code generator form */
 
 var updateCode = function() {
-    var code = $("#embed-preview").html();
-    $("#embed-code").html(code.trim());
+    // Grab HTML representation of preview; trim whitespace.
+    var code = $("#embed-preview").html().trim();
+    // Remove empty style attribute. OCD is good!
+    code = code.replace(" style=''","");
+    code = code.replace(' style=""',"");
+    // Put it in the textarea.
+    $("#embed-code").html(code);
 }
 
+// OnChange event handlers for Embed Options form
 $("#embed-height").change(function() {
     $("#embed-preview iframe").attr('height', $(this).val() + "px");
-    updateCode();
 });
 $("#embed-width").change(function() {
     $("#embed-preview iframe").attr('width', $(this).val() + "px");
+});
+$("#embed-responsive").change(function() {
+    if ($(this).prop("checked")) {
+        $("#embed-preview iframe").css('max-width', '100%');
+    } else {
+        $("#embed-preview iframe").css('max-width', '');
+    }
+});
+$("#embed-form :input").change(function() {
     updateCode();
 });
+
+// Hilight code for easy copying
 $("#embed-code").on('focus click keydown keyup', function() {
     $(this).select();
 });
 
-updateCode();
+// Fire a fake change event to ensure sync between form, preview, and code.
+$("#embed-form :input").change();

templates/modal-embed.html

@@ -3,10 +3,10 @@
     This map can be used in websites, displays, or digital signage solutions. To embed a list of predictions instead, change the <strong>Mode</strong> selector.
 </p>
 <h3>Embed Code</h3>
-<textarea id="embed-code" cols=100 rows=3  readonly=true></textarea>
+<textarea id="embed-code" cols=100 rows=3  readonly=true><!-- Loading... --></textarea>
 <h3>Preview</h3>
 <div id="embed-preview">
-<iframe src="{{ url_for('map_embed', _external=True, _scheme='') }}" width="400px" height="250px" frameborder=0></iframe>
+<iframe src="{{ url_for('map_embed', _external=True, _scheme='') }}" frameborder=0></iframe>
 </div>
 <h3>Options</h3>
 <form id="embed-form">