Skip to content

Commit

Permalink
Add form for shortlink generation with custom utm tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@vidya-ram
vidya-ram committed Sep 27, 2023
1 parent eafb5ab commit 086ad1f
Show file tree
Hide file tree
Showing 6 changed files with 145 additions and 41 deletions.
53 changes: 53 additions & 0 deletions funnel/assets/js/shortlink_form.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
import toastr from 'toastr';
import Utils from './utils/helper';

$(() => {
async function getShortlink(url) {
const response = await fetch(window.Hasgeek.Config.shorturlApi, {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
url,
}).toString(),
}).catch(() => {
toastr.error(window.Hasgeek.Config.errorMsg.serverError);
});
if (response.ok) {
const responseData = await response.json();
$('.js-generated-url').text(responseData.shortlink);
toastr.success(window.gettext('Shortlink generated'));
} else {
toastr.error(window.gettext('This URL is not valid for a shortlink'));
}
}

$('.js-copy-shortlink').on('click', function clickCopyLink(event) {
event.preventDefault();
Utils.copyToClipboard('.js-generated-url');
});

$('#js-generate-shortlink').on('submit', (event) => {
event.preventDefault();
$('.js-generated-url').text();

const url = $('.js-campaign-url').val();
const id = $('.js-campaign-id').val();
const source = $('.js-campaign-source').val();
const medium = $('.js-campaign-medium').val();
const name = $('.js-campaign-name').val();
const term = $('.js-campaign-term').val();
const content = $('.js-campaign-content').val();
const campaignUrl = new URL(url);

if (source) campaignUrl.searchParams.set('utm_source', source);
if (medium) campaignUrl.searchParams.set('utm_medium', medium);
if (name) campaignUrl.searchParams.set('utm_campaign', name);
if (id) campaignUrl.searchParams.set('utm_id', id);
if (term) campaignUrl.searchParams.set('utm_term', term);
if (content) campaignUrl.searchParams.set('utm_content', content);
getShortlink(campaignUrl.href);
});
});
24 changes: 24 additions & 0 deletions funnel/assets/js/utils/helper.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
/* global gettext */
import toastr from 'toastr';

const Utils = {
// convert array of objects into hashmap
tohashMap(objectArray, key) {
Expand Down Expand Up @@ -227,6 +229,28 @@ const Utils = {
},
});
},
copyToClipboard(elem) {
const textElem = document.querySelector(elem);
const stringToCopy = textElem.innerHTML;
if (navigator.clipboard) {
navigator.clipboard.writeText(stringToCopy).then(
() => toastr.success(window.gettext('Link copied')),
() => toastr.success(window.gettext('Could not copy link'))
);
} else {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents(textElem);
selection.removeAllRanges();
selection.addRange(range);
if (document.execCommand('copy')) {
toastr.success(window.gettext('Link copied'));
} else {
toastr.error(window.gettext('Could not copy link'));
}
selection.removeAllRanges();
}
},
};

export default Utils;
26 changes: 2 additions & 24 deletions funnel/assets/js/utils/webshare.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
/* global gettext */
import toastr from 'toastr';
import Utils from './helper';

Expand Down Expand Up @@ -43,35 +42,14 @@ const WebShare = {
$('body').on('click', '.js-copy-link', function clickCopyLink(event) {
event.preventDefault();
const linkElem = this;
const copyLink = () => {
const url = $(linkElem).find('.js-copy-url').first().text();
if (navigator.clipboard) {
navigator.clipboard.writeText(url).then(
() => toastr.success(gettext('Link copied')),
() => toastr.success(gettext('Could not copy link'))
);
} else {
const selection = window.getSelection();
const range = document.createRange();
range.selectNodeContents($(linkElem).find('.js-copy-url')[0]);
selection.removeAllRanges();
selection.addRange(range);
if (document.execCommand('copy')) {
toastr.success(gettext('Link copied'));
} else {
toastr.error(gettext('Could not copy link'));
}
selection.removeAllRanges();
}
};
if ($(linkElem).attr('data-shortlink')) {
copyLink();
Utils.copyToClipboard('.js-copy-url');
} else {
Utils.fetchShortUrl($(linkElem).find('.js-copy-url').first().html())
.then((shortlink) => {
$(linkElem).find('.js-copy-url').text(shortlink);
$(linkElem).attr('data-shortlink', true);
copyLink();
Utils.copyToClipboard('.js-copy-url');
})
.catch((errMsg) => {
toastr.error(errMsg);
Expand Down
4 changes: 4 additions & 0 deletions funnel/assets/sass/base/_utils.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -130,6 +130,10 @@
flex-shrink: 0;
}

.flex-item-grow {
flex-grow: 1;
}

// ============================================================================
// DISPLAY
// ============================================================================
Expand Down
78 changes: 61 additions & 17 deletions funnel/templates/siteadmin_generate_shortlinks.html.jinja2
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,30 +7,74 @@
{% endblock pageheaders %}

{% block content %}
<div class="mui-form">
<form id="js-generate-shortlink" method="post" action="{{ url_for('create_shortlink') }}" accept-charset="UTF-8" class="mui-form mui-form--margins">
<div class="mui-form__fields">
<div class="mui-form__controls">
<div class="mui-textfield">
<input class="field-url js-url-inputbox" {% if request.referrer %}value="{{ request.referrer }}?utm_campaign="{%- endif -%} type="text" placeholder="Enter url"/>
<label for="title">Enter url with utm tags</label>
<div class="mui-textfield mui-textfield--float-label">
<input id="title" class="field-url js-campaign-url js-inbox-change" {% if request.referrer %}value="{{ request.referrer }}"{%- endif -%} type="text"/>
<label for="title">Url</label>
</div>
</div>
</div>
<a href="#" onclick="return false;" class="js-copy-link margin-top" role="button" aria-label="{% trans %}Copy link{% endtrans %}">
<span class="js-copy-url mui-panel display-block" aria-hidden="true"></span>
<span class="js-shorturl-generate mui-btn mui-btn--primary mui-btn--small zero-bottom-margin zero-top-margin">{% trans %}Shorten link{% endtrans %}</span>
</a>
<div class="mui-form__fields">
<div class="mui-form__controls">
<div class="mui-textfield mui-textfield--float-label">
<input id="id" class="field-campaign-id js-campaign-id js-inbox-change" type="text"/>
<label for="id">Campaign ID</label>
</div>
</div>
</div>
<div class="mui-form__fields">
<div class="mui-form__controls">
<div class="mui-textfield mui-textfield--float-label">
<input id="source" class="field-campaign-source js-campaign-source js-inbox-change" type="text"/>
<label for="source">Campaign source</label>
</div>
</div>
</div>
<div class="mui-form__fields">
<div class="mui-form__controls">
<div class="mui-textfield mui-textfield--float-label">
<input id="medium" class="field-campaign-medium js-campaign-medium js-inbox-change" type="text"/>
<label for="medium">Campaign medium</label>
</div>
</div>
</div>
<div class="mui-form__fields">
<div class="mui-form__controls">
<div class="mui-textfield mui-textfield--float-label">
<input id="name" class="field-campaign-name js-campaign-name js-inbox-change" type="text"/>
<label for="name">Campaign name</label>
</div>
</div>
</div>
<div class="mui-form__fields">
<div class="mui-form__controls">
<div class="mui-textfield mui-textfield--float-label">
<input id="term" class="field-campaign-term js-campaign-term js-inbox-change" type="text"/>
<label for="term">Campaign term</label>
</div>
</div>
</div>
<div class="mui-form__fields">
<div class="mui-form__controls">
<div class="mui-textfield mui-textfield--float-label">
<input id="content" class="field-campaign-content js-campaign-content js-inbox-change" type="text"/>
<label for="content">Campaign content</label>
</div>
</div>
</div>
<button type="submit" class="mui-btn mui-btn--raised mui-btn--primary" data-cy="form-submit-btn">{% trans %}Generate shortlink{% endtrans %}</button>
</form>

<div class="flex-wrapper flex-wrapper--center margin-bottom">
<div class="mui-panel flex-item-grow zero-bottom-margin" aria-hidden="true">
<p class="mui--text-subhead zero-bottom-margin js-generated-url"></p>
</div>
<span class="js-copy-shortlink link"aria-label="{% trans %}Copy shortlink{% endtrans %}" role="button">{{ faicon(icon='copy', baseline=true, icon_size='title', css_class="fa-icon--left-margin") }}</span>
</div>
{% endblock content %}

{% block footerscripts %}
<script type="text/javascript">
$(() => {
$('.js-url-inputbox').on('change keyup paste', function() {
var url = $(this).val();
$("[data-shortlink]").attr('data-shortlink', '');
$('.js-copy-url').text(url);
});
});
</script>
<script src="{{ manifest('shortlink_form.js') }}" type="text/javascript"></script>
{% endblock footerscripts %}
1 change: 1 addition & 0 deletions webpack.config.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ module.exports = {
labels_form: path.resolve(__dirname, 'funnel/assets/js/labels_form.js'),
cfp_form: path.resolve(__dirname, 'funnel/assets/js/cfp_form.js'),
rsvp_form_modal: path.resolve(__dirname, 'funnel/assets/js/rsvp_form_modal.js'),
shortlink_form: path.resolve(__dirname, 'funnel/assets/js/shortlink_form.js'),
app_css: path.resolve(__dirname, 'funnel/assets/sass/app.scss'),
form_css: path.resolve(__dirname, 'funnel/assets/sass/form.scss'),
index_css: path.resolve(__dirname, 'funnel/assets/sass/pages/index.scss'),
Expand Down

0 comments on commit 086ad1f

Please sign in to comment.