From 981d182d1abd797f3dfbc636383ac7eb64307afd Mon Sep 17 00:00:00 2001 From: ro Date: Sun, 18 May 2025 12:20:39 -0600 Subject: [PATCH] style, state and bounding tweaks for editor 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. --- public/assets/css/dash/icons.css | 8 ++ public/assets/css/dash/page-editor.css | 20 ++++- public/assets/css/dash/start.css | 3 - .../dash/app/controllers/PageEditor.js | 75 ++++++++++++++++--- resources/views/includes/editor.blade.php | 16 ++-- 5 files changed, 96 insertions(+), 26 deletions(-) diff --git a/public/assets/css/dash/icons.css b/public/assets/css/dash/icons.css index aee4899..702baca 100644 --- a/public/assets/css/dash/icons.css +++ b/public/assets/css/dash/icons.css @@ -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; diff --git a/public/assets/css/dash/page-editor.css b/public/assets/css/dash/page-editor.css index 7de7db9..d44a03e 100644 --- a/public/assets/css/dash/page-editor.css +++ b/public/assets/css/dash/page-editor.css @@ -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 { diff --git a/public/assets/css/dash/start.css b/public/assets/css/dash/start.css index 5bfee1b..c90ce41 100644 --- a/public/assets/css/dash/start.css +++ b/public/assets/css/dash/start.css @@ -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"); diff --git a/public/assets/scripts/dash/app/controllers/PageEditor.js b/public/assets/scripts/dash/app/controllers/PageEditor.js index 9f68de6..820489e 100644 --- a/public/assets/scripts/dash/app/controllers/PageEditor.js +++ b/public/assets/scripts/dash/app/controllers/PageEditor.js @@ -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'; } }); diff --git a/resources/views/includes/editor.blade.php b/resources/views/includes/editor.blade.php index 7cddfac..f4a3be6 100644 --- a/resources/views/includes/editor.blade.php +++ b/resources/views/includes/editor.blade.php @@ -1,41 +1,41 @@