maverick/docbrown
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add icon uploader in admin navigation links (#12388)

Browse source 
* Added svg image picker to navigation link form

* Added svg image picker to navigation link form

* removed unnecessary attribute at _form.html.erb

* Added targets into SvgIconUploadController

* Fixed accept file type in .erb and stimulus controller

* Fixed UI form elements
This commit is contained in:
João Gabriel Quaresma 2021-02-04 10:54:59 -03:00 • committed by GitHub
parent d67a259d91
commit b1e0dbcfa9
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 75 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

60
app/javascript/admin/controllers/svg_icon_upload_controller.js Normal file
View file

@ -0,0 +1,60 @@
import { Controller } from 'stimulus';
// eslint-disable-next-line no-restricted-syntax
export default class SvgIconUploadController extends Controller {
static targets = [
'svgIconContent',
'svgIconPreview',
'svgIconMessageValidate',
'navId',
];
selectSvgIcon(event) {
this.clearInvalidIconTypeMessage();
const icon = event.target.files[0];
if (icon.type !== 'image/svg+xml') {
this.invalidIconTypeMessage(icon.type);
const navigationLinkId = this.navIdTarget.attributes['nav-link-id'].value;
const ableToClearSvgIconContent =
!navigationLinkId && this.svgIconContentTarget.value;
if (ableToClearSvgIconContent) {
this.svgIconContentTarget.value = null;
this.setSvgIconPreview(null);
}
return;
}
const reader = new FileReader();
reader.readAsText(icon);
reader.onload = (content) => {
const result = content.target.result;
this.svgIconContentTarget.value = result;
this.setSvgIconPreview(result);
};
}
setSvgIconPreview(content) {
this.svgIconPreviewTarget.innerHTML = content;
if (content) this.svgIconPreviewTarget.classList.add('pb-3');
else if (this.svgIconPreviewTarget.classList.length !== 0)
this.svgIconPreviewTarget.classList.remove('pb-3');
}
clearInvalidIconTypeMessage() {
if (this.svgIconMessageValidateTarget.classList.length !== 0) {
this.svgIconMessageValidateTarget.classList.remove(
'alert',
'alert-danger',
);
this.svgIconMessageValidateTarget.innerHTML = null;
}
}
invalidIconTypeMessage(type) {
this.svgIconMessageValidateTarget.classList.add('alert', 'alert-danger');
this.svgIconMessageValidateTarget.innerHTML = `'${type}' is an invalid Icon type`;
}
}

19
app/views/admin/navigation_links/_form.html.erb
View file

@ -8,10 +8,21 @@
<%= form.text_field :url, class: "form-control" %>
<div class="alert alert-info">A full (external) or relative (internal) URL for the link</div>
</div>
<div class="form-group">
<%= form.label :icon %>
<%= form.text_area :icon, class: "form-control" %>
<div class="alert alert-info">An SVG icon should be pasted in the textarea</div>
<div class="form-group" data-controller="svg-icon-upload">
<div data-svg-icon-upload-target="navId" nav-link-id="<%= form.object[:id] %>">
<%= form.label :icon %>
<div data-svg-icon-upload-target="svgIconPreview" class="<%= form.object[:id].nil? ? "" : "pb-3" %>" style="width: 48px;">
<%= form.object[:icon]&.html_safe %>
</div>
<%= form.hidden_field :icon, "data-svg-icon-upload-target": "svgIconContent" %>
<input
type="file" accept="image/svg+xml" class="form-control-file"
data-action="svg-icon-upload#selectSvgIcon" />
<div class="alert alert-info">An SVG icon should be uploaded</div>
<div data-svg-icon-upload-target="svgIconMessageValidate"></div>
</div>
</div>
<div class="form-group">
<%= form.label :position %>