Skip to content

Commit

Permalink
Further improvements to the export logic
Browse files Browse the repository at this point in the history
  • Loading branch information
cassiancc committed Aug 7, 2022
1 parent 365f8b9 commit 3021e23
Show file tree
Hide file tree
Showing 7 changed files with 11,836 additions and 34 deletions.
4 changes: 3 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,4 +9,6 @@ Creating a tier list couldn't be easier. Just head to the site, click the Plus b
# Libraries
HTML2Canvas 1.4.1, used for image exports under the MIT License: https://html2canvas.hertzen.com/

Font Awesome 4, used under the SIL OFL 1.1 License https://fontawesome.com/v4/license/
Font Awesome 4, used under the SIL OFL 1.1 License https://fontawesome.com/v4/license/

FileSaver 2.0.4, used for image exports under the MIT License: https://github.com/eligrey/FileSaver.js
14 changes: 5 additions & 9 deletions css/dark.css
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ header button {


/*6b6b6b BORDER*/
#button-panel button:hover, .export-visible a:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover, #fileselect:hover, #url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover {
#button-panel button:hover, .export-visible a:hover, .export-visible button:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover, #fileselect:hover, #url-upload button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover {
border-color: #6b6b6b;
}
/*TRANSPARENT BORDER*/
Expand All @@ -34,16 +34,12 @@ header button {
#fileselect::file-selector-button, #tier-move button, .del-tier, #change-theme-button {
background-color: transparent;
}
/*WHITE BACKGROUND*/
.export-visible a {
background-color: white;
}
/*222222 BORDER*/
.hidden, .dropshown, .export-visible {
border-color: #222222;
}
/*393939 BORDER*/
#button-panel button, .export-visible a, .hidden button, .export-visible a, header button:hover, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #fileselect {
#button-panel button, .export-visible a, .hidden button, .export-visible button, header button:hover, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #fileselect {
border-color: #393939;
}
/*BLACK BORDER*/
Expand All @@ -55,7 +51,7 @@ footer, table, tr, td, th {


/*2b2b2b BACKGROUND*/
#fileselect:hover, #url-upload button:hover, .export-visible a:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover {
#fileselect:hover, #url-upload button:hover, .export-visible a:hover, .export-visible button:hover, #add-text-button:hover, #add-tier-button:hover, #add-tier-colour:hover, #urlselect:focus, #urlselect:hover, #text-select:focus, #text-select:hover {
background-color: #2b2b2b;
}

Expand All @@ -68,7 +64,7 @@ body, header button {
background-color: #1f1f1f;
}
/*222222 BACKGROUND*/
#url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #button-panel button, .hidden button, .export-visible a, #button-panel button, .hidden button, header button:hover {
#url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier, #button-panel button, .hidden button, .export-visible a, .export-visible button, #button-panel button, .hidden button, header button:hover {
background-color: #222222;
}
/*393939 BACKGROUND*/
Expand All @@ -82,7 +78,7 @@ footer, #image-options, header {


/*WHITE TEXT*/
#change-theme-button, #github, #new:hover, #tier-move button:hover, .del-tier:hover, footer a, body, header button:hover, #button-panel button, .hidden button, .export-visible a, #fileselect::file-selector-button, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier {
#change-theme-button, #github, #new:hover, #tier-move button:hover, .del-tier:hover, footer a, body, header button:hover, #button-panel button, .hidden button, .export-visible a, .export-visible button, #fileselect::file-selector-button, #url-upload button, #text-add button, #add-tier-button, #add-tier-colour, #urlselect, #text-select, #add-tier {
color: white;
}

Expand Down
13 changes: 8 additions & 5 deletions css/desktop.css
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ body {

}
/*SOLID BORDERS*/
.hidden, .dropshown, .export-visible, tr, td, th, table, #fileselect, header, header button, footer, .export-visible a {
.hidden, .dropshown, .export-visible, tr, td, th, table, #fileselect, header, header button, footer, .export-visible a, .export-visible button {
border-style: solid;
}
.hidden, .dropshown, .export-visible, header {
Expand All @@ -29,7 +29,7 @@ table {
border-width: 3px;
}

tr, td, th, .export-visible a {
tr, td, th, .export-visible a, .export-visible button {
border-width: 2px;
}
#fileselect, header button {
Expand All @@ -53,8 +53,11 @@ header {
padding-left: 20px;
padding-right: 20px;
}
#export-buttons {
display: flex;
}
header button {
transition: color .1s;
transition: color .01s;
white-space:nowrap;
padding: 10px;
border-radius: 5px;
Expand All @@ -63,7 +66,7 @@ header button {

}
/*popup menu buttons*/
#button-panel button, .hidden button, .export-visible a {
#button-panel button, .hidden button, .export-visible a, .export-visible button {
width: 100%;
padding-bottom: 10px;
padding-top: 10px;
Expand Down Expand Up @@ -244,7 +247,7 @@ table {
width: 100%;
padding-bottom: 10px;
}
.export-visible a {
.export-visible a, .export-visible button {
margin-top: 10px;
padding: 5px;
text-decoration: none;
Expand Down
7 changes: 4 additions & 3 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
<body>
<header>
<h1>Tier Away</h1>
<button id="export-button" onclick="tierExport()"><i class="fa fa-download" aria-hidden="true"></i>
<button id="export-button" onclick="openExport()"><i class="fa fa-download" aria-hidden="true"></i>
Download</button>
</header>
<div id="desc">
Expand All @@ -26,7 +26,7 @@ <h1>Tier Away</h1>
<table id="tierlist"><thead><tr id="tablehead">
<th class="header" contenteditable="true" colspan="2">
Tier List
</th><th id="new" class="header" onclick="openPlus()"><i class="fa fa-plus fa-2x"></i>
</th><th id="new" title="Click here (or press +) to add to the tier list." class="header" onclick="openPlus()"><i class="fa fa-plus fa-2x"></i>

</th>
</tr></thead><tbody></tbody></table>
Expand All @@ -41,14 +41,15 @@ <h1>Tier Away</h1>
</div>
<script src="script.js">
</script>
<script src="/lib/FileSaver.js"></script>
<script src="/lib/jszip.js"></script>
<script type="text/javascript" src="lib/html2canvas.js"></script>
<footer>
<p id="copy">Tier Away was designed by <a href="https://congodsted.com">Con Godsted</a> &copy; 2022, with help from <a href="https://luketrenaman.com">Luke Trenaman</a>.<br> Tier Away is licensed under the <a href="https://github.com/ConGodsted/TierAway/blob/main/LICENSE.md">GNU General Public License v3.0.</a></p>
<div>
<button id="change-theme-button" class="fa fa-moon-o fa-2x" onclick="changeTheme()"></button>
<a target="_blank" href="https://github.com/ConGodsted/TierAway" id="github" class="fa fa-github fa-3x" aria-hidden="true"></a>
</div>

</footer>
</body>
</html>
188 changes: 188 additions & 0 deletions lib/FileSaver.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,188 @@
(function (global, factory) {
if (typeof define === "function" && define.amd) {
define([], factory);
} else if (typeof exports !== "undefined") {
factory();
} else {
var mod = {
exports: {}
};
factory();
global.FileSaver = mod.exports;
}
})(this, function () {
"use strict";

/*
* 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 : void 0;

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 = /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;
var a = document.createElement('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;
}
});
Loading

0 comments on commit 3021e23

Please sign in to comment.