From 772bf2d9a2d5d55d02fe8d39e85749669aa9643c Mon Sep 17 00:00:00 2001 From: Jan Kristinus Date: Sat, 23 Sep 2023 02:04:02 +0200 Subject: [PATCH] WIP: Manager JS Umbau. CSP optimiert. (#1439) * Manager JS Umbau. CSP optimiert. * debug alert entfernt --- plugins/manager/assets/frontend.js | 4 + plugins/manager/assets/manager.js | 80 +----- plugins/manager/assets/widget.js | 239 +++++++++++++----- .../fragments/yform/manager/page/list.php | 13 +- plugins/manager/lib/var_yform_dataset.php | 80 ++++-- plugins/manager/scss/manager.scss | 9 +- .../value.be_manager_relation.tpl.php | 62 ++--- 7 files changed, 274 insertions(+), 213 deletions(-) create mode 100644 plugins/manager/assets/frontend.js diff --git a/plugins/manager/assets/frontend.js b/plugins/manager/assets/frontend.js new file mode 100644 index 00000000..095e2ac6 --- /dev/null +++ b/plugins/manager/assets/frontend.js @@ -0,0 +1,4 @@ +$(document).ready(function() { + $(document).trigger('rex:ready', [$('form')]); +}); + diff --git a/plugins/manager/assets/manager.js b/plugins/manager/assets/manager.js index eee4b2be..a2e83924 100644 --- a/plugins/manager/assets/manager.js +++ b/plugins/manager/assets/manager.js @@ -1,84 +1,6 @@ var be_relation_media_counter = 100; // no conflicts to 100 media in one page -var be_relation_counter = 100; // no conflicts to 100 media in one page - -rex_retain_popup_event_handlers("rex:YForm_selectData"); - -function yform_manager_openDatalist(id, field, link, multiple){ - newLinkMapWindow(link+'&rex_yform_manager_opener[id]='+id+'&rex_yform_manager_opener[field]='+field+'&rex_yform_manager_opener[multiple]='+multiple); -} -function yform_manager_deleteDatalist(id, multiple){ - if(multiple == 1) { - deleteREX(id, 'yform_MANAGER_DATALIST_', 'yform_MANAGER_DATALIST_SELECT_'); - } else { - var a = new getObj("yform_MANAGER_DATANAME_"+id); - a.obj.value = ""; - var a = new getObj("yform_MANAGER_DATA_"+id); - a.obj.value = ""; - } -} -function yform_manager_moveDatalist(id, direction){ - moveREX(id, 'yform_MANAGER_DATALIST_', 'yform_MANAGER_DATALIST_SELECT_', direction); -} -function yform_manager_writeDatalist(id){ - writeREX(id, 'yform_MANAGER_DATALIST_', 'yform_MANAGER_DATALIST_SELECT_'); -} -function yform_manager_setData(id, data_id, data_name, multiple){ - - var event = opener.jQuery.Event("rex:YForm_selectData"); - opener.jQuery(window).trigger(event, [data_id, data_name, multiple]); - if (event.isDefaultPrevented()) { - self.close(); - } - - if(multiple == 1) { - var datalist = "yform_MANAGER_DATALIST_SELECT_"+id; - var source = opener.document.getElementById(datalist); - var sourcelength = source.options.length; - - option = opener.document.createElement("OPTION"); - option.text = data_name; - option.value = data_id; - - source.options.add(option, sourcelength); - opener.writeREX(id, 'yform_MANAGER_DATALIST_', 'yform_MANAGER_DATALIST_SELECT_'); - }else { - var data_field_name = "yform_MANAGER_DATANAME_"+id; - var data_field_id = "yform_MANAGER_DATA_"+id; - opener.document.getElementById(data_field_name).value = data_name; - opener.document.getElementById(data_field_id).value = data_id; - self.close(); - } - -} $(document).on('rex:ready', function (event, container) { - container.find('[data-be-relation-wrapper]').each(function() { - - be_relation_counter++; - - var regexpDataset = [ - new RegExp("(moveYFormDatasetList\\(?\\d+)", 'g'), - new RegExp("(openYFormDatasetList\\(?\\d+)", 'g'), - new RegExp("(deleteYFormDatasetList\\(?\\d+)", 'g'), - new RegExp("(openYFormDataset\\(?\\d+)", 'g'), - new RegExp("(deleteYFormDataset\\(?\\d+)", 'g') - ]; - - $(this) - .find("[id^='YFORM_DATASETLIST_SELECT_'],[id^='YFORM_DATASETLIST_FIELD_'],[id^='YFORM_DATASET_SELECT_'],[id^='YFORM_DATASET_FIELD_']").each(function() { - $(this).attr("id", $(this).attr("id") + be_relation_counter); - }); - - $(this) - .find("[onclick]").each(function() { - var elementOnClick = $(this).attr("onclick"); - for (var i in regexpDataset) { - elementOnClick = elementOnClick.replace(regexpDataset[i], '$1' + be_relation_counter); - } - $(this).attr("onclick", elementOnClick); - }); - - }); container.find('[data-be-media-wrapper]').each(function() { be_relation_media_counter++; @@ -88,7 +10,7 @@ $(document).on('rex:ready', function (event, container) { $(this).attr("id", $(this).attr("id") + be_relation_media_counter); }); - var regexpMedia = [ + let regexpMedia = [ new RegExp("(openREXMedia\\('?\\d+)", 'g'), new RegExp("(addREXMedia\\('?\\d+)", 'g'), new RegExp("(deleteREXMedia\\('?\\d+)", 'g'), diff --git a/plugins/manager/assets/widget.js b/plugins/manager/assets/widget.js index 0e6fd3a3..2eda0024 100644 --- a/plugins/manager/assets/widget.js +++ b/plugins/manager/assets/widget.js @@ -1,62 +1,179 @@ -function openYFormDataset(id, field, link) -{ - var newWindowLink = link + '&rex_yform_manager_opener[id]='+id+'&rex_yform_manager_opener[field]='+field+'&rex_yform_manager_opener[multiple]=0'; - return newWindow( id, newWindowLink, 1200,800,',status=yes,resizable=yes'); -} - -function openYFormDatasetList(id, field, link) -{ - var newWindowLink = link + '&rex_yform_manager_opener[id]='+id+'&rex_yform_manager_opener[field]='+field+'&rex_yform_manager_opener[multiple]=1'; - return newWindow( id, newWindowLink, 1200,800,',status=yes,resizable=yes'); -} - -function deleteYFormDataset(id){ - var a; - a = new getObj('YFORM_DATASET_FIELD_' + id); - a.obj.value = ''; - a = new getObj('YFORM_DATASET_SELECT_' + id); - a.obj.value = ''; -} - -function deleteYFormDatasetList(id){ - deleteREX(id, 'YFORM_DATASETLIST_FIELD_', 'YFORM_DATASETLIST_SELECT_'); -} - -function moveYFormDatasetList(id, direction){ - moveREX(id, 'YFORM_DATASETLIST_FIELD_', 'YFORM_DATASETLIST_SELECT_', direction); -} - -function writeYFormDatasetlist(id){ - writeREX(id, 'YFORM_DATASETLIST_FIELD_', 'YFORM_DATASETLIST_SELECT_'); -} - -function setYFormDataset(id, data_id, data_name, multiple){ - - var event = opener.jQuery.Event("rex:YForm_selectData"); - opener.jQuery(window).trigger(event, [data_id, data_name, multiple]); - if (event.isDefaultPrevented()) { - self.close(); - } - - if(multiple == 1) { - var datalist = "YFORM_DATASETLIST_SELECT_"+id; - var source = opener.document.getElementById(datalist); - var sourcelength = source.options.length; - - option = opener.document.createElement("OPTION"); - option.text = data_name; - option.value = data_id; - - source.options.add(option, sourcelength); - opener.writeREX(id, 'YFORM_DATASETLIST_FIELD_', 'YFORM_DATASETLIST_SELECT_'); - - }else { - var data_field_name = 'YFORM_DATASET_SELECT_' + id; - var data_field_id = 'YFORM_DATASET_FIELD_' + id; - opener.document.getElementById(data_field_name).value = data_name; - opener.document.getElementById(data_field_id).value = data_id; - self.close(); - } - -} +$(document).on('rex:ready',function() { + + $(".yform-dataset-widget").each(function () { + let id = this.dataset.id; + let link = this.dataset.link; + let widget_type = this.dataset.widget_type; + let field_name = this.dataset.field_name; + + $(this).find("a").each(function () { + + let multiple= 1; + if (widget_type === "single") { + multiple = 0; + } + + // widget pool - + if (this.classList.contains('yform-dataset-widget-pool')) { + this.onclick = function () { + return newPoolWindow( link); + }; + } + + // open + if (this.classList.contains('yform-dataset-widget-open')) { + this.onclick = function () { + let newWindowLink = link + '&rex_yform_manager_opener[id]='+id+'&rex_yform_manager_opener[field]='+field_name+'&rex_yform_manager_opener[multiple]='+multiple; + return newWindow( id, newWindowLink, 1200,800,',status=yes,resizable=yes'); + }; + } + + // delete + if (this.classList.contains('yform-dataset-widget-delete')) { + this.onclick = function () { + + let viewObject = document.querySelector('#yform-dataset-view-'+id); + let realObject = document.querySelector('#yform-dataset-real-'+id); + + if (multiple === 1) { + for (let position = 0; position < viewObject.options.length; position++) { + if (viewObject.options[position].selected) { + viewObject.options[position].remove(); + + if(position === 0) { + if(viewObject.options.length > 0) { + viewObject.options[0].selected = "selected"; + } + } else { + if(viewObject.options.length > position) { + viewObject.options[position].selected= "selected"; + } else { + viewObject.options[position-1].selected= "selected"; + } + } + + realObject.value = ""; + for (let i=0; i < viewObject.options.length; i++) { + realObject.value += (viewObject[i].value); + if (viewObject.options.length > (i+1)) realObject.value += ','; + } + + break; + } + } + + } else { + viewObject.value = ''; + realObject.value = ''; + } + }; + } + + // move up and down + if (this.classList.contains('yform-dataset-widget-move')) { + this.onclick = function () { + + let viewObject = document.querySelector('#yform-dataset-view-'+id); + let realObject = document.querySelector('#yform-dataset-real-'+id); + + for (let position = 0; position < viewObject.options.length; position++) { + + if (viewObject.options[position].selected) { + if (this.classList.contains('yform-dataset-widget-move-up')) { + if(position > 0) { + let option_temp_value = viewObject.options[position-1].value; + let option_temp_text = viewObject.options[position-1].text; + viewObject.options[position-1].value = viewObject.options[position].value; + viewObject.options[position-1].text = viewObject.options[position].text; + viewObject.options[position-1].selected= "selected"; + viewObject.options[position].value = option_temp_value; + viewObject.options[position].text = option_temp_text; + } + } + if (this.classList.contains('yform-dataset-widget-move-down')) { + if(position < (viewObject.options.length-1)) { + let option_temp_value = viewObject.options[position+1].value; + let option_temp_text = viewObject.options[position+1].text; + viewObject.options[position+1].value = viewObject.options[position].value; + viewObject.options[position+1].text = viewObject.options[position].text; + viewObject.options[position+1].selected= "selected"; + viewObject.options[position].value = option_temp_value; + viewObject.options[position].text = option_temp_text; + } + } + if (this.classList.contains('yform-dataset-widget-move-top')) { + let option_temp_value = viewObject.options[position].value; + let option_temp_text = viewObject.options[position].text; + for(let i = position; i > 0; i--) { + viewObject.options[i].value = viewObject.options[i-1].value; + viewObject.options[i].text = viewObject.options[i-1].text; + } + viewObject.options[0].value = option_temp_value; + viewObject.options[0].text = option_temp_text; + viewObject.options[0].selected= "selected"; + } + if (this.classList.contains('yform-dataset-widget-move-bottom')) { + let option_temp_value = viewObject.options[position].value; + let option_temp_text = viewObject.options[position].text; + for(let i = position; i < (viewObject.options.length-1); i++) { + viewObject.options[i].value = viewObject.options[i+1].value; + viewObject.options[i].text = viewObject.options[i+1].text; + } + viewObject.options[viewObject.options.length-1].value = option_temp_value; + viewObject.options[viewObject.options.length-1].text = option_temp_text; + } + + realObject.value = ""; + for (let i=0; i < viewObject.options.length; i++) { + realObject.value += (viewObject[i].value); + if (viewObject.options.length > (i+1)) realObject.value += ','; + } + + // !!! + break; + } + } + }; + } + + // set + if (this.classList.contains('yform-dataset-widget-set')) { + this.onclick = function () { + + let id = this.dataset.id; + let opener_id = this.dataset.opener_id; + let opener_field = this.dataset.opener_field; + let multiple = this.dataset.multiple; + let value = this.dataset.value; + + if(multiple == "1") { + let viewObject = opener.document.getElementById('yform-dataset-view-'+opener_id); + let option = opener.document.createElement("OPTION"); + option.text = value; + option.value = id; + viewObject.options.add(option, viewObject.options.length); + + let realObject = opener.document.getElementById('yform-dataset-real-'+opener_id); + realObject.value = ""; + + for (let i=0; i < viewObject.options.length; i++) { + realObject.value += (viewObject[i].value); + if (viewObject.options.length > (i+1)) realObject.value += ','; + } + + } else { + opener.document.getElementById('yform-dataset-view-'+opener_id).value = value; + opener.document.getElementById('yform-dataset-real-'+opener_id).value = id; + self.close(); + } + + } + + } + + }); + + }); + +}); diff --git a/plugins/manager/fragments/yform/manager/page/list.php b/plugins/manager/fragments/yform/manager/page/list.php index a3382bcc..101df55e 100644 --- a/plugins/manager/fragments/yform/manager/page/list.php +++ b/plugins/manager/fragments/yform/manager/page/list.php @@ -119,12 +119,13 @@ static function ($params) { } } } - return ''.rex_i18n::msg( - 'yform_data_select' - ).''; + return ''.rex_i18n::msg('yform_data_select').''; }, [ 'opener_id' => $rex_yform_manager_opener['id'], diff --git a/plugins/manager/lib/var_yform_dataset.php b/plugins/manager/lib/var_yform_dataset.php index 7ba35bf8..f1466d0c 100644 --- a/plugins/manager/lib/var_yform_dataset.php +++ b/plugins/manager/lib/var_yform_dataset.php @@ -54,7 +54,7 @@ protected function getOutput() foreach ($valueArray as $valueId) { $listValues = rex_yform_value_be_manager_relation::getListValues($table->getTableName(), $fieldName, ['id' => $valueId]); if (isset($listValues[$valueId])) { - $options[] = ['id' => $valueId, 'name' => rex_formatter::truncate($listValues[$valueId], ['length' => 50])]; + $options[] = ['id' => $valueId, 'name' => rex_formatter::truncate($listValues[$valueId].' id=['.$valueId.']', ['length' => 50])]; $values[] = $valueId; } } @@ -97,28 +97,43 @@ protected function getOutput() public static function getMultipleWidget($id, $name, $value, array $args = []) { $link = $args['link']; + $size = $args['size'] ?? 10; - $options = []; + $attributes = []; + $attributes['class'] = 'form-control yform-dataset-view'; + $attributes = array_merge($attributes, $args['attributes'] ?? []); + + $dataset_view_id = 'yform-dataset-view-' . $id . ''; + $dataset_real_id = 'yform-dataset-real-' . $id . ''; + + $select = new rex_select(); + $select->setAttributes($attributes); + $select->setId($dataset_view_id); + $select->setName($dataset_view_id.'-name'); + $select->setSize($size); foreach ($args['options'] as $option) { - $options[] = ''; + $select->addOption($option['name'], $option['id']); } $e = []; - $e['field'] = ' - - '; + $e['field'] = $select->get() . ' + '; $e['moveButtons'] = ' - - - - '; + + + + '; $e['functionButtons'] = ' - - + + '; + $e['before'] = '
'; + $e['after'] = '
'; $fragment = new rex_fragment(); $fragment->setVar('elements', [$e], false); @@ -132,11 +147,42 @@ public static function getSingleWidget($id, $name, $value, array $args = []) if ('' != $value) { $valueName = rex_escape(trim(sprintf('%s [%s]', $args['valueName'], $value))); } + $dataset_view_id = 'yform-dataset-view-' . $id . ''; + $dataset_real_id = 'yform-dataset-real-' . $id . ''; - $e['field'] = ''; + $e['field'] = ' + + '; $e['functionButtons'] = ' - - '; + + '; + $e['before'] = '
'; + $e['after'] = '
'; + + $fragment = new rex_fragment(); + $fragment->setVar('elements', [$e], false); + return $fragment->parse('core/form/widget.php'); + } + + public static function getRelationWidget($id, $fieldName, $value, $link, $main_id) + { + $e['field'] = ''; + $e['before'] = '
'; + $e['after'] = ''; + if ($main_id > 0) { + $e['functionButtons'] = '' . rex_i18n::msg('yform_relation_edit_relations') . ''; + } else { + $e['after'] = '

' . rex_i18n::msg('yform_relation_first_create_data') . '

'; + } + $e['after'] .= '
'; $fragment = new rex_fragment(); $fragment->setVar('elements', [$e], false); diff --git a/plugins/manager/scss/manager.scss b/plugins/manager/scss/manager.scss index f2c246aa..fa927868 100644 --- a/plugins/manager/scss/manager.scss +++ b/plugins/manager/scss/manager.scss @@ -1,14 +1,14 @@ #rex-yform .rex-widget-field { - padding-top: 0px; - margin-top: 0px; + padding-top: 0; + margin-top: 0; } #rex-yform div.rex-widget { clear:none; float:left; display:block; - margin:0px; + margin:0; width:390px; /*margin-left:245px;*/ } @@ -69,8 +69,7 @@ body#rex-page-yform .yform-manager-searchfield{ font-weight: bold; } .rex-navi-piped > * { - background-image: url(../../../redaxo/media/pipe_c2.gif); - background-position: 0px 2px; + background-position: 0 2px; } .rex-navi-piped > *:first-child { background: none; diff --git a/plugins/manager/ytemplates/bootstrap/value.be_manager_relation.tpl.php b/plugins/manager/ytemplates/bootstrap/value.be_manager_relation.tpl.php index c3f236f0..fa661b3b 100644 --- a/plugins/manager/ytemplates/bootstrap/value.be_manager_relation.tpl.php +++ b/plugins/manager/ytemplates/bootstrap/value.be_manager_relation.tpl.php @@ -64,53 +64,25 @@ getRelationType()) { - $e['field'] = ''; - if ($this->params['main_id'] > 0) { - $e['functionButtons'] = '' . rex_i18n::msg('yform_relation_edit_relations') . ''; - } else { - $e['after'] = '

' . rex_i18n::msg('yform_relation_first_create_data') . '

'; - } - - $fragment = new rex_fragment(); - $fragment->setVar('elements', [$e], false); - echo $fragment->parse('core/form/widget.php'); + echo \rex_var_yform_table_data::getRelationWidget($id, $this->getFieldName(), $this->getValue(), $link, $this->params['main_id']); } elseif (2 == $this->getRelationType()) { - $e['field'] = ''; - $e['functionButtons'] = ' - - '; - - $fragment = new rex_fragment(); - $fragment->setVar('elements', [$e], false); - echo $fragment->parse('core/form/widget.php'); + $name = $this->getFieldName(); + $args = []; + $args['link'] = $link; + $args['fieldName'] = $this->getRelationSourceTableName() . '.' . $this->getName(); + $args['valueName'] = $valueName; + $value = implode(',', $this->getValue()); + echo \rex_var_yform_table_data::getSingleWidget($id, $name, $value, $args); } else { - $attributes = []; - $attributes['class'] = 'form-control'; - $attributes = $this->getAttributeArray($attributes, ['required', 'readonly']); - - $select = new rex_select(); - $select->setAttributes($attributes); - $select->setId('YFORM_DATASETLIST_SELECT_' . $id . ''); - $select->setName('YFORM_DATASETLIST_SELECT_' . $id . ''); - $select->setSize($this->getRelationSize()); - foreach ($options as $option) { - $select->addOption($option['name'], $option['id']); - } - $e['field'] = $select->get() . ''; - - $e['moveButtons'] = ' - - - - '; - $e['functionButtons'] = ' - - - '; - - $fragment = new rex_fragment(); - $fragment->setVar('elements', [$e], false); - echo $fragment->parse('core/form/widget_list.php'); + $name = $this->getFieldName(); + $args = []; + $args['link'] = $link; + $args['options'] = $options; + $args['fieldName'] = $this->getRelationSourceTableName() . '.' . $this->getName(); + $args['size'] = $this->getRelationSize(); + $args['attributes'] = $this->getAttributeArray([], ['required', 'readonly']); + $value = implode(',', $this->getValue()); + echo \rex_var_yform_table_data::getMultipleWidget($id, $name, $value, $args); } ?>