[auth] moved parse method into collection

src/main/html/css/print.css

@@ -1252,16 +1252,32 @@
   width: 60px;
 }
 .swagger-section .api-popup-dialog {
-  z-index: 10000;
   position: absolute;
+  display: none;
+}
+.swagger-section .api-popup-dialog-wrapper {
+  z-index: 1000;
   width: 500px;
   background: #FFF;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  display: none;
   font-size: 13px;
   color: #777;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.swagger-section .api-popup-dialog-shadow {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.2;
+  background-color: gray;
+  z-index: 900;
 }
 .swagger-section .api-popup-dialog .api-popup-title {
   font-size: 24px;

src/main/html/css/screen.css

@@ -1252,16 +1252,32 @@
   width: 60px;
 }
 .swagger-section .api-popup-dialog {
-  z-index: 10000;
   position: absolute;
+  display: none;
+}
+.swagger-section .api-popup-dialog-wrapper {
+  z-index: 1000;
   width: 500px;
   background: #FFF;
   padding: 20px;
   border: 1px solid #ccc;
   border-radius: 5px;
-  display: none;
   font-size: 13px;
   color: #777;
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.swagger-section .api-popup-dialog-shadow {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  opacity: 0.2;
+  background-color: gray;
+  z-index: 900;
 }
 .swagger-section .api-popup-dialog .api-popup-title {
   font-size: 24px;

src/main/javascript/view/AuthsCollection.js

@@ -1,6 +1,14 @@
 'use strict';
 
 SwaggerUi.Collections.AuthsCollection = Backbone.Collection.extend({
+    constructor: function(models) {
+        var args = Array.prototype.slice.call(arguments);
+
+        args[0] = this.parse(args[0]);
+
+        Backbone.Collection.apply(this, args);
+    },
+
     add: function (model) {
         var args = Array.prototype.slice.call(arguments);
 
@@ -55,5 +63,29 @@ SwaggerUi.Collections.AuthsCollection = Backbone.Collection.extend({
 
     isPartiallyAuthorized: function () {
         return this.where({ isLogout: true }).length > 0;
+    },
+
+    parse: function (data) {
+        var authz = Object.assign({}, window.swaggerUi.api.clientAuthorizations.authz);
+
+        return _.map(data, function (auth, name) {
+            var isBasic = authz.basic && auth.type === 'basic';
+
+            _.extend(auth, {
+                title: name
+            });
+
+            if (authz[name] || isBasic) {
+                _.extend(auth, {
+                    isLogout: true,
+                    value: isBasic ? undefined : authz[name].value,
+                    username: isBasic ? authz.basic.username : undefined,
+                    password: isBasic ? authz.basic.password : undefined,
+                    valid: true
+                });
+            }
+
+            return auth;
+        });
     }
 });

src/main/javascript/view/AuthsCollectionView.js

@@ -7,8 +7,7 @@ SwaggerUi.Views.AuthsCollectionView = Backbone.View.extend({
         this.options.data = this.options.data || {};
         this.router = this.options.router;
 
-        this.collection = new SwaggerUi.Collections.AuthsCollection();
-        this.collection.add(this.parseData(opts.data));
+        this.collection = new SwaggerUi.Collections.AuthsCollection(opts.data);
 
         this.$innerEl = $('<div>');
     },
@@ -24,44 +23,22 @@ SwaggerUi.Views.AuthsCollectionView = Backbone.View.extend({
     },
 
     renderOneAuth: function (authModel) {
-        var authEl;
+        var authEl, authView;
         var type = authModel.get('type');
 
-        //todo refactor move view name into var and call new with it.
         if (type === 'apiKey') {
-            authEl = new SwaggerUi.Views.ApiKeyAuthView({model: authModel, router: this.router}).render().el;
+            authView = 'ApiKeyAuthView';
         } else if (type === 'basic' && this.$innerEl.find('.basic_auth_container').length === 0) {
-            authEl = new SwaggerUi.Views.BasicAuthView({model: authModel, router: this.router}).render().el;
+            authView = 'BasicAuthView';
         } else if (type === 'oauth2') {
-            authEl = new SwaggerUi.Views.Oauth2View({model: authModel, router: this.router}).render().el;
+            authView = 'Oauth2View';
+        }
+
+        if (authView) {
+            authEl = new SwaggerUi.Views[authView]({model: authModel, router: this.router}).render().el;
         }
 
         this.$innerEl.append(authEl);
-    },
-
-    //todo move into collection
-    parseData: function (data) {
-        var authz = Object.assign({}, window.swaggerUi.api.clientAuthorizations.authz);
-
-        return _.map(data, function (auth, name) {
-            var isBasic = authz.basic && auth.type === 'basic';
-
-            _.extend(auth, {
-                title: name
-            });
-
-            if (authz[name] || isBasic) {
-                _.extend(auth, {
-                    isLogout: true,
-                    value: isBasic ? undefined : authz[name].value,
-                    username: isBasic ? authz.basic.username : undefined,
-                    password: isBasic ? authz.basic.password : undefined,
-                    valid: true
-                });
-            }
-
-            return auth;
-        });
     }
 
 });

src/main/javascript/view/PopupView.js

@@ -13,27 +13,13 @@ SwaggerUi.Views.PopupView = Backbone.View.extend({
         main   : '#swagger-ui-container'
     },
 
-    initialize: function(){},
+    initialize: function(){
+        this.$el.html(this.template(this.model));
+    },
 
     render: function () {
-        var $win, dw, dh, st, dlgWd, dlgHt, top, left;
-        $win = $(window);
-        dw = $win.width();
-        dh = $win.height();
-        st = $win.scrollTop();
-        this.$el.html(this.template(this.model));
         this.$(this.selectors.content).append(this.model.content);
         $(this.selectors.main).first().append(this.el);
-        dlgWd = this.$el.outerWidth();
-        dlgHt = this.$el.outerHeight();
-        top = (dh -dlgHt)/2 + st;
-
-        left = (dw - dlgWd)/2;
-
-        this.$el.css({
-            top: (top < 0? 0 : top) + 'px',
-            left: (left < 0? 0 : left) + 'px'
-        });
         this.showPopup();
 
         return this;

src/main/less/auth.less

@@ -108,16 +108,34 @@
   }
 
   .api-popup-dialog {
-    z-index: 10000;
     position: absolute;
+    display: none;
+  }
+
+  .api-popup-dialog-wrapper {
+    z-index: 1000;
     width: 500px;
     background: #FFF;
     padding: 20px;
     border: 1px solid #ccc;
     border-radius: 5px;
-    display: none;
     font-size: 13px;
     color: #777;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .api-popup-dialog-shadow {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0.2;
+    background-color: gray;
+    z-index: 900;
   }
 
   .api-popup-dialog .api-popup-title {

src/main/template/popup.handlebars

@@ -5,4 +5,5 @@
     <div class="api-popup-actions">
         <button class="api-popup-cancel api-button gray" type="button">Cancel</button>
     </div>
-</div>
+</div>
+<div class="api-popup-dialog-shadow"></div>