mirror of https://github.com/lalbornoz/roar.git
css/sally.css, js/*: remove {gallery,send to IRC,upload,username}.
index.html, TODO: updated.
This commit is contained in:
Lucio Andrés Illanes Albornoz (arab, vxp)
Lucio Andrés Illanes Albornoz
parent
8e34feff55
commit
6180783d2d
2
TODO
2
TODO
|
|
@ -2,4 +2,4 @@
|
|||
2) document: Shift + LMB to delete brush, Shift + LMB to switch character sets
|
||||
3) feature: allow to {dis,en}able cutoff
|
||||
4) feature: {bold,italic,underline} attributes
|
||||
5) reimplement: {save,upload} as PNG
|
||||
5) reimplement: {save,upload} as PNG & gallery
|
||||
|
|
|
|||
|
|
@ -196,35 +196,6 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
|
|||
margin-right: 5px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#username_input {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 1px solid transparent;
|
||||
width: 76px;
|
||||
}
|
||||
#username_input:focus {
|
||||
border: 1px solid #0f0;
|
||||
color: #0f0;
|
||||
}
|
||||
#upload_input {
|
||||
background: transparent;
|
||||
padding: 0;
|
||||
outline: 0;
|
||||
border: 1px solid #0f0;
|
||||
color: #0f0;
|
||||
width: 100%;
|
||||
max-width: 360px;
|
||||
}
|
||||
#upload_button.uploading {
|
||||
background: transparent;
|
||||
border: 0;
|
||||
font-size: 16px;
|
||||
font-family: 'FixedsysExcelsior301Regular';
|
||||
-webkit-animation: rainbow 1.0s infinite;
|
||||
animation: rainbow 2.0s infinite;
|
||||
padding: 0; margin: 0;
|
||||
}
|
||||
@keyframes rainbow {
|
||||
0% { color: hsl(0,100%,50%) }
|
||||
33% { color: hsl(90,100%,50%) }
|
||||
|
|
@ -233,21 +204,13 @@ textarea { font-size:12pt; width: 37vw; height: 300px; background: #333; color:
|
|||
100% { color: hsl(360,100%,50%) }
|
||||
}
|
||||
|
||||
.panke #send_to_irc_el {
|
||||
color: white;
|
||||
text-decoration: underline;
|
||||
}
|
||||
.panke #shader_el,
|
||||
.panke #load_el,
|
||||
.panke #gallery_el,
|
||||
.panke #import_textarea,
|
||||
.panke #doc_el,
|
||||
.panke #gallery_el,
|
||||
.panke #save_button,
|
||||
.panke #upload_button,
|
||||
.panke #export_button,
|
||||
.panke #username_input,
|
||||
.panke #upload_input,
|
||||
.panke #grid_el,
|
||||
.panke #save_el,
|
||||
.panke #vertical_checkbox,
|
||||
|
|
|
|||
|
|
@ -74,7 +74,6 @@
|
|||
<br>
|
||||
<span id="advanced_checkbox" class="tool">_ advanced</span>
|
||||
<br>
|
||||
<span id="send_to_irc_el" class="tool">> send to IRC</span>
|
||||
<br>
|
||||
<div id="nopaint_rapper">
|
||||
<br>
|
||||
|
|
@ -93,11 +92,6 @@
|
|||
<button id="import_button">import</button>
|
||||
</span>
|
||||
<div id="gallery_rapper">
|
||||
<input id="username_input" type="text" placeholder="username">
|
||||
<input id="upload_input" type="text" placeholder="uploaded url">
|
||||
<button id="export_button">export</button>
|
||||
<button id="save_button">save</button>
|
||||
<button id="upload_button">upload</button>
|
||||
</div><br>
|
||||
<div id="cutoff_warning_el">colorcode is too wide for irc and is cutoff</div>
|
||||
<textarea id="import_textarea"></textarea>
|
||||
|
|
@ -132,8 +126,6 @@
|
|||
<script src="js/ext/unicode.js"></script>
|
||||
<script src="js/ext/color.js"></script>
|
||||
<script src="js/clipboard.js"></script>
|
||||
<script src="js/ext/upload.js"></script>
|
||||
<script src="js/ext/user.js"></script>
|
||||
|
||||
<script src="js/lex.js"></script>
|
||||
<script src="js/matrix.js"></script>
|
||||
|
|
|
|||
|
|
@ -17,7 +17,6 @@ var mouse = { x: 0, y: 0 }
|
|||
function init () {
|
||||
build()
|
||||
bind()
|
||||
clipboard.load_from_location()
|
||||
}
|
||||
function build () {
|
||||
shader.init()
|
||||
|
|
@ -57,7 +56,7 @@ function bind () {
|
|||
|
||||
var ae = document.activeElement
|
||||
|
||||
if (ae !== shader_textarea && ae !== import_textarea && ae !== username_input && ae !== upload_input) {
|
||||
if (ae !== shader_textarea && ae !== import_textarea) {
|
||||
if (is_desktop) cursor_input.focus()
|
||||
}
|
||||
|
||||
|
|
|
|||
136
js/clipboard.js
136
js/clipboard.js
|
|
@ -12,9 +12,6 @@ var clipboard = (function () {
|
|||
// import_irssi.addEventListener("change", exports.setFormat("irssi"))
|
||||
// import_mirc.addEventListener("change", exports.setFormat("mirc"))
|
||||
import_button.addEventListener("click", exports.import_colorcode)
|
||||
export_button.addEventListener("click", exports.export_data)
|
||||
save_button.addEventListener("click", exports.save_png)
|
||||
upload_button.addEventListener("click", exports.upload_png)
|
||||
import_textarea.addEventListener("focus", exports.focus)
|
||||
import_textarea.addEventListener("blur", exports.blur)
|
||||
import_textarea.addEventListener('paste', exports.paste)
|
||||
|
|
@ -46,15 +43,6 @@ var clipboard = (function () {
|
|||
import_buttons.style.display = "inline"
|
||||
import_textarea.value = ""
|
||||
},
|
||||
export_mode: function () {
|
||||
focus()
|
||||
clipboard.importing = false
|
||||
import_buttons.style.display = "none"
|
||||
format_el.style.display = 'inline'
|
||||
cutoff_warning_el.style.display = 'none'
|
||||
gallery_rapper.style.display = 'inline'
|
||||
clipboard.export_data()
|
||||
},
|
||||
|
||||
paste: function (e) {
|
||||
e.preventDefault()
|
||||
|
|
@ -262,130 +250,6 @@ var clipboard = (function () {
|
|||
return cr
|
||||
},
|
||||
|
||||
export_canvas: function (done_fn) {
|
||||
var opts = {
|
||||
palette: 'mirc',
|
||||
font: canvas.pixels ? 'fixedsys_8x8' : 'fixedsys_8x15',
|
||||
fg: 0,
|
||||
bg: 1,
|
||||
canvas: clipboard.canvas
|
||||
}
|
||||
opts.done = function(){
|
||||
var c = canvas.rotated ? clipboard.rotate_canvas() : clipboard.canvas
|
||||
if (done_fn) done_fn(c)
|
||||
}
|
||||
var to_canvas = function(fn, opts){
|
||||
}
|
||||
|
||||
var start = Date.now();
|
||||
to_canvas(canvas.mirc(), opts)
|
||||
var total = Date.now() - start;
|
||||
console.log("took " + total)
|
||||
},
|
||||
|
||||
filename: function () {
|
||||
return [ +new Date, "ascii", user.username ].join("-")
|
||||
},
|
||||
|
||||
save_png: function () {
|
||||
var save_fn = function(canvas_out){
|
||||
var filename = clipboard.filename() + ".png"
|
||||
var blob = PNG.canvas_to_blob_with_colorcode(canvas_out, canvas.mirc())
|
||||
saveAs(blob, filename);
|
||||
}
|
||||
clipboard.export_canvas(save_fn)
|
||||
},
|
||||
|
||||
upload_png: function () {
|
||||
var upload_fn = function(canvas_out){
|
||||
var blob = PNG.canvas_to_blob_with_colorcode(canvas_out, canvas.mirc())
|
||||
var filename = clipboard.filename()
|
||||
var tag = 'ascii'
|
||||
upload(blob, filename, tag, canvas.mirc())
|
||||
}
|
||||
clipboard.export_canvas(upload_fn)
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// http...?a=1&b=2&b=3 -> {a: '1', b: ['2', '3']}
|
||||
function parse_url_search_params(url){
|
||||
var params = {}
|
||||
url = url.split('?')
|
||||
if (url.length < 2) return params
|
||||
|
||||
var search = url[1].split('&')
|
||||
for (var i = 0, pair; pair = search[i]; i++){
|
||||
pair = pair.split('=')
|
||||
if (pair.length < 2) continue
|
||||
var key = pair[0]
|
||||
var val = pair[1]
|
||||
if (key in params){
|
||||
if (typeof params[key] === 'string'){
|
||||
params[key] = [params[key], val]
|
||||
}
|
||||
else params[key].push(val)
|
||||
}
|
||||
else params[key] = val
|
||||
}
|
||||
return params
|
||||
}
|
||||
|
||||
function get_filetype(txt){
|
||||
txt = txt.split('.')
|
||||
return txt[txt.length - 1].toLowerCase()
|
||||
}
|
||||
|
||||
function fetch_url(url, f, type){
|
||||
type = type || 'arraybuffer'
|
||||
url = "/cgi-bin/proxy?" + url
|
||||
//url = "http://198.199.72.134/cors/" + url
|
||||
var xhr = new XMLHttpRequest()
|
||||
xhr.open('GET', url, true)
|
||||
xhr.responseType = type
|
||||
xhr.addEventListener('load', function(){ f(xhr.response) })
|
||||
xhr.send()
|
||||
}
|
||||
|
||||
function load_text(txt){
|
||||
clipboard.import_colorcode(txt, true)
|
||||
}
|
||||
|
||||
function load_png(buf){
|
||||
var chunks = PNG.decode(buf)
|
||||
if (!chunks) return
|
||||
var itxt_chunks = []
|
||||
for (var i=0, c; c=chunks[i]; i++){
|
||||
if (c.type !== 'iTXt') continue
|
||||
var itxt = PNG.decode_itxt_chunk(c)
|
||||
if (!itxt.keyword || itxt.keyword !== 'colorcode') continue
|
||||
clipboard.import_colorcode(itxt.data, true)
|
||||
}
|
||||
}
|
||||
|
||||
function sally_url_convert(url){
|
||||
var png_regex = /^https?:\/\/jollo\.org\/den\/sallies\/([0-9]+)\/([^.]+)\.png$/
|
||||
var matches = url.match(png_regex)
|
||||
if (!matches) return url
|
||||
return 'http://jollo.org/den/sallies/' + matches[1] + '/raw-' + matches[2] + '?.txt'
|
||||
// txt suffix to force asdf proxy
|
||||
}
|
||||
|
||||
exports.load_from_location = function(){
|
||||
var params = parse_url_search_params(window.location + '')
|
||||
if (!params.url) return
|
||||
var url = params.url
|
||||
url = sally_url_convert(url)
|
||||
var type = get_filetype(url)
|
||||
switch (type){
|
||||
case 'txt':
|
||||
fetch_url(url, load_text, 'text')
|
||||
break
|
||||
case 'png':
|
||||
fetch_url(url, load_png)
|
||||
break
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return exports
|
||||
|
|
|
|||
|
|
@ -1,83 +0,0 @@
|
|||
var upload = (function(){
|
||||
var el = document.getElementById("upload_input")
|
||||
var button = document.getElementById("upload_button")
|
||||
var uploading = false
|
||||
|
||||
function upload(blob, filename, tag, ascii){
|
||||
if (uploading) return
|
||||
filename = filename || get_filename()
|
||||
tag = tag || "shader"
|
||||
|
||||
button.innerHTML = "uploading..."
|
||||
button.className = "uploading"
|
||||
|
||||
uploading = true
|
||||
|
||||
uploadImage({
|
||||
blob: blob,
|
||||
ascii: ascii,
|
||||
filename: filename,
|
||||
username: user.username,
|
||||
tag: tag,
|
||||
success: function(data){
|
||||
|
||||
// data.url
|
||||
// data.filesize
|
||||
// data.success
|
||||
|
||||
console.log(data);
|
||||
el.style.display = "block"
|
||||
el.value = data.url
|
||||
el.focus()
|
||||
setCaretToPos(el, 0)
|
||||
button.innerHTML = "upload"
|
||||
button.className = ""
|
||||
uploading = false
|
||||
},
|
||||
error: function(data){
|
||||
console.log(data)
|
||||
console.log("error uploading: " + data.error)
|
||||
button.innerHTML = "upload"
|
||||
button.className = ""
|
||||
uploading = false
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function uploadImage(opt){
|
||||
if (! opt.blob || ! opt.filename) return;
|
||||
|
||||
opt.username = opt.username || "";
|
||||
opt.success = opt.success || noop;
|
||||
opt.error = opt.error || noop;
|
||||
|
||||
var form = new FormData();
|
||||
|
||||
form.append("username", opt.username);
|
||||
form.append("filename", opt.filename);
|
||||
form.append("qqfile", opt.blob);
|
||||
form.append("tag", opt.tag);
|
||||
if (opt.ascii) {
|
||||
form.append("ascii", opt.ascii);
|
||||
}
|
||||
|
||||
var req = new XMLHttpRequest();
|
||||
req.open("POST", "/cgi-bin/im/shader/upload");
|
||||
req.onload = function(event) {
|
||||
if (req.status == 200) {
|
||||
var res = JSON.parse(req.responseText);
|
||||
if (res.success) {
|
||||
opt.success(res);
|
||||
}
|
||||
else {
|
||||
opt.error(res);
|
||||
}
|
||||
} else {
|
||||
opt.error({ success: false, error: req.status });
|
||||
}
|
||||
};
|
||||
req.send(form);
|
||||
}
|
||||
|
||||
return upload
|
||||
})()
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
var user = (function(){
|
||||
|
||||
var user = {}
|
||||
var el = document.getElementById("username_input")
|
||||
|
||||
user.init = function(){
|
||||
user.load()
|
||||
user.bind()
|
||||
}
|
||||
user.bind = function(){
|
||||
el.addEventListener("input", user.save)
|
||||
}
|
||||
user.load = function(){
|
||||
user.username = user.getCookie()
|
||||
if (! user.username) {
|
||||
user.username = '00' + randint(9876876)
|
||||
user.setCookie(user.username)
|
||||
}
|
||||
if (!user.username.match(/^00/)) {
|
||||
el.value = user.username
|
||||
}
|
||||
}
|
||||
user.prefs = new function(){}
|
||||
user.prefs.get = function (key){
|
||||
return localStorage.getItem("im.prefs." + key)
|
||||
}
|
||||
user.prefs.set = function (key,value){
|
||||
return localStorage.setItem("im.prefs." + key, value)
|
||||
}
|
||||
user.sanitize = function(){
|
||||
return el.value.replace(/[^-_ a-zA-Z0-9]/g,"")
|
||||
}
|
||||
user.getCookie = function () {
|
||||
var username = localStorage.getItem("im.name") || "";
|
||||
if (document.cookie && ! username.length) {
|
||||
var cookies = document.cookie.split(";")
|
||||
for (i in cookies) {
|
||||
var cookie = cookies[i].split("=")
|
||||
if (cookie[0].indexOf("imname") !== -1) {
|
||||
if (cookie[1] !== 'false' && cookie[1] !== 'undefined' && cookie[1].length) {
|
||||
return cookie[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return username
|
||||
}
|
||||
var timeout
|
||||
user.save = function(){
|
||||
clearTimeout(timeout)
|
||||
timeout = setTimeout(function(){
|
||||
var username = user.sanitize()
|
||||
if (username != user.username) user.setCookie(username);
|
||||
})
|
||||
}
|
||||
user.setCookie = function(username){
|
||||
if (!user.username.match(/^00/)) {
|
||||
console.log("setting to " + username)
|
||||
}
|
||||
document.cookie = "imname="+username+";path=/;domain=.lucioillanes.de;max-age=1086400"
|
||||
localStorage.setItem("im.name", username);
|
||||
}
|
||||
|
||||
user.init()
|
||||
|
||||
return user
|
||||
})()
|
||||
|
|
@ -160,17 +160,9 @@ var controls = (function(){
|
|||
})
|
||||
controls.save = new ClipboardTool (save_el)
|
||||
controls.save.use = function(){
|
||||
changed && clipboard.upload_png()
|
||||
clipboard.show()
|
||||
clipboard.export_mode()
|
||||
}
|
||||
controls.send_to_irc = new ClipboardTool (send_to_irc_el)
|
||||
controls.send_to_irc.use = function(){
|
||||
changed && clipboard.upload_png()
|
||||
clipboard.show()
|
||||
clipboard.export_mode()
|
||||
alert('your ascii art is now on display on the IRC channel inside the panke.gallery!')
|
||||
}
|
||||
controls.load = new ClipboardTool (load_el)
|
||||
controls.load.use = function(){
|
||||
// console.log("use")
|
||||
|
|
|
|||
Loading…
Reference in New Issue