mirror of
https://github.com/lalbornoz/roar.git
synced 2024-11-27 01:06:38 +00:00
css/sally.css, js/*: remove {gallery,send to IRC,upload,username}.
index.html, TODO: updated.
This commit is contained in:
parent
b81dc2ccb6
commit
63c7f80c37
2
TODO
2
TODO
@ -2,4 +2,4 @@
|
|||||||
2) document: Shift + LMB to delete brush, Shift + LMB to switch character sets
|
2) document: Shift + LMB to delete brush, Shift + LMB to switch character sets
|
||||||
3) feature: allow to {dis,en}able cutoff
|
3) feature: allow to {dis,en}able cutoff
|
||||||
4) feature: {bold,italic,underline} attributes
|
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-right: 5px;
|
||||||
margin-bottom: 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 {
|
@keyframes rainbow {
|
||||||
0% { color: hsl(0,100%,50%) }
|
0% { color: hsl(0,100%,50%) }
|
||||||
33% { color: hsl(90,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%) }
|
100% { color: hsl(360,100%,50%) }
|
||||||
}
|
}
|
||||||
|
|
||||||
.panke #send_to_irc_el {
|
|
||||||
color: white;
|
|
||||||
text-decoration: underline;
|
|
||||||
}
|
|
||||||
.panke #shader_el,
|
.panke #shader_el,
|
||||||
.panke #load_el,
|
.panke #load_el,
|
||||||
.panke #gallery_el,
|
.panke #gallery_el,
|
||||||
.panke #import_textarea,
|
.panke #import_textarea,
|
||||||
.panke #doc_el,
|
.panke #doc_el,
|
||||||
.panke #gallery_el,
|
.panke #gallery_el,
|
||||||
.panke #save_button,
|
|
||||||
.panke #upload_button,
|
|
||||||
.panke #export_button,
|
.panke #export_button,
|
||||||
.panke #username_input,
|
|
||||||
.panke #upload_input,
|
|
||||||
.panke #grid_el,
|
.panke #grid_el,
|
||||||
.panke #save_el,
|
.panke #save_el,
|
||||||
.panke #vertical_checkbox,
|
.panke #vertical_checkbox,
|
||||||
|
@ -74,7 +74,6 @@
|
|||||||
<br>
|
<br>
|
||||||
<span id="advanced_checkbox" class="tool">_ advanced</span>
|
<span id="advanced_checkbox" class="tool">_ advanced</span>
|
||||||
<br>
|
<br>
|
||||||
<span id="send_to_irc_el" class="tool">> send to IRC</span>
|
|
||||||
<br>
|
<br>
|
||||||
<div id="nopaint_rapper">
|
<div id="nopaint_rapper">
|
||||||
<br>
|
<br>
|
||||||
@ -93,11 +92,6 @@
|
|||||||
<button id="import_button">import</button>
|
<button id="import_button">import</button>
|
||||||
</span>
|
</span>
|
||||||
<div id="gallery_rapper">
|
<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><br>
|
||||||
<div id="cutoff_warning_el">colorcode is too wide for irc and is cutoff</div>
|
<div id="cutoff_warning_el">colorcode is too wide for irc and is cutoff</div>
|
||||||
<textarea id="import_textarea"></textarea>
|
<textarea id="import_textarea"></textarea>
|
||||||
@ -132,8 +126,6 @@
|
|||||||
<script src="js/ext/unicode.js"></script>
|
<script src="js/ext/unicode.js"></script>
|
||||||
<script src="js/ext/color.js"></script>
|
<script src="js/ext/color.js"></script>
|
||||||
<script src="js/clipboard.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/lex.js"></script>
|
||||||
<script src="js/matrix.js"></script>
|
<script src="js/matrix.js"></script>
|
||||||
|
@ -17,7 +17,6 @@ var mouse = { x: 0, y: 0 }
|
|||||||
function init () {
|
function init () {
|
||||||
build()
|
build()
|
||||||
bind()
|
bind()
|
||||||
clipboard.load_from_location()
|
|
||||||
}
|
}
|
||||||
function build () {
|
function build () {
|
||||||
shader.init()
|
shader.init()
|
||||||
@ -57,7 +56,7 @@ function bind () {
|
|||||||
|
|
||||||
var ae = document.activeElement
|
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()
|
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_irssi.addEventListener("change", exports.setFormat("irssi"))
|
||||||
// import_mirc.addEventListener("change", exports.setFormat("mirc"))
|
// import_mirc.addEventListener("change", exports.setFormat("mirc"))
|
||||||
import_button.addEventListener("click", exports.import_colorcode)
|
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("focus", exports.focus)
|
||||||
import_textarea.addEventListener("blur", exports.blur)
|
import_textarea.addEventListener("blur", exports.blur)
|
||||||
import_textarea.addEventListener('paste', exports.paste)
|
import_textarea.addEventListener('paste', exports.paste)
|
||||||
@ -46,15 +43,6 @@ var clipboard = (function () {
|
|||||||
import_buttons.style.display = "inline"
|
import_buttons.style.display = "inline"
|
||||||
import_textarea.value = ""
|
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) {
|
paste: function (e) {
|
||||||
e.preventDefault()
|
e.preventDefault()
|
||||||
@ -262,130 +250,6 @@ var clipboard = (function () {
|
|||||||
return cr
|
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
|
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
|
|
||||||
})()
|
|
8
js/ui/controls.js
vendored
8
js/ui/controls.js
vendored
@ -160,17 +160,9 @@ var controls = (function(){
|
|||||||
})
|
})
|
||||||
controls.save = new ClipboardTool (save_el)
|
controls.save = new ClipboardTool (save_el)
|
||||||
controls.save.use = function(){
|
controls.save.use = function(){
|
||||||
changed && clipboard.upload_png()
|
|
||||||
clipboard.show()
|
clipboard.show()
|
||||||
clipboard.export_mode()
|
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 = new ClipboardTool (load_el)
|
||||||
controls.load.use = function(){
|
controls.load.use = function(){
|
||||||
// console.log("use")
|
// console.log("use")
|
||||||
|
Loading…
Reference in New Issue
Block a user