merged cont.
[opensuse:yast-rest-service.git] / webservice / public / javascripts / webyast-modal-dialog.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 //TODO: MODAL: overwritte default icons???
22 //TODO: MODAL: window on resize -> recenter modalWindow!!!
23 //TODO: DIALOG: autodetect submit button -> $form.find('input type=submit')? else ???
24
25
26 (function($) {
27   var cache = [];
28   // Arguments are image paths relative to the current page.
29   $.preLoadImages = function() {
30     var args_len = arguments.length;
31     for (var i = args_len; i--;) {
32       var cacheImage = document.createElement('img');
33       cacheImage.src = arguments[i];
34       cache.push(cacheImage);
35     }
36   }
37 })(jQuery)
38
39 jQuery.preLoadImages("../images/loading.gif", "../images/dialog-warning.png", "../images/info.png", "../images/close.png");
40
41 (function($, undefined){
42   $.modalDialog = {
43     defaults: {
44       mshade: 'modalWindowShade',
45       mwindow: 'modalWindow',
46       mclose: 'modalWindowClose',
47
48       warning:  '<img src="../images/dialog-warning.png">',
49       loading:  '<img id="modal_loading" src="../images/loading.gif">',
50       info:     '<img src="../images/info.png">',
51
52       message: 'Please wait',
53       simple: false,
54       timeout: 0,
55     },
56
57     warning: function(options){
58       var options = $.extend(this.defaults, options);
59       if(!options.simple) { options.message = '<b class="mwarning">Warning:</b> ' + options.message; }
60       popup(options.warning, options.message);
61     },
62
63     info: function(options){
64       var options = $.extend(this.defaults, options);
65       if(!options.simple) { options.message = '<b class="minfo">Info:</b> ' + options.message; }
66       popup(options.info, options.message);
67     },
68
69     wait: function(options){
70       var options = $.extend(this.defaults, options);
71       if(!options.simple) { options.message = options.message + ' <b class="mwait">...</b>'; }
72       popup(options.loading, options.message);
73     },
74
75
76     dialog: function(options){
77       var options = $.extend(this.defaults, options);
78       dialog(options.message, options.form);
79     },
80
81     confirm_dialog: function(options){
82       var options = $.extend(this.defaults, options);
83       confirm_dialog(options.message, options.action);
84     },
85
86     bind: function(options) {
87       var close = '#' + this.defaults.mclose;
88       $(function(){
89               $(close).live('click', function(){
90                 $.modalDialog.destroy({ timeout: 0});
91               });
92
93               $(close).live('mouseenter', function(){
94                 $(this).attr('src' , 'images/close.png');
95               });
96
97               $(close).live('mouseleave', function(){
98                 $(this).attr('src' , 'images/close-g.png');
99               });
100       })
101     },
102
103     redirect: function(options) {
104        window.location = window.location.protocol + '//' + window.location.host;
105     },
106
107     destroy: function() {
108       var options = $.extend(this.defaults, options);
109       $('#'+options.mshade).remove();
110       $('#'+options.mwindow).remove();
111     }
112   };
113 })(jQuery);
114
115 popup = function(image, message) {
116   var defaults = $.modalDialog.defaults;
117
118   $('body').append('<div id="' + defaults.mshade + '">&nbsp;</div>');
119   $('body').after('<div id="' + defaults.mwindow + '" class="mpopup">' + '</div>');
120   $('#' + defaults.mwindow).wrapInner(image + '<span class="mmessage">' + message + '</span>');
121
122   self.centering(defaults.mwindow);
123   
124   if($(image).attr('id') == 'modal_loading') {
125     setTimeout("$('#modal_loading').attr('src', '../images/loading.gif');",100);
126   }
127 }
128
129 //TODO: form.find('input type=submit') ? else ???
130 dialog = function(message, form) {
131   var defaults = $.modalDialog.defaults;
132
133
134   if(message.split('.').length > 1) {
135     question = message.split('.')[0] + '<br/>' + message.split('.')[1];
136   }
137
138   $('body').append('<div id="' + defaults.mshade + '">&nbsp;</div>');
139
140   $dialog = '<div id="' + defaults.mwindow + '" class="mdialog">';
141     $dialog += '<div class="mleftcontainer">' + defaults.warning + '</div>';
142     $dialog += '<div class="mrightcontainer">';
143       $dialog += '<div>' + question + '</div>';
144       $dialog += '<div  class="mdevider">&nbsp;</div>';
145       $dialog += '<div><input type="button" id="no" value="No" /><input type="button" id="yes" value="Yes" /></div>';
146     $dialog += '</div>';
147   $dialog += '</div>';
148
149   var $mclose = $('<img id="' + defaults.mclose +'"/>').attr('src', '../images/close-g.png');
150
151   $('body').before($dialog);
152   $('#'+defaults.mwindow).append($mclose);
153   $.modalDialog.bind(defaults.mclose);
154
155   $('#yes').live('click', function(){
156     $.modalDialog.destroy();
157     $('#'+form).submit();
158   });
159
160   $('#no').live('click', function(){
161     $.modalDialog.destroy();
162     $.modalDialog.wait({message: 'Please wait'});
163     setTimeout('$.modalDialog.redirect()', 500);
164   });
165
166   self.centering(defaults.mwindow);
167 }
168
169 self.centering = function(mwindow) {
170   $('#'+ mwindow).css('top', $(document).height()/2 -  ($('#'+ mwindow).height()/2) - 80);
171   $('#'+ mwindow).css('left', $(document).width()/2 -  $('#'+ mwindow).width()/2);
172 }
173