parent
d0f4b08690
commit
6e130de69e
|
@ -145,9 +145,9 @@ function $ColorBox(){
|
|||
}
|
||||
const rgb = col.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
|
||||
function hex(x){
|
||||
return ("0" + parseInt(x).toString(16)).slice(-2);
|
||||
return (`0${parseInt(x).toString(16)}`).slice(-2);
|
||||
}
|
||||
return rgb ? ("#" + hex(rgb[1]) + hex(rgb[2]) + hex(rgb[3])) : col;
|
||||
return rgb ? (`#${hex(rgb[1])}${hex(rgb[2])}${hex(rgb[3])}`) : col;
|
||||
}
|
||||
});
|
||||
$palette.width(Math.ceil(palette.length/2) * width_per_button);
|
||||
|
|
|
@ -2,7 +2,7 @@
|
|||
function $Component(name, orientation, $el){
|
||||
// A draggable widget that can be undocked into a window
|
||||
const $c = $(E("div")).addClass("component");
|
||||
$c.addClass(""+name+"-component");
|
||||
$c.addClass(`${name}-component`);
|
||||
$c.append($el);
|
||||
$c.attr("touch-action", "none");
|
||||
|
||||
|
|
|
@ -63,7 +63,7 @@ function $FontBox(){
|
|||
width: 16,
|
||||
height: 16,
|
||||
backgroundImage: "url(images/text-tools.png)",
|
||||
backgroundPosition: xi*-16 + "px 0px"
|
||||
backgroundPosition: `${xi*-16}px 0px`
|
||||
});
|
||||
$button.on("click", () => {
|
||||
$button.toggleClass("selected");
|
||||
|
|
|
@ -13,7 +13,7 @@ function $MenuBar(menus){
|
|||
$menus.attr("touch-action", "none");
|
||||
let selecting_menus = false;
|
||||
|
||||
const _html = menus_key => menus_key.replace(/&(.)/, m => "<span class='menu-hotkey'>" + m[1] + "</span>");
|
||||
const _html = menus_key => menus_key.replace(/&(.)/, m => `<span class='menu-hotkey'>${m[1]}</span>`);
|
||||
const _hotkey = menus_key => menus_key[menus_key.indexOf("&")+1].toUpperCase();
|
||||
|
||||
const close_menus = () => {
|
||||
|
@ -175,7 +175,7 @@ function $MenuBar(menus){
|
|||
const $menu_popup = $MenuPopup(menu_items).appendTo($menu_container);
|
||||
|
||||
const menu_id = menus_key.replace("&", "").replace(/ /g, "-").toLowerCase();
|
||||
$menu_button.addClass("" + menu_id + "-menu-button");
|
||||
$menu_button.addClass(`${menu_id}-menu-button`);
|
||||
if(menu_id == "extras"){
|
||||
// TODO: refactor shared key string, move to function
|
||||
// if localStorage is not available, the default setting is visible
|
||||
|
|
|
@ -30,7 +30,7 @@ function $ToolBox(tools, is_extras){
|
|||
width: 16,
|
||||
height: 16,
|
||||
backgroundImage: `url(${theme_folder}/tools.png)`,
|
||||
backgroundPosition: bx + "px 0px",
|
||||
backgroundPosition: `${bx}px 0px`,
|
||||
});
|
||||
};
|
||||
update_css();
|
||||
|
|
|
@ -22,8 +22,8 @@ class OnCanvasObject {
|
|||
height: magnification * this.height,
|
||||
});
|
||||
if (updateStatus) {
|
||||
$status_position.text(this.x + "," + this.y);
|
||||
$status_size.text(this.width + "," + this.height);
|
||||
$status_position.text(`${this.x},${this.y}`);
|
||||
$status_size.text(`${this.width},${this.height}`);
|
||||
}
|
||||
}
|
||||
destroy() {
|
||||
|
|
|
@ -11,14 +11,14 @@ class OnCanvasTextBox extends OnCanvasObject {
|
|||
font.background = tool_transparent_mode ? "transparent" : colors.background;
|
||||
this.$editor.css({
|
||||
fontFamily: font.family,
|
||||
fontSize: font.size * magnification + "px",
|
||||
fontSize: `${font.size * magnification}px`,
|
||||
fontWeight: font.bold ? "bold" : "normal",
|
||||
fontStyle: font.italic ? "italic" : "normal",
|
||||
textDecoration: font.underline ? "underline" : "none",
|
||||
writingMode: font.vertical ? "vertical-lr" : "",
|
||||
MsWritingMode: font.vertical ? "vertical-lr" : "",
|
||||
WebkitWritingMode: font.vertical ? "vertical-lr" : "",
|
||||
lineHeight: font.size * font.line_scale * magnification + "px",
|
||||
lineHeight: `${font.size * font.line_scale * magnification}px`,
|
||||
color: font.color,
|
||||
background: font.background,
|
||||
});
|
||||
|
@ -106,7 +106,7 @@ class OnCanvasTextBox extends OnCanvasObject {
|
|||
ctx.fillRect(this.x, this.y, this.width, this.height);
|
||||
ctx.fillStyle = font.color;
|
||||
const style_ = (font.bold ? (font.italic ? "italic bold " : "bold ") : (font.italic ? "italic " : ""));
|
||||
ctx.font = style_ + font.size + "px " + font.family;
|
||||
ctx.font = `${style_ + font.size}px ${font.family}`;
|
||||
ctx.textBaseline = "top";
|
||||
const max_width = Math.max(this.width, font.size);
|
||||
draw_text_wrapped(ctx, text, this.x + 1, this.y + 1, max_width, font.size * font.line_scale);
|
||||
|
@ -145,12 +145,12 @@ function draw_text_wrapped(ctx, text, x, y, maxWidth, lineHeight) {
|
|||
words[i] = test;
|
||||
}
|
||||
|
||||
test = line + words[i] + ' ';
|
||||
test = `${line + words[i]} `;
|
||||
metrics = ctx.measureText(test);
|
||||
|
||||
if (metrics.width > maxWidth && i > 0) {
|
||||
ctx.fillText(line, x, y);
|
||||
line = words[i] + ' ';
|
||||
line = `${words[i]} `;
|
||||
y += lineHeight;
|
||||
} else {
|
||||
line = test;
|
||||
|
|
|
@ -447,7 +447,7 @@ storage.get({
|
|||
if(window.document_file_path_to_open){
|
||||
open_from_file_path(document_file_path_to_open, err => {
|
||||
if(err){
|
||||
return show_error_message("Failed to open file " + document_file_path_to_open, err);
|
||||
return show_error_message(`Failed to open file ${document_file_path_to_open}`, err);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
@ -582,7 +582,7 @@ function canvas_pointer_move(e){
|
|||
}
|
||||
$canvas.on("pointermove", e => {
|
||||
pointer = e2c(e);
|
||||
$status_position.text(pointer.x + "," + pointer.y);
|
||||
$status_position.text(`${pointer.x},${pointer.y}`);
|
||||
});
|
||||
$canvas.on("pointerenter", e => {
|
||||
pointer_over_canvas = true;
|
||||
|
|
|
@ -63,14 +63,14 @@ window.save_to_file_path = (filePath, formatName, savedCallback) => {
|
|||
// "24-bit Bitmap": "image/bitmap",
|
||||
}[formatName];
|
||||
if(!mimeType){
|
||||
return show_error_message("Can't save as " + formatName + ". Format is not supported.");
|
||||
return show_error_message(`Can't save as ${formatName}. Format is not supported.`);
|
||||
}
|
||||
// if(mimeType === "image/gif"){
|
||||
// new GIF();
|
||||
// }
|
||||
canvas.toBlob(blob => {
|
||||
if(blob.type !== mimeType){
|
||||
return show_error_message("Failed to save as " + formatName + " (your browser doesn't support exporting a canvas as \"" + mimeType + "\")");
|
||||
return show_error_message(`Failed to save as ${formatName} (your browser doesn't support exporting a canvas as "${mimeType}")`);
|
||||
}
|
||||
sanity_check_blob(blob, () => {
|
||||
blob_to_buffer(blob, (err, buffer) => {
|
||||
|
@ -127,7 +127,7 @@ window.systemSaveCanvasAs = (canvas, suggestedFileName, savedCallback) => {
|
|||
}
|
||||
const formatNameMatched = ((filters.find(filter => filter.extensions.includes(extension))) || {}).name;
|
||||
if(!formatNameMatched){
|
||||
return show_error_message("Can't save as *." +extension + " - try adding .png to the file name");
|
||||
return show_error_message(`Can't save as *.${extension} - try adding .png to the file name`);
|
||||
}
|
||||
|
||||
save_to_file_path(filePath, formatNameMatched, savedCallback);
|
||||
|
|
|
@ -237,7 +237,7 @@ function reset_canvas_and_history(){
|
|||
}
|
||||
|
||||
function update_title(){
|
||||
document.title = file_name + " - Paint";
|
||||
document.title = `${file_name} - Paint`;
|
||||
}
|
||||
|
||||
function create_and_trigger_input(attrs, callback){
|
||||
|
@ -305,7 +305,7 @@ function load_image_from_URI(uri, callback){
|
|||
img.crossOrigin = "Anonymous";
|
||||
img.onload = function(){
|
||||
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth === 0) {
|
||||
return callback && callback(new Error("Image failed to load; naturalWidth == " + this.naturalWidth));
|
||||
return callback && callback(new Error(`Image failed to load; naturalWidth == ${this.naturalWidth}`));
|
||||
}
|
||||
callback(null, img);
|
||||
};
|
||||
|
@ -347,9 +347,9 @@ function get_image_file_from_FileList_or_show_error(files, user_input_method_ver
|
|||
}
|
||||
|
||||
if(files.length > 1){
|
||||
show_error_message("None of the files " + user_input_method_verb_past_tense + " appear to be images.");
|
||||
show_error_message(`None of the files ${user_input_method_verb_past_tense} appear to be images.`);
|
||||
}else{
|
||||
show_error_message("File " + user_input_method_verb_past_tense + " does not appear to be an image.");
|
||||
show_error_message(`File ${user_input_method_verb_past_tense} does not appear to be an image.`);
|
||||
}
|
||||
}
|
||||
function open_from_FileList(files, user_input_method_verb_past_tense){
|
||||
|
@ -401,7 +401,7 @@ function file_load_from_url(){
|
|||
// (but still load from the hash when necessary)
|
||||
// make sure it doesn't overwrite the old session before switching
|
||||
$w.close();
|
||||
location.hash = "load:" + encodeURIComponent(uris[0]);
|
||||
location.hash = `load:${encodeURIComponent(uris[0])}`;
|
||||
} else {
|
||||
show_error_message("Invalid URL. It must include a protocol (https:// or http://)");
|
||||
}
|
||||
|
@ -417,7 +417,7 @@ function file_save(){
|
|||
deselect();
|
||||
if(file_name.match(/\.svg$/)){
|
||||
//TODO: only affect suggested name in save dialog, don't change file_name
|
||||
file_name = file_name.replace(/\.svg$/, "") + ".png";
|
||||
file_name = `${file_name.replace(/\.svg$/, "")}.png`;
|
||||
return file_save_as();
|
||||
}
|
||||
if(document_file_path){
|
||||
|
@ -434,7 +434,7 @@ function file_save(){
|
|||
|
||||
function file_save_as(){
|
||||
deselect();
|
||||
save_canvas_as(canvas, file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "") + ".png", (saved_file_path, saved_file_name) => {
|
||||
save_canvas_as(canvas, `${file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "")}.png`, (saved_file_path, saved_file_name) => {
|
||||
saved = true;
|
||||
document_file_path = saved_file_path;
|
||||
file_name = saved_file_name;
|
||||
|
@ -449,7 +449,7 @@ function are_you_sure(action, canceled){
|
|||
}else{
|
||||
const $w = new $FormWindow().addClass("dialogue-window");
|
||||
$w.title("Paint");
|
||||
$w.$main.text("Save changes to "+file_name+"?");
|
||||
$w.$main.text(`Save changes to ${file_name}?`);
|
||||
$w.$Button("Save", () => {
|
||||
$w.close();
|
||||
file_save();
|
||||
|
@ -762,7 +762,7 @@ function render_history_as_gif(){
|
|||
|
||||
gif.on("progress", p => {
|
||||
$progress.val(p);
|
||||
$progress_percent.text(~~(p*100)+"%");
|
||||
$progress_percent.text(`${~~(p*100)}%`);
|
||||
});
|
||||
|
||||
gif.on("finished", blob => {
|
||||
|
@ -784,7 +784,7 @@ function render_history_as_gif(){
|
|||
$win.$Button("Save", () => {
|
||||
$win.close();
|
||||
sanity_check_blob(blob, () => {
|
||||
saveAs(blob, file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "") + " history.gif");
|
||||
saveAs(blob, `${file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "")} history.gif`);
|
||||
});
|
||||
});
|
||||
$cancel.appendTo($win.$buttons);
|
||||
|
@ -869,7 +869,7 @@ function undoable(callback, action){
|
|||
if(redos.length > 5){
|
||||
const $w = new $FormWindow().addClass("dialogue-window");
|
||||
$w.title("Paint");
|
||||
$w.$main.html("Discard "+redos.length+" possible redo-able actions?<br>(Ctrl+Y or Ctrl+Shift+Z to redo)<br>");
|
||||
$w.$main.html(`Discard ${redos.length} possible redo-able actions?<br>(Ctrl+Y or Ctrl+Shift+Z to redo)<br>`);
|
||||
$w.$Button(action ? "Discard and Apply" : "Discard", () => {
|
||||
$w.close();
|
||||
redos.length = 0;
|
||||
|
@ -995,7 +995,7 @@ async function edit_copy(execCommandFallback){
|
|||
if (execCommandFallback) {
|
||||
return try_exec_command("copy");
|
||||
} else {
|
||||
throw new Error("The Async Clipboard API is not supported by this browser. " + browserRecommendationForClipboardAccess);
|
||||
throw new Error(`The Async Clipboard API is not supported by this browser. ${browserRecommendationForClipboardAccess}`);
|
||||
}
|
||||
}
|
||||
navigator.clipboard.writeText(text);
|
||||
|
@ -1004,7 +1004,7 @@ async function edit_copy(execCommandFallback){
|
|||
if (execCommandFallback) {
|
||||
return try_exec_command("copy");
|
||||
} else {
|
||||
throw new Error("The Async Clipboard API is not supported by this browser. " + browserRecommendationForClipboardAccess);
|
||||
throw new Error(`The Async Clipboard API is not supported by this browser. ${browserRecommendationForClipboardAccess}`);
|
||||
}
|
||||
}
|
||||
selection.canvas.toBlob(blob => {
|
||||
|
@ -1028,7 +1028,7 @@ function edit_cut(execCommandFallback){
|
|||
if (execCommandFallback) {
|
||||
return try_exec_command("cut");
|
||||
} else {
|
||||
throw new Error("The Async Clipboard API is not supported by this browser. " + browserRecommendationForClipboardAccess);
|
||||
throw new Error(`The Async Clipboard API is not supported by this browser. ${browserRecommendationForClipboardAccess}`);
|
||||
}
|
||||
}
|
||||
edit_copy();
|
||||
|
@ -1043,7 +1043,7 @@ async function edit_paste(execCommandFallback){
|
|||
if (execCommandFallback) {
|
||||
return try_exec_command("paste");
|
||||
} else {
|
||||
throw new Error("The Async Clipboard API is not supported by this browser. " + browserRecommendationForClipboardAccess);
|
||||
throw new Error(`The Async Clipboard API is not supported by this browser. ${browserRecommendationForClipboardAccess}`);
|
||||
}
|
||||
}
|
||||
const clipboardText = await navigator.clipboard.readText();
|
||||
|
@ -1054,7 +1054,7 @@ async function edit_paste(execCommandFallback){
|
|||
if (execCommandFallback) {
|
||||
return try_exec_command("paste");
|
||||
} else {
|
||||
throw new Error("The Async Clipboard API is not supported by this browser. " + browserRecommendationForClipboardAccess);
|
||||
throw new Error(`The Async Clipboard API is not supported by this browser. ${browserRecommendationForClipboardAccess}`);
|
||||
}
|
||||
}
|
||||
try {
|
||||
|
@ -1277,7 +1277,7 @@ function image_attributes(){
|
|||
const $table = $(E("table")).appendTo($main);
|
||||
for(const k in table){
|
||||
const $tr = $(E("tr")).appendTo($table);
|
||||
const $key = $(E("td")).appendTo($tr).text(k + ":");
|
||||
const $key = $(E("td")).appendTo($tr).text(`${k}:`);
|
||||
const $value = $(E("td")).appendTo($tr).text(table[k]);
|
||||
}
|
||||
|
||||
|
@ -1310,7 +1310,7 @@ function image_attributes(){
|
|||
$units.append('<label><input type="radio" name="units" value="in">Inches</label>');
|
||||
$units.append('<label><input type="radio" name="units" value="cm">Cm</label>');
|
||||
$units.append('<label><input type="radio" name="units" value="px">Pixels</label>');
|
||||
$units.find("[value=" + current_unit + "]").attr({checked: true});
|
||||
$units.find(`[value=${current_unit}]`).attr({checked: true});
|
||||
$units.on("change", () => {
|
||||
const new_unit = $units.find(":checked").val();
|
||||
$width.val(width_in_px / unit_sizes_in_px[new_unit]);
|
||||
|
@ -1321,12 +1321,12 @@ function image_attributes(){
|
|||
const $colors = $(E("fieldset")).appendTo($main).append('<legend>Colors</legend>');
|
||||
$colors.append('<label><input type="radio" name="colors" value="monochrome">Black and White</label>');
|
||||
$colors.append('<label><input type="radio" name="colors" value="polychrome">Color</label>');
|
||||
$colors.find("[value=" + (monochrome ? "monochrome" : "polychrome") + "]").attr({checked: true});
|
||||
$colors.find(`[value=${monochrome ? "monochrome" : "polychrome"}]`).attr({checked: true});
|
||||
|
||||
const $transparency = $(E("fieldset")).appendTo($main).append('<legend>Transparency</legend>');
|
||||
$transparency.append('<label><input type="radio" name="transparency" value="transparent">Transparent</label>');
|
||||
$transparency.append('<label><input type="radio" name="transparency" value="opaque">Opaque</label>');
|
||||
$transparency.find("[value=" + (transparency ? "transparent" : "opaque") + "]").attr({checked: true});
|
||||
$transparency.find(`[value=${transparency ? "transparent" : "opaque"}]`).attr({checked: true});
|
||||
|
||||
// Buttons on the right
|
||||
|
||||
|
@ -1470,7 +1470,7 @@ function image_stretch_and_skew(){
|
|||
const $RowInput = ($table, img_src, label_text, default_value, label_unit) => {
|
||||
const $tr = $(E("tr")).appendTo($table);
|
||||
const $img = $(E("img")).attr({
|
||||
src: "images/transforms/" + img_src + ".png"
|
||||
src: `images/transforms/${img_src}.png`
|
||||
}).css({
|
||||
marginRight: "20px"
|
||||
});
|
||||
|
@ -1519,7 +1519,7 @@ function save_canvas_as(canvas, fileName, savedCallbackUnreliable){
|
|||
// TODO: file name + type dialog
|
||||
canvas.toBlob(blob => {
|
||||
sanity_check_blob(blob, () => {
|
||||
const file_saver = saveAs(blob, file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "") + ".png");
|
||||
const file_saver = saveAs(blob, `${file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "")}.png`);
|
||||
file_saver.onwriteend = () => {
|
||||
// this won't fire in chrome
|
||||
savedCallbackUnreliable();
|
||||
|
@ -1554,7 +1554,7 @@ function set_as_wallpaper_centered(c){
|
|||
|
||||
c.toBlob(blob => {
|
||||
sanity_check_blob(blob, () => {
|
||||
saveAs(blob, file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "") + " wallpaper.png");
|
||||
saveAs(blob, `${file_name.replace(/\.(bmp|dib|a?png|gif|jpe?g|jpe|jfif|tiff?|webp|raw)$/, "")} wallpaper.png`);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
|
|
@ -70,7 +70,7 @@ function show_help(){
|
|||
const object = parse_object_params($(li).children("object"));
|
||||
const $item_li = $(E("li")).addClass("page");
|
||||
$item_li.append($Item(object.Name).on("click", e => {
|
||||
$iframe.attr({src: "help/" + object.Local});
|
||||
$iframe.attr({src: `help/${object.Local}`});
|
||||
}));
|
||||
$folder_items_ul.append($item_li);
|
||||
});
|
||||
|
|
|
@ -24,9 +24,7 @@ const TAU = //////|//////
|
|||
const $G = $(window);
|
||||
|
||||
function Cursor(cursor_def){
|
||||
return "url(images/cursors/" + cursor_def[0] + ".png) " +
|
||||
cursor_def[1].join(" ") +
|
||||
", " + cursor_def[2];
|
||||
return `url(images/cursors/${cursor_def[0]}.png) ${cursor_def[1].join(" ")}, ${cursor_def[2]}`;
|
||||
}
|
||||
|
||||
function E(t){
|
||||
|
|
|
@ -633,12 +633,12 @@ function draw_grid(ctx, scale) {
|
|||
}
|
||||
function begincallback(type) {
|
||||
if (type !== libtess.primitiveType.GL_TRIANGLES) {
|
||||
console.log('expected TRIANGLES but got type: ' + type);
|
||||
console.log(`expected TRIANGLES but got type: ${type}`);
|
||||
}
|
||||
}
|
||||
function errorcallback(errno) {
|
||||
console.log('error callback');
|
||||
console.log('error number: ' + errno);
|
||||
console.log(`error number: ${errno}`);
|
||||
}
|
||||
// callback for when segments intersect and must be split
|
||||
function combinecallback(coords, data, weight) {
|
||||
|
@ -726,8 +726,7 @@ function draw_grid(ctx, scale) {
|
|||
|
||||
if (!gl.getShaderParameter(vertexShader, gl.COMPILE_STATUS)) {
|
||||
console.log(
|
||||
'Vertex shader failed to compile. Log: ' +
|
||||
gl.getShaderInfoLog(vertexShader)
|
||||
`Vertex shader failed to compile. Log: ${gl.getShaderInfoLog(vertexShader)}`
|
||||
);
|
||||
}
|
||||
|
||||
|
@ -744,8 +743,7 @@ function draw_grid(ctx, scale) {
|
|||
|
||||
if (!gl.getShaderParameter(fragmentShader, gl.COMPILE_STATUS)) {
|
||||
console.log(
|
||||
'Fragment shader failed to compile. Log: ' +
|
||||
gl.getShaderInfoLog(fragmentShader)
|
||||
`Fragment shader failed to compile. Log: ${gl.getShaderInfoLog(fragmentShader)}`
|
||||
);
|
||||
}
|
||||
|
||||
|
|
|
@ -89,7 +89,7 @@ function show_imgur_uploader(blob){
|
|||
req.upload.addEventListener('progress', event => {
|
||||
if(event.lengthComputable){
|
||||
const progress_value = event.loaded / event.total;
|
||||
const percentage_text = Math.floor(progress_value * 100) + "%";
|
||||
const percentage_text = `${Math.floor(progress_value * 100)}%`;
|
||||
$progress.val(progress_value);
|
||||
$progress_percent.text(percentage_text);
|
||||
}
|
||||
|
@ -142,7 +142,7 @@ function show_imgur_uploader(blob){
|
|||
}
|
||||
});
|
||||
|
||||
req.open("DELETE", "https://api.imgur.com/3/image/" + response.data.deletehash, true);
|
||||
req.open("DELETE", `https://api.imgur.com/3/image/${response.data.deletehash}`, true);
|
||||
|
||||
req.setRequestHeader("Authorization", "Client-ID 203da2f300125a1");
|
||||
req.setRequestHeader("Accept", "application/json");
|
||||
|
|
|
@ -53,7 +53,7 @@ function manage_storage(){
|
|||
|
||||
const $img = $(E("img")).attr({src: imgSrc});
|
||||
const $remove = $(E("button")).text("Remove").addClass("remove-button");
|
||||
const href = "#" + k.replace("image#", "local:");
|
||||
const href = `#${k.replace("image#", "local:")}`;
|
||||
const $open_link = $(E("a")).attr({href: href, target: "_blank"}).text("Open");
|
||||
const $thumbnail_open_link = $(E("a")).attr({href: href, target: "_blank"}).addClass("thumbnail-container");
|
||||
$thumbnail_open_link.append($img);
|
||||
|
|
|
@ -446,7 +446,7 @@ const menus = {
|
|||
}else if(name.match(/[./[\]#$]/)){
|
||||
show_error_message("The session name cannot contain any of ./[]#$");
|
||||
}else{
|
||||
location.hash = "session:" + name;
|
||||
location.hash = `session:${name}`;
|
||||
}
|
||||
}
|
||||
},
|
||||
|
|
|
@ -97,8 +97,8 @@
|
|||
|
||||
class LocalSession {
|
||||
constructor(session_id) {
|
||||
const lsid = "image#" + session_id;
|
||||
log("local storage id: " + lsid);
|
||||
const lsid = `image#${session_id}`;
|
||||
log(`local storage id: ${lsid}`);
|
||||
// save image to storage
|
||||
const save_image_to_storage = () => {
|
||||
const save_paused = handle_data_loss();
|
||||
|
@ -178,11 +178,11 @@
|
|||
};
|
||||
|
||||
// The main cursor color
|
||||
user.color = "hsla(" + user.hue + ", " + user.saturation + "%, " + user.lightness + "%, 1)";
|
||||
user.color = `hsla(${user.hue}, ${user.saturation}%, ${user.lightness}%, 1)`;
|
||||
// Unused
|
||||
user.color_transparent = "hsla(" + user.hue + ", " + user.saturation + "%, " + user.lightness + "%, 0.5)";
|
||||
user.color_transparent = `hsla(${user.hue}, ${user.saturation}%, ${user.lightness}%, 0.5)`;
|
||||
// (@TODO) The color used in the toolbar indicating to other users it is selected by this user
|
||||
user.color_desaturated = "hsla(" + user.hue + ", " + ~~(user.saturation*0.4) + "%, " + user.lightness + "%, 0.8)";
|
||||
user.color_desaturated = `hsla(${user.hue}, ${~~(user.saturation*0.4)}%, ${user.lightness}%, 0.8)`;
|
||||
|
||||
|
||||
// The image used for other people's cursors
|
||||
|
@ -193,10 +193,10 @@
|
|||
class FireSession {
|
||||
constructor(session_id) {
|
||||
this.id = session_id;
|
||||
file_name = "[Loading " + this.id + "]";
|
||||
file_name = `[Loading ${this.id}]`;
|
||||
update_title();
|
||||
const on_firebase_loaded = () => {
|
||||
file_name = "[" + this.id + "]";
|
||||
file_name = `[${this.id}]`;
|
||||
update_title();
|
||||
this.start();
|
||||
};
|
||||
|
@ -217,7 +217,7 @@
|
|||
})
|
||||
.fail(() => {
|
||||
show_error_message("Failed to load Firebase; the document will not load, and changes will not be saved.");
|
||||
file_name = "[Failed to load " + this.id + "]";
|
||||
file_name = `[Failed to load ${this.id}]`;
|
||||
update_title();
|
||||
});
|
||||
}
|
||||
|
@ -389,7 +389,7 @@
|
|||
}
|
||||
}, error => {
|
||||
show_error_message("Failed to retrieve data from Firebase. The document will not load, and changes will not be saved.", error);
|
||||
file_name = "[Failed to load " + this.id + "]";
|
||||
file_name = `[Failed to load ${this.id}]`;
|
||||
update_title();
|
||||
});
|
||||
// Update the cursor status
|
||||
|
@ -417,7 +417,7 @@
|
|||
$G.off(".session-hook");
|
||||
// Remove collected Firebase event listeners
|
||||
this._fb_listeners.forEach(({ fb, event_type, callback, error_callback }) => {
|
||||
log("remove listener for " + fb.path.toString() + " .on " + event_type);
|
||||
log(`remove listener for ${fb.path.toString()} .on ${event_type}`);
|
||||
fb.off(event_type, callback);
|
||||
});
|
||||
this._fb_listeners.length = 0;
|
||||
|
@ -470,10 +470,10 @@
|
|||
// @TODO: Ask if you want to save before starting a new session
|
||||
end_current_session();
|
||||
if(local){
|
||||
log("starting a new local session, id: "+session_id);
|
||||
log(`starting a new local session, id: ${session_id}`);
|
||||
current_session = new LocalSession(session_id);
|
||||
}else{
|
||||
log("starting a new Firebase session, id: "+session_id);
|
||||
log(`starting a new Firebase session, id: ${session_id}`);
|
||||
current_session = new FireSession(session_id);
|
||||
}
|
||||
}
|
||||
|
@ -505,7 +505,7 @@
|
|||
log("switching to new session from #load: URL because of user interaction");
|
||||
end_current_session();
|
||||
const new_session_id = generate_session_id();
|
||||
location.hash = "local:" + new_session_id;
|
||||
location.hash = `local:${new_session_id}`;
|
||||
}
|
||||
});
|
||||
}, 100);
|
||||
|
@ -515,7 +515,7 @@
|
|||
log("no session id in hash");
|
||||
end_current_session();
|
||||
const new_session_id = generate_session_id();
|
||||
history.replaceState(null, document.title, "#local:" + new_session_id);
|
||||
history.replaceState(null, document.title, `#local:${new_session_id}`);
|
||||
log("after replaceState", location.hash);
|
||||
update_session_from_location_hash();
|
||||
}
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
((() => {
|
||||
let isArray, localStore;
|
||||
|
||||
isArray = Array.isArray || (a => ("" + a) !== a && {}.toString.call(a) === "[object Array]");
|
||||
isArray = Array.isArray || (a => (`${a}`) !== a && {}.toString.call(a) === "[object Array]");
|
||||
|
||||
localStore = {
|
||||
get(key, callback) {
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
(() => {
|
||||
const default_theme = "classic.css";
|
||||
const theme_storage_key = "jspaint theme";
|
||||
const href_for = theme => "styles/themes/" + theme;
|
||||
const href_for = theme => `styles/themes/${theme}`;
|
||||
|
||||
let current_theme;
|
||||
try {
|
||||
|
|
|
@ -312,7 +312,7 @@ tools = [{
|
|||
const g = id.data[1];
|
||||
const b = id.data[2];
|
||||
const a = id.data[3];
|
||||
this.current_color = "rgba("+r+","+g+","+b+","+a/255+")";
|
||||
this.current_color = `rgba(${r},${g},${b},${a/255})`;
|
||||
}else{
|
||||
this.current_color = "white";
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue