Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Micro size optimizations #108

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Micro size optimizations #108

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
95 changes: 28 additions & 67 deletions dist/pell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,7 @@ var _extends = Object.assign || function (target) { for (var i = 1; i < argument

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);
};
Expand All @@ -24,121 +19,88 @@ 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;
var exec = function exec(command, value) {
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');
}
state: queryCommandState.bind('bold'),
result: exec.bind(null, 'bold')
},
italic: {
icon: '<i>I</i>',
title: 'Italic',
state: function state() {
return queryCommandState('italic');
},
result: function result() {
return exec('italic');
}
state: queryCommandState.bind('italic'),
result: exec.bind(null, 'italic')
},
underline: {
icon: '<u>U</u>',
title: 'Underline',
state: function state() {
return queryCommandState('underline');
},
result: function result() {
return exec('underline');
}
state: queryCommandState.bind('underline'),
result: exec.bind(null, 'underline')
},
strikethrough: {
icon: '<strike>S</strike>',
title: 'Strike-through',
state: function state() {
return queryCommandState('strikeThrough');
},
result: function result() {
return exec('strikeThrough');
}
state: queryCommandState.bind('strikeThrough'),
result: exec.bind(null, 'strikeThrough')
},
heading1: {
icon: '<b>H<sub>1</sub></b>',
title: 'Heading 1',
result: function result() {
return exec(formatBlock, '<h1>');
}
result: exec.bind(null, formatBlock, '<h1>')
},
heading2: {
icon: '<b>H<sub>2</sub></b>',
title: 'Heading 2',
result: function result() {
return exec(formatBlock, '<h2>');
}
result: exec.bind(null, formatBlock, '<h2>')
},
paragraph: {
icon: '&#182;',
title: 'Paragraph',
result: function result() {
return exec(formatBlock, '<p>');
}
result: exec.bind(null, formatBlock, '<p>')
},
quote: {
icon: '&#8220; &#8221;',
title: 'Quote',
result: function result() {
return exec(formatBlock, '<blockquote>');
}
result: exec.bind(null, formatBlock, '<blockquote>')
},
olist: {
icon: '&#35;',
title: 'Ordered List',
result: function result() {
return exec('insertOrderedList');
}
result: exec.bind(null, 'insertOrderedList')
},
ulist: {
icon: '&#8226;',
title: 'Unordered List',
result: function result() {
return exec('insertUnorderedList');
}
result: exec.bind(null, 'insertUnorderedList')
},
code: {
icon: '&lt;/&gt;',
title: 'Code',
result: function result() {
return exec(formatBlock, '<pre>');
}
result: exec.bind(null, formatBlock, '<pre>')
},
line: {
icon: '&#8213;',
title: 'Horizontal Line',
result: function result() {
return exec('insertHorizontalRule');
}
result: exec.bind(null, 'insertHorizontalRule')
},
link: {
icon: '&#128279;',
title: 'Link',
result: function result() {
var url = window.prompt('Enter the link URL');
var url = prompt('Enter the link URL');
if (url) exec('createLink', url);
}
},
image: {
icon: '&#128247;',
title: 'Image',
result: function result() {
var url = window.prompt('Enter the image URL');
var url = prompt('Enter the image URL');
if (url) exec('insertImage', url);
}
}
Expand All @@ -153,7 +115,8 @@ var defaultClasses = {

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);
if (typeof action === 'string') return defaultActions[action];
if (defaultActions[action.name]) return _extends({}, defaultActions[action.name], action);
return action;
}) : Object.keys(defaultActions).map(function (action) {
return defaultActions[action];
Expand All @@ -165,7 +128,7 @@ var init = function init(settings) {

var actionbar = createElement('div');
actionbar.className = classes.actionbar;
appendChild(settings.element, actionbar);
settings.element.appendChild(actionbar);

var content = settings.element.content = createElement('div');
content.contentEditable = true;
Expand All @@ -185,28 +148,26 @@ var init = function init(settings) {
}, 0);
}
};
appendChild(settings.element, content);
settings.element.appendChild(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);
return button.classList[action.state() ? 'add' : 'remove'](classes.selected)[('keyup', 'mouseup', 'click')].map(function (e) {
return content.addEventListener(e, handler);
});
};
addEventListener(content, 'keyup', handler);
addEventListener(content, 'mouseup', handler);
addEventListener(button, 'click', handler);
}

appendChild(actionbar, button);
actionbar.appendChild(button);
});

if (settings.styleWithCSS) exec('styleWithCSS');
Expand Down
2 changes: 1 addition & 1 deletion dist/pell.min.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

53 changes: 25 additions & 28 deletions src/pell.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,91 +1,91 @@
const defaultParagraphSeparatorString = 'defaultParagraphSeparator'
const formatBlock = 'formatBlock'
const addEventListener = (parent, type, listener) => parent.addEventListener(type, listener)

const appendChild = (parent, child) => parent.appendChild(child)
const createElement = tag => document.createElement(tag)
const queryCommandState = command => document.queryCommandState(command)
const queryCommandValue = command => document.queryCommandValue(command)

export const exec = (command, value = null) => document.execCommand(command, false, value)
export const exec = (command, value) => document.execCommand(command, false, value)

const defaultActions = {
bold: {
icon: '<b>B</b>',
title: 'Bold',
state: () => queryCommandState('bold'),
result: () => exec('bold')
state: queryCommandState.bind('bold'),
result: exec.bind(null, 'bold')
},
italic: {
icon: '<i>I</i>',
title: 'Italic',
state: () => queryCommandState('italic'),
result: () => exec('italic')
state: queryCommandState.bind('italic'),
result: exec.bind(null, 'italic')
},
underline: {
icon: '<u>U</u>',
title: 'Underline',
state: () => queryCommandState('underline'),
result: () => exec('underline')
state: queryCommandState.bind('underline'),
result: exec.bind(null, 'underline')
},
strikethrough: {
icon: '<strike>S</strike>',
title: 'Strike-through',
state: () => queryCommandState('strikeThrough'),
result: () => exec('strikeThrough')
state: queryCommandState.bind('strikeThrough'),
result: exec.bind(null, 'strikeThrough')
},
heading1: {
icon: '<b>H<sub>1</sub></b>',
title: 'Heading 1',
result: () => exec(formatBlock, '<h1>')
result: exec.bind(null, formatBlock, '<h1>')
},
heading2: {
icon: '<b>H<sub>2</sub></b>',
title: 'Heading 2',
result: () => exec(formatBlock, '<h2>')
result: exec.bind(null, formatBlock, '<h2>')
},
paragraph: {
icon: '&#182;',
title: 'Paragraph',
result: () => exec(formatBlock, '<p>')
result: exec.bind(null, formatBlock, '<p>')
},
quote: {
icon: '&#8220; &#8221;',
title: 'Quote',
result: () => exec(formatBlock, '<blockquote>')
result: exec.bind(null, formatBlock, '<blockquote>')
},
olist: {
icon: '&#35;',
title: 'Ordered List',
result: () => exec('insertOrderedList')
result: exec.bind(null, 'insertOrderedList')
},
ulist: {
icon: '&#8226;',
title: 'Unordered List',
result: () => exec('insertUnorderedList')
result: exec.bind(null, 'insertUnorderedList')
},
code: {
icon: '&lt;/&gt;',
title: 'Code',
result: () => exec(formatBlock, '<pre>')
result: exec.bind(null, formatBlock, '<pre>')
},
line: {
icon: '&#8213;',
title: 'Horizontal Line',
result: () => exec('insertHorizontalRule')
result: exec.bind(null, 'insertHorizontalRule')
},
link: {
icon: '&#128279;',
title: 'Link',
result: () => {
const url = window.prompt('Enter the link URL')
const url = prompt('Enter the link URL')
if (url) exec('createLink', url)
}
},
image: {
icon: '&#128247;',
title: 'Image',
result: () => {
const url = window.prompt('Enter the image URL')
const url = prompt('Enter the image URL')
if (url) exec('insertImage', url)
}
}
Expand All @@ -103,7 +103,7 @@ export const init = settings => {
? (
settings.actions.map(action => {
if (typeof action === 'string') return defaultActions[action]
else if (defaultActions[action.name]) return { ...defaultActions[action.name], ...action }
if (defaultActions[action.name]) return { ...defaultActions[action.name], ...action }
return action
})
)
Expand All @@ -115,7 +115,7 @@ export const init = settings => {

const actionbar = createElement('div')
actionbar.className = classes.actionbar
appendChild(settings.element, actionbar)
settings.element.appendChild(actionbar)

const content = settings.element.content = createElement('div')
content.contentEditable = true
Expand All @@ -132,24 +132,21 @@ export const init = settings => {
setTimeout(() => exec(formatBlock, `<${defaultParagraphSeparator}>`), 0)
}
}
appendChild(settings.element, content)
settings.element.appendChild(content)

actions.forEach(action => {
const button = createElement('button')
button.className = classes.button
button.innerHTML = action.icon
button.title = action.title
button.setAttribute('type', 'button')
button.onclick = () => action.result() && content.focus()

if (action.state) {
const handler = () => button.classList[action.state() ? 'add' : 'remove'](classes.selected)
addEventListener(content, 'keyup', handler)
addEventListener(content, 'mouseup', handler)
addEventListener(button, 'click', handler)
['keyup', 'mouseup', 'click'].map(e => content.addEventListener(e, handler))
}

appendChild(actionbar, button)
actionbar.appendChild(button)
})

if (settings.styleWithCSS) exec('styleWithCSS')
Expand Down