muu

commit

a5cfc60f76bba142992900ed9c321363513eeb61

parent

c797dae8987cf8ebd117c4a4126c36854ef06a06

Author

Tobias Bengfort <tobias.bengfort@gmx.net>

Date

2015-08-28 05:06

mv Registry to its own module

Diffstat

7 files changed, 28 insertions, 142 deletions

diff --git a/.doc/tutorials/phonecat.md b/.doc/tutorials/phonecat.md

@@ -8,13 +8,12 @@ only muu related object you will ever have to create yourself is a *{@link
    8     8 Registry}*.  It will take care of creating directives for you. Here is how it
    9     9 is done:
   10    10 
   11    -1     require(['muu'], function(Muu) {
   12    -1         var registry = new Muu();
   -1    11     require(['muu'], function(muu) {
   -1    12         var registry = new muu.Registry();
   13    13     });
   14    14 
   15    15 *For simplicaty, the calls to require will be left out of all following
   16    -1 examples. `Muu` always refers to the `muu` module, `_` to `muu-js-helpers` and
   17    -1 `$` to `muu-dom-helpers`.*
   -1    16 examples.*
   18    17 
   19    18 Once you have a registry, you can register *directives* with it. In order to do
   20    19 that, you will need a *name*, a *template*, and a *link* function.

diff --git a/examples/example/example.js b/examples/example/example.js

@@ -7,10 +7,10 @@ requirejs.config({
    7     7     }
    8     8 });
    9     9 
   10    -1 require(['xhr', 'muu', 'muu-dom-helpers', 'muu-moment'], function(xhr, Muu, $, muuMoment) {
   -1    10 require(['xhr', 'muu', 'muu-moment'], function(xhr, muu, muuMoment) {
   11    11     "use strict";
   12    12 
   13    -1     var muu = new Muu({debug: true})
   -1    13     var registry = new muu.Registry({debug: true})
   14    14         .registerModule(muuMoment)
   15    15         .registerDirective(
   16    16             'test',
@@ -54,7 +54,7 @@ require(['xhr', 'muu', 'muu-dom-helpers', 'muu-moment'], function(xhr, Muu, $, m
   54    54                 self.update(data);
   55    55             });
   56    56 
   57    -1     $.ready(function() {
   58    -1         muu.linkAll(document);
   -1    57     muu.$.ready(function() {
   -1    58         registry.linkAll(document);
   59    59     });
   60    60 });

diff --git a/examples/example/muu-moment.js b/examples/example/muu-moment.js

@@ -1,8 +1,8 @@
    1     1 define(['moment'], function(moment) {
    2     2     "use strict";
    3     3 
    4    -1     return function(muu) {
    5    -1         muu.registerDirective('moment', '<time aria-live datetime="{{machine}}">{{human}}</time>', function(self) {
   -1     4     return function(registry) {
   -1     5         registry.registerDirective('moment', '<time aria-live datetime="{{machine}}">{{human}}</time>', function(self) {
    6     6             var update = function() {
    7     7                 self.update({
    8     8                     machine: moment().format(),

diff --git a/examples/phonecat/phonecat.js b/examples/phonecat/phonecat.js

@@ -5,7 +5,7 @@ requirejs.config({
    5     5     }
    6     6 });
    7     7 
    8    -1 require(['xhr', 'muu', 'muu-dom-helpers'], function(xhr, Muu, $) {
   -1     8 require(['xhr', 'muu'], function(xhr, muu) {
    9     9     "use strict";
   10    10 
   11    11     Promise.all([
@@ -15,7 +15,7 @@ require(['xhr', 'muu', 'muu-dom-helpers'], function(xhr, Muu, $) {
   15    15         var template = args[0];
   16    16         var phones = args[1];
   17    17 
   18    -1         var muu = new Muu()
   -1    18         var registry = new muu.Registry()
   19    19             .registerDirective('phonecat', template, function(self, element) {
   20    20                 element.addEventListener('muu-filter', function() {
   21    21                     var query = self.getModel('query', '').toLowerCase();
@@ -37,8 +37,8 @@ require(['xhr', 'muu', 'muu-dom-helpers'], function(xhr, Muu, $) {
   37    37                 self.setModel('orderProp', 'age');
   38    38             });
   39    39 
   40    -1         $.ready(function() {
   41    -1             muu.linkAll(document);
   -1    40         muu.$.ready(function() {
   -1    41             registry.linkAll(document);
   42    42         });
   43    43     });
   44    44 });

diff --git a/src/muu.js b/src/muu-registry.js

@@ -1,8 +1,8 @@
    1     1 /**
    2     2  * Exports the {@link Registry} class.
    3    -1  * @module muu
   -1     3  * @module muu-registry
    4     4  */
    5    -1 define(['muu-template', 'muu-directive', 'muu-js-helpers', 'muu-dom-helpers'], function(muuTemplate, Directive, _, $) {
   -1     5 define('muu-registry', ['muu-template', 'muu-directive', 'muu-js-helpers', 'muu-dom-helpers'], function(muuTemplate, Directive, _, $) {
    6     6     "use strict";
    7     7 
    8     8     /**

diff --git a/src/muu.js b/src/muu.js

@@ -1,133 +1,20 @@
    1     1 /**
    2    -1  * Exports the {@link Registry} class.
   -1     2  * This module gives access to the following objects:
   -1     3  *
   -1     4  * -   `Registry` - {@link Registry}
   -1     5  * -   `$` - {@link module:muu-dom-helpers}
   -1     6  * -   `$location` - {@link module:muu-location}
   -1     7  *
    3     8  * @module muu
    4     9  */
    5    -1 define(['muu-template', 'muu-directive', 'muu-js-helpers', 'muu-dom-helpers'], function(muuTemplate, Directive, _, $) {
   -1    10 define(['muu-registry', 'muu-dom-helpers', 'muu-location'], function(Registry, $, $location) {
    6    11     "use strict";
    7    12 
    8    -1     /**
    9    -1      * @constructs Registry
   10    -1      * @param {object} config The config object may have following properties:
   11    -1      *
   12    -1      * - **debug** - `{boolean}` - Enable debug mode. In debug mode,
   13    -1      *   directive objects are available as properties from the DOM as
   14    -1      *   `element.directive`.
   15    -1      * - **renderer** - `{Function(string, object)}` - The template renderer
   16    -1      *   to be used. Defaults to {@link module:muu-template}.
   17    -1      */
   18    -1     var Registry = function(config) {
   19    -1         var self = this;
   20    -1         var directives = {};
   -1    13     var module = {};
   21    14 
   22    -1         this.config = config || {};
   23    -1         this.renderer = self.config.renderer || muuTemplate;
   -1    15     module.Registry = Registry;
   -1    16     module.$ = $;
   -1    17     module.$location = $location;
   24    18 
   25    -1         /**
   26    -1          * Register a new type of {@link Directive}
   27    -1          *
   28    -1          * @param {string} type
   29    -1          * @param {string} template
   30    -1          * @param {Function(Directive, DOMElement): function} link The link
   31    -1          *   function is called with an instance of {@link Directive} and a
   32    -1          *   DOMElement when {@link Registry#link} is executed.
   33    -1          *
   34    -1          *   It is the only place where you can access a directive and
   35    -1          *   therefore the place where you define its behavior.
   36    -1          *
   37    -1          *   This typically means to make an initial call to {@link
   38    -1          *   Directive#update} and to add some event listeners. You should also
   39    -1          *   return an *unlink* function that clears all external references in
   40    -1          *   order to avoid memory leaks.
   41    -1          * @return {Registry} this
   42    -1          */
   43    -1         this.registerDirective = function(type, template, link) {
   44    -1             directives[type] = {
   45    -1                 template: template,
   46    -1                 link: link
   47    -1             };
   48    -1             return self;
   49    -1         };
   50    -1 
   51    -1         /**
   52    -1          * Shortcut for wrapping calls to {@link Registry} in a function.
   53    -1          *
   54    -1          * This can be esepcially helpful if that function is defined in a
   55    -1          * different module.
   56    -1          *
   57    -1          * ```.js
   58    -1          * define('foobar', [], function() {
   59    -1          *   return function(registry) {
   60    -1          *     registry
   61    -1          *        .registerDirective('foo', '...', function() {...})
   62    -1          *        .registerDirective('bar', '...', function() {...});
   63    -1          *   };
   64    -1          * });
   65    -1          *
   66    -1          * require(['foobar'], function(foobar) {
   67    -1          *   var registry = new Registry();
   68    -1          *   registry.registerModule(foobar);
   69    -1          * });
   70    -1          * ```
   71    -1          *
   72    -1          * @param {Function(Registry)}
   73    -1          * @return {Registry} this
   74    -1          */
   75    -1         this.registerModule = function(module) {
   76    -1             module(self);
   77    -1             return self;
   78    -1         };
   79    -1 
   80    -1         /**
   81    -1          * Create and initialise a {@link Directive} for `element`.
   82    -1          *
   83    -1          * @param {DOMElement} element
   84    -1          * @param {string} type
   85    -1          * @return {Directive}
   86    -1          */
   87    -1         this.link = function(element, type) {
   88    -1             if (type === void 0) {
   89    -1                 type = element.getAttribute('type');
   90    -1             }
   91    -1 
   92    -1             if (!directives.hasOwnProperty(type)) {
   93    -1                 throw new Error('Unknown directive type: ' + type);
   94    -1             }
   95    -1 
   96    -1             var template = directives[type].template;
   97    -1             var link = directives[type].link;
   98    -1 
   99    -1             var directive = new Directive(element, template, self);
  100    -1             var unlink = link(directive, element);
  101    -1             element.classList.add('muu-isolate');
  102    -1             element.classList.add('muu-initialised');
  103    -1 
  104    -1             if (self.config.debug) {
  105    -1                 element.directive = directive;
  106    -1             }
  107    -1 
  108    -1             if (unlink !== void 0) {
  109    -1                 $.destroy(element, unlink);
  110    -1             }
  111    -1 
  112    -1             return directive;
  113    -1         };
  114    -1 
  115    -1         /**
  116    -1          * Link all directives that can be found inside `root`.
  117    -1          *
  118    -1          * @param {DOMElement} root
  119    -1          * @return {Directive[]}
  120    -1          */
  121    -1         this.linkAll = function(root) {
  122    -1             // NOTE: root may be a DOM Node or a directive
  123    -1             var elements = _.filter(root.querySelectorAll('muu'), function(element) {
  124    -1                 return !element.classList.contains('muu-initialised');
  125    -1             });
  126    -1             return _.map(elements, function(element) {
  127    -1                 return self.link(element);
  128    -1             });
  129    -1         };
  130    -1     };
  131    -1 
  132    -1     return Registry;
   -1    19     return module;
  133    20 });

diff --git a/test/test-registry.js b/test/test-registry.js

@@ -1,5 +1,5 @@
    1     1 /* global define, describe, it, expect, beforeEach, sinon */
    2    -1 define(['muu', 'muu-directive', 'muu-js-helpers'], function(Registry, Directive, _) {
   -1     2 define(['muu-registry', 'muu-directive', 'muu-js-helpers'], function(Registry, Directive, _) {
    3     3     "use strict";
    4     4 
    5     5     describe('Registry', function() {