users: select one dialog ... work in progress
[opensuse:yast-web-client.git] / plugins / users / public / javascripts / select_dialog.js
1 /*
2 # Copyright (c) 2009-2010 Novell, Inc.
3
4 # All Rights Reserved.
5
6 # This program is free software; you can redistribute it and/or modify it
7 # under the terms of version 2 of the GNU General Public License
8 # as published by the Free Software Foundation.
9
10 # This program is distributed in the hope that it will be useful,
11 # but WITHOUT ANY WARRANTY; without even the implied warranty of
12 # MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
13 # GNU General Public License for more details.
14
15 # You should have received a copy of the GNU General Public License
16 # along with this program; if not, contact Novell, Inc.
17
18 # To contact Novell about this file by physical or electronic mail,
19 # you may find current contact information at www.novell.com
20 */
21 var update = function (obj1,obj2) {
22   var new_obj = new Object();
23   for (var i in obj1) { new_obj[i] = obj1[i] };
24   for (var i in obj2) { new_obj[i] = obj2[i] };
25   return new_obj;
26 }
27
28 var getContents = function (item) { return item.innerHTML; };
29
30 function select_many_dialog( kvargs ) {
31   var include = function (arr,item) { 
32     return arr.indexOf(item) == (-1) ? false : true; 
33   }
34    // load settings from parameters of default
35   var default_settings = {
36     kind           : "items",
37     title          : "Select items",
38     selected_title : "Selected items",
39     unselected_title : "Available items",
40     tooltip : "Click items to select / unselect"
41   };
42   // preferably use settings from arguments
43   var settings = update(default_settings, kvargs );
44   var kind = settings.kind;
45   // create a basic dialog html
46   var d;
47   d  = '<div id="select-' + kind + '-dialog\" style="display:none;" title="'+settings.title+'">\n';
48   d += '  <input type="hidden" id="select-' + kind + '-current-id" value=""/>\n';
49   d += '  <div class="dialog-container">\n';
50   d += '    <h2>'+settings.selected_title+'</h2>\n';
51   d += '    <div id="selected-' + kind + '"/>\n';
52   d += '  </div>\n';
53   d += '  <div class="dialog-container">\n';
54   d += '    <h2>'+settings.unselected_title+'</h2>\n';
55   d += '    <div id="unselected-' + kind + '"/>\n';
56   d += '  </div>\n';
57   d += '  <div class="select-tooltip">'+settings.tooltip+'</div>\n';
58   d += '</div>';
59   $("body").append(d);
60   
61   // 'map' doesn't work on jQuery arrays for some reason. Don't know why.
62   function getSelectedItems() {
63     var selected_items = [];
64     $("#selected-"+kind).children(":visible").each( function (i) {
65       selected_items.push( getContents( this ) );
66     });
67     return selected_items;
68   }
69   // say that the html is a dialog
70   $("#select-"+kind+"-dialog").dialog({
71     autoOpen : false,
72     width : 350,
73     height: 350,
74     modal : true,
75     buttons : {
76       'Ok': function() {
77           settings.storeItems( $("#select-"+kind+"-current-id").attr('value'),
78                                getSelectedItems() );
79           $(this).dialog('close');
80         }, 
81       'Cancel': function() { $(this).dialog('close'); }
82     }
83   });
84   var renderItemCond = function(item,cond) {
85     display_str = cond(item) ? "" : ' style="display: none"';
86     return ('<span class="select-dialog-item" value="'+item+'"' + display_str + '>'+item+'</span>');
87   };
88  
89   function showIf(item, condition) {
90     condition ? item.show() : item.hide();
91   }
92
93   function setSelected(item, is_being_selected) {
94     showIf( $('#selected-'+kind  ).children("[value='"+item+"']") ,   is_being_selected );
95     showIf( $('#unselected-'+kind).children("[value='"+item+"']") , ! is_being_selected );
96   }
97
98   // create function for opening the dialog
99   var open_dialog = function (dialogId) {
100     var selected_list = settings.loadItems(dialogId);
101     var all_items     = settings.allItems();
102     var itemSelected         = function (item) { return include(selected_list,item) };
103     var itemUnselected       = function (item) { return ! include(selected_list,item) };
104     var renderSelectedItem   = function (item) { return renderItemCond(item, itemSelected) };
105     var renderUnselectedItem = function (item) { return renderItemCond(item, itemUnselected) };
106     // empty 'selected' and 'unselected' container
107     $('#selected-'+kind+',#unselected-'+kind).empty();
108     // same dialog can be used for several different selections, we have to save dialog/selection id
109     $('#select-'+kind+'-current-id').attr('value',dialogId);
110     // fillup new values for selected and unselected items
111     $('#selected-'+kind).append(  all_items.map( renderSelectedItem   ).join("\n") );
112     $('#unselected-'+kind).append(all_items.map( renderUnselectedItem ).join("\n") );
113     // make items selectable/unselectable on click
114     $('#unselected-'+kind).children().click( function () { setSelected( this.getAttribute('value'), true ) } );
115     $('#selected-'+kind  ).children().click( function () { setSelected( this.getAttribute('value'), false) } );
116     // call the dialog
117     $('#select-'+kind+'-dialog').dialog('open');
118   };
119   return open_dialog;
120 };
121
122 function select_one_dialog( kvargs ) {
123    // load settings from parameters of default
124   var default_settings = {
125     kind           : "items",
126     title          : "Select item",
127     tooltip : "Click item to select it."
128   };
129   // preferably use settings from arguments
130   var settings = update(default_settings, kvargs );
131   var kind = settings.kind;
132   // create a basic dialog html
133   var d;
134   d  = '<div id="select-one-' + kind + '-dialog\" style="display:none;" title="'+settings.title+'">\n';
135   d += '  <input type="hidden" id="select-' + kind + '-current-id" value=""/>\n';
136   d += '  <div class="dialog-container">\n';
137   d += '    <div id="available-' + kind + '"/>\n';
138   d += '  </div>\n';
139   d += '  <div class="select-tooltip">'+settings.tooltip+'</div>\n';
140   d += '</div>';
141   $("body").append(d);
142   
143   // say that the html is a dialog
144   $("#select-one-"+kind+"-dialog").dialog({
145     autoOpen : false,
146     width : 350,
147     height: 350,
148     modal : true
149   });
150
151   var renderItem = function(item) {
152     return ('<span class="select-dialog-item" value="'+item+'">'+item+'</span>');
153   };
154
155   var itemClick = function(item) {
156     settings.storeItem( getContents( item ) );
157     $("select-one-"+kind+"-dialog").dialog('close');
158   };
159  
160   // create function for opening the dialog
161   var open_dialog = function (dialogId) {
162     var all_items     = settings.allItems();
163     $('#available-'+kind).empty();
164     $('#available-'+kind).append( all_items.map( renderItem ) );
165     $('#available-'+kind).children().click( function () { itemClick( this ) } );
166     $('#select-'+kind+'-dialog').dialog('open');
167   };
168   return open_dialog;
169 };
170