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

Finish #1

Open
wants to merge 7 commits into
base: master
Choose a base branch
from
Open

Finish #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
3c0adcd
Release 1: Slider jquery & Configure Firebase
isumizumi Mar 16, 2017
4a1d551
Finish
isumizumi Mar 16, 2017
a58d916
Fix All Finish
isumizumi Mar 16, 2017
dd751d0
Update Readme
isumizumi Mar 16, 2017
ed7ac8e
Finish! Presentation Fixed by random number.
isumizumi Mar 16, 2017
576c19f
Finish
isumizumi Mar 16, 2017
a31191c
Update Readme: heroku link
isumizumi Mar 16, 2017
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
24 changes: 23 additions & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,23 @@
# web-socket
# web-socket

Demo presentation slider using web-socket Firebase.
My project db: <br>
https://console.firebase.google.com/project/web-socket-259d0/database/data

# **USAGE**
Open 2 browser, access the website via live server.

Just try click left or right:
http://127.0.0.1:8080/controller.html

Then check in the second browser:
http://127.0.0.1:8080/slide.html

Voila! We can use presentation slider! :)

# **Access**
Access via browser:
https://stark-springs-67690.herokuapp.com/

Access in another browser:
https://stark-springs-67690.herokuapp.com/controller.html
204 changes: 204 additions & 0 deletions client/controller.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,204 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body style="padding:0px; margin:0px; background-color:#fff;font-family:'Open Sans',sans-serif,arial,helvetica,verdana">

<!-- #region Jssor Slider Begin -->
<!-- Generator: Jssor Slider Maker -->
<!-- Source: http://www.jssor.com -->
<!-- This code works with jquery library. -->
<script src="js/jquery-1.11.3.min.js" type="text/javascript"></script>
<script src="js/jssor.slider-22.2.16.mini.js" type="text/javascript"></script>
<script src="https://www.gstatic.com/firebasejs/3.7.1/firebase.js"></script>
<script>
jQuery(document).ready(function ($) {
var config = {
apiKey: "AIzaSyCts5zvOR1BGUvuAa1TV6jM6LPLT7Yxl0c",
authDomain: "web-socket-259d0.firebaseapp.com",
databaseURL: "https://web-socket-259d0.firebaseio.com",
storageBucket: "web-socket-259d0.appspot.com",
messagingSenderId: "663814883282"
};
firebase.initializeApp(config);

$( ".jssora22l" ).click(function() {
firebase.database().ref('/present/1').set({
state: 'left',
number: Math.random()
});
});

$( ".jssora22r" ).click(function() {
firebase.database().ref('/present/1').set({
state: 'right',
number: Math.random()
});
});

var jssor_1_options = {
$AutoPlay: false,
$SlideDuration: 800,
$SlideEasing: $Jease$.$OutQuint,
$ArrowNavigatorOptions: {
$Class: $JssorArrowNavigator$
},
$BulletNavigatorOptions: {
$Class: $JssorBulletNavigator$
}
};

var jssor_1_slider = new $JssorSlider$("jssor_1", jssor_1_options);

/*responsive code begin*/
/*remove responsive code if you don't want the slider scales while window resizing*/
function ScaleSlider() {
var refSize = jssor_1_slider.$Elmt.parentNode.clientWidth;
if (refSize) {
refSize = Math.min(refSize, 1920);
jssor_1_slider.$ScaleWidth(refSize);
}
else {
window.setTimeout(ScaleSlider, 30);
}
}
ScaleSlider();
$(window).bind("load", ScaleSlider);
$(window).bind("resize", ScaleSlider);
$(window).bind("orientationchange", ScaleSlider);
/*responsive code end*/
});
</script>
<script src="js/controller"></script>
<style>
/* jssor slider loading skin oval css */

.jssorl-oval img {
animation-name: jssorl-oval;
animation-duration: 1.2s;
animation-iteration-count: infinite;
animation-timing-function: linear;
}

@keyframes jssorl-oval {
from {
transform: rotate(0deg);
}

to {
transform: rotate(360deg);
}
}


/* jssor slider bullet navigator skin 05 css */
/*
.jssorb05 div (normal)
.jssorb05 div:hover (normal mouseover)
.jssorb05 .av (active)
.jssorb05 .av:hover (active mouseover)
.jssorb05 .dn (mousedown)
*/
.jssorb05 {
position: absolute;
}
.jssorb05 div, .jssorb05 div:hover, .jssorb05 .av {
position: absolute;
/* size of bullet elment */
width: 16px;
height: 16px;
background: url('img/b05.png') no-repeat;
overflow: hidden;
cursor: pointer;
}
.jssorb05 div { background-position: -7px -7px; }
.jssorb05 div:hover, .jssorb05 .av:hover { background-position: -37px -7px; }
.jssorb05 .av { background-position: -67px -7px; }
.jssorb05 .dn, .jssorb05 .dn:hover { background-position: -97px -7px; }

/* jssor slider arrow navigator skin 22 css */
/*
.jssora22l (normal)
.jssora22r (normal)
.jssora22l:hover (normal mouseover)
.jssora22r:hover (normal mouseover)
.jssora22l.jssora22ldn (mousedown)
.jssora22r.jssora22rdn (mousedown)
.jssora22l.jssora22lds (disabled)
.jssora22r.jssora22rds (disabled)
*/
.jssora22l, .jssora22r {
display: block;
position: absolute;
/* size of arrow element */
width: 40px;
height: 58px;
cursor: pointer;
background: url('img/a22.png') center center no-repeat;
overflow: hidden;
}
.jssora22l { background-position: -10px -31px; }
.jssora22r { background-position: -70px -31px; }
.jssora22l:hover { background-position: -130px -31px; }
.jssora22r:hover { background-position: -190px -31px; }
.jssora22l.jssora22ldn { background-position: -250px -31px; }
.jssora22r.jssora22rdn { background-position: -310px -31px; }
.jssora22l.jssora22lds { background-position: -10px -31px; opacity: .3; pointer-events: none; }
.jssora22r.jssora22rds { background-position: -70px -31px; opacity: .3; pointer-events: none; }
</style>
<div id="jssor_1" style="position:relative;margin:0 auto;top:0px;left:0px;width:1500px;height:600px;overflow:hidden;visibility:hidden;">
<!-- Loading Screen -->
<div data-u="loading" class="jssorl-oval" style="position:absolute;top:0px;left:0px;text-align:center;background-color:rgba(0,0,0,0.7);">
<img style="margin-top:-19.0px;position:relative;top:50%;width:38px;height:38px;" src="img/oval.svg" />
</div>
<div data-u="slides" style="cursor:default;position:relative;top:0px;left:0px;width:1500px;height:600px;overflow:hidden;">
<a data-u="any" href="http://www.jssor.com" style="display:none">Full Width Slider</a>
<div>
<img data-u="image" src="img/android.jpg" />
<div style="position:absolute;top:85px;left:100px;width:600px;height:120px;z-index:0;background-color:rgba(0,0,0,0.5);">
<div style="position:absolute;top:15px;left:15px;width:500px;height:40px;z-index:0;font-size:30px;color:#ffffff;line-height:40px;">Build slider with anything</div>
<div style="position:absolute;top:60px;left:15px;width:570px;height:40px;z-index:0;font-size:22px;color:#ffffff;line-height:38px;">image, text, html, svg, content, photo, picture, graphic</div>
</div>
<div style="position:absolute;top:370px;left:100px;width:600px;height:120px;z-index:0;background-color:rgba(255,255,255,0.5);">
<div style="position:absolute;top:15px;left:15px;width:500px;height:40px;z-index:0;font-size:30px;color:#000000;line-height:40px;">Run slider on any device</div>
<div style="position:absolute;top:60px;left:15px;width:500px;height:40px;z-index:0;font-size:22px;color:#000000;line-height:38px;">windows, android, mac</div>
</div>
</div>
<div>
<img data-u="image" src="img/windows.jpg" />
<div style="position:absolute;top:85px;left:100px;width:600px;height:120px;z-index:0;background-color:rgba(0,0,0,0.5);">
<div style="position:absolute;top:15px;left:15px;width:500px;height:40px;z-index:0;font-size:30px;color:#ffffff;line-height:40px;">Build slider with anything</div>
<div style="position:absolute;top:60px;left:15px;width:570px;height:40px;z-index:0;font-size:22px;color:#ffffff;line-height:38px;">image, text, html, svg, content, photo, picture, graphic</div>
</div>
<div style="position:absolute;top:370px;left:100px;width:600px;height:120px;z-index:0;background-color:rgba(255,255,255,0.5);">
<div style="position:absolute;top:15px;left:15px;width:500px;height:40px;z-index:0;font-size:30px;color:#000000;line-height:40px;">Run slider on any device</div>
<div style="position:absolute;top:60px;left:15px;width:500px;height:40px;z-index:0;font-size:22px;color:#000000;line-height:38px;">windows, android, mac</div>
</div>
</div>
<div>
<img data-u="image" src="img/mac.jpg" />
<div style="position:absolute;top:85px;left:100px;width:600px;height:120px;z-index:0;background-color:rgba(0,0,0,0.5);">
<div style="position:absolute;top:15px;left:15px;width:500px;height:40px;z-index:0;font-size:30px;color:#ffffff;line-height:40px;">Build slider with anything</div>
<div style="position:absolute;top:60px;left:15px;width:570px;height:40px;z-index:0;font-size:22px;color:#ffffff;line-height:38px;">image, text, html, svg, content, photo, picture, graphic</div>
</div>
<div style="position:absolute;top:370px;left:100px;width:600px;height:120px;z-index:0;background-color:rgba(255,255,255,0.5);">
<div style="position:absolute;top:15px;left:15px;width:500px;height:40px;z-index:0;font-size:30px;color:#000000;line-height:40px;">Run slider on any device</div>
<div style="position:absolute;top:60px;left:15px;width:500px;height:40px;z-index:0;font-size:22px;color:#000000;line-height:38px;">windows, android, mac</div>
</div>
</div>
</div>
<!-- Bullet Navigator -->
<div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
<!-- bullet navigator item prototype -->
<div data-u="prototype" style="width:16px;height:16px;"></div>
</div>
<!-- Arrow Navigator -->
<span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
<span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
</div>
<!-- #endregion Jssor Slider End -->
</body>
</html>
Binary file added client/img/a22.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/img/android.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/img/b05.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/img/mac.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions client/img/oval.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added client/img/windows.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 22 additions & 0 deletions client/js/controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
var firebase = require('firebase');

var config = {
apiKey: "AIzaSyCts5zvOR1BGUvuAa1TV6jM6LPLT7Yxl0c",
authDomain: "web-socket-259d0.firebaseapp.com",
databaseURL: "https://web-socket-259d0.firebaseio.com",
storageBucket: "web-socket-259d0.appspot.com",
messagingSenderId: "663814883282"
};
firebase.initializeApp(config);

$( ".jssora22l" ).click(function() {
firebase.database().ref('/present/1' + userId).set({
state: 'left'
});
});

$( ".jssora22r" ).click(function() {
firebase.database().ref('/present/1' + userId).set({
state: 'right'
});
});
18 changes: 18 additions & 0 deletions client/js/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
var firebase = require('firebase');

// Initialize Firebase
var config = {
apiKey: "AIzaSyCts5zvOR1BGUvuAa1TV6jM6LPLT7Yxl0c",
authDomain: "web-socket-259d0.firebaseapp.com",
databaseURL: "https://web-socket-259d0.firebaseio.com",
storageBucket: "web-socket-259d0.appspot.com",
messagingSenderId: "663814883282"
};
firebase.initializeApp(config);

var firebased = firebase.database().ref('/present/1');
firebased.on('value', function(snapshot) {
console.log(snapshot.val());
// $( ".jssora22l" ).click();
// $( ".jssora22r" ).click();
});
6 changes: 6 additions & 0 deletions client/js/jquery-1.11.3.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions client/js/jssor.slider-22.2.16.debug.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions client/js/jssor.slider-22.2.16.min.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions client/js/jssor.slider-22.2.16.mini.js
View file
Open in desktop

Large diffs are not rendered by default.

Loading