Category Archives: AngularJS

Guided Description Forms

Today’s blog post moves a bit away from my current trend in Node.js server side code and moves on to a UX/UI problem that I solved recently.

The problem

You have a description field – just a text/html wysiwyg field that the user is supposed to fill out. The problem is that for whatever reason you want the user to add specific data to the field or in a specific format and our users are not very good at following instructions as we all know! Now you could just pre-populate the field with some titles and blanks for them to fill out, but this isn’t very “nice” to use. I came up with the following solution (cause running code is worth more than the proverbial 10,000 words):

Explained

This code runs around 2 main directives called: ‘dynamicInput’ and ‘formDescription’. Pretty simple, the former takes in some options that change how it is displayed, the latter watches all the fields passed into it to update one ng-model with the compiled code.

Hope this helps out someone else, if you have any comments/improvements or use this in some cool app – Please let me know in the comments!!

textAngular

I’d like to introduce you all to a project I have been contributing to recently. It is called textAngular. It is a WYSIWYG editor designed from the ground up to work in AngularJS with no external libraries and, thanks to document.execCommand, no IFrames either!

We’ve recently released version 1.1.2 and I highly recommend that you check it out if you work with AngularJS in any way.
Check out the GitHub page for the Wiki and Source code: https://github.com/fraywing/textAngular

AngularJS drag ‘n’ drop re-order in ngRepeat

EDIT I’ve just got a github up for this here: https://github.com/SimeonC/ngRepeatReorder. I’ve fixed some of the bugs in the code and updated it to run on the 1.2.x angularjs codebase.

I’ve been busy on some small projects that I’ve been doing recently and a little problem I’ve had to overcome is the difficulty of doing drag ‘n’ drop reorders in an ngRepeat.

After looking around the web I came up with the following solution:

See the Pen AngularJS ngRepeat Drag n Drop by SimeonC (@SimeonC) on CodePen

How It Works

In short this works by starting with the ngRepeat code in angular.js. Which in itself is complex as you have to also copy over a bunch of functions that it uses that are hidden elsewhere in the codebase. Then you add all the lovely complexity of moving elements around – I decided to simplify this by limiting the movement within the list bounds and only do vertical re-ordering. I animate this by fiddling with the margins – creating a gap where the ‘dragged’ element is going to drop into and then using +/- margins to position the dragging element correctly. Also we add in classes for display purposes.

The last hurdle I had to overcome is to modify the ngRepeat element before our modified ngRepeat compiles the element, I did this with a second directive that executes before the ngRepeat and adds the event tags onto the element.

SpokeDM

I am proud to announce the fruits of some hard work and my first complete product (always a happy moment). Today I have just finished coding a CFWheels and AngularJS based Framework called SpokeDM.

This framework aims to take the hassle out of coding maintenance screens for whatever project you are building. It uses the excellent work from CFWheels models and extends it to generate the front end view for the end user.

Jump over to the website: spokedm.com for video demonstrations and more details.

Contestate Site

A while back I had launched a site called contestate.net that I wrote myself with the help of a themeforest template. The site is built with the idea of a mobile/desktop app to track competitions between friends. A few of the things that I have posted in the angularjs and coldfusion sections of this blog originated in problems I had in building the site. I had previously only really opened it up to a few friends, but now I am opening it up to the world at large – it’s free (my company kindly gave me free hosting, lume.co.nz). So go check it out: contestate.net (and don’t worry about the Open Alpha tag I have on there, the security is the same I use for my live apps and we have ironed most of the bugs out.) I would appreciate any criticisms/bugs/suggestions or anything on the system, just leave them here in the comments, on the Contestate page up top or email them through to the contestate email address.

 

EDIT This has been taken offline as the hosting has been discontinued and I don’t feel the need to continue paying for hosting for something that isn’t used!

AngularJS Focus Only Timeouts

Today’s blog is about a little factory I created to solve a particularly interesting problem, basically we have a timer on our page that updates every second and I didn’t want or need that timer to update whilst not on the page so I developed a widget that does the following:

– Only runs the timeout when the page is focussed.
– Allows the pausing and un-pausing of all timeouts registered with it.
– Allows pausing of individual timeouts by name.
– Allows removing timeouts from the page.

You can download the file with all my modules in it here: http://www.mediafire.com/?96p8pk72u0h2rfr and see an example in a JS fiddle here: http://jsfiddle.net/Xanetia/xuBV7/

The JSFiddle has some issues due to it being in frames or something like that, but does work if you run it in a new tab/window (you should be able to right click and select “Open in new…”).

For using the factory, the functions you will need to use are:

FocusOnlyTimeouts.addTimeout(unique_name_string, function, timeout_in_milliseconds); //runs the function passed as if used in a recursive timeout function. - note that the function must be a reference or a function itself, ie example not example() otherwise the function will only be run when the timeout is added to the factory.

FocusOnlyTimeouts.pauseTimeout(unique_name_string);//pauses the named timeout

FocusOnlyTimeouts.unpauseTimeout(unique_name_string);//unpauses or restarts the named timeout

FocusOnlyTimeouts.pauseAll();//pauses ALL timeouts

FocusOnlyTimeouts.unpauseAll();//unpauses or restarts ALL timeouts

FocusOnlyTimeouts.stopTimeout(unique_name_string);//the timeout function will not be run again and the timeout will be deleted from the factories memory

AngularJS Table Sort Service

I’ve been meaning to do an angular post for a while having enjoyed the framework immensely. First off, go have a look here http://jsfiddle.net/Xanetia/Azhg7/. It supports multiple direction and column (hold shift and click headers) sorting (actually on any ng-repeat, but a table is the simplest usage). Now all you have to do if you want to use it is copy the factory as in that link, or download the following file (which has a bunch of other useful directives as well) and include the ‘sdevgame’ in your module declaration (eg angular.module(‘myapp’, [‘sdevgame’])): http://www.mediafire.com/?96p8pk72u0h2rfr

To use this table sorting service (or in fact to sort ANY ngRepeat) you have to do the following:

  1. Inject MultiOrder into your controller.
  2. Add ng-click=”modOrder($event, ‘name’)” where ‘name’ is the variable you want to orderBy in the ngRepeat, to the elements that you want to use for ordering. In the jsFiddle above I use the <th> tags to order each column.
  3. Add ” | orderBy: MultiOrder.orderArray” to any ngRepeats you want to order (this even works on multiple as long as the object names are the same).
  4. In your controller setup the following:
    $scope.MultiOrder = MultiOrder;
    $scope.MultiOrder.orderArray = ['-name'];//set the initial order
    $scope.MultiOrder.forceOrder = ['+name'];//set any default forced order
    $scope.MultiOrder.plusSortClass = "green";//these classes are put on the element when the sort is applied
    $scope.MultiOrder.minusSortClass = "blue";
    
    $scope.modOrder = MultiOrder.modOrder;

Note: I haven’t figured a way of dynamically applying the initial sorting class, so if you set the initial order or a force order don’t forget to add the class to the relative order element.