X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/8048da32800fab790b68f502c52dd00c89b5b690..f69d2824c997c53caa11d30ba816768bad52e12b:/apps/workbench/app/assets/javascripts/application.js diff --git a/apps/workbench/app/assets/javascripts/application.js b/apps/workbench/app/assets/javascripts/application.js index 6afc8c3b04..65e856df3a 100644 --- a/apps/workbench/app/assets/javascripts/application.js +++ b/apps/workbench/app/assets/javascripts/application.js @@ -19,16 +19,23 @@ //= require bootstrap/popover //= require bootstrap/collapse //= require bootstrap/modal +//= require bootstrap/button //= require bootstrap3-editable/bootstrap-editable +//= require bootstrap-tab-history +//= require wiselinks +//= require angular +//= require raphael +//= require morris +//= require jquery.number.min //= require_tree . jQuery(function($){ - $.ajaxSetup({ - headers: { - 'X-CSRF-Token': $('meta[name="csrf-token"]').attr('content') - } + $(document).ajaxStart(function(){ + $('.modal-with-loading-spinner .spinner').show(); + }).ajaxStop(function(){ + $('.modal-with-loading-spinner .spinner').hide(); }); - $('.editable').editable(); + $('[data-toggle=tooltip]').tooltip(); $('.expand-collapse-row').on('click', function(event) { @@ -43,12 +50,31 @@ jQuery(function($){ targets.fadeToggle(200); }); + var ajaxCount = 0; + $(document). on('ajax:send', function(e, xhr) { - $('.loading').fadeTo('fast', 1); + ajaxCount += 1; + if (ajaxCount == 1) { + $('.loading').fadeTo('fast', 1); + } }). on('ajax:complete', function(e, status) { - $('.loading').fadeOut('fast', 0); + ajaxCount -= 1; + if (ajaxCount == 0) { + $('.loading').fadeOut('fast', 0); + } + }). + on('ajaxSend', function(e, xhr) { + // jQuery triggers 'ajaxSend' event when starting an ajax call, but + // rails-generated ajax triggers generate 'ajax:send'. Workbench + // event listeners currently expect 'ajax:send', so trigger the + // rails event in response to the jQuery one. + $(document).trigger('ajax:send'); + }). + on('ajaxComplete', function(e, xhr) { + // See comment above about ajaxSend/ajax:send + $(document).trigger('ajax:complete'); }). on('click', '.removable-tag a', function(e) { var tag_span = $(this).parents('[data-tag-link-uuid]').eq(0) @@ -80,12 +106,12 @@ jQuery(function($){ attr('data-tag-link-uuid', new_tag_uuid). text(new_tag). css('opacity', '0.2'). - append('  '); + append(' '); $(this). parent(). find('>span'). append(new_tag_span). - append('  '); + append(' '); $.ajax($(this).attr('data-remote-href'), {dataType: 'json', type: $(this).attr('data-remote-method'), @@ -103,6 +129,28 @@ jQuery(function($){ this.addClass('label-danger').fadeTo('fast', '1'); }); return false; + }). + on('click focusin', 'input.select-on-focus', function(event) { + event.target.select(); + }); + + $(document). + on('ajax:complete ready', function() { + // See http://getbootstrap.com/javascript/#buttons + $('.btn').button(); + }). + on('ready ajax:complete', function() { + $('[data-toggle~=tooltip]').tooltip({container:'body'}); + }). + on('ready ajax:complete', function() { + // This makes the dialog close on Esc key, obviously. + $('.modal').attr('tabindex', '-1') + }). + on('ready', function() { + // Need this to trigger input validation/synchronization callbacks because some browsers + // auto-fill form fields (e.g., when navigating "back" to a page where some text + // had been entered in a search box) without triggering a change or input event. + $('input').trigger('input'); }); HeaderRowFixer = function(selector) { @@ -140,4 +188,62 @@ jQuery(function($){ fixer.duplicateTheadTr(); fixer.fixThead(); }); + + $(document).ready(function() { + /* When wiselinks is initialized, selection.js is not working. Since we want to stop + using selection.js in the near future, let's not initialize wiselinks for now. */ + + // window.wiselinks = new Wiselinks(); + + $(document).off('page:loading').on('page:loading', function(event, $target, render, url){ + $("#page-wrapper").fadeOut(200); + }); + + $(document).off('page:redirected').on('page:redirected', function(event, $target, render, url){ + }); + + $(document).off('page:always').on('page:always', function(event, xhr, settings){ + $("#page-wrapper").fadeIn(200); + }); + + $(document).off('page:done').on('page:done', function(event, $target, status, url, data){ + }); + + $(document).off('page:fail').on('page:fail', function(event, $target, status, url, error, code){ + }); + }); + + $(document).on('click', '.compute-detail', function(e) { + $(e.target).collapse('hide'); + }); + + $(document).on('click', '.compute-node-summary', function(e) { + $(e.target.href).collapse('toggle'); + }); + + $(document).on('click', '.force-cache-reload', function(e) { + history.replaceState( { nocache: true }, '' ); + }); }); + +window.addEventListener("DOMContentLoaded", function(e) { + if(history.state) { + if(history.state.nocache) { + showLoadingModal(); + history.replaceState( {}, '' ); + location.reload(true); + } + } +}); + +function showLoadingModal() { + $('#loading-modal').modal('show'); +} + +function hideLoadingModal() { + $('#loading-modal').modal('hide'); +} + +function hasHTML5History() { + return !!(window.history && window.history.pushState); +}