1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
|
import Base from './base'
import Util from './util'
const BaseLayout = (($) => {
const ClassName = {
CANVAS: 'bmd-layout-canvas',
CONTAINER: 'bmd-layout-container',
BACKDROP: `bmd-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,
template: `<div class="${ClassName.BACKDROP}"></div>`
}
}
/**
* ------------------------------------------------------------------------
* Class Definition
* ------------------------------------------------------------------------
*/
class BaseLayout extends Base {
constructor($element, config, properties = {}) {
super($element, $.extend(true, {}, Default, config), properties)
this.$container = this.findContainer(true)
this.$backdrop = this.resolveBackdrop()
this.resolveCanvas();
}
dispose(dataKey) {
super.dispose(dataKey)
this.$container = null
this.$backdrop = null
}
// ------------------------------------------------------------------------
// protected
// Will wrap container in bmd-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 bmd-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 bmd-layout-backdrop to bmd-layout-container if necessary
resolveBackdrop() {
let bd = this.findBackdrop(false)
if (bd === undefined || bd.length === 0) {
if (this.config.backdrop.create) {
this.$container.append(this.config.backdrop.template)
}
bd = this.findBackdrop(this.config.backdrop.required)
}
return bd
}
// Find closest bmd-layout-container based on the given context
findBackdrop(raiseError = true, context = this.$container) {
let backdrop = context.find(`> ${Selector.BACKDROP}`)
if (backdrop.length === 0 && raiseError) {
$.error(`Failed to find ${Selector.BACKDROP} for ${Util.describe(context)}`)
}
return backdrop
}
// Find closest bmd-layout-container based on the given context
findContainer(raiseError = true, context = this.$element) {
let container = context.closest(Selector.CONTAINER)
if (container.length === 0 && raiseError) {
$.error(`Failed to find ${Selector.CONTAINER} for ${Util.describe(context)}`)
}
return container
}
// ------------------------------------------------------------------------
// private
// ------------------------------------------------------------------------
// static
}
return BaseLayout
})(jQuery)
export default BaseLayout
|
