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 @@