diff --git a/Mobile/js/functions-m.js b/Mobile/js/functions-m.js
new file mode 100755
index 0000000..37b4973
--- /dev/null
+++ b/Mobile/js/functions-m.js
@@ -0,0 +1,239 @@
+"use strict";
+/*** ESSENTIALS ***/
+
+function sizeAndPos() {
+
+ var data = c.getImageData(0,0, $c.width(), $c.height());
+ var w = $(window).width(),
+ h = $(window).height() - 53;
+ $c.attr('width', w * window.devicePixelRatio);
+ $c.attr('height',h * window.devicePixelRatio);
+ $c.css({
+ 'width' : w,
+ 'height' : h
+ });
+ c.clearRect(0,0, width(), height());
+ c.putImageData(data, 0, 0);
+}
+
+function relative(x,y, el) {
+ var el = el || $c[0];
+ return {
+ x : x*window.devicePixelRatio - el.offset().left,
+ y : (y - 53) * window.devicePixelRatio - el.offset().top
+ }
+}
+
+function threshold(x1, y1, x2, y2, threshold) {
+ var tr = threshold || 5;
+ if( x1 <= x2 + tr && x1 >= x2 - tr && y1 <= y2 + tr && y1 >= y2 - tr ) return true;
+ return false;
+}
+
+function draw(x1, y1, x2, y2, opts, overlay) {
+ opts = opts || {};
+ var c = window.c;
+ if( overlay ) var c = window.o;
+ c.beginPath();
+ if( settings.type == 'eraser' ) c.globalCompositeOperation = 'destination-out';
+ else c.globalCompositeOperation = opts.composite || settings.composite;
+ c.lineCap = opts.lineCap || settings.lineCap;
+ c.lineJoin = opts.lineJoin || settings.lineJoin;
+ c.strokeStyle = opts.color || settings.color;
+ c.fillStyle = opts.color || settings.color;
+ c.lineWidth = ( opts.lineWidth || settings.lineWidth ) / 10;
+ c.moveTo(x1, y1);
+ c.lineTo(x2, y2);
+ if( !opts.noStroke ) c.stroke();
+ if( opts.fill ) c.fill();
+}
+
+function shape(opts, overlay) {
+ if(overlay) var c = window.o;
+ else var c = window.c;
+ c.beginPath();
+ c.fillStyle = opts.color || settings.color;
+ switch(opts.type) {
+
+ case 'circle': {
+ c.arc(opts.x, opts.y, opts.radius, 0, 2*Math.PI);
+ break;
+ }
+ case 'rectangle': {
+ c.rect(opts.x, opts.y, opts.width, opts.height);
+ break;
+ }
+ case 'square': {
+ c.rect(opts.x, opts.y, opts.width, opts.width);
+ break;
+ }
+ case 'triangle': {
+ c.fillStyle = opts
+ c.moveTo(opts.x1, opts.y1);
+ c.lineTo(opts.x2, opts.y2);
+ c.lineTo(opts.x3, opts.y3);
+ c.lineTo(opts.x1, opts.y1);
+ }
+
+ }
+ c.fill();
+}
+
+
+function undo() {
+ var history = window.points.history;
+ if( history.last > 1 ) {
+ var step = history[history.last-1];
+ c.putImageData(step.data, 0, 0);
+ window.points = step.points.slice(0);
+ window.points.history = history;
+ window.points.history.last = history.last-1;
+ } else {
+ c.clearRect(0,0, width(), height());
+ window.points = [];
+ window.points.history = history;
+ window.points.history.last = 0;
+ }
+
+}
+
+function redo() {
+ var history = window.points.history;
+ if( history.last < history.length-1 ) {
+ var step = history[history.last+1];
+ c.putImageData(step.data, 0, 0);
+ window.points = step.points.slice(0);
+ window.points.history = history;
+ window.points.history.last = history.last+1;
+ }
+}
+
+function width() {
+ return +$c.attr('width');
+}
+
+function height() {
+ return +$c.attr('height');
+}
+
+function dataToBlob(data) {
+ var binary = atob(data.split(',')[1]), array = [];
+ var type = data.split(',')[0].split(':')[1].split(';')[0];
+ for(var i = 0; i < binary.length; i++) array.push(binary.charCodeAt(i));
+ return new Blob([new Uint8Array(array)], {type: type});
+}
+
+
+/*** END ***/
+
+function startPoint(x, y) {
+
+ // If no previous point exists, make the first one.
+ if( !points.length ) points.push({x: x, y: y, type: '', start: {x: x, y: y}});
+
+ var old = points[points.length-1],
+ start = old.start,
+ current = {
+ x : x,
+ y : y,
+ start : old.start || {x: x, y: y},
+ type : settings.type
+ }
+ // Line
+ if( old.type !== 'line' && current.type == 'line' ) {
+ window.o.beginPath();
+ window.o.fillStyle = 'red';
+ window.o.arc(x,y, 3, 0, 2*Math.PI);
+ window.o.fill();
+ }
+
+ if( old.type == 'line' && current.type == 'line' ) {
+ if( points[points.indexOf(old)-1].type !== 'line' ) {
+ o.clearRect(old.x-3, old.y-3, 6, 6, true);
+ draw(old.x, old.y, x, y);
+ } else
+ draw(old.x, old.y, x, y);
+ }
+
+ // Shapes
+
+ if( old.type !== 'shape' && current.type == 'shape' ) {
+ settings.shape.
+ }
+
+ var thresholds = window.mobile ? [10, 5] : [5, 2];
+ if( points.length > 1 && ((start && threshold(start.x, start.y, x, y, thresholds[0])) || threshold(old.x, old.y, x, y, thresholds[1])) ) {
+ window.active = false;
+ points[points.length-1].type = '';
+ points[points.length-1].start = undefined;
+ return;
+ }
+ points.push(current);
+}
+
+function drawPoint(x,y) {
+ var capture = points[points.length-1];
+
+ switch(capture.type) {
+ case 'eraser': {
+ capture.type = 'pen';
+ }
+ case 'pen': {
+ draw(capture.x, capture.y, x, y);
+
+ var current = {
+ x : x,
+ y : y,
+ start : capture.start,
+ type : capture.type
+ }
+
+ points.push(current);
+ break;
+ }
+ case 'sketch': {
+ draw(capture.x, capture.y, x, y);
+ var current = {
+ x : x,
+ y : y,
+ start : capture.start,
+ type : capture.type
+ }
+ points.push(current);
+
+ for( var i = 0, len = points.length-1; i < len; i++ ) {
+ if(threshold(points[i].x, points[i].y, current.x, current.y, settings.connectTelorance)) {
+ var x = points[i].x - current.x,
+ y = points[i].y - current.y;
+ var w = settings.lineWidth/20 > 0.2 ? settings.lineWidth/20 : 0.2;
+
+ draw(points[i].x - x*0.2, points[i].y - y*0.2, current.x + x*0.2, current.y + y*0.2, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: w})
+ }
+ }
+ break;
+ }
+ case 'fur': {
+ draw(capture.x, capture.y, x, y);
+ var current = {
+ x : x,
+ y : y,
+ start : capture.start,
+ type : capture.type
+ }
+ points.push(current);
+
+ for( var i = 0, len = points.length-1; i < len; i++ ) {
+ if(threshold(points[i].x, points[i].y, current.x, current.y, settings.connectTelorance)) {
+ var x = points[i].x - current.x,
+ y = points[i].y - current.y;
+ var l = settings.furLength / 100 || 0.2;
+ var w = settings.lineWidth/20 > 0.2 ? settings.lineWidth/20 : 0.2;
+
+ draw(points[i].x + x*l, points[i].y + y*l, current.x - x*l, current.y - y*l, {strokeStyle: 'rgba(0,0,0,0.4)', lineWidth: w})
+ }
+ }
+ break;
+ }
+ }
+}
+
diff --git a/Mobile/js/functions.css b/Mobile/js/functions.css
old mode 100644
new mode 100755
diff --git a/Mobile/js/functions.js b/Mobile/js/functions.js
old mode 100644
new mode 100755
index 37b4973..463aec5
--- a/Mobile/js/functions.js
+++ b/Mobile/js/functions.js
@@ -12,15 +12,16 @@ function sizeAndPos() {
'width' : w,
'height' : h
});
- c.clearRect(0,0, width(), height());
+ c.clear();
c.putImageData(data, 0, 0);
}
function relative(x,y, el) {
- var el = el || $c[0];
+ var el = el || $c,
+ offset = el.offset();
return {
- x : x*window.devicePixelRatio - el.offset().left,
- y : (y - 53) * window.devicePixelRatio - el.offset().top
+ x : (x - offset.left) *window.devicePixelRatio,
+ y : (y - offset.top) * window.devicePixelRatio
}
}
@@ -32,8 +33,8 @@ function threshold(x1, y1, x2, y2, threshold) {
function draw(x1, y1, x2, y2, opts, overlay) {
opts = opts || {};
- var c = window.c;
if( overlay ) var c = window.o;
+ else var c = window.c;
c.beginPath();
if( settings.type == 'eraser' ) c.globalCompositeOperation = 'destination-out';
else c.globalCompositeOperation = opts.composite || settings.composite;
@@ -44,41 +45,76 @@ function draw(x1, y1, x2, y2, opts, overlay) {
c.lineWidth = ( opts.lineWidth || settings.lineWidth ) / 10;
c.moveTo(x1, y1);
c.lineTo(x2, y2);
- if( !opts.noStroke ) c.stroke();
- if( opts.fill ) c.fill();
+ if( !opts.noStroke || settings.noStroke ) c.stroke();
+ if( opts.fill || settings.fill ) c.fill();
}
-function shape(opts, overlay) {
- if(overlay) var c = window.o;
- else var c = window.c;
+function mark(x, y) {
+ var o = window.o;
+ o.beginPath();
+ o.fillStyle = 'red';
+ o.arc(x,y, 3, 0, 2*Math.PI);
+ o.fill();
+}
+
+function erase(x1, y1, x2, y2, opts) {
+ var opts = opts || {};
+ var c = window.c;
c.beginPath();
- c.fillStyle = opts.color || settings.color;
- switch(opts.type) {
-
- case 'circle': {
- c.arc(opts.x, opts.y, opts.radius, 0, 2*Math.PI);
- break;
- }
- case 'rectangle': {
- c.rect(opts.x, opts.y, opts.width, opts.height);
- break;
- }
- case 'square': {
- c.rect(opts.x, opts.y, opts.width, opts.width);
- break;
- }
- case 'triangle': {
- c.fillStyle = opts
- c.moveTo(opts.x1, opts.y1);
- c.lineTo(opts.x2, opts.y2);
- c.lineTo(opts.x3, opts.y3);
- c.lineTo(opts.x1, opts.y1);
- }
-
- }
- c.fill();
+ c.lineWidth = ( opts.lineWidth || settings.lineWidth ) / 10;
+ c.globalCompositeOperation = 'source-out';
+ c.moveTo(x1, y1);
+ c.lineTo(x2, y2);
+ window.points = window.points.filter(function(e, i) {
+ if(!threshold(e.x, e.y, x1, y1, c.lineWidth) &&
+ !threshold(e.x, e.y, x2, y2, c.lineWidth) ) return true;
+ return false;
+ })
}
+function line(x, y, opts) {
+ var opts = opts || {};
+ var o = window.o;
+ o.beginPath();
+ o.lineCap = opts.lineCap || settings.lineCap;
+ o.lineJoin = opts.lineJoin || settings.lineJoin;
+ o.strokeStyle = opts.color || settings.color;
+ o.fillStyle = opts.color || settings.color;
+ o.lineWidth = ( opts.lineWidth || settings.lineWidth ) / 10;
+ var last = settings.drawingLine.length-1;
+ o.moveTo(settings.drawingLine[last].x, settings.drawingLine[last].y);
+ o.lineTo(x,y);
+ settings.drawingLine.push({
+ x: x,
+ y: y
+ })
+ o.stroke();
+ if( opts.fill || settings.fill ) o.fill();
+}
+
+function finishLine(opts) {
+ var opts = opts || {};
+ var c = window.c;
+ o.clear();
+ c.beginPath();
+ c.strokeStyle = opts.color || settings.color;
+ c.fillStyle = opts.color || settings.color;
+ c.lineWidth = ( opts.lineWidth || settings.lineWidth ) / 10;
+ c.lineJoin = opts.lineJoin || settings.lineJoin;
+ c.lineCap = opts.lineJoin || settings.lineJoin;
+ c.moveTo(settings.drawingLine[0].x, settings.drawingLine[0].y);
+ for( var i = 1, len = settings.drawingLine.length; i < len; i++ ) {
+ c.lineTo(settings.drawingLine[i].x, settings.drawingLine[i].y);
+ }
+ if( settings.stroke ) c.stroke();
+ if( settings.fill ) c.fill();
+ settings.drawingLine = [];
+ 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;
+}
function undo() {
var history = window.points.history;
@@ -89,7 +125,7 @@ function undo() {
window.points.history = history;
window.points.history.last = history.last-1;
} else {
- c.clearRect(0,0, width(), height());
+ c.clear();
window.points = [];
window.points.history = history;
window.points.history.last = 0;
@@ -139,26 +175,27 @@ function startPoint(x, y) {
start : old.start || {x: x, y: y},
type : settings.type
}
+
// Line
if( old.type !== 'line' && current.type == 'line' ) {
- window.o.beginPath();
- window.o.fillStyle = 'red';
- window.o.arc(x,y, 3, 0, 2*Math.PI);
- window.o.fill();
+ mark(x, y);
+ settings.drawingLine.push({
+ x: x,
+ y: y
+ })
}
if( old.type == 'line' && current.type == 'line' ) {
if( points[points.indexOf(old)-1].type !== 'line' ) {
- o.clearRect(old.x-3, old.y-3, 6, 6, true);
- draw(old.x, old.y, x, y);
- } else
- draw(old.x, old.y, x, y);
+ o.clear();
+ }
+ line(x, y);
}
// Shapes
- if( old.type !== 'shape' && current.type == 'shape' ) {
- settings.shape.
+ if( current.type == 'shape' ) {
+ settings.shapeStart = current;
}
var thresholds = window.mobile ? [10, 5] : [5, 2];
@@ -166,6 +203,7 @@ function startPoint(x, y) {
window.active = false;
points[points.length-1].type = '';
points[points.length-1].start = undefined;
+ finishLine();
return;
}
points.push(current);
@@ -176,9 +214,9 @@ function drawPoint(x,y) {
switch(capture.type) {
case 'eraser': {
- capture.type = 'pen';
+ erase(capture.x, capture.y, x, y);
}
- case 'pen': {
+ case 'pencil': {
draw(capture.x, capture.y, x, y);
var current = {
@@ -234,6 +272,74 @@ function drawPoint(x,y) {
}
break;
}
+ case 'shape': {
+ o.clear();
+ o.beginPath();
+ o.fillStyle = settings.color;
+ o.strokeStyle = settings.color;
+ o.lineWidth = settings.lineWidth / 20;
+ var start = settings.shapeStart;
+ switch(settings.shape) {
+ case 'circle': {
+ var di = Math.abs(x - start.x);
+ o.arc(start.x, start.y, di, 0, 2*Math.PI);
+ settings.comShape = {
+ type: 'circle',
+ x: start.x,
+ y: start.y,
+ radius: di
+ }
+ break;
+ }
+ case 'rectangle': {
+ var w = x - start.x;
+ var h = y - start.y;
+ o.rect(start.x, start.y, w, h);
+ settings.comShape = {
+ type: 'rectangle',
+ x: start.x,
+ y: start.y,
+ w: w,
+ h: h
+ }
+ break;
+ }
+ case 'square': {
+ var w = x - start.x;
+ o.rect(start.x, start.y, w, w);
+ settings.comShape = {
+ type: 'rectangle',
+ x: start.x,
+ y: start.y,
+ w: w,
+ h: w
+ }
+ break;
+ }
+ case 'triangle': {
+ var dix = (x - start.x)/2;
+ var diy = (y - start.y)/2;
+ o.moveTo(start.x + dix, start.y);
+ o.lineTo(x, y);
+ o.lineTo(start.x, y);
+ o.lineTo(start.x + dix, start.y);
+ settings.comShape = {
+ type: 'triangle',
+ start: {
+ x: start.x,
+ y: start.y
+ },
+ x: x,
+ y: y,
+ dix: dix,
+ diy: diy
+ }
+ }
+ }
+ if( settings.fill ) o.fill();
+ if( settings.stroke ) o.stroke();
+ break;
+ }
}
}
diff --git a/Mobile/js/less-1.5.0.min.js b/Mobile/js/less-1.5.0.min.js
old mode 100644
new mode 100755
diff --git a/Mobile/js/libs/color-picker-touch.js b/Mobile/js/libs/color-picker-touch.js
old mode 100644
new mode 100755
diff --git a/Mobile/js/libs/color-picker.js b/Mobile/js/libs/color-picker.js
old mode 100644
new mode 100755
diff --git a/Mobile/js/libs/mobilebrowsers.js b/Mobile/js/libs/mobilebrowsers.js
old mode 100644
new mode 100755
diff --git a/Mobile/js/libs/stack.js b/Mobile/js/libs/stack.js
old mode 100644
new mode 100755
diff --git a/Mobile/js/libs/touch.js b/Mobile/js/libs/touch.js
old mode 100644
new mode 100755
diff --git a/Mobile/js/libs/yepnope.min.js b/Mobile/js/libs/yepnope.min.js
old mode 100644
new mode 100755
diff --git a/Mobile/js/libs/zepto.min.js b/Mobile/js/libs/zepto.min.js
old mode 100644
new mode 100755
diff --git a/Mobile/js/main.js b/Mobile/js/main.js
old mode 100644
new mode 100755
index 6bd4f0b..738138b
--- a/Mobile/js/main.js
+++ b/Mobile/js/main.js
@@ -3,8 +3,12 @@
$(document).ready(function() {
window.c = $('canvas')[0].getContext('2d');
window.o = $('canvas')[1].getContext('2d');
-
+ window.c.clear = window.o.clear = function() {
+ this.clearRect(0, 0, width(), height());
+ }
window.settings = {
+ stroke: true,
+ fill: false,
lineWidth : 2,
color : 'black',
type: 'sketch',
@@ -12,7 +16,12 @@ $(document).ready(function() {
lineJoin: 'round',
furLength: 5,
connectTelorance: 40,
- composite: 'source-over'
+ composite: 'source-over',
+ shape: 'circle',
+ shapeStart: {},
+ comShape: {},
+ drawingLine: [],
+ version: 1.2
};
window.points = [];
window.$c = $('canvas');
@@ -20,19 +29,21 @@ $(document).ready(function() {
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);
+ var caller = $(this).parent().attr('data-caller');
+ settings[caller] = c;
+ $('#set' + caller + ' span').html(c);
+ if( caller == 'bg' ) {
+ $c.first().css('background', 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']
- })*/
+ if( localStorage.getItem('sawTips') != settings.version ) {
+ $('.tour').removeClass('hidden');
+ localStorage.setItem('sawTips', settings.version);
+ }
})
diff --git a/Web/js/functions.css b/Mobile/js/mobile.css
similarity index 100%
rename from Web/js/functions.css
rename to Mobile/js/mobile.css
diff --git a/Mobile/js/mobile.js b/Mobile/js/mobile.js
old mode 100644
new mode 100755
index 9200b6c..935f609
--- a/Mobile/js/mobile.js
+++ b/Mobile/js/mobile.js
@@ -43,7 +43,7 @@ window.save = function() {
break;
}
case 'current color': {
- c.fillStyle = settings.color;
+ c.fillStyle = settings.bg;
c.globalCompositeOperation = 'destination-over';
c.fillRect(0, 0, width(), height());
c.globalCompositeOperation = settings.composite;
@@ -109,7 +109,7 @@ window.load = function() {
$(this).attr('aria-selected', 'true');
})
})
- $('#pro').click(function() {
+ $('#pro').tap(function() {
$('#save ol:nth-of-type(2) li').each(function() {
if( $(this).find('span').html() !== 'Transparent' ) {
$(this).addClass('hidden');
@@ -118,7 +118,7 @@ window.load = function() {
else $(this).attr('aria-selected', 'true');
})
})
- $('#exp').click(function() {
+ $('#exp').tap(function() {
$('#save ol:nth-of-type(2) li').removeClass('hidden');
})
$c.last().on('touchstart', function(e) {
@@ -133,10 +133,40 @@ window.load = function() {
window.active = false;
if( settings.type == 'eraser' ) return;
+ if( settings.type == 'shape' ) {
+ var s = settings.comShape;
+ o.clear();
+ c.beginPath();
+ c.fillStyle = settings.color;
+ c.strokeStyle = settings.color;
+ c.lineWidth = settings.lineWidth / 20;
+ switch(s.type) {
+ case 'circle': {
+ c.arc(s.x, s.y, s.radius, 0, 2*Math.PI);
+ break;
+ }
+ case 'rectangle': {
+ c.rect(s.x, s.y, s.w, s.h)
+ break;
+ }
+ case 'triangle': {
+ c.moveTo(s.start.x + s.dix, s.start.y);
+ c.lineTo(s.x, s.y);
+ c.lineTo(s.start.x, s.y);
+ c.lineTo(s.start.x + s.dix, s.start.y);
+ break;
+ }
+ }
+ if( settings.fill ) c.fill();
+ if( settings.stroke ) c.stroke();
+ }
+
+ if( settings.type == 'line' ) 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)
@@ -147,6 +177,7 @@ window.load = function() {
window.active = false;
points[points.length-1].type = '';
points[points.length-1].start = undefined;
+ finishLine();
}
})
@@ -155,23 +186,23 @@ window.load = function() {
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();
+ value = $(this).find('label span').html().toLowerCase(),
+ target = $(this).attr('data-target');
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');
-
+ if( target ) {
+ $('#menu div.options > div').addClass('hidden');
+ $('#menu div.options > .general, #menu div.options > .'+target).removeClass('hidden');
+ }
$(this).parents('form').addClass('hidden');
})
-
- $single.find('button').tap(function(e) {
+ $single.submit(function(e) {
e.preventDefault();
- $(this).parents('form').addClass('hidden');
+ $(this).addClass('hidden');
})
// Confirm
@@ -180,11 +211,11 @@ window.load = function() {
$confirm.each(function() {
- $(this).find('li').click(function(e) {
+ $(this).find('li').tap(function(e) {
$(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
$(this).attr('aria-selected', 'true');
})
- $(this).find('button').last().click(function(e) {
+ $(this).find('button').last().tap(function(e) {
e.preventDefault();
var v = $(this).parents('form').attr('id');
$(this).parents('form').find('h1').each(function(i) {
@@ -198,7 +229,7 @@ window.load = function() {
$(this).parents('form').addClass('hidden');
window[v]();
})
- $(this).find('button').first().click(function(e) {
+ $(this).find('button').first().tap(function(e) {
e.preventDefault();
$(this).parents('form').addClass('hidden');
})
@@ -210,9 +241,11 @@ window.load = function() {
var $btn = $('button[id^="set"]');
$btn.each(function() {
var target = /set(.*)/.exec($(this).attr('id'))[1];
- if( target == 'color' ) {
+ // Exception for Color
+ if( target == 'color' || target == 'bg' ) {
return $(this).tap(function() {
$('.picker').removeClass('hidden');
+ $('.picker').attr('data-caller', target);
})
}
$(this).tap(function(e) {
@@ -246,6 +279,21 @@ window.load = function() {
$(this).removeAttr('data-moving');
})
+ $('.fill, .stroke').tap(function() {
+ var s = $('.'+$(this).attr('class')).find('span');
+ if( s.html() == 'Yes' ) {
+ s.html('No');
+ settings[$(this).attr('class')] = false;
+ } else {
+ s.html('Yes');
+ settings[$(this).attr('class')] = true;
+ }
+ })
+
+ $('.close, .tour button').tap(function() {
+ $(this).parent().addClass('hidden');
+ })
+
// Color Picker
$('.close').tap(function() {
diff --git a/Mobile/manifest.webapp b/Mobile/manifest.webapp
old mode 100644
new mode 100755
diff --git a/README.md b/README.md
old mode 100644
new mode 100755
diff --git a/Web/cache.appcache b/Web/cache.appcache
old mode 100644
new mode 100755
diff --git a/Web/css/color-picker.less b/Web/css/color-picker.less
old mode 100644
new mode 100755
diff --git a/Web/css/fonts.less b/Web/css/fonts.less
old mode 100644
new mode 100755
diff --git a/Web/css/fonts/MozTT-Bold.ttf b/Web/css/fonts/MozTT-Bold.ttf
old mode 100644
new mode 100755
diff --git a/Web/css/fonts/MozTT-Light.ttf b/Web/css/fonts/MozTT-Light.ttf
old mode 100644
new mode 100755
diff --git a/Web/css/fonts/MozTT-Medium.ttf b/Web/css/fonts/MozTT-Medium.ttf
old mode 100644
new mode 100755
diff --git a/Web/css/fonts/MozTT-Regular.ttf b/Web/css/fonts/MozTT-Regular.ttf
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/bg_overlay_pressed_1.png b/Web/css/imgs/bg_overlay_pressed_1.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/bg_overlay_pressed_2.png b/Web/css/imgs/bg_overlay_pressed_2.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/clear.png b/Web/css/imgs/clear.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/div_line_lg_black.png b/Web/css/imgs/div_line_lg_black.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/div_line_sm_black.png b/Web/css/imgs/div_line_sm_black.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/download.png b/Web/css/imgs/download.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/finger.png b/Web/css/imgs/finger.png
new file mode 100644
index 0000000..4998bee
Binary files /dev/null and b/Web/css/imgs/finger.png differ
diff --git a/Web/css/imgs/header_bg_black.png b/Web/css/imgs/header_bg_black.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/load.png b/Web/css/imgs/load.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/menu.png b/Web/css/imgs/menu.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/redo.png b/Web/css/imgs/redo.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/settings.png b/Web/css/imgs/settings.png
old mode 100644
new mode 100755
diff --git a/Web/css/imgs/tour/line-1.png b/Web/css/imgs/tour/line-1.png
new file mode 100644
index 0000000..e271a2e
Binary files /dev/null and b/Web/css/imgs/tour/line-1.png differ
diff --git a/Web/css/imgs/tour/line-2.png b/Web/css/imgs/tour/line-2.png
new file mode 100644
index 0000000..b239eaa
Binary files /dev/null and b/Web/css/imgs/tour/line-2.png differ
diff --git a/Web/css/imgs/tour/line-3.png b/Web/css/imgs/tour/line-3.png
new file mode 100644
index 0000000..6ea8680
Binary files /dev/null and b/Web/css/imgs/tour/line-3.png differ
diff --git a/Web/css/imgs/tour/line-4.png b/Web/css/imgs/tour/line-4.png
new file mode 100644
index 0000000..7c0a888
Binary files /dev/null and b/Web/css/imgs/tour/line-4.png differ
diff --git a/Web/css/imgs/tour/line-5.png b/Web/css/imgs/tour/line-5.png
new file mode 100644
index 0000000..682055f
Binary files /dev/null and b/Web/css/imgs/tour/line-5.png differ
diff --git a/Web/css/imgs/tour/shapes.png b/Web/css/imgs/tour/shapes.png
new file mode 100644
index 0000000..c37a1e1
Binary files /dev/null and b/Web/css/imgs/tour/shapes.png differ
diff --git a/Web/css/imgs/tour/sketch-1.png b/Web/css/imgs/tour/sketch-1.png
new file mode 100644
index 0000000..634b82c
Binary files /dev/null and b/Web/css/imgs/tour/sketch-1.png differ
diff --git a/Web/css/imgs/tour/sketch-2.png b/Web/css/imgs/tour/sketch-2.png
new file mode 100644
index 0000000..ceeb00b
Binary files /dev/null and b/Web/css/imgs/tour/sketch-2.png differ
diff --git a/Web/css/imgs/undo.png b/Web/css/imgs/undo.png
old mode 100644
new mode 100755
diff --git a/Web/css/main.css b/Web/css/main.css
old mode 100644
new mode 100755
index 0ad3e8e..e2da7ab
--- a/Web/css/main.css
+++ b/Web/css/main.css
@@ -301,7 +301,8 @@ 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 {
+form[role="dialog"][data-type="value-selector"] menu button,
+.button {
width: calc(49.5%);
height: 3.8rem;
margin: 0 0 1rem;
@@ -326,13 +327,15 @@ form[role="dialog"][data-type="value-selector"] menu button {
}
/* Press (default & affirmative) */
form[role="dialog"][data-type="value-selector"] menu button:active,
-form[role="dialog"][data-type="value-selector"] menu button.affirmative:active {
+form[role="dialog"][data-type="value-selector"] menu button.affirmative:active,
+.button:active {
border-color: #008aaa;
background: #008aaa;
color: #333;
}
/* affirmative */
-form[role="dialog"][data-type="value-selector"] menu button.affirmative {
+form[role="dialog"][data-type="value-selector"] menu button.affirmative,
+.button.affirmative {
background-image: url(value_selector/images/ui/affirmative.png);
background-color: #00caf2;
border-color: #008eab;
@@ -344,7 +347,8 @@ 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 {
+form[role="dialog"][data-type="value-selector"] menu button.full,
+.button.full {
width: 100%;
}
/* Right to left tweaks */
@@ -368,8 +372,8 @@ body {
outline: none;
}
.hidden {
- display: none;
- visibility: none;
+ display: none !important;
+ visibility: none !important;
}
div#container {
position: absolute;
@@ -426,7 +430,8 @@ button {
left: 97%;
}
.picker,
-.about {
+.about,
+.tour {
font-family: 'MozTT-Light';
width: 30rem;
height: 24.6rem;
@@ -437,10 +442,12 @@ button {
margin-left: -15rem;
}
.picker .color-picker,
-.about .color-picker {
+.about .color-picker,
+.tour .color-picker {
margin: 0;
}
-.about {
+.about,
+.tour {
background: #262626;
padding: 1rem 2rem;
height: 23rem;
@@ -451,22 +458,35 @@ button {
box-shadow: 0 0 0.3rem black;
}
.about a,
+.tour a,
.about a:link,
+.tour a:link,
.about a:visited,
-.about a:active {
+.tour a:visited,
+.about a:active,
+.tour a:active {
color: white;
}
-.about .close {
+.about .close,
+.tour .close {
background: #262626;
color: white;
border: 1px solid gray;
}
-.about p {
+.about p,
+.tour p {
font-size: 11pt;
}
-.about span {
+.about span,
+.tour span {
font-size: 8pt;
}
+.tour .button {
+ width: 30rem;
+ position: absolute;
+ bottom: 1rem;
+ left: 1.8rem;
+}
header {
width: 100%;
height: 5.3rem;
@@ -507,8 +527,9 @@ header #title {
left: -2rem;
}
#menu {
- height: 100%;
width: 15rem;
+ height: 100%;
+ display: block;
background: #262626;
position: absolute;
left: -15rem;
@@ -518,7 +539,7 @@ header #title {
font-size: 8pt;
transition: left 0.2s ease-out;
border-collapse: collapse;
- overflow: hidden;
+ overflow-y: auto;
}
#menu.pulled {
left: 0;
@@ -538,6 +559,9 @@ header #title {
padding: 0 0.6rem;
cursor: pointer;
}
+#menu p {
+ width: 65%;
+}
#menu span {
float: right;
font-size: 7pt;
@@ -590,13 +614,14 @@ header #title {
background-image: url('imgs/redo.png');
}
#menu .options {
- display: block;
+ display: table-row;
+ vertical-align: top;
margin-top: 1rem;
}
#menu .bottom {
+ width: 100%;
position: absolute;
bottom: 5rem;
- width: 100%;
}
#menu .bottom button[class^='icon'] {
margin-left: 3.5rem;
diff --git a/Web/css/main.less b/Web/css/main.less
old mode 100644
new mode 100755
index 8aa6248..9cb6c0f
--- a/Web/css/main.less
+++ b/Web/css/main.less
@@ -3,7 +3,6 @@
@import 'seekbars';
@import 'value_selector';
-
html, body {
margin: 0;
font-size: 10px;
@@ -20,8 +19,8 @@ html, body {
}
.hidden {
- display: none;
- visibility: none;
+ display: none !important;
+ visibility: none !important;
}
div#container {
@@ -84,7 +83,7 @@ button {
left: 97%;
}
-.picker, .about {
+.picker, .about, .tour {
font-family: 'MozTT-Light';
width: 30rem;
height: 24.6rem;
@@ -99,7 +98,7 @@ button {
}
}
-.about {
+.about, .tour {
background: #262626;
padding: 1rem 2rem;;
height: 23rem;
@@ -127,6 +126,15 @@ button {
}
}
+.tour {
+ .button {
+ width: 30rem;
+ position: absolute;
+ bottom: 1rem;
+ left: 1.8rem;
+ }
+}
+
header {
width: 100%;
height: 5.3rem;
@@ -174,8 +182,9 @@ header {
#menu {
- height: 100%;
width: 15rem;
+ height: 100%;
+ display: block;
background: #262626;
position: absolute;
left: -15rem;
@@ -185,7 +194,7 @@ header {
font-size: 8pt;
transition: left 0.2s ease-out;
border-collapse: collapse;
- overflow: hidden;
+ overflow-y: auto;
&.pulled {
left: 0;
@@ -204,6 +213,9 @@ header {
padding: 0 0.6rem;
cursor: pointer;
}
+ p {
+ width: 65%;
+ }
span {
float: right;
font-size: 7pt;
@@ -260,13 +272,14 @@ header {
}
.options {
- display: block;
+ display: table-row;
+ vertical-align: top;
margin-top: 1rem;
}
.bottom {
+ width: 100%;
position: absolute;
bottom: 5rem;
- width: 100%;
button[class^='icon'] {
margin-left: 3.5rem;
}
diff --git a/Web/css/seekbars.less b/Web/css/seekbars.less
old mode 100644
new mode 100755
diff --git a/Web/css/seekbars/images/ui/handler.png b/Web/css/seekbars/images/ui/handler.png
old mode 100644
new mode 100755
diff --git a/Web/css/seekbars/images/ui/handler@1.5x.png b/Web/css/seekbars/images/ui/handler@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/seekbars/images/ui/handler@2x.png b/Web/css/seekbars/images/ui/handler@2x.png
old mode 100644
new mode 100755
diff --git a/Web/css/seekbars/seekbars.css b/Web/css/seekbars/seekbars.css
old mode 100644
new mode 100755
diff --git a/Web/css/switches.less b/Web/css/switches.less
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/check/danger.png b/Web/css/switches/images/check/danger.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/check/danger@1.5x.png b/Web/css/switches/images/check/danger@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/check/danger@2x.png b/Web/css/switches/images/check/danger@2x.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/check/default.png b/Web/css/switches/images/check/default.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/check/default@1.5x.png b/Web/css/switches/images/check/default@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/check/default@2x.png b/Web/css/switches/images/check/default@2x.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/radio/danger.png b/Web/css/switches/images/radio/danger.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/radio/danger@1.5x.png b/Web/css/switches/images/radio/danger@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/radio/danger@2x.png b/Web/css/switches/images/radio/danger@2x.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/radio/default.png b/Web/css/switches/images/radio/default.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/radio/default@1.5x.png b/Web/css/switches/images/radio/default@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/radio/default@2x.png b/Web/css/switches/images/radio/default@2x.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/switch/background.png b/Web/css/switches/images/switch/background.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/switch/background@1.5x.png b/Web/css/switches/images/switch/background@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/switch/background_off.png b/Web/css/switches/images/switch/background_off.png
old mode 100644
new mode 100755
diff --git a/Web/css/switches/images/switch/background_off@1.5x.png b/Web/css/switches/images/switch/background_off@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector.less b/Web/css/value_selector.less
old mode 100644
new mode 100755
index 1cc41f5..baaf1eb
--- a/Web/css/value_selector.less
+++ b/Web/css/value_selector.less
@@ -144,7 +144,7 @@ form[role="dialog"][data-type="value-selector"] menu button::-moz-focus-inner {
outline: none;
}
-form[role="dialog"][data-type="value-selector"] menu button {
+form[role="dialog"][data-type="value-selector"] menu button, .button {
width: calc((100% - 1rem) / 2);
height: 3.8rem;
margin: 0 0 1rem;
@@ -170,14 +170,14 @@ form[role="dialog"][data-type="value-selector"] menu button {
/* Press (default & affirmative) */
form[role="dialog"][data-type="value-selector"] menu button:active,
-form[role="dialog"][data-type="value-selector"] menu button.affirmative:active {
+form[role="dialog"][data-type="value-selector"] menu button.affirmative:active, .button:active {
border-color: #008aaa;
background: #008aaa;
color: #333;
}
/* affirmative */
-form[role="dialog"][data-type="value-selector"] menu button.affirmative {
+form[role="dialog"][data-type="value-selector"] menu button.affirmative, .button.affirmative {
background-image: url(value_selector/images/ui/affirmative.png);
background-color: #00caf2;
border-color: #008eab;
@@ -192,7 +192,7 @@ form[role="dialog"][data-type="value-selector"] menu button:first-child {
margin: 0;
}
-form[role="dialog"][data-type="value-selector"] menu button.full {
+form[role="dialog"][data-type="value-selector"] menu button.full, .button.full {
width: 100%;
}
diff --git a/Web/css/value_selector/images/icons/checked.png b/Web/css/value_selector/images/icons/checked.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/icons/checked@1.5x.png b/Web/css/value_selector/images/icons/checked@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/icons/checked@2x.png b/Web/css/value_selector/images/icons/checked@2x.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/affirmative.png b/Web/css/value_selector/images/ui/affirmative.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/default.png b/Web/css/value_selector/images/ui/default.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/gradient.png b/Web/css/value_selector/images/ui/gradient.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/gradient@1.5x.png b/Web/css/value_selector/images/ui/gradient@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/pattern.png b/Web/css/value_selector/images/ui/pattern.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/shadow-invert.png b/Web/css/value_selector/images/ui/shadow-invert.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/shadow-invert@1.5x.png b/Web/css/value_selector/images/ui/shadow-invert@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/shadow-invert@2x.png b/Web/css/value_selector/images/ui/shadow-invert@2x.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/shadow.png b/Web/css/value_selector/images/ui/shadow.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/shadow@1.5x.png b/Web/css/value_selector/images/ui/shadow@1.5x.png
old mode 100644
new mode 100755
diff --git a/Web/css/value_selector/images/ui/shadow@2x.png b/Web/css/value_selector/images/ui/shadow@2x.png
old mode 100644
new mode 100755
diff --git a/Web/img/icons/MozillaFXOSIconTemplate1_overlay.png b/Web/img/icons/MozillaFXOSIconTemplate1_overlay.png
old mode 100644
new mode 100755
diff --git a/Web/img/icons/icon120.png b/Web/img/icons/icon120.png
old mode 100644
new mode 100755
diff --git a/Web/img/icons/icon128.png b/Web/img/icons/icon128.png
old mode 100644
new mode 100755
diff --git a/Web/img/icons/icon16.png b/Web/img/icons/icon16.png
old mode 100644
new mode 100755
diff --git a/Web/img/icons/icon2.png b/Web/img/icons/icon2.png
old mode 100644
new mode 100755
diff --git a/Web/img/icons/icon2.svg b/Web/img/icons/icon2.svg
old mode 100644
new mode 100755
diff --git a/Web/img/icons/icon32.png b/Web/img/icons/icon32.png
old mode 100644
new mode 100755
diff --git a/Web/img/icons/icon48.png b/Web/img/icons/icon48.png
old mode 100644
new mode 100755
diff --git a/Web/img/icons/icon60.png b/Web/img/icons/icon60.png
old mode 100644
new mode 100755
diff --git a/Web/img/icons/icon64.png b/Web/img/icons/icon64.png
old mode 100644
new mode 100755
diff --git a/Web/img/icons/icon90.png b/Web/img/icons/icon90.png
old mode 100644
new mode 100755
diff --git a/Web/js/main.css b/Web/index.css
similarity index 100%
rename from Web/js/main.css
rename to Web/index.css
diff --git a/Web/index.html b/Web/index.html
old mode 100644
new mode 100755
index 78865ad..aa78b34
--- a/Web/index.html
+++ b/Web/index.html
@@ -24,14 +24,15 @@
-
+