separated Web from Mobile

This commit is contained in:
Mahdi Dibaiee 2014-02-07 15:50:19 +03:30
parent 8af0ac91b3
commit ab58829df2
162 changed files with 2608 additions and 31 deletions

View File

Before

Width:  |  Height:  |  Size: 93 B

After

Width:  |  Height:  |  Size: 93 B

View File

Before

Width:  |  Height:  |  Size: 94 B

After

Width:  |  Height:  |  Size: 94 B

View File

Before

Width:  |  Height:  |  Size: 1.7 KiB

After

Width:  |  Height:  |  Size: 1.7 KiB

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 182 B

After

Width:  |  Height:  |  Size: 182 B

View File

Before

Width:  |  Height:  |  Size: 1.3 KiB

After

Width:  |  Height:  |  Size: 1.3 KiB

View File

Before

Width:  |  Height:  |  Size: 1.8 KiB

After

Width:  |  Height:  |  Size: 1.8 KiB

View File

Before

Width:  |  Height:  |  Size: 1.4 KiB

After

Width:  |  Height:  |  Size: 1.4 KiB

View File

@ -65,26 +65,62 @@ button {
border: none; border: none;
} }
.picker { .close {
width: 30rem; display: block;
height: 30rem;
position: absolute;
left: 50%;
top: 50%;
margin-top: -15rem;
margin-left: -15rem;
#closePicker {
width: 2rem; width: 2rem;
height: 2rem; height: 2rem;
padding: 0 0 0.2rem 0.2rem;
font-size: 10pt;
border: 1px solid rgb(227, 227, 227); border: 1px solid rgb(227, 227, 227);
border-radius: 50%; border-radius: 50%;
position: absolute; position: absolute;
top: 1rem; text-align: center;
left: 27rem; top: -2%;
left: 97%;
}
.picker, .about {
font-family: 'MozTT-Light';
width: 30rem;
height: 24.6rem;
position: absolute;
left: 50%;
top: 50%;
margin-top: -12.3rem;
margin-left: -15rem;
.color-picker {
margin: 0;
} }
} }
.about {
background: #262626;
padding: 1rem 2rem;;
height: 23rem;
margin-top: -11.5rem;
margin-left: -17rem;
border-radius: 0.2rem;
color: white;
box-shadow: 0 0 0.3rem black;
a, a:link, a:visited, a:active {
color: white;
}
.close {
background: #262626;
color: white;
border: 1px solid gray;
}
p {
font-size: 11pt;
}
span {
font-size: 8pt;
}
}
header { header {
width: 100%; width: 100%;
@ -217,9 +253,13 @@ header {
.bottom { .bottom {
position: absolute; position: absolute;
bottom: 5rem; bottom: 5rem;
button { width: 100%;
button[class^='icon'] {
margin-left: 3.5rem; margin-left: 3.5rem;
} }
button {
margin-left: 5rem;
}
} }
} }

View File

Before

Width:  |  Height:  |  Size: 636 B

After

Width:  |  Height:  |  Size: 636 B

View File

Before

Width:  |  Height:  |  Size: 960 B

After

Width:  |  Height:  |  Size: 960 B

View File

Before

Width:  |  Height:  |  Size: 938 B

After

Width:  |  Height:  |  Size: 938 B

View File

Before

Width:  |  Height:  |  Size: 583 B

After

Width:  |  Height:  |  Size: 583 B

View File

Before

Width:  |  Height:  |  Size: 946 B

After

Width:  |  Height:  |  Size: 946 B

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 583 B

After

Width:  |  Height:  |  Size: 583 B

View File

Before

Width:  |  Height:  |  Size: 946 B

After

Width:  |  Height:  |  Size: 946 B

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 578 B

After

Width:  |  Height:  |  Size: 578 B

View File

Before

Width:  |  Height:  |  Size: 893 B

After

Width:  |  Height:  |  Size: 893 B

View File

Before

Width:  |  Height:  |  Size: 1.1 KiB

After

Width:  |  Height:  |  Size: 1.1 KiB

View File

Before

Width:  |  Height:  |  Size: 575 B

After

Width:  |  Height:  |  Size: 575 B

View File

Before

Width:  |  Height:  |  Size: 889 B

After

Width:  |  Height:  |  Size: 889 B

View File

Before

Width:  |  Height:  |  Size: 1.2 KiB

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

Before

Width:  |  Height:  |  Size: 755 B

After

Width:  |  Height:  |  Size: 755 B

View File

Before

Width:  |  Height:  |  Size: 1.0 KiB

After

Width:  |  Height:  |  Size: 1.0 KiB

View File

Before

Width:  |  Height:  |  Size: 475 B

After

Width:  |  Height:  |  Size: 475 B

View File

Before

Width:  |  Height:  |  Size: 616 B

After

Width:  |  Height:  |  Size: 616 B

View File

Before

Width:  |  Height:  |  Size: 177 B

After

Width:  |  Height:  |  Size: 177 B

View File

Before

Width:  |  Height:  |  Size: 392 B

After

Width:  |  Height:  |  Size: 392 B

View File

Before

Width:  |  Height:  |  Size: 601 B

After

Width:  |  Height:  |  Size: 601 B

View File

Before

Width:  |  Height:  |  Size: 101 B

After

Width:  |  Height:  |  Size: 101 B

View File

Before

Width:  |  Height:  |  Size: 82 B

After

Width:  |  Height:  |  Size: 82 B

View File

Before

Width:  |  Height:  |  Size: 3.4 KiB

After

Width:  |  Height:  |  Size: 3.4 KiB

View File

Before

Width:  |  Height:  |  Size: 7.7 KiB

After

Width:  |  Height:  |  Size: 7.7 KiB

View File

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.7 KiB

View File

Before

Width:  |  Height:  |  Size: 83 B

After

Width:  |  Height:  |  Size: 83 B

View File

Before

Width:  |  Height:  |  Size: 154 B

After

Width:  |  Height:  |  Size: 154 B

View File

Before

Width:  |  Height:  |  Size: 86 B

After

Width:  |  Height:  |  Size: 86 B

View File

Before

Width:  |  Height:  |  Size: 82 B

After

Width:  |  Height:  |  Size: 82 B

View File

Before

Width:  |  Height:  |  Size: 154 B

After

Width:  |  Height:  |  Size: 154 B

View File

Before

Width:  |  Height:  |  Size: 87 B

After

Width:  |  Height:  |  Size: 87 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 8.9 KiB

BIN
Mobile/img/icons/icon16.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 738 B

BIN
Mobile/img/icons/icon2.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 7.2 KiB

102
Mobile/img/icons/icon2.svg Normal file
View File

@ -0,0 +1,102 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
xmlns:dc="http://purl.org/dc/elements/1.1/"
xmlns:cc="http://creativecommons.org/ns#"
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
width="60"
height="60"
id="svg3029"
version="1.1"
inkscape:version="0.48.4 r9939"
sodipodi:docname="icon2.svg"
inkscape:export-filename="/home/mahdi/Documents/Workshop/Mobile Editor/img/icons/icon128.png"
inkscape:export-xdpi="192"
inkscape:export-ydpi="192">
<defs
id="defs3031" />
<sodipodi:namedview
id="base"
pagecolor="#ffffff"
bordercolor="#666666"
borderopacity="1.0"
inkscape:pageopacity="0.0"
inkscape:pageshadow="2"
inkscape:zoom="1"
inkscape:cx="-103.49318"
inkscape:cy="83.371075"
inkscape:current-layer="layer1"
showgrid="true"
inkscape:grid-bbox="true"
inkscape:document-units="px"
inkscape:window-width="1600"
inkscape:window-height="876"
inkscape:window-x="0"
inkscape:window-y="24"
inkscape:window-maximized="1" />
<metadata
id="metadata3034">
<rdf:RDF>
<cc:Work
rdf:about="">
<dc:format>image/svg+xml</dc:format>
<dc:type
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
<dc:title />
</cc:Work>
</rdf:RDF>
</metadata>
<g
id="layer1"
inkscape:label="Layer 1"
inkscape:groupmode="layer"
transform="translate(0,12)">
<path
sodipodi:type="arc"
style="fill:#636363;fill-opacity:1;stroke:none"
id="path3037"
sodipodi:cx="31.428572"
sodipodi:cy="29.285715"
sodipodi:rx="26.428572"
sodipodi:ry="26.428572"
d="m 57.857143,29.285715 c 0,14.596097 -11.832474,26.428572 -26.428571,26.428572 C 16.832475,55.714287 5,43.881812 5,29.285715 5,14.689618 16.832475,2.8571434 31.428572,2.8571434 c 14.596097,0 26.428571,11.8324746 26.428571,26.4285716 z"
transform="matrix(1.0972973,0,0,1.0972973,-4.4864869,-14.135136)" />
<path
style="fill:#dedede;fill-opacity:1;stroke:#383838;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
d="m 40.415998,-0.2045792 c 0,0 -22.715805,23.0693572 -23.422911,25.0139012 -0.707107,1.944544 -2.740039,7.601398 -2.032932,8.485281 0.707106,0.883883 7.689786,-1.502602 9.015611,-2.828427 C 25.301591,29.140351 47.60072,6.06032 47.840618,4.833556 48.06427,3.68987 41.877086,-1.6684275 40.415998,-0.2045792 z"
id="path3054"
inkscape:connector-curvature="0"
sodipodi:nodetypes="cssssc" />
<path
style="fill:#9e9e9e;fill-opacity:1;stroke:none"
d="m 44.875383,3.203193 c 0,0 -23.929105,24.058149 -24.015804,24.932991 -0.0867,0.874841 1.387194,2.71201 1.820692,2.187104 C 23.11377,29.798383 46.435977,5.9152018 46.522677,5.0403605 46.609378,4.1655182 45.222182,3.2906768 44.875383,3.203193 z"
id="path3841"
inkscape:connector-curvature="0" />
<path
style="fill:#c0c0c0;fill-opacity:1;stroke:none"
d="m 42.401427,1.6217284 c 0,0 -23.399153,24.3933116 -23.394823,24.6432736 0.0043,0.249963 1.094444,1.292086 1.650364,0.907398 0.55592,-0.384687 23.207727,-24.0757977 23.264805,-24.3893335 0.05708,-0.3135357 -1.2693,-1.1031781 -1.520346,-1.1613381 z"
id="path3861"
inkscape:connector-curvature="0"
sodipodi:nodetypes="ccssc" />
<path
style="fill:#494949;fill-opacity:1;stroke:none"
d="m 15.695313,42.429687 c 0,0 -0.515625,1.960938 -0.359375,2.539063 0.0078,0 0.141085,0.342965 2.430147,-0.344535 -0.01563,0.0078 -0.647057,-2.041553 -2.070772,-2.194528 z"
id="path3865"
inkscape:connector-curvature="0"
transform="translate(0,-12)"
sodipodi:nodetypes="cccc" />
<image
y="-11.715099"
x="0.21543235"
id="image3962"
xlink:href="data:image/png;base64,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 "
height="60"
width="60" />
</g>
</svg>

After

Width:  |  Height:  |  Size: 6.6 KiB

BIN
Mobile/img/icons/icon32.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.6 KiB

BIN
Mobile/img/icons/icon48.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 2.7 KiB

BIN
Mobile/img/icons/icon60.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.7 KiB

BIN
Mobile/img/icons/icon64.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.0 KiB

BIN
Mobile/img/icons/icon90.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 6.0 KiB

191
Mobile/index.html Normal file
View File

@ -0,0 +1,191 @@
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset='UTF-8'>
<link rel='stylesheet/less' href='css/main.less'>
<link rel='stylesheet' href='css/switches.css'>
<link rel='stylesheet' href='css/value_selector.css'>
<link rel='stylesheet' href='css/seekbars.css'>
<link rel='stylesheet' href='css/color-picker.css'>
<script src='js/less-1.5.0.min.js'></script>
<script src='js/libs/mobilebrowsers.js'></script>
</head>
<body>
<header>
<button class='menu'></button>
<span class='separator long left menu'></span>
<p id='title'>Sketchy</p>
<button class='save'></button>
<span class='separator small right'></span>
</header>
<div id='container'>
<canvas></canvas>
<canvas></canvas>
</div>
<div id='menu'>
<p class='icon-settings'>Settings</p>
<div class='options'>
<div class='general'>
<button id='settype'>Brush Type<span>Sketch</span></button>
<button id='setcolor'>Color<span>#000000</span></button>
<!--<button id='setlineJoin'>Line Join<span>Round</span></button>-->
<button id='setlineCap'>Line Cap<span>Round</span></button>
<p id='lineWidth'>Line Width <span>2</span></p>
<div role="slider" class='lineWidth'>
<div>
<progress value="2" min="1" max="100"></progress>
<button style='left: 2%'>handler</button>
</div>
</div>
</div>
<br />
<hr>
<div class='sketch'>
<p class='icon-settings'>Sketch</p>
<p id='connectTelorance'>Connet Telorance<span>40</span></p>
<div role="slider" class='connectTelorance'>
<div>
<progress value="40" min="1" max="100"></progress>
<button style='left: 40%'>handler</button>
</div>
</div>
</div>
<div class='fur hidden'>
<p class='icon-settings'>Fur</p>
<p id='connectTelorance'>Connet Telorance<span>40</span></p>
<div role="slider" class='connectTelorance'>
<div>
<progress value="40" min="10" max="100"></progress>
<button style='left: 40%'>handler</button>
</div>
</div>
<p id='furLength'>Fur Length<span>20</span></p>
<div role="slider" class='furLength'>
<div>
<progress value="20" min="1" max="100"></progress>
<button style='left: 20%'>handler</button>
</div>
</div>
</div>
</div>
<div class='bottom'>
<button id='clear' class='icon-clear'>Clear</button>
<button id='undo' class='icon-undo'>Undo</button>
<button id='redo' class='icon-redo'>Redo</button>
<hr>
<button id='about'>About</button>
</div>
</div>
<form role='dialog' data-type='value-selector' id='type' class='hidden single'>
<section class='scrollable'>
<h1>Brush Type</h1>
<ol role='listbox'>
<li aria-selected='true'><label><span>Sketch</span></label></li>
<li><label><span>Fur</span></label></li>
<li><label><span>Pen</span></label></li>
<li><label><span>Line</span></label></li>
<!--<li><label><span>Eraser</span></label></li>-->
</ol>
</section>
<menu>
<button class='affirmative full'>Cancel</button>
</menu>
</form>
<form role='dialog' data-type='value-selector' id='lineJoin' class='hidden single'>
<section class='scrollable'>
<h1>Line Join</h1>
<ol role='listbox'>
<li aria-selected='true'><label><span>Round</span></label></li>
<li><label><span>Bevel</span></label></li>
<li><label><span>Miter</span></label></li>
</ol>
</section>
<menu>
<button class='affirmative full'>Cancel</button>
</menu>
</form>
<form role='dialog' data-type='value-selector' id='lineCap' class='hidden single'>
<section class='scrollable'>
<h1>Line Cap</h1>
<ol role='listbox'>
<li aria-selected='true'><label><span>Round</span></label></li>
<li><label><span>Square</span></label></li>
<li><label><span>Butt</span></label></li>
</ol>
</section>
<menu>
<button class='affirmative full'>Cancel</button>
</menu>
</form>
<form role='dialog' data-type='value-selector' id='save' class='hidden confirm'>
<section class='scrollable'>
<h1>Save</h1>
<h1>Background</h1>
<ol role='listbox'>
<li aria-selected='true'><label><span>White</span></label></li>
<li><label><span>Current Color</span></label></li>
<li><label><span>Transparent</span></label></li>
</ol>
<h1>File Name</h1>
<ol role='listbox'>
<li aria-selected='true' data-input><label><span contenteditable>My Sketch</span></label></li>
</ol>
</section>
<menu>
<button class='affirmative' type='button'>Cancel</button>
<button class='affirmative' type='button'>Save</button>
</menu>
</form>
<!-- COLOR PICKER -->
<div class='picker overlay hidden'>
<div class='color-picker'>
<input value='Hex' class='format' type='hidden' selected>
<input class='color' val='#000000'>
<div class="spectrum">
<div>
<div class="pin"></div>
</div>
</div>
<input class="luminosity" type="range" min="0" max="100" />
</div>
<button class='close'>x</button>
</div>
<div class='about overlay hidden'>
<p>Sketchy</p>
<span>Sketchy is a free sketch / paint application for Firefox OS.</span>
<p>Developer</p>
<span>Sketchy was found by Mahdi Dibaiee. More info: <a href='http://about.me/mdibaiee'>About.me</a>
<br><br>
Contact: <br>
<a href='https://twitter.com/mdibaiee'>Twitter</a><br />
<a href='mailto:mdibaiee@aol.com'>Email</a>
<br><br>
<a href='http://mdibaiee.github.io/Sketchy/changelog'>Changelog</a>
</span>
<button class='close'>x</button>
</div>
<script src='js/libs/zepto.min.js'></script>
<script src='js/libs/touch.js'></script>
<script src='js/libs/color-picker-touch.js'></script>
<script src='js/functions.js'></script>
<script src='js/main.js'></script>
<script src='js/mobile.js'></script>
</body>
</html>

38
Mobile/js/main.js Normal file
View File

@ -0,0 +1,38 @@
"use strict";
$(document).ready(function() {
window.c = $('canvas')[0].getContext('2d');
window.o = $('canvas')[1].getContext('2d');
window.settings = {
lineWidth : 2,
color : 'black',
type: 'sketch',
lineCap: 'round',
lineJoin: 'round',
furLength: 5,
connectTelorance: 40,
composite: 'source-over'
};
window.points = [];
window.$c = $('canvas');
window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}];
window.points.history.last = 0;
sizeAndPos();
//$(window).resize(sizeAndPos);
$('.color-picker').change(function() {
var c = $(this).find('.color').val();
settings.color = c;
$('#setcolor span').html(c);
})
$('.color').val('#000000');
/*yepnope({
test: window.mobile,
yep : ['js/libs/touch.js', 'js/mobile.js', 'js/libs/color-picker-touch.js'],
nope: ['js/desktop.js', 'js/libs/color-picker.js']
})*/
})

223
Mobile/js/mobile.js Normal file
View File

@ -0,0 +1,223 @@
"use strict";
$(document).ready(function() {
// Open External Links in browser
$('*').click(function(e) {
e.preventDefault();
})
$('a[href^="http"]').on('tap', function(e) {
e.preventDefault();
var href = $(this).attr('href');
var view = new MozActivity({
name: 'view',
data: {
type: 'url',
url: href
}
})
})
function save() {
switch(save.background) {
case 'white': {
var cache = {
fillStyle: c.color,
composite: c.globalCompositeOperation
}
c.fillStyle = 'white';
c.globalCompositeOperation = 'destination-over';
c.fillRect(0, 0, width(), height());
c.fillStyle = cache.fillStyle;
c.globalCompositeOperation = cache.composite;
break;
}
case 'current color': {
var cache = {
fillStyle: c.color,
composite: c.globalCompositeOperation
}
c.fillStyle = settings.strokeStyle;
c.globalCompositeOperation = 'destination-over';
c.fillRect(0, 0, width(), height());
c.fillStyle = cache.fillStyle;
c.globalCompositeOperation = cache.composite;
break;
}
}
var data = $c[0].toDataURL();
var file = dataToBlob($c[0].toDataURL());
var pics = navigator.getDeviceStorage('pictures');
var r = pics.addNamed(file, save['file name'] + '.png');
r.onsuccess = function() {
alert('Your sketch was successfuly saved to ' + this.result);
}
r.onerror = function() {
alert('Something bad happened when we tried to save your file\n Possible problems: \n Duplicate name \n Permission problems')
console.warn(this.error);
}
c.putImageData(window.points.history[window.points.history.last].data, 0, 0);
}
$('.menu').tap(function() {
$('#menu').toggleClass('pulled');
})
$('.save').tap(function() {
$('#save').removeClass('hidden');
})
$c.last().on('touchstart', function(e) {
var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
startPoint(xy.x, xy.y);
window.active = true;
}).on('touchmove', function(e) {
if (!window.active || settings.type == 'line') return;
var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
drawPoint(xy.x, xy.y);
}).on('touchend', function(e) {
window.active = false;
if( settings.type == 'eraser' ) return;
if(window.points.history.last < window.points.history.length-1) {
window.points.history.splice(window.points.history.last+1);
}
window.points.history.push({
data: c.getImageData(0, 0, width(), height()),
points: window.points.slice(0)
})
window.points.history.last = window.points.history.length-1;
}).on('longTap', function(e) {
if( points[points.length-1].type == 'line' ) {
window.active = false;
points[points.length-1].type = '';
points[points.length-1].start = undefined;
}
})
// Value Selector
var $single = $('form[data-type="value-selector"].single');
$single.find('li').tap(function(e) {
e.preventDefault();
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
$(this).attr('aria-selected', 'true');
var key = $(this).parents('form').attr('id'),
value = $(this).find('label span').html().toLowerCase();
window.settings[key] = value;
$('button[id="set' + key + '"] span').html(value[0].toUpperCase() + value.substr(1));
$('#menu div.options > div').addClass('hidden');
$('#menu div.options > .general, #menu div.options > .'+value).removeClass('hidden');
$(this).parents('form').addClass('hidden');
})
$single.find('button').tap(function(e) {
e.preventDefault();
$(this).parents('form').addClass('hidden');
})
// Confirm
var $confirm = $('form[data-type="value-selector"].confirm');
$confirm.find('li').tap(function(e) {
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
$(this).attr('aria-selected', 'true');
})
$confirm.find('button').last().tap(function(e) {
e.preventDefault();
var v = $(this).parents('form').attr('id');
$(this).parents('form').find('h1').each(function(i) {
if( i > 0 ) {
var key = $(this).html().toLowerCase();
var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html();
if( key !== 'file name' ) value = value.toLowerCase();
window[v][key] = value;
}
})
$(this).parents('form').addClass('hidden');
window[v]();
})
$confirm.find('button').first().tap(function(e) {
e.preventDefault();
$(this).parents('form').addClass('hidden');
})
// Value Selector Callers
var $btn = $('button[id^="set"]');
$btn.each(function() {
var target = /set(.*)/.exec($(this).attr('id'))[1];
if( target == 'color' ) {
return $(this).tap(function() {
$('.picker').removeClass('hidden');
})
}
$(this).tap(function(e) {
e.preventDefault();
$('form[id="' + target + '"]').removeClass('hidden');
})
})
// Seekbar
var sliderLeft;
$('div[role="slider"] button').on('touchstart', function() {
$(this).attr('data-moving','true');
if( !sliderLeft ) sliderLeft = $('div[role="slider"] button').offset().left;
}).on('touchmove', function(e) {
if( $(this).attr('data-moving') ) {
var x = parseInt(e.changedTouches[0].pageX - sliderLeft - 15);
var $c = $('.'+$(this).parents('div[role="slider"]').attr('class'));
var progress = $c.find('progress');
var max = +progress.attr('max');
var min = +progress.attr('min');
if( x <= max && x >= min ) {
$c.find('button').css('left', x+'%');
progress.attr('value', x);
var key = $c.attr('class');
settings[key] = x;
$('#'+ key +' span').html(x);
}
}
}).on('touchend', function() {
$(this).removeAttr('data-moving');
})
// Color Picker
$('.close').tap(function() {
$(this).parent().addClass('hidden');
})
// Bottom
$('#clear').tap(function() {
c.clearRect(0, 0, width(), height());
var h = window.points.history;
window.points = [];
window.points.history = h;
if(window.points.history.last < window.points.history.length-1) {
window.points.history.splice(window.points.history.last+1);
}
window.points.history.push({
data: c.getImageData(0, 0, width(), height()),
points: []
})
window.points.history.last = window.points.history.length-1;
})
$('#undo').tap(undo);
$('#redo').tap(redo);
$('#about').tap(function() {
$('.about').removeClass('hidden');
})
});

20
Web/LICENSE Normal file
View File

@ -0,0 +1,20 @@
The MIT License (MIT)
Copyright (c) 2013 Mahdi Dibaiee
Permission is hereby granted, free of charge, to any person obtaining a copy of
this software and associated documentation files (the "Software"), to deal in
the Software without restriction, including without limitation the rights to
use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
the Software, and to permit persons to whom the Software is furnished to do so,
subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

4
Web/README.md Normal file
View File

@ -0,0 +1,4 @@
Brush
=====
An image manipulation tool written in Javascript

90
Web/css/color-picker.css Normal file
View File

@ -0,0 +1,90 @@
/* Purty Picker Copyright 2013 Jayden Seric (MIT license): https://github.com/jaydenseric/Purty-Picker */
/* Core: No touchy! */
.color-picker .spectrum {
position: relative;
/* To position pin, luminosity filter */
background: linear-gradient(gray, transparent), linear-gradient(90deg, red, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, yellow, #d4ff00, #aaff00, #80ff00, #55ff00, #2bff00, lime, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, cyan, #00d4ff, #00aaff, #007fff, #0055ff, #002bff, blue, #2a00ff, #5500ff, #7f00ff, #aa00ff, #d400ff, magenta, #ff00d4, #ff00aa, #ff0080, #ff0055, #ff002b, red);
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Prevent pin interaction causing content selection */
cursor: crosshair;
}
.color-picker .spectrum.active {
cursor: none;
}
.color-picker .spectrum.active .pin {
cursor: none;
}
.color-picker .spectrum > div {
/* Luminosity filter */
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.color-picker .spectrum .pin {
position: absolute;
cursor: move;
}
/* Customization: Default skin */
.color-picker {
margin: 20px;
padding: 11px;
border: 1px solid #e3e3e3;
border-radius: 4px;
background-color: #f5f5f5;
}
.color-picker .color,
.color-picker .luminosity {
-moz-box-sizing: border-box;
box-sizing: border-box;
display: block;
width: 100%;
}
.color-picker .format {
display: block;
margin: 0 auto 10px auto;
}
.color-picker .color {
-webkit-appearance: none;
border: 0;
border-radius: 2px;
padding: 10px;
text-align: center;
font-size: 11px;
letter-spacing: 1px;
font-family: Consolas, Monaco, 'Andale Mono', monospace;
color: rgba(0, 0, 0, 0.6);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
transition: color 0.2s;
}
.color-picker .color.dark {
color: rgba(255, 255, 255, 0.7);
}
.color-picker .spectrum {
height: 150px;
/* Arbitary but required */
overflow: hidden;
/* Prevent pin overflowing container */
border-radius: 2px;
margin: 10px 0;
}
.color-picker .spectrum > div {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.2);
}
.color-picker .spectrum .pin {
margin-left: -4px;
margin-top: -4px;
width: 4px;
height: 4px;
border: 2px solid white;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
border-radius: 100%;
}
.color-picker .luminosity {
margin: 0;
}

16
Web/css/fonts.less Normal file
View File

@ -0,0 +1,16 @@
@font-face {
font-family: 'MozTT-Regular';
src: url('fonts/MozTT-Regular.ttf');
}
@font-face {
font-family: 'MozTT-Light';
src: url('fonts/MozTT-Light.ttf');
}
@font-face {
font-family: 'MozTT-Medium';
src: url('fonts/MozTT-Medium.ttf');
}
@font-face {
font-family: 'MozTT-Bold';
src: url('fonts/MozTT-Bold.ttf');
}

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 93 B

Binary file not shown.

After

Width:  |  Height:  |  Size: 94 B

BIN
Web/css/imgs/clear.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.0 KiB

BIN
Web/css/imgs/download.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
Web/css/imgs/menu.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 182 B

BIN
Web/css/imgs/redo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
Web/css/imgs/settings.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.8 KiB

BIN
Web/css/imgs/undo.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.4 KiB

266
Web/css/main.less Normal file
View File

@ -0,0 +1,266 @@
@import 'fonts';
html, body {
margin: 0;
font-size: 10px;
overflow: hidden;
}
*::-moz-focus-inner {
border: none;
}
*:focus {
outline: none;
}
.hidden {
display: none;
visibility: none;
}
div#container {
position: absolute;
}
canvas {
position: absolute;
top: 0;
left: 0;
}
.separator {
display: block;
height: 4.8rem;
width: 0.1rem;
&.long {
background: url('imgs/div_line_lg_black.png');
}
&.small {
background: url('imgs/div_line_sm_black.png');
}
&.left {
float: left;
}
&.right {
float: right;
}
&.menu {
position: relative;
left: -3rem;
}
}
.overlay {
z-index: 9999;
position: absolute;
left: 0;
top: 5.3rem;;
}
button {
-moz-appearance: none;
z-index: 1;
position: relative;
border: none;
}
.close {
display: block;
width: 2rem;
height: 2rem;
padding: 0 0 0.2rem 0.2rem;
font-size: 10pt;
border: 1px solid rgb(227, 227, 227);
border-radius: 50%;
position: absolute;
text-align: center;
top: -2%;
left: 97%;
}
.picker, .about {
font-family: 'MozTT-Light';
width: 30rem;
height: 24.6rem;
position: absolute;
left: 50%;
top: 50%;
margin-top: -12.3rem;
margin-left: -15rem;
.color-picker {
margin: 0;
}
}
.about {
background: #262626;
padding: 1rem 2rem;;
height: 23rem;
margin-top: -11.5rem;
margin-left: -17rem;
border-radius: 0.2rem;
color: white;
box-shadow: 0 0 0.3rem black;
a, a:link, a:visited, a:active {
color: white;
}
.close {
background: #262626;
color: white;
border: 1px solid gray;
}
p {
font-size: 11pt;
}
span {
font-size: 8pt;
}
}
header {
width: 100%;
height: 5.3rem;
background: url('imgs/header_bg_black.png');
button {
width: 5rem;
height: 5rem;
}
.menu {
background: url('imgs/menu.png') -12px center no-repeat;
float: left;
&:active {
background: url('imgs/menu.png') -12px center no-repeat, url('imgs/bg_overlay_pressed_1.png') left no-repeat;
}
}
.save {
background: url('imgs/download.png') center center no-repeat;
float: right;
&:active {
background: url('imgs/download.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center;
}
}
#title {
color: white;
font-size: 11pt;
font-family: 'MozTT-Regular';
float: left;
margin: 1.5rem 0;
position: relative;
left: -2rem;
}
}
#menu {
height: 100%;
width: 15rem;
background: #262626;
position: absolute;
left: -15rem;
top: 5rem;
color: white;
font-family: 'MozTT-Light';
font-size: 8pt;
transition: left 0.2s ease-out;
border-collapse: collapse;
overflow: hidden;
&.pulled {
left: 0;
transition: left 0.2s ease-out;
}
button[id^='set'], p, .bottom button {
background: none;
display: block;
width: 75%;
color: white;
text-align: left;
margin: 1rem 2.5rem;
font-family: 'MozTT-Light';
font-size: 8pt;
padding: 0 0.6rem;
cursor: pointer;
}
span {
float: right;
font-size: 7pt;
}
div[role='slider'] {
width: 60%;
float: right;
margin: 0 2rem 0 0;
div {
overflow: visible;
button {
margin-top: -3.4rem;
left: 0%;
}
}
}
hr {
clear: both;
padding: 0.7rem 0;
margin-bottom: 0.7rem;
border: none;
border-bottom: 1px solid rgba(255,255,255,0.3);
}
*[class^='icon'] {
display: block;
margin: 1rem 0.5rem;
&:nth-of-type(2) {
padding-top: 0.5rem;
}
&:before {
content: '';
background-size: 2rem;
width: 2rem;
height: 2rem;
display: block;
float: left;
margin: -0.3rem 0.5rem 0 0;
}
}
.icon-settings:before {
background-image: url('imgs/settings.png');
}
.icon-clear:before {
background-image: url('imgs/clear.png');
}
.icon-undo:before {
background-image: url('imgs/undo.png');
}
.icon-redo:before {
background-image: url('imgs/redo.png');
}
.options {
display: block;
margin-top: 1rem;
}
.bottom {
position: absolute;
bottom: 5rem;
width: 100%;
button[class^='icon'] {
margin-left: 3.5rem;
}
button {
margin-left: 5rem;
}
}
}

80
Web/css/seekbars.css Normal file
View File

@ -0,0 +1,80 @@
/* ----------------------------------
* Seekbars
* ---------------------------------- */
div[role="slider"] {
position: relative;
height: 3.5rem;
}
div[role="slider"] > div {
display: block;
padding: 0;
overflow-y: hidden;
position: relative;
height: 100%;
}
div[role="slider"] progress {
width: 100%;
background: #000;
border: none;
height: 0.1rem;
display: block;
border-radius: 0;
margin-top: 1.9rem;
}
div[role="slider"] progress::-moz-progress-bar {
background: #01c5ed;
height: 0.6rem;
margin-top: -0.3rem;
border-radius: 0;
}
div[role="slider"] > label {
font-size: 1.5rem;
line-height: 3.8rem;
font-family: sans-serif;
color: #00aacb;
float: right;
padding: 0 0 0 1rem;
height: 3.5rem;
width: auto;
}
div[role="slider"] label:first-of-type {
float: left;
padding: 0 1rem 0 0;
}
div[role="slider"] > label.icon {
width: 3rem;
height: 3rem;
margin-top: 0.5rem;
font-size: 0;
background: no-repeat right top / 3rem auto;
}
div[role="slider"] > label.icon:first-of-type {
background-position: top left;
}
div[role="slider"] button {
width: 3.2rem;
height: 3.2rem;
background: url(seekbars/images/ui/handler.png) no-repeat center center / 3rem auto;
font: 0/0 a;
position: absolute;
top: 50%;
left: 0;
margin: -1.5rem 0 0 -1.6rem;
border-radius: 3.2rem;
border: solid 0.1rem transparent;
transition: border 0.15s ease;
padding: 0;
z-index: 10;
}
div[role="slider"] button:active {
border: solid 0.5rem #01c5ed;
}

Some files were not shown because too many files have changed in this diff Show More