projects/fipamo
projects/fipamo
1
0
Fork 0
Code Issues 9 Pull requests Projects Releases 23 Packages Wiki Activity Actions

style, state and bounding tweaks for editor

Browse source 
new floating text formatter had some reveal state issues, some styling
wonkyness and didn't have any bounding rules, so all of that has been
addressed.

also removed css references to a component that has been removed.
This commit is contained in:
RXP 2025-05-18 12:20:39 -06:00
parent e1ef4ed1d2
commit 981d182d1a
Signed by: ro
GPG key ID: 976711B5057688B7
5 changed files with 96 additions and 26 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
public/assets/css/dash/icons.css
View file

@ -6,6 +6,14 @@ svg.icon {
color: var(--secondary);
}
svg.editor-icon {
transition: all 0.3s linear;
fill: var(--primary);
width: 25px;
height: 25px;
color: var(--primary);
}
svg#move-menu-item {
fill: var(--secondary-highlight);
top: 8px;

20
public/assets/css/dash/page-editor.css
View file

@ -203,6 +203,12 @@ main > section.text-editor {
margin: 90px auto;
}
main > section.text-editor button {
background: none;
width: 50px;
height: 50px;
}
main > section.text-editor .page-title #post-title-text {
font-size: 2em;
font-family: var(--base-type);
@ -224,9 +230,17 @@ main > div.text-editor-control {
grid-template-columns: repeat(8, 1fr);
position: absolute;
z-index: 400;
left: 10px;
top: 105px;
transition: all 0.2s linear;
left: 10%;
top: 95px;
transition: all 10ms linear;
background: var(--secondary);
border-radius: 3px;
}
main > div.text-editor-control button {
background: none;
width: 45px;
height: 45px;
}
.control-freeze {

3
public/assets/css/dash/start.css
View file

@ -12,6 +12,3 @@
@import url("page-editor-highlights.css");
@import url("settings.css");
@import url("navigation.css");
@import url("core.min.css");
@import url("textrix.min.css");
@import url("textrix.spacing.css");

75
public/assets/scripts/dash/app/controllers/PageEditor.js
View file

@ -19,6 +19,7 @@ export default class PostEditor {
constructor() {
this.processing = false;
this.textSelected = false;
this.activeSelect = false;
let self = this;
this.cr = new ContentRequest(null, document.getElementById('notify-progress'));
this.mr = new Maintenance(null, null);
@ -43,26 +44,76 @@ export default class PostEditor {
let textEdit = document.getElementById('edit');
let control = document.querySelector('.text-editor-control');
textEdit.addEventListener('selectionchange', e => {
if (!self.textSelected) {
self.textSelected = true;
control.classList.remove('hide-el');
control.classList.add('show-grid');
let start = e.target.selectionStart;
let end = e.target.selectionEnd;
if (start != end) {
this.activeSelect = true;
if (!self.textSelected) {
self.textSelected = true;
control.classList.remove('hide-el');
control.classList.add('show-grid');
}
}
});
textEdit.addEventListener('click', e => {
if (self.textSelected) {
self.textSelected = false;
control.classList.add('hide-el');
control.classList.remove('show-grid');
let start = e.target.selectionStart;
let end = e.target.selectionEnd;
if (start == end) {
if (self.textSelected) {
self.textSelected = false;
this.activeSelect = false;
control.classList.add('hide-el');
control.classList.remove('show-grid');
}
}
});
textEdit.addEventListener('blur', e => {
if (self.textSelected) {
self.textSelected = false;
control.classList.add('hide-el');
control.classList.remove('show-grid');
control.classList.add('hide-el');
control.classList.remove('show-grid');
});
textEdit.addEventListener('mouseup', e => {
if (window.getSelection().toString().length > 0) {
// Get selected text and encode it
const selection = encodeURIComponent(
window.getSelection().toString()
).replace(/[!'()*]/g, escape);
// Find out how much (if any) user has scrolled
var scrollTop =
window.pageYOffset !== undefined
? window.pageYOffset
: (
document.documentElement ||
document.body.parentNode ||
document.body
).scrollTop;
// Get cursor position
let posX = event.clientX - 110;
let posY = event.clientY + 20 + scrollTop;
let rect = document.querySelector('.text-editor').getBoundingClientRect();
let tangle = document
.querySelector('.text-editor-control')
.getBoundingClientRect();
//check for left side
if (posX < rect.left) {
posX = rect.left;
}
//check for right side
let editorWidth = rect.right - rect.left;
let controlWidth = tangle.right - tangle.left;
if (controlWidth + posX - rect.left > editorWidth) {
let adjust = controlWidth + posX - rect.left - editorWidth;
posX = posX - adjust;
}
document.querySelector('.text-editor-control').style.left = posX + 'px';
document.querySelector('.text-editor-control').style.top = posY + 'px';
}
});

16
resources/views/includes/editor.blade.php
View file

@ -1,41 +1,41 @@
<div class="text-editor-control hide-el">
<button id="edit-bold" class="content-editor-btn-text editor-button" title="bold">
<svg id="edit-bold" class="icon">
<svg id="edit-bold" class="editor-icon">
<use id="edit-bold" xlink:href="/assets/images/global/sprite.svg#tabler-bold" />
</svg>
</button>
<button id="edit-italic" class="content-editor-btn-text editor-button" title="italic">
<svg id="edit-italic" class="icon">
<svg id="edit-italic" class="editor-icon">
<use id="edit-italic" xlink:href="/assets/images/global/sprite.svg#tabler-italic" />
</svg>
</button>
<button id="edit-strikethrough" class="content-editor-btn-text editor-button" title="strikethrough">
<svg id="edit-strikethrough" class="icon">
<svg id="edit-strikethrough" class="editor-icon">
<use id="edit-strikethrough" xlink:href="/assets/images/global/sprite.svg#tabler-strikethrough" />
</svg>
</button>
<button id="edit-link" class="content-editor-btn-icon editor-button" title="insert link">
<svg id="edit-link" class="icon">
<svg id="edit-link" class="editor-icon">
<use id="edit-link" xlink:href="/assets/images/global/sprite.svg#entypo-link" />
</svg>
</button>
<button id="edit-header1" class="content-editor-btn-text editor-button" title="header 1">
<svg id="edit-header1" class="icon">
<svg id="edit-header1" class="editor-icon">
<use id="edit-header1" xlink:href="/assets/images/global/sprite.svg#tabler-heading-1" />
</svg>
</button>
<button id="edit-header2" class="content-editor-btn-text editor-button" title="header 2">
<svg id="edit-header2" class="icon">
<svg id="edit-header2" class="editor-icon">
<use id="edit-header2" xlink:href="/assets/images/global/sprite.svg#tabler-heading-2" />
</svg>
</button>
<button id="edit-header3" class="content-editor-btn-text editor-button" title="header 3">
<svg id="edit-header3" class="icon">
<svg id="edit-header3" class="editor-icon">
<use id="edit-header3" xlink:href="/assets/images/global/sprite.svg#tabler-heading-3" />
</svg>
</button>
<button id="edit-image" class="content-editor-btn-icon editor-button" title="insert image">
<svg id="edit-image" class="icon">
<svg id="edit-image" class="editor-icon">
<use id="edit-image" xlink:href="/assets/images/global/sprite.svg#entypo-image" />
</svg>
</button>