139 lines
4.5 KiB
JavaScript
139 lines
4.5 KiB
JavaScript
(function (global, factory) {
|
|
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
|
|
typeof define === 'function' && define.amd ? define(['exports'], factory) :
|
|
(factory((global.pell = {})));
|
|
}(this, (function (exports) { 'use strict';
|
|
|
|
var _extends = Object.assign || function (target) { for(var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
|
|
|
|
var defaultParagraphSeparatorString = 'defaultParagraphSeparator';
|
|
var formatBlock = 'formatBlock';
|
|
var addEventListener = function addEventListener(parent, type, listener) {
|
|
return parent.addEventListener(type, listener);
|
|
};
|
|
var appendChild = function appendChild(parent, child) {
|
|
return parent.appendChild(child);
|
|
};
|
|
var createElement = function createElement(tag) {
|
|
return document.createElement(tag);
|
|
};
|
|
var queryCommandState = function queryCommandState(command) {
|
|
return document.queryCommandState(command);
|
|
};
|
|
var queryCommandValue = function queryCommandValue(command) {
|
|
return document.queryCommandValue(command);
|
|
};
|
|
var exec = function exec(command) {
|
|
var value = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
|
|
return document.execCommand(command, false, value);
|
|
};
|
|
var defaultActions = {
|
|
bold: {
|
|
icon: '<b>B</b>',
|
|
title: 'Bold',
|
|
state: function state() {
|
|
return queryCommandState('bold');
|
|
},
|
|
result: function result() {
|
|
return exec('bold');
|
|
}
|
|
},
|
|
italic: {
|
|
icon: '<i>I</i>',
|
|
title: 'Italic',
|
|
state: function state() {
|
|
return queryCommandState('italic');
|
|
},
|
|
result: function result() {
|
|
return exec('italic');
|
|
}
|
|
},
|
|
underline: {
|
|
icon: '<u>U</u>',
|
|
title: 'Underline',
|
|
state: function state() {
|
|
return queryCommandState('underline');
|
|
},
|
|
result: function result() {
|
|
return exec('underline');
|
|
}
|
|
}
|
|
};
|
|
var defaultClasses = {
|
|
actionbar: 'pell-actionbar',
|
|
button: 'pell-button',
|
|
content: 'pell-content',
|
|
selected: 'pell-button-selected'
|
|
};
|
|
var init = function init(settings) {
|
|
var actions = settings.actions ? settings.actions.map(function (action) {
|
|
if (typeof action === 'string') return defaultActions[action];else if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
|
|
return action;
|
|
}) : Object.keys(defaultActions).map(function (action) {
|
|
return defaultActions[action];
|
|
});
|
|
|
|
var classes = _extends({}, defaultClasses, settings.classes);
|
|
|
|
var defaultParagraphSeparator = settings[defaultParagraphSeparatorString] || 'div';
|
|
|
|
var actionbar = createElement('div');
|
|
actionbar.className = classes.actionbar;
|
|
appendChild(settings.element, actionbar);
|
|
|
|
var content = settings.element.content = createElement('div');
|
|
content.contentEditable = true;
|
|
content.className = classes.content;
|
|
content.oninput = function (_ref) {
|
|
var firstChild = _ref.target.firstChild;
|
|
|
|
if (firstChild && firstChild.nodeType === 3) exec(formatBlock, '<' + defaultParagraphSeparator + '>');else if (content.innerHTML === '<br>') content.innerHTML = '';
|
|
settings.onChange(content.innerHTML);
|
|
};
|
|
content.onkeydown = function (event) {
|
|
if (event.key === 'Enter' && queryCommandValue(formatBlock) === 'blockquote') {
|
|
setTimeout(function () {
|
|
return exec(formatBlock, '<' + defaultParagraphSeparator + '>');
|
|
}, 0);
|
|
}
|
|
};
|
|
appendChild(settings.element, content);
|
|
|
|
actions.forEach(function (action) {
|
|
var button = createElement('button');
|
|
button.className = classes.button;
|
|
button.innerHTML = action.icon;
|
|
button.title = action.title;
|
|
button.setAttribute('type', 'button');
|
|
button.onclick = function () {
|
|
return action.result() && content.focus();
|
|
};
|
|
|
|
if (action.state) {
|
|
var handler = function handler() {
|
|
return button.classList[action.state() ? 'add' : 'remove'](classes.selected);
|
|
};
|
|
addEventListener(content, 'keyup', handler);
|
|
addEventListener(content, 'mouseup', handler);
|
|
addEventListener(button, 'click', handler);
|
|
}
|
|
|
|
appendChild(actionbar, button);
|
|
});
|
|
|
|
if (settings.styleWithCSS) exec('styleWithCSS');
|
|
exec(defaultParagraphSeparatorString, defaultParagraphSeparator);
|
|
|
|
return settings.element;
|
|
};
|
|
|
|
var pell = { exec: exec, init: init };
|
|
|
|
exports.exec = exec;
|
|
exports.init = init;
|
|
exports['default'] = pell;
|
|
|
|
Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
|
})));
|