mirror of
https://git.mills.io/prologic/zs-starter-template.git
synced 2024-11-24 14:26:04 +03:00
WIP: Add an experimental zs based wiki using toastui's tui-editor
This commit is contained in:
parent
bfc510e804
commit
11644ac1f5
@ -5,7 +5,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
{{ styles }}
|
||||
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
|
||||
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
|
||||
<title>{{ title }}</title>
|
||||
@ -22,16 +22,54 @@
|
||||
<a href="https://git.mills.io/prologic/zs">Source 💾</a>
|
||||
</nav>
|
||||
<header>
|
||||
<h1>{{ title }}</h1>
|
||||
<h1>{{ title }} <a class="edit" href="" #edit"></a></h1>
|
||||
</header>
|
||||
<aside>{{ onthispage }}</aside>
|
||||
<article>{{ content }}</article>
|
||||
<div id="editor"></div>
|
||||
<footer>
|
||||
Copyright © James Mills ·
|
||||
Last modified <time datetime="{{ date +%Y-%m-%dT%H:%M:%SZ%:z }}">{{ date }}</time> ·
|
||||
Built with <a href="https://git.mills.io/prologic/zs">zs</a>
|
||||
</footer>
|
||||
{{ scripts }}
|
||||
<script type="text/javascript">
|
||||
document.addEventListener('DOMContentLoaded', function (event) {
|
||||
console.log("dom loaded");
|
||||
|
||||
const {
|
||||
Editor
|
||||
} = toastui;
|
||||
const {
|
||||
colorSyntax
|
||||
} = Editor.plugin;
|
||||
|
||||
const {
|
||||
codeSyntaxHighlight
|
||||
} = Editor.plugin;
|
||||
|
||||
const colorSyntaxOptions = {
|
||||
preset: ['#181818', '#292929', '#393939']
|
||||
};
|
||||
|
||||
u("a.edit").on("click", function (e) {
|
||||
e.preventDefault();
|
||||
console.log("edit clicked");
|
||||
u("article").addClass("hidden");
|
||||
const editor = new toastui.Editor({
|
||||
el: document.querySelector('#editor'),
|
||||
theme: 'dark',
|
||||
initialValue: '{{ source }}',
|
||||
initialEditType: 'wysiwyg',
|
||||
plugins: [
|
||||
codeSyntaxHighlight,
|
||||
[colorSyntax, colorSyntaxOptions]
|
||||
],
|
||||
usageStatistics: false,
|
||||
});
|
||||
window.editor = editor;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
{{ scripts }}
|
||||
|
||||
</html>
|
12
.zs/scripts
12
.zs/scripts
@ -2,18 +2,16 @@
|
||||
|
||||
set -e
|
||||
|
||||
JS=""
|
||||
JS="toastui umbrella"
|
||||
JS="$JS tui-color-picker"
|
||||
JS="$JS toastui-editor-plugin-color-syntax"
|
||||
JS="$JS toastui-editor-plugin-code-syntax-highlight"
|
||||
|
||||
# Load live.js for non-production builds for faster development
|
||||
if [ -z "$ZS_PRODUCTION" ]; then
|
||||
JS="$JS live"
|
||||
fi
|
||||
|
||||
ext="js"
|
||||
if [ -n "$ZS_PRODUCTION" ]; then
|
||||
ext="min.js"
|
||||
fi
|
||||
|
||||
for js in $JS; do
|
||||
printf "<script type=\"application/javascript\" src=\"/assets/js/%s.%s\"></script>\n" "$js" "$ext"
|
||||
printf "<script type=\"application/javascript\" src=\"/assets/js/%s.js\"></script>\n" "$js"
|
||||
done
|
||||
|
10
.zs/styles
10
.zs/styles
@ -3,12 +3,10 @@
|
||||
set -e
|
||||
|
||||
CSS="bahunya site"
|
||||
|
||||
ext="css"
|
||||
if [ -n "$ZS_PRODUCTION" ]; then
|
||||
ext="min.css"
|
||||
fi
|
||||
CSS="$CSS toastui toastui-dark"
|
||||
CSS="$CSS tui-color-picker toastui-editor-plugin-color-syntax"
|
||||
CSS="$CSS prism toastui-editor-plugin-code-syntax-highlight"
|
||||
|
||||
for css in $CSS; do
|
||||
printf "<link rel=\"stylesheet\" href=\"/assets/css/%s.%s\">\n" "$css" "$ext"
|
||||
printf "<link rel=\"stylesheet\" href=\"/assets/css/%s.css\">\n" "$css"
|
||||
done
|
||||
|
140
assets/css/prism.css
Normal file
140
assets/css/prism.css
Normal file
@ -0,0 +1,140 @@
|
||||
/**
|
||||
* prism.js default theme for JavaScript, CSS and HTML
|
||||
* Based on dabblet (http://dabblet.com)
|
||||
* @author Lea Verou
|
||||
*/
|
||||
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
color: black;
|
||||
background: none;
|
||||
text-shadow: 0 1px white;
|
||||
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
|
||||
font-size: 1em;
|
||||
text-align: left;
|
||||
white-space: pre;
|
||||
word-spacing: normal;
|
||||
word-break: normal;
|
||||
word-wrap: normal;
|
||||
line-height: 1.5;
|
||||
|
||||
-moz-tab-size: 4;
|
||||
-o-tab-size: 4;
|
||||
tab-size: 4;
|
||||
|
||||
-webkit-hyphens: none;
|
||||
-moz-hyphens: none;
|
||||
-ms-hyphens: none;
|
||||
hyphens: none;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection,
|
||||
code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
pre[class*="language-"]::selection, pre[class*="language-"] ::selection,
|
||||
code[class*="language-"]::selection, code[class*="language-"] ::selection {
|
||||
text-shadow: none;
|
||||
background: #b3d4fc;
|
||||
}
|
||||
|
||||
@media print {
|
||||
code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
text-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* Code blocks */
|
||||
pre[class*="language-"] {
|
||||
padding: 1em;
|
||||
margin: .5em 0;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
:not(pre) > code[class*="language-"],
|
||||
pre[class*="language-"] {
|
||||
background: #f5f2f0;
|
||||
}
|
||||
|
||||
/* Inline code */
|
||||
:not(pre) > code[class*="language-"] {
|
||||
padding: .1em;
|
||||
border-radius: .3em;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
.token.comment,
|
||||
.token.prolog,
|
||||
.token.doctype,
|
||||
.token.cdata {
|
||||
color: slategray;
|
||||
}
|
||||
|
||||
.token.punctuation {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.token.namespace {
|
||||
opacity: .7;
|
||||
}
|
||||
|
||||
.token.property,
|
||||
.token.tag,
|
||||
.token.boolean,
|
||||
.token.number,
|
||||
.token.constant,
|
||||
.token.symbol,
|
||||
.token.deleted {
|
||||
color: #905;
|
||||
}
|
||||
|
||||
.token.selector,
|
||||
.token.attr-name,
|
||||
.token.string,
|
||||
.token.char,
|
||||
.token.builtin,
|
||||
.token.inserted {
|
||||
color: #690;
|
||||
}
|
||||
|
||||
.token.operator,
|
||||
.token.entity,
|
||||
.token.url,
|
||||
.language-css .token.string,
|
||||
.style .token.string {
|
||||
color: #9a6e3a;
|
||||
/* This background color was intended by the author of this theme. */
|
||||
background: hsla(0, 0%, 100%, .5);
|
||||
}
|
||||
|
||||
.token.atrule,
|
||||
.token.attr-value,
|
||||
.token.keyword {
|
||||
color: #07a;
|
||||
}
|
||||
|
||||
.token.function,
|
||||
.token.class-name {
|
||||
color: #DD4A68;
|
||||
}
|
||||
|
||||
.token.regex,
|
||||
.token.important,
|
||||
.token.variable {
|
||||
color: #e90;
|
||||
}
|
||||
|
||||
.token.important,
|
||||
.token.bold {
|
||||
font-weight: bold;
|
||||
}
|
||||
.token.italic {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.token.entity {
|
||||
cursor: help;
|
||||
}
|
@ -1,5 +1,4 @@
|
||||
/* Anchors */
|
||||
|
||||
h1:hover .anchor:before,
|
||||
h2:hover .anchor:before,
|
||||
h3:hover .anchor:before,
|
||||
@ -15,6 +14,20 @@ h6:hover .anchor:before {
|
||||
mask-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' version='1.1' aria-hidden='true'><path fill-rule='evenodd' d='M7.775 3.275a.75.75 0 001.06 1.06l1.25-1.25a2 2 0 112.83 2.83l-2.5 2.5a2 2 0 01-2.83 0 .75.75 0 00-1.06 1.06 3.5 3.5 0 004.95 0l2.5-2.5a3.5 3.5 0 00-4.95-4.95l-1.25 1.25zm-4.69 9.64a2 2 0 010-2.83l2.5-2.5a2 2 0 012.83 0 .75.75 0 001.06-1.06 3.5 3.5 0 00-4.95 0l-2.5 2.5a3.5 3.5 0 004.95 4.95l1.25-1.25a.75.75 0 00-1.06-1.06l-1.25 1.25a2 2 0 01-2.83 0z'></path></svg>");
|
||||
}
|
||||
|
||||
/* Editor */
|
||||
header:hover .edit:before {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
content: ' ';
|
||||
display: inline-block;
|
||||
background-color: currentColor;
|
||||
-webkit-mask-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="16" height="16" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="m19.3 8.925l-4.25-4.2l1.4-1.4q.575-.575 1.413-.575t1.412.575l1.4 1.4q.575.575.6 1.388t-.55 1.387L19.3 8.925ZM17.85 10.4L7.25 21H3v-4.25l10.6-10.6l4.25 4.25Z"%2F%3E%3C%2Fsvg%3E');
|
||||
mask-image: url('data:image/svg+xml,%3Csvg xmlns="http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg" width="16" height="16" viewBox="0 0 24 24"%3E%3Cpath fill="currentColor" d="m19.3 8.925l-4.25-4.2l1.4-1.4q.575-.575 1.413-.575t1.412.575l1.4 1.4q.575.575.6 1.388t-.55 1.387L19.3 8.925ZM17.85 10.4L7.25 21H3v-4.25l10.6-10.6l4.25 4.25Z"%2F%3E%3C%2Fsvg%3E');
|
||||
}
|
||||
|
||||
.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Fences */
|
||||
|
||||
|
474
assets/css/toastui-dark.css
Normal file
474
assets/css/toastui-dark.css
Normal file
@ -0,0 +1,474 @@
|
||||
@charset "utf-8";
|
||||
.toastui-editor-dark.toastui-editor-defaultUI {
|
||||
border-color: #494c56;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-container,
|
||||
.toastui-editor-dark .toastui-editor-ww-container {
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar {
|
||||
background-color: #232428;
|
||||
border-bottom-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-toolbar-icons {
|
||||
background-position-y: -49px;
|
||||
border-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-toolbar-icons:not(:disabled):hover {
|
||||
background-color: #36383f;
|
||||
border-color: #36383f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-toolbar-divider {
|
||||
background-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-tooltip {
|
||||
background-color: #535662;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-tooltip .arrow {
|
||||
background-color: #535662;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync::before {
|
||||
color: #8f939f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .scroll-sync.active::before {
|
||||
color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch {
|
||||
background-color: #2b4455;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch {
|
||||
background-color: #2b4455;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar .switch::before {
|
||||
background-color: #8f939f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-defaultUI-toolbar input:checked + .switch::before {
|
||||
background-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-main .toastui-editor-md-splitter {
|
||||
background-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-mode-switch {
|
||||
border-top-color: #393b42;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-mode-switch .tab-item {
|
||||
border-color: #393b42;
|
||||
background-color: #232428;
|
||||
color: #757a86;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-mode-switch .tab-item.active {
|
||||
border-top-color: #121212;
|
||||
background-color: #121212;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup,
|
||||
.toastui-editor-dark .toastui-editor-context-menu {
|
||||
background-color: #121212;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
border-color: #494c56;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-heading ul li:hover {
|
||||
background-color: #36383f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body label {
|
||||
color: #9a9da3;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body input[type='text'] {
|
||||
background-color: transparent;
|
||||
color: #eee;
|
||||
border-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body input[type='text']:focus {
|
||||
outline-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body input[type='text'].disabled {
|
||||
color: #969aa5;
|
||||
border-color: #303238;
|
||||
background-color: rgba(48, 50, 56, 0.4);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item {
|
||||
border-bottom-color: #292e37;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item:hover {
|
||||
border-bottom-color: #3c424d;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-image .toastui-editor-tabs .tab-item.active {
|
||||
color: #67ccff;
|
||||
border-bottom-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-name {
|
||||
border-color: #303238;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button {
|
||||
border-color: #303238;
|
||||
background-color: #232428;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body .toastui-editor-file-select-button:hover {
|
||||
border-color: #494c56;
|
||||
}
|
||||
|
||||
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button {
|
||||
color: #eee;
|
||||
border-color: #303238;
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-close-button:hover {
|
||||
border-color: #494c56;
|
||||
}
|
||||
|
||||
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button {
|
||||
color: #121212;
|
||||
background-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark.toastui-editor-defaultUI .toastui-editor-ok-button:hover {
|
||||
color: #121212;
|
||||
background-color: #32baff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell {
|
||||
border-color: #303238;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-cell.header {
|
||||
border-color: #303238;
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-selection-layer {
|
||||
border-color: rgba(103, 204, 255, 0.4);
|
||||
background-color: rgba(103, 204, 255, 0.1);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-add-table .toastui-editor-table-description {
|
||||
color: #eee
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-tab-container {
|
||||
background-color: #232428;
|
||||
border-bottom-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-tab-container .tab-item {
|
||||
border-color: #393b42;
|
||||
background-color: #2d2f34;
|
||||
color: #757a86;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-tab-container .tab-item.active {
|
||||
border-bottom-color: #121212;
|
||||
background-color: #121212;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
|
||||
.toastui-editor-dark .toastui-editor-context-menu .menu-group {
|
||||
border-bottom-color: #303238;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-context-menu .menu-item span::before {
|
||||
background-position-y: -126px;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-context-menu li:not(.disabled):hover {
|
||||
background-color: #36383f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-context-menu li.disabled {
|
||||
color: #969aa5;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-dropdown-toolbar {
|
||||
border-color: #494c56;
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .ProseMirror,
|
||||
.toastui-editor-dark .toastui-editor-contents p,
|
||||
.toastui-editor-dark .toastui-editor-contents h1,
|
||||
.toastui-editor-dark .toastui-editor-contents h2,
|
||||
.toastui-editor-dark .toastui-editor-contents h3,
|
||||
.toastui-editor-dark .toastui-editor-contents h4,
|
||||
.toastui-editor-dark .toastui-editor-contents h5,
|
||||
.toastui-editor-dark .toastui-editor-contents h6 {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents h1,
|
||||
.toastui-editor-dark .toastui-editor-contents h2 {
|
||||
border-color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents del {
|
||||
color: #777980;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents blockquote {
|
||||
border-color: #303135;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents blockquote p,
|
||||
.toastui-editor-dark .toastui-editor-contents blockquote ul,
|
||||
.toastui-editor-dark .toastui-editor-contents blockquote ol {
|
||||
color: #777980;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents pre {
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents pre code {
|
||||
background-color: transparent;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents code {
|
||||
color: #c1798b;
|
||||
background-color: #35262a;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents div {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-ww-code-block-language {
|
||||
border-color: #303238;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-ww-code-block-language input {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .toastui-editor-ww-code-block:after {
|
||||
background-color: #232428;
|
||||
border: 1px solid #393b42;
|
||||
color: #eee;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .toastui-editor-custom-block-editor {
|
||||
background: #392d31;
|
||||
color: #fff;
|
||||
border-color: #327491;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-custom-block.ProseMirror-selectednode .toastui-editor-custom-block-view {
|
||||
color: #fff;
|
||||
border-color: #327491;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-custom-block-view button {
|
||||
background-color: #232428;
|
||||
border-color: #393b42;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-custom-block-view button:hover {
|
||||
background-color: #232428;
|
||||
border-color: #595c68;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-custom-block-view .info {
|
||||
color: #65acca;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents table {
|
||||
border-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents table th,
|
||||
.toastui-editor-dark .toastui-editor-contents table td {
|
||||
border-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents table th {
|
||||
background-color: #3a3c42;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents table td,
|
||||
.toastui-editor-dark .toastui-editor-contents table td p {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents td.toastui-editor-cell-selected {
|
||||
background-color: rgba(103, 204, 255, 0.5);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-cell-selected {
|
||||
background-color: rgba(103, 204, 255, 0.3);
|
||||
}
|
||||
|
||||
.toastui-editor-dark table.ProseMirror-selectednode {
|
||||
outline-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .html-block.ProseMirror-selectednode {
|
||||
outline-color: #67ccff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents ul,
|
||||
.toastui-editor-dark .toastui-editor-contents menu,
|
||||
.toastui-editor-dark .toastui-editor-contents ol,
|
||||
.toastui-editor-dark .toastui-editor-contents dir {
|
||||
color: #55575f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents ul > li::before {
|
||||
background-color: #55575f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents hr {
|
||||
border-color: #55575f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents a {
|
||||
color: #4b96e6;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents a:hover {
|
||||
color: #1f70de;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .image-link:hover::before {
|
||||
border-color: #393b42;
|
||||
background-color: #232428;
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIj4KICAgICAgICA8ZyBzdHJva2U9IiNFRUUiIHN0cm9rZS13aWR0aD0iMS41Ij4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNy42NjUgMTUuMDdsLTEuODE5LS4wMDJjLTEuNDg2IDAtMi42OTItMS4yMjgtMi42OTItMi43NDR2LS4xOTJjMC0xLjUxNSAxLjIwNi0yLjc0NCAyLjY5Mi0yLjc0NGgzLjg0NmMxLjQ4NyAwIDIuNjkyIDEuMjI5IDIuNjkyIDIuNzQ0di4xOTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzcuMjkzIDApIi8+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTEyLjMyNiA0LjkzNGwxLjgyMi4wMDJjMS40ODcgMCAyLjY5MyAxLjIyOCAyLjY5MyAyLjc0NHYuMTkyYzAgMS41MTUtMS4yMDYgMi43NDQtMi42OTMgMi43NDRoLTMuODQ1Yy0xLjQ4NyAwLTIuNjkyLTEuMjI5LTIuNjkyLTIuNzQ0VjcuNjgiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMDQ1IC0xNzQzKSB0cmFuc2xhdGUoMTA0MCAxNzM4KSB0cmFuc2xhdGUoNSA1KSBzY2FsZSgxIC0xKSByb3RhdGUoNDUgMzAuOTk2IDApIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=');
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .task-list-item::before {
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgc3Ryb2tlPSIjNTU1NzVGIj4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMTAzMCAtMzE2KSB0cmFuc2xhdGUoNzg4IDE5MikgdHJhbnNsYXRlKDI0MiAxMjQpIj4KICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iMTciIGhlaWdodD0iMTciIHg9Ii41IiB5PSIuNSIgcng9IjIiLz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgPC9nPgogICAgICAgIDwvZz4KICAgIDwvZz4KPC9zdmc+Cg==');
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .task-list-item.checked::before {
|
||||
background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4KICAgIDxnIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgZmlsbD0iIzRCOTZFNiI+CiAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgPHBhdGggZD0iTTE2IDBjMS4xMDUgMCAyIC44OTUgMiAydjE0YzAgMS4xMDUtLjg5NSAyLTIgMkgyYy0xLjEwNSAwLTItLjg5NS0yLTJWMkMwIC44OTUuODk1IDAgMiAwaDE0em0tMS43OTMgNS4yOTNjLS4zOS0uMzktMS4wMjQtLjM5LTEuNDE0IDBMNy41IDEwLjU4NSA1LjIwNyA4LjI5M2wtLjA5NC0uMDgzYy0uMzkyLS4zMDUtLjk2LS4yNzgtMS4zMi4wODMtLjM5LjM5LS4zOSAxLjAyNCAwIDEuNDE0bDMgMyAuMDk0LjA4M2MuMzkyLjMwNS45Ni4yNzggMS4zMi0uMDgzbDYtNiAuMDgzLS4wOTRjLjMwNS0uMzkyLjI3OC0uOTYtLjA4My0xLjMyeiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTEwNTAgLTI5NikgdHJhbnNsYXRlKDc4OCAxOTIpIHRyYW5zbGF0ZSgyNjIgMTA0KSIvPgogICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K');
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-delimiter,
|
||||
.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-delimiter,
|
||||
.toastui-editor-dark .toastui-editor-md-thematic-break,
|
||||
.toastui-editor-dark .toastui-editor-md-link,
|
||||
.toastui-editor-dark .toastui-editor-md-table,
|
||||
.toastui-editor-dark .toastui-editor-md-block-quote {
|
||||
color: #55575f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-meta,
|
||||
.toastui-editor-dark .toastui-editor-md-html {
|
||||
color: #55575f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-url.toastui-editor-md-marked-text {
|
||||
color: #777980;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-block-quote .toastui-editor-md-marked-text,
|
||||
.toastui-editor-dark .toastui-editor-md-list-item .toastui-editor-md-meta {
|
||||
color: #b3b5bc;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-link.toastui-editor-md-link-desc.toastui-editor-md-marked-text,
|
||||
.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-odd {
|
||||
color: #4b96e6;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-list-item-style.toastui-editor-md-list-item-even {
|
||||
color: #ef6767;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-table .toastui-editor-md-table-cell {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-code.toastui-editor-md-marked-text {
|
||||
color: #c1798b;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-code {
|
||||
background-color: #35262a;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-code-block-line-background {
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-code-block .toastui-editor-md-meta {
|
||||
color: #aaa;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-custom-block {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-custom-block-line-background {
|
||||
background-color: #392d31;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-delimiter {
|
||||
color: #327491;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-md-custom-block .toastui-editor-md-meta {
|
||||
color: #65acca;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
|
||||
background-color: rgba(255, 250, 193, 0.5);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
|
||||
.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
|
||||
background-color: rgba(255, 250, 193, 0.5);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents th.toastui-editor-md-preview-highlight,
|
||||
.toastui-editor-dark .toastui-editor-contents td.toastui-editor-md-preview-highlight {
|
||||
background-color: rgba(255, 250, 193, 0.25);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-contents .toastui-editor-md-preview-highlight::after {
|
||||
background-color: rgba(255, 250, 193, 0.25);
|
||||
}
|
171
assets/css/toastui-editor-plugin-code-syntax-highlight.css
Normal file
171
assets/css/toastui-editor-plugin-code-syntax-highlight.css
Normal file
@ -0,0 +1,171 @@
|
||||
/*!
|
||||
* TOAST UI Editor : Code Syntax Highlight Plugin
|
||||
* @version 3.0.0 | Thu Jun 17 2021
|
||||
* @author NHN FE Development Lab <dl_javascript@nhn.com>
|
||||
* @license MIT
|
||||
*/
|
||||
/* prevent to create draggable box in IE with prism */
|
||||
pre[class*="language-"] {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.toastui-editor-ww-code-block-highlighting {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.toastui-editor-ww-code-block-highlighting:after {
|
||||
content: attr(data-language);
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
height: 24px;
|
||||
padding: 3px 30px 0 10px;
|
||||
font-weight: bold;
|
||||
font-size: 13px;
|
||||
color: #333;
|
||||
background-color: #e5e9ea;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzU1NTU1NTt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
|
||||
background-repeat: no-repeat;
|
||||
background-position: right;
|
||||
background-size: 30px 30px;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language {
|
||||
position: fixed;
|
||||
display: inline-block;
|
||||
right: 35px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language-input {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
padding: 0 22px 0 10px;
|
||||
width: 112px;
|
||||
height: 26px;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 2px;
|
||||
background-color: #fff;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language-input input {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
color: #222;
|
||||
border: none;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language-input input::placeholder {
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language-input input::-ms-clear {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language .toastui-editor-code-block-language-input::after {
|
||||
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIgMTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyIDE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzIyMjIyMjt9Cjwvc3R5bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBza2V0Y2h0b29sLjwvZGVzYz4KPGcgaWQ9IlN5bWJvbHMiPgoJPGcgaWQ9ImNvbS10cmFuZ2xlLWQtc2lkZSI+CgkJPHBvbHlnb24gaWQ9IlJlY3RhbmdsZS03IiBjbGFzcz0ic3QwIiBwb2ludHM9IjIsNSAxMCw1IDYsMTAgCQkiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K');
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 7px;
|
||||
right: 5px;
|
||||
width: 12px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language.active .toastui-editor-code-block-language-input::after {
|
||||
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIgMTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyIDE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6IzIyMjIyMjt9Cjwvc3R5bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBza2V0Y2h0b29sLjwvZGVzYz4KPGcgaWQ9IlN5bWJvbHMiPgoJPGcgaWQ9ImNvbS10cmFuZ2xlLXVwLXNpZGUiPgoJCTxwb2x5Z29uIGlkPSJSZWN0YW5nbGUtNyIgY2xhc3M9InN0MCIgcG9pbnRzPSIyLDkgMTAsOSA2LDQgCQkiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K');
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language-list {
|
||||
position: fixed;
|
||||
margin-top: -1px;
|
||||
width: 144px;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-left-radius: 2px;
|
||||
border-bottom-right-radius: 2px;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language-list .buttons {
|
||||
max-height: 169px;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language-list button {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
border: none;
|
||||
outline: 0;
|
||||
padding: 0 10px;
|
||||
font-size: 13px;
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
color: #222;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language-list button.active {
|
||||
color: #4b96e6;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.toastui-editor-code-block-language-list button:hover {
|
||||
background-color: #f4f7f8;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-code-block-language-input input::placeholder {
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-ww-code-block-highlighting:after {
|
||||
background-color: #232428;
|
||||
border: 1px solid #393b42;
|
||||
color: #eee;
|
||||
background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMzAgMzAiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDMwIDMwOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxnPgoJPGc+CgkJPGc+CgkJCTxnPgoJCQkJPGc+CgkJCQkJPHBhdGggY2xhc3M9InN0MCIgZD0iTTE1LjUsMTIuNWwyLDJMMTIsMjBoLTJ2LTJMMTUuNSwxMi41eiBNMTgsMTBsMiwybC0xLjUsMS41bC0yLTJMMTgsMTB6Ii8+CgkJCQk8L2c+CgkJCTwvZz4KCQk8L2c+Cgk8L2c+CjwvZz4KPC9zdmc+Cg==');
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-code-block-language span {
|
||||
border: 1px solid #494c56;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-code-block-language input {
|
||||
background-color: #121212;
|
||||
color: #eee;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-code-block-language-list {
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.08);
|
||||
border: 1px solid #494c56;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-code-block-language-list button {
|
||||
color: #eee;
|
||||
background-color: #121212;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-code-block-language-list button.active {
|
||||
color: #4b96e6;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-code-block-language-list button:hover {
|
||||
background-color: #36383f;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-code-block-language .toastui-editor-code-block-language-input::after {
|
||||
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIgMTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyIDE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBza2V0Y2h0b29sLjwvZGVzYz4KPGcgaWQ9IlN5bWJvbHMiPgoJPGcgaWQ9ImNvbS10cmFuZ2xlLWQtc2lkZSI+CgkJPHBvbHlnb24gaWQ9IlJlY3RhbmdsZS03IiBjbGFzcz0ic3QwIiBwb2ludHM9IjIsNSAxMCw1IDYsMTAgCQkiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K');
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-code-block-language.active .toastui-editor-code-block-language-input::after {
|
||||
content: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDI1LjIuMCwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IuugiOydtOyWtF8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiCgkgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTIgMTQiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDEyIDE0OyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+CjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI+Cgkuc3Qwe2ZpbGwtcnVsZTpldmVub2RkO2NsaXAtcnVsZTpldmVub2RkO2ZpbGw6I2ZmZjt9Cjwvc3R5bGU+CjxkZXNjPkNyZWF0ZWQgd2l0aCBza2V0Y2h0b29sLjwvZGVzYz4KPGcgaWQ9IlN5bWJvbHMiPgoJPGcgaWQ9ImNvbS10cmFuZ2xlLXVwLXNpZGUiPgoJCTxwb2x5Z29uIGlkPSJSZWN0YW5nbGUtNyIgY2xhc3M9InN0MCIgcG9pbnRzPSIyLDkgMTAsOSA2LDQgCQkiLz4KCTwvZz4KPC9nPgo8L3N2Zz4K');
|
||||
}
|
140
assets/css/toastui-editor-plugin-color-syntax.css
Normal file
140
assets/css/toastui-editor-plugin-color-syntax.css
Normal file
@ -0,0 +1,140 @@
|
||||
/*!
|
||||
* TOAST UI Editor : Color Syntax Plugin
|
||||
* @version 3.0.3 | Thu Apr 14 2022
|
||||
* @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
|
||||
* @license MIT
|
||||
*/
|
||||
|
||||
.toastui-editor-popup-color {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-container,
|
||||
.toastui-editor-popup-color .tui-colorpicker-palette-container {
|
||||
width: 147px;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-container ul {
|
||||
width: 152px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-container li {
|
||||
padding: 0 3px 3px 0;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-container li .tui-colorpicker-palette-button {
|
||||
border: solid 1px rgba(0, 0, 0, 0.1);
|
||||
border-radius: 50%;
|
||||
box-sizing: border-box;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-popup-body {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-toggle-slider {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-svg-slider {
|
||||
border-radius: 3px;
|
||||
border: solid 1px rgba(0, 0, 0, 0.05);
|
||||
}
|
||||
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-palette-hex {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-body input[type='text'].tui-colorpicker-palette-hex {
|
||||
font-family: inherit;
|
||||
font-size: 13px;
|
||||
height: 24px;
|
||||
width: 65px;
|
||||
padding: 3px 25px 3px 10px;
|
||||
border: 1px solid #e1e3e9;
|
||||
border-radius: 2px;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color button {
|
||||
height: 32px;
|
||||
width: 40px;
|
||||
color: #555;
|
||||
background: #f7f9fc;
|
||||
border: 1px solid #e1e3e9;
|
||||
top: 68px;
|
||||
position: absolute;
|
||||
right: 15px;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color button:hover {
|
||||
border-color: #cbcfdb;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-container div.tui-colorpicker-clearfix {
|
||||
display: inline-block;
|
||||
margin: 5px 0;
|
||||
width: 102px;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-palette-preview {
|
||||
margin-top: 8px;
|
||||
margin-left: -22px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 50%;
|
||||
border: solid 1px rgba(0, 0, 0, 0.1);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-slider-right {
|
||||
width: 19px;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-svg-huebar {
|
||||
border: solid 1px rgba(0, 0, 0, 0.05);
|
||||
border-radius: 3px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-huebar-handle {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.toastui-editor-toolbar-icons.color {
|
||||
background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIxMTYiIHZpZXdCb3g9IjAgMCAyNCAxMTYiPgogICAgPGcgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4KICAgICAgICA8Zz4KICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICA8Zz4KICAgICAgICAgICAgICAgICAgICA8ZyB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjAwIC0xOTIpIHRyYW5zbGF0ZSg2MDAgMTkyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjNTU1IiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiM1NTUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZBMjgyOCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDAgLTE5MikgdHJhbnNsYXRlKDYwMCAxOTIpIHRyYW5zbGF0ZSgwIDUyKSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjRUVFIiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiNFRUUiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZGNDg0OCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDAgLTE5MikgdHJhbnNsYXRlKDYwMCAxOTIpIHRyYW5zbGF0ZSgwIDI2KSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjMDBBOUZGIiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiMwMEE5RkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZBMjgyOCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnPgogICAgICAgICAgICAgICAgICAgIDxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKC02MDAgLTE5MikgdHJhbnNsYXRlKDYwMCAxOTIpIHRyYW5zbGF0ZSgwIDc4KSI+CiAgICAgICAgICAgICAgICAgICAgICAgIDxwYXRoIGQ9Ik0wIDBIMjRWMjRIMHoiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPGc+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBmaWxsPSIjNjdDQ0ZGIiBkPSJNMiA4LjI1TDEwIDguMjUgMTAgOS43NSAyIDkuNzV6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2IDQuNzUpIi8+CiAgICAgICAgICAgICAgICAgICAgICAgICAgICA8cGF0aCBzdHJva2U9IiM2N0NDRkYiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgc3Ryb2tlLXdpZHRoPSIxLjUiIGQ9Ik0wIDE0LjVMNiAwIDEyIDE0LjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDYgNC43NSkiLz4KICAgICAgICAgICAgICAgICAgICAgICAgPC9nPgogICAgICAgICAgICAgICAgICAgICAgICA8cmVjdCB3aWR0aD0iNSIgaGVpZ2h0PSI1IiB4PSIxOCIgeT0iNCIgZmlsbD0iI0ZGNDg0OCIgcng9IjIuNSIvPgogICAgICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDwvZz4KICAgICAgICAgICAgICAgIDxnIGZpbGw9IiNGRkYiIHN0cm9rZT0iIzAwMCIgc3Ryb2tlLW9wYWNpdHk9Ii4yIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNiAuNWMxLjUxOSAwIDIuODk0LjYxNiAzLjg5IDEuNjEuOTk0Ljk5NiAxLjYxIDIuMzcxIDEuNjEgMy44OSAwIDEuNTE5LS42MTYgMi44OTQtMS42MSAzLjg5LS45OTYuOTk0LTIuMzcxIDEuNjEtMy44OSAxLjYxLTEuNTE5IDAtMi44OTQtLjYxNi0zLjg5LTEuNjFDMS4xMTcgOC44OTMuNSA3LjUxOC41IDZjMC0xLjUxOS42MTYtMi44OTQgMS42MS0zLjg5QzMuMTA3IDEuMTE3IDQuNDgyLjUgNiAuNXpNNiAzYy0uODI4IDAtMS41NzguMzM2LTIuMTIxLjg3OUMzLjMzNiA0LjQyMiAzIDUuMTcyIDMgNmMwIC44MjguMzM2IDEuNTc4Ljg3OSAyLjEyMUM0LjQyMiA4LjY2NCA1LjE3MiA5IDYgOWMuODI4IDAgMS41NzgtLjMzNiAyLjEyMS0uODc5QzguNjY0IDcuNTc4IDkgNi44MjggOSA2YzAtLjgyOC0uMzM2LTEuNTc4LS44NzktMi4xMjFDNy41NzggMy4zMzYgNi44MjggMyA2IDN6IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtNjAwIC0xOTIpIHRyYW5zbGF0ZSg2MDAgMTkyKSB0cmFuc2xhdGUoMCAxMDQpIi8+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=);
|
||||
background-size: 23px 112px;
|
||||
background-position: 3px 3px;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-toolbar-icons.color {
|
||||
background-position-y: -47px;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-body input[type='text'].tui-colorpicker-palette-hex {
|
||||
border-color: #303238;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-color button {
|
||||
color: #eee;
|
||||
border-color: #303238;
|
||||
background-color: #232428;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-color button:hover {
|
||||
border-color: #494c56;
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-container li .tui-colorpicker-palette-button {
|
||||
border-color: rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-container .tui-colorpicker-svg-slider,
|
||||
.toastui-editor-dark .toastui-editor-popup-color .tui-colorpicker-slider-container .tui-colorpicker-svg-huebar {
|
||||
border-color: rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
6
assets/css/toastui.css
Normal file
6
assets/css/toastui.css
Normal file
File diff suppressed because one or more lines are too long
154
assets/css/tui-color-picker.css
Normal file
154
assets/css/tui-color-picker.css
Normal file
@ -0,0 +1,154 @@
|
||||
/*!
|
||||
* TOAST UI Color Picker
|
||||
* @version 2.2.8
|
||||
* @author NHN Cloud FE Development Team <dl_javascript@nhn.com>
|
||||
* @license MIT
|
||||
*/
|
||||
.tui-colorpicker-clearfix {
|
||||
zoom: 1;
|
||||
}
|
||||
.tui-colorpicker-clearfix:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.tui-colorpicker-vml {
|
||||
behavior: url("#default#VML");
|
||||
display: block;
|
||||
}
|
||||
.tui-colorpicker-container {
|
||||
width: 152px;
|
||||
}
|
||||
.tui-colorpicker-palette-container {
|
||||
width: 152px;
|
||||
}
|
||||
.tui-colorpicker-palette-container ul {
|
||||
width: 152px;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
}
|
||||
.tui-colorpicker-palette-container li {
|
||||
float: left;
|
||||
margin: 0;
|
||||
padding: 0 3px 3px 0;
|
||||
list-style: none;
|
||||
}
|
||||
.tui-colorpicker-palette-button {
|
||||
display: block;
|
||||
border: none;
|
||||
overflow: hidden;
|
||||
outline: none;
|
||||
margin: 0px;
|
||||
padding: 0px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 1px solid #ccc;
|
||||
cursor: pointer;
|
||||
}
|
||||
.tui-colorpicker-palette-button.tui-colorpicker-selected {
|
||||
border: 2px solid #000;
|
||||
}
|
||||
.tui-colorpicker-palette-button.tui-colorpicker-color-transparent {
|
||||
barckground-repeat: repeat;
|
||||
background-repeat: no-repeat;
|
||||
background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAABfGlDQ1BJQ0MgUHJvZmlsZQAAKJFjYGAqSSwoyGFhYGDIzSspCnJ3UoiIjFJgv8PAzcDDIMRgxSCemFxc4BgQ4MOAE3y7xsAIoi/rgsxK8/x506a1fP4WNq+ZclYlOrj1gQF3SmpxMgMDIweQnZxSnJwLZOcA2TrJBUUlQPYMIFu3vKQAxD4BZIsUAR0IZN8BsdMh7A8gdhKYzcQCVhMS5AxkSwDZAkkQtgaInQ5hW4DYyRmJKUC2B8guiBvAgNPDRcHcwFLXkYC7SQa5OaUwO0ChxZOaFxoMcgcQyzB4MLgwKDCYMxgwWDLoMjiWpFaUgBQ65xdUFmWmZ5QoOAJDNlXBOT+3oLQktUhHwTMvWU9HwcjA0ACkDhRnEKM/B4FNZxQ7jxDLX8jAYKnMwMDcgxBLmsbAsH0PA4PEKYSYyjwGBn5rBoZt5woSixLhDmf8xkKIX5xmbARh8zgxMLDe+///sxoDA/skBoa/E////73o//+/i4H2A+PsQA4AJHdp4IxrEg8AAAGbaVRYdFhNTDpjb20uYWRvYmUueG1wAAAAAAA8eDp4bXBtZXRhIHhtbG5zOng9ImFkb2JlOm5zOm1ldGEvIiB4OnhtcHRrPSJYTVAgQ29yZSA1LjQuMCI+CiAgIDxyZGY6UkRGIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyI+CiAgICAgIDxyZGY6RGVzY3JpcHRpb24gcmRmOmFib3V0PSIiCiAgICAgICAgICAgIHhtbG5zOmV4aWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20vZXhpZi8xLjAvIj4KICAgICAgICAgPGV4aWY6UGl4ZWxYRGltZW5zaW9uPjEzPC9leGlmOlBpeGVsWERpbWVuc2lvbj4KICAgICAgICAgPGV4aWY6UGl4ZWxZRGltZW5zaW9uPjE0PC9leGlmOlBpeGVsWURpbWVuc2lvbj4KICAgICAgPC9yZGY6RGVzY3JpcHRpb24+CiAgIDwvcmRmOlJERj4KPC94OnhtcG1ldGE+CghrN1AAAABzSURBVCgVldKxEYAgDAXQD5VOpLuwgi4jlrTMqF00oOd5Aia/CcV/F4oYOgNlrLjvVyCEVJchBjEC25538PeaWTzRMBLxvIL7UZwFwL06qoA6aoAy+gFfJABvJAQPUoCMlICRRd8BzgHzJL4ok9aJ67l4AK9AxVKhHryUAAAAAElFTkSuQmCC");
|
||||
}
|
||||
.tui-colorpicker-palette-hex {
|
||||
font-family: monospace;
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
width: 60px;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.tui-colorpicker-palette-preview {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border: 1px solid #ccc;
|
||||
border: 1px solid #ccc;
|
||||
vertical-align: middle;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tui-colorpicker-palette-toggle-slider {
|
||||
display: inline-block;
|
||||
*display: inline;
|
||||
zoom: 1;
|
||||
vertical-align: middle;
|
||||
float: right;
|
||||
}
|
||||
.tui-colorpicker-slider-container {
|
||||
margin: 5px 0 0 0;
|
||||
height: 122px;
|
||||
zoom: 1;
|
||||
}
|
||||
.tui-colorpicker-slider-container:after {
|
||||
content: '';
|
||||
display: block;
|
||||
clear: both;
|
||||
}
|
||||
.tui-colorpicker-slider-left {
|
||||
float: left;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
.tui-colorpicker-slider-right {
|
||||
float: right;
|
||||
width: 32px;
|
||||
height: 120px;
|
||||
}
|
||||
.tui-colorpicker-svg {
|
||||
display: block;
|
||||
}
|
||||
.tui-colorpicker-slider-handle {
|
||||
position: absolute;
|
||||
overflow: visible;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
z-index: 2;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.tui-colorpicker-svg-slider {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border: 1px solid #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tui-colorpicker-vml-slider {
|
||||
position: relative;
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
border: 1px solid #ccc;
|
||||
overflow: hidden;
|
||||
}
|
||||
.tui-colorpicker-vml-slider-bg {
|
||||
position: absolute;
|
||||
margin: -1px 0 0 -1px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 122px;
|
||||
height: 122px;
|
||||
}
|
||||
.tui-colorpicker-svg-huebar {
|
||||
float: right;
|
||||
width: 18px;
|
||||
height: 120px;
|
||||
border: 1px solid #ccc;
|
||||
overflow: visible;
|
||||
}
|
||||
.tui-colorpicker-vml-huebar {
|
||||
width: 32px;
|
||||
position: relative;
|
||||
}
|
||||
.tui-colorpicker-vml-huebar-bg {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
width: 18px;
|
||||
height: 121px;
|
||||
}
|
||||
|
19539
assets/js/toastui-editor-plugin-code-syntax-highlight.js
Normal file
19539
assets/js/toastui-editor-plugin-code-syntax-highlight.js
Normal file
File diff suppressed because one or more lines are too long
312
assets/js/toastui-editor-plugin-color-syntax.js
Normal file
312
assets/js/toastui-editor-plugin-color-syntax.js
Normal file
@ -0,0 +1,312 @@
|
||||
/*!
|
||||
* TOAST UI Editor : Color Syntax Plugin
|
||||
* @version 3.0.3 | Thu Apr 14 2022
|
||||
* @author NHN Cloud FE Development Lab <dl_javascript@nhn.com>
|
||||
* @license MIT
|
||||
*/
|
||||
(function webpackUniversalModuleDefinition(root, factory) {
|
||||
if(typeof exports === 'object' && typeof module === 'object')
|
||||
module.exports = factory(require("tui-color-picker"));
|
||||
else if(typeof define === 'function' && define.amd)
|
||||
define(["tui-color-picker"], factory);
|
||||
else if(typeof exports === 'object')
|
||||
exports["toastui"] = factory(require("tui-color-picker"));
|
||||
else
|
||||
root["toastui"] = root["toastui"] || {}, root["toastui"]["Editor"] = root["toastui"]["Editor"] || {}, root["toastui"]["Editor"]["plugin"] = root["toastui"]["Editor"]["plugin"] || {}, root["toastui"]["Editor"]["plugin"]["colorSyntax"] = factory(root["tui"]["colorPicker"]);
|
||||
})(self, function(__WEBPACK_EXTERNAL_MODULE__858__) {
|
||||
return /******/ (function() { // webpackBootstrap
|
||||
/******/ "use strict";
|
||||
/******/ var __webpack_modules__ = ({
|
||||
|
||||
/***/ 858:
|
||||
/***/ (function(module) {
|
||||
|
||||
module.exports = __WEBPACK_EXTERNAL_MODULE__858__;
|
||||
|
||||
/***/ })
|
||||
|
||||
/******/ });
|
||||
/************************************************************************/
|
||||
/******/ // The module cache
|
||||
/******/ var __webpack_module_cache__ = {};
|
||||
/******/
|
||||
/******/ // The require function
|
||||
/******/ function __webpack_require__(moduleId) {
|
||||
/******/ // Check if module is in cache
|
||||
/******/ var cachedModule = __webpack_module_cache__[moduleId];
|
||||
/******/ if (cachedModule !== undefined) {
|
||||
/******/ return cachedModule.exports;
|
||||
/******/ }
|
||||
/******/ // Create a new module (and put it into the cache)
|
||||
/******/ var module = __webpack_module_cache__[moduleId] = {
|
||||
/******/ // no module.id needed
|
||||
/******/ // no module.loaded needed
|
||||
/******/ exports: {}
|
||||
/******/ };
|
||||
/******/
|
||||
/******/ // Execute the module function
|
||||
/******/ __webpack_modules__[moduleId](module, module.exports, __webpack_require__);
|
||||
/******/
|
||||
/******/ // Return the exports of the module
|
||||
/******/ return module.exports;
|
||||
/******/ }
|
||||
/******/
|
||||
/************************************************************************/
|
||||
/******/ /* webpack/runtime/compat get default export */
|
||||
/******/ !function() {
|
||||
/******/ // getDefaultExport function for compatibility with non-harmony modules
|
||||
/******/ __webpack_require__.n = function(module) {
|
||||
/******/ var getter = module && module.__esModule ?
|
||||
/******/ function() { return module['default']; } :
|
||||
/******/ function() { return module; };
|
||||
/******/ __webpack_require__.d(getter, { a: getter });
|
||||
/******/ return getter;
|
||||
/******/ };
|
||||
/******/ }();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/define property getters */
|
||||
/******/ !function() {
|
||||
/******/ // define getter functions for harmony exports
|
||||
/******/ __webpack_require__.d = function(exports, definition) {
|
||||
/******/ for(var key in definition) {
|
||||
/******/ if(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {
|
||||
/******/ Object.defineProperty(exports, key, { enumerable: true, get: definition[key] });
|
||||
/******/ }
|
||||
/******/ }
|
||||
/******/ };
|
||||
/******/ }();
|
||||
/******/
|
||||
/******/ /* webpack/runtime/hasOwnProperty shorthand */
|
||||
/******/ !function() {
|
||||
/******/ __webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }
|
||||
/******/ }();
|
||||
/******/
|
||||
/************************************************************************/
|
||||
var __webpack_exports__ = {};
|
||||
// This entry need to be wrapped in an IIFE because it need to be isolated against other modules in the chunk.
|
||||
!function() {
|
||||
|
||||
// EXPORTS
|
||||
__webpack_require__.d(__webpack_exports__, {
|
||||
"default": function() { return /* binding */ colorSyntaxPlugin; }
|
||||
});
|
||||
|
||||
// EXTERNAL MODULE: external {"commonjs":"tui-color-picker","commonjs2":"tui-color-picker","amd":"tui-color-picker","root":["tui","colorPicker"]}
|
||||
var external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_ = __webpack_require__(858);
|
||||
var external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_default = /*#__PURE__*/__webpack_require__.n(external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_);
|
||||
;// CONCATENATED MODULE: ./src/i18n/langs.ts
|
||||
function addLangs(i18n) {
|
||||
i18n.setLanguage('ar', {
|
||||
'Text color': 'لون النص',
|
||||
});
|
||||
i18n.setLanguage(['cs', 'cs-CZ'], {
|
||||
'Text color': 'Barva textu',
|
||||
});
|
||||
i18n.setLanguage(['de', 'de-DE'], {
|
||||
'Text color': 'Textfarbe',
|
||||
});
|
||||
i18n.setLanguage(['en', 'en-US'], {
|
||||
'Text color': 'Text color',
|
||||
});
|
||||
i18n.setLanguage(['es', 'es-ES'], {
|
||||
'Text color': 'Color del texto',
|
||||
});
|
||||
i18n.setLanguage(['fi', 'fi-FI'], {
|
||||
'Text color': 'Tekstin väri',
|
||||
});
|
||||
i18n.setLanguage(['fr', 'fr-FR'], {
|
||||
'Text color': 'Couleur du texte',
|
||||
});
|
||||
i18n.setLanguage(['gl', 'gl-ES'], {
|
||||
'Text color': 'Cor do texto',
|
||||
});
|
||||
i18n.setLanguage(['hr', 'hr-HR'], {
|
||||
'Text color': 'Boja teksta',
|
||||
});
|
||||
i18n.setLanguage(['it', 'it-IT'], {
|
||||
'Text color': 'Colore del testo',
|
||||
});
|
||||
i18n.setLanguage(['ja', 'ja-JP'], {
|
||||
'Text color': '文字色相',
|
||||
});
|
||||
i18n.setLanguage(['ko', 'ko-KR'], {
|
||||
'Text color': '글자 색상',
|
||||
});
|
||||
i18n.setLanguage(['nb', 'nb-NO'], {
|
||||
'Text color': 'Tekstfarge',
|
||||
});
|
||||
i18n.setLanguage(['nl', 'nl-NL'], {
|
||||
'Text color': 'Tekstkleur',
|
||||
});
|
||||
i18n.setLanguage(['pl', 'pl-PL'], {
|
||||
'Text color': 'Kolor tekstu',
|
||||
});
|
||||
i18n.setLanguage(['pt', 'pt-BR'], {
|
||||
'Text color': 'Cor do texto',
|
||||
});
|
||||
i18n.setLanguage(['ru', 'ru-RU'], {
|
||||
'Text color': 'Цвет текста',
|
||||
});
|
||||
i18n.setLanguage(['sv', 'sv-SE'], {
|
||||
'Text color': 'Textfärg',
|
||||
});
|
||||
i18n.setLanguage(['tr', 'tr-TR'], {
|
||||
'Text color': 'Metin rengi',
|
||||
});
|
||||
i18n.setLanguage(['uk', 'uk-UA'], {
|
||||
'Text color': 'Колір тексту',
|
||||
});
|
||||
i18n.setLanguage('zh-CN', {
|
||||
'Text color': '文字颜色',
|
||||
});
|
||||
i18n.setLanguage('zh-TW', {
|
||||
'Text color': '文字顏色',
|
||||
});
|
||||
}
|
||||
|
||||
;// CONCATENATED MODULE: ./src/utils/dom.ts
|
||||
function hasClass(element, className) {
|
||||
return element.classList.contains(className);
|
||||
}
|
||||
function findParentByClassName(el, className) {
|
||||
var currentEl = el;
|
||||
while (currentEl && !hasClass(currentEl, className)) {
|
||||
currentEl = currentEl.parentElement;
|
||||
}
|
||||
return currentEl;
|
||||
}
|
||||
|
||||
;// CONCATENATED MODULE: ./src/index.ts
|
||||
|
||||
|
||||
|
||||
|
||||
var PREFIX = 'toastui-editor-';
|
||||
function createApplyButton(text) {
|
||||
var button = document.createElement('button');
|
||||
button.setAttribute('type', 'button');
|
||||
button.textContent = text;
|
||||
return button;
|
||||
}
|
||||
function createToolbarItemOption(colorPickerContainer, i18n) {
|
||||
return {
|
||||
name: 'color',
|
||||
tooltip: i18n.get('Text color'),
|
||||
className: PREFIX + "toolbar-icons color",
|
||||
popup: {
|
||||
className: PREFIX + "popup-color",
|
||||
body: colorPickerContainer,
|
||||
style: { width: 'auto' },
|
||||
},
|
||||
};
|
||||
}
|
||||
function createSelection(tr, selection, SelectionClass, openTag, closeTag) {
|
||||
var mapping = tr.mapping, doc = tr.doc;
|
||||
var from = selection.from, to = selection.to, empty = selection.empty;
|
||||
var mappedFrom = mapping.map(from) + openTag.length;
|
||||
var mappedTo = mapping.map(to) - closeTag.length;
|
||||
return empty
|
||||
? SelectionClass.create(doc, mappedTo, mappedTo)
|
||||
: SelectionClass.create(doc, mappedFrom, mappedTo);
|
||||
}
|
||||
function getCurrentEditorEl(colorPickerEl, containerClassName) {
|
||||
var editorDefaultEl = findParentByClassName(colorPickerEl, PREFIX + "defaultUI");
|
||||
return editorDefaultEl.querySelector("." + containerClassName + " .ProseMirror");
|
||||
}
|
||||
var containerClassName;
|
||||
var currentEditorEl;
|
||||
// @TODO: add custom syntax for plugin
|
||||
/**
|
||||
* Color syntax plugin
|
||||
* @param {Object} context - plugin context for communicating with editor
|
||||
* @param {Object} options - options for plugin
|
||||
* @param {Array.<string>} [options.preset] - preset for color palette (ex: ['#181818', '#292929'])
|
||||
* @param {boolean} [options.useCustomSyntax=false] - whether use custom syntax or not
|
||||
*/
|
||||
function colorSyntaxPlugin(context, options) {
|
||||
if (options === void 0) { options = {}; }
|
||||
var eventEmitter = context.eventEmitter, i18n = context.i18n, _a = context.usageStatistics, usageStatistics = _a === void 0 ? true : _a, pmState = context.pmState;
|
||||
var preset = options.preset;
|
||||
var container = document.createElement('div');
|
||||
var colorPickerOption = { container: container, usageStatistics: usageStatistics };
|
||||
addLangs(i18n);
|
||||
if (preset) {
|
||||
colorPickerOption.preset = preset;
|
||||
}
|
||||
var colorPicker = external_commonjs_tui_color_picker_commonjs2_tui_color_picker_amd_tui_color_picker_root_tui_colorPicker_default().create(colorPickerOption);
|
||||
var button = createApplyButton(i18n.get('OK'));
|
||||
eventEmitter.listen('focus', function (editType) {
|
||||
containerClassName = "" + PREFIX + (editType === 'markdown' ? 'md' : 'ww') + "-container";
|
||||
});
|
||||
container.addEventListener('click', function (ev) {
|
||||
if (ev.target.getAttribute('type') === 'button') {
|
||||
var selectedColor = colorPicker.getColor();
|
||||
currentEditorEl = getCurrentEditorEl(container, containerClassName);
|
||||
eventEmitter.emit('command', 'color', { selectedColor: selectedColor });
|
||||
eventEmitter.emit('closePopup');
|
||||
// force the current editor to focus for preventing to lose focus
|
||||
currentEditorEl.focus();
|
||||
}
|
||||
});
|
||||
colorPicker.slider.toggle(true);
|
||||
container.appendChild(button);
|
||||
var toolbarItem = createToolbarItemOption(container, i18n);
|
||||
return {
|
||||
markdownCommands: {
|
||||
color: function (_a, _b, dispatch) {
|
||||
var selectedColor = _a.selectedColor;
|
||||
var tr = _b.tr, selection = _b.selection, schema = _b.schema;
|
||||
if (selectedColor) {
|
||||
var slice = selection.content();
|
||||
var textContent = slice.content.textBetween(0, slice.content.size, '\n');
|
||||
var openTag = "<span style=\"color: " + selectedColor + "\">";
|
||||
var closeTag = "</span>";
|
||||
var colored = "" + openTag + textContent + closeTag;
|
||||
tr.replaceSelectionWith(schema.text(colored)).setSelection(createSelection(tr, selection, pmState.TextSelection, openTag, closeTag));
|
||||
dispatch(tr);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
wysiwygCommands: {
|
||||
color: function (_a, _b, dispatch) {
|
||||
var selectedColor = _a.selectedColor;
|
||||
var tr = _b.tr, selection = _b.selection, schema = _b.schema;
|
||||
if (selectedColor) {
|
||||
var from = selection.from, to = selection.to;
|
||||
var attrs = { htmlAttrs: { style: "color: " + selectedColor } };
|
||||
var mark = schema.marks.span.create(attrs);
|
||||
tr.addMark(from, to, mark);
|
||||
dispatch(tr);
|
||||
return true;
|
||||
}
|
||||
return false;
|
||||
},
|
||||
},
|
||||
toolbarItems: [
|
||||
{
|
||||
groupIndex: 0,
|
||||
itemIndex: 3,
|
||||
item: toolbarItem,
|
||||
},
|
||||
],
|
||||
toHTMLRenderers: {
|
||||
htmlInline: {
|
||||
span: function (node, _a) {
|
||||
var entering = _a.entering;
|
||||
return entering
|
||||
? { type: 'openTag', tagName: 'span', attributes: node.attrs }
|
||||
: { type: 'closeTag', tagName: 'span' };
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
}();
|
||||
__webpack_exports__ = __webpack_exports__["default"];
|
||||
/******/ return __webpack_exports__;
|
||||
/******/ })()
|
||||
;
|
||||
});
|
24
assets/js/toastui.js
Normal file
24
assets/js/toastui.js
Normal file
File diff suppressed because one or more lines are too long
5240
assets/js/tui-color-picker.js
Normal file
5240
assets/js/tui-color-picker.js
Normal file
File diff suppressed because it is too large
Load Diff
806
assets/js/umbrella.js
Normal file
806
assets/js/umbrella.js
Normal file
@ -0,0 +1,806 @@
|
||||
// Umbrella JS http://umbrellajs.com/
|
||||
// -----------
|
||||
// Small, lightweight jQuery alternative
|
||||
// @author Francisco Presencia Fandos https://francisco.io/
|
||||
// @inspiration http://youmightnotneedjquery.com/
|
||||
|
||||
// Initialize the library
|
||||
var u = function (parameter, context) {
|
||||
// Make it an instance of u() to avoid needing 'new' as in 'new u()' and just
|
||||
// use 'u().bla();'.
|
||||
// @reference http://stackoverflow.com/q/24019863
|
||||
// @reference http://stackoverflow.com/q/8875878
|
||||
if (!(this instanceof u)) {
|
||||
return new u(parameter, context);
|
||||
}
|
||||
|
||||
// No need to further processing it if it's already an instance
|
||||
if (parameter instanceof u) {
|
||||
return parameter;
|
||||
}
|
||||
|
||||
// Parse it as a CSS selector if it's a string
|
||||
if (typeof parameter === 'string') {
|
||||
parameter = this.select(parameter, context);
|
||||
}
|
||||
|
||||
// If we're referring a specific node as in on('click', function(){ u(this) })
|
||||
// or the select() function returned a single node such as in '#id'
|
||||
if (parameter && parameter.nodeName) {
|
||||
parameter = [parameter];
|
||||
}
|
||||
|
||||
// Convert to an array, since there are many 'array-like' stuff in js-land
|
||||
this.nodes = this.slice(parameter);
|
||||
};
|
||||
|
||||
// Map u(...).length to u(...).nodes.length
|
||||
u.prototype = {
|
||||
get length () {
|
||||
return this.nodes.length;
|
||||
}
|
||||
};
|
||||
|
||||
// This made the code faster, read "Initializing instance variables" in
|
||||
// https://developers.google.com/speed/articles/optimizing-javascript
|
||||
u.prototype.nodes = [];
|
||||
|
||||
// Add class(es) to the matched nodes
|
||||
u.prototype.addClass = function () {
|
||||
return this.eacharg(arguments, function (el, name) {
|
||||
el.classList.add(name);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
// Add text in the specified position. It is used by other functions
|
||||
u.prototype.adjacent = function (html, data, callback) {
|
||||
if (typeof data === 'number') {
|
||||
if (data === 0) {
|
||||
data = [];
|
||||
} else {
|
||||
data = new Array(data).join().split(',').map(Number.call, Number);
|
||||
}
|
||||
}
|
||||
|
||||
// Loop through all the nodes. It cannot reuse the eacharg() since the data
|
||||
// we want to do it once even if there's no "data" and we accept a selector
|
||||
return this.each(function (node, j) {
|
||||
var fragment = document.createDocumentFragment();
|
||||
|
||||
// Allow for data to be falsy and still loop once
|
||||
u(data || {}).map(function (el, i) {
|
||||
// Allow for callbacks that accept some data
|
||||
var part = (typeof html === 'function') ? html.call(this, el, i, node, j) : html;
|
||||
|
||||
if (typeof part === 'string') {
|
||||
return this.generate(part);
|
||||
}
|
||||
|
||||
return u(part);
|
||||
}).each(function (n) {
|
||||
this.isInPage(n)
|
||||
? fragment.appendChild(u(n).clone().first())
|
||||
: fragment.appendChild(n);
|
||||
});
|
||||
|
||||
callback.call(this, node, fragment);
|
||||
});
|
||||
};
|
||||
|
||||
// Add some html as a sibling after each of the matched elements.
|
||||
u.prototype.after = function (html, data) {
|
||||
return this.adjacent(html, data, function (node, fragment) {
|
||||
node.parentNode.insertBefore(fragment, node.nextSibling);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Add some html as a child at the end of each of the matched elements.
|
||||
u.prototype.append = function (html, data) {
|
||||
return this.adjacent(html, data, function (node, fragment) {
|
||||
node.appendChild(fragment);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
|
||||
// Normalize the arguments to an array of strings
|
||||
// Allow for several class names like "a b, c" and several parameters
|
||||
u.prototype.args = function (args, node, i) {
|
||||
if (typeof args === 'function') {
|
||||
args = args(node, i);
|
||||
}
|
||||
|
||||
// First flatten it all to a string http://stackoverflow.com/q/22920305
|
||||
// If we try to slice a string bad things happen: ['n', 'a', 'm', 'e']
|
||||
if (typeof args !== 'string') {
|
||||
args = this.slice(args).map(this.str(node, i));
|
||||
}
|
||||
|
||||
// Then convert that string to an array of not-null strings
|
||||
return args.toString().split(/[\s,]+/).filter(function (e) {
|
||||
return e.length;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Merge all of the nodes that the callback return into a simple array
|
||||
u.prototype.array = function (callback) {
|
||||
callback = callback;
|
||||
var self = this;
|
||||
return this.nodes.reduce(function (list, node, i) {
|
||||
var val;
|
||||
if (callback) {
|
||||
val = callback.call(self, node, i);
|
||||
if (!val) val = false;
|
||||
if (typeof val === 'string') val = u(val);
|
||||
if (val instanceof u) val = val.nodes;
|
||||
} else {
|
||||
val = node.innerHTML;
|
||||
}
|
||||
return list.concat(val !== false ? val : []);
|
||||
}, []);
|
||||
};
|
||||
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
|
||||
// Handle attributes for the matched elements
|
||||
u.prototype.attr = function (name, value, data) {
|
||||
data = data ? 'data-' : '';
|
||||
|
||||
// This will handle those elements that can accept a pair with these footprints:
|
||||
// .attr('a'), .attr('a', 'b'), .attr({ a: 'b' })
|
||||
return this.pairs(name, value, function (node, name) {
|
||||
return node.getAttribute(data + name);
|
||||
}, function (node, name, value) {
|
||||
if (value) {
|
||||
node.setAttribute(data + name, value);
|
||||
} else {
|
||||
node.removeAttribute(data + name);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Add some html before each of the matched elements.
|
||||
u.prototype.before = function (html, data) {
|
||||
return this.adjacent(html, data, function (node, fragment) {
|
||||
node.parentNode.insertBefore(fragment, node);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Get the direct children of all of the nodes with an optional filter
|
||||
u.prototype.children = function (selector) {
|
||||
return this.map(function (node) {
|
||||
return this.slice(node.children);
|
||||
}).filter(selector);
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Deep clone a DOM node and its descendants.
|
||||
* @return {[Object]} Returns an Umbrella.js instance.
|
||||
*/
|
||||
u.prototype.clone = function () {
|
||||
return this.map(function (node, i) {
|
||||
var clone = node.cloneNode(true);
|
||||
var dest = this.getAll(clone);
|
||||
|
||||
this.getAll(node).each(function (src, i) {
|
||||
for (var key in this.mirror) {
|
||||
if (this.mirror[key]) {
|
||||
this.mirror[key](src, dest.nodes[i]);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
return clone;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* Return an array of DOM nodes of a source node and its children.
|
||||
* @param {[Object]} context DOM node.
|
||||
* @param {[String]} tag DOM node tagName.
|
||||
* @return {[Array]} Array containing queried DOM nodes.
|
||||
*/
|
||||
u.prototype.getAll = function getAll (context) {
|
||||
return u([context].concat(u('*', context).nodes));
|
||||
};
|
||||
|
||||
// Store all of the operations to perform when cloning elements
|
||||
u.prototype.mirror = {};
|
||||
|
||||
/**
|
||||
* Copy all JavaScript events of source node to destination node.
|
||||
* @param {[Object]} source DOM node
|
||||
* @param {[Object]} destination DOM node
|
||||
* @return {[undefined]]}
|
||||
*/
|
||||
u.prototype.mirror.events = function (src, dest) {
|
||||
if (!src._e) return;
|
||||
|
||||
for (var type in src._e) {
|
||||
src._e[type].forEach(function (ref) {
|
||||
u(dest).on(type, ref.callback);
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Copy select input value to its clone.
|
||||
* @param {[Object]} src DOM node
|
||||
* @param {[Object]} dest DOM node
|
||||
* @return {[undefined]}
|
||||
*/
|
||||
u.prototype.mirror.select = function (src, dest) {
|
||||
if (u(src).is('select')) {
|
||||
dest.value = src.value;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Copy textarea input value to its clone
|
||||
* @param {[Object]} src DOM node
|
||||
* @param {[Object]} dest DOM node
|
||||
* @return {[undefined]}
|
||||
*/
|
||||
u.prototype.mirror.textarea = function (src, dest) {
|
||||
if (u(src).is('textarea')) {
|
||||
dest.value = src.value;
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
// Find the first ancestor that matches the selector for each node
|
||||
u.prototype.closest = function (selector) {
|
||||
return this.map(function (node) {
|
||||
// Keep going up and up on the tree. First element is also checked
|
||||
do {
|
||||
if (u(node).is(selector)) {
|
||||
return node;
|
||||
}
|
||||
} while ((node = node.parentNode) && node !== document);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Handle data-* attributes for the matched elements
|
||||
u.prototype.data = function (name, value) {
|
||||
return this.attr(name, value, true);
|
||||
};
|
||||
|
||||
|
||||
// Loops through every node from the current call
|
||||
u.prototype.each = function (callback) {
|
||||
// By doing callback.call we allow "this" to be the context for
|
||||
// the callback (see http://stackoverflow.com/q/4065353 precisely)
|
||||
this.nodes.forEach(callback.bind(this));
|
||||
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
// Loop through the combination of every node and every argument passed
|
||||
u.prototype.eacharg = function (args, callback) {
|
||||
return this.each(function (node, i) {
|
||||
this.args(args, node, i).forEach(function (arg) {
|
||||
// Perform the callback for this node
|
||||
// By doing callback.call we allow "this" to be the context for
|
||||
// the callback (see http://stackoverflow.com/q/4065353 precisely)
|
||||
callback.call(this, node, arg);
|
||||
}, this);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Remove all children of the matched nodes from the DOM.
|
||||
u.prototype.empty = function () {
|
||||
return this.each(function (node) {
|
||||
while (node.firstChild) {
|
||||
node.removeChild(node.firstChild);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// .filter(selector)
|
||||
// Delete all of the nodes that don't pass the selector
|
||||
u.prototype.filter = function (selector) {
|
||||
// The default function if it's a CSS selector
|
||||
// Cannot change name to 'selector' since it'd mess with it inside this fn
|
||||
var callback = function (node) {
|
||||
// Make it compatible with some other browsers
|
||||
node.matches = node.matches || node.msMatchesSelector || node.webkitMatchesSelector;
|
||||
|
||||
// Check if it's the same element (or any element if no selector was passed)
|
||||
return node.matches(selector || '*');
|
||||
};
|
||||
|
||||
// filter() receives a function as in .filter(e => u(e).children().length)
|
||||
if (typeof selector === 'function') callback = selector;
|
||||
|
||||
// filter() receives an instance of Umbrella as in .filter(u('a'))
|
||||
if (selector instanceof u) {
|
||||
callback = function (node) {
|
||||
return (selector.nodes).indexOf(node) !== -1;
|
||||
};
|
||||
}
|
||||
|
||||
// Just a native filtering function for ultra-speed
|
||||
return u(this.nodes.filter(callback));
|
||||
};
|
||||
|
||||
|
||||
// Find all the nodes children of the current ones matched by a selector
|
||||
u.prototype.find = function (selector) {
|
||||
return this.map(function (node) {
|
||||
return u(selector || '*', node);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Get the first of the nodes
|
||||
u.prototype.first = function () {
|
||||
return this.nodes[0] || false;
|
||||
};
|
||||
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
// Generate a fragment of HTML. This irons out the inconsistences
|
||||
u.prototype.generate = function (html) {
|
||||
// Table elements need to be child of <table> for some f***ed up reason
|
||||
if (/^\s*<tr[> ]/.test(html)) {
|
||||
return u(document.createElement('table')).html(html).children().children().nodes;
|
||||
} else if (/^\s*<t(h|d)[> ]/.test(html)) {
|
||||
return u(document.createElement('table')).html(html).children().children().children().nodes;
|
||||
} else if (/^\s*</.test(html)) {
|
||||
return u(document.createElement('div')).html(html).children().nodes;
|
||||
} else {
|
||||
return document.createTextNode(html);
|
||||
}
|
||||
};
|
||||
|
||||
// Change the default event for the callback. Simple decorator to preventDefault
|
||||
u.prototype.handle = function () {
|
||||
var args = this.slice(arguments).map(function (arg) {
|
||||
if (typeof arg === 'function') {
|
||||
return function (e) {
|
||||
e.preventDefault();
|
||||
arg.apply(this, arguments);
|
||||
};
|
||||
}
|
||||
return arg;
|
||||
}, this);
|
||||
|
||||
return this.on.apply(this, args);
|
||||
};
|
||||
|
||||
|
||||
// Find out whether the matched elements have a class or not
|
||||
u.prototype.hasClass = function () {
|
||||
// Check if any of them has all of the classes
|
||||
return this.is('.' + this.args(arguments).join('.'));
|
||||
};
|
||||
|
||||
|
||||
// Set or retrieve the html from the matched node(s)
|
||||
u.prototype.html = function (text) {
|
||||
// Needs to check undefined as it might be ""
|
||||
if (text === undefined) {
|
||||
return this.first().innerHTML || '';
|
||||
}
|
||||
|
||||
// If we're attempting to set some text
|
||||
// Loop through all the nodes
|
||||
return this.each(function (node) {
|
||||
// Set the inner html to the node
|
||||
node.innerHTML = text;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Check whether any of the nodes matches the selector
|
||||
u.prototype.is = function (selector) {
|
||||
return this.filter(selector).length > 0;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Internal use only. This function checks to see if an element is in the page's body. As contains is inclusive and determining if the body contains itself isn't the intention of isInPage this case explicitly returns false.
|
||||
https://developer.mozilla.org/en-US/docs/Web/API/Node/contains
|
||||
* @param {[Object]} node DOM node
|
||||
* @return {Boolean} The Node.contains() method returns a Boolean value indicating whether a node is a descendant of a given node or not.
|
||||
*/
|
||||
u.prototype.isInPage = function isInPage (node) {
|
||||
return (node === document.body) ? false : document.body.contains(node);
|
||||
};
|
||||
|
||||
// Get the last of the nodes
|
||||
u.prototype.last = function () {
|
||||
return this.nodes[this.length - 1] || false;
|
||||
};
|
||||
|
||||
|
||||
// Merge all of the nodes that the callback returns
|
||||
u.prototype.map = function (callback) {
|
||||
return callback ? u(this.array(callback)).unique() : this;
|
||||
};
|
||||
|
||||
|
||||
// Delete all of the nodes that equals the filter
|
||||
u.prototype.not = function (filter) {
|
||||
return this.filter(function (node) {
|
||||
return !u(node).is(filter || true);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Removes the callback to the event listener for each node
|
||||
u.prototype.off = function (events, cb, cb2) {
|
||||
var cb_filter_off = (cb == null && cb2 == null);
|
||||
var sel = null;
|
||||
var cb_to_be_removed = cb;
|
||||
if (typeof cb === 'string') {
|
||||
sel = cb;
|
||||
cb_to_be_removed = cb2;
|
||||
}
|
||||
|
||||
return this.eacharg(events, function (node, event) {
|
||||
u(node._e ? node._e[event] : []).each(function (ref) {
|
||||
if (cb_filter_off || (ref.orig_callback === cb_to_be_removed && ref.selector === sel)) {
|
||||
node.removeEventListener(event, ref.callback);
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Attach a callback to the specified events
|
||||
u.prototype.on = function (events, cb, cb2) {
|
||||
function overWriteCurrent (e, value) {
|
||||
try {
|
||||
Object.defineProperty(e, 'currentTarget', {
|
||||
value: value,
|
||||
configurable: true
|
||||
});
|
||||
} catch (err) {}
|
||||
}
|
||||
|
||||
var selector = null;
|
||||
var orig_callback = cb;
|
||||
if (typeof cb === 'string') {
|
||||
selector = cb;
|
||||
orig_callback = cb2;
|
||||
cb = function (e) {
|
||||
var args = arguments;
|
||||
u(e.currentTarget)
|
||||
.find(selector)
|
||||
.each(function (target) {
|
||||
// The event is triggered either in the correct node, or a child
|
||||
// of the node that we are interested in
|
||||
// Note: .contains() will also check itself (besides children)
|
||||
if (!target.contains(e.target)) return;
|
||||
|
||||
// If e.g. a child of a link was clicked, but we are listening
|
||||
// to the link, this will make the currentTarget the link itself,
|
||||
// so it's the "delegated" element instead of the root target. It
|
||||
// makes u('.render a').on('click') and u('.render').on('click', 'a')
|
||||
// to have the same currentTarget (the 'a')
|
||||
var curr = e.currentTarget;
|
||||
overWriteCurrent(e, target);
|
||||
cb2.apply(target, args);
|
||||
// Need to undo it afterwards, in case this event is reused in another
|
||||
// callback since otherwise u(e.currentTarget) above would break
|
||||
overWriteCurrent(e, curr);
|
||||
});
|
||||
};
|
||||
}
|
||||
|
||||
var callback = function (e) {
|
||||
return cb.apply(this, [e].concat(e.detail || []));
|
||||
};
|
||||
|
||||
return this.eacharg(events, function (node, event) {
|
||||
node.addEventListener(event, callback);
|
||||
|
||||
// Store it so we can dereference it with `.off()` later on
|
||||
node._e = node._e || {};
|
||||
node._e[event] = node._e[event] || [];
|
||||
node._e[event].push({
|
||||
callback: callback,
|
||||
orig_callback: orig_callback,
|
||||
selector: selector
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
|
||||
// Take the arguments and a couple of callback to handle the getter/setter pairs
|
||||
// such as: .css('a'), .css('a', 'b'), .css({ a: 'b' })
|
||||
u.prototype.pairs = function (name, value, get, set) {
|
||||
// Convert it into a plain object if it is not
|
||||
if (typeof value !== 'undefined') {
|
||||
var nm = name;
|
||||
name = {};
|
||||
name[nm] = value;
|
||||
}
|
||||
|
||||
if (typeof name === 'object') {
|
||||
// Set the value of each one, for each of the { prop: value } pairs
|
||||
return this.each(function (node, i) {
|
||||
for (var key in name) {
|
||||
if (typeof name[key] === 'function') {
|
||||
set(node, key, name[key](node, i));
|
||||
} else {
|
||||
set(node, key, name[key]);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// Return the style of the first one
|
||||
return this.length ? get(this.first(), name) : '';
|
||||
};
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
|
||||
// Parametize an object: { a: 'b', c: 'd' } => 'a=b&c=d'
|
||||
u.prototype.param = function (obj) {
|
||||
return Object.keys(obj).map(function (key) {
|
||||
return this.uri(key) + '=' + this.uri(obj[key]);
|
||||
}.bind(this)).join('&');
|
||||
};
|
||||
|
||||
// Travel the matched elements one node up
|
||||
u.prototype.parent = function (selector) {
|
||||
return this.map(function (node) {
|
||||
return node.parentNode;
|
||||
}).filter(selector);
|
||||
};
|
||||
|
||||
|
||||
// Add nodes at the beginning of each node
|
||||
u.prototype.prepend = function (html, data) {
|
||||
return this.adjacent(html, data, function (node, fragment) {
|
||||
node.insertBefore(fragment, node.firstChild);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Delete the matched nodes from the DOM
|
||||
u.prototype.remove = function () {
|
||||
// Loop through all the nodes
|
||||
return this.each(function (node) {
|
||||
// Perform the removal only if the node has a parent
|
||||
if (node.parentNode) {
|
||||
node.parentNode.removeChild(node);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Removes a class from all of the matched nodes
|
||||
u.prototype.removeClass = function () {
|
||||
// Loop the combination of each node with each argument
|
||||
return this.eacharg(arguments, function (el, name) {
|
||||
// Remove the class using the native method
|
||||
el.classList.remove(name);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Replace the matched elements with the passed argument.
|
||||
u.prototype.replace = function (html, data) {
|
||||
var nodes = [];
|
||||
this.adjacent(html, data, function (node, fragment) {
|
||||
nodes = nodes.concat(this.slice(fragment.children));
|
||||
node.parentNode.replaceChild(fragment, node);
|
||||
});
|
||||
return u(nodes);
|
||||
};
|
||||
|
||||
|
||||
// Scroll to the first matched element
|
||||
u.prototype.scroll = function () {
|
||||
this.first().scrollIntoView({ behavior: 'smooth' });
|
||||
return this;
|
||||
};
|
||||
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
// Select the adecuate part from the context
|
||||
u.prototype.select = function (parameter, context) {
|
||||
// Allow for spaces before or after
|
||||
parameter = parameter.replace(/^\s*/, '').replace(/\s*$/, '');
|
||||
|
||||
if (/^</.test(parameter)) {
|
||||
return u().generate(parameter);
|
||||
}
|
||||
|
||||
return (context || document).querySelectorAll(parameter);
|
||||
};
|
||||
|
||||
|
||||
// Convert forms into a string able to be submitted
|
||||
// Original source: http://stackoverflow.com/q/11661187
|
||||
u.prototype.serialize = function () {
|
||||
var self = this;
|
||||
|
||||
// Store the class in a variable for manipulation
|
||||
return this.slice(this.first().elements).reduce(function (query, el) {
|
||||
// We only want to match enabled elements with names, but not files
|
||||
if (!el.name || el.disabled || el.type === 'file') return query;
|
||||
|
||||
// Ignore the checkboxes that are not checked
|
||||
if (/(checkbox|radio)/.test(el.type) && !el.checked) return query;
|
||||
|
||||
// Handle multiple selects
|
||||
if (el.type === 'select-multiple') {
|
||||
u(el.options).each(function (opt) {
|
||||
if (opt.selected) {
|
||||
query += '&' + self.uri(el.name) + '=' + self.uri(opt.value);
|
||||
}
|
||||
});
|
||||
return query;
|
||||
}
|
||||
|
||||
// Add the element to the object
|
||||
return query + '&' + self.uri(el.name) + '=' + self.uri(el.value);
|
||||
}, '').slice(1);
|
||||
};
|
||||
|
||||
|
||||
// Travel the matched elements at the same level
|
||||
u.prototype.siblings = function (selector) {
|
||||
return this.parent().children(selector).not(this);
|
||||
};
|
||||
|
||||
|
||||
// Find the size of the first matched element
|
||||
u.prototype.size = function () {
|
||||
return this.first().getBoundingClientRect();
|
||||
};
|
||||
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
|
||||
// Force it to be an array AND also it clones them
|
||||
// http://toddmotto.com/a-comprehensive-dive-into-nodelists-arrays-converting-nodelists-and-understanding-the-dom/
|
||||
u.prototype.slice = function (pseudo) {
|
||||
// Check that it's not a valid object
|
||||
if (!pseudo ||
|
||||
pseudo.length === 0 ||
|
||||
typeof pseudo === 'string' ||
|
||||
pseudo.toString() === '[object Function]') return [];
|
||||
|
||||
// Accept also a u() object (that has .nodes)
|
||||
return pseudo.length ? [].slice.call(pseudo.nodes || pseudo) : [pseudo];
|
||||
};
|
||||
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
|
||||
// Create a string from different things
|
||||
u.prototype.str = function (node, i) {
|
||||
return function (arg) {
|
||||
// Call the function with the corresponding nodes
|
||||
if (typeof arg === 'function') {
|
||||
return arg.call(this, node, i);
|
||||
}
|
||||
|
||||
// From an array or other 'weird' things
|
||||
return arg.toString();
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
// Set or retrieve the text content from the matched node(s)
|
||||
u.prototype.text = function (text) {
|
||||
// Needs to check undefined as it might be ""
|
||||
if (text === undefined) {
|
||||
return this.first().textContent || '';
|
||||
}
|
||||
|
||||
// If we're attempting to set some text
|
||||
// Loop through all the nodes
|
||||
return this.each(function (node) {
|
||||
// Set the text content to the node
|
||||
node.textContent = text;
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Activate/deactivate classes in the elements
|
||||
u.prototype.toggleClass = function (classes, addOrRemove) {
|
||||
/* jshint -W018 */
|
||||
// Check if addOrRemove was passed as a boolean
|
||||
if (!!addOrRemove === addOrRemove) {
|
||||
return this[addOrRemove ? 'addClass' : 'removeClass'](classes);
|
||||
}
|
||||
/* jshint +W018 */
|
||||
|
||||
// Loop through all the nodes and classes combinations
|
||||
return this.eacharg(classes, function (el, name) {
|
||||
el.classList.toggle(name);
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
// Call an event manually on all the nodes
|
||||
u.prototype.trigger = function (events) {
|
||||
var data = this.slice(arguments).slice(1);
|
||||
|
||||
return this.eacharg(events, function (node, event) {
|
||||
var ev;
|
||||
|
||||
// Allow the event to bubble up and to be cancelable (as default)
|
||||
var opts = { bubbles: true, cancelable: true, detail: data };
|
||||
|
||||
try {
|
||||
// Accept different types of event names or an event itself
|
||||
ev = new window.CustomEvent(event, opts);
|
||||
} catch (e) {
|
||||
ev = document.createEvent('CustomEvent');
|
||||
ev.initCustomEvent(event, true, true, data);
|
||||
}
|
||||
|
||||
node.dispatchEvent(ev);
|
||||
});
|
||||
};
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
|
||||
// Removed duplicated nodes, used for some specific methods
|
||||
u.prototype.unique = function () {
|
||||
return u(this.nodes.reduce(function (clean, node) {
|
||||
var istruthy = node !== null && node !== undefined && node !== false;
|
||||
return (istruthy && clean.indexOf(node) === -1) ? clean.concat(node) : clean;
|
||||
}, []));
|
||||
};
|
||||
|
||||
// [INTERNAL USE ONLY]
|
||||
|
||||
// Encode the different strings https://gist.github.com/brettz9/7147458
|
||||
u.prototype.uri = function (str) {
|
||||
return encodeURIComponent(str).replace(/!/g, '%21').replace(/'/g, '%27').replace(/\(/g, '%28').replace(/\)/g, '%29').replace(/\*/g, '%2A').replace(/%20/g, '+');
|
||||
};
|
||||
|
||||
|
||||
u.prototype.wrap = function (selector) {
|
||||
function findDeepestNode (node) {
|
||||
while (node.firstElementChild) {
|
||||
node = node.firstElementChild;
|
||||
}
|
||||
|
||||
return u(node);
|
||||
}
|
||||
// 1) Construct dom node e.g. u('<a>'),
|
||||
// 2) clone the currently matched node
|
||||
// 3) append cloned dom node to constructed node based on selector
|
||||
return this.map(function (node) {
|
||||
return u(selector).each(function (n) {
|
||||
findDeepestNode(n)
|
||||
.append(node.cloneNode(true));
|
||||
|
||||
node
|
||||
.parentNode
|
||||
.replaceChild(n, node);
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
// Export it for webpack
|
||||
if (typeof module === 'object' && module.exports) {
|
||||
// Avoid breaking it for `import { u } from ...`. Add `import u from ...`
|
||||
module.exports = u;
|
||||
module.exports.u = u;
|
||||
}
|
Loading…
Reference in New Issue
Block a user