Grunt - BugFixes

.gitignore

@@ -1,3 +1,4 @@
 *.swp
 *.swo
 *~
+node_modules

Gruntfile.js

@@ -0,0 +1,127 @@
+var which;
+module.exports = function(grunt) {
+  
+  grunt.initConfig({
+    pkg: grunt.file.readJSON('package.json'),
+    uglify: {
+      main: {
+        files: [
+          {
+            expand: true,
+            cwd: 'Shared/js/',
+            src: '**',
+            dest: 'build/mobile/js/',
+            filter: 'isFile'
+          },
+          {
+            expand: true,
+            cwd: 'Shared/js',
+            src: '**',
+            dest: 'build/web/js',
+            filter: 'isFile'
+          },
+          {
+            expand: true,
+            cwd: 'Mobile/js/',
+            src: '*',
+            dest: 'build/mobile/js',
+            filter: 'isFile'
+          },
+          {
+            expand: true,
+            cwd: 'Web/js/',
+            src: '*',
+            dest: 'build/web/js',
+            filter: 'isFile'
+          }
+        ]
+      }
+    },
+    less: {
+      production: {
+        files: {
+          'build/mobile/css/main.css': 'Shared/css/main.less',
+          'build/web/css/main.css': 'Shared/css/main.less'
+        },
+        compress: true
+      }
+    },
+    copy: {
+      'main files': {
+        files: [
+          {
+            expand: true,
+            cwd: 'Shared',
+            src: 'img',
+            dest: 'build/mobile'
+          },
+          {
+            expand: true,
+            cwd: 'Shared',
+            src: 'img',
+            dest: 'build/web'
+          },
+          {
+            expand: true,
+            cwd: 'Mobile',
+            src: ['index.html', 'manifest.webapp'],
+            dest: 'build/mobile'
+          },
+          {
+            expand: true,
+            cwd: 'Web',
+            src: ['index.html', 'manifest.webapp', 'cache.appcache'],
+            dest: 'build/web'
+          }
+        ]
+      },
+      'css assets': {
+        files: [
+          {
+            expand: true,
+            cwd: 'Shared/css',
+            src: '*/**',
+            dest: 'build/mobile/css'
+          },
+          {
+            expand: true,
+            cwd: 'Shared/css',
+            src: '*/**',
+            dest: 'build/web/css'
+          }
+        ]
+      }
+    },
+
+    watch: {
+      js: {
+        files: ['Shared/js/**', 'Mobile/js/**', 'Web/js/**'],
+        tasks: 'uglify',
+        options: {
+          spawn: false
+        }
+      },
+      less: {
+        files: 'Shared/css/**',
+        tasks: 'less',
+        options: {
+          spawn: false
+        }
+      },
+      copy: {
+        files: 'Shared/**',
+        tasks: 'copy',
+        options: {
+          spawn: false
+        }
+      }
+    }
+  });
+
+  grunt.loadNpmTasks('grunt-contrib-uglify');
+  grunt.loadNpmTasks('grunt-contrib-less');
+  grunt.loadNpmTasks('grunt-contrib-copy');
+  grunt.loadNpmTasks('grunt-contrib-watch');
+  grunt.registerTask('default', ['uglify','copy', 'less'])
+
+}

Mobile/index.html

@@ -253,8 +253,9 @@
     <script src='js/libs/touch.js'></script>
     <script src='js/libs/color-picker-touch.js'></script>
     <script src='js/functions.js'></script>
-    <script src='js/main.js'></script>
-    <script src='js/mobile.js'></script>
+    <script src='js/shared.js'></script>
+    <script src='js/events.js'></script>
+    <script src='js/diff.js'></script>
 
   </body>
   

Mobile/js/diff.js

@@ -0,0 +1,103 @@
+$(document).ready(function() {
+
+  $('*').off('click mousemove mousedown mouseup mouseleave').on('click mousemove mousedown mouseup mouseleave', function(e) {
+    e.preventDefault;
+    return false;
+  })
+
+  $('a[href^="http"]').tap(function(e) {
+    e.preventDefault();
+    var href = $(this).attr('href');
+    var view = new MozActivity({
+      name: 'view',
+      data: {
+        type: 'url',
+        url: href
+      }
+    })
+  })
+
+  $('a[href^="mailto"]').tap(function(e) {
+    e.preventDefault();
+    var mail = /mailto:(.*)/.exec($(this).attr('href'))[1];
+    var mail = new MozActivity({
+      name: 'new',
+      data: {
+        type: 'mail',
+        url: mail
+      }
+    })
+  })
+
+  window.save = function() {
+    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.bg;
+        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' ) {
+      var list = JSON.parse(localStorage.getItem('projects'));
+      var index;
+      if( list && list.some(function(a, i) { if( a.name == save['file name'] ) {index = i; return true} return false }) ) {
+        if( confirm('A sketch with this name already exists. Do you want to overwrite ' + save['file name']) + '?' ) {
+          console.log(index);
+          list[index] = {
+            name: save['file name'],
+            data: data,
+            points: window.points,
+            settings: settings
+          }
+          localStorage.setItem('projects', JSON.stringify(list));
+        }
+      }
+      else
+        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)); 
+      } else {
+        window.open(data, '_blank').focus();
+      }
+
+      c.putImageData(window.points.history[window.points.history.last].data, 0, 0);
+    }
+
+  window.load = function() {
+      var file = JSON.parse(localStorage.getItem('projects')).filter(function(a) { return a.name == load.file })[0];
+      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}];
+        $c.first().css('background', file.settings.bg);
+        window.settings.bg = file.settings.bg;
+      }
+    }
+
+  if( localStorage.getItem('sawTips') != settings.version ) {
+    $('.tour').removeClass('hidden');
+    localStorage.setItem('sawTips', settings.version);
+  }
+
+})

Mobile/js/functions-m.js

@@ -1,239 +0,0 @@
-"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;
-    }
-  }
-}
-

Mobile/js/mobile.js

@@ -1,348 +0,0 @@
-"use strict";
-
-$(document).ready(function() {
-
-// Open External Links in browser
-
-$('*').click(function(e) {
-  e.preventDefault();
-})
-
-$('a[href^="http"]').tap(function(e) {
-  e.preventDefault();
-  var href = $(this).attr('href');
-  var view = new MozActivity({
-    name: 'view',
-    data: {
-      type: 'url',
-      url: href
-    }
-  })
-})
-
-$('a[href^="mailto"]').tap(function(e) {
-  e.preventDefault();
-  var mail = /mailto:(.*)/.exec($(this).attr('href'))[1];
-  var mail = new MozActivity({
-    name: 'new',
-    data: {
-      type: 'mail',
-      url: mail
-    }
-  })
-})
-
-window.save = function() {
-  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.bg;
-      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' ) {
-    var list = JSON.parse(localStorage.getItem('projects'));
-    var index;
-    if( list && list.some(function(a, i) { if( a.name == save['file name'] ) {index = i; return true} return false }) ) {
-      if( confirm('A sketch with this name already exists. Do you want to overwrite ' + save['file name']) + '?' ) {
-        console.log(index);
-        list[index] = {
-          name: save['file name'],
-          data: data,
-          points: window.points,
-          settings: settings
-        }
-        localStorage.setItem('projects', JSON.stringify(list));
-      }
-    }
-    else
-      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)); 
-    } else {
-      window.open(data, '_blank').focus();
-    }
-
-    c.putImageData(window.points.history[window.points.history.last].data, 0, 0);
-  }
-
-window.load = function() {
-    var file = JSON.parse(localStorage.getItem('projects')).filter(function(a) { return a.name == load.file })[0];
-    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}];
-      $c.first().css('background', file.settings.bg);
-      window.settings.bg = file.settings.bg;
-    }
-  }
-
-  if( localStorage.getItem('sawTips') != settings.version ) {
-    $('.tour').removeClass('hidden');
-    localStorage.setItem('sawTips', settings.version);
-  }
-
-  $('.menu').tap(function() {
-    $('#menu').toggleClass('pulled');
-  })
-  $('.save').tap(function() {
-    $('#save').removeClass('hidden');
-  })
-  $('.load').tap(function() {
-    $('#load').removeClass('hidden');
-    $('#load li').remove();
-    var list = JSON.parse(localStorage.getItem('projects'));
-    if( !list || list.length < 1 ) {
-      $('#load ol').append(
-        $('<p>No Sketch found.</p>')
-      );
-      return;
-    }
-    for( var i = 0, len = list.length; i < len; i++ ) {
-      $('#load ol').append(
-        $('<li><label><span>' + list[i].name + '</span></label></li>')
-      );
-    }
-    $confirm.find('li').off('tap').tap(function(e) {
-      $(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
-      $(this).attr('aria-selected', 'true');
-    })
-  })
-  $('#pro').tap(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').tap(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);
-    startPoint(xy.x, xy.y);
-    window.active = true;
-  }).on('touchmove', function(e) {
-    if (!window.active || settings.type == 'line') return;
-    var xy = relative(e.changedTouches[0].pageX, e.changedTouches[0].pageY);
-    drawPoint(xy.x, xy.y);
-  }).on('touchend', function(e) {
-    window.active = false;
-    if( settings.type == 'eraser' ) return;
-
-    if( 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)
-    })
-    window.points.history.last = window.points.history.length-1;
-  }).on('longTap', function(e) {
-    if( points[points.length-1].type == 'line' ) {
-      window.active = false;
-      points[points.length-1].type = '';
-      points[points.length-1].start = undefined;
-      finishLine();
-    }
-  })
-  
-  // Value Selector
-  
-  var $single = $('form[data-type="value-selector"].single');
-
-  $single.find('li').tap(function(e) {
-    $(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(),
-        target = $(this).attr('data-target');
-    window.settings[key] = value;
-
-    $('button[id="set' + key + '"] span').html(value[0].toUpperCase() + value.substr(1));
-    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) {
-    e.preventDefault();
-    $(this).parents('form').addClass('hidden');
-  })
-
-  // Confirm
-
-  var $confirm = $('form[data-type="value-selector"].confirm');
-
-  $confirm.each(function() {
-  
-    $(this).find('li').tap(function(e) {
-      $(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
-      $(this).attr('aria-selected', 'true');
-    })
-    $(this).find('button').last().tap(function(e) {
-      e.preventDefault();
-      var v = $(this).parents('form').attr('id');
-      $(this).parents('form').find('h1').each(function(i) {
-        if( i > 0 ) {
-          var key = $(this).html().toLowerCase();
-          var value = $(this).parent().find('ol:nth-of-type('+i+') li[aria-selected] span').html();
-          if( key !== 'file name' && key !== 'file' ) value = value.toLowerCase();
-          window[v][key] = value;
-        }
-      })
-      $(this).parents('form').addClass('hidden');
-      window[v]();
-    })
-    $(this).find('button').first().tap(function(e) {
-      e.preventDefault();
-      $(this).parents('form').addClass('hidden');
-    })
-  
-  })
-
-  // Value Selector Callers
-  
-  var $btn = $('button[id^="set"]');
-  $btn.each(function() {
-    var target = /set(.*)/.exec($(this).attr('id'))[1];
-    // Exception for Color
-    if( target == 'color' || target == 'bg' ) {
-      return $(this).tap(function() {
-        $('.picker').removeClass('hidden');
-        $('.picker').attr('data-caller', target);
-      })
-    }
-    $(this).tap(function(e) {
-      e.preventDefault();
-      $('form[id="' + target + '"]').removeClass('hidden');
-    })
-  })
-
-  // Seekbar
-
-  var sliderLeft;
-  $('div[role="slider"] button').on('touchstart', function() {
-    $(this).attr('data-moving','true');
-    if( !sliderLeft ) sliderLeft = $('div[role="slider"] button').offset().left;
-  }).on('touchmove', function(e) {
-      if( $(this).attr('data-moving') ) {
-      var x = parseInt(e.changedTouches[0].pageX - sliderLeft - 15);
-      var $c = $('.'+$(this).parents('div[role="slider"]').attr('class'));
-      var progress = $c.find('progress');
-      var max = +progress.attr('max');
-      var min = +progress.attr('min');
-      if( x <= max && x >= min ) {
-        $c.find('button').css('left', x+'%');
-        progress.attr('value', x);
-        var key = $c.attr('class');
-        settings[key] = x;
-        $('#'+ key +' span').html(x);
-      }
-    }
-  }).on('touchend', function() {
-    $(this).removeAttr('data-moving');
-  })
-
-  $('.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() {
-    $(this).parent().addClass('hidden');
-  })
-
-  // Bottom
-
-  $('#clear').tap(function() {
-    c.clearRect(0, 0, width(), height());
-    var h = window.points.history;
-    window.points = [];
-    window.points.history = h;
-    if(window.points.history.last < window.points.history.length-1) {
-      window.points.history.splice(window.points.history.last+1);
-    }
-
-    window.points.history.push({
-      data: c.getImageData(0, 0, width(), height()),
-      points: []
-    })
-    window.points.history.last = window.points.history.length-1;
-  })
-
-  $('#undo').tap(undo);
-  $('#redo').tap(redo);
-
-  $('#about').tap(function() {
-    $('.about').removeClass('hidden');
-  })
-
-});

README.md

@@ -1,14 +1,17 @@
 Sketchy
 =======
 
-Free Sketch / Paint application for Firefox OS with a lot of features.
+Free Sketch / Paint application for Firefox with a lot of features.
 
 Key features:
 * Different types of brushes 
 * Customizable brushes 
 * Colorpicker 
 * Unlimited Undo/Redo 
-* Save your sketch to sdcard 
+* Save your sketch to sdcard / PC
+* Save your sketch as a "Sketchy Project" and edit it later
+* Different shapes ( Circle, Rectangle, Square, Triangle )
+* Fill / Stroke
 
 New features are coming soon! Contact and tell us what feature you would like to see in next version ( you can make an issue ).
 
@@ -18,6 +21,18 @@ Web version: https://mdibaiee.github.io/Sketchy/Web/
 
 Firefox Marketplace: https://marketplace.firefox.com/app/sketchy/
 
+Start
+=====
+
+To start working on:
+
+  git clone https://github.com/mdibaiee/Sketchy
+  cd Sketchy
+  npm install
+  grunt
+
+Sketchy will be built to "build" folder, you can run `grunt watch` to automatically re-run tasks when you modify files.
+
 Changelog
 =========
 

Shared/js/events.js

@@ -1,14 +1,14 @@
 "use strict";
 
 $(window).resize(sizeAndPos);
-
-  $('.menu').click(function() {
+$(document).ready(function() {
+  $('.menu').on('click tap', function() {
     $('#menu').toggleClass('pulled');
   })
-  $('.save').click(function() {
+  $('.save').on('click tap', function() {
     $('#save').removeClass('hidden');
   })
-  $('.load').click(function() {
+  $('.load').on('click tap', function() {
     $('#load').removeClass('hidden');
     $('#load li').remove();
     var list = JSON.parse(localStorage.getItem('projects'));
@@ -24,11 +24,11 @@ $(window).resize(sizeAndPos);
       );
     }
     
-    $confirm.find('li').off('click').click(function(e) {
+    $confirm.find('li').off('click').on('click tap', function(e) {
       $(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
       $(this).attr('aria-selected', 'true');
     })
-    $('#pro').click(function() {
+    $('#pro').on('click tap', function() {
       $('#save ol:nth-of-type(2) li').each(function() {
         if( $(this).find('span').html() !== 'Transparent' ) {
           $(this).addClass('hidden');
@@ -37,11 +37,11 @@ $(window).resize(sizeAndPos);
         else $(this).attr('aria-selected', 'true');
       })
     })
-    $('#exp').click(function() {
+    $('#exp').on('click tap', function() {
       $('#save ol:nth-of-type(2) li').removeClass('hidden');
     })
   })
-  $('#pro').click(function() {
+  $('#pro').on('click tap', function() {
     $('#save ol:nth-of-type(2) li').each(function() {
       if( $(this).find('span').html() !== 'Transparent' ) {
         $(this).addClass('hidden');
@@ -50,20 +50,24 @@ $(window).resize(sizeAndPos);
       else $(this).attr('aria-selected', 'true');
     })
   })
-  $('#exp').click(function() {
+  $('#exp').on('click tap', function() {
     $('#save ol:nth-of-type(2) li').removeClass('hidden');
   })
-  $c.last().on('mousedown', function(e) {
+  $c.last().on('mousedown touchstart', function(e) {
     e.preventDefault();
+    if( e.changedTouches )
+      e = e.changedTouches[0];
     var xy = relative(e.pageX, e.pageY);
     startPoint(xy.x, xy.y);
     window.active = true;
-  }).on('mousemove', function(e) {
+  }).on('mousemove touchmove', function(e) {
     e.preventDefault();
+    if( e.changedTouches )
+      e = e.changedTouches[0];
     if (!window.active || settings.type == 'line') return;
     var xy = relative(e.pageX, e.pageY);
     drawPoint(xy.x, xy.y);
-  }).on('mouseup', function(e) {
+  }).on('mouseup touchend', function(e) {
     e.preventDefault();
     window.active = false;
   
@@ -116,7 +120,7 @@ $(window).resize(sizeAndPos);
   
   var $single = $('form.single');
 
-  $single.find('li').click(function(e) {
+  $single.find('li').on('click tap', function(e) {
     $(this).parent().find('li[aria-selected]').removeAttr('aria-selected');
     $(this).attr('aria-selected', 'true');
     var key = $(this).parents('form').attr('id'),
@@ -142,11 +146,11 @@ $(window).resize(sizeAndPos);
 
   $confirm.each(function() {
   
-    $(this).find('li').click(function(e) {
+    $(this).find('li').on('click 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().on('click tap', function(e) {
       e.preventDefault();
       var v = $(this).parents('form').attr('id');
       $(this).parents('form').find('h1').each(function(i) {
@@ -160,7 +164,7 @@ $(window).resize(sizeAndPos);
       $(this).parents('form').addClass('hidden');
       window[v]();
     })
-    $(this).find('button').first().click(function(e) {
+    $(this).find('button').first().on('click tap', function(e) {
       e.preventDefault();
       $(this).parents('form').addClass('hidden');
     })
@@ -174,12 +178,12 @@ $(window).resize(sizeAndPos);
     var target = /set(.*)/.exec($(this).attr('id'))[1];
     // Exception for Color
     if( target == 'color' || target == 'bg' ) {
-      return $(this).click(function() {
+      return $(this).on('click tap', function() {
         $('.picker').removeClass('hidden');
         $('.picker').attr('data-caller', target);
       })
     }
-    $(this).click(function(e) {
+    $(this).on('click tap', function(e) {
       e.preventDefault();
       $('form[id="' + target + '"]').removeClass('hidden');
     })
@@ -188,11 +192,13 @@ $(window).resize(sizeAndPos);
   // Seekbar
 
   var sliderLeft;
-  $('div[role="slider"] button').on('mousedown', function() {
+  $('div[role="slider"] button').on('mousedown touchstart', function() {
     $(this).attr('data-moving','true');
     if( !sliderLeft ) sliderLeft = $('div[role="slider"] button').offset().left;
-  }).on('mousemove', function(e) {
+  }).on('mousemove touchmove', function(e) {
     if( $(this).attr('data-moving') ) {
+      if( e.changedTouches )
+        e = e.changedTouches[0];
       var x = parseInt(e.pageX - sliderLeft - 15);
       var $c = $('.'+$(this).parents('div[role="slider"]').attr('class'));
       var progress = $c.find('progress');
@@ -206,11 +212,11 @@ $(window).resize(sizeAndPos);
         $('#'+ key +' span').html(x);
       }
     }
-  }).on('mouseup mouseleave', function() {
+  }).on('mouseup mouseleave touchend', function() {
     $(this).removeAttr('data-moving');
   })
 
-  $('.fill, .stroke').click(function() {
+  $('.fill, .stroke').on('click tap', function() {
     var s = $('.'+$(this).attr('class')).find('span');
     if( s.html() == 'Yes' ) {
       s.html('No');
@@ -221,13 +227,13 @@ $(window).resize(sizeAndPos);
     }
   })
   
-  $('.close, .tour button').click(function() {
+  $('.close, .tour button').on('click tap', function() {
     $(this).parent().addClass('hidden');
   })
 
   // Bottom
 
-  $('#clear').click(function() {
+  $('#clear').on('click tap', function() {
     c.clear();
     var h = window.points.history;
     window.points = [];
@@ -243,11 +249,16 @@ $(window).resize(sizeAndPos);
     window.points.history.last = window.points.history.length-1;
   })
 
-  $('#undo').click(undo);
-  $('#redo').click(redo);
+  $('#undo').on('click tap', undo);
+  $('#redo').on('click tap', redo);
 
-  $('#about').click(function() {
+  $('#about').on('click tap', function() {
     $('.about').removeClass('hidden');
   })
 
+  if( window.mobile ) $('*').on('click mousemove mousedown mouseup mouseleave', function() {return false;});
+
+})
+
+
 

Shared/js/shared.js

@@ -1,5 +1,3 @@
-"use strict";
-
 $(document).ready(function() {
   window.c = $('canvas')[0].getContext('2d');
   window.o = $('canvas')[1].getContext('2d');
@@ -40,10 +38,9 @@ $(document).ready(function() {
     }
   })
   $('.color').val('#000000');
-
+  
   if( localStorage.getItem('sawTips') != settings.version ) {
     $('.tour').removeClass('hidden');
     localStorage.setItem('sawTips', settings.version);
   }
-
 })

Web/css/color-picker.less

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

Web/css/fonts.less

@@ -1,16 +0,0 @@
-@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');
-}

Web/css/main.less

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

Web/css/switches.less

@@ -1,94 +0,0 @@
-/* ----------------------------------
- * CHECKBOXES / RADIOS
- * ---------------------------------- */
-
-label.pack-checkbox,
-label.pack-radio,
-label.pack-switch {
-  display: inline-block;
-  vertical-align: middle;
-  width: 5rem;
-  height: 5rem;
-  position: relative;
-  background: none;
-}
-
-label.pack-checkbox input,
-label.pack-radio input,
-label.pack-switch input {
-  margin: 0;
-  opacity: 0;
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-
-label.pack-checkbox input ~ span:after,
-label.pack-radio input ~ span:after {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  margin: -1.1rem 0 0 -1.1rem;
-  width: 2.2rem;
-  height: 2.2rem;
-  pointer-events: none;
-}
-
-label.pack-checkbox input ~ span:after {
-  background: url(switches/images/check/default.png) no-repeat center top / 2.2rem auto;
-}
-
-label.pack-radio input ~ span:after {
-  background: url(switches/images/radio/default.png) no-repeat center top / 2.2rem auto;
-}
-
-label.pack-checkbox input:checked ~ span:after,
-label.pack-radio input:checked ~ span:after,
-label.pack-switch input:checked ~ span:after {
-  background-position: center bottom;
-}
-
-/* 'Dangerous' switches */
-
-label.pack-checkbox.danger input ~ span:after {
-  background-image: url(switches/images/check/danger.png);
-}
-
-label.pack-radio.danger input ~ span:after {
-  background-image: url(switches/images/radio/danger.png);
-}
-
-
-/* ----------------------------------
- * ON/OFF SWITCHES
- * ---------------------------------- */
-
-label.pack-switch input ~ span:after {
-  content: '';
-  position: absolute;
-  right: 0;
-  top: 50%;
-  width: 6rem;
-  margin: -1.4rem 0rem 0rem;
-  height: 2.7rem;
-  pointer-events: none;
-  border-radius: 1.35rem;
-  overflow: hidden;
-  background: #e6e6e6 url(switches/images/switch/background_off.png) no-repeat -3.2rem 0rem / 9.2rem 2.7rem;
-  transition: background 0.2s ease;
-}
-
-/* switch: 'ON' state */
-label.pack-switch input:checked ~ span:after {
-  background: #e6e6e6 url(switches/images/switch/background.png) no-repeat 0rem 0rem / 9.2rem 2.7rem;
-}
-
-/* switch: disabled state */
-label.pack-switch input:disabled ~ span:after {
-  opacity: 0.4;
-}
-
-label.pack-switch input.uninit ~ span:after {
-  transition: none;
-}

Web/css/value_selector.less

@@ -1,204 +0,0 @@
-/* ----------------------------------
- * 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, .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(100% - 5rem);
-  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, .button {
-  width: calc((100% - 1rem) / 2);
-  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, .button:active {
-  border-color: #008aaa;
-  background: #008aaa;
-  color: #333;
-}
-
-/* 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;
-}
-
-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, .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;
-}

Web/img/icons/icon2.svg

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