mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-07-25 16:19:44 +02:00
Integrate CodeXEditor: dynamic import added (#5)
* Main elements created * Add Editor to the writing page
This commit is contained in:
parent
4326cb22ab
commit
e7e64cea3e
21 changed files with 15676 additions and 820 deletions
|
@ -2,11 +2,42 @@
|
|||
// eslint-disable-next-line no-unused-vars
|
||||
import css from '../styles/main.pcss';
|
||||
|
||||
module.exports = class Docs {
|
||||
/**
|
||||
* Module Dispatcher
|
||||
* @see {@link https://github.com/codex-team/moduleDispatcher}
|
||||
* @author CodeX
|
||||
*/
|
||||
import ModuleDispatcher from 'module-dispatcher';
|
||||
|
||||
/**
|
||||
* Import modules
|
||||
*/
|
||||
import Writing from './modules/writing';
|
||||
|
||||
/**
|
||||
* Main app class
|
||||
*/
|
||||
class Docs {
|
||||
/**
|
||||
* @constructor
|
||||
*/
|
||||
constructor() {
|
||||
console.log('CodeX Docs initialized');
|
||||
this.writing = new Writing();
|
||||
|
||||
document.addEventListener('DOMContentLoaded', (event) => {
|
||||
this.docReady();
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Document is ready
|
||||
*/
|
||||
docReady() {
|
||||
this.moduleDispatcher = new ModuleDispatcher({
|
||||
Library: window.Docs
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
module.exports = new Docs();
|
||||
|
|
28
src/frontend/js/modules/writing.js
Normal file
28
src/frontend/js/modules/writing.js
Normal file
|
@ -0,0 +1,28 @@
|
|||
/**
|
||||
* Module for pages create/edit
|
||||
*/
|
||||
module.exports = class Writing {
|
||||
constructor(){
|
||||
}
|
||||
|
||||
/**
|
||||
* Called by ModuleDispatcher to initialize module from DOM
|
||||
*/
|
||||
init(config, moduleEl) {
|
||||
this.editorWrapper = document.createElement('div');
|
||||
this.editorWrapper.id = 'codex-editor';
|
||||
|
||||
moduleEl.appendChild(this.editorWrapper);
|
||||
|
||||
|
||||
this.loadEditor().then(() => {
|
||||
console.log('Editor loaded');
|
||||
})
|
||||
};
|
||||
|
||||
loadEditor(){
|
||||
return import(/* webpackChunkName: "codex-editor" */ 'codex.editor').then(({ default: CodexEditor }) => {
|
||||
console.log('codex-editor', new CodexEditor());
|
||||
}).catch(error => 'An error occurred while loading CodeX Editor');
|
||||
}
|
||||
};
|
|
@ -7,16 +7,12 @@
|
|||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: inline-block;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
}
|
||||
|
||||
&__logo {
|
||||
font-weight: bold;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&__menu {
|
||||
|
@ -27,5 +23,18 @@
|
|||
list-style: none;
|
||||
margin-left: 20px;
|
||||
}
|
||||
|
||||
a:not(.docs-header__button) {
|
||||
color: inherit;
|
||||
|
||||
&:hover {
|
||||
color: var(--color-link-active);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__button {
|
||||
@apply --button;
|
||||
margin: auto 30px auto auto;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -8,6 +8,7 @@
|
|||
|
||||
&__content {
|
||||
flex-grow: 2;
|
||||
word-wrap: break-word;
|
||||
|
||||
&-inner {
|
||||
max-width: var(--layout-width-main-col);
|
||||
|
|
|
@ -10,3 +10,7 @@ body {
|
|||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
svg {
|
||||
fill: currentColor;
|
||||
}
|
||||
|
|
|
@ -10,4 +10,22 @@
|
|||
--layout-padding-horisontal: 40px;
|
||||
--layout-width-aside: 250px;
|
||||
--layout-width-main-col: 650px;
|
||||
|
||||
--button {
|
||||
display: inline-block;
|
||||
background: var(--color-link-active);
|
||||
color: #fff;
|
||||
border-radius: 3px;
|
||||
padding: 9px 15px;
|
||||
font-size: 14px;
|
||||
line-height: 1em;
|
||||
|
||||
svg {
|
||||
margin: 0 0.3em 0 -0.05em;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: color-mod(var(--color-link-active) blackness(+10%));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
3
src/frontend/svg/plus.svg
Normal file
3
src/frontend/svg/plus.svg
Normal file
|
@ -0,0 +1,3 @@
|
|||
<svg width="11" height="11" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6.44 4.64h3.7a.9.9 0 1 1 0 1.8h-3.7v3.7a.9.9 0 1 1-1.8 0v-3.7H.9a.9.9 0 0 1 0-1.8h3.74V.9a.9.9 0 0 1 1.8 0v3.74z"/>
|
||||
</svg>
|
After Width: | Height: | Size: 219 B |
Loading…
Add table
Add a link
Reference in a new issue