LTI-303: Added a copy icon with copy to clipboard feature (#273)

* LTI-303 - Added a copy icon with clipboard feature * LTI-303: Added a copy icon with copy to clipboard feature * Update Gemfile.lock * LTI-303: Added a copy icon with copy to clipboard feature * Update _form.html.erb --------- Co-authored-by: Jesus Federico <[email protected]>
bigbluebutton · Feb 16, 2024 · e639018 · e639018
1 parent f752141
commit e639018
Show file tree

Hide file tree

Showing 6 changed files with 53 additions and 9 deletions.
diff --git a/app/assets/images/check.svg b/app/assets/images/check.svg
diff --git a/app/assets/images/copy.svg b/app/assets/images/copy.svg
diff --git a/app/javascript/packs/edit.js b/app/javascript/packs/edit.js
@@ -1,22 +1,47 @@
-/* 
+/*
  *  BigBlueButton open source conferencing system - http://www.bigbluebutton.org/.
- *  
+ *
  *  Copyright (c) 2018 BigBlueButton Inc. and by respective authors (see below).
- *  
+ *
  *  This program is free software; you can redistribute it and/or modify it under the
  *  terms of the GNU Lesser General Public License as published by the Free Software
  *  Foundation; either version 3.0 of the License, or (at your option) any later
  *  version.
- *  
+ *
  *  BigBlueButton is distributed in the hope that it will be useful, but WITHOUT ANY
  *  WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A
  *  PARTICULAR PURPOSE. See the GNU Lesser General Public License for more details.
- *  
+ *
  *  You should have received a copy of the GNU Lesser General Public License along
  *  with BigBlueButton; if not, see <http://www.gnu.org/licenses/>.
  */
 
 $(document).on('turbolinks:load', function(){
+    $('#copy-icon-group').on('click', function() {
+        let useSharedCodeCheckbox = $('#use_shared_code_checkbox');
+        let inputField = $('#shared_code_field');
+
+        inputField.removeAttr('disabled');
+        inputField.select();
+        document.execCommand('copy');
+        window.getSelection().removeAllRanges();
+        if (!useSharedCodeCheckbox.prop('checked')) {
+            inputField.attr('disabled', 'true');
+        }
+
+        let copyIcon = $('.copy-icon');
+        copyIcon.css('display', 'none');
+        let checkIcon = $('.check-icon');
+        checkIcon.css('display', 'inline-block');
+        let copiedText = $('#copied-text');
+        copiedText.css('display', 'inline');
+
+        setTimeout(function() {
+            checkIcon.css('display', 'none');
+            copyIcon.css('display', 'inline-block');
+            copiedText.css('display', 'none');
+        }, 2000);
+    })
 
     $('#allModerators_checkbox').on('click', function() {
         var all_mod_checked = $('#allModerators_checkbox').prop("checked");
@@ -30,7 +55,7 @@ $(document).on('turbolinks:load', function(){
         if (wait_mod_checked){
             $('#allModerators_checkbox').prop("checked", false);
         }
-    })  
+    })
 
     function check_record_status(){
         var record_checked = $('#record_checkbox').prop("checked");
@@ -44,7 +69,7 @@ $(document).on('turbolinks:load', function(){
             $('#autoStartRecording_checkbox').prop("disabled", false);
         }
     }
-    
+
     check_record_status(); // check status every time page is loaded
 
     $('#record_checkbox').on('click', function() {
@@ -75,4 +100,5 @@ $(document).on('turbolinks:load', function(){
 
 		checkSharedCodeCheckboxStatus();
 
+
 });
diff --git a/app/javascript/stylesheets/rooms.scss b/app/javascript/stylesheets/rooms.scss
@@ -106,6 +106,14 @@ input.recording-text {
   background-color: white;
 }
 
+.input-group-prepend {
+  display: flex;
+}
+.copy-icon {
+  margin-left: 5px;
+  cursor: pointer;
+}
+
 /* Safari */
 @-webkit-keyframes spin {
   0% { -webkit-transform: rotate(0deg); }

diff --git a/app/views/rooms/_form.html.erb b/app/views/rooms/_form.html.erb
@@ -128,7 +128,15 @@
 	<% if @shared_rooms_enabled %>
 		<div class="field form-group input-group w-full pt-4">
 			<%= form.label t('default.room.code') %>
-			<%= form.text_field :shared_code, class: "form-control input mt-1 block disabled:border-slate-200 disabled:text-slate-500 disabled:shadow-none disabled:bg-slate-100", id: 'shared_code_field', disabled: true %>
+
+      <div class="input-group-prepend">
+			  <%= form.text_field :shared_code, class: "form-control input mt-1 block disabled:border-slate-200 disabled:text-slate-500 disabled:shadow-none disabled:bg-slate-100", id: 'shared_code_field', disabled: true %>
+        <span class="input-group-text" id="copy-icon-group" style="display: flex; justify-content: center; align-items: center;">
+          <%= image_tag('copy.svg', width: '30', height: '30', alt: 'Copy', class: 'copy-icon') %>
+          <%= image_tag('check.svg', width: '30', height: '30', alt: 'Check', class: 'check-icon', style: 'display: none;') %>
+          <span id="copied-text" class="copied-text" style="display: none;"> Copied!</span>
+        </span>
+      </div>
 		</div>
 
 		<% unless flash[:alert] == nil %>

diff --git a/yarn.lock b/yarn.lock
@@ -1095,7 +1095,7 @@
   resolved "https://registry.yarnpkg.com/@tailwindcss/aspect-ratio/-/aspect-ratio-0.4.2.tgz#9ffd52fee8e3c8b20623ff0dcb29e5c21fb0a9ba"
   integrity sha512-8QPrypskfBa7QIMuKHg2TA7BqES6vhBrDLOv8Unb6FcFyd3TjKbc6lcmb9UPQHxfl24sXoJ41ux/H7qQQvfaSQ==
 
-"@tailwindcss/forms@^0.5.3":
+"@tailwindcss/forms@^0.5.6":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@tailwindcss/forms/-/forms-0.5.7.tgz#db5421f062a757b5f828bc9286ba626c6685e821"
   integrity sha512-QE7X69iQI+ZXwldE+rzasvbJiyV/ju1FGHH0Qn2W3FKbuYtqp8LKcy6iSw79fVUT5/Vvf+0XgLCeYVG+UV6hOw==