From 32f1a6c49d32b8c8956e23e34ff6248bee650c52 Mon Sep 17 00:00:00 2001 From: guidiego Date: Sat, 22 Aug 2015 22:59:31 -0300 Subject: [PATCH] Added Redo, Undo and Color Select funcionality. Some bugs fixed --- app/assets/css/master.css | 39 ++++++++++++++++++++++++++++++++++-- app/manifest.json | 2 +- app/scripts/CanvasObject.js | 5 ++++- app/scripts/PainelObject.js | 29 ++++++++++++++++++++++++++- app/scripts/_ChromeEvents.js | 10 ++++++--- app/scripts/_NavEvents.js | 3 +++ package.json | 2 +- 7 files changed, 81 insertions(+), 9 deletions(-) create mode 100644 app/scripts/_NavEvents.js diff --git a/app/assets/css/master.css b/app/assets/css/master.css index 986fad0..0b6d153 100644 --- 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 index d338313..51c6101 100644 --- 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 index 99615d7..f510da8 100644 --- 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 index 1dfcdbe..5a7178e 100644 --- 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 index 0fed8a4..7f30cbb 100644 --- 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 new file mode 100644 index 0000000..6473fa4 --- /dev/null +++ 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 index 8013a51..8464e54 100644 --- 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": {