mirror of
https://github.com/mdbootstrap/mdb-ui-kit.git
synced 2024-09-21 03:19:09 +03:00
#822 drawer development - remove layout.js, functionality is provided by BaseLayout to Drawer. Auto create canvas element if necessary - preparing for multi-drawer
This commit is contained in:
Kevin Ross
parent
42f9b656cf
commit
56d61691b5
|
|
@ -8,238 +8,237 @@ js: example.js
|
|||
<!-- Custom styles for this template -->
|
||||
<link href="example.css" rel="stylesheet">
|
||||
|
||||
<div class="mdb-layout-canvas">
|
||||
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
|
||||
<header class="mdb-layout-header">
|
||||
<div class="navbar navbar-light bg-faded navbar-static-top">
|
||||
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#my-drawer">
|
||||
<span class="sr-only">Toggle drawer</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">
|
||||
Home
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav pull-xs-right">
|
||||
<li class="nav-item hidden-sm-down">
|
||||
<button class="btn mdb-btn-icon" title="Drawer force close" id="drawer-visibility">
|
||||
<i class="material-icons">visibility</i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item hidden-sm-down">
|
||||
<button class="btn mdb-btn-icon" title="Drawer left" id="drawer-f-l">
|
||||
<i class="material-icons">border_left</i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item hidden-sm-down">
|
||||
<button class="btn mdb-btn-icon" title="Drawer right" id="drawer-f-r">
|
||||
<i class="material-icons">border_right</i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item hidden-sm-down">
|
||||
<button class="btn mdb-btn-icon" title="Drawer top" id="drawer-f-t">
|
||||
<i class="material-icons">border_top</i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item hidden-sm-down">
|
||||
<button class="btn mdb-btn-icon" title="Drawer bottom" id="drawer-f-b">
|
||||
<i class="material-icons">border_bottom</i>
|
||||
</button>
|
||||
</li>
|
||||
<div class="mdb-layout-container mdb-drawer-f-l mdb-drawer-overlay-md-down mdb-drawer-in-lg-up">
|
||||
<header class="mdb-layout-header">
|
||||
<div class="navbar navbar-light bg-faded navbar-static-top">
|
||||
<button class="navbar-toggler hidden-lg-up" type="button" data-toggle="drawer" data-target="#my-drawer">
|
||||
<span class="sr-only">Toggle drawer</span>
|
||||
<i class="material-icons">menu</i>
|
||||
</button>
|
||||
<ul class="nav navbar-nav">
|
||||
<li class="nav-item">
|
||||
Home
|
||||
</li>
|
||||
</ul>
|
||||
<ul class="nav navbar-nav pull-xs-right">
|
||||
<li class="nav-item hidden-sm-down">
|
||||
<button class="btn mdb-btn-icon" title="Drawer force close" id="drawer-visibility">
|
||||
<i class="material-icons">visibility</i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item hidden-sm-down">
|
||||
<button class="btn mdb-btn-icon" title="Drawer left" id="drawer-f-l">
|
||||
<i class="material-icons">border_left</i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item hidden-sm-down">
|
||||
<button class="btn mdb-btn-icon" title="Drawer right" id="drawer-f-r">
|
||||
<i class="material-icons">border_right</i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item hidden-sm-down">
|
||||
<button class="btn mdb-btn-icon" title="Drawer top" id="drawer-f-t">
|
||||
<i class="material-icons">border_top</i>
|
||||
</button>
|
||||
</li>
|
||||
<li class="nav-item hidden-sm-down">
|
||||
<button class="btn mdb-btn-icon" title="Drawer bottom" id="drawer-f-b">
|
||||
<i class="material-icons">border_bottom</i>
|
||||
</button>
|
||||
</li>
|
||||
|
||||
|
||||
<li class="nav-item">
|
||||
<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
|
||||
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-controls="collapse-search">
|
||||
<i class="material-icons">search</i>
|
||||
</button>
|
||||
<span id="collapse-search" class="collapse">
|
||||
<input class="form-control" type="text" id="search" placeholder="Enter your query...">
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="dropdown">
|
||||
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="nav-extras-menu" data-toggle="dropdown" aria-haspopup="true" >
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-extras-menu">
|
||||
<button class="dropdown-item" type="button">About</button>
|
||||
<button class="dropdown-item" type="button">Contact</button>
|
||||
<button class="dropdown-item" type="button">Legal information</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div id="my-drawer" class="mdb-layout-drawer">
|
||||
<header>
|
||||
<img src="images/user.jpg" class="avatar">
|
||||
<div class="account">
|
||||
<span>hello@example.com</span>
|
||||
<li class="nav-item">
|
||||
<div class="mdb-form-group mdb-collapse-inline pull-xs-right">
|
||||
<button class="btn mdb-btn-icon" for="search" data-toggle="collapse" data-target="#collapse-search" aria-controls="collapse-search">
|
||||
<i class="material-icons">search</i>
|
||||
</button>
|
||||
<span id="collapse-search" class="collapse">
|
||||
<input class="form-control" type="text" id="search" placeholder="Enter your query...">
|
||||
</span>
|
||||
</div>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<div class="dropdown">
|
||||
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="nav-account-menu" data-toggle="dropdown" aria-haspopup="true">
|
||||
<i class="material-icons">arrow_drop_down</i>
|
||||
<button class="btn mdb-btn-icon btn-secondary dropdown-toggle" type="button" id="nav-extras-menu" data-toggle="dropdown" aria-haspopup="true" >
|
||||
<i class="material-icons">more_vert</i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-account-menu">
|
||||
<a class="dropdown-item">hello@example.com</a>
|
||||
<a class="dropdown-item">info@example.com</a>
|
||||
<a class="dropdown-item"><i class="material-icons">add</i>Add account...</a>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-extras-menu">
|
||||
<button class="dropdown-item" type="button">About</button>
|
||||
<button class="dropdown-item" type="button">Contact</button>
|
||||
<button class="dropdown-item" type="button">Legal information</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<ul class="mdb-nav list-group">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">home</i>Home
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">inbox</i>Inbox
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">delete</i>Trash
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">report</i>Spam
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">forum</i>Forums
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">flag</i>Updates
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">local_offer</i>Promos
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">shopping_cart</i>Purchases
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">people</i>Social
|
||||
</a>
|
||||
|
||||
<li class="mdb-layout-spacer"></li>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span>
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
|
||||
<main class="mdb-layout-content">
|
||||
<div class="container">
|
||||
<div class="alert alert-info" role="alert">
|
||||
This is an implementation of
|
||||
<a href="http://www.getmdl.io/templates/dashboard/index.html">Material Design Lite's dashboard template</a>. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team.
|
||||
<small>(see license)</small>
|
||||
. Additional functionality showing drawer placement is an MDB only feature. See the icons in the navbar.
|
||||
</div>
|
||||
|
||||
<!-- round charts -->
|
||||
<div class="card card-block">
|
||||
<div class="row">
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan font-size="0.2" dy="-0.07">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan dy="-0.07" font-size="0.2">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan dy="-0.07" font-size="0.2">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan dy="-0.07" font-size="0.2">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
<div id="my-drawer" class="mdb-layout-drawer">
|
||||
<header>
|
||||
<img src="images/user.jpg" class="avatar">
|
||||
<div class="account">
|
||||
<span>hello@example.com</span>
|
||||
<div class="dropdown">
|
||||
<button class="btn mdb-btn-icon dropdown-toggle" type="button" id="nav-account-menu" data-toggle="dropdown" aria-haspopup="true">
|
||||
<i class="material-icons">arrow_drop_down</i>
|
||||
</button>
|
||||
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="nav-account-menu">
|
||||
<a class="dropdown-item">hello@example.com</a>
|
||||
<a class="dropdown-item">info@example.com</a>
|
||||
<a class="dropdown-item"><i class="material-icons">add</i>Add account...</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
<ul class="mdb-nav list-group">
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">home</i>Home
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">inbox</i>Inbox
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">delete</i>Trash
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">report</i>Spam
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">forum</i>Forums
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">flag</i>Updates
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">local_offer</i>Promos
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">shopping_cart</i>Purchases
|
||||
</a>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">people</i>Social
|
||||
</a>
|
||||
|
||||
<li class="mdb-layout-spacer"></li>
|
||||
<a class="list-group-item">
|
||||
<i class="material-icons" role="presentation">help_outline</i><span class="sr-only">Help</span>
|
||||
</a>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<main class="mdb-layout-content">
|
||||
<div class="container">
|
||||
<div class="alert alert-info" role="alert">
|
||||
This is an implementation of
|
||||
<a href="http://www.getmdl.io/templates/dashboard/index.html">Material Design Lite's dashboard template</a>. It provides a simple way to compare approaches with source code. Original design and assets credited to the MDL team.
|
||||
<small>(see license)</small>
|
||||
. Additional functionality showing drawer placement is an MDB only feature. See the icons in the navbar.
|
||||
</div>
|
||||
|
||||
<!-- round charts -->
|
||||
<div class="card card-block">
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<!-- line charts-->
|
||||
<div class="card card-block">
|
||||
<div class="demo-graphs">
|
||||
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
|
||||
<use xlink:href="#chart"/>
|
||||
</svg>
|
||||
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
|
||||
<use xlink:href="#chart"/>
|
||||
</svg>
|
||||
</div>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan font-size="0.2" dy="-0.07">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan dy="-0.07" font-size="0.2">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan dy="-0.07" font-size="0.2">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
<svg fill="currentColor" width="200px" height="200px" viewBox="0 0 1 1" class="demo-chart mdl-cell col-xs-12 col-sm-6 col-md-3">
|
||||
<use xlink:href="#piechart" mask="url(#piemask)"/>
|
||||
<text x="0.5" y="0.5" font-family="Roboto" font-size="0.3" fill="#888" text-anchor="middle" dy="0.1">82
|
||||
<tspan dy="-0.07" font-size="0.2">%</tspan>
|
||||
</text>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-8">
|
||||
<!-- line charts-->
|
||||
<div class="card card-block">
|
||||
<div class="demo-graphs">
|
||||
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
|
||||
<use xlink:href="#chart"/>
|
||||
</svg>
|
||||
<svg fill="currentColor" viewBox="0 0 500 250" class="demo-graph">
|
||||
<use xlink:href="#chart"/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 demo-cards">
|
||||
|
||||
<!-- Updates card using header bg image -->
|
||||
<div class="demo-updates card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Updates</h2>
|
||||
</div>
|
||||
|
||||
<div class="card-block">
|
||||
<p class="card-text">Non dolore elit adipisicing ea reprehenderit consectetur culpa.</p>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="btn">Read More</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="col-md-4 demo-cards">
|
||||
|
||||
<!-- Updates card using header bg image -->
|
||||
<div class="demo-updates card">
|
||||
<div class="card-header">
|
||||
<h2 class="card-title">Updates</h2>
|
||||
<div class="demo-options card">
|
||||
<div class="card-block">
|
||||
<p class="card-title">View options</p>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox1">
|
||||
Click per object
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="card-block">
|
||||
<p class="card-text">Non dolore elit adipisicing ea reprehenderit consectetur culpa.</p>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox2">
|
||||
Views per object
|
||||
</label>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="btn">Read More</a>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox3">
|
||||
Objects selected
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox4">
|
||||
Objects viewed
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="demo-options card">
|
||||
<div class="card-block">
|
||||
<p class="card-title">View options</p>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox1">
|
||||
Click per object
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox2">
|
||||
Views per object
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox3">
|
||||
Objects selected
|
||||
</label>
|
||||
</div>
|
||||
<div class="checkbox">
|
||||
<label>
|
||||
<input type="checkbox" id="chkbox4">
|
||||
Objects viewed
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="btn">Change location</a>
|
||||
<i class="material-icons">location_on</i>
|
||||
</div>
|
||||
<div class="card-footer">
|
||||
<a href="#" class="btn">Change location</a>
|
||||
<i class="material-icons">location_on</i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" style="position: fixed; left: -1000px; height: -1000px;">
|
||||
<defs>
|
||||
<mask id="piemask" maskContentUnits="objectBoundingBox">
|
||||
|
|
@ -287,7 +286,3 @@ js: example.js
|
|||
</g>
|
||||
</defs>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
|
||||
<!--<script src="example.js"></script>-->
|
||||
|
|
|
|||
|
|
@ -4,16 +4,23 @@ import Util from './util'
|
|||
const BaseLayout = (($) => {
|
||||
|
||||
const ClassName = {
|
||||
CANVAS: 'mdb-layout-canvas',
|
||||
CONTAINER: 'mdb-layout-container',
|
||||
BACKDROP: `mdb-layout-backdrop`
|
||||
}
|
||||
|
||||
const Selector = {
|
||||
CANVAS: `.${ClassName.CANVAS}`,
|
||||
CONTAINER: `.${ClassName.CONTAINER}`,
|
||||
BACKDROP: `.${ClassName.BACKDROP}`
|
||||
}
|
||||
|
||||
const Default = {
|
||||
canvas: {
|
||||
create: true,
|
||||
required: true,
|
||||
template: `<div class="${ClassName.CANVAS}"></div>`
|
||||
},
|
||||
backdrop: {
|
||||
create: true,
|
||||
required: true,
|
||||
|
|
@ -33,6 +40,7 @@ const BaseLayout = (($) => {
|
|||
|
||||
this.$container = this.findContainer(true)
|
||||
this.$backdrop = this.resolveBackdrop()
|
||||
this.resolveCanvas();
|
||||
}
|
||||
|
||||
dispose(dataKey) {
|
||||
|
|
@ -44,6 +52,29 @@ const BaseLayout = (($) => {
|
|||
// ------------------------------------------------------------------------
|
||||
// protected
|
||||
|
||||
// Will wrap container in mdb-layout-canvas if necessary
|
||||
resolveCanvas() {
|
||||
let bd = this.findCanvas(false)
|
||||
if (bd === undefined || bd.length === 0) {
|
||||
if (this.config.canvas.create) {
|
||||
this.$container.wrap(this.config.canvas.template)
|
||||
}
|
||||
|
||||
bd = this.findCanvas(this.config.canvas.required)
|
||||
}
|
||||
|
||||
return bd
|
||||
}
|
||||
|
||||
// Find closest mdb-layout-container based on the given context
|
||||
findCanvas(raiseError = true, context = this.$container) {
|
||||
let canvas = context.closest(Selector.CANVAS)
|
||||
if (canvas.length === 0 && raiseError) {
|
||||
$.error(`Failed to find ${Selector.CANVAS} for ${Util.describe(context)}`)
|
||||
}
|
||||
return canvas
|
||||
}
|
||||
|
||||
// Will add mdb-layout-backdrop to mdb-layout-container if necessary
|
||||
resolveBackdrop() {
|
||||
let bd = this.findBackdrop(false)
|
||||
|
|
|
|||
|
|
@ -22,8 +22,7 @@ import Switch from './switch'
|
|||
import Text from './text'
|
||||
import Textarea from './textarea'
|
||||
|
||||
//import Layout from './layout'
|
||||
import DrawerToggle from './drawer'
|
||||
import Drawer from './drawer'
|
||||
|
||||
import Ripples from './ripples'
|
||||
import Autofill from './autofill'
|
||||
|
|
|
|||
|
|
@ -1,92 +0,0 @@
|
|||
//import BaseLayout from './baseLayout'
|
||||
//
|
||||
//const Layout = (($) => {
|
||||
//
|
||||
// /**
|
||||
// * ------------------------------------------------------------------------
|
||||
// * Constants
|
||||
// * ------------------------------------------------------------------------
|
||||
// */
|
||||
// const NAME = 'layout'
|
||||
// const DATA_KEY = `mdb.${NAME}`
|
||||
// const JQUERY_NAME = `mdb${NAME.charAt(0).toUpperCase() + NAME.slice(1)}`
|
||||
// const JQUERY_NO_CONFLICT = $.fn[JQUERY_NAME]
|
||||
//
|
||||
// //const ClassName = {
|
||||
// // CANVAS: 'mdb-layout-canvas',
|
||||
// // HEADER: 'mdb-layout-header',
|
||||
// // DRAWER: 'mdb-layout-drawer',
|
||||
// // CONTENT: 'mdb-layout-content',
|
||||
// // BACKDROP: 'mdb-layout-backdrop',
|
||||
// //}
|
||||
//
|
||||
// //const Selector = {
|
||||
// // DRAWER: `.${ClassName.DRAWER}`,
|
||||
// // HEADER: `.${ClassName.HEADER}`,
|
||||
// // CONTENT: `.${ClassName.CONTENT}`
|
||||
// //}
|
||||
//
|
||||
// const Default = {}
|
||||
//
|
||||
// /**
|
||||
// * ------------------------------------------------------------------------
|
||||
// * Class Definition
|
||||
// * ------------------------------------------------------------------------
|
||||
// */
|
||||
// class Layout extends BaseLayout {
|
||||
//
|
||||
// constructor($element, config) {
|
||||
// super($element, $.extend(true, {}, Default, config))
|
||||
//
|
||||
// // FIXME: I'm not sure we want to auto-resolve a canvas....think about it and refactor this or delete it.
|
||||
// // FIXME: with a goal of supporting two drawers, or even more, I'm not sure we want to auto-add the canvas because I think it's really only necessary if we have a fixed header...not sure.
|
||||
//
|
||||
// // FIXME: if this part is not needed, it seems this component could be deleted because the drawer component does the rest.
|
||||
//
|
||||
// //var canvas = document.createElement('div')
|
||||
// //canvas.addClass(ClassName.CANVAS)
|
||||
// //this.$element.parentElement.insertBefore(canvas, this.$element)
|
||||
// //this.$element.parentElement.removeChild(this.$element)
|
||||
// //canvas.appendChild(this.$element)
|
||||
//
|
||||
// //this.$header = $element.find(`> ${Selector.HEADER}`)
|
||||
// //this.$drawer = $element.find(`> ${Selector.DRAWER}`)
|
||||
// //this.$content = $element.find(`> ${Selector.CONTENT}`)
|
||||
// }
|
||||
//
|
||||
// dispose() {
|
||||
// super.dispose(DATA_KEY)
|
||||
// }
|
||||
//
|
||||
// // ------------------------------------------------------------------------
|
||||
// // static
|
||||
// static _jQueryInterface(config) {
|
||||
// return this.each(function () {
|
||||
// let $element = $(this)
|
||||
// let data = $element.data(DATA_KEY)
|
||||
//
|
||||
// if (!data) {
|
||||
// data = new Layout($element, config)
|
||||
// $element.data(DATA_KEY, data)
|
||||
// }
|
||||
// })
|
||||
// }
|
||||
// }
|
||||
//
|
||||
// /**
|
||||
// * ------------------------------------------------------------------------
|
||||
// * jQuery
|
||||
// * ------------------------------------------------------------------------
|
||||
// */
|
||||
// $.fn[JQUERY_NAME] = Layout._jQueryInterface
|
||||
// $.fn[JQUERY_NAME].Constructor = Layout
|
||||
// $.fn[JQUERY_NAME].noConflict = () => {
|
||||
// $.fn[JQUERY_NAME] = JQUERY_NO_CONFLICT
|
||||
// return Layout._jQueryInterface
|
||||
// }
|
||||
//
|
||||
// return Layout
|
||||
//
|
||||
//})(jQuery)
|
||||
//
|
||||
//export default Layout
|
||||
Loading…
Reference in New Issue
Block a user