added Not Yet Implemented tags

pull/306/merge
Justin Richer 2013-03-05 15:31:14 -05:00
parent 9b6dfd4e1d
commit 79bf862924
5 changed files with 438 additions and 13 deletions

208
bootstrapx-clickover.js Normal file
View File

@ -0,0 +1,208 @@
/* ==========================================================
* bootstrapx-clickover.js
* https://github.com/lecar-red/bootstrapx-clickover
* version: 1.0
* ==========================================================
*
* Based on work from Twitter Bootstrap and
* from Popover library http://twitter.github.com/bootstrap/javascript.html#popover
* from the great guys at Twitter.
*
* Untested with 2.1.0 but should worked with 2.0.x
*
* ========================================================== */
!function($) {
"use strict"
/* class definition */
var Clickover = function ( element, options ) {
// local init
this.cinit('clickover', element, options );
}
Clickover.prototype = $.extend({}, $.fn.popover.Constructor.prototype, {
constructor: Clickover
, cinit: function( type, element, options ) {
this.attr = {};
// choose random attrs instead of timestamp ones
this.attr.me = ((Math.random() * 10) + "").replace(/\D/g, '');
this.attr.click_event_ns = "click." + this.attr.me + " touchstart." + this.attr.me;
if (!options) options = {};
options.trigger = 'manual';
// call parent
this.init( type, element, options );
// setup our own handlers
this.$element.on( 'click', this.options.selector, $.proxy(this.clickery, this) );
// soon add click hanlder to body to close this element
// will need custom handler inside here
}
, clickery: function(e) {
// clickery isn't only run by event handlers can be called by timeout or manually
// only run our click handler and
// need to stop progration or body click handler would fire right away
if (e) {
e.preventDefault();
e.stopPropagation();
}
// set popover's dim's
this.options.width && this.tip().width( this.options.width );
this.options.height && this.tip().height( this.options.height );
// set popover's tip 'id' for greater control of rendering or css rules
this.options.tip_id && this.tip().attr('id', this.options.tip_id );
// add a custom class
this.options.class_name && this.tip().addClass(this.options.class_name);
// we could override this to provide show and hide hooks
this[ this.isShown() ? 'hide' : 'show' ]();
// if shown add global click closer
if ( this.isShown() ) {
var that = this;
// close on global request, exclude clicks inside clickover
this.options.global_close &&
$('body').on( this.attr.click_event_ns, function(e) {
if ( !that.tip().has(e.target).length ) { that.clickery(); }
});
this.options.esc_close && $(document).bind('keyup.clickery', function(e) {
if (e.keyCode == 27) { that.clickery(); }
return;
});
// first check for others that might be open
// wanted to use 'click' but might accidently trigger other custom click handlers
// on clickover elements
!this.options.allow_multiple &&
$('[data-clickover-open=1]').each( function() {
$(this).data('clickover') && $(this).data('clickover').clickery(); });
// help us track elements w/ open clickovers using html5
this.$element.attr('data-clickover-open', 1);
// if element has close button then make that work, like to
// add option close_selector
this.tip().on('click', '[data-dismiss="clickover"]', $.proxy(this.clickery, this));
// trigger timeout hide
if ( this.options.auto_close && this.options.auto_close > 0 ) {
this.attr.tid =
setTimeout( $.proxy(this.clickery, this), this.options.auto_close );
}
// provide callback hooks for post shown event
typeof this.options.onShown == 'function' && this.options.onShown.call(this);
this.$element.trigger('shown');
}
else {
this.$element.removeAttr('data-clickover-open');
this.options.esc_close && $(document).unbind('keyup.clickery');
$('body').off( this.attr.click_event_ns );
if ( typeof this.attr.tid == "number" ) {
clearTimeout(this.attr.tid);
delete this.attr.tid;
}
// provide some callback hooks
typeof this.options.onHidden == 'function' && this.options.onHidden.call(this);
this.$element.trigger('hidden');
}
}
, isShown: function() {
return this.tip().hasClass('in');
}
, resetPosition: function() {
var $tip
, inside
, pos
, actualWidth
, actualHeight
, placement
, tp
if (this.hasContent() && this.enabled) {
$tip = this.tip()
placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
inside = /in/.test(placement)
pos = this.getPosition(inside)
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
switch (inside ? placement.split(' ')[1] : placement) {
case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'top':
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'left':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
break
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
break
}
$tip.css(tp)
}
}
, debughide: function() {
var dt = new Date().toString();
console.log(dt + ": clickover hide");
this.hide();
}
})
/* plugin definition */
/* stolen from bootstrap tooltip.js */
$.fn.clickover = function( option ) {
return this.each(function() {
var $this = $(this)
, data = $this.data('clickover')
, options = typeof option == 'object' && option
if (!data) $this.data('clickover', (data = new Clickover(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.clickover.Constructor = Clickover
// these defaults are passed directly to parent classes
$.fn.clickover.defaults = $.extend({}, $.fn.popover.defaults, {
trigger: 'manual',
auto_close: 0, /* ms to auto close clickover, 0 means none */
global_close: 1, /* allow close when clicked away from clickover */
esc_close: 1, /* allow clickover to close when esc key is pressed */
onShown: null, /* function to be run once clickover has been shown */
onHidden: null, /* function to be run once clickover has been hidden */
width: null, /* number is px (don't add px), null or 0 - don't set anything */
height: null, /* number is px (don't add px), null or 0 - don't set anything */
tip_id: null, /* id of popover container */
class_name: 'clickover', /* default class name in addition to other classes */
allow_multiple: 0 /* enable to allow for multiple clickovers to be open at the same time */
})
}( window.jQuery );

View File

@ -8,6 +8,7 @@
<script type="text/javascript" src="resources/js/lib/underscore.js"></script>
<script type="text/javascript" src="resources/js/lib/backbone.js"></script>
<script type="text/javascript" src="resources/js/lib/purl.js"></script>
<script type="text/javascript" src="resources/js/lib/bootstrapx-clickover.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>

View File

@ -396,7 +396,7 @@ var ClientFormView = Backbone.View.extend({
sectorIdentifierUri: $('#sectorIdentifierUri input').val(),
initiateLoginUri: $('#initiateLoginUri input').val(),
postLogoutRedirectUri: $('#postLogoutRedirectUri input').val(),
reuseRefreshToken: $('#reuseRefreshToken').is(':checked') // TODO: another funny checkbox
reuseRefreshToken: $('#reuseRefreshToken').is(':checked'), // TODO: another funny checkbox
requireAuthTime: $('#requireAuthTime input').is(':checked'),
defaultMaxAge: $('#defaultMaxAge input').val(), // TODO: validate integer
@ -496,6 +496,14 @@ var ClientFormView = Backbone.View.extend({
this.toggleRequireClientSecret();
this.previewLogo();
this.$('.nyi').clickover({
placement: 'right',
title: 'Not Yet Implemented',
content: 'The value of this field will be saved with the client, '
+'but the server does not currently process anything with it. '
+'Future versions of the server library will make use of this.'
});
return this;
}
});

View File

@ -0,0 +1,208 @@
/* ==========================================================
* bootstrapx-clickover.js
* https://github.com/lecar-red/bootstrapx-clickover
* version: 1.0
* ==========================================================
*
* Based on work from Twitter Bootstrap and
* from Popover library http://twitter.github.com/bootstrap/javascript.html#popover
* from the great guys at Twitter.
*
* Untested with 2.1.0 but should worked with 2.0.x
*
* ========================================================== */
!function($) {
"use strict"
/* class definition */
var Clickover = function ( element, options ) {
// local init
this.cinit('clickover', element, options );
}
Clickover.prototype = $.extend({}, $.fn.popover.Constructor.prototype, {
constructor: Clickover
, cinit: function( type, element, options ) {
this.attr = {};
// choose random attrs instead of timestamp ones
this.attr.me = ((Math.random() * 10) + "").replace(/\D/g, '');
this.attr.click_event_ns = "click." + this.attr.me + " touchstart." + this.attr.me;
if (!options) options = {};
options.trigger = 'manual';
// call parent
this.init( type, element, options );
// setup our own handlers
this.$element.on( 'click', this.options.selector, $.proxy(this.clickery, this) );
// soon add click hanlder to body to close this element
// will need custom handler inside here
}
, clickery: function(e) {
// clickery isn't only run by event handlers can be called by timeout or manually
// only run our click handler and
// need to stop progration or body click handler would fire right away
if (e) {
e.preventDefault();
e.stopPropagation();
}
// set popover's dim's
this.options.width && this.tip().width( this.options.width );
this.options.height && this.tip().height( this.options.height );
// set popover's tip 'id' for greater control of rendering or css rules
this.options.tip_id && this.tip().attr('id', this.options.tip_id );
// add a custom class
this.options.class_name && this.tip().addClass(this.options.class_name);
// we could override this to provide show and hide hooks
this[ this.isShown() ? 'hide' : 'show' ]();
// if shown add global click closer
if ( this.isShown() ) {
var that = this;
// close on global request, exclude clicks inside clickover
this.options.global_close &&
$('body').on( this.attr.click_event_ns, function(e) {
if ( !that.tip().has(e.target).length ) { that.clickery(); }
});
this.options.esc_close && $(document).bind('keyup.clickery', function(e) {
if (e.keyCode == 27) { that.clickery(); }
return;
});
// first check for others that might be open
// wanted to use 'click' but might accidently trigger other custom click handlers
// on clickover elements
!this.options.allow_multiple &&
$('[data-clickover-open=1]').each( function() {
$(this).data('clickover') && $(this).data('clickover').clickery(); });
// help us track elements w/ open clickovers using html5
this.$element.attr('data-clickover-open', 1);
// if element has close button then make that work, like to
// add option close_selector
this.tip().on('click', '[data-dismiss="clickover"]', $.proxy(this.clickery, this));
// trigger timeout hide
if ( this.options.auto_close && this.options.auto_close > 0 ) {
this.attr.tid =
setTimeout( $.proxy(this.clickery, this), this.options.auto_close );
}
// provide callback hooks for post shown event
typeof this.options.onShown == 'function' && this.options.onShown.call(this);
this.$element.trigger('shown');
}
else {
this.$element.removeAttr('data-clickover-open');
this.options.esc_close && $(document).unbind('keyup.clickery');
$('body').off( this.attr.click_event_ns );
if ( typeof this.attr.tid == "number" ) {
clearTimeout(this.attr.tid);
delete this.attr.tid;
}
// provide some callback hooks
typeof this.options.onHidden == 'function' && this.options.onHidden.call(this);
this.$element.trigger('hidden');
}
}
, isShown: function() {
return this.tip().hasClass('in');
}
, resetPosition: function() {
var $tip
, inside
, pos
, actualWidth
, actualHeight
, placement
, tp
if (this.hasContent() && this.enabled) {
$tip = this.tip()
placement = typeof this.options.placement == 'function' ?
this.options.placement.call(this, $tip[0], this.$element[0]) :
this.options.placement
inside = /in/.test(placement)
pos = this.getPosition(inside)
actualWidth = $tip[0].offsetWidth
actualHeight = $tip[0].offsetHeight
switch (inside ? placement.split(' ')[1] : placement) {
case 'bottom':
tp = {top: pos.top + pos.height, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'top':
tp = {top: pos.top - actualHeight, left: pos.left + pos.width / 2 - actualWidth / 2}
break
case 'left':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left - actualWidth}
break
case 'right':
tp = {top: pos.top + pos.height / 2 - actualHeight / 2, left: pos.left + pos.width}
break
}
$tip.css(tp)
}
}
, debughide: function() {
var dt = new Date().toString();
console.log(dt + ": clickover hide");
this.hide();
}
})
/* plugin definition */
/* stolen from bootstrap tooltip.js */
$.fn.clickover = function( option ) {
return this.each(function() {
var $this = $(this)
, data = $this.data('clickover')
, options = typeof option == 'object' && option
if (!data) $this.data('clickover', (data = new Clickover(this, options)))
if (typeof option == 'string') data[option]()
})
}
$.fn.clickover.Constructor = Clickover
// these defaults are passed directly to parent classes
$.fn.clickover.defaults = $.extend({}, $.fn.popover.defaults, {
trigger: 'manual',
auto_close: 0, /* ms to auto close clickover, 0 means none */
global_close: 1, /* allow close when clicked away from clickover */
esc_close: 1, /* allow clickover to close when esc key is pressed */
onShown: null, /* function to be run once clickover has been shown */
onHidden: null, /* function to be run once clickover has been hidden */
width: null, /* number is px (don't add px), null or 0 - don't set anything */
height: null, /* number is px (don't add px), null or 0 - don't set anything */
tip_id: null, /* id of popover container */
class_name: 'clickover', /* default class name in addition to other classes */
allow_multiple: 0 /* enable to allow for multiple clickovers to be open at the same time */
})
}( window.jQuery );

View File

@ -129,7 +129,7 @@
</div>
<div class="control-group" id="tosUri">
<label class="control-label">Terms of Service</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Terms of Service</label>
<div class="controls">
<input placeholder="http://" value="<%=tosUri%>" maxlength="1000" type="text" class=""/>
<p class="help-block">URL for the Terms of Service of this client, will be displayed to the user</p>
@ -137,7 +137,7 @@
</div>
<div class="control-group" id="policyUri">
<label class="control-label">Policy</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Policy</label>
<div class="controls">
<input placeholder="http://" value="<%=policyUri%>" maxlength="1000" type="text" class=""/>
<p class="help-block">URL for the Policy Statement of this client, will be displayed to the user</p>
@ -145,7 +145,7 @@
</div>
<div class="control-group" id="clientUri">
<label class="control-label">Home Page</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Home Page</label>
<div class="controls">
<input placeholder="http://" value="<%=clientUri%>" maxlength="1000" type="text" class=""/>
<p class="help-block">URL for the client's home page, will be displayed to the user</p>
@ -153,7 +153,7 @@
</div>
<div class="control-group" id="applicationType">
<label class="control-label">Application Type</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Application Type</label>
<div class="controls">
<label class="radio inline">
<input type="radio" name="applicationType" value="NATIVE" <%=(applicationType == 'NATIVE' ? 'checked' : '')%>> Native
@ -211,7 +211,7 @@
</div>
<div class="control-group" id="responseTypes">
<label class="control-label">Response Types</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Response Types</label>
<div class="controls">
<label class="checkbox">
@ -251,7 +251,7 @@
<div class="tab-pane" id="client-secret-tab">
<div class="control-group" id="tokenEndpointAuthMethod">
<label class="control-label">Token Endpoint Authentication Method</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Token Endpoint Authentication Method</label>
<div class="controls">
<label class="radio inline">
<input type="radio" name="tokenEndpointAuthMethod" value="SECRET_BASIC" <%=(tokenEndpointAuthMethod == 'SECRET_BASIC' ? 'checked' : '')%>> Client Secret over HTTP Basic
@ -386,7 +386,7 @@
<div class="tab-pane" id="client-other-tab">
<div class="control-group" id="subjectType">
<label class="control-label">Subject Type</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Subject Type</label>
<div class="controls">
<label class="radio inline">
<input type="radio" name="subjectType" value="PUBLIC" <%=(subjectType == 'PUBLIC' ? 'checked' : '')%>> Public
@ -398,7 +398,7 @@
</div>
<div class="control-group" id="initiateLoginUri">
<label class="control-label">Initiate Login</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Initiate Login</label>
<div class="controls">
<input placeholder="http://" value="<%=initiateLoginUri%>" maxlength="1000" type="text" class=""/>
<p class="help-block">URL to initiate login on the client</p>
@ -406,7 +406,7 @@
</div>
<div class="control-group" id="postLogoutRedirectUri">
<label class="control-label">Post-Logout Redirect</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Post-Logout Redirect</label>
<div class="controls">
<input placeholder="http://" value="<%=postLogoutRedirectUri%>" maxlength="1000" type="text" class=""/>
<p class="help-block">URL to redirect the client to after a logout operation</p>
@ -415,7 +415,7 @@
<div class="control-group" id="requireAuthTime">
<label class="control-label">Require Auth Time</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Require Auth Time</label>
<div class="controls">
<label class="checkbox">
<input type="checkbox" <%=(requireAuthTime == true ? 'checked' : '')%>> Always require that the auth_time claim be sent in the id token
@ -424,7 +424,7 @@
</div>
<div class="control-group" id="defaultMaxAge">
<label class="control-label">Default Max Age</label>
<label class="control-label"><span class="label label-default nyi"><i class="icon-road icon-white"></i> NYI </span> Default Max Age</label>
<div class="controls">
<input placeholder="" value="<%=defaultMaxAge%>" maxlength="1000" type="text" class=""/>
<p class="help-block">Default maximum session age before re-prompting</p>