add marker color to menu sidebar

bozotics · Jun 1, 2020 · 602ac2b · 602ac2b
1 parent 57899af
commit 602ac2b
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 20 deletions.
diff --git a/_includes/reveal-initialise.html b/_includes/reveal-initialise.html
@@ -28,25 +28,9 @@
 			src: "{{ page.chalkboard_save }}",
 			{% endif %}
 			readOnly: false,
-			eraser: { src: '/assets/reveal-plugins/chalkboard/img/sponge.png', radius: 15},
+			eraser: { src: '/assets/reveal-plugins/chalkboard/img/sponge.png', radius: 15 },
 			toggleChalkboardButton: { left: "80px" },
-			toggleNotesButton: { left: "130px" },
-			boardmarkers: [
-				{ color: 'rgba(30,144,255, 1)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/boardmarker-blue.png"), auto'},
-				{ color: 'rgba(220,20,60,1)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/boardmarker-red.png"), auto'},
-				{ color: 'rgba(50,205,50,1)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/boardmarker-green.png"), auto'},
-				{ color: 'rgba(255,140,0,1)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/boardmarker-orange.png"), auto'},
-				{ color: 'rgba(150,0,20150,1)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/boardmarker-purple.png"), auto'},
-				{ color: 'rgba(255,220,0,1)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/boardmarker-yellow.png"), auto'}
-			],
-			chalks: [
-				{ color: 'rgba(96, 154, 244, 0.5)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/chalk-blue.png"), auto'},
-				{ color: 'rgba(237, 20, 28, 0.5)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/chalk-red.png"), auto'},
-				{ color: 'rgba(20, 237, 28, 0.5)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/chalk-green.png"), auto'},
-				{ color: 'rgba(220, 133, 41, 0.5)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/chalk-orange.png"), auto'},
-				{ color: 'rgba(220,0,220,0.5)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/chalk-purple.png"), auto'},
-				{ color: 'rgba(255,220,0,0.5)', cursor: 'url("/assets/reveal-plugins/chalkboard/img/chalk-yellow.png"), auto'}
-			]
+			toggleNotesButton: { left: "130px" }
 		},
 		notes_pointer: {
 			pointer: {
@@ -60,12 +44,13 @@
 			/* If slides do not have a matching title, attempt to use the */
 			/* start of the text content as the title instead */
 			useTextContentForMissingTitles: true,
-			{% if page.menu_options %}
 			/* menu options generated from a list of strings */
 			custom: [
+				{% if page.menu_options %}
 				{ title: 'Bookmarks', icon: '<i class="fas fa-bookmark">', src: '{{ page.menu_options }}' },
+				{% endif %}
+				{ title: 'Marker color', icon: '<i class="fas fa-marker">', src:'/assets/reveal-plugins/chalkboard/markers.html' }
 			]
-			{% endif %}
 		},
 		dependencies: [
 			{ src: '/assets/reveal-plugins/elapsed-time-bar/elapsed-time-bar.js', async: true },

diff --git a/assets/reveal-plugins/chalkboard/chalkboard.js b/assets/reveal-plugins/chalkboard/chalkboard.js
@@ -1491,6 +1491,17 @@ console.log( 'Create printout for slide ' + storage[1].data[i].slide.h + "." + s
 		}
 	};
 
+	function colorSet( idx ) {
+		if ( !readOnly ) {
+			setColor(idx);
+			recordEvent( { type: "setcolor", index: idx, begin: Date.now() - slideStart } );
+			// broadcast
+			var message = new CustomEvent('send');
+			message.content = { sender: 'chalkboard-plugin', type: 'setcolor', index: idx };
+			document.dispatchEvent( message );
+		}
+	}
+
 	this.drawWithBoardmarker = drawWithBoardmarker;
 	this.drawWithChalk = drawWithChalk;
 	this.toggleNotesCanvas = toggleNotesCanvas;
@@ -1503,6 +1514,7 @@ console.log( 'Create printout for slide ' + storage[1].data[i].slide.h + "." + s
 	this.resetAll = resetStorage;
 	this.download = downloadData;
 	this.configure = configure;
+	this.colorSet = colorSet;
 
 	return this;
 })();
diff --git a/assets/reveal-plugins/chalkboard/markers.html b/assets/reveal-plugins/chalkboard/markers.html
@@ -0,0 +1,9 @@
+<ul class="slide-menu-items">
+	<li class="slide-menu-item"><a onclick="RevealChalkboard.colorSet(0);">Black</a></li>
+	<li class="slide-menu-item"><a onclick="RevealChalkboard.colorSet(1);">Blue</a></li>
+	<li class="slide-menu-item"><a onclick="RevealChalkboard.colorSet(2);">Red</a></li>
+	<li class="slide-menu-item"><a onclick="RevealChalkboard.colorSet(3);">Green</a></li>
+	<li class="slide-menu-item"><a onclick="RevealChalkboard.colorSet(4);">Orange</a></li>
+	<li class="slide-menu-item"><a onclick="RevealChalkboard.colorSet(5);">Purple</a></li>
+	<li class="slide-menu-item"><a onclick="RevealChalkboard.colorSet(6);">Yellow</a></li>
+</ul>