GUI -- ButtonService - modified IconService to load glyphs without icon mapping
- created button and toggle functions in ButtonService with unit tests
Change-Id: If4d35e3ed7df8c1b8f7355f63f39d0c5d84db753
diff --git a/web/gui/src/main/webapp/app/fw/svg/icon.js b/web/gui/src/main/webapp/app/fw/svg/icon.js
index 52ed46d..400b7aa 100644
--- a/web/gui/src/main/webapp/app/fw/svg/icon.js
+++ b/web/gui/src/main/webapp/app/fw/svg/icon.js
@@ -52,16 +52,16 @@
}
// div is a D3 selection of the <DIV> element into which icon should load
- // iconCls is the CSS class used to identify the icon
+ // glyphId identifies the glyph to use
// size is dimension of icon in pixels. Defaults to 20.
// installGlyph, if truthy, will cause the glyph to be added to
// well-known defs element. Defaults to false.
// svgClass is the CSS class used to identify the SVG layer.
// Defaults to 'embeddedIcon'.
- function loadIcon(div, iconCls, size, installGlyph, svgClass) {
+ function loadIcon(div, glyphId, size, installGlyph, svgClass) {
var dim = size || 20,
svgCls = svgClass || 'embeddedIcon',
- gid = glyphMapping[iconCls] || 'unknown',
+ gid = glyphId || 'unknown',
svg, g;
if (installGlyph) {
@@ -76,7 +76,7 @@
});
g = svg.append('g').attr({
- 'class': 'icon ' + iconCls
+ 'class': 'icon'
});
g.append('rect').attr({
@@ -91,10 +91,22 @@
'class': 'glyph',
'xlink:href': '#' + gid
});
-}
+ }
+
+ // div is a D3 selection of the <DIV> element into which icon should load
+ // iconCls is the CSS class used to identify the icon
+ // size is dimension of icon in pixels. Defaults to 20.
+ // installGlyph, if truthy, will cause the glyph to be added to
+ // well-known defs element. Defaults to false.
+ // svgClass is the CSS class used to identify the SVG layer.
+ // Defaults to 'embeddedIcon'.
+ function loadIconByClass(div, iconCls, size, installGlyph, svgClass) {
+ loadIcon(div, glyphMapping[iconCls], size, installGlyph, svgClass);
+ div.select('svg g').classed(iconCls, true);
+ }
function loadEmbeddedIcon(div, iconCls, size) {
- loadIcon(div, iconCls, size, true);
+ loadIconByClass(div, iconCls, size, true);
}
@@ -198,6 +210,7 @@
return {
loadIcon: loadIcon,
+ loadIconByClass: loadIconByClass,
loadEmbeddedIcon: loadEmbeddedIcon,
addDeviceIcon: addDeviceIcon,
addHostIcon: addHostIcon,
diff --git a/web/gui/src/main/webapp/app/fw/widget/button.js b/web/gui/src/main/webapp/app/fw/widget/button.js
new file mode 100644
index 0000000..4530bb6
--- /dev/null
+++ b/web/gui/src/main/webapp/app/fw/widget/button.js
@@ -0,0 +1,102 @@
+/*
+ * Copyright 2015 Open Networking Laboratory
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/*
+ ONOS GUI -- Widget -- Button Service
+ */
+(function () {
+ 'use strict';
+
+ var $log, fs, is;
+
+ var btnSize = 30;
+
+ function noop() {}
+
+ function createDiv(div, cls, id) {
+ return div.append('div')
+ .classed(cls, true)
+ .attr('id', id);
+ }
+
+ function button(div, id, gid, cb, tooltip) {
+ if (!div) {
+ $log.warn('Button cannot append to div');
+ return null;
+ }
+
+ var btnDiv = createDiv(div, 'btn', id),
+ svg = btnDiv.append('svg'),
+ cbFnc = fs.isF(cb) || noop;
+
+ is.loadIcon(btnDiv, gid, btnSize);
+
+ btnDiv.on('click', cbFnc);
+
+ return {
+ id: id,
+ click: cbFnc,
+ el: btnDiv
+ }
+ }
+
+ function toggle(div, id, gid, cb, tooltip) {
+ if (!div) {
+ $log.warn('Toggle cannot append to div');
+ return null;
+ }
+
+ var sel = false,
+ togDiv = createDiv(div, 'tog', id),
+ svg = togDiv.append('svg'),
+ cbFnc = fs.isF(cb) || noop;
+
+ is.loadIcon(togDiv, gid, btnSize);
+
+ return {
+ id: id,
+ el: togDiv,
+ selected: function () { return sel; },
+ toggle: function (b) {
+ if (b === undefined) {
+ sel = !sel;
+ } else {
+ sel = !!b;
+ }
+ cbFnc(sel);
+ }
+ }
+ }
+
+ function radioSet(div, id, rset) {
+ return {}
+ }
+
+ angular.module('onosWidget')
+ .factory('ButtonService', ['$log', 'FnService', 'IconService',
+ function (_$log_, _fs_, _is_) {
+ $log = _$log_;
+ fs = _fs_;
+ is = _is_;
+
+ return {
+ button: button,
+ toggle: toggle,
+ radioSet: radioSet
+ };
+ }]);
+
+}());
\ No newline at end of file
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 86309c8..682a5ae 100644
--- a/web/gui/src/main/webapp/app/fw/widget/toolbar.js
+++ b/web/gui/src/main/webapp/app/fw/widget/toolbar.js
@@ -102,7 +102,7 @@
return null;
}
- for(var i = 0; i < tools.length; i += 1) {
+ for (var i = 0; i < tools.length; i += 1) {
if (tools[i].t === 'rad' || tools[i].t === 'sep') {
continue;
} else {
diff --git a/web/gui/src/main/webapp/app/index.html b/web/gui/src/main/webapp/app/index.html
index 43578ea..53bb8d3 100644
--- a/web/gui/src/main/webapp/app/index.html
+++ b/web/gui/src/main/webapp/app/index.html
@@ -59,6 +59,7 @@
<script src="fw/widget/widget.js"></script>
<script src="fw/widget/table.js"></script>
<script src="fw/widget/toolbar.js"></script>
+ <script src="fw/widget/button.js"></script>
<script src="fw/layer/layer.js"></script>
<script src="fw/layer/panel.js"></script>