aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
Diffstat
-rw-r--r--js/humane/humane-themed.js13
-rw-r--r--js/humane/humane.min.js1
-rw-r--r--js/humane/libnotify.css115
-rw-r--r--js/slide-controller.js37
-rw-r--r--js/slides.js11
5 files changed, 166 insertions, 11 deletions
diff --git a/js/humane/humane-themed.js b/js/humane/humane-themed.js
new file mode 100644
index 0000000..945a8d6
--- /dev/null
+++ b/js/humane/humane-themed.js
@@ -0,0 +1,13 @@
1define([ 'humane' ], function(humane) {
2
3 var themePath = 'js/humane/libnotify.css';
4
5 var style = document.createElement('link');
6 style.rel = 'stylesheet';
7 style.type = 'text/css';
8 style.href = themePath;
9 document.querySelector('head').appendChild(style);
10
11 return humane;
12
13});
diff --git a/js/humane/humane.min.js b/js/humane/humane.min.js
new file mode 100644
index 0000000..59a7453
--- /dev/null
+++ b/js/humane/humane.min.js
@@ -0,0 +1 @@
!function(t,e,i){"undefined"!=typeof module?module.exports=i(t,e):"function"==typeof define&&"object"==typeof define.amd?define(i):e[t]=i(t,e)}("humane",this,function(){var t=window,e=document,i={on:function(e,i,n){"addEventListener"in t?e.addEventListener(i,n,!1):e.attachEvent("on"+i,n)},off:function(e,i,n){"removeEventListener"in t?e.removeEventListener(i,n,!1):e.detachEvent("on"+i,n)},bind:function(t,e){return function(){t.apply(e,arguments)}},isArray:Array.isArray||function(t){return"[object Array]"===Object.prototype.toString.call(t)},config:function(t,e){return null!=t?t:e},transSupport:!1,useFilter:/msie [678]/i.test(navigator.userAgent),_checkTransition:function(){var t=e.createElement("div"),i={webkit:"webkit",Moz:"",O:"o",ms:"MS"};for(var n in i)n+"Transition"in t.style&&(this.vendorPrefix=i[n],this.transSupport=!0)}};i._checkTransition();var n=function(e){e||(e={}),this.queue=[],this.baseCls=e.baseCls||"humane",this.addnCls=e.addnCls||"",this.timeout="timeout"in e?e.timeout:2500,this.waitForMove=e.waitForMove||!1,this.clickToClose=e.clickToClose||!1,this.timeoutAfterMove=e.timeoutAfterMove||!1,this.container=e.container;try{this._setupEl()}catch(n){i.on(t,"load",i.bind(this._setupEl,this))}};return n.prototype={constructor:n,_setupEl:function(){var t=e.createElement("div");if(t.style.display="none",!this.container){if(!e.body)throw"document.body is null";this.container=e.body}this.container.appendChild(t),this.el=t,this.removeEvent=i.bind(function(){this.timeoutAfterMove?setTimeout(i.bind(this.remove,this),this.timeout):this.remove()},this),this.transEvent=i.bind(this._afterAnimation,this),this._run()},_afterTimeout:function(){i.config(this.currentMsg.waitForMove,this.waitForMove)?this.removeEventsSet||(i.on(e.body,"mousemove",this.removeEvent),i.on(e.body,"click",this.removeEvent),i.on(e.body,"keypress",this.removeEvent),i.on(e.body,"touchstart",this.removeEvent),this.removeEventsSet=!0):this.remove()},_run:function(){if(!this._animating&&this.queue.length&&this.el){this._animating=!0,this.currentTimer&&(clearTimeout(this.currentTimer),this.currentTimer=null);var t=this.queue.shift(),e=i.config(t.clickToClose,this.clickToClose);e&&(i.on(this.el,"click",this.removeEvent),i.on(this.el,"touchstart",this.removeEvent));var n=i.config(t.timeout,this.timeout);n>0&&(this.currentTimer=setTimeout(i.bind(this._afterTimeout,this),n)),i.isArray(t.html)&&(t.html="<ul><li>"+t.html.join("<li>")+"</ul>"),this.el.innerHTML=t.html,this.currentMsg=t,this.el.className=this.baseCls,i.transSupport?(this.el.style.display="block",setTimeout(i.bind(this._showMsg,this),50)):this._showMsg()}},_setOpacity:function(t){if(i.useFilter)try{this.el.filters.item("DXImageTransform.Microsoft.Alpha").Opacity=100*t}catch(e){}else this.el.style.opacity=String(t)},_showMsg:function(){var t=i.config(this.currentMsg.addnCls,this.addnCls);if(i.transSupport)this.el.className=this.baseCls+" "+t+" "+this.baseCls+"-animate";else{var e=0;this.el.className=this.baseCls+" "+t+" "+this.baseCls+"-js-animate",this._setOpacity(0),this.el.style.display="block";var n=this,s=setInterval(function(){1>e?(e+=.1,e>1&&(e=1),n._setOpacity(e)):clearInterval(s)},30)}},_hideMsg:function(){var t=i.config(this.currentMsg.addnCls,this.addnCls);if(i.transSupport)this.el.className=this.baseCls+" "+t,i.on(this.el,i.vendorPrefix?i.vendorPrefix+"TransitionEnd":"transitionend",this.transEvent);else var e=1,n=this,s=setInterval(function(){e>0?(e-=.1,0>e&&(e=0),n._setOpacity(e)):(n.el.className=n.baseCls+" "+t,clearInterval(s),n._afterAnimation())},30)},_afterAnimation:function(){i.transSupport&&i.off(this.el,i.vendorPrefix?i.vendorPrefix+"TransitionEnd":"transitionend",this.transEvent),this.currentMsg.cb&&this.currentMsg.cb(),this.el.style.display="none",this._animating=!1,this._run()},remove:function(t){var n="function"==typeof t?t:null;i.off(e.body,"mousemove",this.removeEvent),i.off(e.body,"click",this.removeEvent),i.off(e.body,"keypress",this.removeEvent),i.off(e.body,"touchstart",this.removeEvent),i.off(this.el,"click",this.removeEvent),i.off(this.el,"touchstart",this.removeEvent),this.removeEventsSet=!1,n&&this.currentMsg&&(this.currentMsg.cb=n),this._animating?this._hideMsg():n&&n()},log:function(t,e,i,n){var s={};if(n)for(var o in n)s[o]=n[o];if("function"==typeof e)i=e;else if(e)for(var o in e)s[o]=e[o];return s.html=t,i&&(s.cb=i),this.queue.push(s),this._run(),this},spawn:function(t){var e=this;return function(i,n,s){return e.log.call(e,i,n,s,t),e}},create:function(t){return new n(t)}},new n}); \ No newline at end of file
diff --git a/js/humane/libnotify.css b/js/humane/libnotify.css
new file mode 100644
index 0000000..5908d86
--- /dev/null
+++ b/js/humane/libnotify.css
@@ -0,0 +1,115 @@
1html,
2body {
3 min-height: 100%;
4}
5.humane,
6.humane-libnotify {
7 position: fixed;
8 -moz-transition: all 0.3s ease-out;
9 -webkit-transition: all 0.3s ease-out;
10 -ms-transition: all 0.3s ease-out;
11 -o-transition: all 0.3s ease-out;
12 transition: all 0.3s ease-out;
13 z-index: 100000;
14 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
15}
16.humane,
17.humane-libnotify {
18 font-family: Ubuntu, Arial, sans-serif;
19 text-align: center;
20 font-size: 15px;
21 top: 10px;
22 right: 10px;
23 opacity: 0;
24 width: 150px;
25 color: #fff;
26 padding: 10px;
27 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAYAAADYxx/bAAAABmJLR0QA/wD/AP+gvaeTAAAANElEQVQYlWNgYGB4ysTAwMDAxMjICCUQXDQWAwMDAxMTExMedcRyB6d5CAMQ5hGrjSrmAQBQdgIXlosSTwAAAABJRU5ErkJggg==');
28 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0.9)), color-stop(1, rgba(50,50,50,0.9))) no-repeat;
29 background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat;
30 background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat;
31 background: -ms-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat;
32 background: -o-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat;
33 background: linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat;
34 *background-color: #000;
35 -webkit-border-radius: 5px;
36 border-radius: 5px;
37 -webkit-box-shadow: 0 4px 4px -4px #000;
38 box-shadow: 0 4px 4px -4px #000;
39 -moz-transform: translateY(-40px);
40 -webkit-transform: translateY(-40px);
41 -ms-transform: translateY(-40px);
42 -o-transform: translateY(-40px);
43 transform: translateY(-40px);
44}
45.humane p,
46.humane-libnotify p,
47.humane ul,
48.humane-libnotify ul {
49 margin: 0;
50 padding: 0;
51}
52.humane ul,
53.humane-libnotify ul {
54 list-style: none;
55}
56.humane.humane-libnotify-info,
57.humane-libnotify.humane-libnotify-info {
58 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAYAAADYxx/bAAAABmJLR0QA/wD/AP+gvaeTAAAAMUlEQVQYlWNgYDB6ysTAwMDAxMDACCcYUFkMDEwMDEwMBNVhkxg65jGhmke6M6hgHgBSdgHnpZwADwAAAABJRU5ErkJggg==');
59 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,50,0.9)), color-stop(1, rgba(0,0,100,0.9))) no-repeat;
60 background: -moz-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat;
61 background: -webkit-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat;
62 background: -ms-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat;
63 background: -o-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat;
64 background: linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat;
65 *background-color: #030;
66}
67.humane.humane-libnotify-success,
68.humane-libnotify.humane-libnotify-success {
69 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAYAAADYxx/bAAAABmJLR0QA/wD/AP+gvaeTAAAAMUlEQVQYlWNgMGJ4ysTAwMDAxMAIJxhQWQwMDEwMTKgS2NRhkxg65jGhmke6M6hhHgBS2QHn2LzhygAAAABJRU5ErkJggg==');
70 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,50,0,0.9)), color-stop(1, rgba(0,100,0,0.9))) no-repeat;
71 background: -moz-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat;
72 background: -webkit-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat;
73 background: -ms-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat;
74 background: -o-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat;
75 background: linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat;
76 *background-color: #030;
77}
78.humane.humane-libnotify-error,
79.humane-libnotify.humane-libnotify-error {
80 background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWMwYmB4ysTAwMCATjASFsOmBBvBRJ7x+O0g0wCS7CDTH/RwH7X9MVDuwyaG032D2M2UeIYO7gMAqt8C19Bn7+YAAAAASUVORK5CYII=');
81 background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(50,0,0,0.9)), color-stop(1, rgba(100,0,0,0.9))) no-repeat;
82 background: -moz-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat;
83 background: -webkit-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat;
84 background: -ms-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat;
85 background: -o-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat;
86 background: linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat;
87 *background-color: #300;
88}
89.humane.humane-animate,
90.humane-libnotify.humane-libnotify-animate {
91 opacity: 1;
92 -moz-transform: translateY(0);
93 -webkit-transform: translateY(0);
94 -ms-transform: translateY(0);
95 -o-transform: translateY(0);
96 transform: translateY(0);
97}
98.humane.humane-animate:hover,
99.humane-libnotify.humane-libnotify-animate:hover {
100 opacity: 0.2;
101}
102.humane.humane-animate,
103.humane-libnotify.humane-libnotify-js-animate {
104 opacity: 1;
105 -moz-transform: translateY(0);
106 -webkit-transform: translateY(0);
107 -ms-transform: translateY(0);
108 -o-transform: translateY(0);
109 transform: translateY(0);
110}
111.humane.humane-animate:hover,
112.humane-libnotify.humane-libnotify-js-animate:hover {
113 opacity: 0.2;
114 filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20);
115} \ No newline at end of file
diff --git a/js/slide-controller.js b/js/slide-controller.js
index 416c17c..5a32d19 100644
--- a/js/slide-controller.js
+++ b/js/slide-controller.js
@@ -87,26 +87,49 @@
87 var password = prompt("Broadcaster password"); 87 var password = prompt("Broadcaster password");
88 88
89 case 'remote': 89 case 'remote':
90
90 var addr = this.deck.config_.settings.remoteSocket; 91 var addr = this.deck.config_.settings.remoteSocket;
91 var channel = this.deck.config_.settings.remoteChannel; 92 var channel = this.deck.config_.settings.remoteChannel;
92 var password = (password != null) ? password : ''; 93 var password = (password != null) ? password : '';
93 94
94 require([addr + 'socket.io/socket.io.js'], function(io) { 95 require(['humane-themed', addr + 'socket.io/socket.io.js'], function(humane, io) {
96
95 self.remoteSocket = io.connect(addr, { 97 self.remoteSocket = io.connect(addr, {
96 'query' : 'channel=' + channel + '&password=' + password, 98 'query' : 'channel=' + channel + '&password=' + password,
97 'force new connection' : true, 99 'force new connection' : true,
98 }); 100 });
99 101
102 self.remoteSocket.on('connecting', function() {
103 console.log('Connecting to ' + channel + '@' + addr);
104 humane.log('Connecting...', {
105 timeout : 0
106 });
107 });
108
100 self.remoteSocket.on('connect', function() { 109 self.remoteSocket.on('connect', function() {
101 var message = 'Connected to ' + channel + '@' + addr; 110 console.log('Connected to ' + channel + '@' + addr);
102 console.log(message); 111 humane.remove();
103 alert(message); 112 humane.log('Connected');
113 });
114
115 self.remoteSocket.on('connect_failed', function() {
116 console.log('Error connecting to ' + channel + '@' + addr);
117 humane.log('Connection failed', {
118 timeout : 0
119 });
120 });
121
122 self.remoteSocket.on('error', function() {
123 console.log('Error on ' + channel + '@' + addr);
124 humane.log('Error', {
125 timeout : 0
126 });
104 }); 127 });
105 128
106 self.remoteSocket.on('disconnect', function() { 129 self.remoteSocket.on('disconnect', function() {
107 var message = 'Diconnected from' + channel + '@' + addr; 130 console.log('Diconnected from' + channel + '@' + addr);
108 console.log(message); 131 humane.remove();
109 alert(message); 132 humane.log('Disconnected');
110 }); 133 });
111 134
112 self.remoteSocket.on('message', function(message) { 135 self.remoteSocket.on('message', function(message) {
diff --git a/js/slides.js b/js/slides.js
index 143dac2..3482287 100644
--- a/