Wobbling Pokeball with SnapSVG

Creating SVG from ground up

If you've just gotten started, then the first dirty tips to answer your questions (which you might have in mind as a beginner):

• Yes, you can import external SVG file/code into your SnapSVG Javascript code
• SnapSVG can help writing pure SVG code from scratch (yes, for simple SVG, but I don't think this is a proper way to write your big animated SVG project from scratch)
• (my gut tells me) For large SVG project, start SVG project with editor like Adobe Illustrator or Affinity Designer (follow your preferences) then export as SVG file
• Yes, for every tiny movement/animation has to be coded from scratch (no shortcut, so try to reuse code if possible)
• Speed development - utilise handy tool like CodePen to help your development!

Steps required (when you get started):

1. (If you plan to start from scratch) Start learning adding shape/line/text into your element
2. Animating SVG (mostly achievable by using the ELEMENT.animate())

See the Pen Wobbling pokeball (Snap.svg) by trtshen chaw (@trtshen) on CodePen.

Simple SVG Project with SnapSVG, HTML is not the first priority

As you can see from the example above, there is no HTML code available. It starts right into Javascript code with Snap() and canvas size for your svg

  
    var poke = Snap(230,230)
  

Once you are done declaring required elements, the rest of the code is written to style up your elements and properly group related elements for animating purpose.

Why Group Up Elements?
As you animate element, you have to animate related elements together, so grouping them in a "g" makes our job easier to animate them altogether and more useful for chaining a sequence of continuous animations.

Thanks SnapSVG for the great tool!

Implant / inject event function to every (change of src) page in iframe with AngularJs

To inject an event manually with AngularJs (from the outside of child iframe),
you'll need two key things:

• window.onload()
• window.onmousedown

You'll need an angular directive to help injecting the event function and iframe page being "load".

// inject touch event to iframe child body
angular.directive('iframe', function() {
  return {
    restrict: 'E',
    link: function(scope, element, attrs) {
      element[0].onload = function() {
        scope.loaded();
      };
    },
    controller: function($scope, $window) {
      $scope.loaded = function() {
        $window.frames[0].window.onmousedown = function() {
          alert('Touched!');
        };
      };
    }
  };
});

Firstly, from element[0], you'll get your iframe element.
2nd, prepare a "loaded()" function to let "link()" to initiate for "onload()".


This solution made by the inspiration from AngularJS: onLoad from an iframe directive by Ashish Datta

Use ngCordova inAppBrowser executeScript interacting with remote WebView content

Even the idea/solution very straight forward, but still, I learned ngCordova's inAppBrowser the hard way.

I am using cordovaInAppBrowser to handle my remote content in mobile's WebView.
Tutorials accessible out there mostly give you the idea of how it works in direct content display, like:

// insert Javascript via code / file
$cordovaInAppBrowser.executeScript({
  code: 'alert("some text in the webview");'
});

Yes, it does tell the code is working in the webview,
but my problem is how can the value be manipulated and pass back to our cordova app?
So what we need is more than pop up alert box in webview.

As I learned,

1. executeScript code WOULD JUST work when we have target as "_blank"
   
   

   // executeScript must has "_blank" as target
   $cordovaInAppBrowser.open(YOUR_URL, '_blank');
   

   
   
2. the executeScript code would just run once as inAppBrowser page load/refresh depend on the events triggered:

• $cordovaInAppBrowser:exit
• $cordovaInAppBrowser:loaderror
• $cordovaInAppBrowser:loadstop
• $cordovaInAppBrowser:loadstart

So what you can do with this executeScript feature is to 'grab' your expected variable.

$rootScope.$on('$cordovaInAppBrowser:loadstop', function(e, event){
  $cordovaInAppBrowser.executeScript({
    code: "var executable = function(data) { return data; }; executable(yourJsVariable || null);"
  }).then(function(data) {
    // Do something here with your obtained value
    if (angular.isObject(data)) {
      console.log(data);
    }
  });
});

In my case above, my detection of yourJsVariable starts as the page load of the inAppBrowser stops.

Reference: Issue injecting external script with executeScript method in Cordova
(The reference above is the best working example code I found so far.)

AngularJs UI-Router conditional Otherwise link

For easier handling of redirection of $state,
when our angularJs app handling an unknown $state name,
it'll refer to $urlRouterProvider.otherwise("/"); which have to be written inside "config()".
assuming your angular app is declared as below:

var app = angular.module([]);

app.config(['$urlRouterProvider', function($urlRouterProvider) {
  $urlRouterProvider.otherwise(function($injector, $location) {
    var AuthService= $injector.get("AuthService");
    if (AuthService.isLoggedIn()) {
      return "main";
    } else {
      return "login";
    }
  });
}]);

this allow your otherwise become dynamic depend on the login status of a user. In the code above, AuthService is an example authentication service to help determine if a user is logged in.