Example #1
0
    function (require) {

        var observable = require('common/observable');

        function makeHash(stringArray) {
            var hash = {};
            for (var i = 0, l = stringArray.length; i < l; i++) {
                if (stringArray[i]) {
                    hash[stringArray[i]] = true;
                }
            }
            return hash;
        }

        function init() {
            var me = this;
            this.main.on('click', '[data-id]', function (e) {

                if (this.getAttribute('data-disabled')) {
                    return;
                }

				if ($(this).hasClass('not-btn'))
				{
					return ;
				}

                var id = this.getAttribute('data-id');
                var command = me.commands[id];
                if (command) {
                    var name = command.name;

                    if (command.type === 'toggle') {
                        if (command.on) {
                            this.removeAttribute('data-on');
                            command.on = false;
                            me.fire('command:un', {
                                command: name,
                                args: command
                            });
                            return;
                        }

                        this.setAttribute('data-on', 1);
                        command.on = true;
                    }

                    me.fire('command', {
                        command: name,
                        args: command
                    });
                }
            });

			this.main.on('input', '[data-id] > input', function (e) {
                var id = $(this).parent().data('id');
                var command = me.commands[id];

                if (command) {
                    var name = command.name;
					var value = this.value; 

                    me.fire('command', {
                        command: name,
                        args: value
                    });
                }
            });
        }

        /**
         * 命令菜单栏
         *
         * @constructor
         * @param {HTMLElement} main 主元素
         * @param {Object} options 参数选项
         * @param {Array} options.commands 命令数组
         */
        function CommandMenu(main, options) {
            options = options || {};
            this.main = $(main);
            this.commands = options.commands || [];
            init.call(this);
            if (this.commands.length) {
                this.setCommands();
            }
        }

        /**
         * 设置命令集合
         *
         * @param {Array} commands 命令集合
         * @return {this}
         */
        CommandMenu.prototype.setCommands = function (commands) {
            commands = commands || this.commands;
            var str = '';
            commands.forEach(function (item, i) {

                if (item.type === 'split') {
                    str += '<li data-id="-1" data-split="1"></li>';
                }
				else if (item.type == 'input') {
                    str += '<li data-id="' + i + '" class="not-btn">' + item.title + ' <input type="number" min="1" max="100" /></li>';
				}
                else {

                    str += '<li data-id="' + i + '"'
                        + (item.disabled ? ' data-disabled="1"' : '')
                        + (item.on ? ' data-on="1"' : '')
                        + (item.ico ? 'data-theme="ico" title="' + item.title + '"' : '')
                        + (item.direction ? 'data-direction="'+item.direction+'"' : '')
                        + '>';

                    if (item.ico) {
                        str += '<i class="ico i-' + item.ico + '"></i>';

						if (item.text)
						{
	                        str += item.text
						}

                    }
                    else {
                        str += item.title
                            + (item.quickKey ? '(<i>' + item.quickKey + '</i>)' : '');
                    }

                    str += '</li>';
                }
            });

            this.main.html(str);
            this.commands = commands;

            return this;
        };

        /**
         * 设置命令不可用
         *
         * @param {Array} commands 命令hash集合
         * @return {this}
         */
        CommandMenu.prototype.disableCommands = function (commands) {
            var list = this.main.find('[data-id]');
            if (commands) {
                commands = makeHash(commands);
                this.commands.forEach(function (item, i) {
                    if (commands[item.name]) {
                        item.disabled = true;
                        $(list[i]).attr('data-disabled', 1);
                    }
                });
            }
            return this;
        };

        /**
         * 设置命令可用
         *
         * @param {Array} commands 命令hash集合
         * @return {this}
         */
        CommandMenu.prototype.enableCommands = function (commands) {
            var list = this.main.find('[data-id]');
            if (commands) {
                commands = makeHash(commands);
                this.commands.forEach(function (item, i) {
                    if (commands[item.name]) {
                        delete item.disabled;
                        $(list[i]).attr('data-disabled', null);
                    }
                });
            }
            return this;
        };

        /**
         * 移除指定命令
         *
         * @param {Array} commands 命令hash集合
         * @return {this}
         */
        CommandMenu.prototype.removeCommands = function (commands) {
            if (commands) {
                commands = makeHash(commands);
                for (var i = this.commands.length; i >= 0; i--) {
                    var item = this.commands[i];
                    if (commands[item.name]) {
                        this.commands.splice(i, 1);
                        this.main.find('[data-id="' + i + '"]').remove();
                    }
                }
            }

            return this;
        };


        /**
         * 显示
         * @return {this}
         */
        CommandMenu.prototype.show = function () {
            this.main.show();
            return this;
        };

        /**
         * 隐藏
         * @return {this}
         */
        CommandMenu.prototype.hide = function () {
            this.main.hide();
            return this;
        };

        /**
         * 注销
         */
        CommandMenu.prototype.dispose = function () {
            this.main.un('click', '[data-id]');
            this.main = null;
            this.commands = null;
        };

        observable.mixin(CommandMenu.prototype);

        return CommandMenu;
    }
Example #2
0
    function (require) {

        var lang = require('common/lang');
        var observable = require('common/observable');

        /**
         * 获取X坐标
         *
         * @param {MouseEvent} e 事件
         * @return {number} 坐标值
         */
        function getX(e) {
            return e.offsetX || e.layerX || e.clientX;
        }

        /**
         * 获取Y坐标
         *
         * @param {MouseEvent} e 事件
         * @return {number} 坐标值
         */
        function getY(e) {
            return e.offsetY || e.layerY || e.clientY;
        }

        /**
         * 获取事件参数
         *
         * @param {MouseEvent} e 事件
         * @return {Object} 事件参数
         */
        function getEvent(e) {
            return {
                x: getX(e),
                y: getY(e),
                which: e.which,
                ctrlKey: e.ctrlKey || e.metaKey,
                metaKey: e.metaKey,
                altKey: e.altKey,
                shiftKey: e.shiftKey,
                originEvent: e
            };
        }

        /**
         * 阻止事件传递
         *
         * @param {MouseEvent} e 事件
         */
        function prevent(e) {
            e.stopPropagation();
            if (e.preventDefault) {
                e.preventDefault();
            }
            else {
                e.returnValue = false;
            }
        }

        /**
         * 按下处理事件
         *
         * @param {Object} e 事件参数
         */
        function mousedown(e) {

            if (false === this.events.mousedown) {
                return;
            }

            prevent(e);

            var event = getEvent(e);

            this.startX = event.x;
            this.startY = event.y;
            this.startTime = Date.now();
            this.isDown = true;

            // 左键

            this.fire('down', event);

            if (3 === e.which) {
                this.fire('rightdown', event);
            }

            document.addEventListener('mouseup', this.handlers.mouseup, false);
        }

        /**
         * 双击事件
         *
         * @param {Object} e 事件参数
         */
        function dblclick(e) {

            prevent(e);

            if (false === this.events.dblclick) {
                return;
            }

            this.fire('dblclick', getEvent(e));
        }

        /**
         * 鼠标移动事件
         *
         * @param {Object} e 事件参数
         */
        function mousemove(e) {

            if (false === this.events.mousemove) {
                return;
            }

            prevent(e);

            var event = getEvent(e);

            this.fire('move', event);

            if (this.isDown && false !== this.events.drag) {

                event.startX = this.startX;
                event.startY = this.startY;
                event.deltaX = event.x - this.startX;
                event.deltaY = event.y - this.startY;

                if (
                    Math.abs(event.deltaX) >= this.dragDelta
                    || Math.abs(event.deltaY) >= this.dragDelta
                ) {
                    if (!this.isDragging) {
                        this.isDragging = true;
                        this.fire('dragstart', event);
                    }
                }

                if (this.isDragging) {
                    this.fire('drag', event);
                }
            }
        }


        /**
         * 鼠标弹起事件
         *
         * @param {Object} e 事件参数
         */
        function mouseup(e) {



            if (false === this.events.mouseup) {
                return;
            }

            prevent(e);

            var event = getEvent(e);
            event.time = Date.now() - this.startTime;

            // 左键

            this.fire('up', event);

            if (3 === e.which) {
                this.fire('rightup', event);
            }

            if (this.isDown && this.isDragging && false !== this.events.drag) {
                event.deltaX = event.x - this.startX;
                event.deltaY = event.y - this.startY;
                this.isDragging = false;
                this.fire('dragend', event);
            }
            else if (this.isDown && !this.isDragging && false !== this.events.click) {
                this.isDragging = false;
                this.fire('click', event);
            }

            this.isDown = false;

            document.removeEventListener('mouseup', this.handlers.mouseup);
        }

        /**
         * 滚轮事件
         *
         * @param {Object} e 事件参数
         */
        function mousewheel(e) {

            if (false === this.events.mousewheel) {
                return;
            }

            prevent(e);

            // tracepad触发滚动事件比滚轮触发速度快很多,这里需要截流一下
            // 15毫秒可以去掉一半的trancepad滚动事件, 但是对滚轮滚动影响很小
            // http://stackoverflow.com/questions/5527601/normalizing-mousewheel-speed-across-browsers
            var now = Date.now();
            if (this.lastWheel && now - this.lastWheel < 15) {
                return;
            }
            this.lastWheel = now;


            var delta = 0;
            if (e.wheelDelta) {
                delta = e.wheelDelta % 120 === 0 ? e.wheelDelta / 120 : e.wheelDelta / 3;
            }
            else if (e.detail) {
                delta = -e.detail / 3;
            }

            var event = getEvent(e);
            event.delta = delta;
            this.fire('wheel', event);
        }


        /**
         * 进入处理事件
         *
         * @param {Object} e 事件参数
         */
        function mouseover(e) {

            if (false === this.events.mouseover) {
                return;
            }

            prevent(e);

            this.fire('over');
        }

        /**
         * 离开处理事件
         *
         * @param {Object} e 事件参数
         */
        function mouseout(e) {

            if (false === this.events.mouseout) {
                return;
            }

            prevent(e);

            this.fire('out');
        }

        /**
         * 鼠标动作捕获器
         *
         * @param {HTMLElement} main 控制元素
         * @param {Object} options 参数选项
         * @param {HTMLElement} options.main 监控对象
         *
         * @constructor
         */
        function MouseCapture(main, options) {

            this.main = main;
            options = options || {};
            this.events = options.events || {};
            this.dragDelta = 2;

            this.handlers = {
                mousewheel: lang.bind(mousewheel, this),
                mousemove: lang.bind(mousemove, this),
                mousedown: lang.bind(mousedown, this),
                dblclick: lang.bind(dblclick, this),
                mouseover: lang.bind(mouseover, this),
                mouseout: lang.bind(mouseout, this),
                mouseup: lang.bind(mouseup, this)
            };

            this.start();
        }


        MouseCapture.prototype = {

            constructor: MouseCapture,

            /**
             * 开始监听
             *
             * @return {this}
             */
            start: function () {

                if (!this.listening) {
                    this.listening = true;

                    var target = this.main;
                    target.addEventListener('DOMMouseScroll', this.handlers.mousewheel, false);
                    target.addEventListener('mousewheel', this.handlers.mousewheel, false);
                    target.addEventListener('mousemove', this.handlers.mousemove, false);
                    target.addEventListener('mousedown', this.handlers.mousedown, false);
                    target.addEventListener('dblclick', this.handlers.dblclick, false);
                    target.addEventListener('mouseover', this.handlers.mouseover, false);
                    target.addEventListener('mouseout', this.handlers.mouseout, false);
                }

                return this;
            },

            /**
             * 停止监听
             *
             * @return {this}
             */
            stop: function () {

                if (this.listening) {
                    this.listening = false;

                    var target = this.main;
                    target.removeEventListener('DOMMouseScroll', this.handlers.mousewheel);
                    target.removeEventListener('mousewheel', this.handlers.mousewheel);
                    target.removeEventListener('mousemove', this.handlers.mousemove);
                    target.removeEventListener('mousedown', this.handlers.mousedown);
                    target.removeEventListener('click', this.handlers.click);
                    target.removeEventListener('dblclick', this.handlers.dblclick);
                    target.removeEventListener('mouseover', this.handlers.mouseover);
                    target.removeEventListener('mouseout', this.handlers.mouseout);
                    document.removeEventListener('mouseup', this.handlers.mouseup);
                }

                return this;
            },

            /**
             * 是否监听中
             *
             * @return {boolean} 是否
             */
            isListening: function () {
                return !!this.listening;
            },

            /**
             * 注销
             */
            dispose: function () {
                this.stop();
                this.un();
                this.main = this.events = null;
            }
        };


        observable.mixin(MouseCapture.prototype);
        return MouseCapture;
    }
Example #3
0
    function (require) {

        var lang = require('common/lang');
        var observable = require('common/observable');

        /**
         * 键盘按键
         *
         * @param {MouseEvent} e 事件
         * @return {Object} 按键列表
         */
        function getEvent(e) {
            return {
                originEvent: e
            };
        }

        /**
         * 按下弹起事件
         *
         * @param {Object} e 事件参数
         */
        function resizedetect(e) {

            if (false === this.events.resize) {
                return;
            }

            var event = getEvent(e);
            this.fire('resize', event);
        }

        /**
         * 鼠标动作捕获器
         *
         * @constructor
         * @param {HTMLElement} main 控制元素
         * @param {Object} options 参数选项
         * @param {HTMLElement} options.main 监控对象
         */
        function ResizeCapture(main, options) {
            this.main = main;
            options = options || {};
            this.events = options.events || {};
            this.debounce = options.debounce || 200;
            this.handlers = {
                resize: lang.debounce(lang.bind(resizedetect, this), this.debounce)
            };

            this.start();
        }


        ResizeCapture.prototype = {

            constructor: ResizeCapture,

            /**
             * 开始监听
             *
             * @return {this}
             */
            start: function () {

                if (!this.listening) {
                    this.listening = true;
                    window.addEventListener('resize', this.handlers.resize, false);
                }

                return this;
            },

            /**
             * 停止监听
             *
             * @return {this}
             */
            stop: function () {

                if (this.listening) {
                    this.listening = false;
                    window.removeEventListener('resize', this.handlers.resize);
                }

                return this;
            },

            /**
             * 是否监听中
             *
             * @return {boolean} 是否
             */
            isListening: function () {
                return !!this.listening;
            },

            /**
             * 注销
             */
            dispose: function () {
                this.stop();
                this.main = this.events = null;
                this.un();
            }
        };

        observable.mixin(ResizeCapture.prototype);

        return ResizeCapture;
    }
Example #4
0
    function(require) {

        var lang = require('common/lang');
        var guid = require('./util/guid');
        var Painter = require('./Painter');
        var MouseCapture = require('./capture/Mouse');
        var KeyboardCapture = require('./capture/Keyboard');
        var ResizeCapture = require('./capture/Resize');
        var observable = require('common/observable');

        /**
         * Render初始化
         * 
         */
        function init() {

            // 注册画布
            this.painter = new Painter(
                this.main,
                this.options.painter
            );

            // 注册鼠标
            this.capture = new MouseCapture(
                this.main,
                this.options.mouse
            );

            // 注册键盘
            this.keyCapture = new KeyboardCapture(
                this.main,
                this.options.keyboard
            );

            this.camera = this.painter.camera;

            var me = this;

            // 是否允许缩放
            if(this.options.enableScale) {
                this.capture.on('wheel', function(e) {
                    if (e.altKey || e.ctrlKey) {

                        e.originEvent.preventDefault();
                        e.originEvent.stopPropagation();

                        var defaultRatio = me.options.defaultRatio || 1.2;
                        var ratio = e.delta > 0 ?  defaultRatio : 1 / defaultRatio;
                        var toScale = me.camera.scale * ratio;
                        if (
                            toScale < me.options.minScale 
                            || toScale > me.options.maxScale
                        ) {
                            return;
                        }
                        
                        me.scale(ratio, e);
                    }
                    else {
                        var moval = e.delta > 0 ? 30 : -30;
                        me.move(e.shiftKey ? moval : 0, e.shiftKey ? 0 : moval);
                        me.refresh();
                    }
                });
            }

            // 窗口改变
            if(this.options.enableResize) {
                this.resizeCapture = new ResizeCapture(this.main);
                this.resizeCapture.on('resize', function(e) {
                    var prevSize = me.painter.getSize();
                    me.painter.resetSize();
                    var size = me.painter.getSize();
                    if(size.width != prevSize.width || size.height != prevSize.height) {
                        me.fire('resize', {
                            size: size,
                            prevSize: prevSize
                        });
                    }
                });
            }
        }

        /**
         * Render 构造函数
         * 
         * @constructor
         * @param {Object} options 参数选项
         */
        function Render(main, options) {

            this.main = main;

            this.options = lang.extend(
                {
                    defaultRatio: 1.2, // 默认的缩放比例
                    minScale: 0.2, // 最小缩放
                    maxScale: 200, //最大缩放
                    enableScale: true, // 是否允许缩放
                    enableResize: true // 是否允许大小改变
                }, 
                options
            );

            this.id = guid();

            if(!this.main) {
                throw 'require a main dom element';
            }

            init.call(this);
        }

        /**
         * 设置鼠标样式
         * 
         * @param {string} name 名字
         * @return {this}
         */
        Render.prototype.setCursor = function(name) {
            this.main.style.cursor = name || 'default';
            return this;
        };

        /**
         * 刷新render
         * 
         * @return {this}
         */
        Render.prototype.refresh = function() {
            this.painter.refresh();
            return this;
        };

        /**
         * 重置渲染器
         */
        Render.prototype.reset = function() {
            this.painter.reset();

        };

        /**
         * 缩放指定的比例
         * 
         * @param {number} ratio 比例
         * @param {Object} p 参考点坐标
         * @param {boolean} noRefresh 无刷新缩放
         * 
         * @return {this}
         */
        Render.prototype.scale = function(ratio, p, noRefresh) {

            var toScale = this.camera.scale * ratio;
            if (
                toScale < this.options.minScale 
                || toScale > this.options.maxScale
            ) {
                return;
            }

            this.camera.ratio = ratio;
            this.camera.center.x = p.x;
            this.camera.center.y = p.y;
            this.camera.scale = toScale;

            if(true !== noRefresh) {
                this.painter.refresh();
            }
            else {
                this.painter.adjust();
            }

            this.camera.ratio = 1;
        };

        /**
         * 缩放到指定的比例
         * 
         * @param {number} scale 比例
         * @param {Object} p 中心点坐标
         * @param {boolean} noRefresh 无刷新缩放
         * 
         * @return {this}
         */
        Render.prototype.scaleTo = function(scale, p, noRefresh) {

            // 缩放
            this.scale(scale / this.camera.scale, this.camera.center, true);

            // 平移
            this.painter.moveTo(p.x, p.y);
            this.camera.reset(p, scale);

            if(true !== noRefresh) {
                this.painter.refresh();
            }
        };

        /**
         * 获取焦点
         * 
         */
        Render.prototype.focus = function() {
            //this.capture.start();
            this.keyCapture.start();
        };

        /**
         * 离开焦点
         * 
         */
        Render.prototype.blur = function() {
            //this.capture.stop();
            this.keyCapture.stop();
        };

        /**
         * 注销对象
         * 
         */
        Render.prototype.dispose = function() {

            this.un();

            this.painter.dispose();
            this.capture.dispose();
            this.keyCapture.dispose();
            this.resizeCapture && this.resizeCapture.dispose();

            this.main = this.options = this.camera = null;
            this.painter = this.capture = this.keyCapture = null;
        };

        // 注册painter中的函数
        [   
            'addSupport', 'move', 'getSize',
            'getLayer', 'addLayer', 'removeLayer',
            'getShapeIn', 'clearShapes'
        ].forEach(function(fnName) {
            Render.prototype[fnName] = function() {
                return this.painter[fnName].apply(this.painter, arguments);
            };
        });

        observable.mixin(Render.prototype);

        return Render;
    }
Example #5
0
    function(require) {

        var observable = require('common/observable');


        // 绑定click事件
        function bindClick(components) {
            var me = this;
            document.body.addEventListener('click', function(e) {

                // 监听查看器
                if (components.viewer === e.target || components.viewer.contains(e.target)) {
                    me.viewer.focus();
                }
                else {
                    me.viewer.blur();
                }

                // 监听编辑器
                if (components.editor) {
                    if (components.editor === e.target || components.editor.contains(e.target)) {
                        me.editor.focus();
                    }
                    else {
                        me.editor.blur();
                    }
                }

            }, false);
        }

        /**
         * 绑定键盘事件
         */
        function bindKey() {
            var me = this;

            document.body.addEventListener('keydown', function(e) {

                if (!program.listening) {
                    return;
                }
                
                e.ctrlKey = e.ctrlKey || e.metaKey;

                // 全选
                if (65 === e.keyCode && e.ctrlKey) {
                    e.preventDefault();
                    e.stopPropagation();
                }
                // 功能键
                if (e.keyCode >= 112 && e.keyCode <= 119 && e.keyCode !== 116) {
                    e.preventDefault();
                    e.stopPropagation();
                    me.fire('function', {
                        keyCode: e.keyCode
                    });
                }
                // 保存
                else if (83 === e.keyCode && e.ctrlKey) {
                    e.preventDefault();
                    e.stopPropagation();
                    me.fire('save');
                }
                // 粘贴
                else if ((e.keyCode == 86 && e.ctrlKey)) {
                    e.preventDefault();
                    e.stopPropagation();
                    me.fire('paste');
                }
            });
        }

        var program = {
            
            // 在线地址读取接口
            fontUrl: './php/readFont.php?file=${0}',

            /**
             * 初始化
             */
            init: function(components) {
                bindClick.call(this, components);
                bindKey.call(this, components);
            },

            /**
             * 暂存对象
             * 
             * @type {Object}
             */
            data: {},

            viewer: null, // glyf查看器

            project: null, // 项目管理器

            projectViewer: null, // 项目查看器

            ttfManager: null, // ttf管理器

            listening: true, // 正在监听事件

            loading: require('./loading')
        };

        observable.mixin(program);

        return program;
    }
Example #6
0
    function (require) {
		var lang = require('common/lang');
        var i18n = require('../i18n/i18n');
		var contours2svg = require('fonteditor-core/ttf/util/contours2svg');
        var observable = require('common/observable');
		var string = require('common/string');
		var shapes = require('editor/shapes/support');

		 var SYMBOL_ITEM_TPL  = ''   // symbol 아이템 템플릿 ( div 안에 svg 구조 ) 
			+ "<a class='symbol-item btn btn-flat btn-sm' "
			+ " data-action='addsupportshapes' data-type='${symbol}' title='${title}'>" 
            +   '<svg viewbox="0 0 ${unitsPerEm.xMax} ${unitsPerEm.yMax}">'
            +       '<g><path class="path" ${fillColor} ${d}/></g>'
            +   '</svg>'
			+ "</a>";

        function SymbolList(main, options) {

            this.main = $(main);
			this.options = lang.extend({ }, options);
           
			this.init();
        }

		function getMax (contours) {
			var xMax = 0; 
			var yMax = 0; 

			contours.forEach(function(c) {
				c.forEach(function(p) {
					if (p.x > xMax) { xMax = p.x; }
					if (p.y > yMax) { yMax = p.y; }
				})
			});

			return { xMax : xMax, yMax : yMax };
		}

		SymbolList.prototype.init = function () {
			var arr = [];
			var self = this; 

			var symbols = Object.keys(shapes);

			symbols.forEach(function(symbol) {

				var unitsPerEm = getMax(shapes[symbol]);

				var obj = {
					symbol : symbol,
					title : i18n.lang[symbol],
					d : 'd="' + contours2svg(shapes[symbol]) + '"',
					unitsPerEm : unitsPerEm
				}
				arr.push(string.format(SYMBOL_ITEM_TPL, obj));
			});

			this.main.html(arr.join(''));
		}

        observable.mixin(SymbolList.prototype);

        return SymbolList;
    }
Example #7
0
    function (require) {

        var observable = require('common/observable');


        function bindClick(components) {
            var me = this;

            document.body.addEventListener('click', function (e) {

                if (!me.listening) {
                    return;
                }

                // 监听查看器
                if (components.viewer === e.target || components.viewer.contains(e.target)) {
                    me.viewer.focus();
                }
                else {
                    me.viewer.blur();
                }

                // 监听编辑器
                if (components.editor) {
                    if (components.editor === e.target || components.editor.contains(e.target)) {
                        me.editor.focus();
                    }
                    else {
                        me.editor.blur();
                    }
                }
            });
        }

        /**
         * 绑定键盘事件
         */
        function bindKey() {
            var me = this;

            document.body.addEventListener('keydown', function (e) {

                if (!me.listening) {
                    return;
                }

                e.ctrl = e.ctrlKey || e.metaKey;

                // 全选
                if (65 === e.keyCode && e.ctrl) {
                    e.preventDefault();
                    e.stopPropagation();
                }
                // 功能键
                if (e.keyCode >= 112 && e.keyCode <= 119 && e.keyCode !== 116) {
                    e.preventDefault();
                    e.stopPropagation();
                    me.fire('function', {
                        keyCode: e.keyCode
                    });
                }
                // 保存
                else if (83 === e.keyCode && e.ctrl) {
                    e.preventDefault();
                    e.stopPropagation();
                    if (e.shiftKey) {
                        me.fire('save', {
                            saveType: 'force'
                        });
                    }
                    else {
                        me.fire('save');
                    }
                }
                // 粘贴
                else if ((86 === e.keyCode && e.ctrl)) {
                    e.preventDefault();
                    e.stopPropagation();
                    me.fire('paste');
                }
            });
        }

        var program = {

            /**
             * 初始化
             *
             * @param {HTMLElement} components 主面板元素
             */
            init: function (components) {
                bindClick.call(this, components);
                bindKey.call(this, components);
            },

            /**
             * 暂存对象
             *
             * @type {Object}
             */
            data: {},

            setting: {},

            listening: true, // 正在监听事件

            loading: require('./loading') // loading 对象
        };

        observable.mixin(program);

        return program;
    }
Example #8
0
    function(require) {

        var lang = require('common/lang');
        var observable = require('common/observable');

        // 键盘名称映射表
        var keyCodeMap = {
            37: 'left',
            38: 'up' ,
            39: 'right',
            40: 'down',
            13: 'enter',
            27: 'esc',
            8: 'backspace',
            45: 'insert',
            46: 'delete',
            16: 'shift',
            17: 'ctrl',
            18: 'alt',
            36: 'home',
            47: 'help',
            20: 'caps',
            9: 'tab'
        };


        /**
         * 键盘按键
         * @param {MouseEvent} e 事件
         * 
         * @return {Object} 按键列表
         */
        function getEvent(e) {
            return {
                keyCode: e.keyCode,
                key: keyCodeMap[e.keyCode],
                ctrlKey: e.ctrlKey,
                metaKey: e.metaKey,
                altKey: e.altKey,
                shiftKey: e.shiftKey,
                originEvent: e
            };
        }

        /**
         * 按下弹起事件
         * 
         * @param {Object} e 事件参数
         */
        function keydetect(keyEvent, e) {
            
            if(false === this.events['key' + Event]) {
                return;
            }

            var event = getEvent(e);
            this.fire('key' + keyEvent, event);

            var keyName = keyCodeMap[event.keyCode];
            if (keyName) {
                this.fire(keyName + ':' + keyEvent, event);
            }
        }

        /**
         * 鼠标动作捕获器
         * 
         * @constructor
         * @param {HTMLElement} main 控制元素
         * @param {Object} options 参数选项
         * @param {HTMLElement} options.main 监控对象
         */
        function KeyboardCapture(main, options) {
            this.main = main;
            options = options || {};
            this.events = options.events || {};

            this.handlers = {
                keydown: lang.bind(keydetect, this, 'down'),
                keyup: lang.bind(keydetect, this, 'up'),
                keypress: lang.bind(keydetect, this, 'press')
            };
            
            this.start();
        }


        lang.extend(KeyboardCapture.prototype, {

            /**
             * 开始监听
             * 
             * @return {this}
             */
            start: function() {

                if (!this.listening) {
                    this.listening = true;

                    var target = document.body;
                    target.addEventListener('keydown', this.handlers.keydown, false);
                    target.addEventListener('keyup', this.handlers.keyup, false);
                    target.addEventListener('keypress', this.handlers.keypress, false);
                }

                return this;
            },

            /**
             * 停止监听
             * 
             * @return {this}
             */
            stop: function() {
                
                if (this.listening) {
                    this.listening = false;

                    var target = document.body;
                    target.removeEventListener('keydown', this.handlers.keydown);
                    target.removeEventListener('keyup', this.handlers.keyup);
                    target.removeEventListener('keypress', this.handlers.keypress);
                }

                return this;
            },

            /**
             * 是否监听中
             * 
             * @return {boolean} 是否
             */
            isListening: function() {
                return !!this.listening;
            },

            /**
             * 注销
             */
            dispose: function() {
                this.stop();
                this.main = this.events = null;
                this.un();
            }
        });

        observable.mixin(KeyboardCapture.prototype);

        return KeyboardCapture;
    }
Example #9
0
    function (require) {

        var observable = require('common/observable');
        var i18n = require('../i18n/i18n');
        var PAGER_TPL = ''
            + '<button data-pager="prev" type="button" class="btn btn-flat btn-new btn-sm">'
            +   i18n.lang.prevpage + '</button>'
            + '<input data-pager="text" type="text" class="form-control">'
            + '<span data-pager="info"></span>'
            + '<button data-pager="goto" type="button" class="btn btn-flat btn-new btn-sm">'
            +   i18n.lang.gotopage + '</button>'
            + '<button data-pager="next" type="button" class="btn btn-flat btn-new btn-sm">'
            +   i18n.lang.nextpage + '</button>';


        /**
         * pager构造函数
         *
         * @constructor
         * @param {HTMLElement} main 主元素
         * @param {Object} options 参数
         */
        function Pager(main, options) {
            this.main = $(main);
            this.options = options || {};

            this.main.html(PAGER_TPL);
            this.textPage = this.main.find('input[data-pager="text"]');

            var me = this;
            me.main.on('click', 'button[data-pager]', function (e) {

                if (this.getAttribute('data-disabled')) {
                    return;
                }

                var action = this.getAttribute('data-pager');
                var page = me.page;
                if (action === 'prev') {
                    page = me.page > 1 ? me.page - 1 : 1;
                }
                else if (action === 'next') {
                    page = me.page < me.totalPage ? me.page + 1 : me.totalPage;
                }
                else if (action === 'goto') {
                    var p = +me.textPage.val();
                    if (p >= 1 && p <= me.totalPage) {
                        page = p;
                    }
                    else {
                        page = me.page;
                    }
                }

                me.textPage.val(page);

                if (page !== me.page) {
                    me.page = page;
                    me.fire('change', {
                        page: page
                    });
                }
            });

            me.textPage.on('keyup', function (e) {
                if (e.keyCode === 13) {
                    var page = +this.value.trim();
                    if (page >= 1 && page <= me.totalPage) {
                        me.page = page;
                        me.fire('change', {
                            page: page
                        });
                    }
                    else {
                        this.value = me.page;
                    }
                }
            });
        }

        /**
         * 显示pager
         *
         * @param {number} page 当前页码
         * @param {number} pageSize 分页大小
         * @param {number} total 总个数
         */
        Pager.prototype.show = function (page, pageSize, total) {
            if (total <= pageSize) {
                this.hide();
            }
            else {
                this.page = page;
                this.totalPage = Math.ceil(total / pageSize);
                this.main.find('[data-pager="text"]').val(page);
                this.main.find('[data-pager="info"]').html('/ ' + this.totalPage);
                this.main.find('[data-pager="prev"]')[
                    page === 1 ? 'attr' : 'removeAttr'
                ]('data-disabled', 1);
                this.main.find('[data-pager="next"]')[
                    page === this.totalPage ? 'attr' : 'removeAttr'
                ]('data-disabled', 1);
            }
            this.main.show();
        };

        /**
         * 隐藏
         */
        Pager.prototype.hide = function () {
            this.main.hide();
        };

        /**
         * 注销
         */
        Pager.prototype.dispose = function () {
            this.main.un('click', 'button[data-pager]');
            this.main.find('input[data-pager="text"]').un('keyup');
        };

        observable.mixin(Pager.prototype);

        return Pager;
    }