copy url tooltip

app/assets/javascripts/landing.js

@@ -15,7 +15,7 @@
   var init = function() {
     Meeting.clear();
 
-    // setup click handlers
+    // setup event handlers
     $('.center-panel-wrapper').on ('click', '.meeting-join', function (event) {
       var name = $('.meeting-user-name').val();
       Meeting.getInstance().setName(name);
@@ -54,11 +54,49 @@
 
     $('.center-panel-wrapper').on ('click', '.meeting-url-copy', function (event) {
       meetingURLInput = $('.meeting-url');
+
+      // copy URL
       meetingURLInput.select();
-      document.execCommand("copy");
-      meetingURLInput.blur();
+      try {
+        var success = document.execCommand("copy");
+        if (success) {
+          meetingURLInput.blur();
+          $(this).trigger('hint', [$(this).data('copied-hint')]);
+        } else {
+          $(this).trigger('hint', [$(this).data('copy-error')]);
+        }
+      } catch (err) {
+        $(this).trigger('hint', [$(this).data('copy-error')]);
+      }
     });
 
+    $('.center-panel-wrapper').on('hint', '.meeting-url-copy', function (event, msg) {
+      $(this).focus();
+      $(this).attr('title', msg)
+        .tooltip('fixTitle')
+        .tooltip('show')
+        .attr('title', $(this).data('copy-hint'))
+        .tooltip('fixTitle');
+    });
+
+    $('.center-panel-wrapper').on('mouseleave', '.meeting-url-copy', function (event, msg) {
+      $(this).blur();
+    });
+
+    $('.center-panel-wrapper').on('focus', '.meeting-url', function (event, msg) {
+      $(this).select();
+    });
+
+    // only allow ctrl-c to work
+    $('.center-panel-wrapper').on('keydown', '.meeting-url', function (event, msg) {
+      if(!event.ctrlKey) {
+        event.preventDefault();
+      }
+    });
+
+    // enable tooltips
+    $('[data-toggle="tooltip"]').tooltip()
+
     // enable popovers
     var options = {
       selector: '.has-popover',
@@ -73,7 +111,7 @@
     };
     $('#recordings').popover(options);
 
-    // focus user
+    // focus name input or join button
     if ($('.meeting-user-name').is(':visible')) {
       $('.meeting-user-name').focus();
     } else {

app/assets/stylesheets/landing.scss

@@ -2,11 +2,20 @@
 // They will automatically be included in application.css.
 // You can use Sass (SCSS) here: http://sass-lang.com/
 
-.join-form {
-  width: 100%;
+.center-panel-wrapper {
+  .join-form {
+    width: 100%;
+  }
+
+  .meeting-url-wrapper {
+    .meeting-url {
+      cursor: default;
+    }
+  }
 }
 
 .rooms {
+
   .table-wrapper {
     padding: 40px 50px 10px 50px;
 
@@ -18,4 +27,5 @@
       }
     }
   }
+
 }