From 5fa601828904bfad7af3499b5c251989f589ae47 Mon Sep 17 00:00:00 2001
From: Aurélien Bompard <aurelien@bompard.org>
Date: Feb 06 2017 23:29:15 +0000
Subject: [PATCH 1/3] Improve the widget-loading system


Avoid passing Python variables to Javascript, this is error-prone.

---

diff --git a/hubs/static/js/utils.js b/hubs/static/js/utils.js
index 01f2382..3474786 100644
--- a/hubs/static/js/utils.js
+++ b/hubs/static/js/utils.js
@@ -12,23 +12,23 @@ var collapse_feed_entries = function(idx) {
 }
 
 // Load widgets
- function setup_widgets(base_url, widgets) {
-   console.log(base_url, widgets);
-   $.each(widgets, function(i, widget) {
-     $.ajax({
-       url: base_url + widget,
-       dataType: 'html',
-       success: function(html) {
-         $('#widget-' + widget).html(html);
-         setTimeout(function() {
-           $('#widget-' + widget + ' .panel').toggleClass('panel-visible');
-         }, 100);
-       },
-       error: function() {
-         $('#widget-' + widget).html('Got an error retrieving this widget.  Sorry :(');
-         console.log('error');
-         console.trace();
-       },
-     });
-   });
- }
+function setup_widgets() {
+    $("div.widget[data-url]").each(function() {
+        var element=$(this);
+        $.ajax({
+            url: element.attr("data-url"),
+            dataType: 'html',
+            success: function(html) {
+                element.html(html);
+                setTimeout(function() {
+                  element.find('.panel').toggleClass('panel-visible');
+                }, 100);
+            },
+            error: function() {
+                element.html('Got an error retrieving this widget.  Sorry :(');
+                console.log('error');
+                console.trace();
+            },
+        });
+    });
+}
diff --git a/hubs/templates/hubs.html b/hubs/templates/hubs.html
index fed9ae6..390949d 100644
--- a/hubs/templates/hubs.html
+++ b/hubs/templates/hubs.html
@@ -155,11 +155,7 @@
           </div>
           {% endif %}
 
-          <div id="left_widgets">
-          {% for widget in hub.left_widgets %}
-            <div id="widget-{{ widget.idx }}" class="widget row"></div>
-          {% endfor %}
-          </div>
+          {% include "includes/left_widgets.html" %}
         </div>
 
         <div class="col-md-{{ hub.right_width }}">
@@ -177,11 +173,7 @@
           </div>
           {% endif %}
 
-          <div id="right_widgets">
-            {% for widget in hub.right_widgets %}
-            <div id="widget-{{ widget.idx }}" class="widget row"></div>
-            {% endfor %}
-          </div>
+          {% include "includes/right_widgets.html" %}
         </div>
 
       </div>  <!-- /row -->
@@ -339,10 +331,7 @@ function visit_counter() {
 $(function() {
   visit_counter()
   
-  setup_widgets(
-    {{ url_for("hub", name=hub.name) }},
-    {{ hub.widgets_idx|tojson }}
-    );
+  setup_widgets();
   setup_edit_btns();
   
   {% if edit -%}
diff --git a/hubs/templates/includes/_rightpanel.html b/hubs/templates/includes/_rightpanel.html
deleted file mode 100644
index 2a9f511..0000000
--- a/hubs/templates/includes/_rightpanel.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<div id="right_widgets">
-  {% for widget in hub.right_widgets %}
-  <div id="widget-{{ widget.idx }}" class="widget row"></div>
-  {% endfor %}
-</div>
diff --git a/hubs/templates/includes/left_widgets.html b/hubs/templates/includes/left_widgets.html
new file mode 100644
index 0000000..b0326e9
--- /dev/null
+++ b/hubs/templates/includes/left_widgets.html
@@ -0,0 +1,7 @@
+<div id="left_widgets">
+{% for widget in hub.left_widgets %}
+  <div id="widget-{{ widget.idx }}" class="widget row"
+       data-url="{{ url_for('widget_render', hub=hub.name, idx=widget.idx) }}"
+       ></div>
+{% endfor %}
+</div>
diff --git a/hubs/templates/includes/right_widgets.html b/hubs/templates/includes/right_widgets.html
new file mode 100644
index 0000000..d9b487a
--- /dev/null
+++ b/hubs/templates/includes/right_widgets.html
@@ -0,0 +1,7 @@
+<div id="right_widgets">
+  {% for widget in hub.right_widgets %}
+  <div id="widget-{{ widget.idx }}" class="widget row"
+       data-url="{{ url_for('widget_render', hub=hub.name, idx=widget.idx) }}"
+       ></div>
+  {% endfor %}
+</div>
diff --git a/hubs/templates/stream.html b/hubs/templates/stream.html
index 278b076..128ff25 100644
--- a/hubs/templates/stream.html
+++ b/hubs/templates/stream.html
@@ -31,7 +31,7 @@
           <div id="streamFeed"></div>
         </div>
         <div class="col-sm-4">
-          {% include "includes/_rightpanel.html" %}
+          {% include "includes/right_widgets.html" %}
         </div>
       </div>
     </div>
@@ -45,7 +45,7 @@
           <div id="actionsFeed"></div>
         </div>
         <div class="col-sm-4">
-          {% include "includes/_rightpanel.html" %}
+          {% include "includes/right_widgets.html" %}
         </div>
       </div>
     </div>
@@ -60,7 +60,7 @@
             {% include "includes/_messages.html" %}
           </div>
           <div class="col-sm-4">
-            {% include "includes/_rightpanel.html" %}
+            {% include "includes/right_widgets.html" %}
           </div>
         </div>
       </div>
@@ -75,7 +75,7 @@
           <div id="savedFeed"></div>
         </div>
         <div class="col-sm-4">
-          {% include "includes/_rightpanel.html" %}
+          {% include "includes/right_widgets.html" %}
         </div>
       </div>
     </div>
@@ -145,10 +145,7 @@
    });
  }
  $(function() {
-   setup_widgets(
-    {{ url_for("hub", name=hub.name) }},
-    {{ hub.widgets_idx|tojson }}
-    );
+   setup_widgets();
    setup_feeds();
  });
 </script>

From 37a6eec05064b1e7575b5044af7438f2fedc6d5d Mon Sep 17 00:00:00 2001
From: Aurélien Bompard <aurelien@bompard.org>
Date: Feb 06 2017 23:29:15 +0000
Subject: [PATCH 2/3] Fix the stream page to not load the widgets 4 times


---

diff --git a/hubs/templates/stream.html b/hubs/templates/stream.html
index 128ff25..8586d2a 100644
--- a/hubs/templates/stream.html
+++ b/hubs/templates/stream.html
@@ -6,81 +6,54 @@
   <h1>My Stream</h1>
   <p>Notifications, actions, and other things of interest to me</p>
 </div>
-<ul class="nav-tabs " role="tablist">
-  <li class="nav-item">
-    <a class="nav-link active" href="#stream" role="tab" data-toggle="tab">My Stream</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#actions" role="tab" data-toggle="tab">My Actions</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#mentions" role="tab" data-toggle="tab">My Mentions</a>
-  </li>
-  <li class="nav-item">
-    <a class="nav-link" href="#saved" role="tab" data-toggle="tab">Saved Notifications</a>
-  </li>
-</ul>
 
-<!-- Tab panes -->
-<div class="tab-content">
-  <div role="tabpanel" class="tab-pane fade in active" id="stream">
-    <div class="container">
-      <div class="row">
-        <div class="col-sm-8 pull-left">
-          {% include "includes/_searchstream.html" %}
-          <div id="streamFeed"></div>
-        </div>
-        <div class="col-sm-4">
-          {% include "includes/right_widgets.html" %}
-        </div>
-      </div>
-    </div>
-  </div>
+<div class="row">
+  <div class="col-sm-8">
 
-  <div role="tabpanel" class="tab-pane fade" id="actions">
-    <div class="container">
-      <div class="row">
+    <ul class="nav-tabs " role="tablist">
+      <li class="nav-item">
+        <a class="nav-link active" href="#stream" role="tab" data-toggle="tab">My Stream</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#actions" role="tab" data-toggle="tab">My Actions</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#mentions" role="tab" data-toggle="tab">My Mentions</a>
+      </li>
+      <li class="nav-item">
+        <a class="nav-link" href="#saved" role="tab" data-toggle="tab">Saved Notifications</a>
+      </li>
+    </ul>
+
+    <!-- Tab panes -->
+    <div class="tab-content">
+      <div role="tabpanel" class="tab-pane fade in active" id="stream">
         {% include "includes/_searchstream.html" %}
-        <div class="col-sm-8 pull-left">
-          <div id="actionsFeed"></div>
-        </div>
-        <div class="col-sm-4">
-          {% include "includes/right_widgets.html" %}
-        </div>
+        <div id="streamFeed"></div>
       </div>
-    </div>
-  </div>
-  <div role="tabpanel" class="tab-pane fade" id="mentions">
-    <div class="container">
-      <div class="row">
+      <div role="tabpanel" class="tab-pane fade" id="actions">
+        {% include "includes/_searchstream.html" %}
+        <div id="actionsFeed"></div>
+      </div>
+      <div role="tabpanel" class="tab-pane fade" id="mentions">
         {% include "includes/_searchstream.html" %}
         <br/>
-        <div class="col-sm-8 pull-left">
-          <div id="mentionsFeed">
-            {% include "includes/_messages.html" %}
-          </div>
-          <div class="col-sm-4">
-            {% include "includes/right_widgets.html" %}
-          </div>
+        <div id="mentionsFeed">
+          {% include "includes/_messages.html" %}
         </div>
       </div>
-    </div>
-  </div>
-  <div role="tabpanel" class="tab-pane fade" id="saved">
-    <div class="container">
-      <div class="row">
-        <br/>
+      <div role="tabpanel" class="tab-pane fade" id="saved">
         {% include "includes/_searchstream.html" %}
-        <div class="col-sm-8 pull-left">
-          <div id="savedFeed"></div>
-        </div>
-        <div class="col-sm-4">
-          {% include "includes/right_widgets.html" %}
-        </div>
+        <div id="savedFeed"></div>
       </div>
     </div>
   </div>
+
+  <div class="col-sm-4">
+    {% include "includes/right_widgets.html" %}
+  </div>
 </div>
+
 <style>
  .jumbotron {
    margin-bottom: 0;

From 2f5b162d8572ddd0ecc2292b51164711103f6804 Mon Sep 17 00:00:00 2001
From: Aurélien Bompard <aurelien@bompard.org>
Date: Feb 06 2017 23:29:15 +0000
Subject: [PATCH 3/3] Fix a CSS glitch on the hubs page


---

diff --git a/hubs/templates/hubs.html b/hubs/templates/hubs.html
index 390949d..f5628f0 100644
--- a/hubs/templates/hubs.html
+++ b/hubs/templates/hubs.html
@@ -30,7 +30,7 @@
       {% endif %}
     </nav>
   
-    <div class="col-md-10 col-md-offset-2">
+    <div class="col-md-10">
       <div class="row">
         
         <!-- Left side of header -->