Skip to content
Sudonix

Interesting Widget code, but can't fetch API

Solved Customisation
  • phenomlabundefined

    @Panda I think this might have something to do with the reverse proxy that nginx runs for NodeBB. Do you use this, or are you using something else?

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    Pandaundefined 2 Replies
    1
  • Pandaundefined

    @phenomlab ah! Its nodebb hosted site, so they do all that

    0
  • Pandaundefined Panda has marked this topic as solved on
  • Pandaundefined

    @phenomlab
    Two things

    1. this particular forum had plans to integrate tools which use API calls into widgets.
      Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    2. General forum question: because there were few ‘Red Herrings’ while exploring this issue, I was tempted to tidy up this thread by deleting some of the erroneous comments.
      I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

    0
  • phenomlabundefined

    @Panda said in Interesting Widget code, but can’t fetch API:

    this particular forum had plans to integrate tools which use API calls into widgets.
    Now we reached the point of finding possible reason why API calls dont work, is there anyway round that?

    Actually, yes. I had a similar issue with the below (which you might enjoy also) when running in a page widget

    https://sudonix.org/cbg

    For this to work, I needed to call the script externally, and so used the below widget code as a guide

    <head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js" integrity="sha512-3gJwYpMe3QewGELv8k/BX9vcqhryRdzRMxVfq6ngyWXwo03GFEzjsUm8Q7RZcHPHksttq7/GFoxjCVUjkjvPdw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<style>
.cbgresult {
    margin: 10px 0 15px 0;
    padding: 15px;
    border-radius: 6px;
    font-family: "Source Code Pro", Menlo,Monaco,Consolas,"Courier New",monospace;
    font-size: 2rem;
    text-align: center;
    background: var(--bs-code-block) !important;
}
.cbgresult:after {
content: '"';
}
.cbgresult:before {
content: '"';
}
.cbgheader {
    margin-top: 40px;
    text-align: center;
}
.generate {
    text-align: center;
}
</style>
<script src="/assets/js/cbg.js"></script>
<div class="cbgheader">
<h2>Corporate BS Generator</h2>
<p>
Need a better sounding line? Just click the "Generate Another" button to get another killer phrase.
</p>
</div>
<div id="cbg" class="cbgresult"></div>
<div class="generate">
<button id="reloadme" class="btn btn-primary">Generate Another</button>
</div>
<script>
$(function() { // after page load
    $('.cbgresult').fadeOut(0, function() {
    $("#cbg").show();
        $(this).html(phrase());
   });
});
$(document).ready(function(){
$("#cbg").show();
    $('#reloadme').click(function(){
 $("#cbg").html(phrase());
    });
});
</script>

    @Panda said in Interesting Widget code, but can't fetch API:

    I noticed before this forum has tight restriction times on editing / removing comments. I guess this is intentional. Is your experience that it is better to have this on a forum rather than unlimited edit / delete timer?

    This is correct. Posts can only be deleted before a set time period elapses, which is 30 minutes

    915f61df-01e9-40bb-9e9f-937abb2e1494-image.png

    The intention here is to give you sufficient time to remove something you feel wasn’t relevant, or you really shouldn’t have posted (see policies), but for the sake of conversational flow, posts are then indelible because they add weight and value to the overall thread. For example, if you reference a comment in the thread, but that particular post is deleted, then the discussion becomes diluted.

    Using this approach, it makes it easier for anyone else with a similar issue to see how we resolved it.

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    0
  • phenomlabundefined phenomlab has marked this topic as unsolved on
  • Pandaundefined

    @phenomlab
    That is interesting code example!
    It raises new question
    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

    0
  • phenomlabundefined

    @Panda said in Interesting Widget code, but can’t fetch API:

    How did you drop that widget into the post there?
    I hadnt seen this BSgenerator anywhere on sudonix site, do you use it somewhere already?

    Yes, here

    https://sudonix.org/topic/414/corporate-bullshit-generator?_=1687774393044

    It’s not a “post” or “topic” in the common sense. It is actually a page in it’s own right and leverages nodebb-plugin-custom-pages. This in turn creates a new “route” which behaves like a page, meaning it is then exposed for widgets.

    @Panda said in Interesting Widget code, but can’t fetch API:

    Also can you explain more what you mean by calling the code externally. In my API call example, how would I go about doing that?

    By this, I mean create all the required code in an external JS file that is reachable by the NodeBB instance - so, in “public” for example - or in my case /public/js. The widget then “calls” that file and because it runs outside of the scope of NodeBB, you just need to return the values to the widget.

    Hope this makes sense?

    Author of OGProxy, Swatch, Threaded, Card, and most of Sudonix's bugs…

    1
  • Pandaundefined Panda has marked this topic as solved on

Did this solution help you?
Did you find the suggested solution useful? Why not buy me a coffee? It's a nice gesture, and a great way to show your appreciation 💗

  • crazycellsundefined

    CSS code customization for the link preview plugin

    Solved Customisation
    4
    3 Votes
    4 Posts
    151 Views
    phenomlabundefined

    @crazycells said in CSS code customization for the link preview plugin:

    does OGProxy show the pdf previews as well?

    Not yet, but it could with a bit of additional code.

  • crazycellsundefined

    Page control arrows for PWA

    Solved Customisation
    27
    25 Votes
    27 Posts
    400 Views
    phenomlabundefined

    @crazycells it is, yes - I think I’ll leave it as there is no specific PWA CSS classes I know of. Well, you could use something like the below, but this means multiple CSS files for different operating systems.

    /** * Determine the mobile operating system. * This function returns one of 'iOS', 'Android', 'Windows Phone', or 'unknown'. * * @returns {String} */ function getMobileOperatingSystem() { var userAgent = navigator.userAgent || navigator.vendor || window.opera; // Windows Phone must come first because its UA also contains "Android" if (/windows phone/i.test(userAgent)) { return "Windows Phone"; } if (/android/i.test(userAgent)) { return "Android"; } if (/iPad|iPhone|iPod/.test(userAgent) && !window.MSStream) { return "iOS"; } return "unknown"; // return “Android” - one should either handle the unknown or fallback to a specific platform, let’s say Android }

    Once you’re in that rabbit hole, it’s impossible to get out of it.

  • Pandaundefined

    Following the API docs but its not clear ...

    Solved Customisation
    8
    2 Votes
    8 Posts
    251 Views
    phenomlabundefined

    @Panda you’d be surprised. If you consider that you’d need to use the API to be able to populate a WordPress widget for example (which in turn would of course be PHP), taking this route is still immensely popular.

  • Pandaundefined

    Sidebar Widget is no longer on the side!

    Moved Solved General
    4
    2 Votes
    4 Posts
    174 Views
    phenomlabundefined

    @Panda said in Sidebar Widget is no longer on the side!:

    Ah, so sidebar wont work on mobile?

    Correct. If you review the docs on bootstrap, you’ll notice that it is designed on a grid system

    https://getbootstrap.com/docs/5.0/layout/grid/

    What I mean by changing the category is moving it on here to general as you posted it in bugs, when it isn’t.

  • Pandaundefined

    Composer Zen icon?

    Solved Configure
    8
    2 Votes
    8 Posts
    211 Views
    phenomlabundefined

    @DownPW exactly. Not really a new concept, and in all honesty, not something I’ve ever used.

    If you consider the need to add links and references, or citations, you’d need to be able to see other parts of the screen!

  • Pandaundefined

    NodeBB inline videoplayer

    Solved Customisation
    12
    3 Votes
    12 Posts
    715 Views
    Pandaundefined

    @phenomlab
    YAY! It works
    Thanks so much

  • Pandaundefined

    Rotating homepage icons, gifs?

    Solved Configure
    2
    3 Votes
    2 Posts
    195 Views
    phenomlabundefined

    @eveh It’s not a GIF, no. It’s actually a webp file so made much smaller, and uses keyframes to control the rotation on hover. You can easily make your own though 🙂

    The CSS for that is as below

    @keyframes rotate180 { from { transform: rotate(0deg); } to { transform: rotate(180deg); } } @keyframes rotate0 { from { transform: rotate(180deg); } to { transform: rotate(0deg); } }

    Your milage may vary on the CSS below, as it’s custom for Sudonix, but this is the class that is used to control the rotate

    .header .forum-logo, img.forum-logo.head { max-height: 50px; width: auto; height: 30px; margin-top: 9px; max-width: 150px; min-width: 32px; display: inline-block; animation-name: rotate180, rotate0; animation-duration: 1000ms; animation-delay: 0s, 1000ms; animation-iteration-count: 1; animation-timing-function: linear; transition: transform 1000ms ease-in-out; }
  • DownPWundefined

    answers appearance css code request

    Solved Customisation
    11
    1 Votes
    11 Posts
    557 Views
    phenomlabundefined

    @DownPW yes, because of the modifications that Sudonix uses, you’ll need to tailor to fit your needs.