qdhezheng-license-web/public/v1/report/views/widgets/toolbar/toolbar.js

/**
 * toolbar实现类
 * 2016-12-19 对submenu的主menu添加click事件监听
 */
define(function(require, exports, module) {

	require('./toolbar.css');

	function ToolBar(options) {
		options.container.append($('<div class="fdpr-tools-max-container">' +
			'<div class="left-scroll-button scroll-button"></div>' +
			'<div class="tool-scroll-container">'+
			'<div class="fdpr-toolbar"></div></div>' + 
			'<div class="right-scroll-button scroll-button"></div></div>'))
		this.container = options.container.find('.fdpr-toolbar');
		this.outContainer = options.container.find('.tool-scroll-container');
		this.options = options;
		this.buttons = options.buttons;
		this.actions = options.actions;
		this.menuButtons = options.menuButtons;
		this.$buttons = {};
	}

	ToolBar.prototype.init = function() {
		this.createButtons();
		this.addMenuButtons(this.menuButtons);
		$.parser.parse(this.container[0]);
		var width = this.outContainer.parent().parent().width() - 100 - 60;
		// this.outContainer.css('max-width', width + 'px');
		this.setLeftRightScroll();
	};

	ToolBar.prototype.setLeftRightScroll = function() {
		var toolbarCon = this.options.container.find('.fdpr-tools-max-container');
		//计算toolbutton宽度之和
		var container = this.container[0];
		var cloneNode = container.cloneNode(true);
		var id = window.createGuid()
		cloneNode.className = cloneNode.className + ' ' + id;
		cloneNode.style.position = 'absolute';
		cloneNode.style.top = '-100px';
		cloneNode.style.whiteSpace = 'nowrap';
		document.body.appendChild(cloneNode);
		var toolsWidth = window.getComputedStyle(cloneNode).width;
		container.style.width = toolsWidth;
		cloneNode.remove();
		// 计算toolbar外层div宽度
		var outWidth = window.innerWidth - 20 - 100 - 40 - 50;
		if (outWidth < parseInt(toolsWidth)) {
			this.outContainer.width(outWidth + 'px');
			toolbarCon.find('.scroll-button').show();
		}
		var scrollCon = toolbarCon.find('.tool-scroll-container');
		toolbarCon.on('click', '.left-scroll-button', function(e) {
			scrollCon.scrollLeft(scrollCon.scrollLeft() - scrollCon.width());
		});
		toolbarCon.on('click', '.right-scroll-button', function(e) {
			scrollCon.scrollLeft(scrollCon.scrollLeft() + scrollCon.width());
		})
	};

	ToolBar.prototype.enable = function(fieldname) {
		if (!this.$buttons.hasOwnProperty(fieldname)) return;
		var $linkbutton = this.container.find('.fdpr-button-' + fieldname);
        if ($linkbutton.length > 0) { //普通按钮
            $linkbutton.linkbutton('enable');
        }
	};

	ToolBar.prototype.disable = function(fieldname) {
		if (!this.$buttons.hasOwnProperty(fieldname)) return;
		var $linkbutton = this.container.find('.fdpr-button-' + fieldname);
        if ($linkbutton.length > 0) {
            $linkbutton.linkbutton('disable');
        }
	};

	ToolBar.prototype.destroyButton = function (button) {
		button.menubutton('destroy');
	};
	ToolBar.prototype.createButtons = function () {
		var buttons = this.buttons;
		for (var i = 0; i < buttons.length; i++) {
			this.createButton(buttons[i]);
		}
	};

	ToolBar.prototype.createButton = function(button) {
		var self = this;
		var linkBtn = '<a href="javascript:void(0)" title="' + button.hint + '" class="easyui-linkbutton fdpr-button fdpr-button-' + button.fieldname + '"' + ' data-options="iconCls:\'' + button.icon + '\',plain:true,' +
                '">' + button.dispname + '</a>';
        self.container.append($(linkBtn));
        self.container.find('.easyui-linkbutton').last().linkbutton({
            'onClick': function() {
                if (self.actions.click && typeof self.actions.click == 'function') {
                	self.actions.click(button.opcode);
                }
            }
        });
        self.$buttons[button.fieldname] = button;
	};

	ToolBar.prototype.addMenuButtons = function(menuButtons, prevElement) {
		var self = this;
		// var menuButtons = self.menuButtons;
		for (var i = 0; i < menuButtons.length; i++) {
			var menubtn = menuButtons[i];
			var guid = window.createGuid();
			var mb = self.createMenuButton(menubtn);
			var sunmbs = self.createChildMenuButtons(menubtn, menubtn.subButtons, guid);
			if (prevElement) {
				mb.insertAfter(prevElement);
				sunmbs.insertAfter(prevElement);
			} else {
				self.container.append(mb);
				self.container.append(sunmbs);
			}
			var mbdom = self.container.find('.menu-' + menubtn.fieldname);
			//主menu添加click事件监听
			mbdom.off('click');
			mbdom.on('click', function(e) {
				if (self.actions.click && typeof self.actions.click == 'function') {
                	self.actions.click(e.currentTarget.dataset.opcode);
                }
			})
			mbdom.menubutton({
				menu: '.' + guid
			});
			$(mbdom.menubutton('options').menu).menu({
                onClick: function(item) {
                    var opCode = item.target.dataset.opcode;
                    if (self.actions.click && typeof self.actions.click == 'function') {
	                	self.actions.click(opCode);
	                }
                }
            })
		}
	};

	ToolBar.prototype.createMenuButton = function(mb) {
		var menuBtn = $('<a href="javascript:void(0)"  data-opcode="' + mb.fieldname + '" class="menu-'+ mb.fieldname +'" data-options="iconCls:\'' + mb.icon + '\'">'+ mb.dispname +'</a>');
		return menuBtn;
	};

	ToolBar.prototype.createChildMenuButtons = function(button, buttons, guid) {
		var subMenus = $('<div class="submenu submenu-' + button.fieldname + ' ' + guid +'" style="display: none;"></div>')
		for (var i = 0; i < buttons.length; i ++) {
			subMenus.append('<div data-opcode="'+ buttons[i].opcode +'">'+ buttons[i].dispname +'</div>');
		}
		return subMenus;
	}

	function bindButtonActions(button, actions) {

	}

	

	return ToolBar;

});