some fun in the sheets
Justin Richer
parent
6b94c0418a
commit
200b332dc6
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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" />
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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');
|
||||
/** /
|
||||
}
|
||||
});
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
@ -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();
|
||||
});
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue