Awesome third party scripts

  • 19 April 2019
  • 7 replies
  • 412 views

Userlevel 5
Badge +2



In this topic you can share cool third party scripts so we can learn from each other!

Format of the posts
Image
When you have a script that produces a visual outcome, add a screenshot! In Holland some people say 'Met plaatjes maak je maatjes', which translated to English means 'Images creates friends'.

Purpose
Why did you need the script? What problem were you trying to solve, or what cool idea did you have?

Code
The third party code itself. Please be so kind to add some comments so that other people also know what you have done.

Style
The custom styling you've added to make thinks look nice and position them.



Sidenote:
Third party scripts work for the version of the Insided software it was created for. When Insided changes its code, the scripts can fail. This is not the responsibility of Insided :)

Sidenote 2:
When copy/pasting my scripts I noticed that the text editor removes some html texts. So keep in mind that if you see
code:
jQuery : variable.html('this could be your text');

or
code:
Vanilla javascript: variable.innerHTML = 'this could be your text';

there could be missing some html tags. But I think adding html that way is kind of like bad practice (which I sometimes use as well) anyway.

7 replies

Userlevel 5
Badge +2



In this topic you can share cool third party scripts so we can learn from each other!

Format of the posts
Image
When you have a script that produces a visual outcome, add a screenshot! In Holland some people say 'Met plaatjes maak je maatjes', which translated to English means 'Images creates friends'.

Purpose
Why did you need the script? What problem were you trying to solve, or what cool idea did you have?

Code
The third party code itself. Please be so kind to add some comments so that other people also know what you have done.

Style
The custom styling you've added to make thinks look nice and position them.



Sidenote:
Third party scripts work for the version of the Insided software it was created for. When Insided changes its code, the scripts can fail. This is not the responsibility of Insided :)

Sidenote 2:
When copy/pasting my scripts I noticed that the text editor removes some html texts. So keep in mind that if you see
code:
jQuery : variable.html('this could be your text');

or
code:
Vanilla javascript: variable.innerHTML = 'this could be your text';

there could be missing some html tags. But I think adding html that way is kind of like bad practice (which I sometimes use as well) anyway.
Userlevel 5
Badge +2


Purpose
We received feedback from our users that they would like to see their topics and reactions. Those are hidden beneath the user icon. We figured that we could at some links to the new quick links to make acces easier.

Code
code:
  function createUserTile()
{
//get the user profile link. It only exists when the user is logged in
var objUserLink = document.querySelector('.main-navigation--profile-link');

//if there is a user profile link, continue
if (objUserLink)
{
//if there are quick links on the page, continue
var quickLinks = document.querySelector('.quicklink__container.content--centered');
if (quickLinks)
{
//create a new tile
var newTile = document.createElement('li');
//give it the class that other tiles also have
newTile.className = 'featured-topic quicklink__box has-border infoland';


//add the border radius you configured for your tiles
newTile.style.borderRadius = '10px';


//get the user image
var img = document.querySelector('.profilepicture.profile--dropdown-trigger img');


//create the image container and add it tot the tile
var avatar = document.createElement('div');
avatar.className = "padding__icon quicklink__hero";
newTile.insertBefore(avatar, null);


//add the the image to the image container
var newImage = document.createElement('img');


//add a className for custom styling
newImage.className = 'InfolandAvatar';


//link the image to the file of the user link
newImage.src = img.getAttribute('src');


//add it to the image
avatar.insertBefore(newImage, null);


//get the my topics link from the user menu
var myTopicLink = document.querySelector('.list__item.qa-menu-user-topics a');


//create the my topics link
var myTopics = document.createElement('div');
myTopics.className = 'quicklink__title infolandSub';


//add the text. Mijn topics is dutch for 'my topics'.
myTopics.innerHTML = 'Mijn topics';


//add a click function to the link
myTopics.onclick = function() { location.href = myTopicLink.getAttribute('href'); }
newTile.insertBefore(myTopics, null);


//do the same for the my reactions link
var myReactionLink = document.querySelector('.list__item.qa-menu-user-reactions a');


var myReactions = document.createElement('div');
myReactions.className = 'quicklink__title infolandSub';
myReactions.innerHTML = 'Mijn reacties';
myReactions.onclick = function() { location.href = myReactionLink.getAttribute('href'); }
newTile.insertBefore(myReactions, null);

var intPosition = 1;


//add the new tile to the quick links. The intPosition is 0 based so:
//0 = first position
//1 = middle position
//2 = right position
//3 = next row first position, etc.
quickLinks.insertBefore(newTile, quickLinks.childNodes[intPosition]);
}
}
}




Styling
code:
 .InfolandAvatar
{
border-radius: 50%;
width: 100px;
height: 100px;
margin-top: 10px;
}


.infoland .quicklink__title.infolandSub:hover
{
color: #126ede;
}

.infoland .quicklink__title.infolandSub
{
display: inline-block;
width: 50%;
cursor: pointer;
}

.infoland .quicklink__title.infolandSub:last-child
{
border-left: 1px solid #dbdad9;
}

.quicklink__box.infoland
{
cursor: default;
}

Userlevel 5
Badge +2


Purpose
Due to the European privacy law (GDPR or AVG in Dutch) users should be able to go to the privacy policy easily. We have a community page with our policy, but wasn't easily find-able. We first wanted to add a link to the topic in a header or footer, but we have a nice place to add it. It would feel out of place. So we decided to add a link to the topic to the menu.


code:
   function createPrivacyLink()
{
var menu = document.querySelector('.main-navigation-btn-forum');
var menuList = menu.querySelector('.js-collapse-content');

//check if the menu is there
if (menu && menuList)
{
//create a new category
var newGroup = document.createElement('li');
newGroup.className = 'group_item'
menuList.insertBefore(newGroup, null);

var itemList = document.createElement('ul');
newGroup.insertBefore(itemList, null);

var header = document.createElement('li');
header.className = 'group_link-label';
itemList.insertBefore(header, null);

//give the new category a name. In this case 'Overig', which means 'Misc.'
var headerText = document.createElement('span');
headerText.innerText = 'Overig';
header.insertBefore(headerText, null);

//add the link button for the privacy policy
var privacylistitem = document.createElement('li');
privacylistitem.className = 'main-navigation--wrapper__link';
itemList.insertBefore(privacylistitem, null);

//create the link to the actual privacy policy page
var privacylink = document.createElement('a');
privacylink.className = 'link qa-menu-subforum';
privacylink.href = 'https://community.infoland.nl/site/terms';
privacylistitem.insertBefore(privacylink, null);

//give the link a name (Privacyverklaring, privacy policy in English)
var privacyLinkText = document.createElement('span');
privacyLinkText.innerText = 'Privacyverklaring';
privacyLinkText.className = 'subforum-title';
privacylink.insertBefore(privacyLinkText, null);
}

}
Userlevel 5
Badge +2


Purpose:
Our community members have a hard time finding their own topics and reactions. Given the new quick links part, we are experimenting with adding a quick link when the user is logged in, with buttons to their topics and reactions.

code:
 function createUserTile()
{
//get the user profile link. It only exists when the user is logged in
var objUserLink = document.querySelector('.main-navigation--profile-link');

//if there is a user profile link, continue
if (objUserLink)
{
//if there are quick links on the page, continue
var quickLinks = document.querySelector('.quicklink__container.content--centered');
if (quickLinks)
{
//create a new tile
var newTile = document.createElement('li');
//give it the class that other tiles also have
newTile.className = 'featured-topic quicklink__box has-border infoland';


//add the border radius you configured for your tiles
newTile.style.borderRadius = '10px';


//get the user image
var img = document.querySelector('.profilepicture.profile--dropdown-trigger img');


//create the image container and add it tot the tile
var avatar = document.createElement('div');
avatar.className = "padding__icon quicklink__hero";
newTile.insertBefore(avatar, null);


//add the the image to the image container
var newImage = document.createElement('img');


//add a className for custom styling
newImage.className = 'InfolandAvatar';


//link the image to the file of the user link
newImage.src = img.getAttribute('src');


//add it to the image
avatar.insertBefore(newImage, null);


//get the my topics link from the user menu
var myTopicLink = document.querySelector('.list__item.qa-menu-user-topics a');


//create the my topics link
var myTopics = document.createElement('div');
myTopics.className = 'quicklink__title infolandSub';


//add the text. Mijn topics is dutch for 'my topics'.
myTopics.innerHTML = 'Mijn topics';


//add a click function to the link
myTopics.onclick = function() { location.href = myTopicLink.getAttribute('href'); }
newTile.insertBefore(myTopics, null);


//do the same for the my reactions link
var myReactionLink = document.querySelector('.list__item.qa-menu-user-reactions a');


var myReactions = document.createElement('div');
myReactions.className = 'quicklink__title infolandSub';
myReactions.innerHTML = 'Mijn reacties';
myReactions.onclick = function() { location.href = myReactionLink.getAttribute('href'); }
newTile.insertBefore(myReactions, null);

var intPosition = 1;


//add the new tile to the quick links. The intPosition is 0 based so:
//0 = first position
//1 = middle position
//2 = right position
//3 = next row first position, etc.
quickLinks.insertBefore(newTile, quickLinks.childNodes[intPosition]);
}
}
}



code:
  .InfolandAvatar
{
border-radius: 50%;
width: 100px;
height: 100px;
margin-top: 10px;
}


.infoland .quicklink__title.infolandSub:hover
{
color: #126ede;
}

.infoland .quicklink__title.infolandSub
{
display: inline-block;
width: 50%;
cursor: pointer;
}

.infoland .quicklink__title.infolandSub:last-child
{
border-left: 1px solid #dbdad9;
}

.quicklink__box.infoland
{
cursor: default;
}
Userlevel 2
Awesome stuff Koen! Really nice to the cool applications you found and sharing the code for others to adopt!
Userlevel 7
Great examples Koen! 🙌👏
Userlevel 5
Badge +2
A request from @ErikT!


Purpose
We have our own document management system containing a lot of documentation. Because we want to use our own system and presentation options, we don't want to convert the content to a community topic. But we don't think it is user friendly to let the user go to a topic, to let them visit another link directly. So I made a script that embeds the linked pages (from specified URLS) to the topic.

code:
//strFind is a variable I use to say how the link should look, f.i.
//a[href*="community.insided.com"]
//the above example returns all hyperlinks that have community.insided.com in them.
function checkForInPageMaterial(strFind)
{
//get the first post of the topic
var divTopic = document.querySelector('div.js-toggle-target');
//if the topic is available, proceed
if (divTopic)
{
//get all hyperlinks that we are looking for
var aTrainings = divTopic.querySelectorAll(strFind);
//only continue when there is only 1 hyperlink found, otherwise it would be messy
if (aTrainings.length > 1)
return;
else
{
var aTrainingLink = aTrainings[0];
if (aTrainingLink)
{
//get the topic post content element
var divTopicContent = divTopic.querySelector('div.post__content');

//create a new iFrame, with some styling
var newIFrame = document.createElement('iframe');
newIFrame.className = 'infolandTraining'

//set the source target for the iFrame with the link from the post (and always replace http:// with https:// because our system demands https for embedding)
newIFrame.src = aTrainingLink.getAttribute('href').replace('http://', 'https://');
//remove the border of the frame
newIFrame.setAttribute('frameBorder', '0')

//set the height of the frame to the half of your window height
newIFrame.style.height = ($(window).height() / 1.5) + "px";

//add the iFrame to the topic
divTopicContent.insertBefore(newIFrame, null);

//create a fullscreen link in case someone would like to open the page fullscreen.
var fullScreen = document.createElement('a');
fullScreen.href = aTrainingLink.getAttribute('href');
fullScreen.innerText = 'Open in nieuw venster';
fullScreen.className = 'infolandFullScreen';
fullScreen.setAttribute('target', '_blank');

divTopicContent.insertBefore(fullScreen, newIFrame);
}
}
}
}


code:
   .infolandTraining
{
width: calc(100%);
}


.infolandFullScreen
{
margin-top: 20px;
display: block;
text-align: right;
font-size: 0.75em !important;
}

Reply