jquery_ajax_status 1.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: a3a31d3ba5cffb2bc8e625be0cb818753e2d341c
+  data.tar.gz: cdd3c803a6d2d07c719db26a3a459635cf732182
+SHA512:
+  metadata.gz: b10b33a3ae414759584d8338b512f7524154884a395a1d17859156f8deb2075c1548e88ed5d9bf3249483079f6dcdb9140cd8b6c5086a8807dcafd9023a42f58
+  data.tar.gz: a97f63df33ab6b5b833741606699dd39e013f348ef52484d3107a71995dd98407f7b0a71bd76094154f1a2279cdf7419c89e2182e5e5cfa7f6bc0c62b6e9eb92

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+The MIT License (MIT)
+
+Copyright © 2014-2015 LICO Innovations
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of
+this software and associated documentation files (the "Software"), to deal in
+the Software without restriction, including without limitation the rights to
+use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
+the Software, and to permit persons to whom the Software is furnished to do so,
+subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+The software is provided "as is", without warranty of any kind, express or
+implied, including but not limited to the warranties of merchantability, fitness
+for a particular purpose and noninfringement. In no event shall the authors or
+copyright holders be liable for any claim, damages or other liability, whether
+in an action of contract, tort or otherwise, arising from, out of or in
+connection with the software or the use or other dealings in the software.

data/README.markdown

@@ -0,0 +1,121 @@
+[![Gem Version](https://badge.fury.io/rb/jquery_ajax_status.svg)](http://badge.fury.io/rb/jquery_ajax_status)
+
+A simple loading indicator to show you're doing AJAX requests.
+
+[Here's a demo](https://cdn.rawgit.com/bluerail/jquery_ajax_status/master/demo.html)
+
+
+Usage
+=====
+Include the [JavaScript code](https://github.com/bluerail/jquery_ajax_status/tree/master/lib/assets/javascripts)
+and the [stylesheet](https://github.com/bluerail/jquery_ajax_status/tree/master/lib/assets/stylesheets).
+For Ruby on Rails, you can use the gem (see below).
+
+We automatically hook into jQuery callbacks.
+
+Ruby on Rails installation
+--------------------------
+This is packaged as a Ruby gem ready to use in a Rails app.
+
+Add to your `Gemfile`
+
+    gem 'jquery_ajax_status'
+
+Add to your `application.js`:
+
+    // =require jquery_ajax_status
+
+And to your `application.css`:
+
+    /* =require jquery_ajax_status */
+
+
+Configuration
+=============
+It should work out of the box, configuration is optional. Here are the defaults:
+
+    window.ajax_status = {
+      // Show after /n/ milliseconds; this prevents having the loader pop-up
+      // constantly for requests that are near-instantaneous
+      delay: 500,
+
+      // Animate the background
+      animate: true,
+
+      // CSS class to add; %%CLASS%% in html is replaced by this
+      class: 'ajax-status-default',
+
+      // Text to use; %%TEXT%% in html is replaced by this
+      text: 'Loading…',
+
+      // HTML to append
+      html: "<div id="ajax-status" class="%%CLASS%%">" +
+        "<span class="ajax-status-animate"></span>" +
+        "<span class="ajax-status-text">%%TEXT%%</span>" +
+      </div>"
+    }
+
+You can change a setting with:
+
+    window.ajax_status.delay = 2000
+
+*Do not* override the entire `window.ajax_status` object, as this also includes
+the code to make it run.
+
+
+Tips
+====
+
+I want one of those spinning thingies
+-------------------------------------
+You can override `window.ajax_status.text` to use a different text. This can
+also be HTML:
+
+    window.ajax_status.animate = false
+    window.ajax_status.text = '<i class="fa fa-spinner fa-spin"></i>'
+
+
+I want to translate the `Loading…` text
+---------------------------------------
+Again, override `window.ajax_status.text`, for example for gettext:
+
+    window.ajax_status.text = _('Loading')
+
+
+I want to start it manually
+---------------------------
+Use `window.ajax_status.start` and `window.ajax_status.stop`.
+
+For example:
+
+    # Unbind the default events
+    $(document).off 'ajaxStart page:fetch', window.ajax_status.start
+    $(document).off 'ajaxComplete page:change', window.ajax_status.stop
+
+    # And the turbolink events
+    $(document).off 'page:fetch', window.ajax_status.start
+    $(document).off 'page:change', window.ajax_status.stop
+
+    # Trigger for this ajax call
+    jQuery.ajax
+      url: '/foo'
+      beforeSend: window.ajax_status.start
+      complete: window.ajax_status.stop
+      success: (data) ->
+        # ...
+      error: ->
+        # ...
+
+
+I don't like the {colors,font size,position,etc}
+------------------------------------------------
+You have 2 options:
+
+- Change `window.ajax_status.class` to something else; you still get some CSS
+  from the `#ajax-status` id, but this is what most people want.
+- Don't include my CSS and write your own.
+
+
+I want more configuration!
+--------------------------
+Submit a patch ;-)

data/lib/assets/javascripts/jquery_ajax_status.js

@@ -0,0 +1,59 @@
+// Generated by CoffeeScript 1.9.1
+(function() {
+  var timer;
+
+  timer = null;
+
+  window.ajax_status = {
+    delay: 500,
+    animate: true,
+    "class": 'ajax-status-default',
+    text: 'Loading…',
+    html: "<div id=\"ajax-status\" class=\"%%CLASS%%\">\n  <span class=\"ajax-status-animate\"></span>\n  <span class=\"ajax-status-text\">%%TEXT%%</span>\n</div>",
+    start: function() {
+      $(document.body).css('cursor', 'wait');
+      clearTimeout(timer);
+      return setTimeout(window.ajax_status.show, ajax_status.delay);
+    },
+    stop: function() {
+      $(document.body).css('cursor', '');
+      clearTimeout(timer);
+      return window.ajax_status.hide();
+    },
+    hide: function() {
+      return $('#ajax-status').slideUp(150, function() {
+        return $('#ajax-status').remove();
+      });
+    },
+    show: function() {
+      $(document.body).append(ajax_status.html.replace('%%TEXT%%', window.ajax_status.text).replace('%%CLASS%%', window.ajax_status["class"]));
+      return $('#ajax-status').slideDown(150, function() {
+        var fun;
+        if (!ajax_status.animate) {
+          return;
+        }
+        fun = function() {
+          if ($('#ajax-status .ajax-status-animate').length === 0 || !ajax_status.animate) {
+            return;
+          }
+          return $('#ajax-status .ajax-status-animate').css('left', "-" + ($('#ajax-status .ajax-status-animate').outerWidth()) + "px").animate({
+            left: ($('#ajax-status').outerWidth()) + "px"
+          }, {
+            duration: 2000,
+            complete: fun
+          });
+        };
+        return fun();
+      });
+    }
+  };
+
+  $(document).on('ajaxStart', window.ajax_status.start);
+
+  $(document).on('ajaxComplete', window.ajax_status.stop);
+
+  $(document).on('page:fetch', window.ajax_status.start);
+
+  $(document).on('page:change', window.ajax_status.stop);
+
+}).call(this);

data/lib/assets/javascripts/jquery_ajax_status.js.coffee

@@ -0,0 +1,72 @@
+timer = null
+
+window.ajax_status =
+  # Show after /n/ milliseconds; this prevents having the loader pop-up
+  # constantly for requests that are near-instantaneous
+  delay: 500
+
+  # Animate the background
+  animate: true
+
+  # CSS class to add; %%CLASS%% in html is replaced by this
+  class: 'ajax-status-default'
+
+  # Text to use; %%TEXT%% in html is replaced by this
+  text: 'Loading…'
+
+  # HTML to append
+  html: """<div id="ajax-status" class="%%CLASS%%">
+    <span class="ajax-status-animate"></span>
+    <span class="ajax-status-text">%%TEXT%%</span>
+  </div>"""
+
+
+  # Functions
+
+  # Start showing it after the delay
+  start: ->
+    $(document.body).css 'cursor', 'wait'
+    clearTimeout timer
+    setTimeout window.ajax_status.show, ajax_status.delay
+
+
+  # Stop showing the status
+  stop: ->
+    $(document.body).css 'cursor', ''
+    clearTimeout timer
+    window.ajax_status.hide()
+
+
+  # Hide the widget
+  hide: -> $('#ajax-status').slideUp 150, -> $('#ajax-status').remove()
+
+
+  # Show the widget
+  show: ->
+    $(document.body).append(ajax_status.html
+      .replace('%%TEXT%%', window.ajax_status.text)
+      .replace('%%CLASS%%', window.ajax_status.class))
+
+    $('#ajax-status').slideDown 150, ->
+      return unless ajax_status.animate
+
+      fun = ->
+        return if $('#ajax-status .ajax-status-animate').length is 0 or not ajax_status.animate
+        $('#ajax-status .ajax-status-animate')
+          .css 'left', "-#{$('#ajax-status .ajax-status-animate').outerWidth()}px"
+          .animate {
+            left: "#{$('#ajax-status').outerWidth()}px"
+          }, {
+            duration: 2000
+            complete: fun
+          }
+      fun()
+
+
+# Hook into jQuery events
+$(document).on 'ajaxStart', window.ajax_status.start
+$(document).on 'ajaxComplete', window.ajax_status.stop
+
+# ... and into turbolinks
+$(document).on 'page:fetch', window.ajax_status.start
+$(document).on 'page:change', window.ajax_status.stop

data/lib/assets/stylesheets/jquery_ajax_status.css

@@ -0,0 +1,38 @@
+#ajax-status {
+  z-index: 99999;
+  overflow: hidden;
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 50%;
+  text-align: center; }
+  #ajax-status .ajax-status-animate {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: -1em;
+    width: 1em; }
+
+.ajax-status-default {
+  width: 10em;
+  margin-left: -5em;
+  height: 2.5em;
+  line-height: 2.5em;
+  border-bottom-right-radius: 3px;
+  border-bottom-left-radius: 3px;
+  background-color: #2a9b3f;
+  color: #fff;
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4); }
+  .ajax-status-default .ajax-status-animate {
+    background-image: -webkit-linear-gradient(left, #2a9b3f, #144b1e 50%, #2a9b3f);
+    background-image: linear-gradient(to right, #2a9b3f, #144b1e 50%, #2a9b3f);
+    background-repeat: no-repeat;
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF2A9B3F', endColorstr='#FF2A9B3F', GradientType=1); }
+  .ajax-status-default .ajax-status-text {
+    position: absolute;
+    left: 0;
+    width: 10em;
+    text-shadow: -1px 1px #333;
+    font-weight: bold; }
+
+/*# sourceMappingURL=jquery_ajax_status.css.map */

data/lib/assets/stylesheets/jquery_ajax_status.css.map

@@ -0,0 +1,7 @@
+{
+"version": 3,
+"mappings": "AAIA,YAAY;EAGV,OAAO,EAAE,KAAK;EACd,QAAQ,EAAE,MAAM;EAChB,OAAO,EAAE,IAAI;EAEb,QAAQ,EAAE,KAAK;EACf,GAAG,EAAE,CAAC;EACN,IAAI,EAAE,GAAG;EACT,UAAU,EAAE,MAAM;EAElB,iCAAoB;IAClB,QAAQ,EAAE,QAAQ;IAClB,GAAG,EAAE,CAAC;IACN,MAAM,EAAE,CAAC;IACT,IAAI,EAAE,IAA0B;IAChC,KAAK,EAAE,GAAuB;;AAGlC,oBAAoB;EAClB,KAAK,EAzBa,IAAI;EA0BtB,WAAW,EAAE,IAAyB;EACtC,MAAM,EA1Ba,KAAK;EA2BxB,WAAW,EA3BQ,KAAK;EA4BxB,0BAA0B,EAAE,GAAG;EAC/B,yBAAyB,EAAE,GAAG;EAC9B,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,IAAI;EACX,UAAU,EAAE,0BAA0B;EAEtC,yCAAoB;IAElB,gBAAgB,EAAE,4DAA4D;IAC9E,gBAAgB,EAAE,wDAAwD;IAC1E,iBAAiB,EAAE,SAAS;IAC5B,MAAM,EAAE,8GAA8G;EAExH,sCAAiB;IAEf,QAAQ,EAAE,QAAQ;IAClB,IAAI,EAAE,CAAC;IACP,KAAK,EA9CW,IAAI;IAgDpB,WAAW,EAAE,aAAa;IAC1B,WAAW,EAAE,IAAI",
+"sources": ["jquery_ajax_status.sass"],
+"names": [],
+"file": "jquery_ajax_status.css"
+}

data/lib/assets/stylesheets/jquery_ajax_status.sass

@@ -0,0 +1,50 @@
+$ajax_status_width: 10em
+$ajax_status_height: 2.5em
+
+
+#ajax-status
+  // If you're using bootstrap
+  //z-index: $zindex-navbar-fixed + 1;
+  z-index: 99999
+  overflow: hidden
+  display: none
+
+  position: fixed
+  top: 0
+  left: 50%
+  text-align: center
+
+  .ajax-status-animate
+    position: absolute
+    top: 0
+    bottom: 0
+    left: -($ajax_status_width / 10)
+    width: $ajax_status_width / 10
+
+
+.ajax-status-default
+  width: $ajax_status_width
+  margin-left: -($ajax_status_width / 2)
+  height: $ajax_status_height
+  line-height: $ajax_status_height
+  border-bottom-right-radius: 3px
+  border-bottom-left-radius: 3px
+  background-color: #2a9b3f
+  color: #fff
+  box-shadow: 0 0 3px rgba(0, 0, 0, 0.4)
+
+  .ajax-status-animate
+    //@include gradient-horizontal-three-colors(#2a9b3f, darken(#2a9b3f, 20%), 50%, #2a9b3f);
+    background-image: -webkit-linear-gradient(left, #2a9b3f, #144b1e 50%, #2a9b3f)
+    background-image: linear-gradient(to right, #2a9b3f, #144b1e 50%, #2a9b3f)
+    background-repeat: no-repeat
+    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FF2A9B3F', endColorstr='#FF2A9B3F', GradientType=1)
+
+  .ajax-status-text
+    // Make sure it's above the animator; z-index doesn't work
+    position: absolute
+    left: 0
+    width: $ajax_status_width
+
+    text-shadow: -1px 1px #333
+    font-weight: bold

data/lib/jquery_ajax_status.rb

@@ -0,0 +1,7 @@
+module JqueryAjaxStatus
+end
+
+if defined? ::Rails
+  class JqueryAjaxStatus::Engine < ::Rails::Engine
+  end
+end

metadata

@@ -0,0 +1,94 @@
+--- !ruby/object:Gem::Specification
+name: jquery_ajax_status
+version: !ruby/object:Gem::Version
+  version: '1.1'
+platform: ruby
+authors:
+- Martin Tournoij
+autorequire: 
+bindir: bin
+cert_chain: []
+date: 2015-08-25 00:00:00.000000000 Z
+dependencies:
+- !ruby/object:Gem::Dependency
+  name: coffee-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: jquery-rails
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+- !ruby/object:Gem::Dependency
+  name: sass
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - ">="
+      - !ruby/object:Gem::Version
+        version: '0'
+description: 
+email:
+- martin@arp242.net
+executables: []
+extensions: []
+extra_rdoc_files: []
+files:
+- MIT-LICENSE
+- README.markdown
+- lib/assets/javascripts/jquery_ajax_status.js
+- lib/assets/javascripts/jquery_ajax_status.js.coffee
+- lib/assets/stylesheets/jquery_ajax_status.css
+- lib/assets/stylesheets/jquery_ajax_status.css.map
+- lib/assets/stylesheets/jquery_ajax_status.sass
+- lib/jquery_ajax_status.rb
+homepage: https://github.com/bluerail/jquery_ajax_status
+licenses:
+- MIT
+metadata: {}
+post_install_message: 
+rdoc_options: []
+require_paths:
+- lib
+required_ruby_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+required_rubygems_version: !ruby/object:Gem::Requirement
+  requirements:
+  - - ">="
+    - !ruby/object:Gem::Version
+      version: '0'
+requirements: []
+rubyforge_project: 
+rubygems_version: 2.4.5.1
+signing_key: 
+specification_version: 4
+summary: A simple loading indicator to show you're doing ajax requests
+test_files: []