selectable tools
Isaiah Odhner
parent
6f98c83341
commit
32edbf0a7b
|
|
@ -0,0 +1,116 @@
|
|||
|
||||
var app = {};
|
||||
|
||||
app.open = function(){
|
||||
var color1 = "black";
|
||||
var color2 = "white";
|
||||
var color3 = "transparent";
|
||||
|
||||
var tools = [{
|
||||
name: "Free-Form Select"
|
||||
},{
|
||||
name: "Select"
|
||||
},{
|
||||
name: "Eraser/Color Eraser"
|
||||
},{
|
||||
name: "Fill With Color"
|
||||
},{
|
||||
name: "Pick Color"
|
||||
},{
|
||||
name: "Magnifier"
|
||||
},{
|
||||
name: "Pencil"
|
||||
},{
|
||||
name: "Brush"
|
||||
},{
|
||||
name: "Airbrush"
|
||||
},{
|
||||
name: "Text"
|
||||
},{
|
||||
name: "Line"
|
||||
},{
|
||||
name: "Curve"
|
||||
},{
|
||||
name: "Rectangle"
|
||||
},{
|
||||
name: "Polygon"
|
||||
},{
|
||||
name: "Ellipse"
|
||||
},{
|
||||
name: "Rounded Rectangle"
|
||||
}];
|
||||
|
||||
var selected_tool = tools[6];
|
||||
|
||||
|
||||
var $main = $(".jspaint-main");
|
||||
|
||||
var $H = $(".jspaint-horizontal");
|
||||
var $V = $(".jspaint-vertical");
|
||||
var $top = $("<c-area>").prependTo($V);
|
||||
var $bottom = $("<c-area>").appendTo($V);
|
||||
var $left = $("<c-area>").prependTo($H);
|
||||
var $right = $("<c-area>").appendTo($H);
|
||||
|
||||
var $toolbox = $ToolBox();
|
||||
var $colorbox = $ColorBox();
|
||||
|
||||
function $ToolBox(){
|
||||
var $tb = $Component("Tools", "place-vertically");
|
||||
$tb.addClass("jspaint-tool-box");
|
||||
var $tools = $("<div class='jspaint-tools'>");
|
||||
var $tool_options = $("<div class='jspaint-tool-options'>");
|
||||
|
||||
$tb.append($tools, $tool_options);
|
||||
|
||||
var $buttons;
|
||||
$.each(tools, function(i, tool){
|
||||
var $b = $("<button class='jspaint-tool'>");
|
||||
$b.appendTo($tools);
|
||||
|
||||
$b.attr("title", tool.name);
|
||||
if(tool === selected_tool){
|
||||
$b.addClass("selected");
|
||||
}
|
||||
|
||||
var $icon = $("<span/>");
|
||||
$icon.appendTo($b);
|
||||
var bx = (i%2)*24;
|
||||
var by = ((i/2)|0)*25 - 1;
|
||||
$icon.css({
|
||||
display: "block",
|
||||
width: "100%",
|
||||
height: "100%",
|
||||
background: "url(mspaint-toolbar.png)",
|
||||
backgroundPosition: bx+"px "+by+"px"
|
||||
});
|
||||
|
||||
$b.on("click", function(){
|
||||
$buttons.removeClass("selected");
|
||||
$b.addClass("selected");
|
||||
});
|
||||
});
|
||||
$buttons = $(".jspaint-tool");
|
||||
|
||||
return $tb;
|
||||
}
|
||||
function $ColorBox(){
|
||||
var $cb = $Component("Colors", "place-horizontally");
|
||||
$cb.addClass("jspaint-color-box");
|
||||
$cb.html('<img src="mspaint-palette.png">');
|
||||
return $cb;
|
||||
}
|
||||
function $Component(name, orientation){
|
||||
//a draggable widget that can be undocked into a window
|
||||
var $c = $("<div>").addClass("jspaint-component");
|
||||
$c.appendTo({
|
||||
"place-vertically": $left,
|
||||
"place-horizontally": $bottom,
|
||||
}[orientation]);
|
||||
return $c;
|
||||
}
|
||||
};
|
||||
|
||||
$(function(){
|
||||
app.open();
|
||||
});
|
||||
36
classic.css
36
classic.css
|
|
@ -1,34 +1,24 @@
|
|||
|
||||
|
||||
body {
|
||||
.jspaint {
|
||||
background: #BBB;
|
||||
}
|
||||
#cont {
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border: 1px solid #afa; /*To show the boundaries of the element*/
|
||||
}
|
||||
#cont:before {
|
||||
position: absolute;
|
||||
content: '';
|
||||
background: rgba(0,0,0,0.5);
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
tool {
|
||||
.jspaint-tool {
|
||||
display: block;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border: 0;
|
||||
border-right: 1px solid black;
|
||||
border-bottom: 1px solid black;
|
||||
position: relative;
|
||||
background: transparent;
|
||||
outline: 0;
|
||||
}
|
||||
tool:before {
|
||||
.jspaint-tool:before {
|
||||
content: " ";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
|
@ -41,31 +31,23 @@ tool:before {
|
|||
border-right: 1px solid #7b7b7b;
|
||||
border-bottom: 1px solid #7b7b7b;
|
||||
}
|
||||
tool.selected {
|
||||
.jspaint-tool.selected {
|
||||
border-top: 1px solid black;
|
||||
border-left: 1px solid black;
|
||||
border-right: 1px solid white;
|
||||
border-bottom: 1px solid white;
|
||||
}
|
||||
tool.selected:before {
|
||||
.jspaint-tool.selected:before {
|
||||
border-top: 1px solid #7b7b7b;
|
||||
border-left: 1px solid #7b7b7b;
|
||||
border-right: 1px solid #bdbdbd;
|
||||
border-bottom: 1px solid #bdbdbd;
|
||||
}
|
||||
|
||||
tool.selected,
|
||||
.jspaint-tool.selected,
|
||||
.jspaint-current-colors {
|
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACAQMAAABIeJ9nAAAABlBMVEW9vb3///8EwsWUAAAADElEQVQI12NoYHAAAAHEAMFJRSpJAAAAAElFTkSuQmCC) repeat;
|
||||
}
|
||||
/*
|
||||
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAYAAABytg0kAAAAFklEQVQIW2PcvXv3f1dXV0ZGBiAAcQBCfwczEgEQgwAAAABJRU5ErkJggg==
|
||||
*/
|
||||
|
||||
.jspaint-toolbar {
|
||||
padding-left: 4px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.jspaint-main {
|
||||
background: #7b7b7b;
|
||||
|
|
|
|||
42
index.html
42
index.html
|
|
@ -15,42 +15,12 @@
|
|||
</head>
|
||||
<body>
|
||||
<div class='jspaint'>
|
||||
<div class='jspaint-upper'>
|
||||
<div class="jspaint-toolbar">
|
||||
<div class="jspaint-toolbar-buttons overlay-container">
|
||||
<img class="overlay" src="mspaint-toolbar.png">
|
||||
<tool id="free-form-select"></tool>
|
||||
<tool id="select"></tool>
|
||||
<tool id="eraser"></tool>
|
||||
<tool id="fill"></tool>
|
||||
<tool id="pick-color"></tool>
|
||||
<tool id="magnifier"></tool>
|
||||
<tool id="pencil" class="selected"></tool>
|
||||
<tool id="brush"></tool>
|
||||
<tool id="airbrush"></tool>
|
||||
<tool id="text"></tool>
|
||||
<tool id="line"></tool>
|
||||
<tool id="curve"></tool>
|
||||
<tool id="rectangle"></tool>
|
||||
<tool id="polygon"></tool>
|
||||
<tool id="ellipse"></tool>
|
||||
<tool id="rounded-rectangle"></tool>
|
||||
</div>
|
||||
<div class="jspaint-tool-options">
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="jspaint-main">
|
||||
<div class="jspaint-canvas">
|
||||
<canvas/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class='jspaint-lower'>
|
||||
<div class="jspaint-colors">
|
||||
<img src="mspaint-palette.png">
|
||||
<div class="jspaint-current-colors"></div>
|
||||
<div class="jspaint-palette">
|
||||
<div class='jspaint-vertical'>
|
||||
<div class="jspaint-horizontal">
|
||||
<div class="jspaint-main">
|
||||
<div class="jspaint-canvas">
|
||||
<canvas></canvas>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
20
layout.css
20
layout.css
|
|
@ -14,16 +14,24 @@ html, body, .jspaint {
|
|||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
.jspaint-upper {
|
||||
flex: 1;
|
||||
.jspaint-horizontal {
|
||||
flex-flow: row;
|
||||
flex: 1;
|
||||
}
|
||||
.jspaint-lower {
|
||||
.jspaint-vertical {
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.jspaint-vertical > div + c-area { /*hax*/
|
||||
flex-basis: 47px;
|
||||
/*flex-basis: 14px;
|
||||
flex-grow: 33px;*/
|
||||
align-items: center;
|
||||
}
|
||||
.jspaint-tool-box {
|
||||
padding-left: 4px;
|
||||
padding-right: 2px;
|
||||
}
|
||||
|
||||
.overlay-container {
|
||||
position: relative;
|
||||
}
|
||||
|
|
@ -32,7 +40,7 @@ html, body, .jspaint {
|
|||
z-index: 1;
|
||||
pointer-events: none;
|
||||
}
|
||||
.jspaint-toolbar-buttons {
|
||||
.jspaint-tools {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
height: 200px;
|
||||
|
|
|
|||
Loading…
Reference in New Issue