Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

code migrated to v4 #2

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

code migrated to v4 #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 10 additions & 10 deletions history.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ <h2>Doodle with strangers on InterWeb!</h2>
<canvas id="drawCanvas" width="300" height="300">Canvas is not supported on this browser!</canvas>

<section id="colorSwatch">
<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label>
<input type="radio" name="color" id="color02" data-color="darkorange"> <label for="color02"></label>
<input type="radio" name="color" id="color03" data-color="navy"> <label for="color03"></label>
<input type="radio" name="color" id="color04" data-color="yellowgreen"> <label for="color04"></label>
<input type="radio" name="color" id="color05" data-color="firebrick"> <label for="color05"></label>
<input type="radio" name="color" id="color06" data-color="powderblue"> <label for="color06"></label>
<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label>
<input type="radio" name="color" id="color02" data-color="darkorange"> <label for="color02"></label>
<input type="radio" name="color" id="color03" data-color="navy"> <label for="color03"></label>
<input type="radio" name="color" id="color04" data-color="yellowgreen"> <label for="color04"></label>
<input type="radio" name="color" id="color05" data-color="firebrick"> <label for="color05"></label>
<input type="radio" name="color" id="color06" data-color="powderblue"> <label for="color06"></label>
</section>
</section>

Expand All @@ -42,13 +42,13 @@ <h2>Doodle with strangers on InterWeb!</h2>
</footer>

<a href="https://github.com/pubnub/codoodler" target="_blank"><img class="github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>

<script>
var drawHistory = true;
</script>

<script src="//cdn.pubnub.com/pubnub-3.14.1.min.js"></script>
<script src="js/app.min.js"></script>
<script src="//cdn.pubnub.com/sdk/javascript/pubnub.4.20.0.min.js"></script>
<script src="js/app.js"></script>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PZWSZ2"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Expand All @@ -57,6 +57,6 @@ <h2>Doodle with strangers on InterWeb!</h2>
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');</script>
<!-- End Google Tag Manager -->
<!-- End Google Tag Manager -->
</body>
</html>
18 changes: 9 additions & 9 deletions history2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,21 +23,21 @@
<canvas id="drawCanvas" width="300" height="300"></canvas>

<section id="colorSwatch">
<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label>
<input type="radio" name="color" id="color02" data-color="darkorange"> <label for="color02"></label>
<input type="radio" name="color" id="color03" data-color="navy"> <label for="color03"></label>
<input type="radio" name="color" id="color04" data-color="yellowgreen"> <label for="color04"></label>
<input type="radio" name="color" id="color05" data-color="firebrick"> <label for="color05"></label>
<input type="radio" name="color" id="color06" data-color="powderblue"> <label for="color06"></label>
<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label>
<input type="radio" name="color" id="color02" data-color="darkorange"> <label for="color02"></label>
<input type="radio" name="color" id="color03" data-color="navy"> <label for="color03"></label>
<input type="radio" name="color" id="color04" data-color="yellowgreen"> <label for="color04"></label>
<input type="radio" name="color" id="color05" data-color="firebrick"> <label for="color05"></label>
<input type="radio" name="color" id="color06" data-color="powderblue"> <label for="color06"></label>
</section>
</section>

<script>
var drawHistory = true;
</script>

<script src="//cdn.pubnub.com/pubnub-3.14.1.min.js"></script>
<script src="js/app.min.js"></script>
<script src="//cdn.pubnub.com/sdk/javascript/pubnub.4.20.0.min.js"></script>
<script src="js/app.js"></script>

</body>
</html>
18 changes: 9 additions & 9 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,12 +27,12 @@ <h2>Doodle with strangers on InterWeb!</h2>
<canvas id="drawCanvas" width="300" height="300">Canvas is not supported on this browser!</canvas>

<section id="colorSwatch">
<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label>
<input type="radio" name="color" id="color02" data-color="darkorange"> <label for="color02"></label>
<input type="radio" name="color" id="color03" data-color="navy"> <label for="color03"></label>
<input type="radio" name="color" id="color04" data-color="yellowgreen"> <label for="color04"></label>
<input type="radio" name="color" id="color05" data-color="firebrick"> <label for="color05"></label>
<input type="radio" name="color" id="color06" data-color="powderblue"> <label for="color06"></label>
<input type="radio" name="color" id="color01" data-color="gold" checked><label for="color01"></label>
<input type="radio" name="color" id="color02" data-color="darkorange"> <label for="color02"></label>
<input type="radio" name="color" id="color03" data-color="navy"> <label for="color03"></label>
<input type="radio" name="color" id="color04" data-color="yellowgreen"> <label for="color04"></label>
<input type="radio" name="color" id="color05" data-color="firebrick"> <label for="color05"></label>
<input type="radio" name="color" id="color06" data-color="powderblue"> <label for="color06"></label>
</section>
</section>

Expand All @@ -42,14 +42,14 @@ <h2>Doodle with strangers on InterWeb!</h2>
</footer>

<a href="https://github.com/pubnub/codoodler" target="_blank"><img class="github" style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/365986a132ccd6a44c23a9169022c0b5c890c387/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f7265645f6161303030302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_red_aa0000.png"></a>

<script>
// For history() demo, please view history.html.
var drawHistory = false;
</script>

<script src="//cdn.pubnub.com/pubnub-3.14.1.min.js"></script>
<script src="js/app.min.js"></script>
<script src="//cdn.pubnub.com/sdk/javascript/pubnub.4.20.0.min.js"></script>
<script src="js/app.js"></script>
<!-- Google Tag Manager -->
<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PZWSZ2"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
Expand Down
81 changes: 50 additions & 31 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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) {
Expand All @@ -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 = [];
Expand All @@ -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
Expand Down