Merge 7b41890 into 73cdf4f

kuma/wiki/templates/wiki/document.html

@@ -201,10 +201,8 @@ <h1>{{ document.title }}</h1>
             </ul>
         </div>
         {% endif %}
-
       </div>
       {% endif %}
-
       <!-- start the main content container -->
         <div id="wiki-column-container" class="{% if show_right %}wiki-right-present{% else %}wiki-right-closed wiki-right-none{% endif %} {% if show_left %}wiki-left-present{% else %}wiki-left-closed wiki-left-none{% endif %}">
 
@@ -407,9 +405,13 @@ <h2 class="offscreen">{{ _('Document Tags and Contributors') }}</h2>
     <menuitem data-action="{{ url('wiki.edit_document', document.full_path, locale=document.locale) }}" label="{{_('Edit page')}}"></menuitem>
     <menuitem data-action="{{ url('wiki.document_revisions', document.full_path) }}" label="{{_('View page history')}}"></menuitem>
   </menu>
+
 {% endblock %}
 
 {% block js %}
+  {% if waffle.flag('scrollback_widget') %}
+    {{ js('scrollback', async=True) }}
+  {% endif %}
   <script type="text/javascript">
       if(window.jQuery) jQuery('.from-search-toc').mozSearchResults('{{ search_url|safe }}');
 

kuma/wiki/templates/wiki/includes/document_tag.html

@@ -4,7 +4,14 @@
     <strong>{{_('Tags:')}}</strong>&nbsp;
     <ul class="tags tags-small">
       {% for tag in tags %}
-        <li><a href="{{ url('wiki.tag', tag) }}">{{ tag }}</a></li>
+        <li><a href="{{ url('wiki.tag', tag) }}">{{ tag }}</a>
+          {% if waffle.flag('scrollback_widget') %}
+            {% set lower_name = tag.name.lower() %}
+            {% if settings.SCROLLBACK_ROOM_MAP[lower_name] %}
+              <button class="scrollback-button only-icon transparent" data-username="{{ request.user.username }}" data-room="{{ settings.SCROLLBACK_ROOM_MAP[lower_name] }}"><i class="icon-users" aria-hidden="true"></i><span>{{ _('Chat about {tag}')|f(tag=tag.name) }}</span></button>
+            {% endif %}
+          {% endif %}
+        </li>
       {% endfor %}
     </ul>
   </div>

media/js/libs/scrollback.js

@@ -0,0 +1,36 @@
+/* global document, window, setTimeout*/
+/* exported addScrollback */
+
+(function(win, doc, jQuery) {
+
+    // Open Scrollback upon button click
+    $('.scrollback-button').on('click', function() {
+        var $this = $(this);
+
+        addScrollback($this.attr('data-room'), $this.attr('data-username'));
+    });
+
+    // Functionality for opening the Scrollback widget
+    function addScrollback(roomName, suggestedNick) {
+
+        var host  = 'https://scrollback.io/';
+
+        if(!win.scrollback) {
+            win.scrollback = {
+                room: roomName,
+                form: 'toast',
+                titlebarColor: '#00539f',
+                minimize: false,
+                nick: suggestedNick || 'guest'
+            };
+
+            $.getScript(host + 'client.min.js');
+        }
+        else {
+            $('.scrollback-stream').attr('src', function() {
+                return $(this).attr('src').replace(host, '') + roomName;
+            });
+        }
+    }
+
+})(window, document, jQuery);

settings.py

@@ -770,9 +770,19 @@ def JINJA_CONFIG():
         'fontfaceobserver': (
             'js/libs/fontfaceobserver/fontfaceobserver-standalone.js',
         ),
+        'scrollback': (
+            'js/libs/scrollback.js',
+        )
     },
 }
 
+# Map wiki article tags to scrollback.io rooms
+SCROLLBACK_ROOM_MAP = {
+    'mdn': 'mdn',
+    'css': 'mdn',
+    'javascript': 'mdn',
+}
+
 #
 # Session cookies
 SESSION_COOKIE_SECURE = True