DailyJS

DailyJS

The JavaScript blog.


Tagmodal
Featured

ui validation coffeescript modal angularjs

AngularJS Roundup: ngDialog.js, ocLazyLoad, angular-validation

Posted on .

People keep sending me AngularJS scripts to write about, so I've collected a few together to start a probably infrequent AngularJS Roundup. This week we've got three scripts to talk about, and the first is ngDialog.js.

ngDialog.js

ngDialog.js (GitHub: likeastore / ngDialog, License: MIT) by Dmitri Voronianski is a modal dialog and popover provider. You can load it and display a dialog like this:

var app = angular.module('exampleApp', ['ngDialog']);

app.controller('MainCtrl', function($scope, ngDialog) {  
  $scope.clickToOpen = function () {
    ngDialog.open({ template: 'popupTmpl.html' });
  };
});

The markup for the dialog can be a string, or loaded from a template:

<script type="text/ng-template" id="templateId">  
  <h1>Template heading</h1>
  <p>Content goes here</p>
</script>  

You can even use the ng-dialog directive. The project comes with two default themes, and you can use one of those to get started creating your own. The default theme has CSS animations and media queries.

ocLazyLoad

ocLazyLoad (GitHub: ocombe / ocLazyLoad) by Olivier Combe is a module for lazy loading dependencies in AngularJS. It's a service provider that allows you to load files with promises, like this:

$ocLazyLoad.load({
  name: 'TestModule',
  files: ['testModule.js']
}).then(function() {
  console.log('done');
});

The blog post explains how the whole thing works, with detailed examples and explanations of how AngularJS loads modules.

Since the modules can only be loaded on startup and the application can only be launched using the ng-app directive, if we can find the app module, we can get the complete list of all loaded modules and dependencies.

Angular Validation

Angular Validation (GitHub: huei90 / angular-validation) by Huei Tan is a set of form validation directives. It supports various validation methods -- watch, blur, or submit, so you can show errors when it makes sense for your application.

It has some built in validation types, but you can add your own in JavaScript by loading the validation provider, and then adding new validation "expressions". Expressions are loaded based on the validator attribute. The readme has an example of how to do this, with the huei validator.

AngularJS with CoffeeScript

Finally, Elad Ossadon sent in an article about making AngularJS classes work better with CoffeeScript: Angular.js CoffeeScript Controller Base Class.

It's a fairly short post with a base class snippet and an example controller module.

Featured

jquery games touchscreen modal tiling

jQuery Roundup: Knob, OmniWindow, bPopup, Pageflipper, Tiler

Posted on .

Note: You can send your plugins and articles in for review through our contact form or @dailyjs.

jQuery Knob

jQuery Knobs

jQuery Knob (GitHub: aterrien / jQuery-Knob, License: MIT/GPL) by Anthony Terrien is a nice and configurable dial widget.

It can be configured to exhibit a wide range of behaviours, from value range entry to an iPod clicker-style "infinite" wheel. The value that is displayed can be directly manipulated as well, and it works with scroll wheels and touchscreens.

OmniWindow

OmniWindow (GitHub: 0x000000 / OmniWindow, License: MIT) by Alexander Rudenko is a fairly small modal window plugin, and the author has attempted to target it at programmers rather than designers.

The documentation is good and covers the main use-cases, and despite stating that the plugin doesn't support tonnes of options, it includes enough to keep it flexible.

It's based around events, so it can be used like this:

$('div.modal').omniWindow()
  .trigger('show');

And it allows class names to be overridden, in case you want to integrate it with an existing project:

$('div.another-modal').omniWindow({
  overlay: {
    selector: '.custom-overlay', // don't forget the period symbol! 
    hideClass: 'custom-overlay-closed'
  },
  modal: {
    hideClass: 'custom-modal-closed'
  }
});

bPopup

bPopup by Bjørn Klinggaard is another modal plugin that is simply triggered by calling $('element_to_pop_up').bPopup(). By default it'll reposition the popup when the browser's size is changed.

For full details on the available downloads and source code, see 21.04.12: New release, bPopup version 0.7.0.

Pageflipper

Pageflipper (GitHub: wtw-software / pageflipper, License: MIT) from wtw-software uses CSS3 transitions to creative a native-feeling page sliding effect. It looks like something that would appeal to mobile web developers, but will also work with a mouse.

It can also be controlled programmatically:

$('#pageflipper').pageflipper('flipleft')

Tiler

Tiler (GitHub: borbit / tiler, License: MIT) by Serge Borbit is a library for working with infinite grids of tiles. This could be used to display map content, but the author has designed it with games in mind.

It feels more like a standard JavaScript library than a jQuery plugin (although jQuery is a dependency), so using it requires creating an instance of a Tiler object:

var tiler = new Tiler($('#viewport'), {  
  tileSize: 200,

  sync: function(options, callback) {
    var tosync = options.tosync;

    tosync.forEach(function(tile) {
      var img = new Image();
      var x = tile[0];
      var y = tile[1];

      img.onload = function() {
        callback([[x, y, $('<img/>').attr('src', img.src)]]);
      };

      img.src = 'image_' + x + '_' + y + '.png';
    });
  }
});

QUnit tests are included.