Merge branch 'master' into 4233-graph-job-stats
[arvados.git] / apps / workbench / app / assets / javascripts / application.js
1 // This is a manifest file that'll be compiled into application.js, which will include all the files
2 // listed below.
3 //
4 // Any JavaScript/Coffee file within this directory, lib/assets/javascripts, vendor/assets/javascripts,
5 // or vendor/assets/javascripts of plugins, if any, can be referenced here using a relative path.
6 //
7 // It's not advisable to add code directly here, but if you do, it'll appear at the bottom of the
8 // the compiled file.
9 //
10 // WARNING: THE FIRST BLANK LINE MARKS THE END OF WHAT'S TO BE PROCESSED, ANY BLANK LINE SHOULD
11 // GO AFTER THE REQUIRES BELOW.
12 //
13 //= require jquery
14 //= require jquery_ujs
15 //= require bootstrap
16 //= require bootstrap/dropdown
17 //= require bootstrap/tab
18 //= require bootstrap/tooltip
19 //= require bootstrap/popover
20 //= require bootstrap/collapse
21 //= require bootstrap/modal
22 //= require bootstrap/button
23 //= require bootstrap3-editable/bootstrap-editable
24 //= require bootstrap-tab-history
25 //= require wiselinks
26 //= require raphael
27 //= require morris
28 //= require jquery.number.min
29 //= require_tree .
30
31 jQuery(function($){
32     $.ajaxSetup({
33         headers: {
34             'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content')
35         }
36     });
37
38     $(document).ajaxStart(function(){
39       $('.modal-with-loading-spinner .spinner').show();
40     }).ajaxStop(function(){
41       $('.modal-with-loading-spinner .spinner').hide();
42     });
43
44     $('[data-toggle=tooltip]').tooltip();
45
46     $('.expand-collapse-row').on('click', function(event) {
47         var targets = $('#' + $(this).attr('data-id'));
48         if (targets.css('display') == 'none') {
49             $(this).addClass('icon-minus-sign');
50             $(this).removeClass('icon-plus-sign');
51         } else {
52             $(this).addClass('icon-plus-sign');
53             $(this).removeClass('icon-minus-sign');
54         }
55         targets.fadeToggle(200);
56     });
57
58     var ajaxCount = 0;
59
60     $(document).
61         on('ajax:send', function(e, xhr) {
62             ajaxCount += 1;
63             if (ajaxCount == 1) {
64                 $('.loading').fadeTo('fast', 1);
65             }
66         }).
67         on('ajax:complete', function(e, status) {
68             ajaxCount -= 1;
69             if (ajaxCount == 0) {
70                 $('.loading').fadeOut('fast', 0);
71             }
72         }).
73         on('ajaxSend', function(e, xhr) {
74             // jQuery triggers 'ajaxSend' event when starting an ajax call, but
75             // rails-generated ajax triggers generate 'ajax:send'.  Workbench
76             // event listeners currently expect 'ajax:send', so trigger the
77             // rails event in response to the jQuery one.
78             $(document).trigger('ajax:send');
79         }).
80         on('ajaxComplete', function(e, xhr) {
81             // See comment above about ajaxSend/ajax:send
82             $(document).trigger('ajax:complete');
83         }).
84         on('click', '.removable-tag a', function(e) {
85             var tag_span = $(this).parents('[data-tag-link-uuid]').eq(0)
86             tag_span.fadeTo('fast', 0.2);
87             $.ajax('/links/' + tag_span.attr('data-tag-link-uuid'),
88                    {dataType: 'json',
89                     type: 'POST',
90                     data: { '_method': 'DELETE' },
91                     context: tag_span}).
92                 done(function(data, status, jqxhr) {
93                     this.remove();
94                 }).
95                 fail(function(jqxhr, status, error) {
96                     this.addClass('label-danger').fadeTo('fast', '1');
97                 });
98             return false;
99         }).
100         on('click', 'a.add-tag-button', function(e) {
101             var jqxhr;
102             var new_tag_uuid = 'new-tag-' + Math.random();
103             var tag_head_uuid = $(this).parents('tr').attr('data-object-uuid');
104             var new_tag = window.prompt("Add tag for collection "+
105                                     tag_head_uuid,
106                                     "");
107             if (new_tag == null)
108                 return false;
109             var new_tag_span =
110                 $('<span class="label label-info removable-tag"></span>').
111                 attr('data-tag-link-uuid', new_tag_uuid).
112                 text(new_tag).
113                 css('opacity', '0.2').
114                 append('&nbsp;<span class="removable-tag"><a title="Delete tag"><i class="fa fa-fw fa-trash-o"></i></a></span>');
115             $(this).
116                 parent().
117                 find('>span').
118                 append(new_tag_span).
119                 append(' ');
120             $.ajax($(this).attr('data-remote-href'),
121                            {dataType: 'json',
122                             type: $(this).attr('data-remote-method'),
123                             data: {
124                                 'link[head_uuid]': tag_head_uuid,
125                                 'link[link_class]': 'tag',
126                                 'link[name]': new_tag
127                             },
128                             context: new_tag_span}).
129                 done(function(data, status, jqxhr) {
130                     this.attr('data-tag-link-uuid', data.uuid).
131                         fadeTo('fast', '1');
132                 }).
133                 fail(function(jqxhr, status, error) {
134                     this.addClass('label-danger').fadeTo('fast', '1');
135                 });
136             return false;
137         });
138
139     $(document).
140         on('ajax:complete ready', function() {
141             // See http://getbootstrap.com/javascript/#buttons
142             $('.btn').button();
143         }).
144         on('ready ajax:complete', function() {
145             $('[data-toggle~=tooltip]').tooltip({container:'body'});
146         }).
147         on('ready ajax:complete', function() {
148             // This makes the dialog close on Esc key, obviously.
149             $('.modal').attr('tabindex', '-1')
150         });
151
152     HeaderRowFixer = function(selector) {
153         this.duplicateTheadTr = function() {
154             $(selector).each(function() {
155                 var the_table = this;
156                 if ($('>tbody>tr:first>th', the_table).length > 0)
157                     return;
158                 $('>tbody', the_table).
159                     prepend($('>thead>tr', the_table).
160                             clone().
161                             css('opacity', 0));
162             });
163         }
164         this.fixThead = function() {
165             $(selector).each(function() {
166                 var widths = [];
167                 $('> tbody > tr:eq(1) > td', this).each( function(i,v){
168                     widths.push($(v).width());
169                 });
170                 for(i=0;i<widths.length;i++) {
171                     $('thead th:eq('+i+')', this).width(widths[i]);
172                 }
173             });
174         }
175     }
176
177     var fixer = new HeaderRowFixer('.table-fixed-header-row');
178     fixer.duplicateTheadTr();
179     fixer.fixThead();
180     $(window).resize(function(){
181         fixer.fixThead();
182     });
183     $(document).on('ajax:complete', function(e, status) {
184         fixer.duplicateTheadTr();
185         fixer.fixThead();
186     });
187
188     $(document).ready(function() {
189         /* When wiselinks is initialized, selection.js is not working. Since we want to stop
190            using selection.js in the near future, let's not initialize wiselinks for now. */
191
192         // window.wiselinks = new Wiselinks();
193
194         $(document).off('page:loading').on('page:loading', function(event, $target, render, url){
195             $("#page-wrapper").fadeOut(200);
196         });
197
198         $(document).off('page:redirected').on('page:redirected', function(event, $target, render, url){
199         });
200
201         $(document).off('page:always').on('page:always', function(event, xhr, settings){
202             $("#page-wrapper").fadeIn(200);
203         });
204
205         $(document).off('page:done').on('page:done', function(event, $target, status, url, data){
206         });
207
208         $(document).off('page:fail').on('page:fail', function(event, $target, status, url, error, code){
209         });
210     });
211
212     $(document).on('click', '.compute-detail', function(e) {
213         $(e.target).collapse('hide');
214     });
215
216     $(document).on('click', '.compute-node-summary', function(e) {
217         $(e.target.href).collapse('toggle');
218     });
219
220     $(document).on('click', '.force-cache-reload', function(e) {
221         history.replaceState( { nocache: true }, '' );
222     });
223 });
224
225 window.addEventListener("DOMContentLoaded", function(e) {
226     if(history.state) {
227         if(history.state.nocache) {
228             showLoadingModal();
229             history.replaceState( {}, '' );
230             location.reload(true);
231         }
232     }
233 });
234
235 function showLoadingModal() {
236     $('#loading-modal').modal('show');
237 }
238
239 function hideLoadingModal() {
240     $('#loading-modal').modal('hide');
241 }
242
243 function hasHTML5History() {
244     return !!(window.history && window.history.pushState);
245 }