mirror of
https://github.com/codex-team/editor.js
synced 2024-06-08 00:42:31 +02:00
Add loader (#575)
* Add loader * Remove preloader after onReady * Remove frame from loader * Remove extra css property * Make methods not async, commit production bundle * update version, improve style * Update loader styles * Temporarily remove bundle to resolve conflicts * Commit bundle * Bundle
This commit is contained in:
parent
7ca07c7999
commit
b9d6a81f2d
10
dist/codex-editor.js
vendored
10
dist/codex-editor.js
vendored
File diff suppressed because one or more lines are too long
52
dist/codex-editor.licenses.txt
vendored
52
dist/codex-editor.licenses.txt
vendored
|
@ -76,32 +76,6 @@ WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
|||
regenerator-runtime
|
||||
MIT
|
||||
|
||||
@babel/register
|
||||
MIT
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2014-2018 Sebastian McKenzie <sebmck@gmail.com>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
|
||||
codex-notifier
|
||||
MIT
|
||||
MIT License
|
||||
|
@ -402,3 +376,29 @@ IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY
|
|||
CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
|
||||
TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
|
||||
SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
||||
|
||||
@babel/register
|
||||
MIT
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2014-2018 Sebastian McKenzie <sebmck@gmail.com>
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining
|
||||
a copy of this software and associated documentation files (the
|
||||
"Software"), to deal in the Software without restriction, including
|
||||
without limitation the rights to use, copy, modify, merge, publish,
|
||||
distribute, sublicense, and/or sell copies of the Software, and to
|
||||
permit persons to whom the Software is furnished to do so, subject to
|
||||
the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be
|
||||
included in all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
||||
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
||||
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
||||
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
||||
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
||||
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
||||
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
|
|
|
@ -78,6 +78,11 @@ export default class Core {
|
|||
_.log('I\'m ready! (ノ◕ヮ◕)ノ*:・゚✧', 'log', '', 'color: #E24A75');
|
||||
|
||||
setTimeout(() => {
|
||||
/**
|
||||
* Remove loader, show content
|
||||
*/
|
||||
this.moduleInstances.UI.removeLoader();
|
||||
|
||||
/**
|
||||
* Resolve this.isReady promise
|
||||
*/
|
||||
|
|
|
@ -38,10 +38,12 @@ export default class UI extends Module {
|
|||
* CodeX Editor UI CSS class names
|
||||
* @return {{editorWrapper: string, editorZone: string}}
|
||||
*/
|
||||
private get CSS(): {editorWrapper: string, editorZone: string} {
|
||||
private get CSS(): {editorWrapper: string, editorZone: string, editorZoneHidden: string, editorLoader: string} {
|
||||
return {
|
||||
editorWrapper : 'codex-editor',
|
||||
editorZone : 'codex-editor__redactor',
|
||||
editorWrapper : 'codex-editor',
|
||||
editorZone : 'codex-editor__redactor',
|
||||
editorZoneHidden : 'codex-editor__redactor--hidden',
|
||||
editorLoader : 'codex-editor__loader',
|
||||
};
|
||||
}
|
||||
|
||||
|
@ -54,12 +56,31 @@ export default class UI extends Module {
|
|||
redactor: null,
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds loader to editor while content is not ready
|
||||
*/
|
||||
public addLoader(): void {
|
||||
this.nodes.loader = $.make('div', this.CSS.editorLoader);
|
||||
this.nodes.wrapper.prepend(this.nodes.loader);
|
||||
this.nodes.redactor.classList.add(this.CSS.editorZoneHidden);
|
||||
}
|
||||
|
||||
/**
|
||||
* Removes loader when content has loaded
|
||||
*/
|
||||
public removeLoader(): void {
|
||||
this.nodes.loader.remove();
|
||||
this.nodes.redactor.classList.remove(this.CSS.editorZoneHidden);
|
||||
}
|
||||
|
||||
/**
|
||||
* Making main interface
|
||||
*/
|
||||
public async prepare(): Promise<void> {
|
||||
await this.make();
|
||||
|
||||
this.addLoader();
|
||||
|
||||
/**
|
||||
* Append SVG sprite
|
||||
*/
|
||||
|
|
|
@ -12,6 +12,32 @@
|
|||
|
||||
&__redactor {
|
||||
padding-bottom: 300px;
|
||||
|
||||
&--hidden {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&__loader {
|
||||
position: relative;
|
||||
height: 30vh;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 50%;
|
||||
top: 50%;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
margin-top: -15px;
|
||||
margin-left: -15px;
|
||||
border-radius: 50%;
|
||||
border: 2px solid var(--color-gray-border);
|
||||
border-top-color: transparent;
|
||||
box-sizing: border-box;
|
||||
animation: editor-loader-spin 800ms infinite linear;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
&-copyable {
|
||||
|
@ -49,3 +75,13 @@
|
|||
[contentEditable=true][data-placeholder]:empty:focus::before {
|
||||
opacity: 0.3;
|
||||
}
|
||||
|
||||
@keyframes editor-loader-spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue