Add API for frameworks and examples (#3514)

* Add API for frameworks and examples * Adjust headers * Update frameworks list * Always use latest * Add types * Use now repo for downloading and listing * Use .existsSync * Remove unused packages * Use 307 for redirect * Add examples * Update tsconfig.json Co-Authored-By: Steven <steven@ceriously.com> * Make examples unique * Remove detectors from frameworks API * Use /api instead of Next.js * Install dependencies * Rename project * Change name * Empty * Change name * Update api/tsconfig.json Co-Authored-By: Steven <steven@ceriously.com> * Update examples Co-authored-by: Steven <steven@ceriously.com>
2025-12-10 04:22:12 +00:00 · 2020-01-07 23:55:39 +01:00
parent 537d508a1e
commit 890de6a625
912 changed files with 30138 additions and 0 deletions
--- a/examples/vanilla-pusher-functions/main.js
+++ b/examples/vanilla-pusher-functions/main.js
@@ -0,0 +1,140 @@
+'use strict';
+
+(function() {
+  let canvas = document.querySelector('.whiteboard');
+  let colors = document.querySelectorAll('.color');
+  let context = canvas.getContext('2d');
+
+  let pusher = new Pusher('2a81e2e82be1a9d76433', {
+    cluster: 'us2',
+  });
+  let channel = pusher.subscribe('drawing-events');
+
+  channel.bind('drawing', onDrawingEvent);
+
+  let current = {
+    color: 'black',
+  };
+
+  let drawing = false;
+
+  canvas.width = window.innerWidth;
+  canvas.height = window.innerHeight;
+
+  canvas.addEventListener('mousedown', onMouseDown, false);
+  canvas.addEventListener('mouseup', onMouseUp, false);
+  canvas.addEventListener('mouseout', onMouseUp, false);
+  canvas.addEventListener('mousemove', throttle(onMouseMove, 10), false);
+
+  canvas.addEventListener('touchstart', onMouseDown, false);
+  canvas.addEventListener('touchend', onMouseUp, false);
+  canvas.addEventListener('touchcancel', onMouseUp, false);
+  canvas.addEventListener('touchmove', throttle(onMouseMove, 10), false);
+
+  for (var i = 0; i < colors.length; i++) {
+    colors[i].addEventListener('click', updateColor, false);
+  }
+
+  function drawLine(x0, x1, y0, y1, color, emit) {
+    context.beginPath();
+    context.moveTo(x0, y0);
+    context.lineTo(x1, y1);
+    context.strokeStyle = color;
+    context.lineWidth = 2;
+    context.stroke();
+    context.closePath();
+
+    if (!emit) {
+      return;
+    }
+
+    let w = canvas.width;
+    let h = canvas.height;
+
+    pushDrawData({
+      x0: x0 / w,
+      x1: x1 / w,
+      y0: y0 / h,
+      y1: y1 / h,
+      color,
+    });
+  }
+
+  function onMouseDown(e) {
+    drawing = true;
+    current.x = e.clientX || e.touches[0].clientX;
+    current.y = e.clientY || e.toches[0].clientY;
+  }
+
+  function onMouseUp(e) {
+    if (!drawing) {
+      return;
+    }
+    drawing = false;
+    drawLine(
+      current.x,
+      e.clientX || e.touches[0].clientX,
+      current.y,
+      e.clientY || e.touches[0].clientY,
+      current.color,
+      true
+    );
+  }
+
+  function onMouseMove(e) {
+    if (!drawing) {
+      return;
+    }
+    drawLine(
+      current.x,
+      e.clientX || e.touches[0].clientX,
+      current.y,
+      e.clientY || e.touches[0].clientY,
+      current.color,
+      true
+    );
+    current.x = e.clientX || e.touches[0].clientX;
+    current.y = e.clientY || e.touches[0].clientY;
+  }
+
+  function throttle(callback, delay) {
+    let previousCall = Date.now();
+    return function() {
+      let time = Date.now();
+
+      if (time - previousCall >= delay) {
+        previousCall = time;
+        callback.apply(null, arguments);
+      }
+    };
+  }
+
+  function updateColor(e) {
+    pushDrawData();
+    current.color = e.target.className.split(' ')[1];
+  }
+
+  function onDrawingEvent({ x0, x1, y0, y1, color }) {
+    let w = canvas.width;
+    let h = canvas.height;
+    drawLine(x0 * w, x1 * w, y0 * h, y1 * h, color);
+  }
+
+  function onResize() {
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+  }
+
+  async function pushDrawData(data) {
+    const res = await fetch('/api/push-draw-data', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(data),
+    });
+    if (!res.ok) {
+      console.error('event not sent');
+    }
+  }
+})();