made iframes draggable

4 years ago · db00617080
3 changed files with 35 additions and 8 deletions
--- a/hello.py
+++ b/hello.py
@ -3,6 +3,19 @@ from flask import render_template

 app = Flask(__name__)

+@app.context_processor
+def override_url_for():
+    return dict(url_for=dated_url_for)
+
+def dated_url_for(endpoint, **values):
+    if endpoint == 'static':
+        filename = values.get('filename', None)
+        if filename:
+            file_path = os.path.join(app.root_path,
+                                 endpoint, filename)
+            values['q'] = int(os.stat(file_path).st_mtime)
+    return url_for(endpoint, **values)
+
@app.route('/')
 def hello_world():
    return 'Hello, World!'
--- a/static/css/style.css
+++ b/static/css/style.css
@ -1,13 +1,24 @@
+* {
+  background-color: gray;
+}

 #video1 {
-  padding-top: 100px;
+  margin-top: 300px;
+}
+
+.draggable {
+  position: absolute;
 }

 .draggable img {
  opacity: 0.7;
+}
+
+.draggable iframe {
+  padding: 20px;
+}
 #video2 {
-  padding-top: 100px;
-  position: relative;
+ margin-top: 100px;
 }

 #audio1 {
--- a/templates/perspectiveA.html
+++ b/templates/perspectiveA.html
@ -1,7 +1,10 @@
 <!doctype html>
 <html>
+<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
+<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
+<script src="../static/js/draggable.js"></script>
 <head>
-  <link rel="stylesheet" href="../static/css/style.css">
+  <link rel="stylesheet" href="../static/css/style.css?q=1280549780">
  <title>Perspective A</title>
 </head>
 <body>
@ -10,11 +13,11 @@
    <audio controls src="../static/audio/turkish_march.ogg" type="audio/ogg"></audio>

  </div>
-  <div id="video1">
-  <iframe width="420" height="281" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+  <div class="draggable">
+  <iframe id="video1" width="120" height="120" src="https://www.youtube.com/embed/fKOKxuFyEdg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
-<div id="video2">
-<iframe width="340" height="250" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
+<div class="draggable">
+<iframe id="video2" width="120" height="120" src="https://www.youtube.com/embed/5_9PAugYb4s" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
 </div>
 </body>
 </html>