merged cont.
[opensuse:yast-rest-service.git] / webyast / public / javascripts / webyast-roles.js
1 /*
2 #--
3 # Webyast Webservice framework
4 #
5 # Copyright (C) 2009, 2010 Novell, Inc.
6 #   This library is free software; you can redistribute it and/or modify
7 # it only under the terms of version 2.1 of the GNU Lesser General Public
8 # License as published by the Free Software Foundation.
9 #
10 #   This library is distributed in the hope that it will be useful, but WITHOUT
11 # ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS
12 # FOR A PARTICULAR PURPOSE. See the GNU Lesser General Public License for more
13 # details.
14 #
15 #   You should have received a copy of the GNU Lesser General Public
16 # License along with this library; if not, write to the Free Software
17 # Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301 USA
18 #++
19 */
20
21 (function($){
22   $.fn.extend({
23     center: function (element) {
24       return this.each(function() {
25         var elemTop= $(element).position().top;
26         var elemHeight = ($(this).outerHeight(true));
27         var top = (elemTop + (elemHeight/2)) - ($(this).height()/2)+2;
28         var left = $(element).position().left + ($(element).outerWidth()/2) - ($(this).outerWidth()/2);
29         $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
30       });
31     },
32
33     right: function (element) {
34       return this.each(function() {
35         var elemTop= $(element).position().top;
36         var elemHeight = ($(this).outerHeight(true));
37         var top = (elemTop + (elemHeight/2)) - ($(this).height()/2);
38         var left = ($(element).outerWidth()-$(this).width());
39         $(this).css({position:'absolute', margin:0, top: (top > 0 ? top : 0)+'px', left: (left > 0 ? left : 0)+'px'});
40       });
41     }
42   });
43 })(jQuery);
44
45
46 //Info tooltip
47 hideTooltip = function() { 
48   var $tooltip = $('#roles_tipsy_tooltip');
49   $tooltip.fadeOut(); 
50   $($tooltip).attr({"style": 'display:none'});
51 }
52
53 showTooltip = function(message) {
54   var $tooltip = $('#roles_tipsy_tooltip');
55   var height = $tooltip.outerHeight();
56   var timeout1 = 2000;
57   var timeout2 = 4000;
58   $($tooltip).attr({"style": 'display:inline-block'});
59
60   if(message) { 
61     $('#infoMark').removeClass('info').addClass('warning');
62     $tooltip.find('#tooltip_message_container').css('padding', '0px').html(message);
63     timeout1 = 1000;
64     timeout2 = 2000;
65   }
66   
67   if($tooltip.is(":visible")) {
68     $($tooltip).animate({
69       opacity: 0.85,
70       top: height
71     }, timeout1, function() {
72       setTimeout(hideTooltip, timeout2, $tooltip);
73     });
74   }
75 }
76
77 $(function() {
78    //localStorage.clear()
79    if(!localstorage_supported()) { $('#dont_show').remove(); }
80    if(!("RolesUI-showtooltip" in localStorage) || localStorage.getItem('RolesUI-showtooltip') == 'yes') {
81       showTooltip();
82
83       $('#dont_show').bind('click', function() {
84          if(localstorage_supported()) {
85             localStorage.setItem('RolesUI-showtooltip', 'no');
86             hideTooltip();
87             return false;
88          }
89       })
90    }
91 });
92
93
94 function checkUsername($user, $role) {
95   var array = new Array();
96   var $users = $role.find('span');
97
98   $users.each(function(i,u) {
99     array.push($.trim($(u).text()))
100   });
101
102   if(jQuery.inArray($user.text(), array) == -1) {
103     return false;
104   } else {
105     return true;
106   }
107 }
108
109 function showWarning(element) {
110   var $warning = $(element).parent().find('.user-warning-message');
111   var $warnings = $('#rolesContent').find('.user-warning-message');
112
113   $warnings.each(function() {$(this).hide(); });
114   $warning.show();
115   
116   setTimeout(function(){
117     $warning.hide();
118   }, 2000 );
119 }
120
121 function assignUserToRole($user, $role) {
122   var parentID = $role.find(':input').attr('id');
123   var inputValue = $role.find(':input').val();
124
125   $user.attr('alt', parentID);
126
127   if(inputValue.length==0) {
128     $role.find(':input').val($user.text());
129   } else {
130     $role.find(':input').val(inputValue + ',' + $user.text());
131   }
132 }
133
134
135 function trim(string) { return string.replace (/^\s+/, '').replace (/\s+$/, ''); }
136
137 jQuery(function($){
138   // SHOW and HIDE search toolbox
139   $('div#jqueryTab ul.ui-tabs-nav li a').bind('click', function() {
140     if($(this).attr('href') == "#assignUsers") {
141       $('#toolbox').show();
142     } else {
143       $('#toolbox').hide();
144     }
145   });
146
147   //EVENT DELIGATION FOR "DYNAMIC" ADDED USERS
148 //  $('img.deleteUser')
149   $('#removeUserFromRole').live('click', function() {
150     var $parentNode = $(this).parent().parent();
151     var array = $('#' + $parentNode.attr('alt')).val().split(",");
152     var result = new Array;
153     var subString = $parentNode.text();
154     for (var i=0; i<array.length; i++) { if (array[i] != trim(subString)) { result.push(array[i]); } }
155      $parentNode.remove();
156     $('#' + $parentNode.attr('alt')).val(result.toString());
157   });
158
159   //EVENT DELIGATION FOR "DYNAMIC" ADDED USERS
160 //  $('span.assigned').live('hover', function(event){
161 //    if (event.type =='mouseover'){
162
163 ////      $(this).wrapInner('<span class="delete-image-wrapper"><img class="deleteUser" src="../images/delete-user.png"></span>')
164 //      $(this).append('<img id="temp_user_del" class="deleteUser" src="../images/delete-user.png">');
165 //      $(this).css("position", "relative")
166 //      return false;
167 //    }else {
168 //        $(this).css("position", "")
169 //        $('#temp_user_del').remove();
170 ////      $(this).find('span.delete-image-wrapper').remove();
171 //      return false;
172 //    }
173 //  });
174   
175   $('span.assigned').live('mouseenter', function(event){
176     $(this).append('<span id="tmpSpanWarapper" class="delete-image-wrapper"><img id="removeUserFromRole" class="deleteUser" src="../images/delete-user.png"></span>');
177     return false;
178   });
179   
180   $('span.assigned').live('mouseleave', function(event){
181    $('#tmpSpanWarapper').remove();
182    return false;
183     
184   });
185
186
187   //QUICK SEARCH
188   $('#find_user').focus(function(event) {
189     $('img#resetSearchField').fadeIn(50);
190     $('div.slider-nav a').css('visibility', 'hidden');
191   }).focusout(function() {
192     $('img#resetSearchField').fadeOut(200);
193     $('div.slider-nav a').css('visibility', 'visible');
194   });
195
196   //RESET FORM
197    $('#resetSearchField').bind('click', function() {
198     $('#find_user').val('');
199     $('#find_user').keyup();
200   });
201
202   //INIT
203   $('#find_user').quicksearch('div.slider-content span', {
204     'loader': '#loader',
205     'show': function () {
206       this.style.color = '';
207     },
208     'hide': function () {
209       this.style.color = '#ccc';
210     },
211     'onBefore': function () {
212       $('#loader').css('visibility', 'visible');
213     },
214     'onAfter': function () {
215       var $find = $('#find_user');
216       if($find.val() && $find.val().substr(0,1).length !=0 ) {
217         var slider = $('div#usersContent.users'); $(slider).addClass('slider');
218         target = '#' + $('#find_user').val().substr(0,1);
219         var cOffset = $('.slider-content', slider).offset().top;
220         var tOffset = $('.slider-content '+target, slider).offset().top;
221         var height = $('.slider-nav', slider).height();
222         var pScroll = (tOffset - cOffset) - height/8;
223         $('.slider-content li', slider).removeClass('selected');
224         $(target).addClass('selected');
225         $('.slider-content', slider).stop().animate({scrollTop: '+=' + pScroll + 'px'});
226       }
227     }
228   });
229
230   //DRAG n DROP
231   $('span.drag').drag("start",function(ev, dd){
232 //      console.log('DRAG START')
233       $( dd.available ).addClass('drop-available');
234       return $(this).clone().addClass('drag-active').appendTo( document.body);
235 //      return $( this ).clone().addClass('drag-active').appendTo( document.body);
236     })
237
238   $('span.drag').drag(function( ev, dd ){
239       $( dd.proxy ).css({
240         top: dd.offsetY,
241         left: dd.offsetX
242       });
243     })
244
245    $('span.drag').drag("end",function( ev, dd ){
246 //      console.log('DRAG END')
247 //      console.log(ev.target)
248       $( dd.available ).removeClass('drop-available');
249       
250       if($(dd.drop).hasClass('drop')) {
251         $(dd.proxy).css('color', '#626466').removeClass('drag-active').removeClass('drag');
252       } else {
253         $( dd.proxy ).remove();
254       }
255     });
256
257   $('.drop')
258     .live("drop",function( ev, dd ){
259 //      console.log('DROP')
260       if(checkUsername($(ev.target), $(this))) {
261         showWarning($(this));
262         $(this).effect("highlight", {color:'#fbb'}, 400);
263         if($(ev.target).hasClass('drag')) { $(ev.target).remove(); }
264       } else {
265 //        console.log(ev.target)
266 //        console.log(ev.target.parentNode.tagName);
267         $(ev.target).removeClass('drag').addClass('assigned'); //user
268         //Fix for Node cannot be inserted at the specified point in the hierarchy
269         if(ev.target.parentNode.tagName == "BODY") {
270           $(this).append(ev.target).effect("highlight", {color:'#AEE6A8'}, 400);
271         }
272         //console.log(ev.target.parentNode.tagName);
273         assignUserToRole($(ev.target), $(this));
274       }
275   })
276 });
277
278