Learning React JS and Python

I'm currently teaching myself a few new languages to expand my knowledge base and development capabilities.

React JS: https://facebook.github.io/react/docs/tutorial.html

Python: http://learnpythonthehardway.org/book

Tooltip styling is removed when used in ngRepeat

Problem: I have a tooltip that is styled using jQuery, but when it is used in an ngRepeat the styling is removed.

Examples:

Correct styling (no ngRepeat):

No styling (inside ngRepeat):

Process: I did a bit of research and it seemed like an ngRepeat scoping issue; where the ngRepeat was unable to access the correct styling as each repeat is the child of the repeater, not the parent and therefore loses some bindings.

I made a Stack Overflow post to try and see if anyone could confirm my theory and potentially provide a solution.

I created a new tooltip using css instead of jQuery to see if it was a scoping issue. After some fiddling around I got it working inside the repeater! However the width of the tooltip was very narrow:

I created this Stack Overflow thread to ask others ideas on how to fix it after trying a bunch of fixes myself. The only response was someone suggesting changing the position value from absolute to relative:

It seems that more work would have to be done because not only did the positioning have to be redone, the tooltip was not dynamic in that it was being cut off on browser resizing. So I went back to solving the ngRepeat issue with the jQuery tooltip as this is something I wanted to solve and a better option than having redundant versions of tooltips.

Reasoning: I learnt that on the page load event the jQuery binds the custom tooltip class to tooltip function. However, when it's used in the repeater the event is fired after the page load and there is no existing binding. Therefore it is necessary to bind newly created elements to the tooltip again.

Basically the jQuery is initialised and rendered, but the ngRepeat is on the client side. Each repeat is dynamically generated with the scope of the child, not the parent, so all original bindings are out of scope and need to be re-binded after the ngRepeat has been created.

Solution: Re-bind all dynamic elements to the ngRepeat after it has been initialised and rendered. Referenced this post for a solution.

Create new directive to broadcast when the ngRepeat has finished rendering:
In the controller create a listener for the broadcast that then updates the parent of the tooltip (which in turn updates the tooltip):
Add on-finish-render="ngRepeatFinished" to the ngRepeat in the ascx:
Result:

AngularJs modules corrected to support minification

Problem: All the dependency injections in the project I am working on currently do not support JavaScript minification. Minification is the process of removing all the white space and other unnecessary characters from the code, such as comments, new line characters and sometimes block delimiters. This compresses the code without removing any functionality, and because it isn't actually compressed it doesn't need to be uncompressed to be read (therefore both the minified source and the original can be interpreted immediately). - source

I am using Grunt to minify all code, which uses UglifyJS to minify the JavaScript specifically.

Solution: By adding a simple object (keyword) to map the parameter instead of injecting directly into the function. This means that if parameters naming changes it will still be injecting the correct value.

Current code:
Improved code:
All the controllers, directives and factories should be in this format.

Chart.js tooltip cut off

Problem: 

• Using Chart.js to display data but the tooltip has been cut off by the edge of the chart's container:

Apparently it is a bug (https://github.com/nnnick/Chart.js/issues/622).

A couple of options I thought of, including:

• Line break: "At this point in time, it's not possible to add line breaks to a tooltip or axis label." - http://stackoverflow.com/questions/29302392/chartjs-tooltip-line-breaks
• Text wrapping: Apparently the top solution is to hope a solution "magically" happens - https://github.com/nnnick/Chart.js/issues/608
• Adding width, margin, neither worked.
• Updating Chart.js to calculate and move the tooltips to prevent being cut off, however this is something I can't implement for what I'm working on - https://github.com/matt-bradley/Chart.js/commit/9fd40ce65fbcb7fb11f6af1d019001a4718c666e

Solution:

• Increase the size of the canvas using width and height (and also therefore adding margins for the center text). This was not the preferred option, but it works and was quick to implement. Because the size of the tooltip will never be larger than the example given, it's also therefore a robust solution:

How to open a new tab in AngularJs

I have a hyperlink that when clicked, opens a document:
To make the hyperlink open the document in a new tab add:
target="_blank":

Datepicker year range examples

Examples of how to set the year range in AngularJs datepicker:

1900 to present

• yearrange="1900:+0"

Last 20 years

• yearrange="-20:+0"

1950 to 2000

• yearrange="1950:2000"

18 years or older (up to 115 years)

• yearrange="-115:-18"

5 years from the present

• yearrange="+0:+5"

Set the start date on a mobile native keyboard

Setting the minimum allowed date on a datepicker, but when testing for mobile, the iPhone keyboard still lets the user scroll all the way back to the year "1".

I did some research and from what I saw I was using the "min" attribute correctly. I then checked the AngularJs version I am using which is v1.3.2. This is an earlier version compared to most of the forum references I was looking at, and after some further research I realised this earlier version has a different naming attribute for minimum value for datepicker. I therefore changed the attibute from "min" to "min-date" and it now works.