Rework the invitation menu

Fix #17

lib/Vroom/I18N/en.pm

@@ -40,6 +40,9 @@ our %Lexicon = (
   "ROOM_NAME"                            => "Room name",
   "RANDOM_IF_EMPTY"                      => "If you let this field empty, a random name will be given to the room",
   "ROOM_s"                               => "room %s",
+  "INVITE_PEOPLE"                        => "Invite other people",
+  "TO_INVITE_SHARE_THIS_URL"             => "Send this address to anyone and he will be able to join this room",
+  "YOU_CAN_INVITE_BY_MAIL"               => "You can also directly send an invitation by email",
   "EMAIL_INVITE"                         => "Email invite",
   "SEND_INVITE"                          => "Send an email invitation",
   "DISPLAY_NAME"                         => "Display name",

lib/Vroom/I18N/fr.pm

@@ -43,6 +43,9 @@ our %Lexicon = (
     "ROOM_NAME"                                 => "Nom du salon",
     "RANDOM_IF_EMPTY"                           => "Si vous laissez ce champs vide, un nom aléatoire sera donné au salon",
     "ROOM_s"                                    => "Salon %s",
+    "INVITE_PEOPLE"                             => "Invitez des participants",
+    "TO_INVITE_SHARE_THIS_URL"                  => "Envoyez cette adresse à d'autres personnes pour qu'elles vous rejoignent",
+    "YOU_CAN_INVITE_BY_MAIL"                    => "Vous pouvez aussi envoyer une invitation directement par email",
     "SEND_INVITE"                               => "Envoyez une invitation par mail",
     "EMAIL_INVITE"                              => "Inviter par email",
     "DISPLAY_NAME"                              => "Nom",

public/css/vroom.css

@@ -73,6 +73,9 @@
   max-width: 700px;
   margin: auto;
 }
+#inviteMenu {
+  min-width: 400px;
+}
 #chatBox {
   max-height:300px;
   resize:none;

public/js/vroom.js

@@ -30,7 +30,8 @@ var locale = {
   ROOM_LOCKED_BY_s: '',
   ROOM_UNLOCKED_BY_s: '',
   CANT_SEND_TO_s: '',
-  SCREEN_s: ''
+  SCREEN_s: '',
+  TO_INVITE_SHARE_THIS_URL: ''
 };
 
 // Localize the strings we need
@@ -46,6 +47,12 @@ $.ajax({
   }
 });
 
+// Popup with the URL to share
+function inviteUrlPopup(){
+  window.prompt(locale.TO_INVITE_SHARE_THIS_URL, window.location.href);
+  return false;
+}
+
 function initVroom(room) {
 
   var peers = {
@@ -442,6 +449,10 @@ function initVroom(room) {
     }
   });
 
+  // Do not close the dropdown menu when filling the email recipient
+  $("#inviteDropdownContainer").on("click", "li", function(e){
+    e.stopPropagation();
+  });
   // Handle Email Invitation
   $('#inviteEmail').submit(function(event) {
     event.preventDefault();

templates/default/join.html.ep

@@ -12,17 +12,40 @@
       </div>
       <input id="roomName" name="roomName" type="hidden" value="<%= $room %>"/>
       <div id="roomToolBar" class="collapse navbar-collapse">
-        <form class="navbar-form navbar-left input-group" id="inviteEmail" action="" method="post">
+        <div id="inviteDropdownContainer" class="navbar-form navbar-left input-group">
-          <div class="input-group">
+          <button class="btn btn-default dropdown-toggle help" type="button" id="inviteMenuButton" data-toggle="dropdown" data-toggle="tooltip" data-placement="bottom" title="<%=l 'INVITE_PEOPLE' %>">
-            <input type="email" id="recipient" class="form-control help" placeholder="<%=l 'EMAIL_INVITE' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>"/>
+            <span class="glyphicon glyphicon-user"></span>
-            <span class="input-group-btn">
+            <span class="caret"></span>
-              <button id="inviteEmailButton" type="submit" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>">
+          </button>
-                <span class="glyphicon glyphicon-send">
+          <ul class="dropdown-menu" role="menu" aria-labelledby="inviteMenuButton" id="inviteMenu">
-                </span>
+            <li>
-              </button>
+              <center>
-            </span>
+                <p><%=l 'TO_INVITE_SHARE_THIS_URL' %></p>
-          </div>
+                <% my $url = $self->url_for('/')->to_abs;
-        </form>
+                   $url .= ($url =~ m/\/$/) ? '':'/';
+                %>
+                <h4><a href="javascript:void(0)" onclick="inviteUrlPopup();"><%= $url . $room %></a></h4>
+              </center>
+            </li>
+            <li class="divider"></li>
+            <li>
+              <form class="navbar-form" id="inviteEmail" action="" method="post">
+                <center>
+                  <p><%=l 'YOU_CAN_INVITE_BY_MAIL' %></p>
+                </center>
+                <div class="input-group">
+                  <input type="email" id="recipient" class="form-control help" placeholder="<%=l 'EMAIL_INVITE' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>"/>
+                  <span class="input-group-btn">
+                    <button id="inviteEmailButton" type="submit" class="btn btn-default help" data-toggle="tooltip" data-placement="bottom" title="<%=l 'SEND_INVITE' %>">
+                      <span class="glyphicon glyphicon-send">
+                      </span>
+                    </button>
+                  </span>
+                </div>
+              </form>
+            </li>
+          </ul>
+        </div>
         <div class="navbar-form navbar-left input-group">
           <div class="input-group">
             <input type="text" id="displayName" class="form-control help" placeholder="<%=l 'YOUR_NAME' %>" data-toggle="tooltip" data-placement="bottom" title="<%=l 'NAME_SENT_TO_OTHERS' %>"/>