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;
  }