Skip to content

Commit

Permalink
User facing UI with ?app URL parameter
Browse files Browse the repository at this point in the history
  • Loading branch information
@Artaud
Artaud committed Jan 21, 2019
1 parent 070ea8a commit a1d6499
Show file tree
Hide file tree
Showing 7 changed files with 46,365 additions and 323 deletions.
192 changes: 127 additions & 65 deletions _includes/head.html
View file
Expand Up @@ -12,77 +12,139 @@
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
handleUrlParams()
});


// Function declarations below

function handleUrlParams() {
params = new URLSearchParams(window.location.search);
awardImageParam = getAwardImageParam()

for(var entry of params.entries()) {
if (entry[0] == "app") {
makeSiteUserFacing(entry[1])
}
}

console.log(awardImageParam)
handleAwardImages("?" + awardImageParam)
changeScoreParameterInBadgeSrc(awardImageParam)
persistUrlParameters()
}

function getAwardImageParam() {
params = new URLSearchParams(window.location.search);
awardImageParam = "3"
for(var entry of params.entries()) {
console.log(entry[0])
if (/\??\d/.test(entry[0])) {
awardImageParam = entry[0]
if (entry[0].length > 1) {
awardImageParam = entry[0].substring(1,2)
}
}
}
console.log(awardImageParam)
return awardImageParam
}

function makeSiteUserFacing(appName) {
// Turn all [your app] mentions into specific app
$('p').each(function (index,el) {
el.innerHTML = el.innerHTML.replace(/your app/gi, appName);
});

// Hide Story and Dev solution section + hide menu
$('#vendor-menu').hide()
$('#apidoc').hide()
$('#contribute').hide()
$('#explanation-section').hide()
$('#developer-solution-section').hide()
$('#badge-section').hide()
$('#customization-links').hide()
}

function persistUrlParameters() {
urlParams = new URLSearchParams(window.location.search)

$('a').each(function () {
if (this.host === window.location.host && this.href.indexOf('#') === -1) {
if (this.className == "customization-switch-link") {
this.href = this.href.replace(/\??\d/, window.location.search)
} else {
this.href = this.href + window.location.search
}
}
});
}

function handleAwardImages(awardImageParam) {
scoreCustomization = []
{% for img in site.data.award_images %}
addCustomScore({{ img.parameter }}, {{ img.emptyImg }}, {{ img.fullImg }}, {{ img.attribution }})
addBadgeImage({{ img.parameter }}, {{ img.emptyImg }}, {{ img.fullImg }}, {{ img.attribution }})
{% endfor %}

var arrayLength = scoreCustomization.length;
for (var i = 1; i < arrayLength; i++) { currentHtml=$('#customization-links').html()
$('#customization-links').html(currentHtml + '<a class="customization-switch-link" href="' + window.location.pathname
+ scoreCustomization[i].param + '"><img class="customization-switch" src="' + scoreCustomization[i].fullScore +'"></a>')
for (var i = 1; i < arrayLength; i++) {
currentHtml = $('#customization-links').html()
$('#customization-links').html(currentHtml + '<a class="customization-switch-link" href="' + window.location.pathname + scoreCustomization[i].param + '"><img class="customization-switch" src="' + scoreCustomization[i].fullScore + '"></a>')
}

var currentScoreCustomization = scoreCustomization.filter(obj => {
return obj.param === awardImageParam
})
changeScoreImages(currentScoreCustomization[0].emptyScore, currentScoreCustomization[0].fullScore)
attributeIcon(currentScoreCustomization[0].attribution)
//addScoreParameterToAllLocalLinks(awardImageParam)
}

var currentScoreCustomization = scoreCustomization.filter(obj => {
return obj.param === window.location.search
})
changeScoreImages(currentScoreCustomization[0].emptyScore, currentScoreCustomization[0].fullScore)
attribute(currentScoreCustomization[0].attribution)
addScoreParameterToAllLocalLinks(window.location.search)

changeScoreParameterInBadgeSrc()
});




function addCustomScore(parameter, emptyScore, fullScore, attribution) {
scoreCustomization.push({
'param': parameter,
'emptyScore': "/assets/img/" + emptyScore,
'fullScore': "/assets/img/" + fullScore,
'attribution': attribution
})
}
function attribute(author) {
document.getElementById('icons-attribution').innerHTML = author
}
function addScoreParameterToAllLocalLinks(parameter) {
$('a').each(function () {
if (this.host === window.location.host && this.className != "customization-switch-link" && this.href.indexOf('#') ===
-1) {
this.href = this.href + parameter;
}
});
}
function changeScoreImages(imgRelativePathEmptyScore, imgRelativePathFullScore) {
$('.score-empty').each((i, score) => {
$(score).attr('src', imgRelativePathEmptyScore)
})
$('.score-full').each((i, score) => {
$(score).attr('src', imgRelativePathFullScore)
})
}


function changeScoreParameterInBadgeSrc() {
$('#badge-shareable').attr('src', 'https://dontkillmyapp.com/badge{{page.url}}' + window.location.search.substring(1)
+ '.svg')
console.log("fuui")
}

function hideBadge() {
$('#badge').hide()
}

function copyEmbedToClipboard() {
const el = document.createElement('textarea');
el.value = document.getElementById("embed").innerHTML
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}
</script>
function addBadgeImage(parameter, emptyScore, fullScore, attribution) {
scoreCustomization.push({
'param': parameter,
'emptyScore': "/assets/img/" + emptyScore,
'fullScore': "/assets/img/" + fullScore,
'attribution': attribution
})
}
function attributeIcon(author) {
document.getElementById('icons-attribution').innerHTML = author
}
function addScoreParameterToAllLocalLinks(parameter) {
$('a').each(function () {
if (this.host === window.location.host && this.className != "customization-switch-link" && this.href.indexOf('#') ===
-1) {
this.href = this.href + parameter;
}
});
}
function changeScoreImages(imgRelativePathEmptyScore, imgRelativePathFullScore) {
$('.score-empty').each((i, score) => {
$(score).attr('src', imgRelativePathEmptyScore)
})
$('.score-full').each((i, score) => {
$(score).attr('src', imgRelativePathFullScore)
})
}

function changeScoreParameterInBadgeSrc(parameter) {
$('#badge-shareable').attr('src', 'https://dontkillmyapp.com/badge{{page.url}}' + parameter
+ '.svg')
}

function hideBadge() {
$('#badge').hide()
}

function copyEmbedToClipboard() {
const el = document.createElement('textarea');
el.value = document.getElementById("embed").innerHTML
document.body.appendChild(el);
el.select();
document.execCommand('copy');
document.body.removeChild(el);
}

</script>
</head>
26 changes: 17 additions & 9 deletions _layouts/vendor.html
View file
Expand Up @@ -53,24 +53,32 @@ <h1>{{ page.name }}
{{ content }}

{%- if page.explanation and page.explanation != "" -%}
<h2 id="explanation-title"><img src="/assets/img/story.svg" class="poo" alt=""> <a id="explanation"></a>Story</h2>
<p>{{ page.explanation | markdownify }}</p>
<section id="explanation-section">
<h2 id="explanation-title"><img src="/assets/img/story.svg" class="poo" alt=""> <a id="explanation"></a>Story</h2>
<p>{{ page.explanation | markdownify }}</p>
</section>
{%- endif -%}

{%- if page.user_solution and page.user_solution != "" -%}
<h2 id="user-solution-title"><a id="user-solution"></a><img src="/assets/img/muscle.svg" class="poo" alt=""> Solution for users</h2>
<p>{{ page.user_solution | markdownify }}</p>
<section id="user-solution-section">
<h2 id="user-solution-title"><a id="user-solution"></a><img src="/assets/img/muscle.svg" class="poo" alt=""> Solution for users</h2>
<p>{{ page.user_solution | markdownify }}</p>
</section>
{%- endif -%}

{%- if page.developer_solution and page.developer_solution != "" -%}
<h2 id="developer-solution-title"><a id="dev-solution"></a><img src="/assets/img/android.svg" class="poo" alt=""> Solution for devs</h2>
<p>{{ page.developer_solution | markdownify }}</p>
<section id="developer-solution-section">
<h2 id="developer-solution-title"><a id="dev-solution"></a><img src="/assets/img/android.svg" class="poo" alt=""> Solution for devs</h2>
<p>{{ page.developer_solution | markdownify }}</p>
</section>
{%- endif -%}

{%- if page.award and page.award != "" -%}
<h2 id="developer-solution-title"><a id="badge"></a><img src="/assets/img/placeholder.svg" class="poo score-full" alt=""> Badge</h2>
<p id="embed"><a href="{{page.url}}"><img id="badge-shareable" width="306px" src="placeholder"></a></p>
<p class="text-center" id="copyembed" onclick="copyEmbedToClipboard()">Copy embed code to clipboard</p>
<section id="badge-section">
<h2 id="badge-title"><a id="badge"></a><img src="/assets/img/placeholder.svg" class="poo score-full" alt=""> Badge</h2>
<p id="embed"><a href="{{page.url}}"><img id="badge-shareable" width="306px" src="/assets/img/placeholder.svg"></a></p>
<p class="text-center" id="copyembed" onclick="copyEmbedToClipboard()">Copy embed code to clipboard</p>
</section>
{%- endif -%}

</div>
Expand Down

3 comments on commit a1d6499

@ocram
Copy link

@ocram ocram commented on a1d6499 Jan 21, 2019

Choose a reason for hiding this comment

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

Was including the large _vendors/pk.txt intended?

What about other (not related) changes such as removing target="_blank" rel="noopener noreferrer" on links?

@Artaud
Copy link
Collaborator Author

@Artaud Artaud commented on a1d6499 Jan 21, 2019

Choose a reason for hiding this comment

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

  1. no, commited by mistake, removing it in next commit
  2. that's due to removing a plugin, I think it's unneeded...

big thanks for your help!

@Artaud
Copy link
Collaborator Author

@Artaud Artaud commented on a1d6499 Jan 21, 2019

Choose a reason for hiding this comment

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

fixed with ef8528d

Please sign in to comment.