2014-02-01 18:18:29 +00:00
|
|
|
"use strict";
|
|
|
|
|
|
|
|
$(document).ready(function() {
|
2014-02-02 20:16:28 +00:00
|
|
|
window.c = $('canvas')[0].getContext('2d');
|
|
|
|
window.o = $('canvas')[1].getContext('2d');
|
2014-02-12 10:23:31 +00:00
|
|
|
window.c.clear = window.o.clear = function() {
|
|
|
|
this.clearRect(0, 0, width(), height());
|
|
|
|
}
|
2014-02-01 18:18:29 +00:00
|
|
|
|
|
|
|
window.settings = {
|
2014-02-16 14:30:45 +00:00
|
|
|
stroke: true,
|
|
|
|
fill: false,
|
2014-02-05 13:02:07 +00:00
|
|
|
lineWidth : 2,
|
|
|
|
color : 'black',
|
2014-02-01 18:18:29 +00:00
|
|
|
type: 'sketch',
|
|
|
|
lineCap: 'round',
|
2014-02-02 20:16:28 +00:00
|
|
|
lineJoin: 'round',
|
2014-02-16 15:32:11 +00:00
|
|
|
furLength: 50,
|
2014-02-06 16:18:11 +00:00
|
|
|
connectTelorance: 40,
|
2014-02-12 10:23:31 +00:00
|
|
|
composite: 'source-over',
|
|
|
|
shape: 'circle',
|
2014-02-16 14:30:45 +00:00
|
|
|
shapeStart: {},
|
|
|
|
comShape: {},
|
|
|
|
drawingLine: [],
|
|
|
|
version: 1.2
|
2014-02-01 18:18:29 +00:00
|
|
|
};
|
|
|
|
window.points = [];
|
|
|
|
window.$c = $('canvas');
|
2014-02-02 20:16:28 +00:00
|
|
|
window.points.history = [{ data: c.createImageData($c.width(), $c.height()), points: []}];
|
2014-02-06 20:39:42 +00:00
|
|
|
window.points.history.last = 0;
|
2014-02-01 18:18:29 +00:00
|
|
|
|
|
|
|
sizeAndPos();
|
2014-02-06 14:40:10 +00:00
|
|
|
//$(window).resize(sizeAndPos);
|
2014-02-01 18:18:29 +00:00
|
|
|
|
2014-02-05 13:02:07 +00:00
|
|
|
$('.color-picker').change(function() {
|
|
|
|
var c = $(this).find('.color').val();
|
2014-02-16 14:30:45 +00:00
|
|
|
var caller = $(this).parent().attr('data-caller');
|
|
|
|
settings[caller] = c;
|
|
|
|
$('#set' + caller + ' span').html(c);
|
|
|
|
if( caller == 'bg' ) {
|
|
|
|
$c.first().css('background', c);
|
|
|
|
}
|
2014-02-05 13:02:07 +00:00
|
|
|
})
|
|
|
|
$('.color').val('#000000');
|
|
|
|
|
|
|
|
yepnope({
|
|
|
|
test: window.mobile,
|
2014-02-07 12:20:19 +00:00
|
|
|
yep : ['js/libs/touch.js', 'js/mobile.js', 'js/libs/color-picker-touch.js'],
|
|
|
|
nope: ['js/desktop.js', 'js/libs/color-picker.js']
|
2014-02-05 13:02:07 +00:00
|
|
|
})
|
|
|
|
|
2014-02-09 15:38:14 +00:00
|
|
|
|
|
|
|
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': {
|
2014-02-16 14:30:45 +00:00
|
|
|
c.fillStyle = settings.bg;
|
2014-02-09 15:38:14 +00:00
|
|
|
c.globalCompositeOperation = 'destination-over';
|
|
|
|
c.fillRect(0, 0, width(), height());
|
|
|
|
c.globalCompositeOperation = settings.composite;
|
|
|
|
break;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
var data = $c[0].toDataURL();
|
|
|
|
|
|
|
|
if( save.type == 'sketchy project' ) {
|
2014-02-16 15:12:22 +00:00
|
|
|
var list = JSON.parse(localStorage.getItem('projects'));
|
|
|
|
if( list && list.some(function(a) { return a.name == save['file name'] }) ) {
|
2014-02-09 15:38:14 +00:00
|
|
|
if( confirm('A sketch with this name already exists. Do you want to overwrite ' + save['file name']) + '?' ) {
|
2014-02-16 15:12:22 +00:00
|
|
|
list.push({
|
|
|
|
name: save['file name'],
|
|
|
|
data: data,
|
|
|
|
points: window.points
|
|
|
|
})
|
|
|
|
localStorage.setItem('projects', JSON.stringify(list));
|
2014-02-09 15:38:14 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
else
|
2014-02-16 15:12:22 +00:00
|
|
|
list ? list.push({
|
|
|
|
name: save['file name'],
|
|
|
|
data: data,
|
|
|
|
points: window.points
|
|
|
|
}) : list = [{
|
|
|
|
name: save['file name'],
|
|
|
|
data: data,
|
|
|
|
points: window.points
|
|
|
|
}];
|
|
|
|
localStorage.setItem('projects', JSON.stringify(list));
|
2014-02-09 15:38:14 +00:00
|
|
|
} else {
|
|
|
|
window.open(data, '_blank').focus();
|
|
|
|
}
|
|
|
|
|
|
|
|
c.putImageData(window.points.history[window.points.history.last].data, 0, 0);
|
|
|
|
}
|
|
|
|
|
|
|
|
function load() {
|
2014-02-16 15:12:22 +00:00
|
|
|
var file = JSON.parse(localStorage.getItem('projects')).filter(function(a) { return a.name == load.file })[0];
|
2014-02-09 15:38:14 +00:00
|
|
|
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;
|
|
|
|
|
2014-02-16 14:30:45 +00:00
|
|
|
|
|
|
|
if( localStorage.getItem('sawTips') != settings.version ) {
|
|
|
|
$('.tour').removeClass('hidden');
|
|
|
|
localStorage.setItem('sawTips', settings.version);
|
|
|
|
}
|
|
|
|
|
|
|
|
|
2014-02-10 12:12:30 +00:00
|
|
|
// TODO: Check for Update
|
2014-02-09 15:38:14 +00:00
|
|
|
|
2014-02-16 14:30:45 +00:00
|
|
|
/*var request = navigator.mozApps.getInstalled();
|
2014-02-09 15:38:14 +00:00
|
|
|
request.onsuccess = function() {
|
2014-02-09 16:22:38 +00:00
|
|
|
var app = this.result[0];
|
2014-02-09 17:42:55 +00:00
|
|
|
var latest = $.ajax({url:'manifest-web.webapp'});
|
2014-02-09 18:28:45 +00:00
|
|
|
var selfApp = navigator.mozApps.getSelf();
|
2014-02-16 14:30:45 +00:00
|
|
|
selfApp.onsuccess = function() {
|
2014-02-09 18:28:45 +00:00
|
|
|
if(this.result) {
|
|
|
|
latest.onload = function() {
|
|
|
|
if( this.response ) {
|
|
|
|
var lapp = JSON.parse(this.response);
|
2014-02-10 11:20:58 +00:00
|
|
|
alert(lapp.version);
|
|
|
|
alert(app.manifest.version);
|
2014-02-09 18:28:45 +00:00
|
|
|
if( lapp.version != app.manifest.version &&
|
2014-02-09 18:30:35 +00:00
|
|
|
confirm('A new version of this app is available, do you want to update?')) {
|
2014-02-10 11:39:57 +00:00
|
|
|
var ins = navigator.mozApps.install();
|
2014-02-09 18:28:45 +00:00
|
|
|
ins.onsuccess = function() {
|
|
|
|
alert('The app was installed successfuly');
|
|
|
|
}
|
|
|
|
ins.onerror = function() {
|
2014-02-09 18:39:33 +00:00
|
|
|
alert('There was an error installing app - ' + this.error.name)
|
2014-02-09 18:28:45 +00:00
|
|
|
}
|
|
|
|
}
|
2014-02-09 17:42:55 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
2014-02-16 14:30:45 +00:00
|
|
|
}
|
2014-02-09 17:42:55 +00:00
|
|
|
if( !app && confirm('Do you want to Install this app?') ) {
|
2014-02-09 18:00:37 +00:00
|
|
|
var ins = navigator.mozApps.install('http://mdibaiee.github.io/Sketchy/Web/manifest-web.webapp');
|
2014-02-09 16:11:39 +00:00
|
|
|
ins.onsuccess = function() {
|
|
|
|
alert('The app was installed successfuly');
|
|
|
|
}
|
|
|
|
ins.onerror = function() {
|
|
|
|
alert('There was an error installing app')
|
2014-02-09 17:57:42 +00:00
|
|
|
console.log(this.error);
|
2014-02-09 16:11:39 +00:00
|
|
|
}
|
2014-02-09 16:02:07 +00:00
|
|
|
}
|
2014-02-09 15:38:14 +00:00
|
|
|
}
|
2014-02-09 16:02:07 +00:00
|
|
|
request.onerror = function() {
|
|
|
|
alert('An error occured while trying to check for updates');
|
2014-02-16 14:30:45 +00:00
|
|
|
}*/
|
2014-02-09 16:02:07 +00:00
|
|
|
|
|
|
|
|
2014-02-17 20:45:09 +00:00
|
|
|
alert(typeof Components.classes)
|
2014-02-01 18:18:29 +00:00
|
|
|
})
|