Phil 12.4.14

8:00 – 6:00 SR

Directive Supported animations
ngRepeat Enter, leave, and move
ngView Enter and leave
ngInclude Enter and leave
ngSwitch Enter and leave
ngIf Enter and leave
ngClass Add and remove
ngShow and ngHide Add and remove
form and ngModel Add and remove
ngMessages Add and remove
ngMessage Enter and leave

A better ng-class example (here in plunker):
The CSS classes. Note that the ‘base-class’ contains the animation timings:
.base-class {
width: 200px;
height: 50px;
text-align: center;
margin: 10px;
padding: 10px;
-webkit-transition: background-color 1s, color 1s, border-color 1s;
transition: background-color 1s, color 1s, border-color 1s;
}

.base-class.whiteBackground {
background-color: white;
color: black;
border: 3px solid black;
}
.base-class.blackBackground {
background-color: black;
color: white;
border: 3px solid white;
}
.base-class.greenBackground {
background-color: green;
color: yellow;
border: 3px solid yellow;
}
.base-class.blueBackground {
background-color: blue;
color: magenta;
border: 3px solid magenta;
}
.base-class.redBackground {
background-color: red;
color: cyan;
border: 3px solid cyan;
}

The Angular code that cycles through the classes:

<body>
    <link href="ngClassSample.css" rel="stylesheet" />
    <div ng-controller="MyApp as ma">
        <h1>ngClass Animation</h1>
        <div>
            <button ng-click="ma.doToggle()">Next !</button>
            <div class="base-class" ng-class="ma.getAnimationClass()">
                This is the 'ugly sweater' of css animations
            </div>
        </div>
    </div>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular-animate.min.js"></script>
    <script>
        var app = angular.module('myApp', ['ngAnimate']);
        app.controller('MyApp', [function(){
            var self = this;
            var classArray = ['', 'blackBackground', 'whiteBackground', 'greenBackground', 'blueBackground', 'redBackground'];
            self.toggle = 0;
            self.doToggle = function(){
                self.toggle++;
            }
            self.getAnimationClass = function(){
                var index = self.toggle%classArray.length;
                return classArray[index];
            }
        }]);
    </script>
</body>

Phil 12.3.14

8:00 – 1:00, 3:00 – 7:00

  • DB backups
  • Status Report
  • Rolled back the JavaUtils jar file to the working version (compiled on 9/4/14)
  • Discussed the whole direct cite vs. reimbursable with Chris and Lenny. A scatter plot with 0% for DC, R and allocation time at one corner and 100% at the other should give them what they want. Dong’s going to work on the query to produce the data and I’m going to try to render the report in angular and 3D css.
  • More angular. Learning the lifecycle of animations. It looks like if you use straight transitions, then there is a lot of state watching, but if you use keyframe abnimations, everything is much simpler. For example, the two following CSS examples give the fade in/out results:

Using Transitions

/* ngIf animation */
 .animIf.ng-enter {
 /* if the value is true */
 -webkit-transition: opacity linear 0.1s;
 -moz-transition: opacity linear 5.0s;
 -ms-transition: opacity linear 5.0s;
 -o-transition: opacity linear 5.0s;
 transition: opacity linear 5.0s;
 }

 .animIf.ng-leave {
 /* if the value is false */
 -webkit-transition: opacity linear 5s;
 -moz-transition: opacity linear 5s;
 -ms-transition: opacity linear 5s;
 -o-transition: opacity linear 5s;
 transition: opacity linear 5s;
 }
 .animIf.ng-enter,
 .animIf.ng-leave.ng-leave-active {
 opacity: 0.0;
 }

 .animIf.ng-leave,
 .animIf.ng-enter.ng-enter-active {
 opacity: 1;
 }

Using keyframes:

  .listStyle.ng-enter {
 -webkit-animation: 5s enterKeyframes;
 -moz-animation: 5s enterKeyframes;
 -ms-animation: 5s enterKeyframes;
 -o-animation: 5s enterKeyframes;
 animation: 5s enterKeyframes;
 }
 @keyframes enterKeyframes {
 from {
 opacity: 0;
 }
 to {
 opacity: 1;
 }
 }

 .listStyle.ng-leave {
 -webkit-animation: 5s leaveKeyframes;
 -moz-animation: 5s leaveKeyframes;
 -ms-animation: 5s leaveKeyframes;
 -o-animation: 5s leaveKeyframes;
 animation: 5s leaveKeyframes;
 }
 @keyframes leaveKeyframes {
 from {
 opacity: 1;
 }
 to {
 opacity: 0;
 }
 }

I don’t know about you, but to me, the second seems much clearer.

Dong Shin 12.03.2014

  • trouble shooting javaUtils – need to find the change dated 04/19/2014
  • discussion on Direct Cite/Reimbursable – By capability, project
  • added more currency fields to Query Builder
  • working on Monthly Status Query

Phil 12.2.14

8:00 – 6:00 SR

  • DB Backups
  • C-Town
    • Dec 10 meeting
    • Dec 10 StAg meeting?
    • Schedule walkthrough
  • Angular plus css
    • While working my way through said task, I discovered a bug where FF35 does not handle asymmetric scaling correctly. Try this link in your various browsers to test.
    • Nice set of tutorials on 3D and CSS.
  • Neo4j Graph Database? Follow link for books/videos.
  • Need to finalize direct cite reimbursable

Phil 11.28.14

7:30 – 4:30 SR

  • Angular
  • Let’s try building a directive that we use ng-repeat on. Not too bad! Here’s how I did it:

Directive javascript:

pa.directive('oldPost', ['$window', function($window) {
 return {
 templateUrl: 'directives/oldPost.html',
 restrict: 'AE',
 scope: {pobj: '='}
 }
}]);

Directive HTML (directives.oldPost.html):

<div class="inputWrapper">
 <div class="textLabel">Posted: {{pobj.postDate}}</div>
 <textArea class="textAreaOutput" ng-model="pobj.postText" ng-disabled="true"></textArea>
</div>

Master HTML:

<div ng-repeat="pobj in mainCtrl.postItems">
 <old-post pobj = "pobj"></old-post>
</div>

Phil 11.26.14

7:30 – 4:00 SR

  • DB backups
  • Angular
    • Important note – if you want to include html from another source using ng-bind-html (php errors, for example), you have to use ngSanitize. More from stackOverflow here: http://stackoverflow.com/questions/19770156/how-to-output-html-through-angularjs-template.
    • Still playing around with how to organize code for a project with shared libraries. Currently, I’ve set it up so that there are the following folders:
      • modules – contain the initial declaration, factories and services. They also define a global (sigh) variable for each of the modules that can be used to attach controllers and directives to, because Angular isn’t as good as YUI at namespacing.
      • controllers – controllers that are unique to a particular app are contained in a common file (i.e. “postControllers.js”)
      • directives – directivesthat are unique to a particular app are contained in a common file (i.e. “postDirectives.js”). Additionally, html snippets for the directives are contained in this file. I’m guessing that this will change so that the html gets its own directory.
  • Set up workspace and downloaded environment to work from home on Friday.

Phil 11.25.14

7:30 – 5:30 SR

  • DB backups
  • Worked with Bill V. to correct some web transition paperwork
  • Angular – have a much better sense of the whole $http core service. Bult a factory that converts json to php-compatible queries and takes as arguments function pointers that can in turn have bound components in them. Much better than a subscriber pattern.
  • Discovered flowhub, which seems to be making a javaScript case tool. Need to look more deeply.

Dong Shin 11.24.2014

  • on-site
    • cleaned up COGNOS data so that correct appropriations are mapped
    • deployed new FinancialAssistant.jar with appropriation fix
    • sanity checked new data upload
    • Lenny will upload complete (?) data set
  • AngularJS
    • working on SQL Editor – send up queries and display results!

Phil 11.21.14

Phil 8:00 – 4:00

  • I can see the servers again!
  • DB backups
  • No deploy, Bill V is out for the day.
  • More Angular. Spent most of the day working on sending and receiving data. YUI had all kinds of nice functions to convert JSON objects to all kinds of things. JavaScript and Angular lack these, so after poing around for a while I found this post that seems to work nicely and lets you use POJsOs for data upload. Using a function in the in the module definition is something I have not seen before. Need to understand that better.