Remove nasties
This commit is contained in:
parent
d9519ae61f
commit
acdb698a70
41
index.html
41
index.html
|
|
@ -2,7 +2,7 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="Description" content="Infinite ASCII diagrams, save to Google Drive, resize, freeform draw, and export straight to text/html.">
|
||||
<meta name="Description" content="Infinite ASCII diagrams, resize, freeform draw, and export straight to text/html.">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
|
||||
<meta name="apple-mobile-web-app-capable" content="yes" />
|
||||
<meta name="mobile-web-app-capable" content="yes" />
|
||||
|
|
@ -498,8 +498,6 @@ textarea {
|
|||
</div>
|
||||
|
||||
<div id="file-tools">
|
||||
<div id="drive-save-state">Unsaved</div>
|
||||
<button id="drive-button" class="tool drive-image" title="Google Drive Saving"></button>
|
||||
<button id="export-button" class="tool export-image" title="Export"></button>
|
||||
<button id="import-button" class="tool import-image" title="Import"></button>
|
||||
<button id="clear-button" class="tool clear-image" title="Clear"></button>
|
||||
|
|
@ -534,7 +532,6 @@ textarea {
|
|||
<div class="info-icon move-image"></div><div class="info-description">Resize boxes and lines. <span>Drag a line to change its size/shape.</span></div><br>
|
||||
<div class="info-icon text-image"></div><div class="info-description">Type text. <span>Click and type where you'd like to add text to the canvas.</span></div><br>
|
||||
<br>
|
||||
<div class="info-icon-file drive-image"></div><div class="info-description">Save. <span>Connect to Google Drive to save your work automatically.</span></div><br>
|
||||
<div class="info-icon-file export-image"></div><div class="info-description">Export. <span>Copy your work to use it outside of ASCIIFlow.</span></div><br>
|
||||
<div class="info-icon-file import-image"></div><div class="info-description">Import. <span>Paste ASCII/text to import it onto the canvas.</span></div><br>
|
||||
<div class="info-icon-file clear-image"></div><div class="info-description">Clear. <span>Remove the entire contents from the canvas. Can be undone.</span></div><br>
|
||||
|
|
@ -570,48 +567,12 @@ textarea {
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<div id="drive-dialog" class="dialog">
|
||||
<div id="drive-filename">Untitled ASCII Diagram</div>
|
||||
<div style="margin: 5px;">Edit permissions and manage files in <a href="https://drive.google.com/" target="_blank">Google Drive</a>.</div>
|
||||
<br>
|
||||
<button id="drive-new-file-button">New Drawing</button>
|
||||
<br>
|
||||
<div id="drive-file-list">
|
||||
<!-- filled with li's -->
|
||||
</div>
|
||||
<div class="dialog-button-bar">
|
||||
<button class="close-dialog-button">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<textarea id="freeform-tool-input"></textarea>
|
||||
|
||||
<canvas id="ascii-canvas"></canvas>
|
||||
|
||||
<script src="jquery-3.1.1.min.js"></script>
|
||||
<script src="js-compiled.js"></script>
|
||||
<script src="https://apis.google.com/js/client.js?onload=window.gapiCallback"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
|
||||
if (width > 750) {
|
||||
window._tpm = window._tpm || [];
|
||||
window._tpm['paywallID'] = '37774341';
|
||||
window._tpm['trackPageview'] = true;
|
||||
}
|
||||
</script>
|
||||
<script type="text/javascript" src="https://code.tinypass.com/tpl/d1/tpm.js"></script>
|
||||
|
||||
<script>
|
||||
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
|
||||
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
|
||||
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
|
||||
})(window,document,'script','https://www.google-analytics.com/analytics.js','analytics');
|
||||
|
||||
analytics('create', 'UA-49427709-1', 'asciiflow.com');
|
||||
analytics('send', 'pageview');
|
||||
|
||||
</script>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="addtohomescreen.css">
|
||||
<script src="addtohomescreen.min.js"></script>
|
||||
|
|
|
|||
895
js-compiled.js
895
js-compiled.js
File diff suppressed because it is too large
Load Diff
|
|
@ -1,263 +0,0 @@
|
|||
import Vector from './vector';
|
||||
import State from './state';
|
||||
import View from './view';
|
||||
|
||||
const CLIENT_ID = '125643747010-9s9n1ne2fnnuh5v967licfkt83r4vba5.apps.googleusercontent.com';
|
||||
const SCOPES = 'https://www.googleapis.com/auth/drive';
|
||||
const DEVELOPER_KEY = 'AIzaSyBbKO_v9p-G9StQjYmtUYLP6Px4MkGions';
|
||||
|
||||
export default class DriveController {
|
||||
constructor(state, view) {
|
||||
/** @type {boolean} */
|
||||
this.driveEnabled = false;
|
||||
/** @type {State} */
|
||||
this.state = state;
|
||||
/** @type {View} */
|
||||
this.view = view;
|
||||
// This is a file resource, as defined by the Drive API.
|
||||
/** @type {Object} */
|
||||
this.file = null;
|
||||
/** @type {string} */
|
||||
this.cachedText = '';
|
||||
|
||||
this.tryInitialAuth();
|
||||
|
||||
$('#drive-button').click(() => {
|
||||
if (!this.driveEnabled) {
|
||||
// Haven't been able to immediately auth yet, so try full auth.
|
||||
this.checkAuth(false);
|
||||
this.waitForFullAuth();
|
||||
} else {
|
||||
this.loadDialog();
|
||||
}
|
||||
});
|
||||
|
||||
$('#drive-filename').click(() => {
|
||||
var currentTitle = '' + $('#drive-filename').text();
|
||||
var title = prompt('Enter new filename:', currentTitle);
|
||||
this.file['title'] = title;
|
||||
this.save();
|
||||
this.loadFileList();
|
||||
});
|
||||
|
||||
this.loopSave();
|
||||
|
||||
$(window).on('hashchange', () => { this.loadFromHash(); });
|
||||
|
||||
$('#drive-new-file-button').click(() => {
|
||||
this.file = null;
|
||||
this.state.clear();
|
||||
window.location.hash = '';
|
||||
this.save();
|
||||
$('#drive-dialog').removeClass('visible');
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Check if the current user has authorized the application.
|
||||
*/
|
||||
checkAuth(immediate) {
|
||||
window['gapi']['auth']['authorize']({
|
||||
'client_id': CLIENT_ID,
|
||||
'scope': SCOPES,
|
||||
immediate },
|
||||
result => {
|
||||
if (result && !result.error && !this.driveEnabled) {
|
||||
this.driveEnabled = true;
|
||||
$('#drive-button').addClass('active');
|
||||
// We are authorized, so let's se if we can load from the URL hash.
|
||||
// This seems to fail if we do it too early.
|
||||
window.setTimeout(() => { this.loadFromHash(); }, 500);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
tryInitialAuth() {
|
||||
if (window['gapi'] && window['gapi']['auth'] && window['gapi']['auth']['authorize']) {
|
||||
this.checkAuth(true);
|
||||
} else {
|
||||
window.setTimeout(() => {
|
||||
this.tryInitialAuth();
|
||||
}, 500);
|
||||
}
|
||||
}
|
||||
|
||||
waitForFullAuth() {
|
||||
window.setTimeout(() => {
|
||||
if (!this.driveEnabled) {
|
||||
this.checkAuth(true);
|
||||
this.waitForFullAuth();
|
||||
} else {
|
||||
this.loadDialog();
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Handles a file resource being returned from Drive.
|
||||
*/
|
||||
handleFile(file) {
|
||||
this.file = file;
|
||||
$('#drive-filename').text(file['title']);
|
||||
window.location.hash = file['id'];
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* Loads the drive dialog.
|
||||
*/
|
||||
loadDialog() {
|
||||
$('#drive-dialog').addClass('visible');
|
||||
|
||||
var text = this.state.outputText();
|
||||
// Don't save diagram if empty, just get's annoying.
|
||||
if (text.length > 5 && text != this.cachedText) {
|
||||
this.save();
|
||||
}
|
||||
this.loadFileList();
|
||||
}
|
||||
|
||||
loadFileList() {
|
||||
this.safeExecute(this.getListRequest(), result => {
|
||||
$('#drive-file-list').children().remove();
|
||||
var items = result['items'];
|
||||
for (var i in items) {
|
||||
var entry = document.createElement('li');
|
||||
var title = document.createElement('a');
|
||||
entry.appendChild(title);
|
||||
title.href = '#' + items[i]['id'];
|
||||
$(title).click(function() { $('#drive-dialog').removeClass('visible'); });
|
||||
title.innerHTML = items[i]['title'];
|
||||
$('#drive-file-list').append(entry);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
safeExecute(request, callback) {
|
||||
// Could make the API call, don't blow up tho (mobiles n stuff).
|
||||
try {
|
||||
request['execute'](result => {
|
||||
if (!result['error']) {
|
||||
callback(result);
|
||||
}
|
||||
});
|
||||
} catch (e) {}
|
||||
}
|
||||
|
||||
/**
|
||||
* Repeatedly save the diagram if it is editable and loaded.
|
||||
*/
|
||||
loopSave() {
|
||||
var text = this.state.outputText();
|
||||
if (text != this.cachedText && this.file && this.file['editable']) {
|
||||
this.save();
|
||||
}
|
||||
window.setTimeout(() => {
|
||||
this.loopSave();
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
/**
|
||||
* Saves the current diagram to drive.
|
||||
*/
|
||||
save() {
|
||||
var text = this.state.outputText();
|
||||
$('#drive-save-state').text('Saving...');
|
||||
this.safeExecute(this.getSaveRequest(text), result => {
|
||||
this.handleFile(result);
|
||||
$('#drive-save-state').text('Saved');
|
||||
this.cachedText = text;
|
||||
});
|
||||
}
|
||||
|
||||
loadFromHash() {
|
||||
if (window.location.hash.length > 1) {
|
||||
$('#drive-save-state').text('Loading...');
|
||||
var fileId = window.location.hash.substr(1, window.location.hash.length - 1);
|
||||
this.safeExecute(this.getLoadRequest(fileId), result => {
|
||||
this.handleFile(result);
|
||||
this.reloadFileContent();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
reloadFileContent() {
|
||||
this.downloadFile(this.file['downloadUrl'], content => {
|
||||
$('#drive-save-state').text('Loaded');
|
||||
this.state.clear();
|
||||
this.state.fromText(content, this.view.screenToCell(new Vector(
|
||||
this.view.canvas.width / 2,
|
||||
this.view.canvas.height / 2)));
|
||||
this.state.commitDraw();
|
||||
this.cachedText = this.state.outputText();
|
||||
});
|
||||
}
|
||||
|
||||
getSaveRequest(text) {
|
||||
var boundary = '-------314159265358979323846';
|
||||
var delimiter = "\r\n--" + boundary + "\r\n";
|
||||
var close_delim = "\r\n--" + boundary + "--";
|
||||
|
||||
var title = this.file == null ? 'Untitled ASCII Diagram' : this.file['title'];
|
||||
|
||||
var metadata = {
|
||||
'title': title,
|
||||
'mimeType': 'text/plain'
|
||||
};
|
||||
|
||||
var multipartRequestBody =
|
||||
delimiter +
|
||||
'Content-Type: application/json\r\n\r\n' +
|
||||
JSON.stringify(metadata) +
|
||||
delimiter +
|
||||
'Content-Type: ' + 'text/plain' + '\r\n' +
|
||||
'\r\n' +
|
||||
text +
|
||||
close_delim;
|
||||
|
||||
// Choose upload path and method depending on whether we have create a file already.
|
||||
var fileId = this.file == null ? '' : '/' + this.file['id'];
|
||||
var method = this.file == null ? 'POST' : 'PUT';
|
||||
|
||||
return window['gapi']['client']['request']({
|
||||
method,
|
||||
'path': '/upload/drive/v2/files' + fileId,
|
||||
'params': {'uploadType': 'multipart'},
|
||||
'headers': {
|
||||
'Content-Type': 'multipart/mixed; boundary="' + boundary + '"'
|
||||
},
|
||||
'body': multipartRequestBody});
|
||||
}
|
||||
|
||||
getLoadRequest(fileId) {
|
||||
return window['gapi']['client']['request']({
|
||||
'path': '/drive/v2/files/' + fileId,
|
||||
'method': 'GET'});
|
||||
}
|
||||
|
||||
getListRequest() {
|
||||
return window['gapi']['client']['request']({
|
||||
'path': '/drive/v2/files',
|
||||
'params' : { 'q': 'mimeType = \'text/plain\' and trashed = false' },
|
||||
'method': 'GET'});
|
||||
}
|
||||
|
||||
/**
|
||||
* Download a file's content.
|
||||
*
|
||||
* @param {string} url
|
||||
*/
|
||||
downloadFile(url, callback) {
|
||||
var accessToken = window['gapi']['auth']['getToken']()['access_token'];
|
||||
var xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', url);
|
||||
xhr.setRequestHeader('Authorization', 'Bearer ' + accessToken);
|
||||
xhr.onload = function() {
|
||||
callback(xhr.responseText);
|
||||
};
|
||||
xhr.onerror = function() {
|
||||
callback(null);
|
||||
};
|
||||
xhr.send();
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,6 @@ import State from './state';
|
|||
import View from './view';
|
||||
import Controller from './controller';
|
||||
import { TouchController, DesktopController } from './input-controller';
|
||||
import DriveController from './drive-controller';
|
||||
|
||||
/**
|
||||
* Runs the application.
|
||||
|
|
@ -13,6 +12,5 @@ import DriveController from './drive-controller';
|
|||
var controller = new Controller(view, state);
|
||||
var touchController = new TouchController(controller);
|
||||
var desktopController = new DesktopController(controller);
|
||||
var driveController = new DriveController(state, view);
|
||||
view.animate();
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in New Issue