diff options
Diffstat (limited to 'js')
-rw-r--r-- | js/humane/humane-themed.js | 13 | ||||
-rw-r--r-- | js/humane/humane.min.js | 1 | ||||
-rw-r--r-- | js/humane/libnotify.css | 115 | ||||
-rw-r--r-- | js/slide-controller.js | 37 | ||||
-rw-r--r-- | js/slides.js | 11 |
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 @@ | |||
1 | define([ '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 @@ | |||
1 | html, | ||
2 | body { | ||
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) { |
< |