From df60ba6ada279e6cfd0b357dcf4537fe0147fac8 Mon Sep 17 00:00:00 2001 From: opi Date: Mon, 17 Feb 2014 13:07:28 +0100 Subject: [PATCH] YNH Panel. 1st draft. --- access.lua | 3 + portal/assets/css/ynhpanel.css | 172 ++++++++++++++++++++++++++++ portal/assets/js/ynhpanel.js | 200 +++++++++++++++++++++++++++++---- 3 files changed, 351 insertions(+), 24 deletions(-) create mode 100644 portal/assets/css/ynhpanel.css diff --git a/access.lua b/access.lua index 9495b0f..0505024 100644 --- a/access.lua +++ b/access.lua @@ -613,6 +613,9 @@ if is_logged_in() then if string.match(ngx.var.uri, "^/ynhpanel.js$") then serve("/ynhsso/assets/js/ynhpanel.js") end + if string.match(ngx.var.uri, "^/ynhpanel.css$") then + serve("/ynhsso/assets/css/ynhpanel.css") + end if string.match(ngx.var.uri, "^/ynhpanel.json$") then serve("/ynhsso/assets/js/ynhpanel.json") end diff --git a/portal/assets/css/ynhpanel.css b/portal/assets/css/ynhpanel.css new file mode 100644 index 0000000..8e4a637 --- /dev/null +++ b/portal/assets/css/ynhpanel.css @@ -0,0 +1,172 @@ +/* ****************************************************************** + Button +******************************************************************* */ +#ynhportal { + display: block; + position: fixed; + z-index: 1000; + bottom: 2%; + right: 2%; + + width: 60px; + height: 52px; + padding: 10px; + border-radius: 5px; + background: #000; + background-image: url(data:image/png;base64,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); + background-position: center center; + background-repeat: no-repeat; + + opacity: 0.5; + zoom: 1;filter: alpha(opacity=50); +} +#ynhportal:hover { + opacity: 1; + filter: alpha(opacity=100); +} + + + +/* ****************************************************************** + Overlay +******************************************************************* */ + +/* Background */ +#ynhoverlay { + display: block; + position: absolute; + top: -100%; + left: 0; + width: 100%; + height: 0; + z-index: 999; + text-align: left; + overflow-y: auto; + + opacity: 0; + zoom: 1;filter: alpha(opacity=0); + + color:#fff; + background-color: rgba(0,0,0, 0.7); + + font-family: Arial, sans-serif; + font-size: 16px; /* 100% */ + font-style: normal; + font-weight: normal; + font-variant: normal; + + -webkit-transition: all .25s ease-in-out; + -moz-transition: all .25s ease-in-out; + -ms-transition: all .25s ease-in-out; + -o-transition: all .25s ease-in-out; + transition: all .25s ease-in-out; +} +#ynhoverlay.visible { + top:0; + height:100%; + opacity: 1; + filter: alpha(opacity=100); +} + +/* reset inherited style */ +#ynhoverlay * { + margin: 0; + padding: 0; + border: 0; + vertical-align: baseline; + text-align: left; + line-height: 1; + + color: #fff; + font-family: Arial, sans-serif; + font-size: 16px; /* 100% */ + font-style: normal; + font-weight: normal; + font-variant: normal; + text-shadow: none; + + opacity: 1; + filter: alpha(opacity=100); +} + + +/* Close button */ +#ynhclose { + display: block; + float: right; + margin: 2%; + cursor: pointer; + z-index: 1002; + + font-weight: bold; + font-size: 1.5em; +} +#ynhclose:hover {color:pink;} + + +/* Header */ +#ynhoverlay .header { + display: block; + width:50%; + margin:1em auto; +} +#ynhoverlay h1 { + display: block; + margin:0 1em 0 0; + line-height: 1.4; + font-size: 3em; +} +#ynhoverlay .account-link { + display: inline-block; + text-decoration: none; + color: #ccc; +} +#ynhoverlay .account-link:hover { + text-decoration: underline; + color: #fff; +} + + + +/* Application list */ +#ynhoverlay ul { + margin: 10% auto; + display: block; + width: 50%; + list-style: none; +} + #ynhoverlay li {display: inline;} + + #ynhoverlay ul a { + display: inline-block; + vertical-align: top; + width: 110px; + margin: 3% 6% 3% 0; + + text-align: center; + text-decoration: none; + + border-radius: 5px; + } + #ynhoverlay ul a:before { + content: attr(data-first-letter); + display: block; + height: 110px; + line-height: 110px; + margin-bottom:5%; + + color: #000; + background: #fff; + text-align: center; + text-decoration: none; + font-size: 3em; + + border-radius: 5px; + } + + #ynhoverlay ul a:hover { + color:pink; + } + #ynhoverlay ul a:hover:before { + background-color: pink; + } diff --git a/portal/assets/js/ynhpanel.js b/portal/assets/js/ynhpanel.js index 9c1b53f..3b8366c 100644 --- a/portal/assets/js/ynhpanel.js +++ b/portal/assets/js/ynhpanel.js @@ -1,39 +1,191 @@ -// Smallest DOMReady -// http://dustindiaz.com/smallest-domready-ever +/* ---------------------------------------------------------- + Utilities +---------------------------------------------------------- */ + +/* Console log fix +-------------------------- */ +if (typeof(console) === 'undefined') { + var console = {}; + console.log = console.error = console.info = console.debug = console.warn = console.trace = console.dir = console.dirxml = console.group = console.groupEnd = console.time = console.timeEnd = console.assert = console.profile = function() {}; +} + + +/* Array utilities + https://github.com/Darklg/JavaScriptUtilities/blob/master/assets/js/vanilla-js/libs/vanilla-arrays.js +-------------------------- */ +Array.contains = function(needle, haystack) { + var i = 0, + length = haystack.length; + + for (; i < length; i++) { + if (haystack[i] === needle) return true; + } + return false; +}; +Array.each = function(arrayToParse, callback) { + var i = 0, + length = arrayToParse.length; + for (; i < length; i++) { + callback(arrayToParse[i]); + } +}; + + + +/* CSS classes utilities + https://github.com/Darklg/JavaScriptUtilities/blob/master/assets/js/vanilla-js/libs/vanilla-classes.js +-------------------------- */ +Element.getClassNames = function(element) { + var classNames = [], + elementClassName = element.className; + if (elementClassName !== '') { + elementClassName = elementClassName.replace(/\s+/g, ' '); + classNames = elementClassName.split(' '); + } + return classNames; +}; +Element.hasClass = function(element, className) { + if (element.classList) { + return element.classList.contains(className); + } + return Array.contains(className, Element.getClassNames(element)); +}; +Element.addClass = function(element, className) { + if (element.classList) { + element.classList.add(className); + return; + } + if (!Element.hasClass(element, className)) { + var elementClasses = Element.getClassNames(element); + elementClasses.push(className); + element.className = elementClasses.join(' '); + } +}; +Element.removeClass = function(element, className) { + if (element.classList) { + element.classList.remove(className); + return; + } + var elementClasses = Element.getClassNames(element); + var newElementClasses = []; + var i = 0, + arLength = elementClasses.length; + for (; i < arLength; i++) { + if (elementClasses[i] !== className) { + newElementClasses.push(elementClasses[i]); + } + } + element.className = newElementClasses.join(' '); +}; +Element.toggleClass = function(element, className) { + if (!Element.hasClass(element, className)) { + Element.addClass(element, className); + } + else { + Element.removeClass(element, className); + } +}; + + +/* Add Event + https://github.com/Darklg/JavaScriptUtilities/blob/master/assets/js/vanilla-js/libs/vanilla-events.js +-------------------------- */ +window.addEvent = function(el, eventName, callback) { + if (el.addEventListener) { + el.addEventListener(eventName, callback, false); + } + else if (el.attachEvent) { + el.attachEvent("on" + eventName, function(e) { + return callback.call(el, e); + }); + } +}; +window.eventPreventDefault = function(event) { + return (event.preventDefault) ? event.preventDefault() : event.returnValue = false; +}; + + +/* Smallest DOMReady + http://dustindiaz.com/smallest-domready-ever +-------------------------- */ function domReady(cb) { /in/.test(document.readyState) // in = loadINg ? setTimeout('domReady('+cb+')', 9) : cb(); } + +/* ---------------------------------------------------------- + Main +---------------------------------------------------------- */ domReady(function(){ - //console.log('DOM is ready !'); - //alert("YNH Portal"); + // Add portal stylesheet + var portalStyle = document.createElement("link"); + portalStyle.setAttribute("rel", "stylesheet"); + portalStyle.setAttribute("type", "text/css"); + portalStyle.setAttribute("href", '/ynhpanel.css'); + document.getElementsByTagName("head")[0].insertBefore(portalStyle, null); + + // Create portal link var portal = document.createElement('a'); + portal.setAttribute('id', 'ynhportal'); + portal.setAttribute('href', '/ynhsso/'); + document.body.insertBefore(portal, null); - portal.id = 'ynhportal'; - portal.href = '/ynhsso/'; + // Get user's app + var r = new XMLHttpRequest(); + r.open("GET", "/ynhpanel.json", true); + r.onreadystatechange = function () { + // Die if error + if (r.readyState != 4 || r.status != 200) return; - portal.style.display="block"; - portal.style.position="fixed"; - portal.style.zIndex="1000"; - portal.style.bottom="5%"; - portal.style.right="30px"; + // Response is JSON + response = JSON.parse(r.responseText); - portal.style.width="60px"; - portal.style.height="52px"; - portal.style.padding="10px"; - portal.style.borderRadius="5px"; - portal.style.background="#000"; - portal.style.backgroundImage = "url(data:image/png;base64,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)"; - portal.style.backgroundPosition = "center center"; - portal.style.backgroundRepeat = "no-repeat"; + // Create overlay element + var overlay = document.createElement("div"); + overlay.setAttribute("id","ynhoverlay"); - portal.style.opacity = "0.35"; - portal.addEventListener('mouseover', function(){portal.style.opacity="1";}); - portal.addEventListener('mouseout', function(){portal.style.opacity="0.5";}); + // Append close button + var closeBtn = document.createElement("div"); + closeBtn.setAttribute("id","ynhclose"); + closeBtn.innerHTML = "X"; + overlay.insertBefore(closeBtn, null); + + // Add overlay header + overlay.innerHTML += '
' + + '

'+ response.user +'

' + + '' + + '
'; + + // Add application links + var links = []; + Array.each(response.app, function(app){ + links.push('
  • '+app.name+'
    • '); + }); + overlay.innerHTML += ''; + + // Add overlay to DOM + document.body.insertBefore(overlay, null); + + // Bind YNH Button + window.addEvent(portal, 'click', function(e){ + // Prevent default click + window.eventPreventDefault(e); + // Toggle overlay on YNHPortal button + Element.toggleClass(overlay, 'visible'); + }); + + // Bind close button + window.addEvent(document.getElementById('ynhclose'), 'click', function(e){ + // Prevent default click + window.eventPreventDefault(e); + // Hide overlay + Element.removeClass(overlay, 'visible'); + }); + + }; + r.send(); - document.body.insertBefore(portal); }); -