Skip to content

Commit 200b332

Browse files
jricherjricher
committed
some fun in the sheets
1 parent 6b94c04 commit 200b332

File tree

11 files changed

+293
-25
lines changed

11 files changed

+293
-25
lines changed

‎openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/footer.tag‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@
2222
<script type="text/javascript" src="resources/js/lib/bootstrapx-clickover.js"></script>
2323
<script type="text/javascript" src="resources/js/lib/moment.js"></script>
2424
<script type="text/javascript" src="resources/js/lib/retina.js"></script>
25+
<script type="text/javascript" src="resources/js/lib/bootstrap-sheet.js"></script>
2526
<c:if test="${js != null && js != ''}">
2627
<script type="text/javascript" src="resources/js/client.js"></script>
2728
<script type="text/javascript" src="resources/js/grant.js"></script>

‎openid-connect-server-webapp/src/main/webapp/WEB-INF/tags/header.tag‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,8 @@
1616

1717
<!-- Le styles -->
1818
<link href="resources/bootstrap2/css/bootstrap.min.css" rel="stylesheet">
19+
<link href="resources/css/bootstrap-sheet.css" rel="stylesheet">
20+
1921
<style type="text/css">
2022
2123
html,

‎openid-connect-server-webapp/src/main/webapp/WEB-INF/views/manage.jsp‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,16 +22,19 @@
2222
<div class="span10">
2323
<div class="content span12">
2424
<div id="breadcrumbs"></div>
25-
<div id="loadingbox" class="alert alert-warning">
25+
<div id="loadingbox" class="sheet hide fade" data-sheet-parent="#breadcrumbs">
26+
<div class="sheet-body">
2627
Loading <span id="loading"></span>...
2728
<div class="progress progress-striped active">
2829
<div class="bar" style="width: 0%"></div>
2930
</div>
31+
</div>
3032
</div>
3133
<span id="content">
3234
</span>
3335
</div>
3436
</div>
3537
</div>
3638
</div>
37-
<o:footer js="resources/js/admin.js" />
39+
40+
<o:footer js="resources/js/admin.js" />

‎openid-connect-server-webapp/src/main/webapp/resources/css/bootstrap-sheet.css‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
/*!
2+
* Bootstrap modal sheet
3+
*
4+
* Author: Michaël Perrin
5+
* https://github.com/michaelperrin/bootstrap-modal-sheet
6+
*/
7+
8+
.sheet form {
9+
margin: 0;
10+
}
11+
12+
.sheet .form-actions {
13+
margin-top: 10px;
14+
margin-bottom: 0;
15+
padding: 10px 20px 10px;
16+
text-align: right;
17+
}
18+
19+
.sheet {
20+
position: absolute;
21+
z-index: 1050;
22+
23+
width: 600px;
24+
background: rgba(240, 240, 240, 0.9);
25+
border-color: #909090;
26+
border-style: solid;
27+
border-width: 0 1px 1px 1px;
28+
box-shadow: inset 0 15px 12px -10px rgba(0, 0, 0, 0.4), 0 5px 12px rgba(0, 0, 0, 0.4);
29+
padding-top: 15px;
30+
}
31+
32+
.sheet.hide {
33+
display: none;
34+
}
35+
36+
.sheet .sheet-body {
37+
padding-left: 15px;
38+
padding-right: 15px;
39+
}
40+
41+
.sheet .sheet-footer {
42+
margin-top: 10px;
43+
margin-bottom: 0;
44+
padding: 10px 20px 10px;
45+
text-align: right;
46+
background-color: #f5f5f5;
47+
border-top: 1px solid #e5e5e5;
48+
}
49+
50+
.sheet-backdrop {
51+
position: fixed;
52+
top: 0;
53+
right: 0;
54+
bottom: 0;
55+
left: 0;
56+
z-index: 1040;
57+
}

‎openid-connect-server-webapp/src/main/webapp/resources/js/admin.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -272,11 +272,11 @@ var BlackListListView = Backbone.View.extend({
272272
return;
273273
}
274274

275-
$('#loadingbox').show();
275+
$('#loadingbox').sheet('show');
276276
$('#loading').html('blacklist');
277277

278278
$.when(this.model.fetchIfNeeded()).done(function() {
279-
$('#loadingbox').hide('slow');
279+
$('#loadingbox').sheet('hide');
280280
callback();
281281
});
282282
},
@@ -287,11 +287,11 @@ var BlackListListView = Backbone.View.extend({
287287

288288
refreshTable:function() {
289289
var _self = this;
290-
$('#loadingbox').show();
290+
$('#loadingbox').sheet('show');
291291
$('#loading').html('blacklist');
292292

293293
$.when(this.model.fetchIfNeeded()).done(function() {
294-
$('#loadingbox').hide('slow');
294+
$('#loadingbox').sheet('hide');
295295
_self.render();
296296
});
297297
},
@@ -501,7 +501,7 @@ var AppRouter = Backbone.Router.extend({
501501
$("#loading").html("console");
502502
var baseUrl = $.url(app.serverConfiguration.issuer);
503503
Backbone.history.start({pushState: true, root: baseUrl.attr('relative') + 'manage/'});
504-
$('#loadingbox').hide('slow');
504+
$('#loadingbox').sheet('hide');
505505
/** /
506506
}
507507
});

‎openid-connect-server-webapp/src/main/webapp/resources/js/client.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -244,14 +244,14 @@ var ClientListView = Backbone.View.extend({
244244
return;
245245
}
246246

247-
$('#loadingbox').show();
247+
$('#loadingbox').sheet('show');
248248
$('#loading').html('clients');
249249

250250
$.when(this.model.fetchIfNeeded(),
251251
this.options.whiteListList.fetchIfNeeded(),
252252
this.options.stats.fetchIfNeeded(),
253253
this.options.systemScopeList.fetchIfNeeded()).done(function() {
254-
$('#loadingbox').hide('slow');
254+
$('#loadingbox').sheet('hide');
255255
callback();
256256
});
257257

‎openid-connect-server-webapp/src/main/webapp/resources/js/grant.js‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -44,13 +44,13 @@ var ApprovedSiteListView = Backbone.View.extend({
4444
return;
4545
}
4646

47-
$('#loadingbox').show();
47+
$('#loadingbox').sheet('show');
4848
$('#loading').html('approved sites');
4949

5050
$.when(this.model.fetchIfNeeded(),
5151
this.options.clientList.fetchIfNeeded(),
5252
this.options.systemScopeList.fetchIfNeeded()).done(function() {
53-
$('#loadingbox').hide('slow');
53+
$('#loadingbox').sheet('hide');
5454
callback();
5555
});
5656
},
@@ -113,13 +113,13 @@ var ApprovedSiteListView = Backbone.View.extend({
113113

114114
refreshTable:function() {
115115
var _self = this;
116-
$('#loadingbox').show();
116+
$('#loadingbox').sheet('show');
117117
$('#loading').html('approved sites');
118118

119119
$.when(this.model.fetch(),
120120
this.options.clientList.fetch(),
121121
this.options.systemScopeList.fetch()).done(function() {
122-
$('#loadingbox').hide('slow');
122+
$('#loadingbox').sheet('hide');
123123
_self.render();
124124
});
125125
}

‎openid-connect-server-webapp/src/main/webapp/resources/js/lib/bootstrap-sheet.js‎

Lines changed: 205 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
/**
2+
* Bootstrap modal sheet
3+
*
4+
* Author: Michaël Perrin
5+
* https://github.com/michaelperrin/bootstrap-modal-sheet
6+
*/
7+
8+
(function () {
9+
"use strict";
10+
11+
/*
12+
* Sheet class definition
13+
*/
14+
15+
var Sheet = function (element, options) {
16+
this.options = options;
17+
this.$element = $(element)
18+
.delegate('[data-dismiss="sheet"]', 'click.dismiss.sheet', $.proxy(this.hide, this));
19+
this.options.remote && this.$element.find('.sheet-body').load(this.options.remote);
20+
};
21+
22+
Sheet.prototype = {
23+
constructor: Sheet,
24+
25+
toggle: function () {
26+
return this[!this.isShown ? 'show' : 'hide']();
27+
},
28+
29+
show: function () {
30+
var e = $.Event('show');
31+
var that = this;
32+
33+
this.$element.trigger(e);
34+
35+
if (this.isShown || e.isDefaultPrevented()) {
36+
return;
37+
}
38+
39+
this.isShown = true;
40+
41+
this.escape();
42+
43+
var transition = this.$element.hasClass('fade');
44+
45+
if (!this.$element.parent().length) {
46+
this.$element.appendTo(document.body); //don't move modals dom position
47+
}
48+
49+
this.placeBelowParent();
50+
51+
if (this.options.backdrop) {
52+
this.$backdrop = $('<div class="sheet-backdrop" />')
53+
.appendTo(document.body)
54+
;
55+
56+
this.$backdrop.click(
57+
this.options.backdrop == 'static' ?
58+
$.proxy(this.$element[0].focus, this.$element[0])
59+
: $.proxy(this.hide, this)
60+
);
61+
62+
this.$backdrop.addClass('in');
63+
}
64+
65+
transition ?
66+
this.$element.slideDown('fast', function() { that.$element.focus().trigger('shown'); }) :
67+
this.$element.show().focus().trigger('shown')
68+
;
69+
70+
this.$element
71+
.addClass('in')
72+
.attr('aria-hidden', false)
73+
.focus()
74+
;
75+
},
76+
77+
placeBelowParent: function() {
78+
if ( ! this.options.sheetParent) {
79+
return;
80+
}
81+
82+
var $parent = $(this.options.sheetParent);
83+
84+
if ( ! $parent) {
85+
return;
86+
}
87+
88+
// Compute vertical position
89+
var sheetPosition = $parent.offset().top + $parent.height();
90+
this.$element.css('top', sheetPosition + 'px');
91+
92+
// Compute horizontal position (make the sheet centered)
93+
var margin = ($parent.width() - this.$element.width()) / 2;
94+
var leftPosition = $parent.offset().left + margin;
95+
96+
this.$element.css('left', leftPosition + 'px');
97+
},
98+
99+
hide: function (e) {
100+
e && e.preventDefault();
101+
102+
var that = this;
103+
104+
e = $.Event('hide');
105+
106+
this.$element.trigger(e);
107+
108+
if (!this.isShown || e.isDefaultPrevented()) {
109+
return;
110+
}
111+
112+
this.isShown = false;
113+
114+
this.escape();
115+
116+
$(document).off('focusin.sheet');
117+
118+
this.$element
119+
.removeClass('in')
120+
.attr('aria-hidden', true)
121+
;
122+
123+
this.hideSheet();
124+
},
125+
126+
hideSheet: function () {
127+
var transition = this.$element.hasClass('fade');
128+
129+
transition ? this.$element.slideUp('fast') : this.$element.hide();
130+
this.removeBackdrop();
131+
this.$element.trigger('hidden');
132+
},
133+
134+
removeBackdrop: function () {
135+
if ( ! this.options.backdrop) {
136+
return;
137+
}
138+
139+
this.$backdrop.remove();
140+
this.$backdrop = null;
141+
},
142+
143+
escape: function () {
144+
var that = this;
145+
146+
if (this.isShown && this.options.keyboard) {
147+
this.$element.on('keyup.dismiss.sheet', function (e) {
148+
e.which == 27 && that.hide();
149+
});
150+
} else if (!this.isShown) {
151+
this.$element.off('keyup.dismiss.sheet');
152+
}
153+
}
154+
};
155+
156+
/*
157+
* jQuery Sheet plugin definition
158+
*/
159+
160+
$.fn.sheet = function (option) {
161+
return this.each(function () {
162+
var $this = $(this);
163+
164+
var data = $this.data('sheet');
165+
166+
var options = $.extend({}, $.fn.sheet.defaults, $this.data(), typeof option == 'object' && option);
167+
168+
if (!data) {
169+
$this.data('sheet', (data = new Sheet(this, options)));
170+
}
171+
172+
if (typeof option == 'string') {
173+
data[option]();
174+
} else if (options.show) {
175+
data.show();
176+
}
177+
});
178+
};
179+
180+
$.fn.sheet.defaults = {
181+
keyboard: true,
182+
show: true,
183+
backdrop: true
184+
};
185+
186+
$.fn.sheet.Constructor = Sheet;
187+
188+
/* SHEET DATA-API
189+
* ============== */
190+
191+
$(document).on('click.sheet.data-api', '[data-toggle="sheet"]', function (e) {
192+
var $this = $(this);
193+
var href = $this.attr('href');
194+
var $target = $($this.attr('data-target') || (href && href.replace(/.*(?=#[^\s]+$)/, ''))); //strip for ie7
195+
var option = $target.data('sheet') ? 'toggle' : $.extend({ remote:!/#/.test(href) && href }, $target.data(), $this.data());
196+
197+
e.preventDefault();
198+
199+
$target
200+
.sheet(option)
201+
.one('hide', function () {
202+
$this.focus();
203+
});
204+
});
205+
}).call(this);

0 commit comments

Comments
 (0)