libre.sh/keycloak-scim
3
0
Fork 0
Code Issues 15 Pull requests Releases 1 Packages Activity Actions

KEYCLOAK-340 refactoring of on/off switch

Browse source
This commit is contained in:
Viliam Rockai 2014-02-27 14:21:18 +01:00
parent a1dca73ad3
commit b413636bf5
3 changed files with 36 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
admin-ui-styles/src/main/resources/META-INF/resources/admin-ui/css/admin-console.css
View file

@ -355,8 +355,8 @@ header .navbar {
color: #FFFFFF; color: #FFFFFF;
padding-left: 10px; padding-left: 10px;
} }
.onoffswitch.disabled .onoffswitch-inner .onoffswitch-active, .onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner .onoffswitch-active,
.onoffswitch.disabled .onoffswitch-inner .onoffswitch-inactive { .onoffswitch-checkbox:disabled + .onoffswitch-label .onoffswitch-inner .onoffswitch-inactive {
background-image: none; background-image: none;
background-color: #e5e5e5; background-color: #e5e5e5;
color: #9d9fa1; color: #9d9fa1;

43
admin-ui/src/main/resources/META-INF/resources/admin/js/app.js
View file

@ -640,35 +640,36 @@ module.directive('collapsed', function() {
module.directive('onoffswitch', function() { module.directive('onoffswitch', function() {
return { return {
restrict: "EA", restrict: "EA",
require: 'ngModel',
replace: true, replace: true,
scope: { scope: {
name: '@',
id: '@',
ngModel: '=', ngModel: '=',
ngDisabled: '=', kcOnText: '@onText',
ngBind: '=', kcOffText: '@offText'
name: '=',
id: '=',
onText: '@onText',
offText: '@offText'
}, },
// TODO - The same code acts differently when put into the templateURL. Find why and move the code there.
//templateUrl: "templates/kc-switch.html",
template: "<span><div class='onoffswitch' tabindex='0'><input type='checkbox' ng-model='ngModel' class='onoffswitch-checkbox' name='{{name}}' id='{{id}}'><label for='{{id}}' class='onoffswitch-label'><span class='onoffswitch-inner'><span class='onoffswitch-active'>{{kcOnText}}</span><span class='onoffswitch-inactive'>{{kcOffText}}</span></span><span class='onoffswitch-switch'></span></label></div></span>",
compile: function(element, attrs) { compile: function(element, attrs) {
/*
We don't want to propagate basic attributes to the root element of directive. Id should be passed to the
input element only to achieve proper label binding (and validity).
*/
element.removeAttr('name');
element.removeAttr('id');
if (!attrs.onText) { attrs.onText = "ON"; } if (!attrs.onText) { attrs.onText = "ON"; }
if (!attrs.offText) { attrs.offText = "OFF"; } if (!attrs.offText) { attrs.offText = "OFF"; }
if (!attrs.ngDisabled) { attrs.ngDisabled = false; }
var html = "<span><div class=\"onoffswitch\" data-ng-class=\"{disabled: ngDisabled}\" tabindex=\"0\" onkeydown=\"var code = event.keyCode || event.which; if (code === 32 || code === 13) { event.stopImmediatePropagation(); event.preventDefault(); $(event.target).find('input').click();}\">" + element.bind('keydown', function(e){
"<input type=\"checkbox\" data-ng-model=\"ngModel\" ng-disabled=\"ngDisabled\"" + var code = e.keyCode || e.which;
" class=\"onoffswitch-checkbox\" name=\"" + attrs.name + "\" id=\"" + attrs.id + "\">" + if (code === 32 || code === 13) {
"<label for=\"" + attrs.id + "\" class=\"onoffswitch-label\">" + e.stopImmediatePropagation();
"<span class=\"onoffswitch-inner\">" + e.preventDefault();
"<span class=\"onoffswitch-active\">{{onText}}</span>" + $(e.target).find('input').click();
"<span class=\"onoffswitch-inactive\">{{offText}}</span>" + }
"</span>" + });
"<span class=\"onoffswitch-switch\"></span>" +
"</label>" +
"</div></span>";
element.replaceWith($(html));
} }
} }
}); });

12
admin-ui/src/main/resources/META-INF/resources/admin/templates/kc-switch.html Normal file
View file

@ -0,0 +1,12 @@
<span>
<div class='onoffswitch' tabindex='0'>
<input type='checkbox' ng-model='ngModel' class='onoffswitch-checkbox' name='{{name}}' id='{{id}}'>
<label for='{{id}}' class='onoffswitch-label'>
<span class='onoffswitch-inner'>
<span class='onoffswitch-active'>{{kcOnText}}</span>
<span class='onoffswitch-inactive'>{{kcOffText}}</span>
</span>
<span class='onoffswitch-switch'></span>
</label>
</div>
</span>