From 8165d71325d9c002ea939893fe10c7c6a5523926 Mon Sep 17 00:00:00 2001 From: Craig Conover Date: Tue, 9 Jan 2018 16:57:09 -0700 Subject: [PATCH] all code tested; mins need to be regenerated and references to app.min.js updated --- history.html | 20 ++++++------- history2.html | 18 ++++++------ index.html | 18 ++++++------ js/app.js | 81 +++++++++++++++++++++++++++++++-------------------- 4 files changed, 78 insertions(+), 59 deletions(-) diff --git a/history.html b/history.html index 5dfd0aa..f419055 100644 --- a/history.html +++ b/history.html @@ -27,12 +27,12 @@

Doodle with strangers on InterWeb!

Canvas is not supported on this browser!
- - - - - - + + + + + +
@@ -42,13 +42,13 @@

Doodle with strangers on InterWeb!

Fork me on GitHub - + - - + + @@ -57,6 +57,6 @@

Doodle with strangers on InterWeb!

j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PZWSZ2'); - + diff --git a/history2.html b/history2.html index 9af115f..9d37828 100644 --- a/history2.html +++ b/history2.html @@ -23,12 +23,12 @@
- - - - - - + + + + + +
@@ -36,8 +36,8 @@ var drawHistory = true; - - - + + + diff --git a/index.html b/index.html index 54ad228..94a5080 100644 --- a/index.html +++ b/index.html @@ -27,12 +27,12 @@

Doodle with strangers on InterWeb!

Canvas is not supported on this browser!
- - - - - - + + + + + +
@@ -42,14 +42,14 @@

Doodle with strangers on InterWeb!

Fork me on GitHub - + - - + + diff --git a/js/app.js b/js/app.js index 36a917e..384fba0 100644 --- a/js/app.js +++ b/js/app.js @@ -7,25 +7,25 @@ canvas.width = Math.min(document.documentElement.clientWidth, window.innerWidth || 300); canvas.height = Math.min(document.documentElement.clientHeight, window.innerHeight || 300); - + ctx.strokeStyle = color; ctx.lineWidth = '3'; ctx.lineCap = ctx.lineJoin = 'round'; /* Mouse and touch events */ - + document.getElementById('colorSwatch').addEventListener('click', function() { color = document.querySelector(':checked').getAttribute('data-color'); }, false); - + var isTouchSupported = 'ontouchstart' in window; var isPointerSupported = navigator.pointerEnabled; var isMSPointerSupported = navigator.msPointerEnabled; - + var downEvent = isTouchSupported ? 'touchstart' : (isPointerSupported ? 'pointerdown' : (isMSPointerSupported ? 'MSPointerDown' : 'mousedown')); var moveEvent = isTouchSupported ? 'touchmove' : (isPointerSupported ? 'pointermove' : (isMSPointerSupported ? 'MSPointerMove' : 'mousemove')); var upEvent = isTouchSupported ? 'touchend' : (isPointerSupported ? 'pointerup' : (isMSPointerSupported ? 'MSPointerUp' : 'mouseup')); - + canvas.addEventListener(downEvent, startDraw, false); canvas.addEventListener(moveEvent, draw, false); canvas.addEventListener(upEvent, endDraw, false); @@ -34,25 +34,38 @@ var channel = 'draw'; - var pubnub = PUBNUB.init({ - publish_key : 'pub-c-156a6d5f-22bd-4a13-848d-b5b4d4b36695', - subscribe_key : 'sub-c-f762fb78-2724-11e4-a4df-02ee2ddab7fe', - leave_on_unload : true, + var pubnub = new PubNub({ + publishKey : 'pub-c-156a6d5f-22bd-4a13-848d-b5b4d4b36695', + subscribeKey : 'sub-c-f762fb78-2724-11e4-a4df-02ee2ddab7fe', ssl : document.location.protocol === "https:" }); - pubnub.subscribe({ - channel: channel, - callback: drawFromStream, - presence: function(m){ - if(m.occupancy > 1){ + pubnub.addListener({ + message: function(m) { + // handle message + drawFromStream(m.message); + }, + + presence: function(p) { + // handle presence + if (p.occupancy > 1) { document.getElementById('unit').textContent = 'doodlers'; } - document.getElementById('occupancy').textContent = m.occupancy; - var p = document.getElementById('occupancy').parentNode; - p.classList.add('anim'); - p.addEventListener('transitionend', function(){p.classList.remove('anim');}, false); - } + + document.getElementById('occupancy').textContent = p.occupancy; + var p = document.getElementById('occupancy').parentNode; + p.classList.add('anim'); + p.addEventListener('transitionend', function(){p.classList.remove('anim');}, false); + }, + + status: function(s) { + // handle status + } + }); + + pubnub.subscribe({ + channels: [channel], + withPresence: true }); function publish(data) { @@ -79,16 +92,22 @@ if(!message || message.plots.length < 1) return; drawOnCanvas(message.color, message.plots); } - + // Get Older and Past Drawings! - if(drawHistory) { - pubnub.history({ - channel : channel, - count : 50, - callback : function(messages) { - pubnub.each( messages[0], drawFromStream ); - } - }); + if (drawHistory) { + pubnub.history( + { + channel: channel, + count: 50, + }, + function (status, response) { + // pubnub.each(response.messages, drawFromStream); + for (m in response.messages) { + drawFromStream(response.messages[m].entry); + } + + } + ); } var isActive = false; var plots = []; @@ -104,16 +123,16 @@ drawOnCanvas(color, plots); } - + function startDraw(e) { e.preventDefault(); isActive = true; } - + function endDraw(e) { e.preventDefault(); isActive = false; - + publish({ color: color, plots: plots