From bacd9ffde13af428fcca0daa43c08100d9cda039 Mon Sep 17 00:00:00 2001 From: Nicolas Delsaux Date: Thu, 30 Jan 2020 15:48:27 +0100 Subject: [PATCH 1/8] Let's start small by creating a function that allow me to easily create my disks ... --- notes-pointer.js | 47 +++++++++++++++++++++++++++++++++-------------- 1 file changed, 33 insertions(+), 14 deletions(-) diff --git a/notes-pointer.js b/notes-pointer.js index c133b35..01c89b0 100644 --- a/notes-pointer.js +++ b/notes-pointer.js @@ -13,6 +13,7 @@ var RevealNotes = (function() { var config = Reveal.getConfig(); var options = config.notes_pointer || {}; var pointer_options = options.pointer || {}; + var spotlight_options = options.spotlight || {}; var notes_options = options.notes || {}; var notesPopup = null; @@ -177,20 +178,27 @@ var RevealNotes = (function() { var callbackSet = false; var body = document.querySelector('body'); var slides = document.querySelector('.slides'); + function createDisk(dimension, color) { + var disk = document.createElement('div'); + disk.style.position = 'absolute'; + disk.style.width = dimension + 'px'; + disk.style.height = dimension + 'px'; + disk.style.marginLeft = '-' + Math.round(dimension / 2) + 'px'; + disk.style.marginTop = '-' + Math.round(dimension / 2) + 'px'; + disk.style.borderRadius = '50%'; + disk.style.zIndex = 20; + disk.style.display = 'none'; + slides.appendChild(disk); // a *slides* element, so position scales + return disk; + } + function createPointer() { + var pointer = createDisk(pointer_options.size || 15); + pointer.dataset.remote="togglePointer" + pointer.style.backgroundColor = pointer_options.color || 'rgba(255, 0, 0, 0.8)'; + return pointer; + } - var s = pointer_options.size || 15; - - var pointer = document.createElement('div'); - pointer.style.position = 'absolute'; - pointer.style.width = s + 'px'; - pointer.style.height = s + 'px'; - pointer.style.marginLeft = '-' + Math.round(s / 2) + 'px'; - pointer.style.marginTop = '-' + Math.round(s / 2) + 'px'; - pointer.style.backgroundColor = pointer_options.color || 'rgba(255, 0, 0, 0.8)'; - pointer.style.borderRadius = '50%'; - pointer.style.zIndex = 20; - pointer.style.display = 'none'; - slides.appendChild(pointer); // a *slides* element, so position scales + var pointer = createPointer(); function trackMouse(e) { // compute x, y positions relative to slides element in unscaled coords @@ -278,10 +286,21 @@ var RevealNotes = (function() { } } + function toggleSpotlight() { + if (isPointing) { + pointerOff(); + } else { + pointerOn(); + } + } + addKeyBinding(pointer_options.key, pointer_options.keyCode, 'A', 'Toggle pointer', togglePointer); - return {point: point, togglePointer: togglePointer}; + addKeyBinding(spotlight_options.key, spotlight_options.keyCode, 'Z', + 'Toggle spotlight', toggleSpotlight); + + return {point: point, togglePointer: togglePointer, toggleSpotlight: toggleSpotlight}; })(); // add a Reveal.point API function, so postMessage can handle it From ffb81389178ae8359a5eb8ae18518a1066b4f02a Mon Sep 17 00:00:00 2001 From: Nicolas Delsaux Date: Fri, 7 Feb 2020 08:10:46 +0100 Subject: [PATCH 2/8] Created the array of possible pointers --- notes-pointer.js | 33 +++++++++++++++++++++++++++------ 1 file changed, 27 insertions(+), 6 deletions(-) diff --git a/notes-pointer.js b/notes-pointer.js index 01c89b0..981d2b8 100644 --- a/notes-pointer.js +++ b/notes-pointer.js @@ -191,14 +191,35 @@ var RevealNotes = (function() { slides.appendChild(disk); // a *slides* element, so position scales return disk; } - function createPointer() { + /** + * Creates the pointer disk object + * @param {string} id id of that pointer + */ + function createPointer(id) { var pointer = createDisk(pointer_options.size || 15); pointer.dataset.remote="togglePointer" + pointer.dataset.id = id pointer.style.backgroundColor = pointer_options.color || 'rgba(255, 0, 0, 0.8)'; return pointer; } - var pointer = createPointer(); + /** + * Creates the spotlight disk object + * @param {string} id id of that spotlight + */ + function createSpotlight(id) { + var pointer = createDisk(pointer_options.size || 15); + pointer.dataset.remote="toggleSpotlight" + pointer.dataset.id = id + pointer.style.backgroundColor = pointer_options.color || 'rgba(0, 0, 255, 0.8)'; + return pointer; + } + + /** The usable pointers */ + var pointers ={ + pointer: createPointer("pointer"), + spotlight: createSpotlight("spotlight") + }; function trackMouse(e) { // compute x, y positions relative to slides element in unscaled coords @@ -225,8 +246,8 @@ var RevealNotes = (function() { } // x, y are in *unscaled* coordinates - pointer.style.left = x + 'px'; - pointer.style.top = y + 'px'; + pointers['pointer'].style.left = x + 'px'; + pointers['pointer'].style.top = y + 'px'; } function postPointer(x, y, state) { @@ -250,11 +271,11 @@ var RevealNotes = (function() { } function showPointer() { - pointer.style.display = 'block'; + pointers['pointer'].style.display = 'block'; } function hidePointer() { - pointer.style.display = 'none'; + pointers['pointer'].style.display = 'none'; } function pointerOn() { From e8321e86dd36cbc284a2da1dfc01c288afe1f7aa Mon Sep 17 00:00:00 2001 From: Nicolas Delsaux Date: Fri, 7 Feb 2020 11:00:07 +0100 Subject: [PATCH 3/8] Prototyped the fuck out of RevealPointer function namespace. This work great, as long as there is only one type of pointer. --- notes-pointer.js | 239 ++++++++++++++++++++++++++--------------------- 1 file changed, 134 insertions(+), 105 deletions(-) diff --git a/notes-pointer.js b/notes-pointer.js index 981d2b8..7e86f66 100644 --- a/notes-pointer.js +++ b/notes-pointer.js @@ -10,10 +10,22 @@ * to the notes window */ var RevealNotes = (function() { + /** + * Default values for options (and also hash of available pointers) + */ + var DEFAULT_OPTIONS = { + 'pointer': { + color: 'rgba(255, 0, 0, 0.8)', + key: 'A' +/* }, + 'spotlight': { + color: 'rgba(0, 0, 255, 0.8)', + key: 'Z' + */ } + } + var config = Reveal.getConfig(); var options = config.notes_pointer || {}; - var pointer_options = options.pointer || {}; - var spotlight_options = options.spotlight || {}; var notes_options = options.notes || {}; var notesPopup = null; @@ -174,11 +186,32 @@ var RevealNotes = (function() { var RevealPointer = (function() { - var isPointing = false; - var callbackSet = false; var body = document.querySelector('body'); var slides = document.querySelector('.slides'); - function createDisk(dimension, color) { + + var Pointer = function(id, options) { + this.isPointing = false; + this.callbackSet = false; + /** config defined by user, which contains all useful informations */ + this.options = options; + /** id given by config index, allowing later lookup */ + this.id = id + this.pointer = this.createPointer(id, options) + addKeyBinding(options.key, options.keyCode, options.key, + 'Toggle '+id, + // Seems like modern JS magic ! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind + this.toggle.bind(this)); + // Exposed functions ids + this.exposedPoint = 'point'+id + this.exposedToggle = 'toggle'+id + // And made a binding for tracker to keep context + this.tracker = this.trackMouse.bind(this) + } + + /** + * Base disk creation function + */ + Pointer.prototype.createDisk = function(dimension, color) { var disk = document.createElement('div'); disk.style.position = 'absolute'; disk.style.width = dimension + 'px'; @@ -191,141 +224,137 @@ var RevealNotes = (function() { slides.appendChild(disk); // a *slides* element, so position scales return disk; } - /** - * Creates the pointer disk object - * @param {string} id id of that pointer + /** + * Creates the pointer with the correct configuration and id */ - function createPointer(id) { - var pointer = createDisk(pointer_options.size || 15); - pointer.dataset.remote="togglePointer" + Pointer.prototype.createPointer = function(id, options) { + var pointer = this.createDisk(options.size || 15); pointer.dataset.id = id - pointer.style.backgroundColor = pointer_options.color || 'rgba(255, 0, 0, 0.8)'; + pointer.style.backgroundColor = options.color; return pointer; } - /** - * Creates the spotlight disk object - * @param {string} id id of that spotlight - */ - function createSpotlight(id) { - var pointer = createDisk(pointer_options.size || 15); - pointer.dataset.remote="toggleSpotlight" - pointer.dataset.id = id - pointer.style.backgroundColor = pointer_options.color || 'rgba(0, 0, 255, 0.8)'; - return pointer; + Pointer.prototype.showPointer = function () { + this.pointer.style.display = 'block'; } - /** The usable pointers */ - var pointers ={ - pointer: createPointer("pointer"), - spotlight: createSpotlight("spotlight") - }; - - function trackMouse(e) { - // compute x, y positions relative to slides element in unscaled coords - var slidesRect = slides.getBoundingClientRect(); - var slides_left = slidesRect.left, slides_top = slidesRect.top; - if (slides.style.zoom) { // zoom is weird. - slides_left *= slides.style.zoom; - slides_top *= slides.style.zoom; + Pointer.prototype.hidePointer = function() { + this.pointer.style.display = 'none'; + } + + Pointer.prototype.pointerOn = function() { + this.showPointer(); + body.style.cursor = 'none'; + if( !this.callbackSet ) { + document.addEventListener('mousemove', this.tracker); + this.callbackSet = true; } + this.isPointing = true; + } - var scale = Reveal.getScale(); - var offsetX = (e.clientX - slides_left) / scale; - var offsetY = (e.clientY - slides_top) / scale; + Pointer.prototype.pointerOff = function() { + this.hidePointer(); + body.style.cursor = 'auto'; + if( this.callbackSet ) { + document.removeEventListener('mousemove', this.tracker); + this.callbackSet = false; + } + this.isPointing = false; + this.postPointer(0, 0, false); + } - point(offsetX, offsetY, true); - postPointer(offsetX, offsetY, true); + Pointer.prototype.toggle = function(e) { + if (this.isPointing) { + this.pointerOff(); + } else { + this.pointerOn(); + } } - function point(x, y, state) { + Pointer.prototype.trackMouse = function(e) { + // compute x, y positions relative to slides element in unscaled coords + var slidesRect = slides.getBoundingClientRect(); + var slides_left = slidesRect.left, slides_top = slidesRect.top; + if (slides.style.zoom) { // zoom is weird. + slides_left *= slides.style.zoom; + slides_top *= slides.style.zoom; + } + + var scale = Reveal.getScale(); + var offsetX = (e.clientX - slides_left) / scale; + var offsetY = (e.clientY - slides_top) / scale; + + this.point(offsetX, offsetY, true); + this.postPointer(offsetX, offsetY, true); + } + + Pointer.prototype.point = function(x, y, state) { if (state === true) { - showPointer(); + this.showPointer(); } else if (state === false) { - hidePointer(); + this.hidePointer(); } // x, y are in *unscaled* coordinates - pointers['pointer'].style.left = x + 'px'; - pointers['pointer'].style.top = y + 'px'; + this.pointer.style.left = x + 'px'; + this.pointer.style.top = y + 'px'; } - function postPointer(x, y, state) { + Pointer.prototype.postPointer = function(x, y, state) { + var message = { + type: 'point', +// type: this.exposedPoint, + x: x, + y: y, + state: state + } + var receiver = null if (notesPopup) { - notesPopup.postMessage(JSON.stringify({ - namespace: 'reveal-notes', - type: 'point', - x: x, - y: y, - state: state - }), '*'); + message = Object.assign(message, {namespace: 'reveal-notes'}) + receiver = notesPopup } else if (Reveal.getConfig().postMessageEvents && window.parent !== window.self) { - window.parent.postMessage(JSON.stringify({ - namespace: 'reveal', - type: 'point', - x: x, - y: y, - state: state - }), '*'); + message = Object.assign(message, {namespace: 'reveal'}) + receiver = window.parent; } + var stringified = JSON.stringify(message) + console.info("posting message", message, "in string", stringified) + receiver.postMessage(stringified, '*'); } - function showPointer() { - pointers['pointer'].style.display = 'block'; - } - - function hidePointer() { - pointers['pointer'].style.display = 'none'; - } - - function pointerOn() { - showPointer(); - body.style.cursor = 'none'; - if( !callbackSet ) { - document.addEventListener('mousemove', trackMouse); - callbackSet = true; - } - isPointing = true; + Pointer.prototype.getExposedFunctions = function() { + var returned = {} +// returned[this.exposedPoint] =this.point.bind(this) + returned['point'] = this.point.bind(this) +// returned[this.exposedToggle] = this.toggle.bind(this) + returned['toggle'] = this.toggle.bind(this) + return returned } - function pointerOff() { - hidePointer(); - body.style.cursor = 'auto'; - if( callbackSet ) { - document.removeEventListener('mousemove', trackMouse); - callbackSet = false; - } - isPointing = false; - postPointer(0, 0, false); - } + /** The usable pointers */ + var pointers ={}; - function togglePointer() { - if (isPointing) { - pointerOff(); - } else { - pointerOn(); - } - } + /* The exposed functions, usable by Reveal API */ + var exported = {} - function toggleSpotlight() { - if (isPointing) { - pointerOff(); - } else { - pointerOn(); + // Fill the pointers with the ones read from config + for(var optionName in DEFAULT_OPTIONS) { + var optionsFor = DEFAULT_OPTIONS[optionName] + if(options.hasOwnProperty(optionName)) { + optionsFor = Object.assign({}, optionsFor, options[optionName]) } + // Declaring the pointer does everything : registering keybindings and functions ! + pointers[optionName] = new Pointer(optionName, optionsFor) + exported = Object.assign(exported, pointers[optionName].getExposedFunctions()) } - addKeyBinding(pointer_options.key, pointer_options.keyCode, 'A', - 'Toggle pointer', togglePointer); - addKeyBinding(spotlight_options.key, spotlight_options.keyCode, 'Z', - 'Toggle spotlight', toggleSpotlight); - - return {point: point, togglePointer: togglePointer, toggleSpotlight: toggleSpotlight}; + return exported; })(); // add a Reveal.point API function, so postMessage can handle it - Reveal.point = RevealPointer.point; + for(var functionName in RevealPointer) { + Reveal[functionName] = RevealPointer[functionName]; + } // patch in Reveal.getSlidesAttributes, in dev branch but not in 3.7.0 if( !Reveal.getSlidesAttributes ) { From f0ccf5a236e6a570c5000322e1c6683b164d9c4d Mon Sep 17 00:00:00 2001 From: Nicolas Delsaux Date: Fri, 7 Feb 2020 11:02:00 +0100 Subject: [PATCH 4/8] Changing those lines produce no more events, but no errors ! Debugging the events between the two windows is of little help, as it seems like event is "transformed" --- notes-pointer.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/notes-pointer.js b/notes-pointer.js index 7e86f66..7e0eb0c 100644 --- a/notes-pointer.js +++ b/notes-pointer.js @@ -17,11 +17,11 @@ var RevealNotes = (function() { 'pointer': { color: 'rgba(255, 0, 0, 0.8)', key: 'A' -/* }, + }, 'spotlight': { color: 'rgba(0, 0, 255, 0.8)', key: 'Z' - */ } + } } var config = Reveal.getConfig(); @@ -302,8 +302,8 @@ var RevealNotes = (function() { Pointer.prototype.postPointer = function(x, y, state) { var message = { - type: 'point', -// type: this.exposedPoint, +// type: 'point', + type: this.exposedPoint, x: x, y: y, state: state @@ -323,10 +323,10 @@ var RevealNotes = (function() { Pointer.prototype.getExposedFunctions = function() { var returned = {} -// returned[this.exposedPoint] =this.point.bind(this) - returned['point'] = this.point.bind(this) -// returned[this.exposedToggle] = this.toggle.bind(this) - returned['toggle'] = this.toggle.bind(this) + returned[this.exposedPoint] =this.point.bind(this) +// returned['point'] = this.point.bind(this) + returned[this.exposedToggle] = this.toggle.bind(this) +// returned['toggle'] = this.toggle.bind(this) return returned } From fc53a8728cfe3c3391d07cf8372c05a6149c9bf5 Mon Sep 17 00:00:00 2001 From: Nicolas Delsaux Date: Thu, 20 Feb 2020 17:30:30 +0100 Subject: [PATCH 5/8] Fixed some bugs and added support for spotlight (obviously this spotlight can be improved) --- notes-pointer.js | 97 +++++++++++++++++++++++++++++------------------- 1 file changed, 58 insertions(+), 39 deletions(-) diff --git a/notes-pointer.js b/notes-pointer.js index 7e0eb0c..fd47eee 100644 --- a/notes-pointer.js +++ b/notes-pointer.js @@ -10,17 +10,56 @@ * to the notes window */ var RevealNotes = (function() { + /** * Default values for options (and also hash of available pointers) */ var DEFAULT_OPTIONS = { 'pointer': { color: 'rgba(255, 0, 0, 0.8)', - key: 'A' + key: 'A', + 'createPointer': function(slides, id, options) { + var dimension = 20 + var disk = document.createElement('div'); + disk.style.position = 'absolute'; + disk.style.width = dimension + 'px'; + disk.style.height = dimension + 'px'; + disk.style.marginLeft = '-' + Math.round(dimension / 2) + 'px'; + disk.style.marginTop = '-' + Math.round(dimension / 2) + 'px'; + disk.style.borderRadius = '50%'; + disk.style.zIndex = 20; + disk.style.display = 'none'; + disk.dataset.id = id + disk.style.backgroundColor = options.color; + return disk; + }, + 'applyMove': function(disk, x, y) { + disk.style.left = x + 'px'; + disk.style.top = y + 'px'; + } }, 'spotlight': { - color: 'rgba(0, 0, 255, 0.8)', - key: 'Z' + key: 'Z', + 'createPointer': function(slides, id, options) { + var dimension = 100 + var disk = document.createElement('div'); + disk.style.position = 'absolute'; + disk.style.position = 'fixed'; + disk.style.width = '100%'; + disk.style.height = '100%'; + disk.style.left= '0'; + disk.style.top= '0'; + disk.style.zIndex = 20; + disk.style.display = 'none'; + disk.style['background'] = "radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%) no-repeat" + disk.dataset.id = id + return disk; + }, + 'applyMove': function(disk, x, y) { + disk.style['background'] = 'radial-gradient(circle at '+x+'px '+y+'px, '+ + 'rgba(255,255,255,0) 0%, '+ + 'rgba(0,0,0,1) 100%) no-repeat' + } } } @@ -196,7 +235,9 @@ var RevealNotes = (function() { this.options = options; /** id given by config index, allowing later lookup */ this.id = id - this.pointer = this.createPointer(id, options) + this.pointer = options.createPointer(slides, id, options) + this.applyMove = options.applyMove + slides.appendChild(this.pointer); addKeyBinding(options.key, options.keyCode, options.key, 'Toggle '+id, // Seems like modern JS magic ! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind @@ -208,32 +249,6 @@ var RevealNotes = (function() { this.tracker = this.trackMouse.bind(this) } - /** - * Base disk creation function - */ - Pointer.prototype.createDisk = function(dimension, color) { - var disk = document.createElement('div'); - disk.style.position = 'absolute'; - disk.style.width = dimension + 'px'; - disk.style.height = dimension + 'px'; - disk.style.marginLeft = '-' + Math.round(dimension / 2) + 'px'; - disk.style.marginTop = '-' + Math.round(dimension / 2) + 'px'; - disk.style.borderRadius = '50%'; - disk.style.zIndex = 20; - disk.style.display = 'none'; - slides.appendChild(disk); // a *slides* element, so position scales - return disk; - } - /** - * Creates the pointer with the correct configuration and id - */ - Pointer.prototype.createPointer = function(id, options) { - var pointer = this.createDisk(options.size || 15); - pointer.dataset.id = id - pointer.style.backgroundColor = options.color; - return pointer; - } - Pointer.prototype.showPointer = function () { this.pointer.style.display = 'block'; } @@ -260,7 +275,7 @@ var RevealNotes = (function() { this.callbackSet = false; } this.isPointing = false; - this.postPointer(0, 0, false); + this.postPointer(0, 0, {"pointer":this.id, "active":false}); } Pointer.prototype.toggle = function(e) { @@ -284,26 +299,25 @@ var RevealNotes = (function() { var offsetX = (e.clientX - slides_left) / scale; var offsetY = (e.clientY - slides_top) / scale; - this.point(offsetX, offsetY, true); - this.postPointer(offsetX, offsetY, true); + state = {"pointer":this.id, "active":true} + this.point(offsetX, offsetY, state); + this.postPointer(offsetX, offsetY, state); } Pointer.prototype.point = function(x, y, state) { - if (state === true) { + if (state.active||false === true) { this.showPointer(); - } else if (state === false) { + } else { this.hidePointer(); } // x, y are in *unscaled* coordinates - this.pointer.style.left = x + 'px'; - this.pointer.style.top = y + 'px'; + this.applyMove(this.pointer, x, y) } Pointer.prototype.postPointer = function(x, y, state) { var message = { -// type: 'point', - type: this.exposedPoint, + type: 'point', x: x, y: y, state: state @@ -354,6 +368,11 @@ var RevealNotes = (function() { // add a Reveal.point API function, so postMessage can handle it for(var functionName in RevealPointer) { Reveal[functionName] = RevealPointer[functionName]; + console.info("adding function "+functionName) + } + + Reveal["point"] = function(x, y, state) { + RevealPointer["point"+state.pointer](x, y, state) } // patch in Reveal.getSlidesAttributes, in dev branch but not in 3.7.0 From bd467b71384353f441ca625e59b35abe2e7feb91 Mon Sep 17 00:00:00 2001 From: Nicolas Delsaux Date: Fri, 21 Feb 2020 16:40:39 +0100 Subject: [PATCH 6/8] This is the best default color for example (but obviously it must be changed to meet your reveal theme) --- notes-pointer.js | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/notes-pointer.js b/notes-pointer.js index fd47eee..381e378 100644 --- a/notes-pointer.js +++ b/notes-pointer.js @@ -33,12 +33,15 @@ var RevealNotes = (function() { disk.style.backgroundColor = options.color; return disk; }, - 'applyMove': function(disk, x, y) { + 'applyMove': function(disk, options, x, y) { disk.style.left = x + 'px'; disk.style.top = y + 'px'; } }, 'spotlight': { + borderColor: 'rgba(34,34,34, 1)', + edgeColor: 'rgba(34,34,34, 0.8)', + centerColor: 'rgba(0, 255, 0, 0)', key: 'Z', 'createPointer': function(slides, id, options) { var dimension = 100 @@ -51,14 +54,18 @@ var RevealNotes = (function() { disk.style.top= '0'; disk.style.zIndex = 20; disk.style.display = 'none'; - disk.style['background'] = "radial-gradient(circle, rgba(255,255,255,0) 0%, rgba(0,0,0,1) 100%) no-repeat" + disk.style['background'] = 'radial-gradient(circle, '+ + options.centerColor+' 0%, '+ + options.edgeColor+ ' 100px,'+ + options.borderColor+' 100%)' disk.dataset.id = id return disk; }, - 'applyMove': function(disk, x, y) { + 'applyMove': function(disk, options, x, y) { disk.style['background'] = 'radial-gradient(circle at '+x+'px '+y+'px, '+ - 'rgba(255,255,255,0) 0%, '+ - 'rgba(0,0,0,1) 100%) no-repeat' + options.centerColor+' 0%, '+ + options.edgeColor+ ' 100px,'+ + options.borderColor+' 100%)' } } } @@ -312,7 +319,7 @@ var RevealNotes = (function() { } // x, y are in *unscaled* coordinates - this.applyMove(this.pointer, x, y) + this.applyMove(this.pointer, this.options, x, y) } Pointer.prototype.postPointer = function(x, y, state) { From 89f798abc7d9a1591d0643ef0cc21258d214678d Mon Sep 17 00:00:00 2001 From: Nicolas Delsaux Date: Fri, 21 Feb 2020 17:50:55 +0100 Subject: [PATCH 7/8] Last elements of a goo PR : a good example and some documentation --- README.md | 7 +++++++ example.html | 5 ++++- notes-pointer.js | 9 +++++---- 3 files changed, 16 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 8369eb1..a124b33 100644 --- a/README.md +++ b/README.md @@ -13,6 +13,13 @@ Reveal.initialize({ color: 'rgba(255, 0, 0, 0.8)', // something valid for css background-color key: 'A' }, + spotlight: { + borderColor: 'rgba(34,34,34, 1)', // color at screen border (use your background color with full opacity) + edgeColor: 'rgba(34,34,34, 0.8)', // color at spotlight edge (use your background color with a nice alpha) + centerColor: 'rgba(0, 255, 0, 0)', // color at spotlight center (this one should be transparent) + key: 'Z', + size: 100, // size of spotlight + } notes: { key: 'S' } diff --git a/example.html b/example.html index 17ca2b4..18a503c 100644 --- a/example.html +++ b/example.html @@ -29,7 +29,10 @@ Reveal.initialize({ notes_pointer: { pointer: { - size: 20 +// size: 20 + }, + spotlight: { +// size: 50 } }, dependencies: [ diff --git a/notes-pointer.js b/notes-pointer.js index 381e378..5a9d199 100644 --- a/notes-pointer.js +++ b/notes-pointer.js @@ -16,10 +16,11 @@ var RevealNotes = (function() { */ var DEFAULT_OPTIONS = { 'pointer': { + size: 20, color: 'rgba(255, 0, 0, 0.8)', key: 'A', 'createPointer': function(slides, id, options) { - var dimension = 20 + var dimension = options.size var disk = document.createElement('div'); disk.style.position = 'absolute'; disk.style.width = dimension + 'px'; @@ -43,8 +44,8 @@ var RevealNotes = (function() { edgeColor: 'rgba(34,34,34, 0.8)', centerColor: 'rgba(0, 255, 0, 0)', key: 'Z', + size: 100, 'createPointer': function(slides, id, options) { - var dimension = 100 var disk = document.createElement('div'); disk.style.position = 'absolute'; disk.style.position = 'fixed'; @@ -56,7 +57,7 @@ var RevealNotes = (function() { disk.style.display = 'none'; disk.style['background'] = 'radial-gradient(circle, '+ options.centerColor+' 0%, '+ - options.edgeColor+ ' 100px,'+ + options.edgeColor+ ' '+options.size+'px,'+ options.borderColor+' 100%)' disk.dataset.id = id return disk; @@ -64,7 +65,7 @@ var RevealNotes = (function() { 'applyMove': function(disk, options, x, y) { disk.style['background'] = 'radial-gradient(circle at '+x+'px '+y+'px, '+ options.centerColor+' 0%, '+ - options.edgeColor+ ' 100px,'+ + options.edgeColor+ ' '+options.size+'px,'+ options.borderColor+' 100%)' } } From 793ba4bee29dcb713c8b6df4c8f5fca298242acc Mon Sep 17 00:00:00 2001 From: Nicolas Delsaux Date: Fri, 21 Feb 2020 18:23:37 +0100 Subject: [PATCH 8/8] Ending lines "the good way" --- notes-pointer.js | 66 ++++++++++++++++++++++-------------------------- 1 file changed, 30 insertions(+), 36 deletions(-) diff --git a/notes-pointer.js b/notes-pointer.js index 5a9d199..7aa0dae 100644 --- a/notes-pointer.js +++ b/notes-pointer.js @@ -20,7 +20,7 @@ var RevealNotes = (function() { color: 'rgba(255, 0, 0, 0.8)', key: 'A', 'createPointer': function(slides, id, options) { - var dimension = options.size + var dimension = options.size; var disk = document.createElement('div'); disk.style.position = 'absolute'; disk.style.width = dimension + 'px'; @@ -30,7 +30,7 @@ var RevealNotes = (function() { disk.style.borderRadius = '50%'; disk.style.zIndex = 20; disk.style.display = 'none'; - disk.dataset.id = id + disk.dataset.id = id; disk.style.backgroundColor = options.color; return disk; }, @@ -58,15 +58,15 @@ var RevealNotes = (function() { disk.style['background'] = 'radial-gradient(circle, '+ options.centerColor+' 0%, '+ options.edgeColor+ ' '+options.size+'px,'+ - options.borderColor+' 100%)' - disk.dataset.id = id + options.borderColor+' 100%)'; + disk.dataset.id = id; return disk; }, 'applyMove': function(disk, options, x, y) { disk.style['background'] = 'radial-gradient(circle at '+x+'px '+y+'px, '+ options.centerColor+' 0%, '+ options.edgeColor+ ' '+options.size+'px,'+ - options.borderColor+' 100%)' + options.borderColor+' 100%)'; } } } @@ -203,7 +203,6 @@ var RevealNotes = (function() { } notesPopup.postMessage( JSON.stringify( messageData ), '*' ); - } @@ -224,11 +223,9 @@ var RevealNotes = (function() { // Post the initial state post(); - } connect(); - } @@ -242,19 +239,19 @@ var RevealNotes = (function() { /** config defined by user, which contains all useful informations */ this.options = options; /** id given by config index, allowing later lookup */ - this.id = id - this.pointer = options.createPointer(slides, id, options) - this.applyMove = options.applyMove + this.id = id; + this.pointer = options.createPointer(slides, id, options); + this.applyMove = options.applyMove; slides.appendChild(this.pointer); addKeyBinding(options.key, options.keyCode, options.key, 'Toggle '+id, // Seems like modern JS magic ! https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind this.toggle.bind(this)); // Exposed functions ids - this.exposedPoint = 'point'+id - this.exposedToggle = 'toggle'+id + this.exposedPoint = 'point'+id; + this.exposedToggle = 'toggle'+id; // And made a binding for tracker to keep context - this.tracker = this.trackMouse.bind(this) + this.tracker = this.trackMouse.bind(this); } Pointer.prototype.showPointer = function () { @@ -320,7 +317,8 @@ var RevealNotes = (function() { } // x, y are in *unscaled* coordinates - this.applyMove(this.pointer, this.options, x, y) + // Movin depends upon the type of pointer used + this.applyMove(this.pointer, this.options, x, y); } Pointer.prototype.postPointer = function(x, y, state) { @@ -330,26 +328,24 @@ var RevealNotes = (function() { y: y, state: state } - var receiver = null + var receiver = null; if (notesPopup) { - message = Object.assign(message, {namespace: 'reveal-notes'}) - receiver = notesPopup + message = Object.assign(message, {namespace: 'reveal-notes'}); + receiver = notesPopup; } else if (Reveal.getConfig().postMessageEvents && window.parent !== window.self) { - message = Object.assign(message, {namespace: 'reveal'}) + message = Object.assign(message, {namespace: 'reveal'}); receiver = window.parent; } - var stringified = JSON.stringify(message) - console.info("posting message", message, "in string", stringified) + var stringified = JSON.stringify(message); + console.debug("posting message", message, "in string", stringified); receiver.postMessage(stringified, '*'); } Pointer.prototype.getExposedFunctions = function() { - var returned = {} - returned[this.exposedPoint] =this.point.bind(this) -// returned['point'] = this.point.bind(this) - returned[this.exposedToggle] = this.toggle.bind(this) -// returned['toggle'] = this.toggle.bind(this) - return returned + var returned = {}; + returned[this.exposedPoint] =this.point.bind(this); + returned[this.exposedToggle] = this.toggle.bind(this); + return returned; } /** The usable pointers */ @@ -360,27 +356,27 @@ var RevealNotes = (function() { // Fill the pointers with the ones read from config for(var optionName in DEFAULT_OPTIONS) { - var optionsFor = DEFAULT_OPTIONS[optionName] + var optionsFor = DEFAULT_OPTIONS[optionName]; if(options.hasOwnProperty(optionName)) { - optionsFor = Object.assign({}, optionsFor, options[optionName]) + optionsFor = Object.assign({}, optionsFor, options[optionName]); } // Declaring the pointer does everything : registering keybindings and functions ! - pointers[optionName] = new Pointer(optionName, optionsFor) - exported = Object.assign(exported, pointers[optionName].getExposedFunctions()) + pointers[optionName] = new Pointer(optionName, optionsFor); + exported = Object.assign(exported, pointers[optionName].getExposedFunctions()); } - return exported; })(); // add a Reveal.point API function, so postMessage can handle it for(var functionName in RevealPointer) { Reveal[functionName] = RevealPointer[functionName]; - console.info("adding function "+functionName) + console.debug("adding function "+functionName); } + // Add a global point function, which will redirect to RevealPointer associated functions Reveal["point"] = function(x, y, state) { - RevealPointer["point"+state.pointer](x, y, state) + RevealPointer["point"+state.pointer](x, y, state); } // patch in Reveal.getSlidesAttributes, in dev branch but not in 3.7.0 @@ -394,9 +390,7 @@ var RevealNotes = (function() { attributes[ attribute.name ] = attribute.value; } return attributes; - } ); - } }