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");
+      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 {
+.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 @@
       }
     }
   }
+
 }

app/views/shared/_meeting_url.html.erb

@@ -1,13 +1,15 @@
 <div <%= "hidden" if hidden %> class="meeting-url-wrapper">
   <div class="input-group">
-    <input type="text" readonly="readonly" class="form-control meeting-url"/>
+    <input type="text" class="form-control meeting-url"/>
     <span class="input-group-btn">
-      <button type="button" class="btn btn-default meeting-url-copy">
+      <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') %>"
+        data-copy-hint="<%= t('url_copy_explanation') %>"
+      >
         <i class="fa fa-paperclip" aria-hidden="true"></i>
       </button>
     </span>
   </div>
-  <small>
-    <em><%= t('url_copy_explanation') %></em>
-  </small>
 </div>

config/locales/en-us.yml

@@ -29,6 +29,8 @@ en-US:
     recording_deleted: Recording was deleted
     recording_published: Recording was published
     recording_unpublished: Recording was unpublished
+  copied: Copied
+  copy_error: Use Ctrl-c to copy
   date_recorded: Date Recorded
   duration: Duration
   end: End