web/gui/src/main/webapp/app/fw/widget/button.js

/*
 * 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 = 25,
        btnPadding = 4;

    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, 'button', id),
            cbFnc = fs.isF(cb) || noop;

        is.loadIcon(btnDiv, gid, btnSize, true);

        btnDiv.on('click', cbFnc);

        return {
            id: id,
            click: cbFnc,
            el: btnDiv
        }
    }

    function toggle(div, id, gid, initState, cb, tooltip) {
        if (!div) {
            $log.warn('Toggle cannot append to div');
            return null;
        }

        var sel = !!initState,
            togDiv = createDiv(div, 'toggleButton', id),
            cbFnc = fs.isF(cb) || noop;

        is.loadIcon(togDiv, gid, btnSize, true);
        togDiv.classed('selected', sel);

        function _toggle(b) {
            if (b === undefined) {
                sel = !sel;
            } else {
                sel = !!b;
            }
            cbFnc(sel);
            togDiv.classed('selected', sel);
        }

        togDiv.on('click', _toggle);

        return {
            id: id,
            el: togDiv,
            selected: function () { return sel; },
            toggle: _toggle
        }
    }

    function radioSet(div, id, rset) {
        if (!div) {
            $log.warn('Radio buttons cannot append to div');
            return null;
        }
        if (!fs.isA(rset)) {
            $log.warn('Radio button set is not an array');
            return null;
        }
        if (rset.length === 0) {
            $log.warn('Cannot create radio button set from empty array');
            return null;
        }
        var rDiv = div.append('div').classed('radioSet', true),
            rads = [],
            sel;

        function _selected(s) {
            var curr = d3.select(this),
                currId = curr.attr('id'),
                selIndex = _getIndex(),
                currIndex = _getIndex(currId);

            // I have it going by id's because I couldn't think of a way
            // to get the radio button's index from the div element
                // We could look at the end of the radio button id for its number
                // but I didn't know how to get the end of the string's number
            if (!s) {
                if (sel !== currId) {
                    rads[selIndex].el.classed('selected', false);
                    curr.classed('selected', true);
                    rads[currIndex].cb();
                    sel = currId;
                }
            } else {
                if (!rads[s].el.classed('selected')) {
                    rads[selIndex].el.classed('selected', false);
                    rads[s].el.classed('selected', true);
                    rads[s].cb();
                    sel = rads[s].id;
                }
            }
        }

        // given the id, will get the index of element
        // without the id, will get the index of sel
        function _getIndex(id) {
            if (!id) {
                for (var i = 0; i < rads.length; i++) {
                    if (rads[i].id === sel) { return i; }
                }
            } else {
                for (var j = 0; j < rads.length; j++) {
                    if (rads[j].id === id) { return j; }
                }
            }
        }

        rset.forEach(function (btn, index) {
            var rid = {id: id + '-' + index},
                rbtn = angular.extend({}, btn, rid),
                istate = (index === 0),
                rBtnDiv = createDiv(rDiv, 'radioButton', rbtn.id);

            if (istate) { rBtnDiv.classed('selected', true); }
            is.loadIcon(rBtnDiv, rbtn.gid, btnSize, true);
            rbtn.el = rBtnDiv;
            rbtn.cb = fs.isF(rbtn.cb) || noop;

            rBtnDiv.on('click', _selected);

            rads.push(rbtn);
        });
        sel = rads[0].id;
        rads[0].cb();

        return {
            rads: rads,
            width: (((btnSize + btnPadding) * rads.length) + btnPadding),
            selected: function (i) {
                if (i === undefined) { _getIndex(); }
                else { _selected(i); }
            }
        }
    }

    function width(s) {
        if (s) { btnSize = s; }
        return btnSize;
    }

    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,
                    width: width
                };
            }]);

}());