commit d40f81f1f7834fb07106727fefbd4d15563b6b49
parent 208ee537b87ef3f8a1ba1fdb8790139c06800726
Author: Jan Dankert <develop@jandankert.de>
Date: Thu, 22 Apr 2021 00:30:08 +0200
Fix: Re-enable drag and drop
Diffstat:
7 files changed, 76 insertions(+), 38 deletions(-)
diff --git a/modules/cms/ui/themes/default/html/views/tree/branch.php b/modules/cms/ui/themes/default/html/views/tree/branch.php
@@ -1,13 +1,13 @@
<?php /* THIS FILE IS GENERATED from branch.tpl.src.xml - DO NOT CHANGE */ defined('APP_STARTED') || die('Forbidden'); use \template_engine\Output as O; ?>
<?php foreach((array)@$branch as $list_key=>$list_value) { extract($list_value); ?>
- <li class="<?php echo O::escapeHtml('or-navtree-node or-navtree-node--is-closed or-draggable or-draggable--type-'.@$type.' or-droppable-navigation') ?>"><?php echo O::escapeHtml('') ?>
+ <li class="<?php echo O::escapeHtml('or-navtree-node or-navtree-node--is-closed or-droppable-navigation') ?>"><?php echo O::escapeHtml('') ?>
<div class="<?php echo O::escapeHtml('or-navtree-tree or-navtree-node-control') ?>"><?php echo O::escapeHtml('') ?>
<?php $if5=($type); if($if5) { ?>
<i class="<?php echo O::escapeHtml('or-image-icon or-image-icon--node-closed or-navtree-tree-icon') ?>"><?php echo O::escapeHtml('') ?></i>
<?php } ?>
</div>
<div class="<?php echo O::escapeHtml('or-act-clickable') ?>"><?php echo O::escapeHtml('') ?>
- <a title="<?php echo O::escapeHtml(''.@$description.'') ?>" target="<?php echo O::escapeHtml('_self') ?>" data-type="<?php echo O::escapeHtml('open') ?>" data-action="<?php echo O::escapeHtml(''.@$action.'') ?>" data-method="<?php echo O::escapeHtml('') ?>" data-id="<?php echo O::escapeHtml(''.@$id.'') ?>" data-extra-type="<?php echo O::escapeHtml(''.@$type.'') ?>" data-extra="<?php echo O::escapeHtml('{"type":"'.@$type.'"}') ?>" href="<?php echo O::escapeHtml('#/'.@$action.'/'.@$id.'') ?>" class="<?php echo O::escapeHtml('or-link or-entry') ?>"><?php echo O::escapeHtml('') ?>
+ <a title="<?php echo O::escapeHtml(''.@$description.'') ?>" target="<?php echo O::escapeHtml('_self') ?>" data-type="<?php echo O::escapeHtml('open') ?>" data-action="<?php echo O::escapeHtml(''.@$action.'') ?>" data-method="<?php echo O::escapeHtml('') ?>" data-id="<?php echo O::escapeHtml(''.@$id.'') ?>" data-extra-type="<?php echo O::escapeHtml(''.@$type.'') ?>" data-extra="<?php echo O::escapeHtml('{"type":"'.@$type.'"}') ?>" href="<?php echo O::escapeHtml('#/'.@$action.'/'.@$id.'') ?>" class="<?php echo O::escapeHtml('or-link or-entry or-draggable or-draggable--type-'.@$type.'') ?>"><?php echo O::escapeHtml('') ?>
<i class="<?php echo O::escapeHtml('or-image-icon or-image-icon--action-'.@$icon.'') ?>"><?php echo O::escapeHtml('') ?></i>
<span class="<?php echo O::escapeHtml('or-navtree-text') ?>"><?php echo O::escapeHtml(''.@$text.'') ?></span>
</a>
diff --git a/modules/cms/ui/themes/default/html/views/tree/branch.tpl.src.xml b/modules/cms/ui/themes/default/html/views/tree/branch.tpl.src.xml
@@ -1,14 +1,14 @@
<output xmlns="http://www.openrat.de/template" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://www.openrat.de/template ../../../../../../../template_engine/components/template.xsd">
<list list="${branch}" extract="true">
- <part tag="li" class="navtree-node,navtree-node--is-closed,draggable,draggable--type-${type},droppable-navigation">
+ <part tag="li" class="navtree-node,navtree-node--is-closed,droppable-navigation">
<part class="navtree-tree,navtree-node-control">
<if true="${type}">
<image class="navtree-tree-icon" symbol="node-closed"/>
</if>
</part>
<part class="act-clickable">
- <link type="open" action="${action}" id="${id}" class="entry" title="${description}" var1="type"
+ <link type="open" action="${action}" id="${id}" class="entry,draggable,draggable--type-${type}" title="${description}" var1="type"
value1="${type}">
<image action="${icon}"/>
<text class="navtree-text" value="${text}"/>
diff --git a/modules/cms/ui/themes/default/script/openrat/workbench.js b/modules/cms/ui/themes/default/script/openrat/workbench.js
@@ -432,27 +432,63 @@ export default class Workbench {
);*/
// Enable HTML5-Drag n drop
- $(viewEl).find('.or-draggable').attr('draggable','true');
-
+ $(viewEl).find('.or-draggable').attr('draggable','true')
+ .on('dragstart',(e)=>{
+ $('.or-workbench').addClass('workbench--drag-active');
+ let link = e.currentTarget;
+ e.dataTransfer.effectAllowed = 'link';
+ e.dataTransfer.setData('id' , link.dataset.id );
+ e.dataTransfer.setData('action', link.dataset.action);
+ console.debug('drag started',link,e.dataTransfer);
+ })
+ .on('drag',(e)=>{
+ })
+ .on('dragend',(e)=>{
+ $('.or-workbench').removeClass('workbench--drag-active');
+ });
}
registerDroppable(viewEl) {
- $(viewEl).find('.or-droppable-selector').on('drop', (event) => {
+ $(viewEl).find('.or-droppable-selector').on('dragover', (e) => {
+ e.preventDefault();
+ }).on('drop', (event) => {
let data = event.dataTransfer.getData('text');
- console.debug('dropped:',dropped);
- let id = $(data).find('.or-link').data('id');
+ console.debug('dropped:', dropped);
+ let id = $(data).find('.or-link').data('id');
let name = $(data).find('.or-navtree-text').text();
- if (!name)
+ if (!name)
name = id;
- $(this).find('.or-selector-link-value').val( id );
- $(this).find('.or-selector-link-name' ).val( name ).attr('placeholder',name );
+ $(this).find('.or-selector-link-value').val(id);
+ $(this).find('.or-selector-link-name').val(name).attr('placeholder', name);
+ });
+
+ $(viewEl).find('.or-droppable')
+ }
+
+ registerAsDroppable( el, onDrop ) {
+
+ el.addEventListener('dragover', (e) => {
+ //e.stopPropagation();
+ e.preventDefault();
});
+ el.addEventListener('dragenter', (e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ e.currentTarget.classList.add('or-workbench--drop-active');
+ });
+
+ el.addEventListener('dragleave', (e) => {
+ e.stopPropagation();
+ e.preventDefault();
+ e.currentTarget.classList.remove('or-workbench--drop-active');
+ });
+ el.addEventListener('drop', onDrop);
}
diff --git a/modules/cms/ui/themes/default/style/openrat-ui.less b/modules/cms/ui/themes/default/style/openrat-ui.less
@@ -112,6 +112,10 @@ a:hover {
font-weight: bold;
}
+ &-draggable {
+ cursor: move;
+ }
+
&-droppable {
&--active {
diff --git a/modules/cms/ui/themes/default/style/openrat.css b/modules/cms/ui/themes/default/style/openrat.css
@@ -1365,6 +1365,9 @@ a:hover {
.or-dirty {
font-weight: bold;
}
+.or-draggable {
+ cursor: move;
+}
.or-droppable--active {
background-color: #3c8b2e !important;
cursor: move;
@@ -1392,7 +1395,7 @@ legend {
font-weight: bold;
padding: 0 0.5em;
}
-/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22mnt%5C%2Fdata%5C%2Fdankert%5C%2FEntwicklung%5C%2FProjekte%5C%2Fopenrat-cms%5C%2Fmodules%5C%2Fcms%5C%2Fui%5C%2Fthemes%5C%2Fdefault%5C%2Fstyle%5C%2Fopenrat-ui.less%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22%3BAAIA%3BAAAM%3BCAAO%3BCAAY%3B%3BAAuBzB%3BCAfQ%2CIAAC%3BEACG%2CSAAS%2CEAAT%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEAEA%3BEACA%3BEACA%3B%3B%3BAAIZ%3BCACE%3B%3BAAWF%3BCACE%3BCACA%3BCACA%3B%3B%3BAAKF%2CCAAC%3BAACD%2CCAAC%3BCACC%3BCACA%3B%3BAAGF%2CCAAC%3BAACD%2CCAAC%3BCACC%3BCACA%3B%3BAAIF%3BCACE%3B%3B%3BAAMF%3BCACE%3B%3BAAMF%3B%3B%3BAACI%2CGAAC%2COAAU%3BCAEP%3BCACA%3B%3BAAKJ%2CGAAC%3BCACG%3B%3BAAIJ%2CGAAC%3BCACG%3BCACA%3BCACA%3BCACA%3B%3BAAGJ%2CGAAC%3BCACG%3BCACA%3BCACA%2CgBAAA%3B%3BAAHJ%2CGAAC%2CSAKK%3BCACE%2CiBAAA%3BCACA%3BCACA%3BCAvEV%2CoBAAA%3BCACA%2CyBAAA%3BCACA%2C4BAAA%3BCACA%2C2BAAA%3B%3BAA0EE%2CGAAC%3BCACG%3B%3BAAKA%2CGAFH%2CUAEI%3BCAEG%3BCACA%3BCACA%3B%3BAAGJ%2CGATH%2CUASI%3BCACG%3BCACA%3BCACA%3B%3BAAKR%2CGAAC%3BCACG%3B%3BAAGJ%2CGAAC%3BCACG%3B%3BAAIJ%2CGAAC%3BCACC%3B%3BAACA%2CGAFD%2CKAEE%3BCACC%3B%3BAAWR%3BCACI%3BCACA%3BCACA%2CgBAAA%22%7D */
+/*# sourceMappingURL=data:application/json,%7B%22version%22%3A3%2C%22sources%22%3A%5B%22mnt%5C%2Fdata%5C%2Fdankert%5C%2FEntwicklung%5C%2FProjekte%5C%2Fopenrat-cms%5C%2Fmodules%5C%2Fcms%5C%2Fui%5C%2Fthemes%5C%2Fdefault%5C%2Fstyle%5C%2Fopenrat-ui.less%22%5D%2C%22names%22%3A%5B%5D%2C%22mappings%22%3A%22%3BAAIA%3BAAAM%3BCAAO%3BCAAY%3B%3BAAuBzB%3BCAfQ%2CIAAC%3BEACG%2CSAAS%2CEAAT%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEACA%3BEAEA%3BEACA%3BEACA%3B%3B%3BAAIZ%3BCACE%3B%3BAAWF%3BCACE%3BCACA%3BCACA%3B%3B%3BAAKF%2CCAAC%3BAACD%2CCAAC%3BCACC%3BCACA%3B%3BAAGF%2CCAAC%3BAACD%2CCAAC%3BCACC%3BCACA%3B%3BAAIF%3BCACE%3B%3B%3BAAMF%3BCACE%3B%3BAAMF%3B%3B%3BAACI%2CGAAC%2COAAU%3BCAEP%3BCACA%3B%3BAAKJ%2CGAAC%3BCACG%3B%3BAAIJ%2CGAAC%3BCACG%3BCACA%3BCACA%3BCACA%3B%3BAAGJ%2CGAAC%3BCACG%3BCACA%3BCACA%2CgBAAA%3B%3BAAHJ%2CGAAC%2CSAKK%3BCACE%2CiBAAA%3BCACA%3BCACA%3BCAvEV%2CoBAAA%3BCACA%2CyBAAA%3BCACA%2C4BAAA%3BCACA%2C2BAAA%3B%3BAA0EE%2CGAAC%3BCACG%3B%3BAAGJ%2CGAAC%3BCACC%3B%3BAAKE%2CGAFH%2CUAEI%3BCAEG%3BCACA%3BCACA%3B%3BAAGJ%2CGATH%2CUASI%3BCACG%3BCACA%3BCACA%3B%3BAAKR%2CGAAC%3BCACG%3B%3BAAGJ%2CGAAC%3BCACG%3B%3BAAIJ%2CGAAC%3BCACC%3B%3BAACA%2CGAFD%2CKAEE%3BCACC%3B%3BAAWR%3BCACI%3BCACA%3BCACA%2CgBAAA%22%7D */
/* Include style: /default/style/openrat-view */
/*
OpenRat Content Management System
diff --git a/modules/cms/ui/themes/default/style/openrat.min.css b/modules/cms/ui/themes/default/style/openrat.min.css
@@ -17,7 +17,7 @@
.or-search--on-active{display: none}.or-search--on-inactive{display: inline}.or-search-input{border-bottom: .1em solid}.or-search-input .or-input{border: 0;box-shadow: 0 0 0 !important;border-radius: 0;width: 8em}.or-search--is-active .or-search--on-active{display: inline}.or-search--is-active .or-search--on-inactive{display: none}.or-search-result{display: none;padding: 1em}.or-search-result-entry{padding-top: 0.2em}
.or-selector-tree{display: none}.or-selector-search{display: none}.or-selector--is-tree-active .or-selector-tree{display: block}.or-selector--is-search-active .or-selector-search{display: block}
-html,body{width: 100%;height: 100%}@media only screen and (min-width: 56rem){body:before{content: "";position: fixed;left: 0;right: 0;z-index: -1;width: 100%;height: 100%;display: block;background-size: cover;background-position: center;background-repeat: no-repeat}}.or-editor-toolbar{font-size: 1.5em}iframe{width: 100%;height: 500px;display: block}a:link,a:visited{font-weight: normal;text-decoration: none}a:active,a:hover{font-weight: normal;text-decoration: none}.or-act-clickable{cursor: pointer}.CodeMirror{height: auto}.or-search > .or-input{box-shadow: none !important;background-color: transparent !important}.or--initial-hidden{opacity: 0}.or-view-flying-button{display: block;bottom: 1em;right: 1em;position: absolute}.or-linklist{display: flex;flex-direction: column;padding: 10% 20%}.or-linklist > .or-linklist-line{border: 1px solid;margin-top: 1em;padding: 1em;border-radius: .5em;-moz-border-radius: .5em;-webkit-border-radius: .5em;-khtml-border-radius: .5em}.or-dirty{font-weight: bold}.or-droppable--active{background-color: #3c8b2e !important;cursor: move;z-index: 3}.or-droppable--hover{background-color: #08f169 !important;cursor: move;z-index: 3}.or--invisible{visibility: hidden}.or--visible{visibility: visible}.or-link{color: inherit}.or-link--is-active{font-weight: bold}legend{font-size: 1.1em;font-weight: bold;padding: 0 .5em}
+html,body{width: 100%;height: 100%}@media only screen and (min-width: 56rem){body:before{content: "";position: fixed;left: 0;right: 0;z-index: -1;width: 100%;height: 100%;display: block;background-size: cover;background-position: center;background-repeat: no-repeat}}.or-editor-toolbar{font-size: 1.5em}iframe{width: 100%;height: 500px;display: block}a:link,a:visited{font-weight: normal;text-decoration: none}a:active,a:hover{font-weight: normal;text-decoration: none}.or-act-clickable{cursor: pointer}.CodeMirror{height: auto}.or-search > .or-input{box-shadow: none !important;background-color: transparent !important}.or--initial-hidden{opacity: 0}.or-view-flying-button{display: block;bottom: 1em;right: 1em;position: absolute}.or-linklist{display: flex;flex-direction: column;padding: 10% 20%}.or-linklist > .or-linklist-line{border: 1px solid;margin-top: 1em;padding: 1em;border-radius: .5em;-moz-border-radius: .5em;-webkit-border-radius: .5em;-khtml-border-radius: .5em}.or-dirty{font-weight: bold}.or-draggable{cursor: move}.or-droppable--active{background-color: #3c8b2e !important;cursor: move;z-index: 3}.or-droppable--hover{background-color: #08f169 !important;cursor: move;z-index: 3}.or--invisible{visibility: hidden}.or--visible{visibility: visible}.or-link{color: inherit}.or-link--is-active{font-weight: bold}legend{font-size: 1.1em;font-weight: bold;padding: 0 .5em}
.or-view{padding: 0.5em}.or-view-header{font-size: 1.2em}
.or-workbench{width: 100%;height: 100%;display: flex;flex-direction: row}.or-workbench--visible-on-dialog-open{z-index: 3}.or-workbench-screen{display: flex;flex-direction: column;position: relative}.or-workbench-screen > *{overflow-y: auto;overflow-x: hidden}.or-workbench-main{flex: 1}.or-workbench-title{height: 3.0rem;max-height: 3.0rem;min-height: 3.0rem;overflow: hidden;padding: 0.5em;font-size: 1.2em}.or-workbench-title .toolbar-icon .arrow-down{display: inline}@media only screen and (max-width: 55rem){.or-workbench-title .toolbar-icon span.label,.or-workbench-title .toolbar-icon .arrow-down{display: none}}.or-workbench-content{flex: 1}.or-workbench--visible-on-small{display: none}.or-workbench--visible-on-wide{display: block}.or-workbench--navigation-is-small .or-workbench--visible-on-wide{display: none}.or-workbench--navigation-is-small .or-workbench--visible-on-small{display: block}.or-workbench-navigation{display: flex;flex-direction: row;width: 30em}.or-workbench-navigation-content{flex: 1}@media only screen and (max-width: 55rem){.or-workbench-navigation-content{flex: none}}.or-workbench-navigation-filler{flex: 0;opacity: 0.6}.or-workbench-navigation-container{width: 100%;position: relative;padding: 0.7em;overflow-x: hidden}.or-workbench-navigation--is-small{width: 0}.or-workbench-navigation--is-small .or-workbench-navigation-container{width: 0;overflow-y: hidden}.or-workbench-navigation--is-small .or-workbench-navigation-container .or-navtree{opacity: 0.2}.or-workbench-navigation--is-small .or-navtree{opacity: 0}@media only screen and (max-width: 55rem){.or-workbench-navigation{width: 0}.or-workbench-navigation--is-open{position: fixed;width: 100%;z-index: 1;opacity: 1;height: 100%}.or-workbench-navigation--is-open .or-workbench-navigation-content{width: 90%}.or-workbench-navigation--is-open .or-workbench-navigation-filler{flex: 1}}@media only screen and (min-width: 75rem){.or-workbench-navigation{overflow-y: auto}}.or-workbench-navigation .or-view{height: 100%}.or--visible-on-mobile{display: none}@media only screen and (max-width: 55rem){.or--visible-on-mobile{display: inline}}@media only screen and (max-width: 55rem){.or--visible-on-desktop{display: none}}.or-toggle-nav-small{display: inline}@media only screen and (max-width: 55rem){.or-toggle-nav-small{display: none}}.or-toggle-nav-open-close{display: none}@media only screen and (max-width: 55rem){.or-toggle-nav-open-close{display: inline}}.or-loader{background: url(../images/loader.gif) no-repeat;background-position: center, top;height: 30px;opacity: 0.5;cursor: wait;pointer-events: none}@media only screen and (max-width: 55rem){html{font-size: 1.1em}}
.editor__text-editor{width: 100%;height: 300px}textarea.editor__code-editor{display: none}div.editor__code-editor{position: absolute;height: 500px;width: 100%;font-size: 14px;z-index: 256}textarea.editor__text-editor,textarea.editor__wiki-editor,textarea.editor__html-editor{width: 100%}a.editorlink:active,a.editorlink:hover{font-weight: normal;text-decoration: none}a.editorlink:link,a.editorlink:visited{font-weight: normal;text-decoration: none}
diff --git a/modules/template_engine/components/html/component_editor/editor.js b/modules/template_engine/components/html/component_editor/editor.js
@@ -9,12 +9,13 @@ export default function(element ) {
// Codemirror-Editor anzeigen
$(element).find("textarea.or-editor.or-code-editor").each( async function() {
+ let $editor = $(this);
await Workbench.addStyle ('codemirror-style' ,'./modules/editor/codemirror/lib/codemirror.css');
await Workbench.addScript('codemirror-script','./modules/editor/codemirror/lib/codemirror.js' );
- let mode = $(this).data('mode');
+ let mode = $editor.data('mode');
- let mimetype = $(this).data('mimetype');
+ let mimetype = $editor.data('mimetype');
if(mimetype.length>0)
mode = mimetype;
@@ -23,7 +24,8 @@ export default function(element ) {
let editor = CodeMirror.fromTextArea( textareaEl, {
lineNumbers: true,
viewportMargin: Infinity,
- mode: mode
+ mode: mode,
+ dragDrop: false,
/** settings **/ })
editor.on('change',function() {
@@ -33,27 +35,20 @@ export default function(element ) {
} );
- /*
- $(editor.getWrapperElement()).droppable({
- accept: '.or-draggable',
- hoverClass: 'or-droppable--hover',
- activeClass: 'or-droppable--active',
-
- drop: function (event, ui) {
-
- let dropped = ui.draggable;
-
- // Insert id of dragged element into cursor position
- let pos = editor.getCursor();
- editor.setSelection(pos, pos);
- let insertText = dropped.data('id')
- let toInsert = ''+insertText;
- editor.replaceSelection(toInsert);
- //editor.setCursor(pos+toInsert.length); geht nicht.
- }
-
- });*/
-
+ Workbench.getInstance().registerAsDroppable(editor.getWrapperElement(),
+ (e)=> {
+ e.stopPropagation();
+ e.preventDefault();
+ // Insert id of dragged element into cursor position
+ console.debug('dropped',e.dataTransfer);
+ let pos = editor.getCursor();
+ editor.setSelection(pos, pos);
+ let insertText = e.dataTransfer.getData('id')
+ let toInsert = ''+insertText;
+ editor.replaceSelection(toInsert);
+ //editor.setCursor(pos+toInsert.length); geht nicht.
+ }
+ );
} );
