CSS fixes
[htsworkflow.git] / htsworkflow / frontend / static / js / htsw.js
1 Ext.state.Manager.setProvider(new Ext.state.CookieProvider());
2
3 Ext.override(Ext.Panel,{
4   getState: function() {
5     return { collapsed: this.collapsed };
6     }
7 });
8
9 var quick_msg = function(msg)
10 {
11     Ext.MessageBox.show({
12         title: 'Info',
13         msg: msg,
14         buttons: Ext.MessageBox.OK,
15         icon: Ext.MessageBox.INFO
16     });
17 }
18
19 var goto_url = function(www_url)
20 {
21     window.location = www_url; 
22 }
23
24 $(document).ready(function(){
25     //----------------------------------------
26     // Django Library Page CSS Fix
27     /*var fix_library_css = function() {
28       Ext.fly('library-index-div').select('*').addClass('djangocss');
29     }
30     fix_library_css();
31     */
32     
33     
34     //----------------------------------------
35     // Dynamically Generate Panels from HTML!
36     var create_dynamic_panels = function(){
37         var wp_items = Ext.fly('west_panel_items');
38         var ul_items = wp_items.query('ul');
39         
40         var dynamic_panels = new Array();
41         Ext.each(ul_items, function(ul) {
42             var panel_obj = new Ext.Panel({
43                 frame: true,
44                 title: ul.id,
45                 //collapsible: true,
46                 //titleCollapse: true,
47                 //collapsed: true,
48                 //stateful: true,
49                 //stateId: 'freezer_panel_state',
50                 margins: '0 0 0 0',
51                 //width: 200,
52                 contentEl: ul
53                 //stateEvents: ['collapse', 'expand']
54             });
55             dynamic_panels.push(panel_obj);
56         });
57         return dynamic_panels;
58     }
59     
60     var panel_bcmagic = new Ext.Panel({
61         //title: 'BC Magic',
62         unstyled: true,
63         contentEl: 'bcmagic_div',
64         height: 180
65     });
66     
67     var menuPanel = new Ext.Panel({
68         id: 'menu_panel',
69         region: 'west',
70         collapsible: true,
71         split: true,
72         collapseMode: 'mini',
73         margins: '4 0 0 0',
74         //cmargins: '2 2 0 2',
75         width: 200,
76         minWidth: 150,
77         border: false,
78         //baseCls: 'x-plain',
79         unstyled: true,
80         layout: 'vbox',
81         layoutConfig: {
82             align: 'stretch',
83             pack: 'start'
84         },
85         // Add dynamically generated panels from html and include barcode magic
86        items: create_dynamic_panels().concat([panel_bcmagic])
87     });
88     
89     var get_east_panel_content = function(){
90       // East panel contentEl id is supplied in html div id of east_region_config.
91       var east_id = Ext.fly('east_region_config').dom.textContent;
92       
93       // If no element exists with the supplied content id, report and error.
94       if (Ext.fly(east_id) == null){
95         return 'east_region_config_error';
96       }
97       return east_id;
98     }
99     
100     var east_panel_content_id = get_east_panel_content();
101     if (east_panel_content_id.length > 0){
102       var eastPanel = new Ext.Panel({
103           region: 'east',
104           layout: 'auto',
105           //margins: '0 2 0 2',
106           width: 180,
107           collapsible: true,
108           split: true,
109           collapseMode: 'mini',
110           autoScroll: true,
111           contentEl: east_panel_content_id
112       });
113     } else {
114       var eastPanel = new Ext.Panel({
115           region: 'east',
116           layout: 'auto',
117           //margins: '0 2 0 2',
118           width: 180,
119           collapsible: true,
120           split: true,
121           hidden: true,
122           collapseMode: 'mini',
123           autoScroll: true
124           //contentEl: ''
125       });
126     }
127     
128
129     //-------------------------------
130     // Main Viewport Setup
131     //-------------------------------
132     var mainBorderPanel = new Ext.Viewport({
133        layout: 'border',
134        items: [{
135             region: 'north',
136             layout: 'vBox',
137             layoutConfig: {
138                 align: 'stretch',
139                 pack: 'start'
140             },
141             items: [{
142                     xtype: 'box',
143                     applyTo: 'header',
144                     id: 'header-panel',
145                     height: 30
146                 },{
147                     id: 'main_toolbar',
148                     xtype: 'toolbar',
149                     //height: 100,
150                     /*items: [{
151                         text: "Demo Button",
152                         handler: function() { quick_msg('Messages can be fun!'); }
153                     }],*/
154                     margins: '2 0 0 0'
155             }],
156             height: 60 
157        },menuPanel,{
158             //title: 'Body',
159             region: 'center',
160             xtype: 'panel',
161             //autoScroll: true,
162             layout: 'fit',
163             margins: '2 2 2 2',
164             items: [{
165                 //title: 'Inner Panel',
166                 contentEl: 'body_content',
167                 border: true,
168                 autoScroll: true
169             }]
170             },eastPanel]
171     });
172     
173     //-------------------------------
174     // Menu Bar Setup
175     //-------------------------------
176     var main_tb = Ext.getCmp('main_toolbar');
177     
178     var add_buttons_from_html_left = function(main_tb){
179         var left_tbar_data = Ext.fly('left_tbar_data');
180         var div_array = left_tbar_data.query('div');
181         var div_id = null;
182         // Loop through each div since it defines a button and link or a spacer and add it to the right side of the toolbar
183         Ext.each(div_array, function(divobj) {
184             div_id = divobj.id;
185             if (div_id == 'spacer'){
186                 main_tb.add('-');
187             } else {
188                 main_tb.add({
189                     text: div_id,
190                     handler: function() { goto_url(divobj.getAttribute('href')); }
191                 });
192             }
193         });
194         //return right_tbar_data;
195     }
196     
197     var add_buttons_from_html_right = function(main_tb){
198         var right_tbar_data = Ext.fly('right_tbar_data');
199         var div_array = right_tbar_data.query('div');
200         var div_id = null;
201         // Loop through each div since it defines a button and link or a spacer and add it to the right side of the toolbar
202         Ext.each(div_array, function(divobj) {
203             div_id = divobj.id;
204             if (div_id == 'spacer'){
205                 main_tb.add('-');
206             } else {
207                 main_tb.add({
208                     text: div_id,
209                     handler: function() { goto_url(divobj.getAttribute('href')); }
210                 });
211             }
212         });
213         //return right_tbar_data;
214     }
215     
216     add_buttons_from_html_left(main_tb);
217     
218     // Shifts the remaining toolbar options to the right side.
219     main_tb.add({ xtype: 'tbfill' });
220     var user_info = Ext.fly('login_info');
221     var logout_url = user_info.getAttribute('logouturl');
222     var login_url = user_info.getAttribute('loginurl');
223     
224     if (user_info.getAttribute('authenticated') == 'true') {
225         main_tb.add({
226                         xtype: 'tbtext',
227                         text: 'User: ' + user_info.getAttribute('user')
228                     });
229         main_tb.add('-');
230         add_buttons_from_html_right(main_tb);
231         main_tb.add('-');
232         main_tb.add({
233                         text: 'Logout',
234                         handler: function() { goto_url(logout_url); }
235                     });
236         
237     } else {
238         main_tb.add({
239                         text: 'Login',
240                         handler: function() { goto_url(login_url) }
241                     });
242     }
243     
244     main_tb.doLayout();
245     
246 });