From 200b332dc6d10f2489dd04e3903fc0c868d76eaa Mon Sep 17 00:00:00 2001
From: Justin Richer <jricher@mit.edu>
Date: Sun, 16 Mar 2014 14:23:59 -0400
Subject: [PATCH] some fun in the sheets

---
 .../src/main/webapp/WEB-INF/tags/footer.tag   |   1 +
 .../src/main/webapp/WEB-INF/tags/header.tag   |   2 +
 .../src/main/webapp/WEB-INF/views/manage.jsp  |   7 +-
 .../webapp/resources/css/bootstrap-sheet.css  |  57 +++++
 .../src/main/webapp/resources/js/admin.js     |  10 +-
 .../src/main/webapp/resources/js/client.js    |   4 +-
 .../src/main/webapp/resources/js/grant.js     |   8 +-
 .../resources/js/lib/bootstrap-sheet.js       | 205 ++++++++++++++++++
 .../src/main/webapp/resources/js/scope.js     |   8 +-
 .../src/main/webapp/resources/js/token.js     |   8 +-
 .../src/main/webapp/resources/js/whitelist.js |   8 +-
 11 files changed, 293 insertions(+), 25 deletions(-)
 create mode 100644 openid-connect-server-webapp/src/main/webapp/resources/css/bootstrap-sheet.css
 create mode 100644 openid-connect-server-webapp/src/main/webapp/resources/js/lib/bootstrap-sheet.js

diff --git a/openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/footer.tag b/openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/footer.tag
index 57c55dadf..30daa33de 100644
--- a/openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/footer.tag
+++ b/openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/footer.tag
@@ -22,6 +22,7 @@
 <script type="text/javascript" src="resources/js/lib/bootstrapx-clickover.js"></script>
 <script type="text/javascript" src="resources/js/lib/moment.js"></script>
 <script type="text/javascript" src="resources/js/lib/retina.js"></script>
+<script type="text/javascript" src="resources/js/lib/bootstrap-sheet.js"></script>
 <c:if test="${js != null && js != ''}">
 	<script type="text/javascript" src="resources/js/client.js"></script>
 	<script type="text/javascript" src="resources/js/grant.js"></script>
diff --git a/openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/header.tag b/openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/header.tag
index ddf70903b..24f3a793e 100644
--- a/openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/header.tag
+++ b/openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/header.tag
@@ -16,6 +16,8 @@
 
     <!-- Le styles -->
     <link href="resources/bootstrap2/css/bootstrap.min.css" rel="stylesheet">
+    <link href="resources/css/bootstrap-sheet.css" rel="stylesheet">
+    
     <style type="text/css">
 
       html,
diff --git a/openid-connect-server-webapp/src/main/webapp/WEB-INF/views/manage.jsp b/openid-connect-server-webapp/src/main/webapp/WEB-INF/views/manage.jsp
index 45240d326..4a4583cea 100644
--- a/openid-connect-server-webapp/src/main/webapp/WEB-INF/views/manage.jsp
+++ b/openid-connect-server-webapp/src/main/webapp/WEB-INF/views/manage.jsp
@@ -22,11 +22,13 @@
         <div class="span10">
             <div class="content span12">
 				<div id="breadcrumbs"></div>
-				<div id="loadingbox" class="alert alert-warning">
+				<div id="loadingbox" class="sheet hide fade" data-sheet-parent="#breadcrumbs">
+					<div class="sheet-body">
 	                Loading <span id="loading"></span>...
 	                <div class="progress progress-striped active">
 	                	<div class="bar" style="width: 0%"></div>
 	                </div>
+	                </div>
 	            </div>
                 <span id="content">
                 </span>
@@ -34,4 +36,5 @@
         </div>
     </div>
 </div>
-<o:footer js="resources/js/admin.js" />
+
+<o:footer js="resources/js/admin.js" />
\ No newline at end of file
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/css/bootstrap-sheet.css b/openid-connect-server-webapp/src/main/webapp/resources/css/bootstrap-sheet.css
new file mode 100644
index 000000000..ad9e44d60
--- /dev/null
+++ b/openid-connect-server-webapp/src/main/webapp/resources/css/bootstrap-sheet.css
@@ -0,0 +1,57 @@
+/*!
+ * Bootstrap modal sheet
+ *
+ * Author: Michaël Perrin
+ * https://github.com/michaelperrin/bootstrap-modal-sheet
+ */
+
+.sheet form {
+  margin: 0;
+}
+
+.sheet .form-actions {
+  margin-top: 10px;
+  margin-bottom: 0;
+  padding: 10px 20px 10px;
+  text-align: right;
+}
+
+.sheet {
+  position: absolute;
+  z-index: 1050;
+
+  width: 600px;
+  background: rgba(240, 240, 240, 0.9);
+  border-color: #909090;
+  border-style: solid;
+  border-width: 0 1px 1px 1px;
+  box-shadow: inset 0 15px 12px -10px rgba(0, 0, 0, 0.4), 0 5px 12px rgba(0, 0, 0, 0.4);
+  padding-top: 15px;
+}
+
+.sheet.hide {
+  display: none;
+}
+
+.sheet .sheet-body {
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.sheet .sheet-footer {
+  margin-top: 10px;
+  margin-bottom: 0;
+  padding: 10px 20px 10px;
+  text-align: right;
+  background-color: #f5f5f5;
+  border-top: 1px solid #e5e5e5;
+}
+
+.sheet-backdrop {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1040;
+}
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/js/admin.js b/openid-connect-server-webapp/src/main/webapp/resources/js/admin.js
index 47eae91d9..f197e3c1e 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/js/admin.js
+++ b/openid-connect-server-webapp/src/main/webapp/resources/js/admin.js
@@ -272,11 +272,11 @@ var BlackListListView = Backbone.View.extend({
     		return;
     	}
 
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('blacklist');
 
     	$.when(this.model.fetchIfNeeded()).done(function() {
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     	    		callback();
     			});    	
     },
@@ -287,11 +287,11 @@ var BlackListListView = Backbone.View.extend({
 	
     refreshTable:function() {
     	var _self = this;
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('blacklist');
 
     	$.when(this.model.fetchIfNeeded()).done(function() {
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     	    		_self.render();
     			});    	
     },	
@@ -501,7 +501,7 @@ var AppRouter = Backbone.Router.extend({
 	        						        $("#loading").html("console");
 			        						var baseUrl = $.url(app.serverConfiguration.issuer);
 			        						Backbone.history.start({pushState: true, root: baseUrl.attr('relative') + 'manage/'});
-			        						$('#loadingbox').hide('slow');
+			        						$('#loadingbox').sheet('hide');
 /** /
 	        							}
 	        						});
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/js/client.js b/openid-connect-server-webapp/src/main/webapp/resources/js/client.js
index 0d282d1f6..ad1b33641 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/js/client.js
+++ b/openid-connect-server-webapp/src/main/webapp/resources/js/client.js
@@ -244,14 +244,14 @@ var ClientListView = Backbone.View.extend({
     		return;
     	}
     	
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('clients');
 
     	$.when(this.model.fetchIfNeeded(),
     			this.options.whiteListList.fetchIfNeeded(),
     			this.options.stats.fetchIfNeeded(),
     			this.options.systemScopeList.fetchIfNeeded()).done(function() {
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     	    		callback();
     			});
     	
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/js/grant.js b/openid-connect-server-webapp/src/main/webapp/resources/js/grant.js
index 77035c790..c49cb8f59 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/js/grant.js
+++ b/openid-connect-server-webapp/src/main/webapp/resources/js/grant.js
@@ -44,13 +44,13 @@ var ApprovedSiteListView = Backbone.View.extend({
     		return;
     	}
 
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('approved sites');
 
     	$.when(this.model.fetchIfNeeded(),
     			this.options.clientList.fetchIfNeeded(),
     			this.options.systemScopeList.fetchIfNeeded()).done(function() {
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     	    		callback();
     			});    	
     },
@@ -113,13 +113,13 @@ var ApprovedSiteListView = Backbone.View.extend({
 	
     refreshTable:function() {
     	var _self = this;
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('approved sites');
 
     	$.when(this.model.fetch(),
     			this.options.clientList.fetch(),
     			this.options.systemScopeList.fetch()).done(function() {
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     	    		_self.render();
     			});
     }
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/js/lib/bootstrap-sheet.js b/openid-connect-server-webapp/src/main/webapp/resources/js/lib/bootstrap-sheet.js
new file mode 100644
index 000000000..349a46fee
--- /dev/null
+++ b/openid-connect-server-webapp/src/main/webapp/resources/js/lib/bootstrap-sheet.js
@@ -0,0 +1,205 @@
+/**
+ * Bootstrap modal sheet
+ * 
+ * Author: Michaël Perrin
+ * https://github.com/michaelperrin/bootstrap-modal-sheet
+ */
+ 
+(function () {
+  "use strict";
+
+  /*
+   * Sheet class definition
+   */
+
+  var Sheet = function (element, options) {
+    this.options = options;
+    this.$element = $(element)
+      .delegate('[data-dismiss="sheet"]', 'click.dismiss.sheet', $.proxy(this.hide, this));
+    this.options.remote && this.$element.find('.sheet-body').load(this.options.remote);
+  };
+
+  Sheet.prototype = {
+    constructor: Sheet,
+
+    toggle: function () {
+      return this[!this.isShown ? 'show' : 'hide']();
+    },
+
+    show: function () {
+      var e = $.Event('show');
+      var that = this;
+
+      this.$element.trigger(e);
+
+      if (this.isShown || e.isDefaultPrevented()) {
+        return;
+      }
+
+      this.isShown = true;
+
+      this.escape();
+
+      var transition = this.$element.hasClass('fade');
+
+      if (!this.$element.parent().length) {
+        this.$element.appendTo(document.body); //don't move modals dom position
+      }
+
+      this.placeBelowParent();
+
+      if (this.options.backdrop) {
+        this.$backdrop = $('<div class="sheet-backdrop" />')
+          .appendTo(document.body)
+        ;
+
+        this.$backdrop.click(
+          this.options.backdrop == 'static' ?
+            $.proxy(this.$element[0].focus, this.$element[0])
+          : $.proxy(this.hide, this)
+        );
+
+        this.$backdrop.addClass('in');
+      }
+
+      transition ?
+        this.$element.slideDown('fast', function() { that.$element.focus().trigger('shown'); }) :
+        this.$element.show().focus().trigger('shown')
+      ;
+
+      this.$element
+        .addClass('in')
+        .attr('aria-hidden', false)
+        .focus()
+      ;
+    },
+
+    placeBelowParent: function() {
+      if ( ! this.options.sheetParent) {
+        return;
+      }
+
+      var $parent = $(this.options.sheetParent);
+
+      if ( ! $parent) {
+        return;
+      }
+
+      // Compute vertical position
+      var sheetPosition = $parent.offset().top + $parent.height();
+      this.$element.css('top', sheetPosition + 'px');
+
+      // Compute horizontal position (make the sheet centered)
+      var margin = ($parent.width() - this.$element.width()) / 2;
+      var leftPosition = $parent.offset().left + margin;
+
+      this.$element.css('left', leftPosition + 'px');
+    },
+
+    hide: function (e) {
+      e && e.preventDefault();
+
+      var that = this;
+
+      e = $.Event('hide');
+
+      this.$element.trigger(e);
+
+      if (!this.isShown || e.isDefaultPrevented()) {
+        return;
+      }
+
+      this.isShown = false;
+
+      this.escape();
+
+      $(document).off('focusin.sheet');
+
+      this.$element
+        .removeClass('in')
+        .attr('aria-hidden', true)
+      ;
+
+      this.hideSheet();
+    },
+
+    hideSheet: function () {
+      var transition = this.$element.hasClass('fade');
+
+      transition ? this.$element.slideUp('fast') : this.$element.hide();
+      this.removeBackdrop();
+      this.$element.trigger('hidden');
+    },
+
+    removeBackdrop: function () {
+      if ( ! this.options.backdrop) {
+        return;
+      }
+
+      this.$backdrop.remove();
+      this.$backdrop = null;
+    },
+
+    escape: function () {
+      var that = this;
+
+      if (this.isShown && this.options.keyboard) {
+        this.$element.on('keyup.dismiss.sheet', function (e) {
+          e.which == 27 && that.hide();
+        });
+      } else if (!this.isShown) {
+        this.$element.off('keyup.dismiss.sheet');
+      }
+    }
+  };
+
+  /*
+   * jQuery Sheet plugin definition
+   */
+
+  $.fn.sheet = function (option) {
+    return this.each(function () {
+      var $this = $(this);
+
+      var data = $this.data('sheet');
+
+      var options = $.extend({}, $.fn.sheet.defaults, $this.data(), typeof option == 'object' && option);
+
+      if (!data) {
+        $this.data('sheet', (data = new Sheet(this, options)));
+      }
+
+      if (typeof option == 'string') {
+        data[option]();
+      } else if (options.show) {
+        data.show();
+      }
+    });
+  };
+
+  $.fn.sheet.defaults = {
+    keyboard: true,
+    show: true,
+    backdrop: true
+  };
+
+  $.fn.sheet.Constructor = Sheet;
+
+ /* SHEET DATA-API
+  * ============== */
+
+  $(document).on('click.sheet.data-api', '[data-toggle="sheet"]', function (e) {
+    var $this = $(this);
+    var href = $this.attr('href');
+    var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))); //strip for ie7
+    var option = $target.data('sheet') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data());
+
+    e.preventDefault();
+
+    $target
+      .sheet(option)
+      .one('hide', function () {
+        $this.focus();
+      });
+  });
+}).call(this);
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/js/scope.js b/openid-connect-server-webapp/src/main/webapp/resources/js/scope.js
index cd7e310a0..5d2c16ba6 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/js/scope.js
+++ b/openid-connect-server-webapp/src/main/webapp/resources/js/scope.js
@@ -140,11 +140,11 @@ var SystemScopeListView = Backbone.View.extend({
     		return;
     	}
 
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('approved sites');
 
     	$.when(this.model.fetchIfNeeded()).done(function() {
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     	    		callback();
     			});    	
     },
@@ -161,11 +161,11 @@ var SystemScopeListView = Backbone.View.extend({
 	
 	refreshTable:function() {
 		var _self = this;
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('approved sites');
 
     	$.when(this.model.fetch()).done(function() {
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     	    		_self.render();
     			});    	
 	},
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/js/token.js b/openid-connect-server-webapp/src/main/webapp/resources/js/token.js
index ade8e2e70..c044ffd83 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/js/token.js
+++ b/openid-connect-server-webapp/src/main/webapp/resources/js/token.js
@@ -320,21 +320,21 @@ var TokenListView = Backbone.View.extend({
     		return;
     	}
 
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('tokens');
 
     	$.when(this.model.access.fetchIfNeeded(),
     			this.model.refresh.fetchIfNeeded(),
     			this.options.clientList.fetchIfNeeded(),
     			this.options.systemScopeList.fetchIfNeeded()).done(function() {
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     	    		callback();
     	    	});
     	
     },
 
     refreshTable:function() {
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('tokens');
     	var _self = this;
     	$.when(this.model.access.fetch(),
@@ -342,7 +342,7 @@ var TokenListView = Backbone.View.extend({
     			this.options.clientList.fetch(),
     			this.options.systemScopeList.fetch()).done(function(){
     				_self.render();
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     			});
 	},
 	
diff --git a/openid-connect-server-webapp/src/main/webapp/resources/js/whitelist.js b/openid-connect-server-webapp/src/main/webapp/resources/js/whitelist.js
index e9b829139..a27b79919 100644
--- a/openid-connect-server-webapp/src/main/webapp/resources/js/whitelist.js
+++ b/openid-connect-server-webapp/src/main/webapp/resources/js/whitelist.js
@@ -58,13 +58,13 @@ var WhiteListListView = Backbone.View.extend({
     		return;
     	}
 
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('whitelist');
 
     	$.when(this.model.fetchIfNeeded(),
     			this.options.clientList.fetchIfNeeded(),
     			this.options.systemScopeList.fetchIfNeeded()).done(function() {
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     	    		callback();
     			});    	
     },
@@ -105,13 +105,13 @@ var WhiteListListView = Backbone.View.extend({
 	
     refreshTable:function() {
     	var _self = this;
-    	$('#loadingbox').show();
+    	$('#loadingbox').sheet('show');
     	$('#loading').html('whitelist');
 
     	$.when(this.model.fetchIfNeeded(),
     			this.options.clientList.fetchIfNeeded(),
     			this.options.systemScopeList.fetchIfNeeded()).done(function() {
-    	    		$('#loadingbox').hide('slow');
+    	    		$('#loadingbox').sheet('hide');
     	    		_self.render();
     			});    	
     }