Added Redo, Undo and Color Select funcionality. Some bugs fixed

guidiego · Aug 23, 2015 · 32f1a6c · 32f1a6c
1 parent cf2a387
commit 32f1a6c
Show file tree

Hide file tree

Showing 7 changed files with 81 additions and 9 deletions.
diff --git a/app/assets/css/master.css b/app/assets/css/master.css
@@ -1,5 +1,9 @@
+body.chrome-annotation-opened{
+  overflow-y: hidden;
+}
+
 #chrome-annotation-write-pad-id {
-  z-index: 9999;
+  z-index: 99990;
   position: fixed;
   top: 0;
   transition: transform 1s ease-in-out;
@@ -12,5 +16,36 @@
 
 #chrome-annotation-write-pad-id.opened > canvas {
   cursor: crosshair;
-  background-color: rgba(103, 128, 159, 0.5);
 }
+
+#chrome-annotation-write-pad-id > nav {
+  box-sizing: border-box;
+  width: 240px;
+  height: 52px;
+  padding: 5px;
+  background-color: rgba(0, 0, 0, 0.5);
+  position: absolute;
+  bottom: 0px;
+}
+
+#chrome-annotation-write-pad-id > nav > button {
+  float: left;
+  min-width: 40px;
+  height: 40px;
+  border: 1px solid #FFF;
+  background: rgba(0, 0, 0, 0.5);
+  margin: 0 5px;
+  text-align: center;
+  color: #FFF;
+  cursor: pointer;
+}
+
+ #chrome-annotation-write-pad-id > nav > input {
+   float: left;
+   min-width: 36px;
+   height: 36px;
+   border: 1px solid #FFF;
+   margin: 0 5px;
+   color: #FFF;
+   cursor: pointer;
+ }
diff --git a/app/manifest.json b/app/manifest.json
@@ -1,7 +1,7 @@
 {
   "manifest_version" : 2,
   "name"             : "ChromeAnnotation",
-  "version"          : "1.0",
+  "version"          : "1.3.1",
 
   "description"      : "Give you the possibility to annotate and print something on the screen",
   "background"       : {

diff --git a/app/scripts/CanvasObject.js b/app/scripts/CanvasObject.js
@@ -1,9 +1,12 @@
 function ChromeAnnotationCanvas() {
   var elem   = document.createElement("div"),
       wrap   = document.createElement("div"),
-      canvas = document.createElement("canvas");
+      canvas = document.createElement("canvas")
+      painel = new ChromeAnnotationPainel();
+
   wrap.id = "chrome-annotation-write-pad-id";
   wrap.appendChild(canvas);
+  wrap.appendChild(painel.get());
   elem.appendChild(wrap);
 
   this.get = function() {

diff --git a/app/scripts/PainelObject.js b/app/scripts/PainelObject.js
@@ -1,3 +1,30 @@
 function ChromeAnnotationPainel() {
+  var nav      = document.createElement("nav"),
+      btnColor = document.createElement("button"),
+      btnUndo  = document.createElement("button"),
+      btnDo    = document.createElement("button"),
+      btnPrint = document.createElement("button"),
+      colorPiker = document.createElement("input");
 
-};
+
+
+  btnUndo.innerHTML  = "UNDO";
+  btnDo.innerHTML    = "DO";
+  btnPrint.innerHTML = "PRINT";
+
+  colorPiker.type = "color";
+  colorPiker.id   = "chrome-annotation-painel-color-button";
+  btnDo.id        = "chrome-annotation-painel-do-button";
+  btnUndo.id      = "chrome-annotation-painel-undo-button";
+  btnPrint.id     = "chrome-annotation-painel-print-button";
+
+  nav.appendChild(colorPiker);
+  nav.appendChild(btnDo);
+  nav.appendChild(btnUndo);
+  nav.appendChild(btnPrint);
+
+
+  this.get = function() {
+    return nav;
+  }
+}
diff --git a/app/scripts/_ChromeEvents.js b/app/scripts/_ChromeEvents.js
@@ -1,9 +1,13 @@
 chrome.browserAction.onClicked.addListener(function(tab){
   var canvas   = new ChromeAnnotationCanvas(),
       commands = [
-        'if(!document.getElementById("chrome-annotation-write-pad-id")) {body.innerHTML += \'' + canvas.get() + '\'',
-        'var sketchpad = new Sketchpad({element: document.querySelectorAll("#chrome-annotation-write-pad-id canvas")[0],width: window.innerWidth,height: window.innerHeight})}',
-        'document.getElementById("chrome-annotation-write-pad-id").classList.toggle("opened")'
+        'if(!document.getElementById("chrome-annotation-write-pad-id")) {document.body.innerHTML += \'' + canvas.get() + '\'',
+        'window.sketchpad = new Sketchpad({element: document.querySelectorAll("#chrome-annotation-write-pad-id canvas")[0],width: window.innerWidth,height: window.innerHeight})}',
+        'document.getElementById("chrome-annotation-write-pad-id").classList.toggle("opened")',
+        'document.body.classList.toggle("chrome-annotation-opened")',
+        'document.getElementById("chrome-annotation-painel-do-button").addEventListener("click", function () {window.sketchpad.redo()})',
+        'document.getElementById("chrome-annotation-painel-undo-button").addEventListener("click", function () {window.sketchpad.undo()})',
+        'document.getElementById("chrome-annotation-painel-color-button").addEventListener("change", function () {window.sketchpad.color = document.getElementById("chrome-annotation-painel-color-button").value})'
       ];
 
   chrome.tabs.executeScript({

diff --git a/app/scripts/_NavEvents.js b/app/scripts/_NavEvents.js
@@ -0,0 +1,3 @@
+document.getElementById("chrome-annotation-painel-do-button").addEventListener("click", function () {
+  alert("ok")
+});
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "chrome-annotation",
-  "version": "1.0.0",
+  "version": "1.3.1",
   "description": "Give you the possibility to annotate and print something on the screen",
   "main": "package.json",
   "scripts": {