TOOLBOX-MODAL (LMU Workspace Module )
src/app/shared/components/toolbox-modal/templates
Demo Section
Each variation will be presented in the following section.
Readme
toolboxModal (component)
Description
This blueprint is based on the blueprint of Veams.
Requirements
Veams#5.0.0
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/toolbox-modal
Fields
toolbox-modal.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.toolboxModalClasses | String | '' |
Modifier classes for component |
| settings.toolboxModalContextClass | String | 'default' |
Context class of component |
| settings.toolboxModalJsOptions | Object | null |
JavaScript options object which gets stringified |
Content
| Parameter | Type | Description |
|---|---|---|
| content.toolboxModalField | String | Please add a description! |
JavaScript Options
The module gives you the possibility to override default JS options:
| Option | Type | Default | Description |
|---|---|---|---|
| optionOne | String | 'is-option' |
Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $toolbox-modal-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-toolbox-modal:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
toolbox-modal.hbs
<div class="c-toolbox-modal{{#if settings.toolboxModalContextClass}}--{{settings.toolboxModalContextClass}}{{else}}--default{{/if}}{{#if settings.toolboxModalClasses}} {{settings.toolboxModalClasses}}{{/if}}"
data-css="c-toolbox-modal"
data-js-module="toolbox-modal"{{#if settings.toolboxModalJsOptions}}
data-js-options='{{stringify settings.toolboxModalJsOptions}}'{{/if}}>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn" data-js-item="open-modal">Open Modal</button>
<!-- The Modal -->
<div class="modal">
<div class="add-toolbox--modal">
<div class="grid__container">
<div class="grid__row">
<div class="add-toolbox__content">
<div class="add-toolbox__header">
<h2 class="add-toolbox__headline">Tool hinzufugen</h2>
<span data-js-item="close-modal" class="close">×</span>
</div>
<form class="c-form--default is-form is-error" method="POST"
data-css="c-form" data-js-module="form-ajax">
<div class="form__row">
<div class="form__col is-grid-col is-col-tablet-p-12">
<div class="form__radio">
<div class="form__radio-wrapper">
<ul class="form__radio-list">
<li class="form__radio-item">
<input id="radio-01" name="radio" type="radio" value="radio-01" checked="checked" class="form__radio-input">
<label role="button" for="radio-01" class="form__radio-label">
Radiobutton aktiv
</label>
</li>
<li class="form__radio-item">
<input id="radio-02" name="radio" type="radio" value="radio-02" class="form__radio-input">
<label role="button" for="radio-02" class="form__radio-label">
Radiobutton passiv
</label>
</li>
<li class="form__radio-item">
<input id="radio-03" name="radio" type="radio" value="radio-03" class="form__radio-input">
<label role="button" for="radio-03" class="form__radio-label">
Radiobutton passiv
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="form__row">
<div class="form__col is-col-tablet-p-12">
<p class="add-toolbox-info__text">
Die mit <span>*</span> gekennzeichneten Felder sind Pflichtfelder
</p>
</div>
</div>
<div class="form__row">
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="url" class="form__input-label">
URL <abbr title="Required">*</abbr>
</label>
</div>
<div class="form__input-wrapper">
<input id="url" name="url" type="url" placeholder="http://www.lmu.de/" required="required" class="form__input-text">
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="text1" class="form__input-label">
Name <abbr title="Required">*</abbr>
</label>
</div>
<div class="form__input-wrapper">
<input id="text1" name="name" type="text" required="required" class="form__input-text">
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="shorname" class="form__input-label">
Namenskürzel
</label>
</div>
<div class="form__input-wrapper">
<input id="shorname" name="shortname" type="text" class="form__input-text">
</div>
</div>
</div>
</div>
<div class="form__row ">
<div class="form__col is-grid-col is-col-tablet-p-12">
<button type="submit" class="form__submit">
<span class="from_submit-arrow"></span>
<span class="form__submit-text">Speichern</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
Data File
toolbox-modal.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"toolboxModalContextClass": "default",
"toolboxModalClasses": "",
"toolboxModalJsOptions": {}
},
"content": {}
}
}
}
Styles
toolbox-modal.scss
/* ===================================================
component: toolbox-modal
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-toolbox-modal"] {
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
.grid__row {
margin: 0 auto;
}
}
.display {
display: block;
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
.add-toolbox--modal{
background: #FFFFFF;
box-shadow: 3px 3px 5px 0 rgba(0,0,0,0.20);
}
.add-toolbox__content {
.add-toolbox__header {
display: flex;
justify-content: space-between;
.add-toolbox__headline {
font-family: Roboto-Bold;
font-size: 20px;
color: #202321;
letter-spacing: 0.3px;
line-height: 28px;
margin-top: 2rem;
margin-bottom: 2rem;
}
/* The Close Button */
.close {
color: $color-green;
font-size: 28px;
font-weight: bold;
margin-top: 1rem;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
}
.add-toolbox-info__text {
font-family: Roboto-Bold;
font-size: 12px;
color: #202321;
letter-spacing: 0.22px;
line-height: 24px;
span{
color: $color-green;
}
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-toolbox-modal--default {
}
Scripts
toolbox-modal.js
/**
* Description of ToolboxModal.
* Class properties and decorators are supported.
*
* @module ToolboxModal
* @version v1.0.0
*
* @author Serkan Ertan
*/
// Imports
import $ from 'jquery';
import Component from '@veams/component';
class ToolboxModal extends Component {
/**
* Class Properties
*/
$el = $(this.el);
modal;
/**
* Event & subscribe handling
*/
// Local Handlers
get events() {
return {
'{{context.EVENTS.click}} {{this.options.selectors.openModal}}': 'onOpen',
'{{context.EVENTS.click}} {{this.options.selectors.closeModal}}': 'onClose',
};
}
onOpen = (evt, target) => {
console.log(`You clicked on: `, target);
console.log('You got the following event: ', evt);
// Modal DOM elementi bul
this.modal = this.$el.find('.modal');
if (this.modal) {
this.modal.addClass('display');
}
};
onClose = (evt, target) => {
if (this.modal) {
this.modal.removeClass('display');
this.modal = null;
} else {
this.modal = this.$el.find('.modal');
if (this.modal) {
this.modal.removeClass('display');
this.modal = null;
}
}
}
onWindow = (evt) => {
if (evt.target === this.modal ) {
this.modal.removeClass('display');
}
}
// Global Handlers
get subscribe() {
return {
'{{context.EVENTS.resize}}': 'handleResize'
};
}
handleResize = () => {
console.log(`Browser was resized and catched by ToolboxModal!`);
};
/**
* Constructor for our class
*
* @see module.js
*
* @param {Object} obj - Object which is passed to our class
* @param {Object} obj.el - element which will be saved in this.el
* @param {Object} obj.options - options which will be passed in as JSON object
*/
constructor(obj) {
let options = {
selectors: {
openModal: '[data-js-item="open-modal"]',
closeModal: '[data-js-item="close-modal"]'
},
classes: {}
};
super(obj, options);
}
/**
* Lifecycle Hooks
*/
willMount() {
console.log('Component ToolboxModal will mount!');
}
didMount() {
console.log('Component ToolboxModal mounted!');
}
/**
* Render class
*/
render() {
return this;
}
}
export default ToolboxModal;
HTML Output
Default
<div class="c-toolbox-modal--default" data-css="c-toolbox-modal" data-js-module="toolbox-modal" data-js-options='{}'>
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn" data-js-item="open-modal">Open Modal</button>
<!-- The Modal -->
<div class="modal">
<div class="add-toolbox--modal">
<div class="grid__container">
<div class="grid__row">
<div class="add-toolbox__content">
<div class="add-toolbox__header">
<h2 class="add-toolbox__headline">Tool hinzufugen</h2>
<span data-js-item="close-modal" class="close">×</span>
</div>
<form class="c-form--default is-form is-error" method="POST" data-css="c-form" data-js-module="form-ajax">
<div class="form__row">
<div class="form__col is-grid-col is-col-tablet-p-12">
<div class="form__radio">
<div class="form__radio-wrapper">
<ul class="form__radio-list">
<li class="form__radio-item">
<input id="radio-01" name="radio" type="radio" value="radio-01" checked="checked" class="form__radio-input">
<label role="button" for="radio-01" class="form__radio-label">
Radiobutton aktiv
</label>
</li>
<li class="form__radio-item">
<input id="radio-02" name="radio" type="radio" value="radio-02" class="form__radio-input">
<label role="button" for="radio-02" class="form__radio-label">
Radiobutton passiv
</label>
</li>
<li class="form__radio-item">
<input id="radio-03" name="radio" type="radio" value="radio-03" class="form__radio-input">
<label role="button" for="radio-03" class="form__radio-label">
Radiobutton passiv
</label>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="form__row">
<div class="form__col is-col-tablet-p-12">
<p class="add-toolbox-info__text">
Die mit <span>*</span> gekennzeichneten Felder sind Pflichtfelder
</p>
</div>
</div>
<div class="form__row">
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="url" class="form__input-label">
URL <abbr title="Required">*</abbr>
</label>
</div>
<div class="form__input-wrapper">
<input id="url" name="url" type="url" placeholder="http://www.lmu.de/" required="required" class="form__input-text">
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="text1" class="form__input-label">
Name <abbr title="Required">*</abbr>
</label>
</div>
<div class="form__input-wrapper">
<input id="text1" name="name" type="text" required="required" class="form__input-text">
</div>
</div>
</div>
<div class="form__col is-grid-col is-col-tablet-p-4">
<div class="form__input">
<div class="form__label-wrapper">
<label for="shorname" class="form__input-label">
Namenskürzel
</label>
</div>
<div class="form__input-wrapper">
<input id="shorname" name="shortname" type="text" class="form__input-text">
</div>
</div>
</div>
</div>
<div class="form__row ">
<div class="form__col is-grid-col is-col-tablet-p-12">
<button type="submit" class="form__submit">
<span class="from_submit-arrow"></span>
<span class="form__submit-text">Speichern</span>
</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>