├── .gitignore
├── Gruntfile.js
├── LICENSE.txt
├── README.md
├── bower.json
├── demo.html
├── package.json
└── src
    ├── ionic-process-spinner.js
    └── ionic-process-spinner.min.js


/.gitignore:
--------------------------------------------------------------------------------
1 | *.swp
2 | bower_components
3 | .DS_Store
4 | node_modules
5 | 


--------------------------------------------------------------------------------
/Gruntfile.js:
--------------------------------------------------------------------------------
 1 | module.exports = function (grunt) {
 2 | 
 3 |     // Project configuration.
 4 |     grunt.initConfig({
 5 |         pkg: grunt.file.readJSON('package.json'),
 6 |         uglify: {
 7 |             my_target: {
 8 |                 files: {
 9 |                     'src/ionic-process-spinner.min.js': 'src/ionic-process-spinner.js'
10 |                 }
11 |             }
12 |         }
13 |     });
14 | 
15 |     grunt.loadNpmTasks('grunt-contrib-uglify');
16 | 
17 |     grunt.registerTask('default', ['uglify']);
18 | };
19 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2015 Bengt Weiße and other contributors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person
 6 | obtaining a copy of this software and associated documentation
 7 | files (the "Software"), to deal in the Software without
 8 | restriction, including without limitation the rights to use,
 9 | copy, modify, merge, publish, distribute, sublicense, and/or sell
10 | copies of the Software, and to permit persons to whom the
11 | Software is furnished to do so, subject to the following
12 | conditions:
13 | 
14 | The above copyright notice and this permission notice shall be
15 | included in all copies or substantial portions of the Software.
16 | 
17 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
18 | EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
19 | OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
20 | NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
21 | HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
22 | WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
23 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
24 | OTHER DEALINGS IN THE SOFTWARE.
25 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # ionic-process-spinner
 2 | 
 3 | ionic-process-spinner is an [Angular.js](http://angularjs.org/) and [Ionic Framework](http://ionicframework.com/) extension. It provides the ionProcessSpinner directive to show a loading spinner until a process has finished. It replaces the child content with a loading spinner while processing.
 4 | 
 5 | Installation
 6 | ============
 7 | - run `bower install ionic-process-spinner`
 8 | - or run `npm install ionic-process-spinner`
 9 | - or download zip from release page: https://github.com/KillerCodeMonkey/ionic-process-spinner/releases
10 | 
11 | Demo
12 | ====
13 | ![ionic-process-spinner](https://cloud.githubusercontent.com/assets/2264672/9417552/9409205c-484d-11e5-9364-7e2ab0f0c293.png)
14 | ![ionic-process-spinner-active](https://cloud.githubusercontent.com/assets/2264672/9417551/93f86136-484d-11e5-8bb8-45b4525df3d2.png)
15 | 
16 | Usage
17 | =====
18 | - load ionic, ionic-process-spinner scripts in your index.html
19 | - add dependency to your app module `var myAppModule = angular.module('ionicProcessSpinnerTest', ['ionic', 'ionicProcessSpinner']);`
20 | - use directive in your html --> ion-content-loader
21 | - `<ion-process-spinner css-class="spinner-calm" spinner="crescent" processing="isProcessing"><b>My Content Loader</b></ion-process-spinner>`
22 | - the content of the ion-process-spinner element is hidden until the associated processing attribute is false
23 | - during processing is true a loading spinner is shown
24 | - an usecase example: You do not want to block the whole view vie $ionicLoading if a request is processing after a user clicked on a button to send previously filled out inputs. IonProcessSpinner only hides the submit button and shows a loading spinner.
25 | 
26 | Configuration
27 | =============
28 | - set spinner: `spinner="crescent"` (optional, default: platform dependent)
29 | - set if processing: `processing="isProcessing"` (required), a scope variable to switch content with loading spinner
30 | - css-class: `css-class="spinner-calm"` (optional), a optional css-class to style the spinner
31 | 


--------------------------------------------------------------------------------
/bower.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-process-spinner",
 3 |   "version": "0.0.1",
 4 |   "authors": [
 5 |     "Bengt Weiße <bengtler@gmail.com>"
 6 |   ],
 7 |   "description": "Angular and Ionic Framework extension. It provides the ionProcessSpinner directive to show a loading spinner until a process has finished. It replaces the child content with a loading spinner while processing.",
 8 |   "main": ["src/ionic-process-spinner.min.js"],
 9 |   "ignore": [
10 |     "bower_components",
11 |     "node_modules",
12 |     "spec",
13 |     "demo.html",
14 |     "package.json",
15 |     "Gruntfile.js"
16 |   ],
17 |   "dependencies": {
18 |     "ionic": "~1.1.0"
19 |   },
20 |   "keywords": [
21 |     "loading",
22 |     "process",
23 |     "ionic framework",
24 |     "ionic-process-spinner",
25 |     "ionic",
26 |     "angular",
27 |     "directive"
28 |   ],
29 |   "license": "MIT"
30 | }
31 | 


--------------------------------------------------------------------------------
/demo.html:
--------------------------------------------------------------------------------
 1 | <html>
 2 |     <head>
 3 |         <title>ionicProcessSpinner Test</title>
 4 |         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
 5 |         <meta charset="utf-8">
 6 | 
 7 |         <!-- Style -->
 8 |         <link rel="stylesheet" href="bower_components/ionic/release/css/ionic.min.css">
 9 |         <!-- Scripts -->
10 |         <script type="text/javascript" src="bower_components/ionic/release/js/ionic.bundle.min.js"></script>
11 |         <script type="text/javascript" src="src/ionic-process-spinner.min.js"></script>
12 |         <script>
13 |             // declare a module and load quillModule
14 |             var myAppModule = angular.module('scrollerTest', ['ionic', 'ionicProcessSpinner']);
15 |             myAppModule.controller('MainCtrl', [
16 |                 '$scope',
17 |                 '$timeout',
18 |                 function ($scope, $timeout) {
19 |                   $scope.save = function () {
20 |                     $scope.processing = true;
21 |                     $timeout(function () {
22 |                       $scope.processing = false;
23 |                     }, 3000);
24 |                   };
25 |                 }
26 |             ]);
27 |         </script>
28 |     </head>
29 |     <body ng-app="scrollerTest" ng-controller="MainCtrl" style="background-color: #eee;">
30 |         <ion-header-bar class="bar-dark">
31 |             <h1 class="title">Process-Spinner</h1>
32 |         </ion-header-bar>
33 |         <ion-content delegate-handle="main">
34 |             <form id="myForm" ng-submit="!processing && save()">
35 |               <div class="list list-inset">
36 |                   <label class="item item-input">
37 |                       <input type="text" placeholder="First Name">
38 |                   </label>
39 |                   <label class="item item-input">
40 |                       <input type="text" placeholder="Last Name">
41 |                   </label>
42 |               </div>
43 |             </form>
44 |         </ion-content>
45 |         <ion-footer-bar class="bar-dark">
46 |             <ion-process-spinner style="width:100%; text-align: center;" processing="processing" spinner="bubbles" css-class="spinner-balanced">
47 |                 <button form="myForm" style="width: 90%" class="button button-balanced">Save</button>
48 |             </ion-process-spinner>
49 |         </ion-footer-bar>
50 |     </body>
51 | </html>
52 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "ionic-process-spinner",
 3 |   "version": "0.0.1",
 4 |   "description": "Angular and Ionic Framework extension. It provides the ionProcessSpinner directive to show a loading spinner until a process has finished. It replaces the child content with a loading spinner while processing.",
 5 |   "author": "Bengt Weiße <bengtler@gmail.com>",
 6 |   "homepage": "https://github.com/KillerCodeMonkey/ionic-process-spinner",
 7 |   "main": "src/ionic-process-spinner.min.js",
 8 |   "devDependencies": {
 9 |     "grunt": "~0.4.3",
10 |     "grunt-contrib-uglify": "~0.6.0"
11 |   },
12 |   "engines": {
13 |     "node": ">=0.10"
14 |   },
15 |   "license": "MIT",
16 |   "repository": {
17 |     "type": "git",
18 |     "url": "https://github.com/KillerCodeMonkey/ionic-process-spinner"
19 |   },
20 |   "bugs": {
21 |     "url": "https://github.com/KillerCodeMonkey/ionic-process-spinner/issues"
22 |   },
23 |   "keywords": [
24 |     "loader",
25 |     "process",
26 |     "spinner",
27 |     "ionic framework",
28 |     "ionic-process-spinner",
29 |     "ionic",
30 |     "angular",
31 |     "directive"
32 |   ]
33 | }
34 | 


--------------------------------------------------------------------------------
/src/ionic-process-spinner.js:
--------------------------------------------------------------------------------
 1 | /* global angular */
 2 | (function () {
 3 |     'use strict';
 4 |     var app;
 5 |     // declare ionicScroller module
 6 |     app = angular.module('ionicProcessSpinner', ['ionic']);
 7 | 
 8 |     app.directive('ionProcessSpinner', [
 9 |         function () {
10 |             return {
11 |                 scope: {
12 |                     'cssClass': '@?',
13 |                     'processing': '=',
14 |                     'spinner': '@?'
15 |                 },
16 |                 restrict: 'E',
17 |                 transclude: true,
18 |                 template: '<div ng-transclude="" ng-if="!processing"></div><ion-spinner ng-if="processing" ng-class="cssClass" class="center" icon="{{spinner || \'crescent\'}}"></ion-spinner>'
19 |             };
20 |         }
21 |     ]);
22 | }).call(this);
23 | 


--------------------------------------------------------------------------------
/src/ionic-process-spinner.min.js:
--------------------------------------------------------------------------------
1 | (function(){"use strict";var a;a=angular.module("ionicProcessSpinner",["ionic"]),a.directive("ionProcessSpinner",[function(){return{scope:{cssClass:"@?",processing:"=",spinner:"@?"},restrict:"E",transclude:!0,template:'<div ng-transclude="" ng-if="!processing"></div><ion-spinner ng-if="processing" ng-class="cssClass" class="center" icon="{{spinner || \'crescent\'}}"></ion-spinner>'}}])}).call(this);


--------------------------------------------------------------------------------