Skip to content

Commit

Permalink
Merge pull request #36 from nishaaannnt/nishant
Browse files Browse the repository at this point in the history
added copyQr and DownloadQr option
  • Loading branch information
vinyashegde authored Feb 21, 2023
2 parents bfe0b0e + a96038c commit 31d9ff9
Show file tree
Hide file tree
Showing 4 changed files with 240 additions and 5 deletions.
8 changes: 6 additions & 2 deletions Source/options.html
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,12 @@
<script defer src="option.js"></script>
<title>Shorto</title>
<style>
body {
width: 320px;
body{
width: 350px;
height: 200px;
}
.card{
height: 200px;
}

</style>
Expand Down
11 changes: 9 additions & 2 deletions Source/popup.html
Original file line number Diff line number Diff line change
Expand Up @@ -6,14 +6,15 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script defer src="./src/popup.js"></script>
<script src ="./src/qrcode.min.js"></script>
<script src ="./src/FileSaver.js"></script>
<link rel="stylesheet" href="./style/spectre.min.css">
<link rel="stylesheet" href="./style/spectre-exp.min.css">
<link rel="stylesheet" href="./style/spectre-icons.min.css">
<title>Shorto</title>
<style>
body {
width: 350px;
height: 200px;
min-height: 200px;
}

#qrcode {
Expand Down Expand Up @@ -58,8 +59,14 @@
</div><br>
<div class="toast toast-success d-hide"><button class="btn btn-clear float-right"></button></div>
<div style="float:bottom;" class="toast toast-success d-hide" id="copied">Copied!</div>
<div style="float:bottom;" class="toast toast-success d-hide" id="copiedQr">Copied QR!</div>
<div style="float:bottom;" class="toast toast-success d-hide" id="downloadedQr">Downloading QR!</div>
</div>
<!-- Option to Copy or Download QR code to clipboard -->
<div class="px-2 m-2" >
<button class="btn btn-primary d-hide " id="copyQr">Copy QR</button>
<button class="btn btn-primary d-hide " id="downloadQr">Download QR</button>
</div>

<div id="qrcode" class="qr d-hide"></div>

</div>
Expand Down
174 changes: 174 additions & 0 deletions Source/src/FileSaver.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,174 @@


/*
* FileSaver.js
* A saveAs() FileSaver implementation.
*
* By Eli Grey, http://eligrey.com
*
* License : https://github.com/eligrey/FileSaver.js/blob/master/LICENSE.md (MIT)
* source : http://purl.eligrey.com/github/FileSaver.js
*/

// The one and only way of getting global scope in all environments
// https://stackoverflow.com/q/3277182/1008999
var _global = typeof window === 'object' && window.window === window
? window : typeof self === 'object' && self.self === self
? self : typeof global === 'object' && global.global === global
? global
: this

function bom (blob, opts) {
if (typeof opts === 'undefined') opts = { autoBom: false }
else if (typeof opts !== 'object') {
console.warn('Deprecated: Expected third argument to be a object')
opts = { autoBom: !opts }
}

// prepend BOM for UTF-8 XML and text/* types (including HTML)
// note: your browser will automatically convert UTF-16 U+FEFF to EF BB BF
if (opts.autoBom && /^\s*(?:text\/\S*|application\/xml|\S*\/\S*\+xml)\s*;.*charset\s*=\s*utf-8/i.test(blob.type)) {
return new Blob([String.fromCharCode(0xFEFF), blob], { type: blob.type })
}
return blob
}

function download (url, name, opts) {
var xhr = new XMLHttpRequest()
xhr.open('GET', url)
xhr.responseType = 'blob'
xhr.onload = function () {
saveAs(xhr.response, name, opts)
}
xhr.onerror = function () {
console.error('could not download file')
}
xhr.send()
}

function corsEnabled (url) {
var xhr = new XMLHttpRequest()
// use sync to avoid popup blocker
xhr.open('HEAD', url, false)
try {
xhr.send()
} catch (e) {}
return xhr.status >= 200 && xhr.status <= 299
}

// `a.click()` doesn't work for all browsers (#465)
function click (node) {
try {
node.dispatchEvent(new MouseEvent('click'))
} catch (e) {
var evt = document.createEvent('MouseEvents')
evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80,
20, false, false, false, false, 0, null)
node.dispatchEvent(evt)
}
}

// Detect WebView inside a native macOS app by ruling out all browsers
// We just need to check for 'Safari' because all other browsers (besides Firefox) include that too
// https://www.whatismybrowser.com/guides/the-latest-user-agent/macos
var isMacOSWebView = _global.navigator && /Macintosh/.test(navigator.userAgent) && /AppleWebKit/.test(navigator.userAgent) && !/Safari/.test(navigator.userAgent)

var saveAs = _global.saveAs || (
// probably in some web worker
(typeof window !== 'object' || window !== _global)
? function saveAs () { /* noop */ }

// Use download attribute first if possible (#193 Lumia mobile) unless this is a macOS WebView
: ('download' in HTMLAnchorElement.prototype && !isMacOSWebView)
? function saveAs (blob, name, opts) {
var URL = _global.URL || _global.webkitURL
// Namespace is used to prevent conflict w/ Chrome Poper Blocker extension (Issue #561)
var a = document.createElementNS('http://www.w3.org/1999/xhtml', 'a')
name = name || blob.name || 'download'

a.download = name
a.rel = 'noopener' // tabnabbing

// TODO: detect chrome extensions & packaged apps
// a.target = '_blank'

if (typeof blob === 'string') {
// Support regular links
a.href = blob
if (a.origin !== location.origin) {
corsEnabled(a.href)
? download(blob, name, opts)
: click(a, a.target = '_blank')
} else {
click(a)
}
} else {
// Support blobs
a.href = URL.createObjectURL(blob)
setTimeout(function () { URL.revokeObjectURL(a.href) }, 4E4) // 40s
setTimeout(function () { click(a) }, 0)
}
}

// Use msSaveOrOpenBlob as a second approach
: 'msSaveOrOpenBlob' in navigator
? function saveAs (blob, name, opts) {
name = name || blob.name || 'download'

if (typeof blob === 'string') {
if (corsEnabled(blob)) {
download(blob, name, opts)
} else {
var a = document.createElement('a')
a.href = blob
a.target = '_blank'
setTimeout(function () { click(a) })
}
} else {
navigator.msSaveOrOpenBlob(bom(blob, opts), name)
}
}

// Fallback to using FileReader and a popup
: function saveAs (blob, name, opts, popup) {
// Open a popup immediately do go around popup blocker
// Mostly only available on user interaction and the fileReader is async so...
popup = popup || open('', '_blank')
if (popup) {
popup.document.title =
popup.document.body.innerText = 'downloading...'
}

if (typeof blob === 'string') return download(blob, name, opts)

var force = blob.type === 'application/octet-stream'
var isSafari = /constructor/i.test(_global.HTMLElement) || _global.safari
var isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent)

if ((isChromeIOS || (force && isSafari) || isMacOSWebView) && typeof FileReader !== 'undefined') {
// Safari doesn't allow downloading of blob URLs
var reader = new FileReader()
reader.onloadend = function () {
var url = reader.result
url = isChromeIOS ? url : url.replace(/^data:[^;]*;/, 'data:attachment/file;')
if (popup) popup.location.href = url
else location = url
popup = null // reverse-tabnabbing #460
}
reader.readAsDataURL(blob)
} else {
var URL = _global.URL || _global.webkitURL
var url = URL.createObjectURL(blob)
if (popup) popup.location = url
else location.href = url
popup = null // reverse-tabnabbing #460
setTimeout(function () { URL.revokeObjectURL(url) }, 4E4) // 40s
}
}
)

_global.saveAs = saveAs.saveAs = saveAs

if (typeof module !== 'undefined') {
module.exports = saveAs;
}
52 changes: 51 additions & 1 deletion Source/src/popup.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,16 @@ let generateSelTabBtn = document.querySelector("#shortSelTab");
let shortbut = document.querySelector("#shortbut");
let copyBtn = document.querySelector("#shortcopy");
let copy = document.querySelector("#copied");
let copiedQr = document.querySelector("#copiedQr");
let downloadedQr = document.querySelector("#downloadedQr");
let api = document.querySelector("#myurl")
let toastError = document.querySelector('.toast-error')
let toastSuccess = document.querySelector('.toast-success')
let loader = document.querySelector('.loading')
const url = new URL("https://t.ly/api/v1/link/shorten");
const codeDiv = document.getElementById("qrcode")
const copyQr = document.getElementById("copyQr")
const downloadQr = document.getElementById("downloadQr")
var qrcode = new QRCode(codeDiv);

let headers = {
Expand Down Expand Up @@ -69,6 +73,8 @@ function shortenUrl(longURL) {

qrcode.makeCode(copyText);
codeDiv.classList.remove('d-hide')
downloadQr.classList.remove('d-hide')
copyQr.classList.remove('d-hide')

})
.catch(err => { alert(err) })
Expand All @@ -82,8 +88,52 @@ function shortenUrl(longURL) {
}
}

backBtn.addEventListener('click', () => {

// Function to COPY QR to clipboard
copyQr.addEventListener('click',()=>{
copyQrfunc();
})

async function copyQrfunc(){
const imgQr= document.querySelector('div.qr img')
const data=await fetch(imgQr.src);
const blob = await data.blob();

try{
await navigator.clipboard.write([
new ClipboardItem({
[blob.type]:blob,
})
])
console.log('success');
copiedQr.classList.remove('d-hide')
setTimeout(() => {
copiedQr.classList.add('d-hide')
}, 2000)
} catch(e){
alert(e);
}
}

// Function to download QR
downloadQr.addEventListener('click',()=>{
const imgQr= document.querySelector('div.qr img')
let imgPath=imgQr.getAttribute('src');
console.log('1')
try{
const filename=imgPath.substring(imgPath.lastIndexOf('/')+1);
saveAs(imgPath, filename);
downloadedQr.classList.remove('d-hide')
setTimeout(() => {
downloadedQr.classList.add('d-hide')
}, 2000)
} catch(e){
alert(e);
}
})


backBtn.addEventListener('click', () => {

})

0 comments on commit 31d9ff9

Please sign in to comment.