btwedutech/hoppscotch
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 6 Wiki Activity

✨ Copy generated code to clipboard

Browse Source
This commit is contained in:
liyasthomas
2019-09-04 07:15:19 +05:30
parent acba29add9
commit cb1f366d35
1 changed files with 31 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
pages/index.vue
View File

@@ -24,7 +24,7 @@
</li> </li>
<li> <li>
<label class="hide-on-small-screen" for="copyRequest">&nbsp;</label> <label class="hide-on-small-screen" for="copyRequest">&nbsp;</label>
<button class="icon" @click="copyRequest" name="copyRequest" ref="copyRequest" :disabled="!isValidURL"> <button class="icon" @click="copyRequest" id="copyRequest" ref="copyRequest" :disabled="!isValidURL">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24"> <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z" /> <path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z" />
</svg> </svg>
@@ -33,7 +33,12 @@
</li> </li>
<li> <li>
<label for="code">&nbsp;</label> <label for="code">&nbsp;</label>
<button id="code" name="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL">Copy Code</button> <button class="icon" id="code" name="code" v-on:click="isHidden = !isHidden" :disabled="!isValidURL">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
<path d="M24 10.935v2.131l-8 3.947v-2.23l5.64-2.783-5.64-2.79v-2.223l8 3.948zm-16 3.848l-5.64-2.783 5.64-2.79v-2.223l-8 3.948v2.131l8 3.947v-2.23zm7.047-10.783h-2.078l-4.011 16h2.073l4.016-16z" />
</svg>
<span>Generate Code</span>
</button>
</li> </li>
<li> <li>
<label class="hide-on-small-screen" for="action">&nbsp;</label> <label class="hide-on-small-screen" for="action">&nbsp;</label>
@@ -46,17 +51,30 @@
<pw-section class="blue-dark" label="Request Code" ref="requestCode" v-if="!isHidden"> <pw-section class="blue-dark" label="Request Code" ref="requestCode" v-if="!isHidden">
<ul> <ul>
<li> <li>
<label>Request Type</label> <label for="requestType">Request Type</label>
<select v-model="requestType"> <select name="requestType" v-model="requestType">
<option>JavaScript XHR</option> <option>JavaScript XHR</option>
<option>Fetch</option> <option>Fetch</option>
<option>cURL</option> <option>cURL</option>
</select> </select>
</li> </li>
</ul> </ul>
<div> <ul>
<textarea style="font-family: monospace;" rows="16" >{{requestCode}}</textarea> <li>
</div> <div class="flex-wrap">
<label for="generatedCode">Generated Code</label>
<div>
<button class="icon" @click="copyRequestCode" name="copyRequestCode" ref="copyRequestCode">
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24">
<path d="M22 6v16h-16v-16h16zm2-2h-20v20h20v-20zm-24 17v-21h21v2h-19v19h-2z" />
</svg>
<span>Copy</span>
</button>
</div>
</div>
<textarea ref="generatedCode" name="generatedCode" style="font-family: monospace;" rows="16">{{requestCode}}</textarea>
</li>
</ul>
</pw-section> </pw-section>
<pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'"> <pw-section class="blue-dark" label="Request Body" v-if="method === 'POST' || method === 'PUT' || method === 'PATCH'">
<ul> <ul>
@@ -670,6 +688,12 @@
document.body.removeChild(dummy); document.body.removeChild(dummy);
setTimeout(() => this.$refs.copyRequest.innerHTML = this.copyButton + '<span>Share URL</span>', 1500) setTimeout(() => this.$refs.copyRequest.innerHTML = this.copyButton + '<span>Share URL</span>', 1500)
}, },
copyRequestCode() {
this.$refs.copyRequestCode.innerHTML = this.copiedButton + '<span>Copied</span>';
this.$refs.generatedCode.select();
document.execCommand("copy");
setTimeout(() => this.$refs.copyRequestCode.innerHTML = this.copyButton + '<span>Copy</span>', 1500)
},
copyResponse() { copyResponse() {
this.$refs.copyResponse.innerHTML = this.copiedButton + '<span>Copied</span>'; this.$refs.copyResponse.innerHTML = this.copiedButton + '<span>Copied</span>';
this.$refs.responseBody.select(); this.$refs.responseBody.select();