apps/workbench/app/assets/javascripts/application.js

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