block code editor: fix drag and drop
This commit is contained in:
parent
b1ea641374
commit
a0211026ba
|
@ -817,6 +817,10 @@ label.required::after {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.block-root > .container .builder-add {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
.block-settings {
|
.block-settings {
|
||||||
padding: 4px;
|
padding: 4px;
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
|
|
|
@ -1,99 +1,104 @@
|
||||||
<template>
|
<template>
|
||||||
<Draggable
|
<div
|
||||||
|
class="block block-root"
|
||||||
v-if="Object.keys(widgets).length && value !== null"
|
v-if="Object.keys(widgets).length && value !== null"
|
||||||
v-model="value"
|
|
||||||
:key="blockKey"
|
|
||||||
:animation="200"
|
|
||||||
group="children"
|
|
||||||
ghost-class="ghost"
|
|
||||||
@start="dragStart"
|
|
||||||
@end="dragEnd"
|
|
||||||
handle=".dragger"
|
|
||||||
:class="{'block-show-dropzone': showDragDrop}"
|
|
||||||
class="block"
|
|
||||||
>
|
>
|
||||||
<BuilderBlockCreate
|
|
||||||
:container="value"
|
|
||||||
:widgets="widgets"
|
|
||||||
:openedBlocks="openedBlocks"
|
|
||||||
:allowedWidgets="[]"
|
|
||||||
v-if="value.length > 0"
|
|
||||||
position="top"
|
|
||||||
/>
|
|
||||||
<BuilderBlockItem
|
|
||||||
v-for="(block, key) in value"
|
|
||||||
:key="block.id + '-' + key"
|
|
||||||
:item="block"
|
|
||||||
:widgets="widgets"
|
|
||||||
:openedBlocks="openedBlocks"
|
|
||||||
:depth="1"
|
|
||||||
@remove-item="removeBlock(key)"
|
|
||||||
@drag-start="dragStart"
|
|
||||||
@drag-end="dragEnd"
|
|
||||||
/>
|
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div class="d-flex justify-content-between">
|
<BuilderBlockCreate
|
||||||
<BuilderBlockCreate
|
:container="value"
|
||||||
:container="value"
|
:widgets="widgets"
|
||||||
:widgets="widgets"
|
:openedBlocks="openedBlocks"
|
||||||
:openedBlocks="openedBlocks"
|
:allowedWidgets="[]"
|
||||||
:allowedWidgets="[]"
|
v-if="value.length > 0"
|
||||||
position="bottom"
|
position="top"
|
||||||
/>
|
/>
|
||||||
<div>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-sm"
|
|
||||||
v-on:click="openCodeEditor"
|
|
||||||
>
|
|
||||||
<i class="fas fa-code"></i>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<textarea :name="name" class="d-none">{{ toJson(value) }}</textarea>
|
<Draggable
|
||||||
<dialog ref="dialog" class="modal-dialog modal-dialog-large">
|
v-model="value"
|
||||||
<div class="modal-content">
|
:key="blockKey"
|
||||||
<div class="modal-header">
|
:animation="200"
|
||||||
<h5 class="modal-title">Code editor</h5>
|
group="children"
|
||||||
<button
|
ghost-class="ghost"
|
||||||
type="button"
|
@start="dragStart"
|
||||||
class="close"
|
@end="dragEnd"
|
||||||
v-on:click="closeCodeEditor"
|
handle=".dragger"
|
||||||
>
|
:class="{'block-show-dropzone': showDragDrop}"
|
||||||
<span aria-hidden="true">×</span>
|
>
|
||||||
</button>
|
<BuilderBlockItem
|
||||||
</div>
|
v-for="(block, key) in value"
|
||||||
<div class="modal-body">
|
:key="block.id + '-' + key"
|
||||||
<div class="form-group">
|
:item="block"
|
||||||
<textarea
|
:widgets="widgets"
|
||||||
class="form-control"
|
:openedBlocks="openedBlocks"
|
||||||
rows="10"
|
:depth="1"
|
||||||
ref="codeEditor"
|
@remove-item="removeBlock(key)"
|
||||||
v-model="nextValue"
|
@drag-start="dragStart"
|
||||||
|
@drag-end="dragEnd"
|
||||||
|
/>
|
||||||
|
<div class="container">
|
||||||
|
<div class="d-flex justify-content-between">
|
||||||
|
<BuilderBlockCreate
|
||||||
|
:container="value"
|
||||||
|
:widgets="widgets"
|
||||||
|
:openedBlocks="openedBlocks"
|
||||||
|
:allowedWidgets="[]"
|
||||||
|
position="bottom"
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-sm"
|
||||||
|
v-on:click="openCodeEditor"
|
||||||
>
|
>
|
||||||
</textarea>
|
<i class="fas fa-code"></i>
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="modal-footer">
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-secondary"
|
|
||||||
v-on:click="closeCodeEditor"
|
|
||||||
>
|
|
||||||
Close
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
type="button"
|
|
||||||
class="btn btn-primary"
|
|
||||||
v-on:click="checkAndSaveNextValue"
|
|
||||||
>
|
|
||||||
Save
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</dialog>
|
<textarea :name="name" class="d-none">{{ toJson(value) }}</textarea>
|
||||||
</Draggable>
|
<dialog ref="dialog" class="modal-dialog modal-dialog-large">
|
||||||
|
<div class="modal-content">
|
||||||
|
<div class="modal-header">
|
||||||
|
<h5 class="modal-title">Code editor</h5>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="close"
|
||||||
|
v-on:click="closeCodeEditor"
|
||||||
|
>
|
||||||
|
<span aria-hidden="true">×</span>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
<div class="modal-body">
|
||||||
|
<div class="form-group">
|
||||||
|
<textarea
|
||||||
|
class="form-control"
|
||||||
|
rows="10"
|
||||||
|
ref="codeEditor"
|
||||||
|
v-model="nextValue"
|
||||||
|
>
|
||||||
|
</textarea>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="modal-footer">
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-secondary"
|
||||||
|
v-on:click="closeCodeEditor"
|
||||||
|
>
|
||||||
|
Close
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
type="button"
|
||||||
|
class="btn btn-primary"
|
||||||
|
v-on:click="checkAndSaveNextValue"
|
||||||
|
>
|
||||||
|
Save
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</dialog>
|
||||||
|
</Draggable>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
|
@ -200,7 +205,6 @@ export default {
|
||||||
}
|
}
|
||||||
|
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
console.log(e)
|
|
||||||
hasError = true
|
hasError = true
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -27,7 +27,7 @@
|
||||||
type="button"
|
type="button"
|
||||||
class="block-header-item btn btn-sm btn-outline-secondary dragger"
|
class="block-header-item btn btn-sm btn-outline-secondary dragger"
|
||||||
>
|
>
|
||||||
<span class="fa fa-arrows-alt"></span>
|
<span class="fa fa-arrows-alt dragger"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
@ -40,7 +40,7 @@
|
||||||
class="block-header-item btn btn-sm text-white bg-danger"
|
class="block-header-item btn btn-sm text-white bg-danger"
|
||||||
v-on:click="removeMe(item)"
|
v-on:click="removeMe(item)"
|
||||||
>
|
>
|
||||||
<span class="fa fa-trash"></span>
|
<span class="fa fa-trash dragger"></span>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in a new issue