Merge pull request #366 from TylerTrott/trunk

Fixing copyButton in try atplatform page
atsign-foundation · Jan 14, 2022 · be9c62f · be9c62f
2 parents fb5b668 + 3114d8d
commit be9c62f
Showing 1 changed file with 65 additions and 27 deletions.
diff --git a/content/en/docs/Get-Started/TryAtPlatform.md b/content/en/docs/Get-Started/TryAtPlatform.md
@@ -14,6 +14,15 @@ date: 2021-12-12
   width: 25vw;
 }
 
+.iconDesign{
+  margin-left: 20px;
+  position: relative;
+}
+
+.copytext{
+  display: inline;
+}
+
 @media only screen and (min-width: 950px){
 .content{
   row-gap:20px;
@@ -72,11 +81,8 @@ date: 2021-12-12
   <h4> Step 1: Install the command line toolkit (at_app) </h4>
   <pre style="height:40px; width:400px;overflow:hidden;">
   <div style="margin-left:-15px; margin-top:-50px;">
-  <code style="overflow:hidden;">flutter pub global activate at_app</code>
+  <code content="flutter pub global activate at_app" iconID="icon1" class="copytext" style="overflow:hidden;">flutter pub global activate at_app</code>
   </div>
-  <div style="margin-top:-105px; margin-left:275px;"title="Copy to clipboard" onclick="copyText()">
-        <i id="copyIcon" class="fas fa-copy"></i>
-      </div>
   </pre>
   <!-- End of Step 1 -->
 
@@ -88,56 +94,88 @@ date: 2021-12-12
 Using code format (Read more on at_app <a href="https://pub.dev/packages/at_app/example" target=_blank>here</a>):
 <pre style="height: 40px; width:400px; overflow:hidden;">
   <div style="margin-left:-15px; margin-top:-50px;">
-  <code> at_app create -d snackbar_sender ... </code>
+  <code content="at_app create -d snackbar_sender ..." iconID="icon2" class="copytext">at_app create -d snackbar_sender ...</code>
   <!-- </div> -->
   </div>
-
-  <div style="margin-top:-125px; margin-left:275px;"title="Copy to clipboard" onclick="copyText2()">
-        <i id="copyIcon2" class="fas fa-copy"></i>
-      </div>
   </pre>
    <b> Note: </b>  Replace "..." with the folder you wish to create your project in.
    <br>
     <!-- End of Step 2 -->
 
+ <!-- Step 3 -->
+<h4> Step 3: Run the project </h4>
+Using code format (Read more on at_app <a href="https://pub.dev/packages/at_app/example" target=_blank>here</a>):
+<pre style="height: 40px; width:400px; overflow:hidden;">
+  <div style="margin-left:-15px; margin-top:-50px;">
+  <code> at_app create -d snackbar_sender ... </code>
+  <!-- </div> -->
+  </div>
+  </pre>
+   <b> Note: </b>  Replace "..." with the folder you wish to create your project in.
+   <br>
+
+  <!-- End of Step 2 -->
+
 <br>
 
-  <!-- Step 3 -->
+  <!-- Step 4 -->
 
-<h4> Step 3: Onboard an @sign </h4>
+<h4> Step 4: Onboard an @sign </h4>
 Watch the GIF below to see how to get a free @sign within the app itself! If you'd like to purchase an @sign or would simply like to create and receive any type of @sign on the website, feel free to go to <a href="https://my.atsign.com/go">atsign.com</a>.
 <br></br>
 
 <img src="/Sample_Apps/croppedWT.gif" style="height:600px;">
 
-  <!-- End of Step 3 -->
+  <!-- End of Step 4 -->
 
-  <!-- Step 4 -->
+  <!-- Step 5 -->
 
 <br></br>
 
-  <h4>Step 4: Send a snack! </h4>
+  <h4>Step 5: Send a snack! </h4>
   Enter an @sign that will receive the sent snack. Be sure that it is the same @sign that you have entered in the receiver on the right hand side of this screen! 
   </div>
   <!-- End of Steps column -->
 
 </div>
 
 <script>
-function copyText(){
-  navigator.clipboard.writeText('flutter pub global activate at_app');
-  toggleIcon("copyIcon");
-  window.setTimeOut(() => toggleIcon("copyIcon"), 500);
-
-}
-function copyText2(){
-  navigator.clipboard.writeText('at_app create -d snackbar_sender ...');
-  toggleIcon("copyIcon2");
-}
-
-function toggleIcon(className){
-  let el = document.getElementById(className);
+  function copyText(text, iconId){
+  navigator.clipboard.writeText(text);
+  toggleIcon(iconId);
+  window.setTimeout(() => toggleIcon(iconId), 500);
+  }
+
+  function toggleIcon(id){
+  let el = document.getElementById(id);
   el.classList.toggle("fa-copy");
   el.classList.toggle("fa-check");
 }
+
+document.querySelectorAll('code.copytext').forEach(function (codeBlock) {
+    let button = document.createElement('i');
+    let iconID = codeBlock.getAttribute('iconID');
+    button.id = iconID;
+    button.className = 'fas fa-copy iconDesign';
+    // button.type = 'button';
+    // button.innerText = 'Copy';
+    let content = codeBlock.getAttribute('content');
+    // button.onclick =
+    //   `copyText('${content}', '${iconID}')`;
+
+    button.addEventListener('click', function(){copyText(content, iconID)});
+
+    codeBlock.appendChild(button);
+
+
+
+
+    // var pre = codeBlock.parentNode;
+    // if (pre.parentNode.classList.contains('highlight')) {
+    //     var highlight = pre.parentNode;
+    //     highlight.parentNode.insertBefore(button, highlight);
+    // } else {
+    //     pre.parentNode.insertBefore(button, pre);
+    // }
+});
 </script>