oda-framework
Version:
148 lines (146 loc) • 5.64 kB
JavaScript
let count = 0;
ODA({ is: 'oda-dropdown-tester', imports: '@oda/button, @oda/icon, @oda/checkbox, @tools/containers',
template: `
<style>
:host{
@apply --vertical;
@apply --flex;
box-sizing: border-box;
}
.box {
left: {{left}}px;
top: {{top}}px;
touch-action: none;
}
oda-checkbox {
cursor: pointer;
}
oda-button {
width: 240px;
margin: 2px;
border: 1px solid gray
}
.clear {
position: absolute;
top: 4px;
left: calc(50% - 60px);
width: 120px;
z-index: 100;
background: white;
}
</style>
<button style="width: 100px; margin-left: 12px">{{label}}</-button>
<oda-button class="clear" @tap="left=clientWidth/2-140;top=20;_lastX=_lastY=undefined">Clear position</oda-button>
<div class="box vertical" dragable style="border: 1px solid red; padding: 8px; background: lightyellow;
cursor: move; position: absolute" @pointerdown="_down">
<label>{{label}}</label>
<oda-button @tap="run">top</oda-button>
<oda-button @tap="run">left</oda-button>
<oda-button @tap="run">right</oda-button>
<oda-button @tap="run">bottom</oda-button>
<oda-button @tap="run">modal</oda-button>
<oda-button @tap="run">full</oda-button>
<div class="vertical" style="margin-top: 10px; align-items: left;justify-content: center;">
<div class="horizontal" style="align-items:center"><oda-checkbox ::value="parent"></oda-checkbox>- Parent</div>
<div class="horizontal" style="align-items:center"><oda-checkbox ::value="intersect"></oda-checkbox> - Intersect</div>
<div class="horizontal" style="align-items:center"><oda-checkbox ::value="useParentWidth"></oda-checkbox> - useParentWidth</div>
<div class="horizontal" style="align-items:center"><oda-checkbox ::value="showTitle"></oda-checkbox> - showTitle</div>
</div>
</div>
`,
get title() { return this.showTitle ? 'Заголовок' : '' },
$public: {
label: 'no iFrame',
left: {
$type: Number,
$def: 10,
$save: true
},
top: {
$type: Number,
$def: 50,
$save: true
},
parent: {
$type: Boolean,
$save: true
},
intersect: {
$type: Boolean,
$save: true
},
useParentWidth: {
$type: Boolean,
$save: true
},
showTitle: {
$type: Boolean,
$save: true
},
},
get saveKey() { return this.label },
_down(e) {
this._lastX = e.pageX;
this._lastY = e.pageY;
document.addEventListener("pointermove", this.__doMove ||= this._doMove.bind(this));
document.addEventListener("pointerup", this.__stopMove ||= this._stopMove.bind(this));
document.addEventListener("pointercancel", this.__stopMove);
},
_doMove(e) {
this.left += e.pageX - this._lastX;
this.top += e.pageY - this._lastY;
this._lastX = e.pageX;
this._lastY = e.pageY;
},
_stopMove() {
document.removeEventListener("pointermove", this.__doMove);
document.removeEventListener("pointerup", this.__stopMove);
document.removeEventListener("pointercancel", this.__stopMove);
},
async run(e) {
e.stopPropagation();
try {
const res = await ODA.showDropdown('oda-test-menu', { icon: 'icons:warning', iconSize: 60 }, { animation: 500, parent: this.parent ? e.target : null, intersect: this.intersect, useParentWidth: this.useParentWidth, align: e.target.innerText, icon: 'icons:info', title: 'Block - 0', id: count });
}
catch (e) { }
}
})
ODA({ is: 'oda-test-menu', imports: '@oda/button',
template: `
<style>
:host{
@apply --vertical;
align-items: center;
border: 4px solid red;
overflow: auto;
}
h4 {
padding: 0 16px;
margin: 0;
}
.lbl:hover {
background-color: silver;
}
</style>
<h4 ~for="6" class="horizontal center lbl" style="cursor: pointer" @tap.stop="_isOk($for.index)">
Запись - {{$for.item}}
<oda-button :id="'Title - ' + $for.item" @tap.stop="ontap" icon="icons:add" icon-size="32" fill="gray"></oda-button>
</h4>
<oda-button :icon-size :icon fill="red"></oda-button>
`,
closeAfterOk: true,
iconSize: 24,
icon: '',
async ontap(e) {
e.stopPropagation();
try {
count ||= 0;
count = +count + 1;
const res = await ODA.showDropdown('oda-test-menu', { icon: 'icons:warning', iconSize: 60 }, { parent: e.target, animation: 500, align: 'right', title: 'Block - ' + count, icon: 'icons:info', id: count });
}
catch (e) { }
},
_isOk(e) {
this.fire('ok', { detail: { index: e, el: this } });
}
})