Custom JavaScript

thaen
thaen

I'm beta testing a new feature on OP right now called Custom JavaScript.  If you're interested in testing this feature out in your Campaigns, comment here or message me, and I'll add you to the beta.

The gist is that you can add any JavaScript you want to your Campaign.  The only catch is that visitors have to explicitly agree to allow that JavaScript to run on their computers.  But they only have to agree once for a given computer.  (If there's no Custom JavaScript on the Campaign, then they won't be prompted to allow it to run.)

There are often features requested that are important to one OP member, but not important to most other OP members, and so the feature likely won't get dev time any time soon.  Or the feature would be so little used by other members that it would effectively be clutter to add it to the UI for all members.  But now, many of those features can be implemented for/by that member on their own Campaign using Custom JavaScript.  (If you have questions on how to implement a particular feature in JavaScript, feel free to ask here in the Community Forums and we can help you figure it out.)

Here's the help page for the Custom JavaScript feature:

https://help.obsidianportal.com/article/190-custom-javascript-basics

Along with this feature, I also added a couple new utility pages to the Campaigns to make it easier to view/share Custom CSS and Custom JavaScript.  (These are not beta ... they will work on all Campaigns right now.)

If you want to see the Custom CSS for a given Campaign, go to that Campaign, and then append "/custom_css" at the end, like so:

https://tobuyafatpig.obsidianportal.com/custom_css

Similarly, if you want to see the Custom JavaScript for a given Campaign, append "/custom_js", like so:

https://tobuyafatpig.obsidianportal.com/custom_js

(Fat Pig doesn't have any Custom CSS or Custom JavaScript, and those pages will tell you that.)

I'm very much looking forward to what y'all build with these new tools.

Obsidian Portal Developer

«1

Comments

  • Abersade
    Abersade
    Posts: 291

    Nice! Sign me up please.

  • thaen
    thaen
    Posts: 953

    @Abersade, done!  Let me know if you have any questions or come across any issues.

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 997

    How will this affect sites that already use javascript?

  • thaen
    thaen
    Posts: 953

    @Keryth987, no effect on the existing in page JavaScript ... of which you are the only one that has that ability.  : )  No one else ever asked to be included in that. 

    This new Custom JavaScript is a completely separate feature, and the JavaScript from it affects the entire Campaign ... not just one page.  (Though you can make the "entire Campaign JavaScript" only affect specific pages by referencing classes or url slugs.)

    Obsidian Portal Developer

  • cgregory
    cgregory
    Posts: 779

    Sure. I'd love to test it out

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • nuadaria
    nuadaria
    Posts: 28

    Please sign me up for this as well.

  • thaen
    thaen
    Posts: 953

    @cgregory, @nuadaria, you should both now have access to the Custom JavaScript window in your Campaign Settings Advanced tab.  Let me know if you have any questions or come across any issues!

    Obsidian Portal Developer

  • nuadaria
    nuadaria
    Posts: 28

    Thanks, will do.

  • cgregory
    cgregory
    Posts: 779

    Thanks

    They are among us!

    image

                       XCom: Defiance - Campaign of the Month November 2016

     

     

  • thaen
    thaen
    Posts: 953

    There was a small bug where the popup (saying Custom JavaScript is being used on the Campaign) was showing up on the next page the visitor went to.  This is fixed now.

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 953

    This feature is now out of beta and available to all Ascendant members! 

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 997

    So, what exactly doe this feature do/allow?

  • thaen
    thaen
    Posts: 953

    @Keryth987, there's a new text box on the Campaign Settings Advanced tab.  Any JavaScript that you want to run on your Campaign, you can put there.  This is fairly similar to the way Custom CSS works.  But JavaScript can do pretty much anything, like totally rearranging the layout of the page, or bringing in data that doesn't exist yet on the page.

    For example, the new feature that enables choosing filters on the Characters page, and then having those be automatically applied by the url.  I built that feature completely in Custom JavaScript first ... and then after I had it fully working there, I added it to the code base.  So, a member could have created that feature just for themselves ... and then shared the JavaScript code here in the Community Forums if they wanted to ... or used the new "/custom_js" page that each Campaign now has to share it.

     

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 953

    @Keryth987, I think I thought of another example that might resonate with you.  A bit back you said you said you wanted every Wiki Page in your Campaign to have an "Edit This Page" button like the Front Page does, but other members didn't want that.  This feature enables a way for you to have that button on all of your Wiki Pages (without having to include it manually at the bottom of each page).

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 997

    Thanks for the clarification

  • Keryth987
    Keryth987
    Posts: 997

    Seeing i don't KNOW Java...I dont suppose anyone could actually make up the Javascript for my Edit Button at the bottom of the page? @Nuadaria perhaps?

  • Keryth987
    Keryth987
    Posts: 997

    Oh and you should probably add a Forum topic for Java discussions

  • nuadaria
    nuadaria
    Posts: 28

    Here's a pretty down and dirty raw JS selection and insert that should do the trick. My results say that you will need some custom CSS, specifically to center the button as that seems to be styled to this button only when in the full div on the home page but that shouldn't be too hard to achieve.

     


    if(document.getElementsByClassName('wiki-edit').length < 1){
    var siblingDiv = document.getElementsByClassName('wiki-page-container');
    var div = document.createElement('div');
    div.innerHTML = '<div class="wiki-edit"><a class="button" href="'+window.location.href+'/edit">Edit This Page</a></div>';

    siblingDiv[0].parentNode.insertBefore(div, siblingDiv.nextSibling);
    }

     

  • nuadaria
    nuadaria
    Posts: 28

    After posting that...it seems that the snippet tool URL encodes part of that, if you can't sort that bit out, ping me on discord and I can either paste it there or worst case, drop it in a small txt file for you or something.

  • Keryth987
    Keryth987
    Posts: 997

    Now does that just go on the page or in that new Javascript box or what? I am TOTALLY clueless. Took me long enough to get qa rough idea of CSS :)

  • thaen
    thaen
    Posts: 953

    @nuadaria ... the HTML encoding should be fixed now ... across the entire Community Forums!!  (That has bothered me for SO long, but it only just occurred to me how to fix it after you commented on it.  Thank you!  And I actually used the Custom JavaScript to create the script that fixes it, and then copied the JavaScript over here to the Community Forums.  : )

    @Keryth987, nuadaria's code (which you can now just copy exactly), goes in the Campaign Settings -> Advanced -> Custom JavaScript box.  Then click Save.  Then go to any Wiki Page in the Campaign, and you'll see the button at the bottom.

    Obsidian Portal Developer

  • thaen
    thaen
    Posts: 953

    Oh and you should probably add a Forum topic for Java discussions

    Done! 

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 997

    And there is a comparable one on the Discord

  • Keryth987
    Keryth987
    Posts: 997

    @Thaen The whole favoriting and such procedure to allow Javascript is kinda clunky to be honest. Perhaps it should simply be a checkbox on the profile, like the whole newsletter and email notifications thing?

     

  • thaen
    thaen
    Posts: 953 edited March 25
    @Keryth987,

    "Perhaps it should simply be a checkbox on the profile, like the whole newsletter and email notifications thing?"

    I appreciate that feedback! I don't think it can be made that simple without opening too much risk of members getting hacked.

    For example, let's say a member checked the single checkbox to allow JavaScript on all Campaigns.  And then later they're in the Community Forums and a malicious person (MP) posts a link to "checkout my cool campaign!", and the member does.

    Then, the MP has a little JavaScript in the Campaign that makes it look like OP is asking the member to login again.  If the member enters their login and password ... then the MP now has those.  Or what if the MP added some JavaScript code that made it look like OP was asking the member to update their credit card info ... then the MP now has those.  Or what if the MP makes the screen look like a gmail login and the member happens to have a gmail account and enters their info ... then the MP now has access to their email account.

    So, we don't want to allow the JavaScript to run for just any Campaign ... it needs to be Campaigns where the member has explicitly verified that they trust that specific GM.  At least that's my current thinking, unless someone sees something I'm missing?

     

    Post edited by thaen on

    Obsidian Portal Developer

  • ragnarhawk
    Posts: 146

    How about a checkbox to "Allow Custom JavaScript on all Favorites"? Or possibly "... on Favorites run by Friends"?

  • thaen
    thaen
    Posts: 953

    @ragnarhawk, those are interesting ideas ... but I'm wary of opening a way for members to forget that they are allowing the JavaScript to run when they are later "just" Friending or Favoriting.  So, I'd still want members to explicitly choose to allow Custom JavaScript per Campaign.

    We can probably make the "allowing" per Campaign easier, though.

    Here's what I'm thinking ...

    If a visitor (wouldn't have to be an OP member ... or they wouldn't have to be logged in ... unlike now) visits a Campaign that is using Custom JavaScript, then they are redirected to a page that is a standard OP page, and not part of the Campaign.  (This is so that the Campaign's Custom CSS can't affect this page, and make the page look like something it's not.)

    On that page would be a message about the Campaign using Custom JavaScript, and what Custom JavaScript is, and the visitor would be able to choose to Allow or Deny the Custom JavaScript on the current computer/device (or if they are logged in, or later login on that device, then it would allow Custom JavaScript on that Campaign any time they are logged in on any device), and either choice (allow/deny) would then forward the visitor on to the Campaign ... with Custom JavaScript working or not, depending.

    OP Members would then also have a link in their Profile to a screen similar to the Manage Favorites one that lists all the Campaigns they have Allowed or Denied Custom JavaScript on.

    For OP Members, we could remember their preference ("allow" or "deny") for a given Campaign on any device they were logged in on.  Currently, the preference is only stored on the device with a cookie, so it will ask again on a different device (computer vs phone for example) ... which I think will be confusing for some.

    So, this solution wouldn't require any Favoriting, and it would be a single click right when they visit the Campaign for the first time.

    Thoughts?

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 997

    You need to make it simpler than it is now. My current group, many of who are in IT to begin with, found it clunky and honestly, annoying, all because I added the edit button to my pages. And I only see it getting worse for a campaign that uses Java a lot in the future.

    Ragnarhawk's suggestions are probably the best. Personally I think rather than being so crazy about JavaScript there should be more security on the forums. Least based on the example you gave thaen

     

  • thaen
    thaen
    Posts: 953

    @Keryth987, noted on the "make it simpler".  Thanks for the feedback!

    The danger is at the Campaign level, so putting more security on the forums would just shunt the attacks to some other vector, so I don't think that really solves the problem.

    I'll work on making the changes I outlined above, and we can see if those feel simpler.

    Just to clarify, adding more JavaScript won't make your Players have to redo the "allow" process.  Once the OP member "allows" the JavaScript for that Campaign, it will just continue to allow the JavaScript even as you add more and more code to customize your Campaign.

     

    Obsidian Portal Developer

  • Keryth987
    Keryth987
    Posts: 997

    I understand that. But consider this. There are many here trying to help OP grow, and the best selling point is the CAMPAIGNS themselves. OP's main competition is, ironically, Microsoft OneNote. I know many GM's who use it for exactly the same thing that one would use OP for. However, OneNote does not allow quite the customization that OP does, particularly in appearance and such. That is OP's selling point vs OneNote, and the existing campaigns are the best marketing for that capability.

     

    However, if someone creates this beautiful site full of information and such, but anyone viewing it, whether they are in the campaign or not, has to go through an involved process of favoriting a campaign they want to see, then editing their profile, THEN allowing javascript...well, they're gonna decide OneNote is simply the easier choice.

    I understand the need to prevent hacking and the ened for security. I am happy to see that is a priority. But please dont let that hinder the creativity and usefulness of OP either.

     

Sign In or Register to comment.

August 2022
In Over Their Heads

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions