mirror of
https://github.com/viliusle/miniPaint.git
synced 2026-02-06 16:06:47 +00:00
responsive design
This commit is contained in:
ViliusL
parent
76b728a0d5
commit
58d0d8f042
38
config.js
38
config.js
@ -19,23 +19,23 @@ var COLOR = '#0000ff'; //active color
|
||||
var ALPHA = 255; //active color alpha
|
||||
|
||||
var DRAW_TOOLS_CONFIG = [
|
||||
{name: 'select_tool', title: 'Select object tool', icon: ['all.png', 0+7, 2], attributes: {} },
|
||||
{name: 'select_square', title: 'Select area tool', icon: ['all.png', -50+4, 5], attributes: {} },
|
||||
{name: 'magic_wand', title: 'Magic Wand Tool', icon: ['all.png', -150+1, -50+2], attributes: {sensitivity: 40, anti_aliasing: true} },
|
||||
{name: 'erase', title: 'Erase', icon: ['all.png', -100+3, 4], attributes: {size: 20, circle: true, strict: true} },
|
||||
{name: 'fill', title: 'Fill', icon: ['all.png', -150+3, 3], attributes: {sensitivity: 0, anti_aliasing: false} },
|
||||
{name: 'pick_color', title: 'Pick Color', icon: ['all.png', -200+3, 3], attributes: {} },
|
||||
{name: 'pencil', title: 'Pencil', icon: ['all.png', -250+3, 3], attributes: {} },
|
||||
{name: 'line', title: 'Draw line', icon: ['all.png', -300+3, 3], attributes: {size: 1, type_values: ['Simple', 'Multi-line', 'Arrow', 'Curve'] } },
|
||||
{name: 'letters', title: 'Draw letters', icon: ['all.png', -350+3, 4], attributes: {} },
|
||||
{name: 'draw_square', title: 'Draw rectangle', icon: ['all.png', -400+3, 5], attributes: {fill: false, square: false} },
|
||||
{name: 'draw_circle', title: 'Draw circle', icon: ['all.png', -450+3, 5], attributes: {fill: false, circle: false} },
|
||||
{name: 'brush', title: 'Brush', icon: ['all.png', -500+6, 3], attributes: {type: 'Brush', type_values: ['Brush', 'BezierCurve', 'Chrome', 'Fur', 'Grouped', 'Shaded', 'Sketchy'], size: 5, anti_alias: false }, on_update: 'update_brush', },
|
||||
{name: 'blur_tool', title: 'Blur tool', icon: ['all.png', -250+5, -50+2], attributes: {size: 30, strength: 1} },
|
||||
{name: 'sharpen_tool', title: 'Sharpen tool', icon: ['all.png', -300+5, -50+2], attributes: {size: 30, strength: 0.5} },
|
||||
{name: 'burn_dodge_tool', title: 'Burn/Dodge tool', icon: ['all.png', -500+3, -50+4], attributes: {burn: true, size: 30, power: 50} },
|
||||
{name: 'desaturate_tool', title: 'Desaturate', icon: ['all.png', -550+3, -00+4], attributes: {size: 50, anti_alias: true} },
|
||||
{name: 'clone_tool', title: 'Clone tool', icon: ['all.png', -350+4, -50+3], attributes: {size: 30, anti_alias: true} },
|
||||
{name: 'gradient_tool', title: 'Gradient', icon: ['all.png', -400+3, -50+4], attributes: {radial: false, power: 50} },
|
||||
{name: 'crop_tool', title: 'Crop', icon: ['all.png', -450+2, -50+2], attributes: { } },
|
||||
{name: 'select_tool', title: 'Select object tool', icon: ['sprites.png', 0+7, 2], attributes: {} },
|
||||
{name: 'select_square', title: 'Select area tool', icon: ['sprites.png', -50+4, 5], attributes: {} },
|
||||
{name: 'magic_wand', title: 'Magic Wand Tool', icon: ['sprites.png', -150+1, -50+2], attributes: {power: 40, anti_aliasing: true} },
|
||||
{name: 'erase', title: 'Erase', icon: ['sprites.png', -100+3, 4], attributes: {size: 20, circle: true, strict: true} },
|
||||
{name: 'fill', title: 'Fill', icon: ['sprites.png', -150+3, 3], attributes: {power: 0, anti_aliasing: false} },
|
||||
{name: 'pick_color', title: 'Pick Color', icon: ['sprites.png', -200+3, 3], attributes: {} },
|
||||
{name: 'pencil', title: 'Pencil', icon: ['sprites.png', -250+3, 3], attributes: {} },
|
||||
{name: 'line', title: 'Draw line', icon: ['sprites.png', -300+3, 3], attributes: {size: 1, type_values: ['Simple', 'Multi-line', 'Arrow', 'Curve'] } },
|
||||
{name: 'letters', title: 'Draw letters', icon: ['sprites.png', -350+3, 4], attributes: {} },
|
||||
{name: 'draw_square', title: 'Draw rectangle', icon: ['sprites.png', -400+3, 5], attributes: {fill: false, square: false} },
|
||||
{name: 'draw_circle', title: 'Draw circle', icon: ['sprites.png', -450+3, 5], attributes: {fill: false, circle: false} },
|
||||
{name: 'brush', title: 'Brush', icon: ['sprites.png', -500+6, 3], attributes: {type: 'Brush', type_values: ['Brush', 'BezierCurve', 'Chrome', 'Fur', 'Grouped', 'Shaded', 'Sketchy'], size: 5, anti_alias: false }, on_update: 'update_brush', },
|
||||
{name: 'blur_tool', title: 'Blur tool', icon: ['sprites.png', -250+5, -50+2], attributes: {size: 30, power: 1} },
|
||||
{name: 'sharpen_tool', title: 'Sharpen tool', icon: ['sprites.png', -300+5, -50+2], attributes: {size: 30 } },
|
||||
{name: 'burn_dodge_tool', title: 'Burn/Dodge tool', icon: ['sprites.png', -500+3, -50+4], attributes: {burn: true, size: 30, power: 50} },
|
||||
{name: 'desaturate_tool', title: 'Desaturate', icon: ['sprites.png', -550+3, -00+4], attributes: {size: 50, anti_alias: true} },
|
||||
{name: 'clone_tool', title: 'Clone tool', icon: ['sprites.png', -350+4, -50+3], attributes: {size: 30, anti_alias: true} },
|
||||
{name: 'gradient_tool', title: 'Gradient', icon: ['sprites.png', -400+3, -50+4], attributes: {radial: false, power: 50} },
|
||||
{name: 'crop_tool', title: 'Crop', icon: ['sprites.png', -450+2, -50+2], attributes: { } },
|
||||
];
|
||||
|
||||
BIN
img/all.png
BIN
img/all.png
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
BIN
img/sprites.png
Normal file
BIN
img/sprites.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.9 KiB |
18
index.html
18
index.html
@ -70,10 +70,14 @@
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="mobile_menu">
|
||||
<a class="left_mobile_menu" onclick="GUI.toggle('#sidebar_left');return false;" href="#"></a>
|
||||
<a class="right_mobile_menu" onclick="GUI.toggle('#sidebar_right');return false;" href="#"></a>
|
||||
</div>
|
||||
<div id="main_menu" class="ddsmoothmenu">
|
||||
<ul>
|
||||
<li>
|
||||
<a href="#">File</a>
|
||||
<a class="icon file" href="#">File</a>
|
||||
<ul>
|
||||
<li><a onclick="call_menu(FILE, 'file_new');" href="#">New</a></li>
|
||||
<li><a onclick="call_menu(FILE, 'file_open');" href="#">Open...</a></li>
|
||||
@ -82,7 +86,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Edit</a>
|
||||
<a class="icon edit" href="#">Edit</a>
|
||||
<ul>
|
||||
<li><a onclick="call_menu(EDIT, 'edit_undo');" href="#">Undo</a></li>
|
||||
<li><div class="mid-line"></div></li>
|
||||
@ -95,7 +99,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Image</a>
|
||||
<a class="icon image" href="#">Image</a>
|
||||
<ul>
|
||||
<li><a onclick="call_menu(IMAGE, 'image_information');" href="#">Information...</a></li>
|
||||
<li><a onclick="call_menu(IMAGE, 'image_size');" href="#">Size...</a></li>
|
||||
@ -130,7 +134,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Layer</a>
|
||||
<a class="icon layer" href="#">Layer</a>
|
||||
<ul>
|
||||
<li><a onclick="call_menu(LAYER, 'layer_new');" href="#">New</a></li>
|
||||
<li><a onclick="call_menu(LAYER, 'layer_dublicate');" href="#">Dublicate</a></li>
|
||||
@ -157,7 +161,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Effects</a>
|
||||
<a class="icon effects" href="#">Effects</a>
|
||||
<ul id="effects_list">
|
||||
<li><a onclick="call_menu(EFFECTS, 'effects_bw');" href="#">Black and White...</a>
|
||||
<li>
|
||||
@ -196,7 +200,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Tools</a>
|
||||
<a class="icon tools" href="#">Tools</a>
|
||||
<ul>
|
||||
<li><a onclick="call_menu(TOOLS, 'tools_borders');" href="#">Borders...</a></li>
|
||||
<li><a onclick="call_menu(TOOLS, 'tools_sprites');" href="#">Sprites...</a></li>
|
||||
@ -208,7 +212,7 @@
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
<a href="#">Help</a>
|
||||
<a class="icon help" href="#">Help</a>
|
||||
<ul>
|
||||
<li><a onclick="call_menu(HELP, 'help_shortcuts');" href="#">Keyboard Shortcuts...</a></li>
|
||||
<li><a onclick="window.location='http://viliusle.github.io/miniPaint/';" href="http://viliusle.github.io/miniPaint/">Website</a></li>
|
||||
|
||||
@ -169,8 +169,6 @@ function DRAW_TOOLS_CLASS() {
|
||||
context.globalCompositeOperation = 'source-over';
|
||||
};
|
||||
|
||||
|
||||
|
||||
//type = click, right_click, drag, move, release
|
||||
this.select_tool = function (type, mouse, event) {
|
||||
if (mouse == undefined)
|
||||
@ -199,10 +197,12 @@ function DRAW_TOOLS_CLASS() {
|
||||
}
|
||||
}
|
||||
else if (type == 'release') {
|
||||
if (mouse.valid == false || mouse.click_x === false)
|
||||
if (mouse.valid == false || mouse.click_x === false){
|
||||
return false;
|
||||
if (mouse.x - mouse.click_x == 0 || mouse.y - mouse.click_y == 0)
|
||||
}
|
||||
if (mouse.x - mouse.click_x == 0 && mouse.y - mouse.click_y == 0){
|
||||
return false;
|
||||
}
|
||||
EDIT.save_state();
|
||||
var tmp = canvas_active().getImageData(0, 0, WIDTH, HEIGHT);
|
||||
canvas_active().clearRect(0, 0, WIDTH, HEIGHT);
|
||||
@ -226,7 +226,7 @@ function DRAW_TOOLS_CLASS() {
|
||||
return true;
|
||||
if (type == 'click') {
|
||||
EDIT.save_state();
|
||||
this.tool_magic_wand(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, GUI.action_data().attributes.sensitivity, GUI.action_data().attributes.anti_aliasing);
|
||||
this.tool_magic_wand(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, GUI.action_data().attributes.power, GUI.action_data().attributes.anti_aliasing);
|
||||
}
|
||||
};
|
||||
this.erase = function (type, mouse, event) {
|
||||
@ -343,7 +343,7 @@ function DRAW_TOOLS_CLASS() {
|
||||
EDIT.save_state();
|
||||
var color_to = HELPER.hex2rgb(COLOR);
|
||||
color_to.a = ALPHA;
|
||||
DRAW.toolFiller(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, color_to, GUI.action_data().attributes.sensitivity, GUI.action_data().attributes.anti_aliasing);
|
||||
DRAW.toolFiller(canvas_active(), WIDTH, HEIGHT, mouse.x, mouse.y, color_to, GUI.action_data().attributes.power, GUI.action_data().attributes.anti_aliasing);
|
||||
}
|
||||
};
|
||||
this.pick_color = function (type, mouse, event) {
|
||||
@ -450,9 +450,10 @@ function DRAW_TOOLS_CLASS() {
|
||||
}
|
||||
}
|
||||
else if (type == 'click') {
|
||||
EDIT.save_state();
|
||||
//curve
|
||||
if (GUI.action_data().attributes.type == 'Curve') {
|
||||
EDIT.save_state();
|
||||
|
||||
canvas_active().beginPath();
|
||||
canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")";
|
||||
canvas_active().lineWidth = GUI.action_data().attributes.size;
|
||||
@ -472,7 +473,11 @@ function DRAW_TOOLS_CLASS() {
|
||||
}
|
||||
}
|
||||
else if (type == 'release') {
|
||||
if (mouse.x - mouse.click_x == 0 && mouse.y - mouse.click_y == 0)
|
||||
return false;
|
||||
|
||||
EDIT.save_state();
|
||||
|
||||
canvas_active().beginPath();
|
||||
canvas_active().strokeStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")";
|
||||
canvas_active().lineWidth = GUI.action_data().attributes.size;
|
||||
@ -658,6 +663,8 @@ function DRAW_TOOLS_CLASS() {
|
||||
EL.rectangle(canvas_front, mouse.click_x, mouse.click_y, width, height, fill);
|
||||
}
|
||||
else if (type == 'release') {
|
||||
if(mouse.x == mouse.click_x && mouse.y == mouse.click_y)
|
||||
return false;
|
||||
EDIT.save_state();
|
||||
|
||||
canvas_active().fillStyle = "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")";
|
||||
@ -686,9 +693,11 @@ function DRAW_TOOLS_CLASS() {
|
||||
EL.ellipse_by_center(canvas_front, mouse.click_x, mouse.click_y, dist_x * 2, dist_y * 2, "rgba(" + color_rgb.r + ", " + color_rgb.g + ", " + color_rgb.b + ", " + ALPHA / 255 + ")");
|
||||
}
|
||||
else if (type == 'release') {
|
||||
EDIT.save_state();
|
||||
dist_x = mouse.x - mouse.click_x;
|
||||
dist_y = mouse.y - mouse.click_y;
|
||||
if(dist_x == 0 && dist_y == 0)
|
||||
return false;
|
||||
EDIT.save_state();
|
||||
if (GUI.action_data().attributes.circle == true)
|
||||
dist_x = dist_y = Math.min(dist_x, dist_y);
|
||||
canvas_active().lineWidth = 1;
|
||||
@ -952,18 +961,15 @@ function DRAW_TOOLS_CLASS() {
|
||||
var power = GUI.action_data().attributes.power;
|
||||
if (power > 99)
|
||||
power = 99;
|
||||
//var color1, color2;
|
||||
|
||||
if (type == 'init') {
|
||||
POP.add({name: "param1", title: "Color #1:", value: '#000000', type: 'color'});
|
||||
POP.add({name: "param2", title: "Transparency #1:", value: '255', range: [0, 255]});
|
||||
POP.add({name: "param3", title: "Color #2:", value: '#ffffff', type: 'color'});
|
||||
POP.add({name: "param4", title: "Transparency #2:", value: '255', range: [0, 255]});
|
||||
POP.preview_in_main = true;
|
||||
POP.show(
|
||||
'Text',
|
||||
function (user_response) {
|
||||
EDIT.save_state();
|
||||
color1 = HELPER.hex2rgb(user_response.param1);
|
||||
color1.a = parseInt(user_response.param2);
|
||||
|
||||
@ -1066,7 +1072,7 @@ function DRAW_TOOLS_CLASS() {
|
||||
yy = 0;
|
||||
if (type == 'click') {
|
||||
EDIT.save_state();
|
||||
var param1 = GUI.action_data().attributes.strength;
|
||||
var param1 = GUI.action_data().attributes.power;
|
||||
var imageData = canvas_active().getImageData(xx, yy, size, size);
|
||||
var filtered = ImageFilters.StackBlur(imageData, param1); //add effect
|
||||
EL.image_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"));
|
||||
@ -1076,7 +1082,7 @@ function DRAW_TOOLS_CLASS() {
|
||||
EL.circle(canvas_front, mouse.x, mouse.y, size);
|
||||
}
|
||||
else if (type == 'drag') {
|
||||
var param1 = GUI.action_data().attributes.strength;
|
||||
var param1 = GUI.action_data().attributes.power;
|
||||
var imageData = canvas_active().getImageData(xx, yy, size, size);
|
||||
var filtered = ImageFilters.StackBlur(imageData, param1); //add effect
|
||||
EL.image_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"));
|
||||
@ -1095,7 +1101,7 @@ function DRAW_TOOLS_CLASS() {
|
||||
if (mouse.valid == false)
|
||||
return true;
|
||||
var size = GUI.action_data().attributes.size;
|
||||
var size_half = Math.round(size / 2);
|
||||
var param1 = 0.5;
|
||||
var xx = mouse.x - size / 2;
|
||||
var yy = mouse.y - size / 2;
|
||||
if (xx < 0)
|
||||
@ -1105,7 +1111,6 @@ function DRAW_TOOLS_CLASS() {
|
||||
|
||||
if (type == 'click') {
|
||||
EDIT.save_state();
|
||||
var param1 = GUI.action_data().attributes.strength;
|
||||
var imageData = canvas_active().getImageData(xx, yy, size, size);
|
||||
var filtered = ImageFilters.Sharpen(imageData, param1); //add effect
|
||||
EL.image_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"));
|
||||
@ -1114,7 +1119,6 @@ function DRAW_TOOLS_CLASS() {
|
||||
EL.circle(canvas_front, mouse.x, mouse.y, size);
|
||||
}
|
||||
else if (type == 'drag') {
|
||||
var param1 = GUI.action_data().attributes.strength;
|
||||
var imageData = canvas_active().getImageData(xx, yy, size, size);
|
||||
var filtered = ImageFilters.Sharpen(imageData, param1); //add effect
|
||||
EL.image_round(canvas_active(), mouse.x, mouse.y, size, filtered, document.getElementById("canvas_front"));
|
||||
@ -1516,7 +1520,10 @@ function DRAW_TOOLS_CLASS() {
|
||||
}
|
||||
}
|
||||
else {
|
||||
if (mouse.x - mouse.click_x == 0 && mouse.y - mouse.click_y == 0)
|
||||
return false;
|
||||
EDIT.save_state();
|
||||
|
||||
if (this.select_square_action == 'move') {
|
||||
if (this.select_data != false) {
|
||||
select_data_tmp = canvas_active().getImageData(this.select_data.x, this.select_data.y, this.select_data.w, this.select_data.h);
|
||||
|
||||
@ -132,7 +132,6 @@ function EDIT_CLASS() {
|
||||
WIDTH = layers_archive[j].width;
|
||||
HEIGHT = layers_archive[j].height;
|
||||
LAYER.set_canvas_size(true);
|
||||
return true; //size changed, cant undo
|
||||
}
|
||||
|
||||
//undo
|
||||
|
||||
86
js/events.js
86
js/events.js
@ -1,4 +1,4 @@
|
||||
/* global FILE, EDIT, HELPER, POP, MAIN, EVENTS, LAYER, IMAGE, GUI, DRAW */
|
||||
/* global FILE, EDIT, HELPER, POP, MAIN, EVENTS, LAYER, IMAGE, GUI, DRAW, EL */
|
||||
/* global canvas_active, canvas_front, WIDTH, HEIGHT, EXIF */
|
||||
|
||||
var EVENTS = new EVENTS_CLASS();
|
||||
@ -34,7 +34,12 @@ function EVENTS_CLASS() {
|
||||
/**
|
||||
* if user is holding ctrl
|
||||
*/
|
||||
this.ctrl_pressed = false; //17
|
||||
this.ctrl_pressed = false;
|
||||
|
||||
/**
|
||||
* if user is holding command key
|
||||
*/
|
||||
this.command_pressed = false;
|
||||
|
||||
/**
|
||||
* if use is holding shift
|
||||
@ -111,10 +116,25 @@ function EVENTS_CLASS() {
|
||||
k = event.keyCode; //console.log(k);
|
||||
|
||||
if (k != 27) {
|
||||
if (POP != undefined && POP.active == true)
|
||||
return true; //dialog active
|
||||
if (document.activeElement.type == 'text')
|
||||
return true; //text input selected
|
||||
//we can not touch these events!
|
||||
if (POP != undefined && POP.active == true){
|
||||
//dialog active
|
||||
return true;
|
||||
}
|
||||
if (document.activeElement.type == 'text'){
|
||||
//text input selected
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
//ctrl
|
||||
if (event.ctrlKey == true) {
|
||||
EVENTS.ctrl_pressed = true;
|
||||
}
|
||||
//command
|
||||
if(event.metaKey == true){
|
||||
EVENTS.command_pressed = true;
|
||||
EVENTS.ctrl_pressed = true;
|
||||
}
|
||||
|
||||
//up
|
||||
@ -165,8 +185,9 @@ function EVENTS_CLASS() {
|
||||
//z - undo
|
||||
else if (k == 90) {
|
||||
//undo
|
||||
if (EVENTS.ctrl_pressed == true)
|
||||
if (EVENTS.ctrl_pressed == true){
|
||||
EDIT.undo();
|
||||
}
|
||||
}
|
||||
//t - trim
|
||||
else if (k == 84) {
|
||||
@ -209,19 +230,15 @@ function EVENTS_CLASS() {
|
||||
}
|
||||
}
|
||||
//shift
|
||||
else if (k == 16)
|
||||
else if (k == 16){
|
||||
EVENTS.shift_pressed = true;
|
||||
//ctrl
|
||||
else if (k == 17) {
|
||||
if (EVENTS.ctrl_pressed == false)
|
||||
EVENTS.ctrl_pressed = true;
|
||||
}
|
||||
//d
|
||||
else if (k == 68) {
|
||||
call_menu(LAYER, 'layer_dublicate');
|
||||
}
|
||||
//a
|
||||
else if (k == 65) {
|
||||
else if (k == 65) {
|
||||
if (EVENTS.ctrl_pressed == true) {
|
||||
DRAW.select_data = {
|
||||
x: 0,
|
||||
@ -257,13 +274,7 @@ function EVENTS_CLASS() {
|
||||
//n - new layer
|
||||
else if (k == 78)
|
||||
LAYER.add_layer();
|
||||
|
||||
//mac support - ctrl
|
||||
if (k == 17 || event.metaKey || event.ctrlKey) {
|
||||
if (EVENTS.ctrl_pressed == false)
|
||||
EVENTS.ctrl_pressed = true;
|
||||
}
|
||||
|
||||
|
||||
GUI.zoom();
|
||||
return true;
|
||||
};
|
||||
@ -274,11 +285,14 @@ function EVENTS_CLASS() {
|
||||
if (k == 16)
|
||||
EVENTS.shift_pressed = false;
|
||||
//ctrl
|
||||
else if (k == 17)
|
||||
else if (event.ctrlKey == false && EVENTS.ctrl_pressed == true) {
|
||||
EVENTS.ctrl_pressed = false;
|
||||
//mac support - ctrl
|
||||
if (event.metaKey || event.ctrlKey || event.key == 'Meta')
|
||||
}
|
||||
//command
|
||||
else if(event.metaKey == false && EVENTS.command_pressed == true){
|
||||
EVENTS.command_pressed = false;
|
||||
EVENTS.ctrl_pressed = false;
|
||||
}
|
||||
};
|
||||
// mouse_x, mouse_y, event.pageX, event.pageY
|
||||
this.get_mouse_position = function (event) {
|
||||
@ -500,6 +514,7 @@ function EVENTS_CLASS() {
|
||||
|
||||
//main window resize
|
||||
if (resize_all != false && GUI.ZOOM == 100 && EVENTS.mouse.x > 0 && EVENTS.mouse.y > 0) {
|
||||
EDIT.save_state();
|
||||
EVENTS.autosize = false;
|
||||
document.body.style.cursor = "auto";
|
||||
if (resize_all == "w")
|
||||
@ -541,7 +556,7 @@ function EVENTS_CLASS() {
|
||||
}
|
||||
else {
|
||||
//xml
|
||||
var responce = MAIN.load_xml(event.target.result);
|
||||
var responce = FILE.load_xml(event.target.result);
|
||||
if (responce === true)
|
||||
return false;
|
||||
}
|
||||
@ -596,9 +611,9 @@ function EVENTS_CLASS() {
|
||||
EVENTS.ZOOM_POS[0] = mouse_x - EVENTS.mini_rect_data.w / 2;
|
||||
EVENTS.ZOOM_POS[1] = mouse_y - EVENTS.mini_rect_data.h / 2;
|
||||
if (EVENTS.ZOOM_POS[0] < 0)
|
||||
EVENTS.ZOOM_POS[0] = 0;
|
||||
if (EVENTS.ZOOM_POS[1] < 0)
|
||||
EVENTS.ZOOM_POS[1] = 0;
|
||||
if (EVENTS.ZOOM_Y < 0)
|
||||
EVENTS.ZOOM_Y = 0;
|
||||
|
||||
GUI.zoom(undefined, true);
|
||||
return true;
|
||||
@ -624,11 +639,18 @@ function EVENTS_CLASS() {
|
||||
popup = document.getElementById('popup');
|
||||
popup.style.top = 150 + 'px';
|
||||
popup.style.left = Math.round(dim[0] / 2) + 'px';
|
||||
|
||||
document.querySelector('#sidebar_left').classList.remove("active");
|
||||
document.querySelector('#sidebar_right').classList.remove("active");
|
||||
};
|
||||
}
|
||||
|
||||
function call_menu(class_name, function_name) {
|
||||
$('#main_menu').find('.selected').click(); //close menu
|
||||
//close menu
|
||||
var menu = document.querySelector('#main_menu .selected');
|
||||
if(menu != undefined){
|
||||
menu.click();
|
||||
}
|
||||
GUI.last_menu = function_name;
|
||||
|
||||
//exec
|
||||
@ -654,6 +676,7 @@ function CLIPBOARD_CLASS(canvas_id, autoresize) {
|
||||
var ctx = document.getElementById(canvas_id).getContext("2d");
|
||||
}
|
||||
var ctrl_pressed = false;
|
||||
var command_pressed = false;
|
||||
var reading_dom = false;
|
||||
var text_top = 15;
|
||||
var pasteCatcher;
|
||||
@ -757,10 +780,15 @@ function CLIPBOARD_CLASS(canvas_id, autoresize) {
|
||||
};
|
||||
//on kaybord release
|
||||
this.on_keyboardup_action = function (event) {
|
||||
k = event.keyCode;
|
||||
//ctrl
|
||||
if (k == 17 || event.metaKey || event.ctrlKey || event.key == 'Meta')
|
||||
if (event.ctrlKey == false && ctrl_pressed == true) {
|
||||
ctrl_pressed = false;
|
||||
}
|
||||
//command
|
||||
else if(event.metaKey == false && command_pressed == true){
|
||||
command_pressed = false;
|
||||
ctrl_pressed = false;
|
||||
}
|
||||
};
|
||||
//draw image
|
||||
this.paste_createImage = function (source) {
|
||||
|
||||
@ -102,7 +102,7 @@ function FILE_CLASS() {
|
||||
}
|
||||
else {
|
||||
//xml
|
||||
var responce = MAIN.load_xml(event.target.result);
|
||||
var responce = FILE.load_xml(event.target.result);
|
||||
if (responce === true)
|
||||
return false;
|
||||
}
|
||||
@ -325,7 +325,7 @@ function FILE_CLASS() {
|
||||
};
|
||||
|
||||
this.load_xml = function (data) {
|
||||
var xml = $.parseXML(data);
|
||||
var xml = $.parseXML(data); console.log(xml);
|
||||
w = $(xml).find("width").text();
|
||||
h = $(xml).find("height").text();
|
||||
|
||||
|
||||
@ -388,7 +388,7 @@ function GUI_CLASS() {
|
||||
html += '<table style="width:100%;">'; //table for 100% width
|
||||
html += '<tr>';
|
||||
html += '<td style="font-weight:bold;padding-right:2px;white-space:nowrap;">' + title + ':</td>';
|
||||
html += '<td><input onKeyUp="GUI.update_attribute(this);" type="text" id="' + k + '" value="' + GUI.action_data().attributes[k] + '" /></td>';
|
||||
html += '<td><input onKeyUp="GUI.update_attribute(this);" type="number" id="' + k + '" value="' + GUI.action_data().attributes[k] + '" /></td>';
|
||||
html += '</tr>';
|
||||
html += '</table>';
|
||||
html += '<div style="float:left;width:32px;" onclick="GUI.update_attribute(this, ' + (step) + ')" class="attribute-area" id="' + k + '">+</div>';
|
||||
@ -604,4 +604,7 @@ function GUI_CLASS() {
|
||||
}
|
||||
};
|
||||
|
||||
this.toggle = function(query){
|
||||
document.querySelector(query).classList.toggle("active");
|
||||
};
|
||||
}
|
||||
|
||||
23
js/image.js
23
js/image.js
@ -411,8 +411,13 @@ function IMAGE_CLASS() {
|
||||
}
|
||||
if (width > WIDTH || height > HEIGHT)
|
||||
user_response.mode = "Resize";
|
||||
|
||||
var time1 = Date.now();
|
||||
var resize_type;
|
||||
|
||||
//Hermite - good and fast
|
||||
if (user_response.mode == "Resample - Hermite") {
|
||||
resize_type = 'Hermite';
|
||||
this.resample_hermite(canvas_active(true), WIDTH, HEIGHT, width, height);
|
||||
if (GUI.last_menu != 'layer_resize') {
|
||||
WIDTH = width;
|
||||
@ -427,6 +432,7 @@ function IMAGE_CLASS() {
|
||||
}
|
||||
//simple resize
|
||||
if (user_response.mode == "Resize") {
|
||||
resize_type = 'Default';
|
||||
//simple resize - FAST
|
||||
tmp_data = document.createElement("canvas");
|
||||
tmp_data.width = WIDTH;
|
||||
@ -434,19 +440,16 @@ function IMAGE_CLASS() {
|
||||
tmp_data.getContext("2d").drawImage(canvas_active(true), 0, 0);
|
||||
|
||||
canvas_active().clearRect(0, 0, WIDTH, HEIGHT);
|
||||
if (width <= WIDTH) {
|
||||
canvas_active().drawImage(tmp_data, 0, 0, width, height);
|
||||
}
|
||||
else {
|
||||
WIDTH = Math.round(width);
|
||||
HEIGHT = Math.round(height);
|
||||
LAYER.set_canvas_size();
|
||||
canvas_active().drawImage(tmp_data, 0, 0, width, height);
|
||||
}
|
||||
WIDTH = width;
|
||||
HEIGHT = height;
|
||||
LAYER.set_canvas_size();
|
||||
canvas_active().drawImage(tmp_data, 0, 0, width, height);
|
||||
if (GUI.last_menu != 'layer_resize')
|
||||
this.trim();
|
||||
GUI.zoom();
|
||||
}
|
||||
|
||||
console.log(resize_type + " resize: " + (Math.round(Date.now() - time1) / 1000) + " s");
|
||||
|
||||
//sharpen after?
|
||||
if (sharpen == 'Yes') {
|
||||
@ -885,7 +888,6 @@ function IMAGE_CLASS() {
|
||||
|
||||
//hermite resample
|
||||
this.resample_hermite = function (canvas, W, H, W2, H2) {
|
||||
var time1 = Date.now();
|
||||
var img = canvas.getContext("2d").getImageData(0, 0, W, H);
|
||||
var img2 = canvas.getContext("2d").getImageData(0, 0, W2, H2);
|
||||
var data = img.data;
|
||||
@ -935,7 +937,6 @@ function IMAGE_CLASS() {
|
||||
data2[x2 + 3] = gx_a / weights_alpha;
|
||||
}
|
||||
}
|
||||
console.log("hermite = " + (Math.round(Date.now() - time1) / 1000) + " s");
|
||||
canvas.getContext("2d").clearRect(0, 0, Math.max(W, W2), Math.max(H, H2));
|
||||
canvas.getContext("2d").putImageData(img2, 0, 0);
|
||||
};
|
||||
|
||||
@ -247,10 +247,10 @@ function LAYER_CLASS() {
|
||||
//create layer
|
||||
this.layer_add = function (name, data, type) {
|
||||
tmp = new Array();
|
||||
layer_max_index++;
|
||||
if (data == undefined) {
|
||||
//empty layer
|
||||
if (name == undefined) {
|
||||
layer_max_index++;
|
||||
name = 'Layer #' + (layer_max_index + 1);
|
||||
}
|
||||
tmp.name = name;
|
||||
@ -289,7 +289,6 @@ function LAYER_CLASS() {
|
||||
|
||||
for (var i in _this.layers) {
|
||||
if (_this.layers[i].name == name) {
|
||||
layer_max_index++;
|
||||
name = 'Layer #' + (layer_max_index + 1);
|
||||
}
|
||||
}
|
||||
@ -555,6 +554,7 @@ function LAYER_CLASS() {
|
||||
}
|
||||
};
|
||||
this.set_alpha = function () {
|
||||
var _this = this;
|
||||
if (this.layers[LAYER.layer_active].opacity == undefined)
|
||||
this.layers[LAYER.layer_active].opacity = 1;
|
||||
POP.add({name: "param1", title: "Alpha:", value: this.layers[LAYER.layer_active].opacity, range: [0, 1], step: 0.01});
|
||||
@ -562,7 +562,7 @@ function LAYER_CLASS() {
|
||||
'Opacity',
|
||||
function (user_response) {
|
||||
var param1 = parseFloat(user_response.param1);
|
||||
this.layers[LAYER.layer_active].opacity = param1;
|
||||
_this.layers[LAYER.layer_active].opacity = param1;
|
||||
canvas_active().globalAlpha = param1;
|
||||
|
||||
var img = canvas_active().getImageData(0, 0, WIDTH, HEIGHT);
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
/* global POP, MAIN, SIFT, LAYER, IMAGE, EVENTS, HELPER, EDIT, GUI */
|
||||
/* global POP, MAIN, SIFT, LAYER, IMAGE, EVENTS, HELPER, EDIT, GUI, EL */
|
||||
/* global WIDTH, HEIGHT, COLOR, canvas_active */
|
||||
|
||||
var TOOLS = new TOOLS_CLASS();
|
||||
@ -237,6 +237,6 @@ function TOOLS_CLASS() {
|
||||
this.add_borders = function (context, W, H, color, size) {
|
||||
context.strokeStyle = color;
|
||||
context.lineWidth = size;
|
||||
HELPER.roundRect(context, 0 + 0.5, 0 + 0.5, W - 1, H - 1, 0, false, true);
|
||||
EL.rectangle(context, 0, 0, W-1, H-1, false, true);
|
||||
};
|
||||
}
|
||||
@ -1,6 +1,6 @@
|
||||
//http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
|
||||
var ddsmoothmenu={
|
||||
arrowimages:{down:["rightarrowclass","img/right.gif",6],right:["rightarrowclass","img/right.gif",6]},
|
||||
arrowimages:{down:["rightarrowclass","img/right.gif",0],right:["rightarrowclass","img/right.gif",0]},
|
||||
transition:{overtime:0,outtime:0}, //duration of slide in/out animation, in milliseconds
|
||||
shadow:false, //enable shadow?
|
||||
//showhidedelay:{showdelay:100,hidedelay:200}, //set delay in milliseconds before sub menus appear and disappear, respectively
|
||||
|
||||
@ -182,10 +182,18 @@ function popup() {
|
||||
//input or textarea
|
||||
if (parameter.placeholder == undefined)
|
||||
parameter.placeholder = '';
|
||||
if (parameter.type == 'textarea')
|
||||
if (parameter.type == 'textarea'){
|
||||
html += '<td><textarea style="height:80px;" id="pop_data_' + parameter.name + '" placeholder="' + parameter.placeholder + '">' + parameter.value + '</textarea></td>';
|
||||
else
|
||||
html += '<td colspan="2"><input type="text" id="pop_data_' + parameter.name + '" value="' + parameter.value + '" placeholder="' + parameter.placeholder + '" onkeyup="POP.validate(this);" /></td>';
|
||||
}
|
||||
else{
|
||||
var input_type="text";
|
||||
if(parameter.placeholder != undefined && typeof parameter.placeholder == 'number')
|
||||
input_type = 'number';
|
||||
if(parameter.value != undefined && typeof parameter.value == 'number')
|
||||
input_type = 'number';
|
||||
|
||||
html += '<td colspan="2"><input type="'+input_type+'" id="pop_data_' + parameter.name + '" value="' + parameter.value + '" placeholder="' + parameter.placeholder + '" onkeyup="POP.validate(this);" /></td>';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@ -68,11 +68,16 @@ input[type="button"]{
|
||||
margin: 5px;
|
||||
position:relative;
|
||||
min-height: 500px;
|
||||
overflow: hidden;
|
||||
}
|
||||
#sidebar_left{
|
||||
position: absolute;
|
||||
width: 100px;
|
||||
width: 105px;
|
||||
z-index: 100;
|
||||
left:0px;
|
||||
padding:0 5px 5px 0;
|
||||
transition: 0.2s;
|
||||
-webkit-transition: 0.2s;
|
||||
}
|
||||
#sidebar_right{
|
||||
position: absolute;
|
||||
@ -80,6 +85,18 @@ input[type="button"]{
|
||||
right:0;
|
||||
top:0;
|
||||
z-index: 100;
|
||||
transition: 0.2s;
|
||||
background-color:#727272;
|
||||
-webkit-transition: 0.2s;
|
||||
}
|
||||
#sidebar_left.active{
|
||||
left:0 !important;
|
||||
background-color: #727272;
|
||||
box-shadow: 5px 0px 10px 0px rgba(0,0,0,0.75);
|
||||
}
|
||||
#sidebar_right.active{
|
||||
right:0 !important;
|
||||
box-shadow: -5px 0px 10px 0px rgba(0,0,0,0.75);
|
||||
}
|
||||
#canvas_wrapper{
|
||||
position:relative;
|
||||
@ -176,7 +193,7 @@ input[type="button"]{
|
||||
#menu_left_container a{
|
||||
float:left;
|
||||
border: 1px solid #393939;
|
||||
background: #989898 url('img/all.png') no-repeat 0px 0px;
|
||||
background: #989898 url('../img/sprites.png') no-repeat 0px 0px;
|
||||
width:24px;
|
||||
height:24px;
|
||||
margin:0px 1px 1px 0px;
|
||||
@ -193,7 +210,7 @@ input[type="button"]{
|
||||
font-size:11px;
|
||||
}
|
||||
#action_attributes input{
|
||||
font-size:11px;
|
||||
font-size:12px;
|
||||
width:100%;
|
||||
}
|
||||
#popup{
|
||||
@ -254,6 +271,12 @@ input[type="button"]{
|
||||
margin-top:10px;
|
||||
padding:3px 0px 3px 3px;
|
||||
}
|
||||
#mobile_menu{
|
||||
display:none;
|
||||
position: absolute;
|
||||
width:100%;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
/* ==== classes ============================================================= */
|
||||
|
||||
@ -263,7 +286,7 @@ input[type="button"]{
|
||||
margin-top:5px;
|
||||
background-color:#818181;
|
||||
}
|
||||
.layer{
|
||||
#sidebar_right .layer{
|
||||
margin-bottom:2px;
|
||||
border:1px solid #393939;
|
||||
background-color:#989898;
|
||||
@ -302,7 +325,7 @@ input[type="button"]{
|
||||
padding:0px 3px 0px 3px;
|
||||
width:12px;
|
||||
height:12px;
|
||||
background: url('../img/all.png') no-repeat 0px -50px;
|
||||
background: url('../img/sprites.png') no-repeat 0px -50px;
|
||||
}
|
||||
.layer_visible{
|
||||
float:right;
|
||||
@ -310,10 +333,10 @@ input[type="button"]{
|
||||
padding:0px 3px 0px 3px;
|
||||
width:12px;
|
||||
height:12px;
|
||||
background: url('../img/all.png') no-repeat -100px -50px;
|
||||
background: url('../img/sprites.png') no-repeat -100px -50px;
|
||||
}
|
||||
.layer_unvisible{
|
||||
background: url('../img/all.png') no-repeat -50px -50px;
|
||||
background: url('../img/sprites.png') no-repeat -50px -50px;
|
||||
}
|
||||
.layer_add{
|
||||
border:1px solid #393939;
|
||||
@ -365,7 +388,6 @@ input[type="button"]{
|
||||
|
||||
.ddsmoothmenu{
|
||||
position:fixed;
|
||||
z-index:99999;
|
||||
top:0;
|
||||
left:0;
|
||||
width:100%;
|
||||
@ -373,18 +395,23 @@ input[type="button"]{
|
||||
background: #2D2D2D;
|
||||
width: 100%;
|
||||
padding-left:10px;
|
||||
z-index:100;
|
||||
}
|
||||
.ddsmoothmenu ul{
|
||||
z-index:100;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
list-style-type: none;
|
||||
max-width:380px;
|
||||
height:30px;
|
||||
}
|
||||
.ddsmoothmenu ul li{
|
||||
position: relative;
|
||||
display: inline;
|
||||
float: left;
|
||||
color: #2d2b2b;
|
||||
width:calc(100% / 7);
|
||||
height:100%;
|
||||
}
|
||||
.ddsmoothmenu ul li .rightarrowclass{
|
||||
display: none !important;
|
||||
@ -395,20 +422,21 @@ input[type="button"]{
|
||||
.ddsmoothmenu ul li a{
|
||||
display: block;
|
||||
color: #2D2D2D;
|
||||
padding: 7px 10px 0 10px;
|
||||
text-decoration: none;
|
||||
color: #cccccc;
|
||||
height:30px;
|
||||
text-align:center;
|
||||
padding-top: 6px;
|
||||
}
|
||||
.ddsmoothmenu ul li a.selected {
|
||||
background: #FFFFFF !important;
|
||||
background-color: #FFFFFF !important;
|
||||
color: #2d2b2b;
|
||||
}
|
||||
.ddsmoothmenu ul li ul li a.selected {
|
||||
background-color:#E4EBF8 !important;
|
||||
}
|
||||
.ddsmoothmenu ul li a:hover{
|
||||
background: #E4EBF8;
|
||||
background-color: #E4EBF8;
|
||||
color: #2D2D2D;
|
||||
}
|
||||
.ddsmoothmenu .hide_ul{
|
||||
@ -427,11 +455,20 @@ input[type="button"]{
|
||||
border:1px solid #5680C1;
|
||||
border-top:0px;
|
||||
margin-left: -1px;
|
||||
height:auto;
|
||||
/* disabling nonsenses with JS */
|
||||
width:140px !important;
|
||||
top:30px !important;
|
||||
}
|
||||
.ddsmoothmenu ul li ul li{
|
||||
display: list-item;
|
||||
background: #ffffff;
|
||||
float: none;
|
||||
height:auto;
|
||||
width:100%;
|
||||
}
|
||||
.ddsmoothmenu ul li ul li a{
|
||||
text-align:left;
|
||||
}
|
||||
.ddsmoothmenu ul li ul li ul{
|
||||
top: 0;
|
||||
@ -442,7 +479,10 @@ input[type="button"]{
|
||||
padding-right:5px;
|
||||
margin: 0;
|
||||
color: #2D2D2D;
|
||||
}
|
||||
}
|
||||
.ddsmoothmenu ul li ul li ul{
|
||||
top:0 !important;
|
||||
}
|
||||
* html .ddsmoothmenu{height: 1%;} /*Hack for IE7 and below*/
|
||||
.downarrowclass{
|
||||
position: absolute;
|
||||
@ -468,6 +508,108 @@ input[type="button"]{
|
||||
font-size:0;
|
||||
padding:0 8px 0 8px;
|
||||
}
|
||||
.left_mobile_menu, .right_mobile_menu{
|
||||
position:absolute;
|
||||
background: url('../img/sprites.png') no-repeat -50px -100px;
|
||||
width:50px;
|
||||
height:50px;
|
||||
display:block;
|
||||
top:0;
|
||||
z-index:200;
|
||||
}
|
||||
.left_mobile_menu{left:0;}
|
||||
.right_mobile_menu{right:0;}
|
||||
|
||||
/* ==== responsive ========================================================== */
|
||||
|
||||
@media screen and (max-width:700px){
|
||||
body{
|
||||
padding-top:50px;
|
||||
}
|
||||
#sidebar_right{
|
||||
right: -160px;
|
||||
}
|
||||
#canvas_wrapper{
|
||||
margin-right: 0;
|
||||
}
|
||||
.ddsmoothmenu{
|
||||
height:50px;
|
||||
}
|
||||
.ddsmoothmenu ul{
|
||||
width: calc(100% - 50px);
|
||||
height:50px;
|
||||
}
|
||||
.ddsmoothmenu ul li a{
|
||||
height:50px;
|
||||
padding-top: 12px;
|
||||
}
|
||||
.ddsmoothmenu ul li ul{
|
||||
top:50px !important;
|
||||
}
|
||||
.ddsmoothmenu ul li ul li{
|
||||
height:auto;
|
||||
}
|
||||
.ddsmoothmenu ul li ul li a{
|
||||
height:30px;
|
||||
}
|
||||
#mobile_menu{
|
||||
display:block;
|
||||
}
|
||||
.left_mobile_menu{
|
||||
display:none;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:550px){
|
||||
#sidebar_left{
|
||||
left: -110px;
|
||||
}
|
||||
#canvas_wrapper{
|
||||
margin-left: 0px;
|
||||
}
|
||||
.left_mobile_menu{
|
||||
display:block;
|
||||
}
|
||||
.ddsmoothmenu ul{
|
||||
width: calc(100% - 100px);
|
||||
margin-left:50px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:400px){
|
||||
.ddsmoothmenu{
|
||||
background: #666666;
|
||||
}
|
||||
.ddsmoothmenu .icon{
|
||||
background-image: url('../img/sprites.png');
|
||||
background-position: -91px -88px;
|
||||
color: transparent !important;
|
||||
}
|
||||
.ddsmoothmenu .icon:hover{
|
||||
background-color:#727272 !important;
|
||||
}
|
||||
.ddsmoothmenu .file{ background-position: -91px -88px; }
|
||||
.ddsmoothmenu .edit{ background-position: -141px -88px; }
|
||||
.ddsmoothmenu .image{ background-position: -191px -88px; }
|
||||
.ddsmoothmenu .layer{ background-position: -241px -88px; }
|
||||
.ddsmoothmenu .effects{ background-position: -291px -88px; }
|
||||
.ddsmoothmenu .tools{ background-position: -341px -88px; }
|
||||
.ddsmoothmenu .help{ background-position: -391px -88px; }
|
||||
#popup{
|
||||
top: 100px !important;
|
||||
left: 0 !important;
|
||||
right: 0 !important;
|
||||
margin-left: 0;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width:350px){
|
||||
.ddsmoothmenu .file{ background-position: -95px -88px; }
|
||||
.ddsmoothmenu .edit{ background-position: -145px -88px; }
|
||||
.ddsmoothmenu .image{ background-position: -195px -88px; }
|
||||
.ddsmoothmenu .layer{ background-position: -245px -88px; }
|
||||
.ddsmoothmenu .effects{ background-position: -295px -88px; }
|
||||
.ddsmoothmenu .tools{ background-position: -345px -88px; }
|
||||
.ddsmoothmenu .help{ background-position: -398px -88px; }
|
||||
}
|
||||
|
||||
/* ==== print =============================================================== */
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user