basic meme builder in place

routes/show-routes.js

@@ -3,6 +3,11 @@ const showController = require('../controllers/showController.js');
 const logger = require('winston');
 
 module.exports = (app, ua, googleAnalyticsId) => {
+  // route to fetch all free public claims
+  app.get('/meme-fodder', ({ originalUrl }, res) => {
+    logger.debug(`GET request on ${originalUrl}`);
+    res.status(200).render('memeFodder');
+  });
   // route to fetch all free public claims
   app.get('/:name/all', ({ originalUrl, params }, res) => {
     logger.debug(`GET request on ${originalUrl}`);

views/memeFodder.handlebars

@@ -0,0 +1,90 @@
+<div class="container">
+	{{> topBar}}
+	<div class="row">
+		{{> memeMaker}}
+	</div>
+</div>
+
+<script>
+	var canvas = document.getElementById('meme-canvas');
+	ctx = canvas.getContext('2d');
+
+	// set the size
+	var img = document.getElementById('start-image');
+	var canvasWidth = 400;
+	var canvasHeight = 300;
+	canvas.width = canvasWidth;
+	canvas.height = canvasHeight;
+	
+	
+	var topText = document.getElementById('top-text');
+	var bottomText = document.getElementById('bottom-text');
+
+	img.onload = function() {
+		drawMeme()
+	}
+
+	topText.addEventListener('keydown', drawMeme);
+	topText.addEventListener('keyup', drawMeme);
+	topText.addEventListener('change', drawMeme);
+
+	bottomText.addEventListener('keydown', drawMeme);
+	bottomText.addEventListener('keyup', drawMeme);
+	bottomText.addEventListener('change', drawMeme);
+
+	function drawMeme() {
+		ctx.clearRect(0, 0,  canvasWidth, canvasHeight);
+		ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
+		ctx.lineWidth = 4;
+		ctx.font = '20pt sans-serif';
+		ctx.strokeStyle = 'black';
+		ctx.fillStyle = 'white';
+		ctx.textAlign = 'center';
+		ctx.textBaseline = 'top';
+
+		var text1 = document.getElementById('top-text').value;
+		text1 = text1.toUpperCase();
+		x = canvasWidth / 2;
+		y = 0;
+
+		wrapText(ctx, text1, x, y, 300, 28, false);
+
+		ctx.textBaseline = 'bottom';
+		var text2 = document.getElementById('bottom-text').value;
+		text2 = text2.toUpperCase();
+		y = canvasHeight;
+
+		wrapText(ctx, text2, x, y, 300, 28, true);
+
+	}
+
+	function wrapText(context, text, x, y, maxWidth, lineHeight, fromBottom) {
+		var pushMethod = (fromBottom)?'unshift':'push';
+
+		lineHeight = (fromBottom)?-lineHeight:lineHeight;
+
+		var lines = [];
+		var y = y;
+		var line ='';
+		var words = text.split(' ');
+		for (var i = 0; i < words.length; i++) {
+			var testLine = line + ' ' + words[i];
+			var metrics = context.measureText(testLine);
+			var testWidth = metrics.width;
+
+			if (testWidth > maxWidth) {
+				lines[pushMethod](line);
+				line = words[i] + ' ';
+			} else {
+				line = testLine;
+			}
+		}
+		lines[pushMethod](line);
+
+		for (var k in lines ) {
+			context.strokeText(lines[k], x, y + lineHeight * k);
+			context.fillText(lines[k], x, y + lineHeight * k);
+		}
+	}
+
+</script>

views/partials/memeMaker.handlebars

@@ -0,0 +1,23 @@
+<div class="col-md-12">
+	<div class="card" id="publish">
+		<div class="card-title card-block grey lighten-1 white-text">
+			<h2>Meme Generator</h2>
+		</div>
+		<div class="card-block" id="publish-active-area">
+			<form id="meme-form" action="" method="" enctype="multipart/form-data">
+			<div class="row">
+				<div class="col-md-6">
+					<canvas id="meme-canvas">
+						If you can see this, canvas is not supported.
+					</canvas>
+					<img id="start-image" src="http://spee.ch/meme-fodder" alt="a picture to make your meme with" hidden="true"/>
+				</div>
+				<div class="col-md-6">
+					<input type="text" value="Is it ready?" id="top-text" />
+					<input type="text" value="Who cares, ship it!" id="bottom-text" />
+				</div>
+			</div>
+			</form>
+		</div>
+	</div>
+</div>