Added 'QR Code generation' as an optional feature

app/assets/javascripts/application.js

@@ -20,6 +20,7 @@
 //= require dataTables/bootstrap/3/jquery.dataTables.bootstrap
 //= require rails-timeago-all
 //= require bootstrap-sprockets
+//= require qrcode/qrcode.js
 //= require turbolinks
 //= require_self
 //= require_tree .

app/assets/javascripts/landing.js

@@ -16,6 +16,8 @@
 
 (function() {
 
+  var qrcode;
+
   var waitForModerator = function(url) {
     localStorage.setItem("waitingName", $('.meeting-user-name').val());
     $.post(url + "/wait", {name: $('.meeting-user-name').val()}, function(html) {
@@ -131,6 +133,10 @@
         .tooltip('fixTitle');
     });
 
+    $('.center-panel-wrapper').on('mouseleave', '.meeting-url-copy', function () {
+      $(this).blur();
+    });
+
     // button used to send invitations to the meeting (i.e. "mailto:" link)
     $('.center-panel-wrapper').on('click', '.meeting-invite', function () {
       var meetingURL = Meeting.getInstance().getURL();
@@ -140,7 +146,43 @@
       window.open(mailto);
     });
 
-    $('.center-panel-wrapper').on('mouseleave', '.meeting-url-copy', function () {
+    $('.center-panel-wrapper').on ('click', '.meeting-url-qrcode', function () {
+      var meetingURL;
+
+      try {
+        meetingURL = $('.meeting-url').val();
+        if ($('.meeting-url-qrcode-group').is(':empty')) {
+          // generate code
+          qrcode = new QRCode($(".meeting-url-qrcode-group")[0], {
+                text: meetingURL,
+                width: 128,
+                height: 128,
+                colorDark : "#000000",
+                colorLight : "#ffffff",
+                correctLevel : QRCode.CorrectLevel.H
+              });
+        } else {
+          // clear the code.
+          qrcode.clear();
+          // make another code.
+          qrcode.makeCode(meetingURL);
+        }
+        $(this).trigger('hint', [$(this).data('qrcode-generated-hint')]);
+      } catch (err) {
+        $(this).trigger('hint', [$(this).data('qrcode-generate-error')]);
+      }
+    });
+
+    $('.center-panel-wrapper').on('hint', '.meeting-url-qrcode', function (event, msg) {
+      $(this).focus();
+      $(this).attr('title', msg)
+        .tooltip('fixTitle')
+        .tooltip('show')
+        .attr('title', $(this).data('qrcode-generate-hint'))
+        .tooltip('fixTitle');
+    });
+
+    $('.center-panel-wrapper').on('mouseleave', '.meeting-url-qrcode', function () {
       $(this).blur();
     });
 
@@ -191,6 +233,9 @@
       } else {
         $('.invite-join-wrapper').removeClass('hidden');
       }
+      if (!$('.meeting-url-qrcode-group').is(':empty')) {
+        $('.meeting-url-qrcode-group').empty();
+      }
     });
 
     PreviousMeetings.init('joinedMeetings');
@@ -214,6 +259,9 @@
       } else {
         $('.invite-join-wrapper').removeClass('hidden');
       }
+      if (!$('.meeting-url-qrcode-group').is(':empty')) {
+        $('.meeting-url-qrcode-group').empty();
+      }
     });
 
     if ($(".page-wrapper.rooms").data('main-room')) {

app/assets/stylesheets/main/landing.scss

@@ -16,7 +16,15 @@
 
 .meeting-url-button-group {
   padding-top: 5px;
-  width: 100px;
+  width: 150px;
+  text-align: center;
+}
+
+.meeting-url-qrcode-group {
+  padding-top: 5px;
+  width: 128px;
+  height: 128px;
+  text-align: center;
 }
 
 .previously-joined, .actives {
@@ -98,7 +106,7 @@
 .disabled-button {
     opacity: 0.5;
 }
-  
+
 .youtube-red {
   color: red;
 }
@@ -122,5 +130,5 @@
  #youtube-footer{
    font-size: 10px;
    text-align: center;
-   margin-top: 10px; 
+   margin-top: 10px;
  }

app/controllers/application_controller.rb

@@ -46,4 +46,9 @@ class ApplicationController < ActionController::Base
     USER_NAME_LIMIT
   end
   helper_method :user_name_limit
+
+  def qrcode_generation_enabled
+    Rails.configuration.enable_qrcode_generation
+  end
+  helper_method :qrcode_generation_enabled
 end

app/views/shared/_meeting_url.html.erb

@@ -26,8 +26,8 @@
     <% subject = t('meeting_invite.not_signed_in.subject') %>
   <% end %>
 
-  <div class="center-block meeting-url-button-group">
-    <button type="button" class="btn btn-default meeting-url-copy has-tooltip pull-left"
+  <div class="meeting-url-button-group center-block">
+    <button type="button" class="btn btn-default meeting-url-copy has-tooltip"
       title="<%= t('url_copy_explanation') %>"
       data-copied-hint="<%= t('copied') %>"
       data-copy-error="<%= t('copy_error') %>"
@@ -36,12 +36,24 @@
       <%= icon('clipboard') %>
     </button>
 
-    <button type="button" class="btn btn-default meeting-invite has-tooltip pull-right"
+    <button type="button" class="btn btn-default meeting-invite has-tooltip"
       title="<%= t('meeting_invite.explanation') %>"
       data-invite-body="<%= body %>"
       data-invite-subject="<%= subject %>"
     >
       <%= icon('envelope-o') %>
     </button>
+
+    <% if qrcode_generation_enabled %>
+    <button type="button" class="btn btn-default meeting-url-qrcode has-tooltip"
+      title="<%= t('qrcode.explanation') %>"
+      data-qrcode-generated-hint="<%= t('qrcode.generated') %>"
+      data-qrcode-generate-error="<%= t('qrcode.generate_error') %>"
+      data-qrcode-generate-hint="<%= t('qrcode.explanation') %>"
+    >
+      <%= icon('qrcode') %>
+    </button>
+    <% end %>
   </div>
+  <div class="meeting-url-qrcode-group center-block has-tooltip"></div>
 </div>