Skip to content
This repository has been archived by the owner on Sep 17, 2022. It is now read-only.

Fixing copyButton in try atplatform page #366

Merged
merged 1 commit into from
Jan 14, 2022
Merged

Fixing copyButton in try atplatform page #366

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
92 changes: 65 additions & 27 deletions content/en/docs/Get-Started/TryAtPlatform.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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 -->

Expand All @@ -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>