Layout Editor - Add a Javascript Block Type

    • 265 posts
    June 26, 2020 4:25 PM EDT

    In the Layout Manager, there is currently a HTML block which allows the admin to add HTML code to the page.

     

    This block is inserted into the code of the page with a div tag that has a class of 'generic_layout_container layout_core_html_block'. This is OK when you have HTML code that you want to display on your site, but not OK when you want to insert some hidden JavaScript or code into your site.

     

    When you use the block to insert some JavaScript code, the page appears to the end user like this as the block is displayed with nothing in (this block contains JavaScript code to only allow my users to upload videos):

    And the code contained is:

     

    <div class="generic_layout_container layout_core_html_block"> <script language="javascript"> typeWrapper = document.getElementById("type-wrapper"); typeWrapper.style.display = "none"; typeSelect = document.getElementById("type"); typeSelect.remove(0); typeSelect.remove(0); typeSelect.value = "upload"; window.updateTextFields(); rotationDiv = document.getElementById("rotation-wrapper"); rotationDiv.style.display = "none"; </script> </div>

     

    My request is for a block (perhaps called a "Javascript Block") that is NOT contained within a DIV tag. It would just insert whatever code you have added into the appropriate place in the page, and be hidden to the user.

    • Moderator
    • 6923 posts
    June 27, 2020 4:47 AM EDT

    A quickfix would be to use CSS to hide it if that even works. I'll see if we can safely do this. I suggest playing with an ad block for it. See if that works for now. I'll check on this on Monday.

    • 265 posts
    June 27, 2020 5:36 AM EDT

    CSS works, but then it would hide every block that is a HTML Block (they all have the same class, and are not individually identifiable).

     

    Some of my HTML blocks I do want to display to the user.

    • Moderator
    • 6923 posts
    June 27, 2020 7:49 AM EDT

    I had mentioned to try the ad campaign. It worked for me to hide it. I didn't test the js though to see if it is working. 

    I added the code above to an html ad campaign. I then added that ad to just the Video Create page. I then added this CSS to theme.css 

    #global_page_video-index-create .layout_core_ad_campaign { background: transparent; }

     

    and it seems to work. I show here a before and after. Note in the before there are two white strips showing. One is the html widget and one is the ad campaign. In the second one, the ad campaign is hiding after the above CSS was added. 

    • 265 posts
    June 27, 2020 8:52 AM EDT

    Ah-hah! I hadn't used the Ad feature before, so I didn't realise what you meant straight away - the Ads will allow you to add raw HTML code to a page without the extra div tag. Thanks for the pointer. 

     

    I would still like my feature request to be considered though. And while it would be unusual, a user may want to add adverts to the video create page as well.


    This post was edited by abuk at June 27, 2020 8:52 AM EDT
    • Moderator
    • 6923 posts
    June 27, 2020 9:47 AM EDT

    Glad it works for you. Yes, we will consider the request. Safety first. We need to consider that not all clients know safe stuff they can add to their site. So, I'll ask the dev team as I don't know if we can safely do it or if we need to add something to the developer SDK admin area.

    • 265 posts
    July 6, 2020 4:28 PM EDT

    In case anyone is looking for a solution, here is my JavaScript hack, which requires you:

    1. Add the line
       
      <div class="javascriptChild"></div>​

      to each HTML Block you want to hide.

    2. Add a HTML Block to your site footer (including the div tag line featured above) to get JavaScript to hide the parent element of every div tag with the class 'javascriptChild'.
       
      <div class="javascriptChild"></div> <script type="text/javascript"> jQuery(document).ready(jQuery(".javascriptChild").parent().hide()); </script>​


    This post was edited by abuk at July 6, 2020 4:35 PM EDT