From 82bd7f96523e02fb520d45f80a88301b7055072d Mon Sep 17 00:00:00 2001 From: Pacien TRAN-GIRARD Date: Tue, 13 May 2014 19:52:13 +0200 Subject: Replace connection alert() by javascript/css notifications --- js/humane/humane-themed.js | 13 +++++ js/humane/humane.min.js | 1 + js/humane/libnotify.css | 115 +++++++++++++++++++++++++++++++++++++++++++++ js/slide-controller.js | 37 ++++++++++++--- js/slides.js | 11 +++-- 5 files changed, 166 insertions(+), 11 deletions(-) create mode 100644 js/humane/humane-themed.js create mode 100644 js/humane/humane.min.js create mode 100644 js/humane/libnotify.css (limited to 'js') 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 @@ +define([ 'humane' ], function(humane) { + + var themePath = 'js/humane/libnotify.css'; + + var style = document.createElement('link'); + style.rel = 'stylesheet'; + style.type = 'text/css'; + style.href = themePath; + document.querySelector('head').appendChild(style); + + return humane; + +}); 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=""),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 @@ +html, +body { + min-height: 100%; +} +.humane, +.humane-libnotify { + position: fixed; + -moz-transition: all 0.3s ease-out; + -webkit-transition: all 0.3s ease-out; + -ms-transition: all 0.3s ease-out; + -o-transition: all 0.3s ease-out; + transition: all 0.3s ease-out; + z-index: 100000; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); +} +.humane, +.humane-libnotify { + font-family: Ubuntu, Arial, sans-serif; + text-align: center; + font-size: 15px; + top: 10px; + right: 10px; + opacity: 0; + width: 150px; + color: #fff; + padding: 10px; + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAYAAADYxx/bAAAABmJLR0QA/wD/AP+gvaeTAAAANElEQVQYlWNgYGB4ysTAwMDAxMjICCUQXDQWAwMDAxMTExMedcRyB6d5CAMQ5hGrjSrmAQBQdgIXlosSTwAAAABJRU5ErkJggg=='); + 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; + background: -moz-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat; + background: -webkit-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat; + background: -ms-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat; + background: -o-linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat; + background: linear-gradient(top, rgba(0,0,0,0.9) 0%, rgba(50,50,50,0.9) 100%) no-repeat; + *background-color: #000; + -webkit-border-radius: 5px; + border-radius: 5px; + -webkit-box-shadow: 0 4px 4px -4px #000; + box-shadow: 0 4px 4px -4px #000; + -moz-transform: translateY(-40px); + -webkit-transform: translateY(-40px); + -ms-transform: translateY(-40px); + -o-transform: translateY(-40px); + transform: translateY(-40px); +} +.humane p, +.humane-libnotify p, +.humane ul, +.humane-libnotify ul { + margin: 0; + padding: 0; +} +.humane ul, +.humane-libnotify ul { + list-style: none; +} +.humane.humane-libnotify-info, +.humane-libnotify.humane-libnotify-info { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAYAAADYxx/bAAAABmJLR0QA/wD/AP+gvaeTAAAAMUlEQVQYlWNgYDB6ysTAwMDAxMDACCcYUFkMDEwMDEwMBNVhkxg65jGhmke6M6hgHgBSdgHnpZwADwAAAABJRU5ErkJggg=='); + 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; + background: -moz-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat; + background: -webkit-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat; + background: -ms-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat; + background: -o-linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat; + background: linear-gradient(top, rgba(0,0,50,0.9) 0%, rgba(0,0,100,0.9) 100%) no-repeat; + *background-color: #030; +} +.humane.humane-libnotify-success, +.humane-libnotify.humane-libnotify-success { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABQCAYAAADYxx/bAAAABmJLR0QA/wD/AP+gvaeTAAAAMUlEQVQYlWNgMGJ4ysTAwMDAxMAIJxhQWQwMDEwMTKgS2NRhkxg65jGhmke6M6hhHgBS2QHn2LzhygAAAABJRU5ErkJggg=='); + 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; + background: -moz-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat; + background: -webkit-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat; + background: -ms-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat; + background: -o-linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat; + background: linear-gradient(top, rgba(0,50,0,0.9) 0%, rgba(0,100,0,0.9) 100%) no-repeat; + *background-color: #030; +} +.humane.humane-libnotify-error, +.humane-libnotify.humane-libnotify-error { + background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADICAYAAAAp8ov1AAAABmJLR0QA/wD/AP+gvaeTAAAAPklEQVQokWMwYmB4ysTAwMCATjASFsOmBBvBRJ7x+O0g0wCS7CDTH/RwH7X9MVDuwyaG032D2M2UeIYO7gMAqt8C19Bn7+YAAAAASUVORK5CYII='); + 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; + background: -moz-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat; + background: -webkit-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat; + background: -ms-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat; + background: -o-linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat; + background: linear-gradient(top, rgba(50,0,0,0.9) 0%, rgba(100,0,0,0.9) 100%) no-repeat; + *background-color: #300; +} +.humane.humane-animate, +.humane-libnotify.humane-libnotify-animate { + opacity: 1; + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} +.humane.humane-animate:hover, +.humane-libnotify.humane-libnotify-animate:hover { + opacity: 0.2; +} +.humane.humane-animate, +.humane-libnotify.humane-libnotify-js-animate { + opacity: 1; + -moz-transform: translateY(0); + -webkit-transform: translateY(0); + -ms-transform: translateY(0); + -o-transform: translateY(0); + transform: translateY(0); +} +.humane.humane-animate:hover, +.humane-libnotify.humane-libnotify-js-animate:hover { + opacity: 0.2; + filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=20); +} \ 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 @@ var password = prompt("Broadcaster password"); case 'remote': + var addr = this.deck.config_.settings.remoteSocket; var channel = this.deck.config_.settings.remoteChannel; var password = (password != null) ? password : ''; - require([addr + 'socket.io/socket.io.js'], function(io) { + require(['humane-themed', addr + 'socket.io/socket.io.js'], function(humane, io) { + self.remoteSocket = io.connect(addr, { 'query' : 'channel=' + channel + '&password=' + password, 'force new connection' : true, }); + self.remoteSocket.on('connecting', function() { + console.log('Connecting to ' + channel + '@' + addr); + humane.log('Connecting...', { + timeout : 0 + }); + }); + self.remoteSocket.on('connect', function() { - var message = 'Connected to ' + channel + '@' + addr; - console.log(message); - alert(message); + console.log('Connected to ' + channel + '@' + addr); + humane.remove(); + humane.log('Connected'); + }); + + self.remoteSocket.on('connect_failed', function() { + console.log('Error connecting to ' + channel + '@' + addr); + humane.log('Connection failed', { + timeout : 0 + }); + }); + + self.remoteSocket.on('error', function() { + console.log('Error on ' + channel + '@' + addr); + humane.log('Error', { + timeout : 0 + }); }); self.remoteSocket.on('disconnect', function() { - var message = 'Diconnected from' + channel + '@' + addr; - console.log(message); - alert(message); + console.log('Diconnected from' + channel + '@' + addr); + humane.remove(); + humane.log('Disconnected'); }); self.remoteSocket.on('message', function(message) { diff --git a/js/slides.js b/js/slides.js index 143dac2..3482287 100644 --- a/js/slides.js +++ b/js/slides.js @@ -8,14 +8,17 @@ require.config({ 'prettify' : 'prettify/prettify', 'hammer' : 'hammer.min', - 'analytics' : 'https://www.google-analytics.com/ga' + 'humane' : 'humane/humane.min', + 'humane-themed' : 'humane/humane-themed', + + 'analytics' : 'https://www.google-analytics.com/ga', }, shim : { 'slide-deck' : { - deps : ['slide_config', 'slide-controller', 'modernizr'] - } - } + deps : ['slide_config', 'slide-controller', 'modernizr'], + }, + }, }); require(['slide-deck']); -- cgit v1.2.3