vue-poster-editor/lib/utils/rich-text/command.js

A poster editor based on Vue.js

'use strict';

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _jquery = require('jquery');

var _jquery2 = _interopRequireDefault(_jquery);

var _onecolor = require('../onecolor');

var _onecolor2 = _interopRequireDefault(_onecolor);

var _eventEmitter = require('../event-emitter');

var _eventEmitter2 = _interopRequireDefault(_eventEmitter);

var _config = require('./config');

var _ua = require('../ua');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var allowEmptyRangeCommans = ['fontWeight', 'fontFamily', 'fontSize', 'fontStyle', 'color', 'textDecoration'];
allowEmptyRangeCommans.concat(allowEmptyRangeCommans.filter(function (name) {
    return _config.commandAliasMap[name];
}).map(function (name) {
    return _config.commandAliasMap[name];
}));

var Command = function (_EventEmitter) {
    _inherits(Command, _EventEmitter);

    function Command(selection) {
        _classCallCheck(this, Command);

        var _this = _possibleConstructorReturn(this, (Command.__proto__ || Object.getPrototypeOf(Command)).call(this));

        _this.selection = selection;
        _this._initMode();
        return _this;
    }

    _createClass(Command, [{
        key: '_initMode',
        value: function _initMode() {
            document.execCommand('styleWithCSS', false, true);
        }
    }, {
        key: '_customizeStyle',
        value: function _customizeStyle(name, value) {
            var selection = this.selection;
            var textElem = selection.$textElem[0];
            var $fragment = (0, _jquery2.default)(selection.cloneContents());
            var $wrap = (0, _jquery2.default)('<span ' + _config.CUSTOMIZE_MARK + '></span>');
            var wrap = $wrap[0];

            $wrap.css(name, value).append($fragment);
            $wrap.find('span').css(name, '').each(function (i, elem) {
                mergeWithParent(elem, textElem);
            });

            this._insertElem(wrap);
            var newWrap = mergeWithParent(wrap, textElem);

            (0, _jquery2.default)(textElem).find('span').each(function (i, elem) {
                clearInvalidElem((0, _jquery2.default)(elem));
            });

            this.selection.createRangeByElem(newWrap, true);
        }
    }, {
        key: '_fontSize',
        value: function _fontSize(size) {
            size = parseFloat(size) + 'px';
            this._customizeStyle('font-size', size);
        }
    }, {
        key: '_color',
        value: function _color(color) {
            if ((0, _ua.isIE)()) {
                color = _onecolor2.default.cssa(color);
                this._customizeStyle('color', color);
            } else {
                this._execCommand('color', color);
            }
        }
    }, {
        key: '_textDecoration',
        value: function _textDecoration(value) {
            var map = {
                'underline': 'underline',
                'line-through': 'strikeThrough'
            };

            var underlineApply = this.queryCommandValue('underline');
            var strikeThroughApply = this.queryCommandValue('strikeThrough');

            this._execCommand('underline');
            this._execCommand('underline');
            this._execCommand('strikeThrough');
            this._execCommand('strikeThrough');

            underlineApply = this.queryCommandValue('underline');
            strikeThroughApply = this.queryCommandValue('strikeThrough');

            if (!map[value]) {
                if (underlineApply) this._execCommand('underline');
                if (strikeThroughApply) this._execCommand('strikeThrough');

                return;
            } else if (value === 'line-through' && underlineApply) {
                this._execCommand('underline');
            } else if (value === 'underline' && strikeThroughApply) {
                this._execCommand('strikeThrough');
            }

            this._execCommand(map[value]);
        }
    }, {
        key: '_insertHTML',
        value: function _insertHTML(html) {
            var range = this.selection.getRange();

            if (this.queryCommandSupported('insertHTML')) {
                this._execCommand('insertHTML', html);
            } else if (range.insertNode) {
                range.deleteContents();
                range.insertNode((0, _jquery2.default)(html)[0]);
            } else if (range.pasteHTML) {
                range.pasteHTML(html);
            }
        }
    }, {
        key: '_insertElem',
        value: function _insertElem(elem) {
            var range = this.selection.getRange();

            if (range.insertNode) {
                range.deleteContents();
                range.insertNode(elem);
            }
        }
    }, {
        key: '_execCommand',
        value: function _execCommand(name, value) {
            this._initMode();
            name = _config.commandAliasMap[name] || name;
            document.execCommand(name, false, value);
        }
    }, {
        key: '_queryCommandValue',
        value: function _queryCommandValue(name) {
            if (name === 'textDecoration') {
                var textDecoration = 'none';
                if (this.queryCommandState('strikeThrough') === true) {
                    textDecoration = 'line-through';
                } else if (this.queryCommandState('underline') === true) {
                    textDecoration = 'underline';
                };
                return textDecoration;
            }

            var textElem = this.selection.$textElem[0];
            var startElem = this.selection.getSelectionStartElem();
            var result = (0, _jquery2.default)(startElem).css(name);

            if (name === 'font-size') {
                while (result === '0px') {
                    startElem = (0, _jquery2.default)(startElem).children().get(0);
                    if (!startElem) {
                        break;
                    }
                    result = (0, _jquery2.default)(startElem).css(name);
                }
            }

            if (['color', 'font-family'].includes(name) && startElem === textElem) {
                startElem = (0, _jquery2.default)(startElem).children().get(0);
                result = (0, _jquery2.default)(startElem).css(name);
            }

            return result;
        }
    }, {
        key: 'do',
        value: function _do(name, value) {
            var selection = this.selection;

            if (!selection.getRange()) return;

            var isCreateEmptyRange = allowEmptyRangeCommans.includes(name) && selection.isSelectionEmpty();

            if (isCreateEmptyRange) {
                selection.createEmptyRange(this);
            }

            selection.restoreSelection();

            var _name = '_' + name;
            if (this[_name]) {
                this[_name](value);
            } else {
                this._execCommand(name, value);
            }

            this.emit('do', [name, value]);

            selection.saveRange();
            selection.restoreSelection();

            if (isCreateEmptyRange) {
                selection.collapse();
                selection.restoreSelection();
            }
        }
    }, {
        key: 'queryCommandValue',
        value: function queryCommandValue(name) {
            var redirectState = ['bold', 'Bold', 'italic', 'Italic', 'strikeThrough', 'StrikeThrough', 'underline', 'Underline'];
            var customizeMap = {
                'fontSize': 'font-size',
                'FontSize': 'font-size',
                'textDecoration': 'textDecoration'
            };

            if ((0, _ua.isIE)()) {
                Object.assign(customizeMap, {
                    'fontName': 'font-family',
                    'foreColor': 'color'
                });
            }

            name = _config.commandAliasMap[name] || name;

            if (customizeMap[name]) {
                return this._queryCommandValue(customizeMap[name]);
            } else if (redirectState.indexOf(name) !== -1) {
                return this.queryCommandState(name);
            } else {
                return document.queryCommandValue(name);
            }
        }
    }, {
        key: 'queryCommandState',
        value: function queryCommandState(name) {
            return document.queryCommandState(name);
        }
    }, {
        key: 'queryCommandSupported',
        value: function queryCommandSupported(name) {
            return document.queryCommandSupported(name);
        }
    }]);

    return Command;
}(_eventEmitter2.default);

exports.default = Command;

var clearInvalidElem = function clearInvalidElem($elem) {
    var style = $elem.attr('style');
    var length = $elem.children().length;
    var text = $elem.text();

    if (!text) {
        $elem.remove();
    } else if (!style && !length) {
        $elem.contents().replaceAll($elem);
    };
};

function mergeWithParent(elem, wrapElem) {
    var parent = void 0;
    while (parent = elem.parentNode) {
        var $parent = (0, _jquery2.default)(parent);
        var $elem = (0, _jquery2.default)(elem);

        if (parent === wrapElem || parent.tagName !== 'SPAN' || $parent.text() !== $elem.text()) {
            return elem;
        } else {
            parent.style.cssText += elem.style.cssText;

            $elem.contents().replaceAll($elem);

            elem = parent;
        }
    }
}
module.exports = exports['default'];