Simplify ynhpanel.js and ynhpanel.css making the YNH inapp panel an iframe that loads the info.html page.

helpers.lua

@@ -550,6 +550,7 @@ function get_data_for(view)
         local mails = get_mails(user)
         data = {
             connected  = true,
+            theme      = conf.theme,
             portal_url = conf.portal_url,
             uid        = user,
             cn         = cache:get(user.."-cn"),
@@ -682,7 +683,7 @@ function edit_user()
 
                         -- Open the LDAP connection
                         local ldap = lualdap.open_simple(conf["ldap_host"], dn, args.currentpassword)
-                        
+
                         local password = hash_password(args.newpassword)
 
                         -- Modify the LDAP information
@@ -909,7 +910,7 @@ function login()
     local uri_args = ngx.req.get_uri_args()
 
     args.user = string.lower(args.user)
-    
+
     local user = authenticate(args.user, args.password)
     if user then
         ngx.status = ngx.HTTP_CREATED

portal/assets/css/ynh-style.css

@@ -127,38 +127,6 @@ img {
 .ynh-wrapper:after {clear: both;}
 
 
-
-/* Logo */
-.logo {
-  text-align: center;
-  margin-bottom: 0;
-  opacity: 0.7;
-}
-
-.logo img {
-  margin-top: 4%;
-  width: 4em;
-}
-
-.logged .logo {
-  position: fixed;
-  bottom: 20px;
-  right: 20px;
-  z-index: 0;
-  opacity: 0.7;
-}
-  .logged .logo img {
-    margin-top: 0;
-    width: 2.5em;
-    padding: 0.3em;
-    border-radius: 5px;
-  }
-
-.ynh-panel-active .logo {
-  display: none;
-}
-
-
 /* messages */
 .messages {
   color: #FFF;

portal/assets/js/global.js

@@ -1,3 +1,36 @@
+
+// scripts loader
+function loadScript(url, callback) {
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = url;
+  // There are several events for cross browser compatibility.
+  script.onreadystatechange = callback;
+  script.onload = callback;
+  // Fire the loading
+  document.head.appendChild(script);
+}
+
+// handle app links so they work both in plain info page and in the info iframe called from ynhpanel.js
+function appClick (evnt, url) {
+
+  // if asked to open in new tab
+  if (
+    evnt.ctrlKey ||
+    evnt.shiftKey ||
+    evnt.metaKey ||
+    (evnt.button && evnt.button == 1)
+  ) return
+
+  // if asked in current tab
+  else {
+    evnt.preventDefault();
+    parent.location.href= url;
+    return false;
+  };
+
+}
+
 document.addEventListener('DOMContentLoaded', function() {
 
   // Variables
@@ -35,4 +68,20 @@ document.addEventListener('DOMContentLoaded', function() {
     addMaildrop.parentNode.insertBefore(inputDropClone, addMaildrop);
   });
 
+
+  // Get user's infos
+  var r = new XMLHttpRequest();
+  r.open("GET", "/ynhpanel.json", true);
+  r.onreadystatechange = function () {
+    // Die if error
+    if (r.readyState != 4 || r.status != 200) return;
+    // Response is JSON
+    response = JSON.parse(r.responseText);
+
+    // load additional theme's script
+    loadScript("/yunohost/sso/assets/themes/"+ response.theme +"/js/ynhpanel.js");
+
+  };
+  r.send();
+
 });

portal/assets/js/ynhpanel.js

@@ -204,6 +204,16 @@ function domReady(cb) {
       : cb();
 }
 
+function loadScript(url, callback) {
+  var script = document.createElement('script');
+  script.type = 'text/javascript';
+  script.src = url;
+  // There are several events for cross browser compatibility.
+  script.onreadystatechange = callback;
+  script.onload = callback;
+  // Fire the loading
+  document.head.appendChild(script);
+}
 
 /* ----------------------------------------------------------
   Main
@@ -223,12 +233,6 @@ domReady(function(){
   meta_viewport = document.querySelector('meta[name="viewport"]');
   meta_viewport_content = meta_viewport.getAttribute('content');
 
-  // 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');
@@ -242,14 +246,13 @@ domReady(function(){
 
 
   // Create overlay element
-  var overlay = document.createElement("div");
+  var overlay = document.createElement('iframe');
+  overlay.src = "/yunohost/sso/info.html";
   overlay.setAttribute("id","ynh-overlay");
-  overlay.setAttribute("style","display:none");
+  overlay.setAttribute("style","opacity:0"); // make sure the overlay is invisible already when loading it
 
   document.body.insertBefore(overlay, null);
 
-  //Color Application
-  var colors = ['redbg','purpledarkbg','darkbluebg','orangebg','greenbg','darkbluebg','purpledarkbg','yellowbg','lightpinkbg','pinkbg','turquoisebg','yellowbg','lightbluebg','purpledarkbg', 'bluebg'];
 
   // Get user's app
   var r = new XMLHttpRequest();
@@ -261,39 +264,6 @@ domReady(function(){
     // Response is JSON
     response = JSON.parse(r.responseText);
 
-    // Add overlay header
-    overlay.innerHTML += '<div id="ynh-user" class="ynh-wrapper info">' +
-                          '<ul class="ul-reset user-menu"><li><a class="icon icon-connexion disableAjax" href="'+ response.portal_url +'?action=logout">'+response.t_logout+'</a></li></ul>'+
-                          '<a class="user-container user-container-info disableAjax" href="'+ response.portal_url +'edit.html">' +
-                            '<h2 class="user-username">'+ response.uid +'</h2>' +
-                            '<small class="user-fullname">'+ response.givenName + ' ' + response.sn +'</small>' +
-                            '<span class="user-mail">'+ response.mail +'</span>' +
-                          '</a>' +
-                        '</div>';
-
-
-    // Add application links
-    var links = [];
-    Array.prototype.forEach.call(response.app, function(app, n){
-      randomColorNumber = parseInt(app.name, 36) % colors.length;
-      links.push('<li><a class="'+colors[randomColorNumber]+' disableAjax" href="//'+app.url+'"><span class="first-letter" data-first-letter="'+ app.name.substr(0,2) +'"></span><span class="name">'+app.name+'</span></a></li>');
-    });
-    overlay.innerHTML += '<div id="ynh-apps" class="ynh-wrapper apps"><ul class="listing-apps">'+ links.join("\n") +'</ul></div>';
-
-    // Add footer links
-    overlay.innerHTML += '<div id="ynh-footer" class="ynh-wrapper footer"><nav>' + "\n" +
-                          '<a class="link-profile-edit" href="/yunohost/sso/edit.html">'+ response.t_footerlink_edit +'</a>' + "\n" +
-                          '<a class="link-documentation" href="//yunohost.org/docs" target="_blank">'+ response.t_footerlink_documentation +'</a>' + "\n" +
-                          '<a class="link-documentation" href="//yunohost.org/support" target="_blank">'+ response.t_footerlink_support +'</a>' + "\n" +
-                          '<a class="link-admin" href="/yunohost/admin/" target="_blank">'+ response.t_footerlink_administration +'</a>' + "\n" +
-                        '</nav></div>';
-
-    // Add overlay to DOM
-    var btn = document.getElementById('logo'),
-        yunoverlay = document.getElementById('ynh-overlay'),
-        user = document.getElementById('ynh-user'),
-        apps = document.getElementById('ynh-apps');
-
     var pfx = ["webkit", "moz", "MS", "o", ""];
     function PrefixedEvent(element, type, callback) {
       for (var p = 0; p < pfx.length; p++) {
@@ -302,28 +272,44 @@ domReady(function(){
       }
     }
 
+
+    // Load all stylesheets after getting config
+
+    // 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);
+
+    // Custom style from theme
+    if (response.theme) {
+      var portalThemeStyle = document.createElement("link");
+      portalThemeStyle.setAttribute("rel", "stylesheet");
+      portalThemeStyle.setAttribute("type", "text/css");
+      portalThemeStyle.setAttribute("href", '/yunohost/sso/assets/themes/'+ response.theme +'/css/ynhpanel.css');
+      document.getElementsByTagName("head")[0].insertBefore(portalThemeStyle, null);
+    };
+
+
     // Bind YNH Button
     window.addEvent(portal, 'click', function(e){
       // Prevent default click
       window.eventPreventDefault(e);
-      // Toggle overlay on YNHPortal button
+      // Toggle overlay on YNHPortal button click
-      //Element.toggleClass(overlay, 'visible');
+      Element.toggleClass(overlay, 'visible');
       Element.toggleClass(portal, 'visible');
       Element.toggleClass(document.querySelector('html'), 'ynh-panel-active');
+      Element.toggleClass(overlay, 'ynh-active');
 
-
+      if(overlay.classList.contains('ynh-active')) {
-      if(yunoverlay.classList.contains('ynh-active')) {
           meta_viewport.setAttribute('content', meta_viewport_content);
-          yunoverlay.classList.add('ynh-fadeOut');
+          Element.addClass(overlay, 'ynh-fadeIn');
-          PrefixedEvent(yunoverlay, "AnimationEnd", function(){
+          Element.removeClass(overlay, 'ynh-fadeOut');
-            if(yunoverlay.classList.contains('ynh-fadeOut')) {
-              yunoverlay.classList.remove('ynh-active');
-            }
-          });
         }else {
           meta_viewport.setAttribute('content', "width=device-width");
-          yunoverlay.classList.remove('ynh-fadeOut');
+          Element.removeClass(overlay, 'ynh-fadeIn');
-          yunoverlay.classList.add('ynh-active');
+          Element.addClass(overlay, 'ynh-fadeOut');
         }
     });
 

portal/header.ms

@@ -13,6 +13,9 @@
 
   <!-- Stylesheets -->
   <link rel="stylesheet" href="assets/css/ynh-style.css">
+  {{#theme}}
+  <link rel="stylesheet" href="assets/themes/{{theme}}/css/ynh-style.css">
+  {{/theme}}
 
   <!-- Icons -->
   <link rel="shortcut icon" href="assets/icons/favicon.ico">
@@ -34,10 +37,6 @@
 </head>
 <body class="{{#connected}}logged{{/connected}}">
 
-  <h1 id="logo" class="logo">
-      <img src="assets/img/logo-ynh-white.svg"/><span class="element-invisible">Yunohost</span>
-  </h1>
-
   <div class="overlay">
     {{#flash_win}}
     <div class="wrapper messages success">{{.}}</div>
@@ -50,4 +49,3 @@
     {{#flash_info}}
     <div class="wrapper messages info">{{.}}</div>
     {{/flash_info}}
-

portal/info.html

@@ -14,7 +14,7 @@
 <div id="apps" class="wrapper apps">
   <ul class="listing-apps">
   {{#app}}
-  <li><a href="https://{{url}}"><span class="first-letter"></span><span class="name">{{name}}</span></a></li>
+    <li><a class="app_logo" href="https://{{url}}" onclick="appClick(event, 'https://{{url}}')"><span class="first-letter"></span><span class="name">{{name}}</span></a></li>
   {{/app}}
   </ul>
 </div>