projects/fipamo
1
0
Fork 1
Code Issues 8 Pull requests Projects 1 Releases 23 Wiki Activity

changed role attritubet to class in page editor ui

Browse source 
the role attribute is being used incorrectly through out the site, which
is bad for screen reader, so they need to be removed and replaced with
the class attribute

the page editor was the biggest culprit, so that one has been converted
first
This commit is contained in:
ro 2024-03-25 12:53:31 -06:00
parent 3b5c753c9a
commit a53723f7c8
No known key found for this signature in database
GPG key ID: 29B551CDBD4D3B50
6 changed files with 105 additions and 170 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,12 +1,12 @@
/* FILE MANAGER */
main > section[role="file-manager"] {
main > section.file-manager {
width: 100%;
background: var(--primary-highlight);
padding: 20px 0;
margin-top: 75px;
}
main > section[role="file-manager"] label[role="list-title"] {
main > section.file-manager label.list-title {
width: 100%;
max-width: 900px;
margin: 0 auto;
@ -14,7 +14,7 @@ main > section[role="file-manager"] label[role="list-title"] {
color: var(--primary);
}
main > section[role="file-manager"] > div[role="file-drop"] {
main > section.file-manager > div.file-drop {
display: flex;
align-items: center;
justify-content: center;
@ -28,8 +28,8 @@ main > section[role="file-manager"] > div[role="file-drop"] {
margin: 10px auto;
}
main > section[role="file-manager"] > div[role="page-images-list"],
main > section[role="file-manager"] > div[role="page-files-list"] {
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list {
max-width: 900px;
width: 100%;
margin: 10px auto;
@ -38,8 +38,8 @@ main > section[role="file-manager"] > div[role="page-files-list"] {
gap: 10px;
}
main > section[role="file-manager"] > div[role="page-images-list"] > div,
main > section[role="file-manager"] > div[role="page-files-list"] > div {
main > section.file-manager > div.page-images-list > div,
main > section.file-manager > div.page-files-list > div {
width: 100%;
height: 150px;
border-radius: 3px;
@ -48,117 +48,79 @@ main > section[role="file-manager"] > div[role="page-files-list"] > div {
cursor: pointer;
}
main
> section[role="file-manager"]
> div[role="page-images-list"]
> div
> div.item-progress {
main > section.file-manager > div.page-images-list > div > div.item-progress {
width: 100%;
height: 100%;
background: var(--primary);
}
main > section[role="text-editor"] > div[role="text-editor-control"] button {
main > section.text-editor > div.text-editor-control button {
border-radius: 0;
}
main > section[role="text-editor"] > div[role="text-editor-control"] button > i {
main > section.text-editor > div.text-editor-control button > i {
font-size: 1.6em;
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(1) {
main > section.text-editor > div.text-editor-control > button:nth-child(1) {
border-radius: 3px 0 0 3px;
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(10) {
main > section.text-editor > div.text-editor-control > button:nth-child(10) {
border-radius: 0 3px 3px 0;
}
main
> section[role="file-manager"]
> div[role="page-images-list"]
> div
> button.media-remove,
main
> section[role="file-manager"]
> div[role="page-files-list"]
> div
> button.media-remove {
main > section.file-manager > div.page-images-list > div > button.media-remove,
main > section.file-manager > div.page-files-list > div > button.media-remove {
color: var(--white);
margin: 5px;
padding: 10px 15px 7px;
font-size: 1.5em;
}
main
> section[role="file-manager"]
> div[role="page-images-list"]
> div.video-item
> video {
main > section.file-manager > div.page-images-list > div.video-item > video {
object-fit: cover;
height: 100%;
width: 100%;
}
main
> section[role="file-manager"]
> div[role="page-images-list"]
> div.video-item
> button,
main
> section[role="file-manager"]
> div[role="page-files-list"]
> div.audio-item
> button,
main
> section[role="file-manager"]
> div[role="page-files-list"]
> div.file-item
> button {
main > section.file-manager > div.page-images-list > div.video-item > button,
main > section.file-manager > div.page-files-list > div.audio-item > button,
main > section.file-manager > div.page-files-list > div.file-item > button {
position: absolute;
top: 0;
left: 0;
}
main > section[role="file-manager"] > div[role="page-files-list"] > div.audio-item {
main > section.file-manager > div.page-files-list > div.audio-item {
background: url("/assets/images/global/upload-audio.png") no-repeat center center /
cover;
}
main > section[role="file-manager"] > div[role="page-files-list"] > div.file-item {
main > section.file-manager > div.page-files-list > div.file-item {
background: url("/assets/images/global/upload-doc.png") no-repeat center center / cover;
}
main > section[role="file-manager"] > div[role="page-files-list"] > div.file-item > a {
main > section.file-manager > div.page-files-list > div.file-item > a {
position: absolute;
bottom: 0;
background: var(--secondary);
padding: 2px;
}
main
> section[role="file-manager"]
> div[role="page-files-list"]
> div.audio-item
> audio {
main > section.file-manager > div.page-files-list > div.audio-item > audio {
height: 100%;
width: 100%;
}
/* PAGE META */
main > section[role="page-meta"] {
main > section.page-meta {
width: 100%;
background: var(--secondary-highlight);
}
main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
main > section.page-meta > div.page-meta-wrapper {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
@ -168,7 +130,7 @@ main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
color: var(--secondary);
}
main section[role="page-meta"] textarea#post-title-text {
main section.page-meta textarea#post-title-text {
font-family: var(--base-type);
width: 100%;
height: 80px;
@ -176,14 +138,14 @@ main section[role="page-meta"] textarea#post-title-text {
color: var(--primary);
}
main section[role="page-meta"] textarea#post-tags {
main section.page-meta textarea#post-tags {
font-family: var(--base-type);
width: 100%;
height: 80px;
color: var(--primary);
}
main section[role="page-meta"] select {
main section.page-meta select {
background: var(--primary);
color: var(--secondary);
border-radius: 3px;
@ -194,15 +156,11 @@ main section[role="page-meta"] select {
font-size: 1.5em;
}
main section[role="page-meta"] div[role="page-options"] {
main section.page-meta div.page-options {
width: 100%;
}
main
section[role="page-meta"]
div[role="page-meta-wrapper"]
div[role="page-options"]
button {
main section.page-meta div.page-meta-wrapper div.page-options button {
width: 25%;
height: 45px;
transition: all 0.3s linear;
@ -214,45 +172,36 @@ main
}
main
> section[role="page-meta"]
> div[role="page-meta-wrapper"]
> div[role="page-options"]
> section.page-meta
> div.page-meta-wrapper
> div.page-options
> button.post-option-btn:nth-child(3) {
border-radius: 3px 0 0 3px;
}
main
> section[role="page-meta"]
> div[role="page-meta-wrapper"]
> div[role="page-options"]
> a
> button {
main > section.page-meta > div.page-meta-wrapper > div.page-options > a > button {
border-radius: 0 3px 3px 0;
}
main
section[role="page-meta"]
div[role="page-meta-wrapper"]
div[role="page-created"]
input {
main section.page-meta div.page-meta-wrapper div.page-created input {
display: none;
visibility: hidden;
}
/* TEXT EDITOR */
main > section[role="text-editor"] {
main > section.text-editor {
width: 100%;
max-width: 900px;
margin: 10px auto;
}
main section[role="text-editor"] .icon-hide {
main section.text-editor .icon-hide {
display: none;
visibility: hidden;
}
main > section[role="text-editor"] > div[role="text-editor-control"] {
main > section.text-editor > div.text-editor-control {
display: grid;
grid-template-columns: repeat(10, 1fr);
}
@ -264,7 +213,7 @@ main > section[role="text-editor"] > div[role="text-editor-control"] {
top: 65px;
}
main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
main > section.text-editor > div.edit-post-wrapper {
width: 100%;
max-width: 900px;
border-radius: 5px;
@ -272,13 +221,13 @@ main > section[role="text-editor"] > div[role="edit-post-wrapper"] {
margin: 10px 0;
}
main > section[role="text-editor"] > div[role="edit-post-wrapper"] textarea:focus {
main > section.text-editor > div.edit-post-wrapper textarea:focus {
outline: none;
border-color: var(--secondary-highlight);
}
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
main section.text-editor div.edit-post-wrapper #edit,
main section.text-editor div.edit-post-wrapper #highlight {
font-family: var(--mono-type);
border: 0;
width: 100%;
@ -297,25 +246,25 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
margin: 0;
}
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight-content {
main section.text-editor div.edit-post-wrapper #highlight-content {
word-wrap: normal;
white-space: pre-wrap;
line-break: normal;
}
main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #edit {
main > section.text-editor > div.edit-post-wrapper > #edit {
z-index: 1;
background: transparent;
color: transparent;
caret-color: var(--secondary-highlight);
}
main > section[role="text-editor"] > div[role="edit-post-wrapper"] > #highlight {
main > section.text-editor > div.edit-post-wrapper > #highlight {
z-index: 0;
}
main section[role="text-editor"] div[role="edit-post-wrapper"] pre,
main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
main section.text-editor div.edit-post-wrapper pre,
main section.text-editor div.edit-post-wrapper pre code {
padding: 0;
margin: 0;
}
@ -323,68 +272,56 @@ main section[role="text-editor"] div[role="edit-post-wrapper"] pre code {
/* RESPONSIVE */
@media only screen and (max-width: 900px) {
main > section[role="file-manager"] > div[role="file-drop"],
main > section[role="file-manager"] > div[role="page-images-list"],
main > section[role="file-manager"] > div[role="page-files-list"],
main > section[role="page-meta"] > div[role="page-meta-wrapper"],
main > section[role="text-editor"] {
main > section.file-manager > div.file-drop,
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list,
main > section.page-meta > div.page-meta-wrapper,
main > section.text-editor {
width: 97%;
}
}
@media only screen and (max-width: 480px) {
main > section[role="file-manager"] > div[role="page-images-list"],
main > section[role="file-manager"] > div[role="page-files-list"] {
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list {
grid-template-columns: 1fr 1fr 1fr;
}
main > section[role="file-manager"] > div[role="file-drop"],
main > section[role="file-manager"] > div[role="page-images-list"],
main > section[role="file-manager"] > div[role="page-files-list"],
main > section[role="page-meta"] > div[role="page-meta-wrapper"],
main > section[role="text-editor"] {
main > section.file-manager > div.file-drop,
main > section.file-manager > div.page-images-list,
main > section.file-manager > div.page-files-list,
main > section.page-meta > div.page-meta-wrapper,
main > section.text-editor {
width: 95%;
}
main > section[role="page-meta"] > div[role="page-meta-wrapper"] {
main > section.page-meta > div.page-meta-wrapper {
grid-template-columns: 1fr;
}
main > section[role="text-editor"] > div[role="text-editor-control"] {
main > section.text-editor > div.text-editor-control {
display: grid;
grid-template-columns: repeat(5, 1fr);
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(1) {
main > section.text-editor > div.text-editor-control > button:nth-child(1) {
border-radius: 3px 0;
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(5) {
main > section.text-editor > div.text-editor-control > button:nth-child(5) {
border-radius: 0 3px;
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(6) {
main > section.text-editor > div.text-editor-control > button:nth-child(6) {
border-radius: 0 0 0 3px;
}
main
> section[role="text-editor"]
> div[role="text-editor-control"]
> button:nth-child(10) {
main > section.text-editor > div.text-editor-control > button:nth-child(10) {
border-radius: 0 0 3px;
}
main section[role="text-editor"] div[role="edit-post-wrapper"] #edit,
main section[role="text-editor"] div[role="edit-post-wrapper"] #highlight {
main section.text-editor div.edit-post-wrapper #edit,
main section.text-editor div.edit-post-wrapper #highlight {
font-size: 0.8em;
}
}

2
public/assets/scripts/dash/app/actions/PageActions.js
View file

@ -10,7 +10,7 @@ export default class PostActions {
collectInfo(files) {
return new Promise((resolve, reject) => {
let pageInfo = [];
let pageRef = document.querySelector('[role="file-manager"]');
let pageRef = document.querySelector('.file-manager');
//process html content for storage
let txt = document.createElement('textarea');
txt.innerHTML = document.getElementById('highlight-content').innerHTML;

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

@ -28,23 +28,23 @@ export default class PostEditor {
this.postUUID = null;
this.postLayout = null;
this.fm = null;
if (document.querySelector('[role="file-manager"]').getAttribute('data-index')) {
if (document.querySelector('.file-manager').getAttribute('data-index')) {
this.postID = document
.querySelector('[role="file-manager"]')
.querySelector('.file-manager')
.getAttribute('data-index');
this.postUUID = document
.querySelector('[role="file-manager"]')
.querySelector('.file-manager')
.getAttribute('data-uuid');
this.postLayout = document
.querySelector('[role="file-manager"]')
.querySelector('.file-manager')
.getAttribute('data-layout');
}
if (document.getElementById('edit')) {
this.editor = new TextEditor(
document.getElementById('edit'),
document.querySelector('[role="file-manager"]').offsetHeight +
document.querySelector('[role="page-meta"]').offsetHeight +
document.querySelector('[role="text-editor"]').offsetHeight
document.querySelector('.page-meta').offsetHeight +
document.querySelector('.file-manager').offsetHeight +
document.querySelector('.text-editor').offsetHeight
);
this.editor.addListener(
EditorEvent.EDITOR_DELETE,
@ -89,13 +89,13 @@ export default class PostEditor {
// methods
//--------------------------
start() {
if (document.querySelector('[role="file-drop"]')) {
if (document.querySelector('.file-drop')) {
//insert fileManager here
this.fm = new FileManager(
document.querySelector('[role="file-drop"]'),
document.querySelector('.file-drop'),
document.getElementById('page-files-upload'),
document.getElementById('page-images-list'),
document.querySelector('[role="page-files-list"]')
document.querySelector('.page-files-list')
);
var optionButtons = document.querySelectorAll('.post-option-btn');
for (var i = 0, length = optionButtons.length; i < length; i++) {

14
public/assets/scripts/dash/app/ui/TextEditor.js
View file

@ -18,22 +18,20 @@ class TextEditor extends EventEmitter {
constructor(textEditor, scrollLimit) {
super();
document
.querySelector('[role="text-editor-control"]')
.addEventListener('scroll', e => {
console.log('HERE');
});
document.querySelector('.text-editor-control').addEventListener('scroll', e => {
console.log('HERE');
});
document.body.addEventListener('scroll', e => {
var fixLimit = scrollLimit;
//console.log('POSITION', document.body.scrollTop + ' : ' + fixLimit);
if (document.body.scrollTop + 5 >= fixLimit) {
document
.querySelector('[role="text-editor-control"]')
.querySelector('.text-editor-control')
.classList.add('control-freeze');
} else {
document
.querySelector('[role="text-editor-control"]')
.querySelector('.text-editor-control')
.classList.remove('control-freeze');
}
});
@ -47,7 +45,7 @@ class TextEditor extends EventEmitter {
.replace(new RegExp('&', 'g'), '&amp;')
.replace(new RegExp('<', 'g'), '&lt;');
let editorHeight = document.getElementById('highlight').offsetHeight;
document.querySelector('[role="edit-post-wrapper"]').style.height =
document.querySelector('.edit-post-wrapper').style.height =
editorHeight + 'px';
e.target.style.height = editorHeight + 30 + 'px'; //TODO: yeah, it's ugly but it works for now, fix soon
// Syntax Highlight

42
resources/views/back/page.blade.php
View file

@ -32,21 +32,21 @@
@endphp
@section('main-content')
<section data-index="{{ $id }}" data-uuid="{{ $uuid }}" data-slug="{{ $slug }}" data-layout="{{ $layout }}" role="file-manager">
<section data-index="{{ $id }}" data-uuid="{{ $uuid }}" data-slug="{{ $slug }}" data-layout="{{ $layout }}" class="file-manager">
@if($feature == '')
<div role="file-drop">
<div class="file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
<label role="list-title">IMAGES AND VIDEO</label>
<div id="page-images-list" role="page-images-list"></div>
<label role="list-title">FILES</label>
<div role="page-files-list"></div>
<label class="list-title">IMAGES AND VIDEO</label>
<div id="page-images-list" class="page-images-list"></div>
<label class="list-title">FILES</label>
<div class="page-files-list"></div>
@else
<div role="file-drop">
<div class="file-drop">
<label for="page-files-upload">DRAG AND DROP FILES OR CLICK TO SELECT</label>
</div>
<label role="list-title">IMAGES AND VIDEO</label>
<div id="page-images-list" role="page-images-list">
<label class="list-title">IMAGES AND VIDEO</label>
<div id="page-images-list" class="page-images-list">
@if(count($media)>1)
@foreach($media as $item)
@if($item['type'] == "mp4")
@ -80,8 +80,8 @@
@endif
@endif
</div>
<label role="list-title">FILES</label>
<div role="page-files-list">
<label class="list-title">FILES</label>
<div class="page-files-list">
@if(count($files) > 1)
@foreach($files as $item)
@php
@ -135,17 +135,17 @@
</div>
@endif
</section><section role="page-meta">
<div role="page-meta-wrapper">
<div role="page-title">
</section><section class="page-meta">
<div class="page-meta-wrapper">
<div class="page-title">
<strong>TITLE</strong>
<textarea id="post-title-text" type="text" name="post-title-text" class="post-edit" placeholder="TITLE">{{ $title }}</textarea>
</div>
<div role="page-tags">
<div class="page-tags">
<strong>TAGS</strong>
<textarea id="post-tags" type="text" name="post-tags" class="form-control" placeholder="tags [comma seperated]">{{ $tags }}</textarea>
</div>
<div role="page-layouts">
<div class="page-layouts">
<strong>LAYOUTS</strong>
<select id="page-templates">
@foreach($views as $view)
@ -157,19 +157,19 @@
@endforeach
</select>
</div>
<div role="page-options">
<div class="page-options">
<strong>OPTIONS</strong>
@spaceless
@include('includes.options')
@endspaceless
</div>
<div role="page-updated">
<div class="page-updated">
<strong>UPDATED</strong>
<span id="post-date" type="text">
{{ $updated }}
</span>
</div>
<div role="page-created">
<div class="page-created">
<strong>CREATED</strong>
<span id="post-date" type="text">
{{ $date }}
@ -180,11 +180,11 @@
</div>
</div>
</section>
<section role="text-editor">
<section class="text-editor">
@spaceless
@include('includes.editor')
@endspaceless
<div role="edit-post-wrapper">
<div class="edit-post-wrapper">
<textarea id="edit" spellcheck="false" class="language-md">{{ $content }}</textarea>
<pre id="highlight"><code id="highlight-content" class="language-md"></code></pre>
</div>

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

@ -1,4 +1,4 @@
<div role="text-editor-control">
<div class="text-editor-control">
<button id="edit-bold" class="content-editor-btn-text editor-button" title="bold">
<svg id="edit-bold" role="icon">
<use id="edit-bold" xlink:href="/assets/images/global/sprite.svg#tabler-bold"/>