First commit\!

BarakChamo · Apr 21, 2015 · 73d9201 · 73d9201
commit 73d9201
Show file tree

Hide file tree

Showing 22 changed files with 771 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+bower_components
+*.log
diff --git a/.jshintrc b/.jshintrc
@@ -0,0 +1,23 @@
+{
+  "bitwise": true,
+  "immed": true,
+  "newcap": true,
+  "noarg": true,
+  "noempty": true,
+  "nonew": true,
+  "trailing": true,
+  "maxlen": 200,
+  "boss": true,
+  "eqnull": true,
+  "expr": true,
+  "globalstrict": true,
+  "laxbreak": true,
+  "loopfunc": true,
+  "sub": true,
+  "undef": true,
+  "indent": 2,
+  "globals": {
+    "angular": true,
+    "console": true
+  }
+}
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,9 @@
+language: node_js
+node_js:
+  - "0.10"
+
+before_script:
+  - export DISPLAY=:99.0
+  - sh -e /etc/init.d/xvfb start
+  - npm install -g gulp bower
+  - bower install
diff --git a/LICENSE.md b/LICENSE.md
@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) 2015 Barak Chamo
+
+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.
diff --git a/README.md b/README.md
@@ -0,0 +1,25 @@
+# Bower Publishable Angular Directive Boilerplate
+
+This is a simple AngularJS directive boilerplate to help you start your own AngularJS directive and publish it in Bower and NPM.
+This readme file itself is a boilerplate.
+
+#### Using the boilerplate
+Clone the project and install dependencies, then use Gulp to start the prject.
+```shell
+git clone [email protected]:mohsen1/angular-directive-boilerplate.git my-directive
+cd my-directive
+npm install
+bower install
+gulp serve
+```
+#### Install via NPM or bower
+
+```shell
+npm install angular-directive-boilerplate
+```
+```shell
+bower install angular-directive-boilerplate
+```
+
+### License
+MIT
diff --git a/bower.json b/bower.json
@@ -0,0 +1,24 @@
+{
+  "name": "ng-promise-status",
+  "version": "0.0.1",
+  "authors": [
+    "Barak Chamo <[email protected]>"
+  ],
+  "description": "A collection of promise-aware Angular.js directives and UI elements",
+  "main": "dist/directive.js, dist/directive.js",
+  "license": "MIT",
+  "private": false,
+  "ignore": [
+    "**/.*",
+    "node_modules",
+    "bower_components",
+    "test",
+    "tests"
+  ],
+  "devDependencies": {
+    "jquery": "~2.1.1",
+    "angular": "~1.3.15",
+    "angular-sanitize": "~1.2.26",
+    "angular-mocks": "~1.2.26"
+  }
+}
diff --git a/demo/demo.css b/demo/demo.css
@@ -0,0 +1,5 @@
+.usage {
+  padding: 10px;
+  border: 1px solid rgba(0,0,0,0.09);
+  border-radius: 5px;
+}
diff --git a/demo/demo.html b/demo/demo.html
@@ -0,0 +1,36 @@
+<!doctype html>
+<html ng-app="demo">
+  <head>
+    <meta charset="utf-8">
+    <title>AngularJS directive demo</title>
+
+    <!-- TODO: Include Angular from Bower components -->
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
+    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-sanitize.js"></script>
+    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.css">
+
+    <link rel="stylesheet" href="../dist/directive.css">
+    <link rel="stylesheet" href="demo.css">
+  </head>
+  <body ng-controller="demoController">
+    <div class="container">
+      <h1 class="text-muted">Demo</h1>
+
+      <div class="usage row">
+        <h4>Simple usage</h4>
+        <p>This is a simple usage of the directive</p>
+        <pre>&lt;the-directive&gt;&lt;/the-directive&gt;</pre>
+        <h4>Results</h4>
+        <status-button ng-click="setSuccessPromise()" promise="successPromise">
+          <span>Good Status {{$value}}</span>
+        </status-button>
+        <status-button ng-click="setErrorPromise()" promise="errorPromise">
+          <span>Bad Status {{$value}}</span>
+        </status-button>
+      </div>
+    </div>
+
+    <script src="../dist/directive.js"></script>
+    <script src="demo.js"></script>
+  </body>
+</html>
diff --git a/demo/demo.js b/demo/demo.js
@@ -0,0 +1,35 @@
+'use strict';
+
+var app = angular.module('demo', ['ngSanitize', 'ngPromiseStatus']);
+
+app.controller('demoController', ['$scope', '$q', '$timeout', function($scope, $q, $timeout){
+  // Create a new promise that will succeed in 3 seconds
+  $scope.setSuccessPromise = function(){
+    // Reassign $scope.promise with a new promise
+    $scope.successPromise = $q.defer();
+
+    $scope.successPromise.promise.then(function(){
+      console.log('Done from controller');
+    });
+
+    // Set a timeout for 3 seconds and resolve the promise
+    $timeout(function(){
+      $scope.successPromise.resolve('YAY!');
+    }, 3000);
+  };
+
+  // Create a new promise that will fail within 3 seconds
+  $scope.setErrorPromise = function(){
+    // Reassign $scope.promise with a new promise
+    $scope.errorPromise = $q.defer();
+
+    $scope.errorPromise.promise.then(function(){
+      console.log('Done from controller');
+    });
+
+    // Set a timeout for 3 seconds and resolve the promise
+    $timeout(function(){
+      $scope.errorPromise.reject('Some Error');
+    }, 3000);
+  };
+}]);
diff --git a/directive.md b/directive.md
@@ -0,0 +1,35 @@
+# ng-promise-status
+A collection of promise-aware Angular.js directives and UI elements
+=======================
+
+### Installation
+
+Install via bower
+
+```shell
+bower install ng-promise-status
+```
+
+### Usage
+
+Add it as a dependency to your app and then use the directive in your HTML files.
+
+More documentation and examples coming soon.
+
+### Development
+
+Install Gulp via npm if you don't have it
+```shell
+npm install -g gulp
+```
+
+### Available commands
+
+* `gulp`: build and test the project
+* `gulp build`: build the project and make new files in`dist`
+* `gulp serve`: start a server to serve the demo page and launch a browser then watches for changes in `src` files to reload the page
+* `gulp test`: run tests
+* `gulp serve-test`: runs tests and keep test browser open for development. Watches for changes in source and test files to re-run the tests
+
+### License
+MIT
diff --git a/dist/directive.css b/dist/directive.css
@@ -0,0 +1,15 @@
+/*!
+ * ng-promise-status
+ * 
+ * Version: 0.0.1 - 2015-04-21T16:40:47.650Z
+ * License: MIT
+ */
+
+
+.the-directive {
+  color: green;
+}
+.the-directive button {
+  padding: 10px;
+  color: blue;
+}
diff --git a/dist/directive.js b/dist/directive.js
@@ -0,0 +1,102 @@
+/*!
+ * ng-promise-status
+ * 
+ * Version: 0.0.1 - 2015-04-21T16:40:47.639Z
+ * License: MIT
+ */
+
+
+'use strict';
+
+angular.module('ngPromiseStatus', [])
+.directive('statusButton', ['$timeout', '$q', function ( $timeout, $q ) {
+  var value = 0;
+
+  return {
+    restrict: 'AE',
+    templateUrl: 'directive.html',
+    replace: true,
+    transclude: true,
+    scope: {
+      promise: '=',
+      options: '='
+    },
+    link: function (scope, element, attrs, controller, transclude) {
+      // Set directive configuration defaults
+      scope.$config = {
+        // Status classes
+        success_class: scope.options  && scope.options.success_class  || 'success',
+        error_class:   scope.options  && scope.options.error_class    || 'error',
+        progress_class: scope.options && scope.options.progress_class || 'inprogress',
+
+        // Disable on progress
+        progress_disable: scope.options && scope.options.progress_disable || true
+      };
+
+      // Initialize exposed scope properties
+      scope.$status = 'prestine';
+      scope.$class  = '';
+
+      function setPromise(promise){
+        console.log('SET PROMISE');
+        var p;
+
+        // Reset exposed scope values
+        scope.$status  = 'inprogress';
+        scope.$class   = scope.$config.progress_class;
+        scope.$success = false;
+        scope.$done    = false;
+        scope.$value   = undefined;
+
+        // Check for supported types
+        p = promise.propertyIsEnumerable('promise') ? promise.promise : promise;
+        p = p instanceof Array ? p : [p];
+
+        $q.all(p)
+          .then(success, error, progress);
+      }
+
+      // Handle sucessful promises
+      function success(value){
+        scope.$status  = 'success';
+        scope.$class   = scope.$config.success_class;
+        scope.$success = true;
+        scope.$done    = true;
+        scope.$value   = scope.promise instanceof Array ? value : value[0];
+
+        console.log(value);
+      }
+
+      // Handle promise errors
+      function error(err){
+        scope.$status  = 'error';
+        scope.$class   = scope.$config.error_class;
+        scope.$success = false;
+        scope.$done    = true;
+        scope.$value   = err;
+
+        console.log(err);
+      }
+
+      function progress(value){
+        scope.$value = value;
+      }
+
+      // Status Button ng-click handler
+      scope.statusButtonClick = function($event){
+        $timeout(function(){
+          setPromise(scope.promise);
+        });
+      };
+
+      // Transclude the button's content
+      //- Transclusion is done here and not with ngTransclude 
+      //- because we want to expose some scope goodies back to
+      //- the original template from the directive's isolate scope.
+      transclude(scope, function(clone){
+        element.append(clone);
+      });
+    }
+  };
+}]);
+angular.module("ngPromiseStatus").run(["$templateCache", function($templateCache) {$templateCache.put("directive.html","<button class=\"status-button\" ng-click=\"; statusButtonClick($event)\" ng-class=\"$class\" ng-disabled=\"$config.progress_disable && $status === \'inprogress\'\"><span class=\"status\">status</span></button>");}]);
diff --git a/dist/directive.min.css b/dist/directive.min.css
@@ -0,0 +1,6 @@
+/*!
+ * ng-promise-status
+ * 
+ * Version: 0.0.1 - 2015-04-21T16:40:47.650Z
+ * License: MIT
+ */.the-directive{color:green}.the-directive button{padding:10px;color:#00f}
diff --git a/dist/directive.min.js b/dist/directive.min.js