EMBL Conditional Edit Links component
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.
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.
Edit
This section is a non-JS solution where a parent element has `.embl-coditional-edit__enabled`.
Edit
HTML
<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>
Usage
Currently supported methods:
- URL param:
?embl-conditional-edit=enabled
or ?embl-conditional-edit=1
- CSS cascaded:
embl-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.
Installation info
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
Sass/CSS
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
Changelog
Changelog
1.0.23
- small change to cards on homepage
1.0.18
1.0.17
1.0.16
1.0.13
- dependency bump
- adds roamap and consultation docs
1.0.12
- design token documenation now lives in the component libary
1.0.7
1.0.6
- begin to make more pattern/boilerplate guidance
- minor templating updates
1.0.5
1.0.4
- uses vf-favicon
- adds meta attributes
1.0.3
- run
vf-component-assets:everything
on local dev
- remove reference to removed
/css/app.css
1.0.2
- Add 404
- Fix component CSS generation
1.0.1
- Also generate per-component CSS with
vf-css:generate-component-css
1.0.0
- Initial release to be used with vf-core 2.2.0
Assets
File system location: components/embl-conditional-edit