Visual Framework
Visual Framework
Edit and configuration buttons often point to separate domain where the login stat of a user cannot be known, so this is a simple JavaScript method to enable links that point to edit and configuration pages.
Currently supported methods:
?embl-conditional-edit=enabled or ?embl-conditional-edit=1embl-coditional-edit__enabled .embl-conditional-edit { display: unset; }Note: this method is not about hiding the a URL from a user being able to see the link, rather it simply hides or shows a link based off a parameter.
Sample content with a condtional edit link beneatht it.
This is done through JavaScript where a parent element has data-embl-js-conditional-edit and ?embl-conditional-edit=enabled is appended to the URL.
This section is a non-JS solution where a parent element has `.embl-coditional-edit__enabled`.
<div class="vf-box vf-box-vf-box--secondary vf-box--outline" data-embl-js-conditional-edit>
<p class="vf-text vf-text-body--3">Sample content with a condtional edit link beneatht it.</p>
<p class="vf-text vf-text-body--3">This is done through JavaScript where a parent element has <code>data-embl-js-conditional-edit</code> and <code>?embl-conditional-edit=enabled</code> is appended to the URL.</p>
<p class="vf-text vf-text-body--3"><a class="vf-link embl-conditional-edit" href="#edit" target="_blank">Edit</a></p>
</div>
<div class="embl-coditional-edit__enabled | vf-box vf-box-vf-box--secondary vf-box--outline">
<p class="vf-text vf-text-body--3">This section is a non-JS solution where a parent element has `.embl-coditional-edit__enabled`.</p>
<p class="vf-text vf-text-body--3"><a class="vf-link embl-conditional-edit" href="#edit" target="_blank">Edit</a></p>
</div>
This repository is distributed with npm. After installing npm and yarn, you can install with this command.
$ yarn add --dev @visual-framework/embl-conditional-edit
The style files included are written in Sass. If you're using a VF-core project, you can import it like this:
@import "@visual-framework/embl-conditional-edit/index.scss";
Make sure you import Sass requirements along with the modules. You can use a project boilerplate or the vf-sass-starter
File system location: components/embl-conditional-edit
Find an issue on this page? Propose a change or discuss it.