GUI -- Refactored ToolbarService to have only new toolbar functions.
Change-Id: I0319335915f37d3a63b3ac734d8f8e00ebed20ae
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.js b/web/gui/src/main/webapp/app/fw/widget/button.js
index 5eccc9a..0cc3ddd 100644
--- a/web/gui/src/main/webapp/app/fw/widget/button.js
+++ b/web/gui/src/main/webapp/app/fw/widget/button.js
@@ -33,7 +33,7 @@
}
function button(div, id, gid, cb, tooltip) {
- if (!div || div.empty()) {
+ if (!div) {
$log.warn('Button cannot append to div');
return null;
}
@@ -53,7 +53,7 @@
}
function toggle(div, id, gid, initState, cb, tooltip) {
- if (!div || div.empty()) {
+ if (!div) {
$log.warn('Toggle cannot append to div');
return null;
}
@@ -84,7 +84,7 @@
}
function radioSet(div, id, rset) {
- if (!div || div.empty()) {
+ if (!div) {
$log.warn('Radio buttons cannot append to div');
return null;
}
diff --git a/web/gui/src/main/webapp/app/fw/widget/toolbar.js b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
index 7740ccd..9518239 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -22,80 +22,16 @@
var $log, fs, ps, bns;
- var toolBtnIds = {},
- toolbarPanel,
- toolbarDiv;
-
var ids = [],
tbarId,
tbarPanel,
- tbarDiv;
+ tbarDiv,
+ tbarArrowDiv;
function init() {
- toolBtnIds = {};
ids = [];
}
- function addButton(btn) {
- // pass in button object and pass separate the pieces in this function,
- // to be passed to ButtonService
- var btndiv = toolbarDiv.append('div').attr('class', 'btn');
- // use ButtonService to create btn with other arguments and btndiv
- }
-
- function addToggle(tog) {
- var togdiv = toolbarDiv.append('div').attr('class', 'tog');
- // use ButtonService to create btn with other arguments and togdiv
- }
-
- function addRadio(rad) {
- var raddiv = toolbarDiv.append('div').attr('class', 'rad');
- // use ButtonService to create btn with other arguments and raddiv
- }
-
- function addSeparator() {
- toolbarDiv.append('div')
- .attr('class', 'sep')
- .style({'width': '2px',
- 'border-width': '1px',
- 'border-style': 'solid'});
- }
-
- function makeButton(id, gid, cb) {
- return {
- t: 'btn',
- id: id,
- gid: gid,
- cb: cb
- };
- }
-
- function makeToggle(id, gid, cb) {
- return {
- t: 'tog',
- id: id,
- gid: gid,
- cb: cb
- };
- }
-
- function makeRadio(id, gid, cb) {
- (id in toolBtnIds) ? toolBtnIds[id] += 1 : toolBtnIds[id] = 0;
- return {
- t: 'rad',
- id: id + '-' + toolBtnIds[id],
- rid: toolBtnIds[id] + '',
- gid: gid,
- cb: cb
- };
- }
-
- function separator() {
- return {
- t: 'sep'
- };
- }
-
function validId(id, caller) {
if (fs.inArray(id, ids) !== -1) {
$log.warn(caller + ': ID already exists');
@@ -104,39 +40,38 @@
return true;
}
- function addButton1(id, gid, cb, tooltip) {
+ function addButton(id, gid, cb, tooltip) {
var btnId = tbarId + '-' + id;
- if (!validId(btnId, 'addButton')) {
- return null;
- }
+ if (!validId(btnId, 'addButton')) { return null; }
ids.push(btnId);
return bns.button(tbarDiv, btnId, gid, cb, tooltip);
}
- function addToggle1(id, gid, initState, cb, tooltip) {
+ function addToggle(id, gid, initState, cb, tooltip) {
var togId = tbarId + '-' + id;
- if (!validId(togId, 'addToggle')) {
- return null;
- }
+ if (!validId(togId, 'addToggle')) { return null; }
ids.push(togId);
return bns.toggle(tbarDiv, togId, gid, initState, cb, tooltip);
}
function addRadioSet(id, rset) {
var radId = tbarId + '-' + id;
- if (!validId(radId, 'addRadioSet')) {
- return null;
- }
+ if (!validId(radId, 'addRadioSet')) { return null; }
ids.push(radId);
return bns.radioSet(tbarDiv, radId, rset);
}
- // TODO: finish this and remove unneeded code
- function addSeparator1() {
-
+ function addSeparator() {
+ if (!tbarDiv) {
+ $log.warn('Separator cannot append to div');
+ return null;
+ }
+ tbarArrowDiv = tbarDiv.append('div')
+ .classed('sep', true)
+ .style('width', '2px');
}
- function createToolbar1(id, settings) {
+ function createToolbar(id, settings) {
if (!id) {
$log.warn('createToolbar: no ID given');
return null;
@@ -144,78 +79,23 @@
tbarId = 'tbar-' + id;
var opts = fs.isO(settings) || {}; // default settings should be put here
- if (!validId(tbarId, 'createToolbar')) {
- return null;
- }
+ if (!validId(tbarId, 'createToolbar')) { return null; }
ids.push(tbarId);
tbarPanel = ps.createPanel(tbarId, opts);
tbarDiv = tbarPanel.classed('toolbar', true);
- // TODO: change names of functions
return {
- addButton1: addButton1,
- addToggle1: addToggle1,
+ addButton: addButton,
+ addToggle: addToggle,
addRadioSet: addRadioSet,
- addSeparator1: addSeparator1
+ addSeparator: addSeparator
}
}
- // function currently not working
+ //function currently not working
function destroyToolbar(id) {
- ps.destroyPanel(id);
- }
-
- function createToolbar(tbarId, tools) {
- var api;
-
- if (!tbarId) {
- $log.warn('createToolbar: no ID given');
- return null;
- }
- if (!tools || tools.constructor !== Array || !tools.length) {
- $log.warn('createToolbar: no tools given');
- return null;
- }
-
- for (var i = 0; i < tools.length; i += 1) {
- if (tools[i].t === 'rad' || tools[i].t === 'sep') {
- continue;
- } else {
- if (tools[i].id in toolBtnIds) {
- $log.warn('createToolbar: item with id '
- + tools[i].id + ' already exists');
- return null;
- }
- toolBtnIds[tools[i].id] = 1;
- }
- }
-
- // need to pass in an object with settings for where the toolbar will go
- toolbarPanel = ps.createPanel(tbarId, {});
- toolbarPanel.classed('toolbar', true);
- toolbarDiv = toolbarPanel.el();
-
- tools.forEach(function (tool) {
- switch (tool['t']) {
- case 'btn': addButton(tool); break;
- case 'tog': addToggle(tool); break;
- case 'rad': addRadio(tool); break;
- default: addSeparator(); break;
- }
- });
-
- // api functions to be returned defined here
-
- function size(arr) {
- return arr.length;
- }
-
- api = {
- size: size
- };
-
- return api;
+ //ps.destroyPanel(id);
}
angular.module('onosWidget')
@@ -229,14 +109,8 @@
return {
init: init,
- makeButton: makeButton,
- makeToggle: makeToggle,
- makeRadio: makeRadio,
- separator: separator,
createToolbar: createToolbar,
- createToolbar1: createToolbar1,
destroyToolbar: destroyToolbar
};
}]);
-
-}());
\ No newline at end of file
+}());
diff --git a/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js b/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js
index 3bca9e7..d61be12 100644
--- a/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js
+++ b/web/gui/src/main/webapp/tests/app/fw/widget/toolbar-spec.js
@@ -53,243 +53,31 @@
it('should define api functions', function () {
expect(fs.areFunctions(tbs, [
- 'init', 'makeButton', 'makeToggle', 'makeRadio', 'separator',
- 'createToolbar', 'createToolbar1', 'destroyToolbar'
+ 'init',
+ 'createToolbar', 'destroyToolbar'
])).toBeTruthy();
});
- function toolbarSelection() {
- return d3Elem.selectAll('.toolbar');
- }
-
- it('should have no toolbars to start', function () {
- expect(toolbarSelection().size()).toBe(0);
- });
-
- it('should log a warning if no ID is given', function () {
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar();
- expect(tbar).toBeNull();
- expect($log.warn).toHaveBeenCalledWith('createToolbar: no ID given');
- expect(toolbarSelection().size()).toBe(0);
- });
-
- it('should log a warning if no tools are given', function () {
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar(true);
- expect(tbar).toBeNull();
- expect($log.warn).toHaveBeenCalledWith('createToolbar: no tools given');
- expect(toolbarSelection().size()).toBe(0);
- });
-
- it('should log a warning if tools are not an array', function () {
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar(true, {});
- expect(tbar).toBeNull();
- expect($log.warn).toHaveBeenCalledWith('createToolbar: no tools given');
- expect(toolbarSelection().size()).toBe(0);
- });
-
- it('should log a warning if tools array is empty', function () {
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar(true, []);
- expect(tbar).toBeNull();
- expect($log.warn).toHaveBeenCalledWith('createToolbar: no tools given');
- expect(toolbarSelection().size()).toBe(0);
- });
-
- it("should verify makeButton's returned object", function () {
- var button = tbs.makeButton('foo', 'glyph-bar', function () {});
-
- expect(button.t).toBe('btn');
- expect(button.id).toBe('foo');
- expect(button.gid).toBe('glyph-bar');
- expect(fs.isF(button.cb)).toBeTruthy();
- });
-
- it("should verify makeToggle's returned object", function () {
- var toggle = tbs.makeToggle('foo', 'glyph-bar', function () {});
-
- expect(toggle.t).toBe('tog');
- expect(toggle.id).toBe('foo');
- expect(toggle.gid).toBe('glyph-bar');
- expect(fs.isF(toggle.cb)).toBeTruthy();
- });
-
- it("should verify makeRadio's returned object", function () {
- var rFoo0 = tbs.makeRadio('foo', 'glyph-foo0', function () {});
- var rFoo1 = tbs.makeRadio('foo', 'glyph-foo1', function () {});
- var rFoo2 = tbs.makeRadio('foo', 'glyph-foo2', function () {});
- var rBar0 = tbs.makeRadio('bar', 'glyph-bar0', function () {});
- var rBar1 = tbs.makeRadio('bar', 'glyph-bar1', function () {});
- var rFoo3 = tbs.makeRadio('foo', 'glyph-foo3', function () {});
-
- expect(rFoo0.t).toBe('rad');
- expect(rFoo0.id).toBe('foo-0');
- expect(rFoo0.rid).toBe('0');
- expect(rFoo0.gid).toBe('glyph-foo0');
- expect(fs.isF(rFoo0.cb)).toBeTruthy();
-
- expect(rFoo1.t).toBe('rad');
- expect(rFoo1.id).toBe('foo-1');
- expect(rFoo1.rid).toBe('1');
- expect(rFoo1.gid).toBe('glyph-foo1');
- expect(fs.isF(rFoo1.cb)).toBeTruthy();
-
- expect(rFoo2.t).toBe('rad');
- expect(rFoo2.id).toBe('foo-2');
- expect(rFoo2.rid).toBe('2');
- expect(rFoo2.gid).toBe('glyph-foo2');
- expect(fs.isF(rFoo2.cb)).toBeTruthy();
-
- expect(rFoo3.t).toBe('rad');
- expect(rFoo3.id).toBe('foo-3');
- expect(rFoo3.rid).toBe('3');
- expect(rFoo3.gid).toBe('glyph-foo3');
- expect(fs.isF(rFoo3.cb)).toBeTruthy();
-
- expect(rBar0.t).toBe('rad');
- expect(rBar0.id).toBe('bar-0');
- expect(rBar0.rid).toBe('0');
- expect(rBar0.gid).toBe('glyph-bar0');
- expect(fs.isF(rBar0.cb)).toBeTruthy();
-
- expect(rBar1.t).toBe('rad');
- expect(rBar1.id).toBe('bar-1');
- expect(rBar1.rid).toBe('1');
- expect(rBar1.gid).toBe('glyph-bar1');
- expect(fs.isF(rBar1.cb)).toBeTruthy();
- });
-
- it("should verify separator's returned object", function () {
- var separator = tbs.separator();
- expect(separator.t).toBe('sep');
- });
-
- it('should log a warning if btn id is already in use', function () {
- var tools = [
- tbs.makeButton('id0', 'glyph-id0', function () {}),
- tbs.makeButton('id0', 'glyph-id0', function () {})
- ];
-
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar('someId', tools);
- expect(tbar).toBeNull();
- expect($log.warn).toHaveBeenCalledWith('createToolbar: item with id ' +
- 'id0 already exists');
- expect(toolbarSelection().size()).toBe(0);
- });
-
- it('should log a warning if tog id is already in use', function () {
- var tools = [
- tbs.makeToggle('id0', 'glyph-id0', function () {}),
- tbs.makeToggle('id1', 'glyph-id1', function () {}),
- tbs.makeToggle('id0', 'glyph-id0', function () {})
- ];
-
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar('someId', tools);
- expect(tbar).toBeNull();
- expect($log.warn).toHaveBeenCalledWith('createToolbar: item with id ' +
- 'id0 already exists');
- expect(toolbarSelection().size()).toBe(0);
- });
-
- it('should create a toolbar', function () {
- // need to create a button so it does not throw errors
- var tools = [
- tbs.makeButton('btn0', 'glyph0', function () {})
- ];
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar('test', tools);
- expect($log.warn).not.toHaveBeenCalled();
- expect(toolbarSelection().size()).toBe(1);
- });
-
- it('should test multiple separators in a row', function () {
- var tools = [
- tbs.separator(),
- tbs.separator(),
- tbs.separator()
- ];
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar('test', tools);
- expect($log.warn).not.toHaveBeenCalled();
- expect(toolbarSelection().size()).toBe(1);
- });
-
- it('should create a button div', function () {
- var tools = [
- tbs.makeButton('btn0', 'glyph0', function () {})
- ];
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar('test', tools);
- expect($log.warn).not.toHaveBeenCalled();
- expect(toolbarSelection().size()).toBe(1);
-
- expect(d3Elem.select('.btn')).toBeTruthy();
- });
-
- it('should create a toggle div', function () {
- var tools = [
- tbs.makeToggle('tog0', 'glyph0', function () {})
- ];
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar('test', tools);
- expect($log.warn).not.toHaveBeenCalled();
- expect(toolbarSelection().size()).toBe(1);
-
- expect(d3Elem.select('.tog')).toBeTruthy();
- });
-
- it('should create a radio btn div', function () {
- var tools = [
- tbs.makeRadio('rad0', 'glyph0', function () {})
- ];
- spyOn($log, 'warn');
- var tbar = tbs.createToolbar('test', tools);
- expect($log.warn).not.toHaveBeenCalled();
- expect(toolbarSelection().size()).toBe(1);
-
- expect(d3Elem.select('.rad')).toBeTruthy();
- });
-
-
- it('should create a separator div', function () {
- var tools = [
- tbs.separator()
- ];
- tbs.createToolbar('test', tools);
-
- var sepDiv = d3Elem.select('.sep');
- expect(sepDiv).toBeTruthy();
- expect(sepDiv.style('width')).toBe('2px');
- expect(sepDiv.style('border-width')).toBe('1px');
- expect(sepDiv.style('border-style')).toBe('solid');
- });
-
- // ==== new Toolbar Unit tests --------------------------------------------
-
it('should warn if createToolbar id is invalid', function () {
spyOn($log, 'warn');
- expect(tbs.createToolbar1()).toBeNull();
+ expect(tbs.createToolbar()).toBeNull();
expect($log.warn).toHaveBeenCalledWith('createToolbar: no ID given');
- expect(tbs.createToolbar1('test')).toBeTruthy();
- expect(tbs.createToolbar1('test')).toBeNull();
+ expect(tbs.createToolbar('test')).toBeTruthy();
+ expect(tbs.createToolbar('test')).toBeNull();
expect($log.warn).toHaveBeenCalledWith('createToolbar: ID already exists');
});
it('should create an unpopulated toolbar', function () {
spyOn($log, 'warn');
- expect(tbs.createToolbar1('test')).toBeTruthy();
+ expect(tbs.createToolbar('test')).toBeTruthy();
expect($log.warn).not.toHaveBeenCalled();
});
it('should create a button', function () {
spyOn($log, 'warn');
- var toolbar = tbs.createToolbar1('test'),
- btn = toolbar.addButton1('btn0', 'gid', function () {});
+ var toolbar = tbs.createToolbar('test'),
+ btn = toolbar.addButton('btn0', 'gid', function () {});
expect(btn).not.toBeNull();
expect(btn.id).toBe('tbar-test-btn0');
expect($log.warn).not.toHaveBeenCalled();
@@ -297,9 +85,9 @@
it('should not create a button with a duplicate id', function () {
spyOn($log, 'warn');
- var toolbar = tbs.createToolbar1('test'),
- btn = toolbar.addButton1('btn0', 'gid', function () {}),
- btn1 = toolbar.addButton1('btn0', 'gid', function () {});
+ var toolbar = tbs.createToolbar('test'),
+ btn = toolbar.addButton('btn0', 'gid', function () {}),
+ btn1 = toolbar.addButton('btn0', 'gid', function () {});
expect(btn).not.toBeNull();
expect(btn.id).toBe('tbar-test-btn0');
expect($log.warn).toHaveBeenCalledWith('addButton: ID already exists');
@@ -308,8 +96,8 @@
it('should create a toggle', function () {
spyOn($log, 'warn');
- var toolbar = tbs.createToolbar1('test'),
- tog = toolbar.addButton1('tog0', 'gid', false, function () {});
+ var toolbar = tbs.createToolbar('test'),
+ tog = toolbar.addButton('tog0', 'gid', false, function () {});
expect(tog).not.toBeNull();
expect(tog.id).toBe('tbar-test-tog0');
expect($log.warn).not.toHaveBeenCalled();
@@ -317,9 +105,9 @@
it('should not create a toggle with a duplicate id', function () {
spyOn($log, 'warn');
- var toolbar = tbs.createToolbar1('test'),
- tog = toolbar.addToggle1('tog0', 'gid', false, function () {}),
- tog1 = toolbar.addToggle1('tog0', 'gid', true, function () {});
+ var toolbar = tbs.createToolbar('test'),
+ tog = toolbar.addToggle('tog0', 'gid', false, function () {}),
+ tog1 = toolbar.addToggle('tog0', 'gid', true, function () {});
expect(tog).not.toBeNull();
expect(tog.id).toBe('tbar-test-tog0');
expect($log.warn).toHaveBeenCalledWith('addToggle: ID already exists');
@@ -329,7 +117,7 @@
it('should create a radio button set', function () {
spyOn($log, 'warn');
- var toolbar = tbs.createToolbar1('test'),
+ var toolbar = tbs.createToolbar('test'),
rset = [
{ gid: 'crown', cb: function () {}, tooltip: 'nothing' },
{ gid: 'bird', cb: function () {}, tooltip: 'nothing' }
@@ -341,6 +129,17 @@
expect($log.warn).not.toHaveBeenCalled();
});
+ it('should create a separator div', function () {
+ spyOn($log, 'warn');
+ var toolbar = tbs.createToolbar('test'),
+ sep = toolbar.addSeparator();
+ expect(sep).not.toBeNull();
+ expect($log.warn).not.toHaveBeenCalled();
+
+ expect(d3Elem.select('.sep')).toBeTruthy();
+ expect(d3Elem.select('.sep').style('width')).toBe('2px');
+ });
+
//it('should not append to a destroyed toolbar', function () {
// spyOn($log, 'warn');
// var toolbar = tbs.createToolbar1('test');