Skip to content

WIP: Mediapool CSP header #6286

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
dergel wants to merge 5 commits into
base: 5.x
Choose a base branch
from
Draft

WIP: Mediapool CSP header #6286

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a6c492c
Linkaufrufe, datavars und mediapool mehr als widget bestrachten
dergel Sep 23, 2023
4a8ae20
Merge branch 'main' into mediapool_csp_header
dergel Apr 11, 2024
8a9c200
Merge branch 'main' into mediapool_csp_header
dergel Jun 20, 2024
5993885
Merge branch 'main' into mediapool_csp_header
dergel Jul 1, 2025
22a3fee
Popup aktivieren ohne eine JS Funktion zu setzen
dergel Jul 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
104 changes: 104 additions & 0 deletions redaxo/src/addons/mediapool/assets/deprecated.js
View file
Open in desktop
Copy link
Copy Markdown
Member

@gharlan gharlan Jul 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Das Verschieben der Funktionen in eine andere Datei macht es mir tendenziell schwieriger bzgl. R6-Merge etc.

Original file line number Diff line number Diff line change
@@ -0,0 +1,104 @@
/** deprecated */
function openREXMedia(id,param)
{
console.log("openREXMedia deprecated, use var_media markup instead");
var mediaid = 'REX_MEDIA_'+id;
if (typeof(param) == 'undefined')
{
param = '';
}
return newPoolWindow('index.php?page=mediapool/media' + param + '&opener_input_field=' + mediaid);
}

/** deprecated */
function viewREXMedia(id,param)
{
console.log("deleteREXMedia deprecated, use var_media markup instead");
var mediaid = 'REX_MEDIA_'+id;
var value = document.getElementById(mediaid).value;
if ( typeof(param) == 'undefined')
{
param = '';
}
if (value != '') {
param = param + '&file_name='+ value;
return newPoolWindow('index.php?page=mediapool/media' + param + '&opener_input_field=' + mediaid);
}
}

/** deprecated */
function deleteREXMedia(id)
{
console.log("deleteREXMedia deprecated, use var_media markup instead");
var input = new getObj("REX_MEDIA_" + id).obj;
if (input !== null) {
input.value = "";
jQuery(input).trigger('change');
} else {
console.log("Media input field not found");
}
}

/** deprecated */
function addREXMedia(id,params)
{
console.log("addREXMedia deprecated, use var_media markup instead");
if (typeof(params) == 'undefined')
{
params = '';
}
return newPoolWindow('index.php?page=mediapool/upload&opener_input_field=REX_MEDIA_'+id+params);
}

/** deprecated */
/*
selectMedia
instead of
<a class="btn btn-xs btn-select" onclick="selectMedia(\'' . $file_name . '\', \'' . rex_escape($title) . '\'); return false;">
use this
<a class="btn btn-xs btn-select rex-js-media-select"
data-id="' . $media->getId() . '" data-file_name="'.rex_escape($media->getFileName()).'" data-title="' . rex_escape($media->getTitle()) . '"
data-select_type="' . (str_starts_with($openerInputField, 'REX_MEDIALIST_') ? "multiple" : "single") . '">
*/

function selectMedia(filename, alt)
{
console.log("selectMedia deprecated, use var_media markup instead");
var event = opener.jQuery.Event("rex:selectMedia");
opener.jQuery(window).trigger(event, [filename, alt]);
if (!event.isDefaultPrevented()) {
if (rex.mediapoolOpenerInputField) {
var input = opener.document.getElementById(rex.mediapoolOpenerInputField);
if (input !== null) {
input.value = filename;
opener.jQuery(input).trigger('change');
self.close();
} else {
console.log("Media input field not found");
}
} else {
self.close();
}
}
}


// selectMedialist

function selectMedialist(filename)
{
if (rex.mediapoolOpenerInputField && 0 === rex.mediapoolOpenerInputField.indexOf('REX_MEDIALIST_')) {
var openerId = rex.mediapoolOpenerInputField.slice('REX_MEDIALIST_'.length);
var medialist = "REX_MEDIALIST_SELECT_" + openerId;

var source = opener.document.getElementById(medialist);
var sourcelength = source.options.length;

option = opener.document.createElement("OPTION");
option.text = filename;
option.value = filename;

source.options.add(option, sourcelength);
opener.writeREXMedialist(openerId);
}
}
205 changes: 119 additions & 86 deletions redaxo/src/addons/mediapool/assets/mediapool.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,120 @@
REDAXO Mediapool JavaScript library
*/

$(document).on('rex:ready',function() {

$(".rex-js-widget-media").each(function () {
Copy link
Copy Markdown
Member

@gharlan gharlan Jul 4, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Bei rex:ready sollte man den Container entgegen nehmen, der ausgetauscht wurde, und nur innerhalb Element initialisieren etc.

Hier ein Beispiel: https://github.com/redaxo/redaxo/blob/1a930bcda060ba4c5c55aa14938a4113b7237b78/redaxo/src/addons/be_style/assets/javascripts/main.js#L1-L2

Also inbesondere dann mit container.find() statt global $() arbeiten.
(Beim initialen Aufruf ist container das <body>-Element.)


// todo:
// additional params

let id = this.dataset.id;
let media_field = 'REX_MEDIA_'+id;
let params = this.dataset.params;
let category = intval(this.dataset.category);
let media_input = $(this).find("input");
if (media_input[0] === undefined) {
console.log("Media input field " + media_field + "not found");
}
media_input = $(media_input[0]);

// TODO: params ergänzen aus array umbauen
params = '';

if(0 < category) {
params += '&rex_file_category=' + category;
}

$(this).find("a").each(function () {
if (this.classList.contains('rex-js-widget-media-open')) {
this.onclick = function () {
return newPoolWindow('index.php?page=mediapool/media' + params + '&opener_input_field=' + media_field);
}
}

if (this.classList.contains('rex-js-widget-media-add')) {
this.onclick = function () {
return newPoolWindow('index.php?page=mediapool/upload' + params + '&opener_input_field=' + media_field);
}
}

if (this.classList.contains('rex-js-widget-media-delete')) {
this.onclick = function () {
media_input.val("");
media_input.trigger('change');
}
}

if (this.classList.contains('rex-js-widget-media-view')) {
this.onclick = function () {
media_file_name = media_input.val();
return newPoolWindow('index.php?page=mediapool/media' + params + '&opener_input_field=' + media_field + "&file_name=" + media_file_name);
}
}

});
});

$(".rex-js-media-select").each(function () {
this.onclick = function () {
let id = this.dataset.id || '';
let file_name = this.dataset.file_name || '';
let title = this.dataset.title || '';
let select_type = this.dataset.select_type || 'single';

if (select_type === 'single') {
var event = opener.jQuery.Event("rex:selectMedia");
opener.jQuery(window).trigger(event, [file_name, title]);
if (!event.isDefaultPrevented()) {
if (rex.mediapoolOpenerInputField) {
var input = opener.document.getElementById(rex.mediapoolOpenerInputField);
if (input !== null) {
input.value = file_name;
opener.jQuery(input).trigger('change');
self.close();
} else {
console.log("Media input field not found");
}
} else {
self.close();
}
}
}

if (select_type === 'multiple') {
if (rex.mediapoolOpenerInputField && 0 === rex.mediapoolOpenerInputField.indexOf('REX_MEDIALIST_')) {
var openerId = rex.mediapoolOpenerInputField.slice('REX_MEDIALIST_'.length);
var medialist = "REX_MEDIALIST_SELECT_" + openerId;

var source = opener.document.getElementById(medialist);
var sourcelength = source.options.length;

option = opener.document.createElement("OPTION");
option.text = file_name;
option.value = file_name;

source.options.add(option, sourcelength);
opener.writeREX(openerId, 'REX_MEDIALIST_', 'REX_MEDIALIST_SELECT_');
}
}
}
});

});

// TODO
// writeREXMedialist


// rex-js-media-select








function setAllCheckBoxes(FieldName, mthis)
{
var CheckValue;
Expand Down Expand Up @@ -57,50 +171,6 @@ function openMediaPool(id)
return newPoolWindow('index.php?page=mediapool/media&opener_input_field='+ id);
}

function openREXMedia(id,param)
{
var mediaid = 'REX_MEDIA_'+id;
if (typeof(param) == 'undefined')
{
param = '';
}
return newPoolWindow('index.php?page=mediapool/media' + param + '&opener_input_field=' + mediaid);
}

function viewREXMedia(id,param)
{
var mediaid = 'REX_MEDIA_'+id;
var value = document.getElementById(mediaid).value;
if ( typeof(param) == 'undefined')
{
param = '';
}
if (value != '') {
param = param + '&file_name='+ value;
return newPoolWindow('index.php?page=mediapool/media' + param + '&opener_input_field=' + mediaid);
}
}

function deleteREXMedia(id)
{
var input = new getObj("REX_MEDIA_" + id).obj;
if (input !== null) {
input.value = "";
jQuery(input).trigger('change');
} else {
console.log("Media input field not found");
}
}

function addREXMedia(id,params)
{
if (typeof(params) == 'undefined')
{
params = '';
}
return newPoolWindow('index.php?page=mediapool/upload&opener_input_field=REX_MEDIA_'+id+params);
}

function openREXMedialist(id,param)
{
var medialist = 'REX_MEDIALIST_' + id;
Expand Down Expand Up @@ -182,25 +252,25 @@ $(document).ready(function () {

var url;
var width = 0;
if('.svg' != value.substr(value.length - 4) && $(this).hasClass("rex-js-widget-preview-media-manager"))
if('.svg' !== value.substr(value.length - 4) && $(this).hasClass("rex-js-widget-preview-media-manager"))
url = './index.php?rex_media_type='+ img_type +'&rex_media_file='+ value;
else
{
url = '../media/'+ value;
width = 246;
}

if(value && value.length != 0 && $.inArray(value.split('.').pop(), rex.imageExtensions))
if(value && value.length !== 0 && $.inArray(value.split('.').pop(), rex.imageExtensions))
{
// img tag nur einmalig einfuegen, ggf erzeugen wenn nicht vorhanden
var img = $('img', div);
if(img.length == 0)
if(img.length === 0)
{
div.html('<img />');
img = $('img', div);
}
img.attr('src', url);
if (width != 0)
if (width !== 0)
img.attr('width', width);

div.stop(true, false).slideDown("fast");
Expand All @@ -217,7 +287,7 @@ $(document).ready(function () {
.on('mouseenter', '.rex-js-widget-media.rex-js-widget-preview, .rex-js-widget-medialist.rex-js-widget-preview', rexShowMediaPreview)
.on('mouseleave', '.rex-js-widget-media.rex-js-widget-preview, .rex-js-widget-medialist.rex-js-widget-preview', function() {
var div = $('.rex-js-media-preview', this);
if(div.css('height') != 'auto')
if(div.css('height') !== 'auto')
{
div.slideUp("normal");
}
Expand All @@ -227,44 +297,7 @@ $(document).ready(function () {
});


function selectMedia(filename, alt)
{
var event = opener.jQuery.Event("rex:selectMedia");

opener.jQuery(window).trigger(event, [filename, alt]);
if (!event.isDefaultPrevented()) {
if (rex.mediapoolOpenerInputField) {
var input = opener.document.getElementById(rex.mediapoolOpenerInputField);
if (input !== null) {
input.value = filename;
opener.jQuery(input).trigger('change');
self.close();
} else {
console.log("Media input field not found");
}
} else {
self.close();
}
}
}

function selectMedialist(filename)
{
if (rex.mediapoolOpenerInputField && 0 === rex.mediapoolOpenerInputField.indexOf('REX_MEDIALIST_')) {
var openerId = rex.mediapoolOpenerInputField.slice('REX_MEDIALIST_'.length);
var medialist = "REX_MEDIALIST_SELECT_" + openerId;

var source = opener.document.getElementById(medialist);
var sourcelength = source.options.length;

option = opener.document.createElement("OPTION");
option.text = filename;
option.value = filename;

source.options.add(option, sourcelength);
opener.writeREXMedialist(openerId);
}
}

function selectMediaListArray(files)
{
Expand Down
Loading
Loading