[auth] moved parse method into collection

dist/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;

dist/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;

dist/swagger-ui.js

@@ -911,7 +911,7 @@ this["Handlebars"]["templates"]["popup"] = Handlebars.template({"compiler":[6,">
   var helper, functionType="function", helperMissing=helpers.helperMissing, escapeExpression=this.escapeExpression;
   return "<div class=\"api-popup-dialog-wrapper\">\n    <div class=\"api-popup-title\">"
     + escapeExpression(((helper = (helper = helpers.title || (depth0 != null ? depth0.title : depth0)) != null ? helper : helperMissing),(typeof helper === functionType ? helper.call(depth0, {"name":"title","hash":{},"data":data}) : helper)))
-    + "</div>\n    <div class=\"api-popup-content\"></div>\n    <p class=\"error-msg\"></p>\n    <div class=\"api-popup-actions\">\n        <button class=\"api-popup-cancel api-button gray\" type=\"button\">Cancel</button>\n    </div>\n</div>";
+    + "</div>\n    <div class=\"api-popup-content\"></div>\n    <p class=\"error-msg\"></p>\n    <div class=\"api-popup-actions\">\n        <button class=\"api-popup-cancel api-button gray\" type=\"button\">Cancel</button>\n    </div>\n</div>\n<div class=\"api-popup-dialog-shadow\"></div>";
 },"useData":true});
 this["Handlebars"]["templates"]["resource"] = Handlebars.template({"1":function(depth0,helpers,partials,data) {
   return " : ";
@@ -19328,6 +19328,14 @@ SwaggerUi.Views.AuthButtonView = Backbone.View.extend({
 '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);
 
@@ -19382,51 +19390,9 @@ SwaggerUi.Collections.AuthsCollection = Backbone.Collection.extend({
 
     isPartiallyAuthorized: function () {
         return this.where({ isLogout: true }).length > 0;
-    }
-});
-'use strict';
-
-SwaggerUi.Views.AuthsCollectionView = Backbone.View.extend({
-
-    initialize: function(opts) {
-        this.options = opts || {};
-        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.$innerEl = $('<div>');
     },
 
-    render: function () {
-        this.collection.each(function (auth) {
-            this.renderOneAuth(auth);
-        }, this);
-
-        this.$el.html(this.$innerEl.html() ? this.$innerEl : '');
-
-        return this;
-    },
-
-    renderOneAuth: function (authModel) {
-        var authEl;
-        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;
-        } else if (type === 'basic' && this.$innerEl.find('.basic_auth_container').length === 0) {
-            authEl = new SwaggerUi.Views.BasicAuthView({model: authModel, router: this.router}).render().el;
-        } else if (type === 'oauth2') {
-            authEl = new SwaggerUi.Views.Oauth2View({model: authModel, router: this.router}).render().el;
-        }
-
-        this.$innerEl.append(authEl);
-    },
-
-    //todo move into collection
-    parseData: function (data) {
+    parse: function (data) {
         var authz = Object.assign({}, window.swaggerUi.api.clientAuthorizations.authz);
 
         return _.map(data, function (auth, name) {
@@ -19449,6 +19415,49 @@ SwaggerUi.Views.AuthsCollectionView = Backbone.View.extend({
             return auth;
         });
     }
+});
+'use strict';
+
+SwaggerUi.Views.AuthsCollectionView = Backbone.View.extend({
+
+    initialize: function(opts) {
+        this.options = opts || {};
+        this.options.data = this.options.data || {};
+        this.router = this.options.router;
+
+        this.collection = new SwaggerUi.Collections.AuthsCollection(opts.data);
+
+        this.$innerEl = $('<div>');
+    },
+
+    render: function () {
+        this.collection.each(function (auth) {
+            this.renderOneAuth(auth);
+        }, this);
+
+        this.$el.html(this.$innerEl.html() ? this.$innerEl : '');
+
+        return this;
+    },
+
+    renderOneAuth: function (authModel) {
+        var authEl, authView;
+        var type = authModel.get('type');
+
+        if (type === 'apiKey') {
+            authView = 'ApiKeyAuthView';
+        } else if (type === 'basic' && this.$innerEl.find('.basic_auth_container').length === 0) {
+            authView = 'BasicAuthView';
+        } else if (type === 'oauth2') {
+            authView = 'Oauth2View';
+        }
+
+        if (authView) {
+            authEl = new SwaggerUi.Views[authView]({model: authModel, router: this.router}).render().el;
+        }
+
+        this.$innerEl.append(authEl);
+    }
 
 });
 
@@ -21963,27 +21972,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/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>