Blog Archives

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

SpokeDM demonstration

A short demonstration setting up a site to record the details of a few ducks using SpokeDM.

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.