thereadme/Sketchy
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Version 1.2

Browse Source
This commit is contained in:
Mahdi Dibaiee 2014-02-09 19:08:14 +03:30
parent ee48892fee
commit dda48b1b97
27 changed files with 1665 additions and 301 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
Mobile/css/color-picker.css → Mobile/css/color-picker.less
View File

BIN
Mobile/css/imgs/load.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 B

604
Mobile/css/main.css Normal file
View File

@ -0,0 +1,604 @@
@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');
}
/* 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(#808080, transparent), linear-gradient(90deg, #ff0000, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, #ffff00, #d4ff00, #aaff00, #80ff00, #55ff00, #2bff00, #00ff00, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, #00ffff, #00d4ff, #00aaff, #007fff, #0055ff, #002bff, #0000ff, #2a00ff, #5500ff, #7f00ff, #aa00ff, #d400ff, #ff00ff, #ff00d4, #ff00aa, #ff0080, #ff0055, #ff002b, #ff0000);
-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;
}
/* ----------------------------------
* 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;
}
/* ----------------------------------
* Value selector (Single & Multiple)
* ---------------------------------- */
/* Main dialog setup */
form[role="dialog"][data-type="value-selector"] {
background: url(value_selector/images/ui/pattern.png) repeat left top, url(value_selector/images/ui/gradient.png) no-repeat left top / 100% 100%;
overflow: hidden;
position: absolute;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 0 7rem;
color: #fff;
font-family: sans-serif;
}
form[role="dialog"][data-type="value-selector"] > section {
padding: 0 1.5rem 0;
-moz-box-sizing: padding-box;
width: 100%;
height: 100%;
overflow: auto;
}
form[role="dialog"][data-type="value-selector"] h1 {
font-weight: 400;
font-size: 1.9rem;
line-height: 4.8rem;
color: #fff;
border-bottom: 0.1rem solid #616262;
background: rgba(0, 0, 0, 0.2);
margin: 0 -1.5rem;
padding: 0 3rem 1rem;
height: 4.8rem;
-moz-box-sizing: border-box;
}
/* Specific component code */
form[role="dialog"][data-type="value-selector"] [role="listbox"] {
position: relative;
padding: 0;
margin: 0 -1.5rem;
max-height: calc(95%);
overflow: auto;
border-top: solid 0.1rem #222323;
}
form[role="dialog"][data-type="value-selector"] .scrollable:before {
content: "";
display: block;
position: absolute;
pointer-events: none;
top: 4.8rem;
left: 0;
right: 0;
bottom: 6.9rem;
background: url(value_selector/images/ui/shadow.png) repeat-x left top, url(value_selector/images/ui/shadow-invert.png) repeat-x left bottom;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li {
margin: 0;
padding: 0 1.5rem;
height: auto;
list-style: none;
position: relative;
font-weight: lighter;
font-size: 2.2rem;
line-height: 3.9rem;
color: #fff;
transition: background-color 0.2s ease;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:first-child label {
border-top-color: transparent;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li label {
outline: none;
display: block;
color: #fff;
border-top: 0.1rem solid #666;
border-bottom: 0.1rem solid #000;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:last-child label {
border-bottom-color: transparent;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li label span {
display: block;
padding: 1rem 1.5rem;
line-height: 4rem;
word-wrap: break-word;
}
/* Pressed status */
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active {
background-color: #00ABCC;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active label {
border-color: transparent;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active + li label {
border-top-color: #000;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active label span {
color: #fff !important;
background-image: none;
}
/* Checked status */
form[role="dialog"][data-type="value-selector"] [role="listbox"] li[aria-selected="true"]:not([data-input]) span {
padding-right: 2.6rem;
margin-right: 1.2rem;
color: #00abcd;
background: transparent url(value_selector/images/icons/checked.png) no-repeat 100% 50%;
background-size: 2rem;
}
/* Menu & buttons setup */
form[role="dialog"][data-type="value-selector"] menu {
white-space: nowrap;
margin: 0;
padding: 1.5rem;
border-top: solid 0.1rem rgba(255, 255, 255, 0.1);
background: #2d2d2d url(value_selector/images/ui/pattern.png) repeat left top;
display: block;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
form[role="dialog"][data-type="value-selector"] menu button::-moz-focus-inner {
border: none;
outline: none;
}
form[role="dialog"][data-type="value-selector"] menu button {
width: calc(49.5%);
height: 3.8rem;
margin: 0 0 1rem;
padding: 0 1.5rem;
-moz-box-sizing: border-box;
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: #fafafa url(value_selector/images/ui/default.png) repeat-x left bottom / auto 100%;
border: 0.1rem solid #a6a6a6;
border-radius: 0.3rem;
font-weight: 500;
font-size: 1.6rem;
line-height: 3.8rem;
color: #333;
text-align: center;
text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.3);
text-decoration: none;
outline: none;
}
/* Press (default & affirmative) */
form[role="dialog"][data-type="value-selector"] menu button:active,
form[role="dialog"][data-type="value-selector"] menu button.affirmative:active {
border-color: #008aaa;
background: #008aaa;
color: #333;
}
/* affirmative */
form[role="dialog"][data-type="value-selector"] menu button.affirmative {
background-image: url(value_selector/images/ui/affirmative.png);
background-color: #00caf2;
border-color: #008eab;
}
form[role="dialog"][data-type="value-selector"] menu button:last-child {
margin-left: 1rem;
}
form[role="dialog"][data-type="value-selector"] menu button,
form[role="dialog"][data-type="value-selector"] menu button:first-child {
margin: 0;
}
form[role="dialog"][data-type="value-selector"] menu button.full {
width: 100%;
}
/* Right to left tweaks */
html[dir="rtl"] #value-selector li input:checked + span,
html[dir="rtl"] #value-selector li[aria-selected="true"] span {
padding-left: 2.6rem;
margin-left: 1.2rem;
}
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;
}
.separator.long {
background: url('imgs/div_line_lg_black.png');
}
.separator.small {
background: url('imgs/div_line_sm_black.png');
}
.separator.left {
float: left;
}
.separator.right {
float: right;
}
.separator.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 #e3e3e3;
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;
}
.picker .color-picker,
.about .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;
}
.about a,
.about a:link,
.about a:visited,
.about a:active {
color: white;
}
.about .close {
background: #262626;
color: white;
border: 1px solid gray;
}
.about p {
font-size: 11pt;
}
.about span {
font-size: 8pt;
}
header {
width: 100%;
height: 5.3rem;
background: url('imgs/header_bg_black.png');
}
header button {
width: 5rem;
height: 5rem;
}
header .menu {
background: url('imgs/menu.png') -12px center no-repeat;
float: left;
}
header .menu:active {
background: url('imgs/menu.png') -12px center no-repeat, url('imgs/bg_overlay_pressed_1.png') left no-repeat;
}
header .save {
background: url('imgs/download.png') center center no-repeat;
float: right;
}
header .save:active {
background: url('imgs/download.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center;
}
header .load {
background: url('imgs/load.png') center center no-repeat;
float: right;
}
header .load:active {
background: url('imgs/load.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center;
}
header #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;
}
#menu.pulled {
left: 0;
transition: left 0.2s ease-out;
}
#menu button[id^='set'],
#menu p,
#menu .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;
}
#menu span {
float: right;
font-size: 7pt;
}
#menu div[role='slider'] {
width: 60%;
float: right;
margin: 0 2rem 0 0;
}
#menu div[role='slider'] div {
overflow: visible;
}
#menu div[role='slider'] div button {
margin-top: -3.4rem;
left: 0%;
}
#menu hr {
clear: both;
padding: 0.7rem 0;
margin-bottom: 0.7rem;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#menu *[class^='icon'] {
display: block;
margin: 1rem 0.5rem;
}
#menu *[class^='icon']:nth-of-type(2) {
padding-top: 0.5rem;
}
#menu *[class^='icon']:before {
content: '';
background-size: 2rem;
width: 2rem;
height: 2rem;
display: block;
float: left;
margin: -0.3rem 0.5rem 0 0;
}
#menu .icon-settings:before {
background-image: url('imgs/settings.png');
}
#menu .icon-clear:before {
background-image: url('imgs/clear.png');
}
#menu .icon-undo:before {
background-image: url('imgs/undo.png');
}
#menu .icon-redo:before {
background-image: url('imgs/redo.png');
}
#menu .options {
display: block;
margin-top: 1rem;
}
#menu .bottom {
position: absolute;
bottom: 5rem;
width: 100%;
}
#menu .bottom button[class^='icon'] {
margin-left: 3.5rem;
}
#menu .bottom button {
margin-left: 5rem;
}

11
Mobile/css/main.less
View File

@ -1,4 +1,7 @@
@import 'fonts'; @import 'fonts';
@import 'color-picker';
@import 'seekbars';
@import 'value_selector';
html, body { html, body {
@ -148,6 +151,14 @@ header {
} }
} }
.load {
background: url('imgs/load.png') center center no-repeat;
float: right;
&:active {
background: url('imgs/load.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center;
}
}
#title { #title {
color: white; color: white;
font-size: 11pt; font-size: 11pt;

0
Mobile/css/seekbars.css → Mobile/css/seekbars.less
View File

0
Mobile/css/switches.css → Mobile/css/switches.less
View File

1
Mobile/css/value_selector.css → Mobile/css/value_selector.less
View File

@ -22,6 +22,7 @@ form[role="dialog"][data-type="value-selector"] > section {
-moz-box-sizing: padding-box; -moz-box-sizing: padding-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto;
} }
form[role="dialog"][data-type="value-selector"] h1 { form[role="dialog"][data-type="value-selector"] h1 {

43
Mobile/index.html
View File

@ -4,13 +4,7 @@
<head> <head>
<title>Sketchy</title> <title>Sketchy</title>
<meta charset='UTF-8'> <meta charset='UTF-8'>
<link rel='stylesheet/less' href='css/main.less'> <link rel='stylesheet' href='css/main.css'>
<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> </head>
<body> <body>
@ -21,6 +15,7 @@
<p id='title'>Sketchy</p> <p id='title'>Sketchy</p>
<button class='save'></button> <button class='save'></button>
<span class='separator small right'></span> <span class='separator small right'></span>
<button class='load'></button>
</header> </header>
<div id='container'> <div id='container'>
@ -131,6 +126,11 @@
<form role='dialog' data-type='value-selector' id='save' class='hidden confirm'> <form role='dialog' data-type='value-selector' id='save' class='hidden confirm'>
<section class='scrollable'> <section class='scrollable'>
<h1>Save</h1> <h1>Save</h1>
<h1>Type</h1>
<ol role='listbox'>
<li id='exp' aria-selected='true'><label><span>Export to Image</span></label></li>
<li id='pro'><label><span>Sketchy Project</span></label></li>
</ol>
<h1>Background</h1> <h1>Background</h1>
<ol role='listbox'> <ol role='listbox'>
<li aria-selected='true'><label><span>White</span></label></li> <li aria-selected='true'><label><span>White</span></label></li>
@ -141,6 +141,8 @@
<ol role='listbox'> <ol role='listbox'>
<li aria-selected='true' data-input><label><span contenteditable>My Sketch</span></label></li> <li aria-selected='true' data-input><label><span contenteditable>My Sketch</span></label></li>
</ol> </ol>
<br>
<span class='special'>Note: You must disable pop-up blocker to save your sketch.</span>
</section> </section>
<menu> <menu>
<button class='affirmative' type='button'>Cancel</button> <button class='affirmative' type='button'>Cancel</button>
@ -148,6 +150,19 @@
</menu> </menu>
</form> </form>
<form role='dialog' data-type='value-selector' id='load' class='hidden confirm'>
<section class='scrollable'>
<h1>Load</h1>
<h1 class='hidden'>file</h1>
<ol role='listbox'>
</ol>
</section>
<menu>
<button class='affirmative' type='button'>Cancel</button>
<button class='affirmative' type='button'>Load</button>
</menu>
</form>
<!-- COLOR PICKER --> <!-- COLOR PICKER -->
<div class='picker overlay hidden'> <div class='picker overlay hidden'>
@ -181,13 +196,13 @@
<!-- PRELOADER --> <!-- PRELOADER -->
<div class='hidden'> <div class='hidden'>
<img src='value_selector/images/ui/pattern.png'> <img src='css/value_selector/images/ui/pattern.png'>
<img src='value_selector/images/ui/gradient.png'> <img src='css/value_selector/images/ui/gradient.png'>
<img src='value_selector/images/ui/shadow.png'> <img src='css/value_selector/images/ui/shadow.png'>
<img src='value_selector/images/ui/shadow-invert.png'> <img src='css/value_selector/images/ui/shadow-invert.png'>
<img src='value_selector/images/icons/checked.png'> <img src='css/value_selector/images/icons/checked.png'>
<img src='value_selector/images/ui/default.png'> <img src='css/value_selector/images/ui/default.png'>
<img src='value_selector/images/ui/affirmative.png'> <img src='css/value_selector/images/ui/affirmative.png'>
</div> </div>
<script src='js/libs/zepto.min.js'></script> <script src='js/libs/zepto.min.js'></script>

65
Mobile/js/mobile.js
View File

@ -51,6 +51,15 @@ window.save = function() {
} }
} }
var data = $c[0].toDataURL(); var data = $c[0].toDataURL();
if( save.type == 'sketchy project' ) {
if( localStorage.getItem(save['file name']) ) {
if( confirm('A sketch with this name already exists. Do you want to overwrite ' + save['file name']) + '?' ) {
localStorage.setItem(save['file name'], JSON.stringify({data: data, points: window.points}));
}
}
else
localStorage.setItem(save['file name'], JSON.stringify({data: data, points: window.points}));
} else {
var file = dataToBlob($c[0].toDataURL()); var file = dataToBlob($c[0].toDataURL());
var pics = navigator.getDeviceStorage('pictures'); var pics = navigator.getDeviceStorage('pictures');
var r = pics.addNamed(file, save['file name'] + '.png'); var r = pics.addNamed(file, save['file name'] + '.png');
@ -60,8 +69,21 @@ window.save = function() {
r.onerror = function() { r.onerror = function() {
alert('Something bad happened when we tried to save your file\n Possible problems: \n Duplicate name \n Permission problems') alert('Something bad happened when we tried to save your file\n Possible problems: \n Duplicate name \n Permission problems')
} }
}
c.putImageData(window.points.history[window.points.history.last].data, 0, 0); c.putImageData(window.points.history[window.points.history.last].data, 0, 0);
} }
window.load = function() {
var file = JSON.parse(localStorage.getItem(load.file));
var img = document.createElement('img');
img.src = file.data;
console.log(file.data);
img.onload = function() {
c.clearRect(0, 0, width(), height());
c.drawImage(img, 0, 0);
window.points = file.points;
window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}, { data: c.getImageData(0, 0, width(), height()), points: file.points}];
}
}
$('.menu').tap(function() { $('.menu').tap(function() {
$('#menu').toggleClass('pulled'); $('#menu').toggleClass('pulled');
@ -69,6 +91,36 @@ window.save = function() {
$('.save').tap(function() { $('.save').tap(function() {
$('#save').removeClass('hidden'); $('#save').removeClass('hidden');
}) })
$('.load').tap(function() {
$('#load').removeClass('hidden');
$('#load li').remove();
for( var i = 0, len = localStorage.length; i < len; i++ ) {
$('#load ol').append(
$('<li><label><span>' + localStorage.key(i) + '</span></label></li>')
);
}
if( localStorage.length < 1 ) {
$('#load ol').append(
$('<p>No Sketch found.</p>')
);
}
$confirm.find('li').off('tap').tap(function(e) {
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
$(this).attr('aria-selected', 'true');
})
})
$('#pro').click(function() {
$('#save ol:nth-of-type(2) li').each(function() {
if( $(this).find('span').html() !== 'Transparent' ) {
$(this).addClass('hidden');
$(this).removeAttr('aria-selected');
}
else $(this).attr('aria-selected', 'true');
})
})
$('#exp').click(function() {
$('#save ol:nth-of-type(2) li').removeClass('hidden');
})
$c.last().on('touchstart', function(e) { $c.last().on('touchstart', function(e) {
var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY); var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
startPoint(xy.x, xy.y); startPoint(xy.x, xy.y);
@ -126,30 +178,33 @@ window.save = function() {
var $confirm = $('form[data-type="value-selector"].confirm'); var $confirm = $('form[data-type="value-selector"].confirm');
$confirm.find('li').tap(function(e) { $confirm.each(function() {
$(this).find('li').click(function(e) {
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected'); $(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
$(this).attr('aria-selected', 'true'); $(this).attr('aria-selected', 'true');
}) })
$confirm.find('button').last().tap(function(e) { $(this).find('button').last().click(function(e) {
e.preventDefault(); e.preventDefault();
var v = $(this).parents('form').attr('id'); var v = $(this).parents('form').attr('id');
$(this).parents('form').find('h1').each(function(i) { $(this).parents('form').find('h1').each(function(i) {
if( i > 0 ) { if( i > 0 ) {
var key = $(this).html().toLowerCase(); var key = $(this).html().toLowerCase();
var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html(); var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html();
if( key !== 'file name' ) value = value.toLowerCase(); if( key !== 'file name' && key !== 'file' ) value = value.toLowerCase();
window[v][key] = value; window[v][key] = value;
} }
}) })
$(this).parents('form').addClass('hidden'); $(this).parents('form').addClass('hidden');
window[v](); window[v]();
}) })
$confirm.find('button').first().tap(function(e) { $(this).find('button').first().click(function(e) {
e.preventDefault(); e.preventDefault();
$(this).parents('form').addClass('hidden'); $(this).parents('form').addClass('hidden');
}) })
})
// Value Selector Callers // Value Selector Callers
var $btn = $('button[id^="set"]'); var $btn = $('button[id^="set"]');

2
Mobile/manifest.webapp
View File

@ -1,7 +1,7 @@
{ {
"name": "Sketchy", "name": "Sketchy",
"description": "Free Sketch/Paint app", "description": "Free Sketch/Paint app",
"version": "1.1", "version": "1.2",
"fullscreen": "true", "fullscreen": "true",
"type": "privileged", "type": "privileged",
"launch_path": "/index.html", "launch_path": "/index.html",

4
README.md
View File

@ -21,6 +21,10 @@ Firefox Marketplace: https://marketplace.firefox.com/app/sketchy/
Changelog Changelog
========= =========
**1.2**
* Added an option to save sketches as a project, so they are editable[1]
* Made Firefox Desktop / Firefox Android versions working ( was blocked by [1] )
**1.1** **1.1**
* Added "About" * Added "About"
* No load-time for Mobile * No load-time for Mobile

20
Web/LICENSE
View File

@ -1,20 +0,0 @@
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
View File

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

0
Web/css/color-picker.css → Web/css/color-picker.less
View File

BIN
Web/css/imgs/load.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 413 B

604
Web/css/main.css Normal file
View File

@ -0,0 +1,604 @@
@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');
}
/* 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(#808080, transparent), linear-gradient(90deg, #ff0000, #ff2b00, #ff5500, #ff8000, #ffaa00, #ffd500, #ffff00, #d4ff00, #aaff00, #80ff00, #55ff00, #2bff00, #00ff00, #00ff2b, #00ff55, #00ff80, #00ffaa, #00ffd5, #00ffff, #00d4ff, #00aaff, #007fff, #0055ff, #002bff, #0000ff, #2a00ff, #5500ff, #7f00ff, #aa00ff, #d400ff, #ff00ff, #ff00d4, #ff00aa, #ff0080, #ff0055, #ff002b, #ff0000);
-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;
}
/* ----------------------------------
* 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;
}
/* ----------------------------------
* Value selector (Single & Multiple)
* ---------------------------------- */
/* Main dialog setup */
form[role="dialog"][data-type="value-selector"] {
background: url(value_selector/images/ui/pattern.png) repeat left top, url(value_selector/images/ui/gradient.png) no-repeat left top / 100% 100%;
overflow: hidden;
position: absolute;
z-index: 100;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 0 7rem;
color: #fff;
font-family: sans-serif;
}
form[role="dialog"][data-type="value-selector"] > section {
padding: 0 1.5rem 0;
-moz-box-sizing: padding-box;
width: 100%;
height: 100%;
overflow: auto;
}
form[role="dialog"][data-type="value-selector"] h1 {
font-weight: 400;
font-size: 1.9rem;
line-height: 4.8rem;
color: #fff;
border-bottom: 0.1rem solid #616262;
background: rgba(0, 0, 0, 0.2);
margin: 0 -1.5rem;
padding: 0 3rem 1rem;
height: 4.8rem;
-moz-box-sizing: border-box;
}
/* Specific component code */
form[role="dialog"][data-type="value-selector"] [role="listbox"] {
position: relative;
padding: 0;
margin: 0 -1.5rem;
max-height: calc(95%);
overflow: auto;
border-top: solid 0.1rem #222323;
}
form[role="dialog"][data-type="value-selector"] .scrollable:before {
content: "";
display: block;
position: absolute;
pointer-events: none;
top: 4.8rem;
left: 0;
right: 0;
bottom: 6.9rem;
background: url(value_selector/images/ui/shadow.png) repeat-x left top, url(value_selector/images/ui/shadow-invert.png) repeat-x left bottom;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li {
margin: 0;
padding: 0 1.5rem;
height: auto;
list-style: none;
position: relative;
font-weight: lighter;
font-size: 2.2rem;
line-height: 3.9rem;
color: #fff;
transition: background-color 0.2s ease;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:first-child label {
border-top-color: transparent;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li label {
outline: none;
display: block;
color: #fff;
border-top: 0.1rem solid #666;
border-bottom: 0.1rem solid #000;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:last-child label {
border-bottom-color: transparent;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li label span {
display: block;
padding: 1rem 1.5rem;
line-height: 4rem;
word-wrap: break-word;
}
/* Pressed status */
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active {
background-color: #00ABCC;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active label {
border-color: transparent;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active + li label {
border-top-color: #000;
}
form[role="dialog"][data-type="value-selector"] [role="listbox"] li:active label span {
color: #fff !important;
background-image: none;
}
/* Checked status */
form[role="dialog"][data-type="value-selector"] [role="listbox"] li[aria-selected="true"]:not([data-input]) span {
padding-right: 2.6rem;
margin-right: 1.2rem;
color: #00abcd;
background: transparent url(value_selector/images/icons/checked.png) no-repeat 100% 50%;
background-size: 2rem;
}
/* Menu & buttons setup */
form[role="dialog"][data-type="value-selector"] menu {
white-space: nowrap;
margin: 0;
padding: 1.5rem;
border-top: solid 0.1rem rgba(255, 255, 255, 0.1);
background: #2d2d2d url(value_selector/images/ui/pattern.png) repeat left top;
display: block;
overflow: hidden;
position: absolute;
left: 0;
right: 0;
bottom: 0;
}
form[role="dialog"][data-type="value-selector"] menu button::-moz-focus-inner {
border: none;
outline: none;
}
form[role="dialog"][data-type="value-selector"] menu button {
width: calc(49.5%);
height: 3.8rem;
margin: 0 0 1rem;
padding: 0 1.5rem;
-moz-box-sizing: border-box;
display: inline-block;
vertical-align: middle;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
background: #fafafa url(value_selector/images/ui/default.png) repeat-x left bottom / auto 100%;
border: 0.1rem solid #a6a6a6;
border-radius: 0.3rem;
font-weight: 500;
font-size: 1.6rem;
line-height: 3.8rem;
color: #333;
text-align: center;
text-shadow: 0.1rem 0.1rem 0 rgba(255, 255, 255, 0.3);
text-decoration: none;
outline: none;
}
/* Press (default & affirmative) */
form[role="dialog"][data-type="value-selector"] menu button:active,
form[role="dialog"][data-type="value-selector"] menu button.affirmative:active {
border-color: #008aaa;
background: #008aaa;
color: #333;
}
/* affirmative */
form[role="dialog"][data-type="value-selector"] menu button.affirmative {
background-image: url(value_selector/images/ui/affirmative.png);
background-color: #00caf2;
border-color: #008eab;
}
form[role="dialog"][data-type="value-selector"] menu button:last-child {
margin-left: 1rem;
}
form[role="dialog"][data-type="value-selector"] menu button,
form[role="dialog"][data-type="value-selector"] menu button:first-child {
margin: 0;
}
form[role="dialog"][data-type="value-selector"] menu button.full {
width: 100%;
}
/* Right to left tweaks */
html[dir="rtl"] #value-selector li input:checked + span,
html[dir="rtl"] #value-selector li[aria-selected="true"] span {
padding-left: 2.6rem;
margin-left: 1.2rem;
}
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;
}
.separator.long {
background: url('imgs/div_line_lg_black.png');
}
.separator.small {
background: url('imgs/div_line_sm_black.png');
}
.separator.left {
float: left;
}
.separator.right {
float: right;
}
.separator.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 #e3e3e3;
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;
}
.picker .color-picker,
.about .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;
}
.about a,
.about a:link,
.about a:visited,
.about a:active {
color: white;
}
.about .close {
background: #262626;
color: white;
border: 1px solid gray;
}
.about p {
font-size: 11pt;
}
.about span {
font-size: 8pt;
}
header {
width: 100%;
height: 5.3rem;
background: url('imgs/header_bg_black.png');
}
header button {
width: 5rem;
height: 5rem;
}
header .menu {
background: url('imgs/menu.png') -12px center no-repeat;
float: left;
}
header .menu:active {
background: url('imgs/menu.png') -12px center no-repeat, url('imgs/bg_overlay_pressed_1.png') left no-repeat;
}
header .save {
background: url('imgs/download.png') center center no-repeat;
float: right;
}
header .save:active {
background: url('imgs/download.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center;
}
header .load {
background: url('imgs/load.png') center center no-repeat;
float: right;
}
header .load:active {
background: url('imgs/load.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center;
}
header #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;
}
#menu.pulled {
left: 0;
transition: left 0.2s ease-out;
}
#menu button[id^='set'],
#menu p,
#menu .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;
}
#menu span {
float: right;
font-size: 7pt;
}
#menu div[role='slider'] {
width: 60%;
float: right;
margin: 0 2rem 0 0;
}
#menu div[role='slider'] div {
overflow: visible;
}
#menu div[role='slider'] div button {
margin-top: -3.4rem;
left: 0%;
}
#menu hr {
clear: both;
padding: 0.7rem 0;
margin-bottom: 0.7rem;
border: none;
border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#menu *[class^='icon'] {
display: block;
margin: 1rem 0.5rem;
}
#menu *[class^='icon']:nth-of-type(2) {
padding-top: 0.5rem;
}
#menu *[class^='icon']:before {
content: '';
background-size: 2rem;
width: 2rem;
height: 2rem;
display: block;
float: left;
margin: -0.3rem 0.5rem 0 0;
}
#menu .icon-settings:before {
background-image: url('imgs/settings.png');
}
#menu .icon-clear:before {
background-image: url('imgs/clear.png');
}
#menu .icon-undo:before {
background-image: url('imgs/undo.png');
}
#menu .icon-redo:before {
background-image: url('imgs/redo.png');
}
#menu .options {
display: block;
margin-top: 1rem;
}
#menu .bottom {
position: absolute;
bottom: 5rem;
width: 100%;
}
#menu .bottom button[class^='icon'] {
margin-left: 3.5rem;
}
#menu .bottom button {
margin-left: 5rem;
}

11
Web/css/main.less
View File

@ -1,4 +1,7 @@
@import 'fonts'; @import 'fonts';
@import 'color-picker';
@import 'seekbars';
@import 'value_selector';
html, body { html, body {
@ -148,6 +151,14 @@ header {
} }
} }
.load {
background: url('imgs/load.png') center center no-repeat;
float: right;
&:active {
background: url('imgs/load.png') center center no-repeat, url('imgs/bg_overlay_pressed_2.png') center center;
}
}
#title { #title {
color: white; color: white;
font-size: 11pt; font-size: 11pt;

0
Web/css/seekbars.css → Web/css/seekbars.less
View File

0
Web/css/switches.css → Web/css/switches.less
View File

1
Web/css/value_selector.css → Web/css/value_selector.less
View File

@ -22,6 +22,7 @@ form[role="dialog"][data-type="value-selector"] > section {
-moz-box-sizing: padding-box; -moz-box-sizing: padding-box;
width: 100%; width: 100%;
height: 100%; height: 100%;
overflow: auto;
} }
form[role="dialog"][data-type="value-selector"] h1 { form[role="dialog"][data-type="value-selector"] h1 {

46
Web/index.html
View File

@ -5,12 +5,7 @@
<title>Sketchy</title> <title>Sketchy</title>
<meta charset='UTF-8'> <meta charset='UTF-8'>
<meta name="viewport" content="width=device-width user-scalable=no initial-scale=1"> <meta name="viewport" content="width=device-width user-scalable=no initial-scale=1">
<link rel='stylesheet/less' href='css/main.less'> <link rel='stylesheet' href='css/main.css'>
<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> <script src='js/libs/mobilebrowsers.js'></script>
</head> </head>
@ -22,6 +17,7 @@
<p id='title'>Sketchy</p> <p id='title'>Sketchy</p>
<button class='save'></button> <button class='save'></button>
<span class='separator small right'></span> <span class='separator small right'></span>
<button class='load'></button>
</header> </header>
<div id='container'> <div id='container'>
@ -132,14 +128,23 @@
<form role='dialog' data-type='value-selector' id='save' class='hidden confirm'> <form role='dialog' data-type='value-selector' id='save' class='hidden confirm'>
<section class='scrollable'> <section class='scrollable'>
<h1>Save</h1> <h1>Save</h1>
<h1>Type</h1>
<ol role='listbox'>
<li id='exp' aria-selected='true'><label><span>Export to Image</span></label></li>
<li id='pro'><label><span>Sketchy Project</span></label></li>
</ol>
<h1>Background</h1> <h1>Background</h1>
<ol role='listbox'> <ol role='listbox'>
<li aria-selected='true'><label><span>White</span></label></li> <li aria-selected='true'><label><span>White</span></label></li>
<li><label><span>Current Color</span></label></li> <li><label><span>Current Color</span></label></li>
<li><label><span>Transparent</span></label></li> <li><label><span>Transparent</span></label></li>
</ol> </ol>
<h1>File Name</h1>
<ol role='listbox'>
<li aria-selected='true' data-input><label><span contenteditable>My Sketch</span></label></li>
</ol>
<br> <br>
<span>Note: You must disable pop-up blocker to save your sketch.</span> <span class='special'>Note: You must disable pop-up blocker to save your sketch.</span>
</section> </section>
<menu> <menu>
<button class='affirmative' type='button'>Cancel</button> <button class='affirmative' type='button'>Cancel</button>
@ -147,6 +152,19 @@
</menu> </menu>
</form> </form>
<form role='dialog' data-type='value-selector' id='load' class='hidden confirm'>
<section class='scrollable'>
<h1>Load</h1>
<h1 class='hidden'>file</h1>
<ol role='listbox'>
</ol>
</section>
<menu>
<button class='affirmative' type='button'>Cancel</button>
<button class='affirmative' type='button'>Load</button>
</menu>
</form>
<!-- COLOR PICKER --> <!-- COLOR PICKER -->
<div class='picker overlay hidden'> <div class='picker overlay hidden'>
@ -180,13 +198,13 @@
<!-- PRELOADER --> <!-- PRELOADER -->
<div class='hidden'> <div class='hidden'>
<img src='value_selector/images/ui/pattern.png'> <img src='css/value_selector/images/ui/pattern.png'>
<img src='value_selector/images/ui/gradient.png'> <img src='css/value_selector/images/ui/gradient.png'>
<img src='value_selector/images/ui/shadow.png'> <img src='css/value_selector/images/ui/shadow.png'>
<img src='value_selector/images/ui/shadow-invert.png'> <img src='css/value_selector/images/ui/shadow-invert.png'>
<img src='value_selector/images/icons/checked.png'> <img src='css/value_selector/images/icons/checked.png'>
<img src='value_selector/images/ui/default.png'> <img src='css/value_selector/images/ui/default.png'>
<img src='value_selector/images/ui/affirmative.png'> <img src='css/value_selector/images/ui/affirmative.png'>
</div> </div>
<script src='js/libs/yepnope.min.js'></script> <script src='js/libs/yepnope.min.js'></script>

76
Web/js/desktop.js
View File

@ -2,41 +2,42 @@
$(window).resize(sizeAndPos); $(window).resize(sizeAndPos);
// Check for update
function save() {
var cData = c.getImageData(0, 0, width(), height());
switch(save.background) {
case 'white': {
c.fillStyle = 'white';
c.globalCompositeOperation = 'destination-over';
c.fillRect(0, 0, width(), height());
c.fillStyle = settings.color;
c.globalCompositeOperation = settings.composite;
break;
}
case 'current color': {
c.fillStyle = settings.color;
c.globalCompositeOperation = 'destination-over';
c.fillRect(0, 0, width(), height());
c.fillStyle = settings.color;
c.globalCompositeOperation = settings.composite;
break;
}
}
var data = $c[0].toDataURL();
window.open(data, '_blank').focus();
c.putImageData(cData, 0, 0);
}
$('.menu').click(function() { $('.menu').click(function() {
$('#menu').toggleClass('pulled'); $('#menu').toggleClass('pulled');
}) })
$('.save').click(function() { $('.save').click(function() {
$('#save').removeClass('hidden'); $('#save').removeClass('hidden');
}) })
$('.load').click(function() {
$('#load').removeClass('hidden');
$('#load li').remove();
for( var i = 0, len = localStorage.length; i < len; i++ ) {
$('#load ol').append(
$('<li><label><span>' + localStorage.key(i) + '</span></label></li>')
);
}
if( localStorage.length < 1 ) {
$('#load ol').append(
$('<p>No sketch found.</p>')
);
}
$confirm.find('li').off('click').click(function(e) {
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
$(this).attr('aria-selected', 'true');
})
})
$('#pro').click(function() {
$('#save ol:nth-of-type(2) li').each(function() {
if( $(this).find('span').html() !== 'Transparent' ) {
$(this).addClass('hidden');
$(this).removeAttr('aria-selected');
}
else $(this).attr('aria-selected', 'true');
})
})
$('#exp').click(function() {
$('#save ol:nth-of-type(2) li').removeClass('hidden');
})
$c.last().on('mousedown', function(e) { $c.last().on('mousedown', function(e) {
e.preventDefault(); e.preventDefault();
var xy = relative(e.pageX, e.pageY); var xy = relative(e.pageX, e.pageY);
@ -68,7 +69,7 @@ function save() {
// Single // Single
var $single = $('form[data-type="value-selector"].single'); var $single = $('form.single');
$single.find('li').click(function(e) { $single.find('li').click(function(e) {
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected'); $(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
@ -90,30 +91,35 @@ function save() {
// Confirm // Confirm
var $confirm = $('form[data-type="value-selector"].confirm'); var $confirm = $('form.confirm');
$confirm.find('li').click(function(e) { $confirm.each(function() {
$(this).find('li').click(function(e) {
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected'); $(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
$(this).attr('aria-selected', 'true'); $(this).attr('aria-selected', 'true');
}) })
$confirm.find('button').last().click(function(e) { $(this).find('button').last().click(function(e) {
e.preventDefault(); e.preventDefault();
var v = $(this).parents('form').attr('id'); var v = $(this).parents('form').attr('id');
$(this).parents('form').find('h1').each(function(i) { $(this).parents('form').find('h1').each(function(i) {
if( i > 0 ) { if( i > 0 ) {
var key = $(this).html().toLowerCase(); var key = $(this).html().toLowerCase();
var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html().toLowerCase(); var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html();
if( key !== 'file name' && key !== 'file' ) value = value.toLowerCase();
window[v][key] = value; window[v][key] = value;
} }
}) })
$(this).parents('form').addClass('hidden'); $(this).parents('form').addClass('hidden');
window[v](); window[v]();
}) })
$confirm.find('button').first().click(function(e) { $(this).find('button').first().click(function(e) {
e.preventDefault(); e.preventDefault();
$(this).parents('form').addClass('hidden'); $(this).parents('form').addClass('hidden');
}) })
})
// Value Selector Callers // Value Selector Callers
var $btn = $('button[id^="set"]'); var $btn = $('button[id^="set"]');

61
Web/js/main.js
View File

@ -35,4 +35,65 @@ $(document).ready(function() {
nope: ['js/desktop.js', 'js/libs/color-picker.js'] nope: ['js/desktop.js', 'js/libs/color-picker.js']
}) })
function save() {
switch(save.background) {
case 'white': {
c.fillStyle = 'white';
c.globalCompositeOperation = 'destination-over';
c.fillRect(0, 0, width(), height());
c.fillStyle = settings.color;
c.globalCompositeOperation = settings.composite;
break;
}
case 'current color': {
c.fillStyle = settings.color;
c.globalCompositeOperation = 'destination-over';
c.fillRect(0, 0, width(), height());
c.fillStyle = settings.color;
c.globalCompositeOperation = settings.composite;
break;
}
}
var data = $c[0].toDataURL();
if( save.type == 'sketchy project' ) {
if( localStorage.getItem(save['file name']) ) {
if( confirm('A sketch with this name already exists. Do you want to overwrite ' + save['file name']) + '?' ) {
localStorage.setItem(save['file name'], JSON.stringify({data: data, points: window.points}));
}
}
else
localStorage.setItem(save['file name'], JSON.stringify({data: data, points: window.points}));
} else {
window.open(data, '_blank').focus();
}
c.putImageData(window.points.history[window.points.history.last].data, 0, 0);
}
function load() {
var file = JSON.parse(localStorage.getItem(load.file));
var img = document.createElement('img');
img.src = file.data;
img.onload = function() {
c.clearRect(0, 0, width(), height());
c.drawImage(img, 0, 0);
window.points = file.points;
window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}, { data: c.getImageData(0, 0, width(), height()), points: file.points}];
}
}
window.load = load;
window.save = save;
// Check for Update
var request = navigator.mozApps.getSelf();
request.onsuccess = function() {
var manifest = this.manifest;
}
}) })

0
Web/js/mobile.css Normal file
View File

161
Web/js/mobile.js
View File

@ -1,67 +1,52 @@
"use strict"; "use strict";
$(document).ready(function() {
// Open External Links in browser // Open External Links in browser
$('*').click(function(e) { $('.menu').tap(function() {
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() {
var cData = c.getImageData(0, 0, width(), height());
switch(save.background) {
case 'white': {
c.fillStyle = 'white';
c.globalCompositeOperation = 'destination-over';
c.fillRect(0, 0, width(), height());
c.fillStyle = settings.color;
c.globalCompositeOperation = settings.composite;
break;
}
case 'current color': {
c.fillStyle = settings.color;
c.globalCompositeOperation = 'destination-over';
c.fillRect(0, 0, width(), height());
c.fillStyle = settings.color;
c.globalCompositeOperation = settings.composite;
break;
}
}
var data = $c[0].toDataURL();
window.open(data, '_blank').focus();
c.putImageData(cData, 0, 0);
}
$('.menu').tap(function() {
$('#menu').toggleClass('pulled'); $('#menu').toggleClass('pulled');
}) })
$('.save').tap(function() { $('.save').tap(function() {
$('#save').removeClass('hidden'); $('#save').removeClass('hidden');
})
$('.load').tap(function() {
$('#load').removeClass('hidden');
$('#load li').remove();
for( var i = 0, len = localStorage.length; i < len; i++ ) {
$('#load ol').append(
$('<li><label><span>' + localStorage.key(i) + '</span></label></li>')
);
}
if( localStorage.length < 1 ) {
$('#load ol').append(
$('<p>No sketch found.</p>')
);
}
$confirm.find('li').off('tap').tap(function(e) {
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
$(this).attr('aria-selected', 'true');
}) })
$c.last().on('touchstart', function(e) { })
$('#pro').click(function() {
$('#save ol:nth-of-type(2) li').each(function() {
if( $(this).find('span').html() !== 'Transparent' ) {
$(this).addClass('hidden');
$(this).removeAttr('aria-selected');
}
else $(this).attr('aria-selected', 'true');
})
})
$('#exp').click(function() {
$('#save ol:nth-of-type(2) li').removeClass('hidden');
})
$c.last().on('touchstart', function(e) {
var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY); var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
startPoint(xy.x, xy.y); startPoint(xy.x, xy.y);
window.active = true; window.active = true;
}).on('touchmove', function(e) { }).on('touchmove', function(e) {
if (!window.active || settings.type == 'line') return; if (!window.active || settings.type == 'line') return;
var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY); var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
drawPoint(xy.x, xy.y); drawPoint(xy.x, xy.y);
}).on('touchend', function(e) { }).on('touchend', function(e) {
window.active = false; window.active = false;
if( settings.type == 'eraser' ) return; if( settings.type == 'eraser' ) return;
@ -74,19 +59,19 @@ function save() {
points: window.points.slice(0) points: window.points.slice(0)
}) })
window.points.history.last = window.points.history.length-1; window.points.history.last = window.points.history.length-1;
}).on('longTap', function(e) { }).on('longTap', function(e) {
if( points[points.length-1].type == 'line' ) { if( points[points.length-1].type == 'line' ) {
window.active = false; window.active = false;
points[points.length-1].type = ''; points[points.length-1].type = '';
points[points.length-1].start = undefined; points[points.length-1].start = undefined;
} }
}) })
// Value Selector // Value Selector
var $single = $('form[data-type="value-selector"].single'); var $single = $('form[data-type="value-selector"].single');
$single.find('li').tap(function(e) { $single.find('li').tap(function(e) {
e.preventDefault(); e.preventDefault();
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected'); $(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
$(this).attr('aria-selected', 'true'); $(this).attr('aria-selected', 'true');
@ -99,43 +84,48 @@ function save() {
$('#menu div.options > .general, #menu div.options > .'+value).removeClass('hidden'); $('#menu div.options > .general, #menu div.options > .'+value).removeClass('hidden');
$(this).parents('form').addClass('hidden'); $(this).parents('form').addClass('hidden');
}) })
$single.submit(function(e) { $single.submit(function(e) {
e.preventDefault(); e.preventDefault();
$(this).addClass('hidden'); $(this).addClass('hidden');
}) })
// Confirm // Confirm
var $confirm = $('form[data-type="value-selector"].confirm'); var $confirm = $('form[data-type="value-selector"].confirm');
$confirm.find('li').tap(function(e) { $confirm.each(function() {
$(this).find('li').click(function(e) {
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected'); $(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
$(this).attr('aria-selected', 'true'); $(this).attr('aria-selected', 'true');
}) })
$confirm.find('button').last().tap(function(e) { $(this).find('button').last().click(function(e) {
e.preventDefault(); e.preventDefault();
var v = $(this).parents('form').attr('id'); var v = $(this).parents('form').attr('id');
$(this).parents('form').find('h1').each(function(i) { $(this).parents('form').find('h1').each(function(i) {
if( i > 0 ) { if( i > 0 ) {
var key = $(this).html().toLowerCase(); var key = $(this).html().toLowerCase();
var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html().toLowerCase(); var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html();
if( key !== 'file name' && key !== 'file' ) value = value.toLowerCase();
window[v][key] = value; window[v][key] = value;
} }
}) })
$(this).parents('form').addClass('hidden'); $(this).parents('form').addClass('hidden');
window[v](); window[v]();
}) })
$confirm.find('button').first().tap(function(e) { $(this).find('button').first().click(function(e) {
e.preventDefault(); e.preventDefault();
$(this).parents('form').addClass('hidden'); $(this).parents('form').addClass('hidden');
}) })
// Value Selector Callers })
var $btn = $('button[id^="set"]'); // Value Selector Callers
$btn.each(function() {
var $btn = $('button[id^="set"]');
$btn.each(function() {
var target = /set(.*)/.exec($(this).attr('id'))[1]; var target = /set(.*)/.exec($(this).attr('id'))[1];
if( target == 'color' ) { if( target == 'color' ) {
return $(this).tap(function() { return $(this).tap(function() {
@ -146,15 +136,15 @@ function save() {
e.preventDefault(); e.preventDefault();
$('form[id="' + target + '"]').removeClass('hidden'); $('form[id="' + target + '"]').removeClass('hidden');
}) })
}) })
// Seekbar // Seekbar
var sliderLeft; var sliderLeft;
$('div[role="slider"] button').on('touchstart', function() { $('div[role="slider"] button').on('touchstart', function() {
$(this).attr('data-moving','true'); $(this).attr('data-moving','true');
if( !sliderLeft ) sliderLeft = $('div[role="slider"] button').offset().left; if( !sliderLeft ) sliderLeft = $('div[role="slider"] button').offset().left;
}).on('touchmove', function(e) { }).on('touchmove', function(e) {
if( $(this).attr('data-moving') ) { if( $(this).attr('data-moving') ) {
var x = parseInt(e.changedTouches[0].pageX - sliderLeft - 15); var x = parseInt(e.changedTouches[0].pageX - sliderLeft - 15);
var $c = $('.'+$(this).parents('div[role="slider"]').attr('class')); var $c = $('.'+$(this).parents('div[role="slider"]').attr('class'));
@ -169,19 +159,19 @@ function save() {
$('#'+ key +' span').html(x); $('#'+ key +' span').html(x);
} }
} }
}).on('touchend', function() { }).on('touchend', function() {
$(this).removeAttr('data-moving'); $(this).removeAttr('data-moving');
}) })
// Color Picker // Color Picker
$('.close').tap(function() { $('.close').tap(function() {
$(this).parent().addClass('hidden'); $(this).parent().addClass('hidden');
}) })
// Bottom // Bottom
$('#clear').tap(function() { $('#clear').tap(function() {
c.clearRect(0, 0, width(), height()); c.clearRect(0, 0, width(), height());
var h = window.points.history; var h = window.points.history;
window.points = []; window.points = [];
@ -195,13 +185,12 @@ function save() {
points: [] points: []
}) })
window.points.history.last = window.points.history.length-1; window.points.history.last = window.points.history.length-1;
}) })
$('#undo').tap(undo); $('#undo').tap(undo);
$('#redo').tap(redo); $('#redo').tap(redo);
$('#about').tap(function() { $('#about').tap(function() {
$('.about').removeClass('hidden'); $('.about').removeClass('hidden');
}) })
});

2
Web/manifest-web.webapp
View File

@ -1,7 +1,7 @@
{ {
"name": "Sketchy Web", "name": "Sketchy Web",
"description": "Free Sketch/Paint app", "description": "Free Sketch/Paint app",
"version": "1", "version": "1.2",
"default_locale": "en", "default_locale": "en",
"launch_path": "/Sketchy/Web/index.html", "launch_path": "/Sketchy/Web/index.html",
"icons": { "icons": {

10
changelog.html
View File

@ -4,13 +4,21 @@
<title>Sketchy Changelog</title> <title>Sketchy Changelog</title>
</head> </head>
<body> <body>
<ul><b>1.1</b>
<ul>
<b>1.2</b>
<li>Added an option to save sketches as a project, so they are editable[1]</li>
<li>Made Firefox Desktop / Firefox Android versions working ( was blocked by [1] )</li>
<b>1.1</b>
<li>Added "About"</li> <li>Added "About"</li>
<li>No Load-time for mobile</li> <li>No Load-time for mobile</li>
<li>Added preloader for images</li> <li>Added preloader for images</li>
<li>Fixed low lineWidth for sketches rendering invisible in Chrome</li> <li>Fixed low lineWidth for sketches rendering invisible in Chrome</li>
<li>Fixed background settings not applying ( save )</li> <li>Fixed background settings not applying ( save )</li>
<li>Fixed Email link not working on Mobile</li> <li>Fixed Email link not working on Mobile</li>
</ul> </ul>
</body> </body>
</html> </html>