Ionic_Development

Ionic_Development.js

// cordova-screenshot not calling callback function.
ionic platform remove android
ionic platform add android@4.1.1
ionic plugin add com.darktalker.cordova.screenshot@v0.1.4     #instead of master downgrade by one.

// Solve Jumping behaviour on focus input
cordova.plugins.Keyboard.disableScroll(true);
ion-content[overflow-scroll="false"]


// Tab select problem in mobile for google maps
// onAfterEnter add
$timeout(function() {
  var container = document.getElementsByClassName('pac-container');
  angular.element(container).attr('data-tap-disabled', 'true');
}, 500)
https://github.com/driftyco/ionic/issues/1798


// Kakao user data saved in sails
{"id":String, "username":"Number","nickname": String,"profile_image": String,"thumbnail_image": String}
// Facebook user data saved in sails
{"id":String, "username":"Number","nickname":String,"profile_image":String}


// Get a reference to filtered array
<tr ng-repeat="phone in (filteredPhones = (phones | filter: query))">


// Get/Set function from JSON;
let person = {
  name: 'Susan',
  age: 24,
  sayHi: function() {
    console.log('Susan says hi!');
  }
};

let replacer = (key, value) => {
  if (typeof value === 'function') {
    return value.toString();
  }
  return value;
};

const serialized = JSON.stringify(person, replacer, 2);

let reviver = (key, value) => {
  if (typeof value === 'string' && value.indexOf('function ') === 0) {
    let functionTemplate = `(${value}).call(this)`;
    return new Function(functionTemplate);
  }
  return value;
};

const parsedObject = JSON.parse(serialized, reviver);

parsedObject.sayHi(); // Susan says hi!


// Oauth Setup

// Facebook
http://www.sitepoint.com/how-to-integrate-facebook-login-into-a-cordova-based-app/
http://stackoverflow.com/questions/21329250/the-developers-of-this-app-have-not-set-up-this-app-properly-for-facebook-login/26135600#26135600
https://developers.facebook.com/docs/facebook-login/permissions#reference-user_actions_books

// Twitter
http://iag.me/socialmedia/how-to-create-a-twitter-app-in-8-easy-steps/
clientId === 'Consumer Key'
clientSecret === 'Consumer Secret'
//Need to use jsSha version 1.6.0, latest does not work

// Google
https://github.com/imskojs/google-login/blob/master/www/js/app.js
// Go to API manager > Credentials > Add Oauth2 clientID > add callback url as http://localhost/callback


// Fix localnotification error on build android.
// Better to use phonegap-plugin-push and ionic push
change LocalNotification.java 
both
/plugins/de.appplant.cordova.plugin.local-notification/src/android/LocalNotification.java
/platforms/android/src/de/appplant/cordova/plugin/localnotification/LocalNotification.java

private static synchronized void sendJavascript(final String js) {
    if (!deviceready) {
        eventQueue.add(js);
        return;
    }
    webView.getView().post(new Runnable(){
      public void run(){
        if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
          webView.sendJavascript(js);
        } else {
          webView.loadUrl("javascript:" + js);
        }
      }
    });
    // webView.post(new Runnable(){
    //     public void run(){
    //         if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    //             webView.evaluateJavascript(js, null);
    //         } else {
    //             webView.loadUrl("javascript:" + js);
    //         }
    //     }
    // });
}

//THEN DELETE
platforms/android/libs/android-support-v4.jar


// Angular Directive with scope: true for lazy dev
// Aim is to get away with not having to pass scope: {stuff1: stuff1, stuffN: stuffN}
<form>
  <form-field ng-model="formModel[field.attr]" field="field" ng-repeat="field in fields">
</form>
// directive
angular.module('app')
.directive('formField', function($compile, $parse) {
  return { 
    restrict: 'E', 
    compile: function(element, attrs) {
      var fieldGetter = $parse(attrs.field);

      return function (scope, element, attrs) {
        var template, field, id;
        field = fieldGetter(scope);
        template = '..your dom structure here...'
        element.replaceWith($compile(template)(scope));
      }
    }
  }
})


// Transition Overlay problem in IOS
// Now solved with latest ionic
// In bower.json add 
dependencies: {
  "ngIOS9UIWebViewPatch": "https://github.com/imskojs/ngIOS9UIWebViewPatch.git",
  "ionRadioFix": "https://github.com/imskojs/ionRadioFix.git"
}
// In gulpfile.js add;
var paths = {
  sass: [
    './codes/lib/ionRadioFix/ionRadioFix.scss',
  ],
  lib: [
    './codes/lib/ngIOS9UIWebViewPatch/ngIOS9UIWebViewPatch.js',
    './codes/lib/ionRadioFix/ionRadioFix.js'
  ]
};
// In app.js inject ngIOS9UIWebViewPatch;
angular.module('app', ['ngIOS9UIWebViewPatch'])
// In platforms/ios/YOUR_APP_NAME/YOUR_APP_NAME-Info.plist add;
<key>NSAppTransportSecurity</key>
<dict>
  <key>NSAllowsArbitraryLoads</key>
  <true/>
</dict>
// Just before the very last </dict>
// Then;
bower install
gulp lib
gulp


// Allow all External link, and setting Content-Security-Policy
// In config.xml
  <access origin="*"/>
  <access origin="*" launch-external="yes" />
  <allow-intent href="*" />
  <allow-navigation href="*" />
  <!-- In index.html -->
  <meta http-equiv="Content-Security-Policy" content="default-src *; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline' 'unsafe-eval'">

    
// Style on aspect ratio  
@media only screen and (min-aspect-ratio: 20/31) {
}


// Styling SelectBox requires following property to start
  border: 1px solid transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;