Merge pull request #30 from IonicBrazil/feat-style-guides

Implement IIFE and named functions to accomplish the style guide

.bowerrc

@@ -1,3 +1,3 @@
 {
-  "directory": "www/lib"
+  "directory": "src/lib"
 }

.gitignore

@@ -4,8 +4,10 @@
 node_modules/
 platforms/
 plugins/
-www/css/
-www/lib/
+src/lib/
 npm-debug.log
 modules/*
 !modules/.keep
+.idea
+www/*
+!www/.keep

.jscsrc

@@ -46,5 +46,7 @@
     "beforeOpeningCurlyBrace": true
   },
   "validateLineBreaks": "LF",
-  "requireSemicolons": true
+  "requireSemicolons": true,
+  "requireParenthesesAroundIIFE": true,
+  "validateIndentation": 2
 }

.jshintrc

@@ -0,0 +1,62 @@
+{
+    "bitwise": true,
+    "camelcase": true,
+    "curly": true,
+    "eqeqeq": true,
+    "es3": false,
+    "forin": true,
+    "freeze": true,
+    "immed": true,
+    "indent": 2,
+    "latedef": "nofunc",
+    "newcap": true,
+    "noarg": true,
+    "noempty": true,
+    "nonbsp": true,
+    "nonew": true,
+    "plusplus": false,
+    "quotmark": "single",
+    "undef": true,
+    "unused": false,
+    "strict": false,
+    "maxparams": 10,
+    "maxdepth": 5,
+    "maxstatements": 40,
+    "maxcomplexity": 8,
+    "maxlen": 120,
+
+    "asi": false,
+    "boss": false,
+    "debug": false,
+    "eqnull": true,
+    "esnext": false,
+    "evil": false,
+    "expr": false,
+    "funcscope": false,
+    "globalstrict": false,
+    "iterator": false,
+    "lastsemic": false,
+    "laxbreak": false,
+    "laxcomma": false,
+    "loopfunc": true,
+    "maxerr": 50,
+    "moz": false,
+    "multistr": false,
+    "notypeof": false,
+    "proto": false,
+    "scripturl": false,
+    "shadow": false,
+    "sub": true,
+    "supernew": false,
+    "validthis": false,
+    "noyield": false,
+
+    "browser": true,
+    "node": true,
+
+    "globals": {
+        "angular": false,
+        "cordova": false,
+        "StatusBar": false
+    }
+}

gulp/config.js

@@ -1,18 +1,21 @@
-var src = './www';
+var src = './src';
+var dest = './www';
 
 var tasks = {};
 
 tasks.common = {}
 
 // All files path
 tasks.common.allHTMLFiles = src + '/*.html'
-tasks.common.allJSFiles = ['www/{,*/}*.js', 'www/states/{,*/}*.js']
+tasks.common.allJSFiles = ['src/{,*/}*.js', 'src/states/{,*/}*.js']
 tasks.common.scriptBase = src + '/{,*/}{,*/}*.js'
 tasks.common.allSCSSFiles = src + '/scss/{,*/}*.scss'
+tasks.common.allStaticFiles = [src + '/**', '!'+src+'/scss{,/**}']
 tasks.common.src = src + '/'
+tasks.common.allFiles = src + '/**'
 
 // Dest paths
-tasks.common.destBase = src
+tasks.common.destBase = dest
 tasks.common.destCSS = tasks.common.destBase + '/css/'
 
 module.exports = tasks;

gulp/tasks/default.js

@@ -1,3 +1,3 @@
 var gulp = require('gulp');
 
-gulp.task('default', ['style-guide', 'sass']);
+gulp.task('default', ['style-guide', 'styles', 'source']);

gulp/tasks/source.js

@@ -0,0 +1,8 @@
+var gulp = require('gulp');
+var config = require('../config').common;
+
+gulp.task('source', function(done) {
+  gulp.src(config.allStaticFiles)
+    .pipe(gulp.dest(config.destBase))
+    .on('end', done);
+});

gulp/tasks/style-guide.js

@@ -1,8 +1,11 @@
 var gulp = require('gulp');
 var jscs = require('gulp-jscs');
+var jshint = require('gulp-jshint');
 var config = require('../config').common;
 
 gulp.task('style-guide', function () {
   return gulp.src(config.allJSFiles)
+    .pipe(jshint())
+    .pipe(jshint.reporter('jshint-stylish', {verbose: true}))
     .pipe(jscs());
 });

gulp/tasks/sass.js → gulp/tasks/styles.js

@@ -2,17 +2,19 @@ var gulp = require('gulp');
 var sass = require('gulp-sass');
 var minifyCss = require('gulp-minify-css');
 var rename = require('gulp-rename');
+var autoprefixer = require('gulp-autoprefixer');
+var plumber = require('gulp-plumber');
 var config = require('../config').common;
 
-gulp.task('sass', function(done) {
+gulp.task('styles', function(done) {
   gulp.src(config.allSCSSFiles)
-    .pipe(sass({
-      errLogToConsole: true
-    }))
+    .pipe(plumber())
+    .pipe(sass({ errLogToConsole: true }))
+    .pipe(autoprefixer({browsers: ['last 2 version', '> 5%']}))
     .pipe(gulp.dest(config.destCSS))
-    .pipe(minifyCss({
-      keepSpecialComments: 0
-    }))
+
+    // Minifield version
+    .pipe(minifyCss())
     .pipe(rename({ extname: '.min.css' }))
     .pipe(gulp.dest(config.destCSS))
     .on('end', done);

gulp/tasks/watch.js

@@ -4,7 +4,8 @@ var exec = require('child_process').execFile
 var config = require('../config').common;
 
 gulp.task('watch', function() {
-  gulp.watch(config.allSCSSFiles, ['sass']);
+  gulp.watch(config.allSCSSFiles, ['styles']);
+  gulp.watch(config.allStaticFiles, ['source']);
 
   var child = exec('./scripts/watch/watch.js')
 

ionic.project

@@ -2,7 +2,8 @@
   "name": "ionic-garden",
   "app_id": "",
   "gulpStartupTasks": [
-    "sass",
+    "styles",
+    "source",
     "watch"
   ],
   "watchPatterns": [

package.json

@@ -21,11 +21,14 @@
     "gulp-util": "^3.0.x",
     "require-dir": "^0.3.0",
     "shelljs": "^0.5.x",
-    "yargs": "^3.12.x"
+    "yargs": "^3.12.x",
+    "jshint-stylish": "^1.0.0",
+    "gulp-jshint": "^1.7.1",
+    "gulp-autoprefixer": "^1.0.1",
+    "gulp-plumber": "^0.6.6"
   },
   "scripts": {
-    "install-submodules": "./scripts/install/install-submodules.js",
-    "postinstall": "gulp bower-install install-source-modules"
+    "install-submodules": "./scripts/install/install-submodules.js"
   },
   "cordovaPlugins": [
     "cordova-plugin-device",

scripts/watch/watch.js

@@ -15,9 +15,9 @@ console.log(
 gulp.watch(
   './modules/ionic/dist/{,*/}*.{js,css,scss,json,eot,svg,ttf,woff}',
   batch(function (event, cb) {
-    process.stdout.write('source changed')
+    process.stdout.write('ionic source changed')
     return gulp.src('./modules/ionic/dist/**')
-      .pipe(gulp.dest('www/lib/ionic/build'))
+      .pipe(gulp.dest('src/lib/ionic/build'))
   })
 );
 

src/app.js

@@ -0,0 +1,18 @@
+(function() {
+  'use strict';
+  angular.module('starter', [
+    'ionic',
+    'starter.configureKeyBoard',
+    'starter.configureStatusBar',
+    'starter.state.sidemenu',
+    'starter.state.search',
+    'starter.state.browse',
+    'starter.state.playlists',
+    'starter.state.single',
+    'starter.state.index',
+    'starter.state.infinite-scroll',
+    'starter.state.refresher',
+    'starter.state.spinners',
+    'starter.state.loading'
+  ]);
+})();

www/index.html → src/index.html

@@ -40,6 +40,19 @@
         'states/playlists/controller.js',
         'states/single/route.js',
         'states/single/controller.js',
+        'states/infinite-scroll/route.js',
+        'states/infinite-scroll/controller.js',
+        'states/refresher/route.js',
+        'states/refresher/controller.js',
+        'states/spinners/route.js',
+        'states/spinners/controller.js',
+        'states/loading/route.js',
+        'states/loading/controller.js',
+        'states/come-back/route.js',
+        'states/come-back/controller.js',
+        'shared/ig-button-loading/ig-button-loading.directive.js',
+        'shared/ig-button-loading/ig-button-loading.controller.js',
+        'shared/ig-button-loading/ig-button-loading.spec.js',
         'states/index/route.js'
       ], function() {
         angular.bootstrap(document.body, ['starter']);

src/shared/configure-keyboard.js

@@ -0,0 +1,18 @@
+(function() {
+  'use strict';
+
+  angular.module('starter.configureKeyBoard', [
+    'ionic'
+  ])
+
+  .run(configKeyBoard);
+
+  function configKeyBoard($ionicPlatform) {
+    $ionicPlatform.ready(function() {
+      if (window.cordova && window.cordova.plugins.Keyboard) {
+        cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
+      }
+    });
+  }
+
+})();

src/shared/configure-status-bar.js

@@ -0,0 +1,17 @@
+(function() {
+  'use strict';
+
+  angular.module('starter.configureStatusBar', [
+    'ionic'
+  ])
+
+  .run(configStatusBar);
+
+  function configStatusBar($ionicPlatform) {
+    $ionicPlatform.ready(function() {
+      if (window.StatusBar) {
+        StatusBar.styleDefault();
+      }
+    });
+  }
+})();

src/shared/ig-button-loading/ig-button-loading.controller.js

@@ -0,0 +1,41 @@
+(function() {
+  'use strict';
+  angular
+    .module('starter.shared.ig-button-loading.controller', [])
+    .controller('IGButtonLoadingController', IGButtonLoadingController);
+
+  IGButtonLoadingController.$inject = ['$scope', '$state', '$timeout', '$ionicLoading'];
+
+  var DEFAULT_LOADING_OPTIONS = {
+    noBackdrop: false,
+    hideOnStateChange: false,
+    delay: 0,
+    duration: undefined
+  }
+
+  function IGButtonLoadingController($scope, $state, $timeout, $ionicLoading) {
+
+    console.log($scope.ig);
+    $scope.ig = ionic.extend(DEFAULT_LOADING_OPTIONS, $scope.ig)
+    console.log($scope.ig);
+
+    $scope.$on('$destroy', function () {
+      console.log('igLoading $destroy');
+    });
+
+    function show() {
+      $ionicLoading.show(DEFAULT_LOADING_OPTIONS);
+    }
+
+    function showNoBackdrop() {
+      $ionicLoading.show({
+        template: $scope.title,
+        noBackdrop: true
+      });
+    }
+
+    function hideLoading() {
+      $ionicLoading.show();
+    }
+  }
+})();

src/shared/ig-button-loading/ig-button-loading.directive.js

@@ -0,0 +1,34 @@
+(function () {
+  angular
+      .module('starter.shared.ig-button-loading', ['starter.shared.ig-button-loading.controller'])
+      .directive('igLoading', igLoading);
+
+  function igLoading() {
+    var directive = {
+        restrict: 'E',
+        scope: {
+          duration: '=duration',
+          noBackdrop: '=noBackdrop',
+          hideOnStateChange: '=hideOnStateChange'
+        },
+        link: link,
+        controller: 'IGButtonLoadingController',
+        controllerAs: 'ig',
+        bindToController: true
+    };
+
+    return directive;
+
+    function link(scope, element, attr, controller) {
+      scope.ig.count = 0;
+      scope.ig.time = Date.now();
+
+//      console.log(scope.ig)
+
+      element.on('click', function () {
+        console.log('igLoading $destroy', scope.ig.time, scope.ig.count++);
+      })
+    }
+  }
+
+}())

src/shared/ig-button-loading/ig-button-loading.spec.js

@@ -0,0 +1 @@
+// TODO

src/states/browse/route.js

@@ -0,0 +1,19 @@
+(function() {
+  'use strict';
+
+  angular.module('starter.state.browse', [])
+
+  .config(configBrowse);
+
+  function configBrowse($stateProvider) {
+    $stateProvider
+      .state('app.browse', {
+        url: '/browse',
+        views: {
+          'menuContent': {
+            templateUrl: 'states/browse/template.html'
+          }
+        }
+      });
+  }
+})();