Added Crumb control

src/Crumb.js

@@ -0,0 +1,105 @@
+define(
+    function (require) {
+        var lib = require('./lib');
+        var helper = require('./controlHelper');
+        var Control = require('./Control');
+
+        /**
+         * 面包屑导航控件
+         *
+         * @constructor
+         */
+        function Crumb() {
+            Control.apply(this, arguments);
+        }
+
+        Crumb.prototype.type = 'Crumb';
+
+        /**
+         * 创建控件主元素
+         *
+         * @return {HTMLElement}
+         * @override
+         * @protected
+         */
+        Crumb.prototype.createMain = function () {
+            return document.createElement('nav');
+        };
+
+        /**
+         * 初始化参数
+         *
+         * @param {Object=} options 构造函数传入的参数
+         * @override
+         * @protected
+         */
+        Crumb.prototype.initOptions = function (options) {
+            var properties = {
+                path: []
+            };
+            lib.extend(properties, options);
+            this.setProperties(properties);
+        };
+
+        /**
+         * 获取导航HTML
+         *
+         * @param {Crumb} crumb 面包屑控件实例
+         * @param {Array} path 路径
+         * @return {string}
+         *
+         * @inner
+         */
+        function getHTML(crumb, path) {
+            var html = '<ol>';
+
+            for (var i = 0; i < path.length; i++) {
+                var node = path[i];
+
+                var classes = helper.getPartClasses(crumb, 'node');
+                if (i === 0) {
+                    classes = classes.concat(
+                        helper.getPartClasses(crumb, 'node-first')
+                    );
+                }
+                if (i === path.length - 1) {
+                    classes = classes.concat(
+                        helper.getPartClasses(crumb, 'node-last')
+                    );
+                }
+
+                html += '<li class="' + classes + '">';
+
+                var template = node.href
+                    ? '<a href="${href}">${text}</a>'
+                    : '<span>${text}</span>';
+
+                html += lib.format(template, node);
+
+                html += '</li>';
+            }
+
+            html += '</ol>';
+
+            return html;
+        }
+
+        var paint = require('./painters');
+
+        /**
+         * 渲染自身
+         *
+         * @param {Array=} 变更过的属性的集合
+         * @override
+         * @protected
+         */
+        Crumb.prototype.repaint = helper.createRepaint(
+            paint.html('path', null, getHTML)
+        );
+
+        require('./main').register(Crumb);
+        lib.inherits(Crumb, Control);
+
+        return Crumb;
+    }
+);

src/Panel.js

@@ -13,10 +13,9 @@ define(
         /**
          * Panel控件
          *
-         * @param {Object=} options 初始化参数
          * @constructor
          */
-        function Panel(options) {
+        function Panel() {
             Control.apply(this, arguments);
         }
 
@@ -34,13 +33,6 @@ define(
             return document.createElement(options.tagName || 'div');
         };
 
-        /**
-         * 初始化参数
-         *
-         * @param {Object=} options 构造函数传入的参数
-         * @override
-         * @protected
-         */
         Panel.prototype.initOptions = function (options) {
             var properties = {};
             var lib = require('./lib');

test/Crumb.js

@@ -0,0 +1,117 @@
+define(function (require) {
+    var Crumb = require('esui/Crumb');
+
+    describe('Crumb', function () {
+        it('should be a constructor', function () {
+            expect(Crumb).toBeOfType('function');
+        });
+
+        it('should be instantiable', function () {
+            expect(new Crumb()).toBeOfType('object');
+        });
+
+        describe('created via script', function () {
+            it('should create a `<nav>` element as its main element', function () {
+                var crumb = new Crumb();
+                crumb.appendTo(container);
+                expect(container.getElementsByTagName('nav').length).toBeGreaterThan(0);
+            });
+
+            it('should assign `path` property to an empty array if not given', function () {
+                var crumb = new Crumb();
+                expect(crumb.get('path')).toEqual([]);
+            });
+        });
+
+        describe('generally', function () {
+            it('should create an `<ol>` element in its main element', function () {
+                var crumb = new Crumb();
+                crumb.appendTo(container);
+                expect(container.getElementsByTagName('ol').length).toBeGreaterThan(0);
+            });
+
+            it('should create a `<a>` element if a node have both `text` and `href` properties', function () {
+                var path = [
+                    { text: 'test', href: 'http://test.com' }
+                ];
+                var crumb = new Crumb({ path: path });
+                crumb.appendTo(container);
+                var ol = container.getElementsByTagName('ol')[0];
+                var node = ol.firstChild.firstChild;
+                expect(node.nodeName.toLowerCase()).toBe('a');
+                expect(node.innerHTML).toBe('test');
+                expect(node.getAttribute('href', 2)).toBe('http://test.com');
+            });
+
+            it('should create a `<span>` element if a node have only a `text` property', function () {
+                var path = [
+                    { text: 'test' }
+                ];
+                var crumb = new Crumb({ path: path });
+                crumb.appendTo(container);
+                var ol = container.getElementsByTagName('ol')[0];
+                var node = ol.firstChild.firstChild;
+                expect(node.nodeName.toLowerCase()).toBe('span');
+                expect(node.innerHTML).toBe('test');
+            });
+
+            it('should add a className `crumb-node` to each node element', function () {
+                var path = [
+                    { text: 'test' }
+                ];
+                var crumb = new Crumb({ path: path });
+                crumb.appendTo(container);
+                var ol = container.getElementsByTagName('ol')[0];
+                var node = ol.firstChild;
+                expect(node.className).toMatch(/crumb-node/);
+            });
+
+            it('should add a className `crumb-node-first` to the first node element', function () {
+                var path = [
+                    { text: 'test', href: 'http://test.com' },
+                    { text: 'test' }
+                ];
+                var crumb = new Crumb({ path: path });
+                crumb.appendTo(container);
+                var ol = container.getElementsByTagName('ol')[0];
+                var node = ol.firstChild;
+                expect(node.className).toMatch(/crumb-node-first/);
+            });
+
+            it('should add a className `crumb-node-first` to the first node element', function () {
+                var path = [
+                    { text: 'test', href: 'http://test.com' },
+                    { text: 'test' }
+                ];
+                var crumb = new Crumb({ path: path });
+                crumb.appendTo(container);
+                var ol = container.getElementsByTagName('ol')[0];
+                var node = ol.lastChild;
+                expect(node.className).toMatch(/crumb-node-last/);
+            });
+
+            it('should add both className `crumb-node-first` and `crumb-node-last` to the only element if it has only one node', function () {
+                var path = [
+                    { text: 'test', href: 'http://test.com' }
+                ];
+                var crumb = new Crumb({ path: path });
+                crumb.appendTo(container);
+                var ol = container.getElementsByTagName('ol')[0];
+                var node = ol.firstChild;
+                expect(node.className).toMatch(/crumb-node-first/);
+                expect(node.className).toMatch(/crumb-node-last/);
+            });
+
+            it('should regenerate nodes when `path` property is modified in runtime', function () {
+                var path = [
+                    { text: 'test', href: 'http://test.com' },
+                    { text: 'test' }
+                ];
+                var crumb = new Crumb();
+                crumb.appendTo(container);
+                crumb.set('path', path);
+                expect(container.getElementsByTagName('li').length).toBe(2);
+            });
+        });
+    });
+})

test/run.htm

@@ -40,7 +40,7 @@
 
         var suits = [
             'esui', 'controlHelper', 'Control', 'Label', 'Panel',
-            'Select', 'Form', 'Tab',
+            'Select', 'Form', 'Tab', 'Crumb',
             'extension/CustomData', 'extension/Command'
         ];
         require(