Skip to content

[star-rating] Load feedback widget assets via document-relative paths #7747

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

Open
coskunaydinoglu wants to merge 1 commit into
base: master
Choose a base branch
from
+39 −25
Open

[star-rating] Load feedback widget assets via document-relative paths #7747

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 4 additions & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@

## Version 25.03.X
Fixes:
- [star-rating] Serve feedback widget assets via document-relative paths so they resolve when the widget is loaded through a reverse proxy on an app-specific sub-folder

## Version 25.03.47
Fixes:
- [content] Bugfixes for content showing
Expand Down
12 changes: 11 additions & 1 deletion plugins/star-rating/frontend/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,8 +36,18 @@ var STAR_RATING_EXT_TO_MIME = {
countlyPath = `/${countlyPath}`;
}

// Static assets in the popup are fetched by the browser relative to the
// iframe's document URL. The widget is frequently served behind a reverse
// proxy mounted on an arbitrary, app-specific sub-folder that the Countly
// server has no knowledge of, so an absolute path (built from countlyPath)
// can never resolve there. We emit document-relative paths instead, which
// resolve under whatever sub-folder the widget was loaded from.
// The popup is reachable at '/feedback/rating' (two segments -> one level
// up) and the legacy '/feedback' (one segment -> same level).
const assetPrefix = /\/feedback\/?$/.test(req.path) ? '' : '../';

res.removeHeader('X-Frame-Options');
res.render('../../../plugins/star-rating/frontend/public/templates/feedback-popup', { countlyPath });
res.render('../../../plugins/star-rating/frontend/public/templates/feedback-popup', { countlyPath, assetPrefix });
}

app.get(countlyConfig.path + '/feedback/rating', renderPopup);
Expand Down
48 changes: 24 additions & 24 deletions plugins/star-rating/frontend/public/templates/feedback-popup.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<html>
<head>
<title>Countly Feedback Popup</title>
<link href="<%= `${countlyPath}/star-rating/stylesheets/ratings-iframe.css` %>" rel="stylesheet"/>
<link href="<%= `${countlyPath}/stylesheets/font-awesome/css/font-awesome.min.css` %>" rel="stylesheet"/>
<link href="<%= `${countlyPath}/stylesheets/ionicons/css/ionicons.min.css` %>" rel="stylesheet"/>
<link href="<%= `${assetPrefix}star-rating/stylesheets/ratings-iframe.css` %>" rel="stylesheet"/>
<link href="<%= `${assetPrefix}stylesheets/font-awesome/css/font-awesome.min.css` %>" rel="stylesheet"/>
<link href="<%= `${assetPrefix}stylesheets/ionicons/css/ionicons.min.css` %>" rel="stylesheet"/>
<!-- TODO: check where are this themeFiles -->
<% if (themeFiles && themeFiles.css) { %>
<% for(var i=0, l=themeFiles.css.length; i < l; i++) {%>
Expand All @@ -14,75 +14,75 @@
<meta content="width=device-width, initial-scale=1" name="viewport">
<style>
.rating-emotion-emojis {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji.svg` %>');
}

.rating-emotion-emojis1 {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_1.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_1.svg` %>');
}

.rating-emotion-emojis2 {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_2.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_2.svg` %>');
}

.rating-emotion-emojis3 {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_3.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_3.svg` %>');
}

.rating-emotion-emojis4 {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_4.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_4.svg` %>');
}

.rating-emotion-emojis5 {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_5.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_5.svg` %>');
}

.rating-emotion-emojis-fill {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_filled.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_filled.svg` %>');
}

.rating-emotion-emojis1-fill {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_filled_1.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_filled_1.svg` %>');
}

.rating-emotion-emojis2-fill {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_filled_2.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_filled_2.svg` %>');
}

.rating-emotion-emojis3-fill {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_filled_3.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_filled_3.svg` %>');
}

.rating-emotion-emojis4-fill {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_filled_4.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_filled_4.svg` %>');
}

.rating-emotion-emojis5-fill {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/emoji_filled_5.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/emoji_filled_5.svg` %>');
}

.rating-emotion-thumbs {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/thumbs.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/thumbs.svg` %>');
}

.rating-emotion-thumbs-fill {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/thumbs_filled.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/thumbs_filled.svg` %>');
}

.rating-emotion-stars {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/stars.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/stars.svg` %>');
}

.rating-emotion-stars-fill {
background-image: url('<%= `${countlyPath}/star-rating/images/star-rating/stars_filled.svg` %>');
background-image: url('<%= `${assetPrefix}star-rating/images/star-rating/stars_filled.svg` %>');
}
</style>
</head>
<body class="ratings-popup cly-vue-ratings-preview" data-countly-path="<%= countlyPath %>">
<div class="rating-loader-wrapper">
<img
class="rating-loader"
src="<%= `${countlyPath}/star-rating/images/star-rating/loader.svg` %>"
src="<%= `${assetPrefix}star-rating/images/star-rating/loader.svg` %>"
/>
</div>
<div
Expand Down Expand Up @@ -221,7 +221,7 @@
>
<img
id="powered-by-countly"
src="<%= `${countlyPath}/star-rating/images/star-rating/powered-by-countly.svg` %>"
src="<%= `${assetPrefix}star-rating/images/star-rating/powered-by-countly.svg` %>"
>
</a>
</div>
Expand Down Expand Up @@ -251,13 +251,13 @@
>
<img
id="powered-by-countly"
src="<%= `${countlyPath}/star-rating/images/star-rating/powered-by-countly.svg` %>"
src="<%= `${assetPrefix}star-rating/images/star-rating/powered-by-countly.svg` %>"
>
</a>
</div>
</div>
<script src="<%= `${countlyPath}/star-rating/javascripts/tippy.all.min.js` %>"></script>
<script src="<%= `${countlyPath}/javascripts/dom/jquery/jquery.js` %>"></script>
<script src="<%= `${assetPrefix}star-rating/javascripts/tippy.all.min.js` %>"></script>
<script src="<%= `${assetPrefix}javascripts/dom/jquery/jquery.js` %>"></script>
<script>
var CLOSE_BUTTON_ID = '#close-btn';
var WIDGET_BODY_FULLSCREEN_CLASS = 'modal-content--fullscreen';
Expand Down
Loading