From 4eefe9451ed9135ace1149cd6d942df860351705 Mon Sep 17 00:00:00 2001
From: Anton Sarukhanov <code@ant.sr>
Date: Wed, 13 Apr 2016 23:03:19 -0400
Subject: [PATCH] 'responsive' option for embed; X-Frame-Options:DENY for
non-embed URL
---
app.py | 6 ++++--
static/js/embed.js | 25 +++++++++++++++++++++----
templates/modal-embed.html | 4 ++--
3 files changed, 27 insertions(+), 8 deletions(-)
diff --git a/app.py b/app.py
index fbd5ea2..a8e4057 100644
--- a/app.py
+++ b/app.py
@@ -1,5 +1,5 @@
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():
diff --git a/static/js/embed.js b/static/js/embed.js
index c7b522d..7107a0e 100644
--- a/static/js/embed.js
+++ b/static/js/embed.js
@@ -1,20 +1,37 @@
/* 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();
diff --git a/templates/modal-embed.html b/templates/modal-embed.html
index 77a9521..9e7aa4b 100644
--- a/templates/modal-embed.html
+++ b/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">
--
GitLab