Custom Layouts Plugin

I just updated try.thepavilion.io to the latest version of both Discourse and this plugin and it has no issues. See e.g. try.thepavilion.io/c/layouts

Are you running the latest version of the plugin?

If you are running the latest version of everything, can you go to /logs and send me a PM with all the latest logs and a full list of the plugins you’re using

Hi Angus

This is my log:

ReferenceError: createWidget is not defined
    at https://babyforex.net/assets/plugins/layouts-custom-html-79795a6b28be65e4018399be0f7acd013a9a3065bf89e41348009b7d4d022c17.js:1:871
    at t.module.exports.u.<computed> (https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:561910)
    at t.module.exports.u.<computed> (https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:561623)
    at require (https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:561640)
    at https://babyforex.net/assets/application-d8533a612d618e9f9772f7c5554ffa382ad1ac0d9948ebcdfcc616f5e295c095.js:1:2403830
    at Array.forEach (<anonymous>)
    at Object.t (https://babyforex.net/assets/application-d8533a612d618e9f9772f7c5554ffa382ad1ac0d9948ebcdfcc616f5e295c095.js:1:2403702)
    at Object.n.initialize (https://babyforex.net/assets/application-d8533a612d618e9f9772f7c5554ffa382ad1ac0d9948ebcdfcc616f5e295c095.js:1:176791)
    at https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:340617
    at i.each (https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:501398)

And here:

ReferenceError: Can’t find variable: createWidget Url: https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js Line: 1 Column: 31156 Window Locati

https://babyforex.net/assets/plugins/layouts-custom-html-79795a6b28be65e4018399be0f7acd013a9a3065bf89e41348009b7d4d022c17.js:1:883

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:561915

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:561624

require@https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:561640

https://babyforex.net/assets/application-d8533a612d618e9f9772f7c5554ffa382ad1ac0d9948ebcdfcc616f5e295c095.js:1:2403839

forEach@[native code]

t@https://babyforex.net/assets/application-d8533a612d618e9f9772f7c5554ffa382ad1ac0d9948ebcdfcc616f5e295c095.js:1:2403709

https://babyforex.net/assets/application-d8533a612d618e9f9772f7c5554ffa382ad1ac0d9948ebcdfcc616f5e295c095.js:1:176795

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:340627

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:501399

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:500421

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:499868

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:499914

_runInitializer@https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:340854

runInstanceInitializers@https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:340577

_bootSync@https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:325419

didBecomeReady@https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:331042

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:490059

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:489056

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:491075

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:496504

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:493039

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:497040

e@https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:29468

https://babyforex.net/assets/ember_jquery-d1d89874d5f08a664c68007c6c2eef5e3bb1cbd8058291fce7818d8ef4ded8ca.js:1:29788

You need to update the layouts-custom-html plugin to this commit

Note that the plugin-based widgets are generally being phased out in favour of theme-based widgets. I’ll be release a theme-component that replaces this plugin in the near future.

3 Likes

I had to change a few functions to get my plugin to work again.

Mainly using

layouts.createLayoutsWidget. and DiscourseLayouts::Widget.add

1 Like
TypeError: Discourse.SiteSettings is undefined_discourse-layouts-21b7cbab0ee1773efd84d72a08dbb131313019d1a0b99321fc5f165b31752521.js:93:23
    <anonymous> _discourse-layouts-21b7cbab0ee1773efd84d72a08dbb131313019d1a0b99321fc5f165b31752521.js:93
    jQuery 8
    _prepareInitializer _application-c96f4694dbdebd9912b6dffe0051bbb7d18f7c4bf08c5c3272c57906b63a978e.js:6849
    start _application-c96f4694dbdebd9912b6dffe0051bbb7d18f7c4bf08c5c3272c57906b63a978e.js:6870
    forEach self-hosted:225
    start _application-c96f4694dbdebd9912b6dffe0051bbb7d18f7c4bf08c5c3272c57906b63a978e.js:6866
    <anonymous> _start-discourse-efa4e5abfbd1b50b5152ffbe64d5dcea9f7c33f766dcc6387e2711f0f2112148.js:3
  var sidebarPadding = 20;
  var mainLeftOffset = Discourse.SiteSettings.layouts_sidebar_left_width + sidebarPadding;
  var mainRightOffset = Discourse.SiteSettings.layouts_sidebar_right_width + sidebarPadding;

We’re facing a problem, after the latest update. It’s reporting that Discourse.SiteSettings is not defined. Is it direct, og indirecly related to this plugin?

(I’ve just rebuilded our page)

Update:
Retort are generating the same issues. I’ve disabled Custom Layouts from our build, but hereafter, Retort reported the same problem with Discourse.SiteSettings :slight_smile:

Thanks Tobias, it’s due to this change in Discourse:

I’ve addressed the issue in Layouts:

1 Like

Oh my I’m amazed the previous code ever worked! Those site settings were evaluated at module read time, which could be before the app has booted. Your new solution is now much cleaner and future proof :slight_smile:

3 Likes

Newly realised the power of this plugin, and really love the new direction it has taken with widgets based on components. Thank you @angus :tada:

Tested it quickly on a site but realised there is a compatibility issue when used with other theme components that injects themselves between the header and the main content; the sidebars gets stuck/sticky to the height including the height the injected theme component, rendering the sidebars floating in the middle or lower half of the screen.

Also - when I include the Layouts Topic Lists Widget in the active theme and activate it in Layouts, I get a white page and have to deactivate the Layouts plugin and rebuild to be able to fix.

All the best

2 Likes

Indeed, this is an issue I’m working on atm :slight_smile: Note that you can also disable fixed positioning via a site setting.

I’ll take a look at that widget, thanks.

1 Like

Continuing the discussion from Sidebar with categories:

I posted that question :arrow_up:︎ in the Sidebar with categories Plugin discussion.

I’m wondering how difficult it would be to customize that or write some custom code/plugin/theme component to allow extend that functionality and offer a nested folder type view of the categories and sub-categories.

Specs:

I want the Categories listed in the Sidebar menu to show the main categories and Categories with Sub-Categories would clearly indicate this. then when you click on one, it shows the sub-categories. And the last key functionality is that no matter where you are in the forums, the sidebar would indicate the source/location of the active discussion that you are viewing.

e.g. So if someone visits our forums from an organic google search, and end up viewing a Topic in a Sub-category, we want them to see that they are in a Sub-category, within the main Category.

Not sure how difficult it would be to develop this and/or what the cost would be, but if anyone can help with this, please let me know!

3 Likes

Hey :slight_smile:

This is very similar to what we have on thepavilion.io

This is achieved via the Layouts Plugin + Layouts Category List Widget.

Screenshot at Jul 20 15-09-39

7 Likes

I love this setup, and it’s exactly what we were looking for! I installed the Layouts Plugin and then installed the Layouts Category List (using the ProCourse Installer) and I see all the Layouts settings. But I’m not sure how to turn on the Layouts Category List widget.

Here's our current settings (screenshot)

After installing the Category List Widget should we be seeing that in the Widget dropdown list, after installation?

Here’s what we’re seeing now…

You can look at our forums to see that the 250px sidebar is working… but I just don’t know how to get the category List to show up… https://forums.pickleballist.com

@angus do you have any idea what I’m missing here?

I’m not sure how to get the Category List Widget to show up, after installing. :thinking:

Hold tight. I’m writing up a full set of documentation for this plugin which will make this clearer. I’ll ping you in the plugin topic in the next day or so when it goes live.

4 Likes

Thank you so much!! :raised_hands: I was going to suggest that you add the Category List Widget to the other sample widgets in the OP but it sounds like you’re already updating it! Thanks for sharing your work with the community!!

2 Likes

There’s now a full set of documentation for this plugin :tada:. You can find it all here

I’ve also updated the OP of this topic with various links and descriptions

5 Likes

Can this be used to create a sidebar that only pops up when moving the mouse to the left edge? That is, there is no fixed sidebar always visible on the screen. The advantage of this is that the sidebar pops over your window and hence, does not displace any of the elements. The issues with sidebars is always been a real-estate with taking up a fraction of the space on the screen.

Even similar to the windows taskbar, having it on auto-hide is nice because then other programs are not displaced by the height of that taskbar.

I have the Layouts and Category List plugins. I know how to add widgets to customize my sidebar. The only thing I’m requesting is for the ability for that sidebar to auto-hide.

Even Flarum has this feature natively installed:

1 Like

Yes, you could create that using this plugin. It’d need to be a new widget, packaged in a theme component. If you’re keen on developing it yourself, let me know and I can help you out / mentor you. Or you can always hire Pavilion to develop it.

1 Like

Not at this moment. I’m still new to Discourse. I have to learn how to make a plugin first. I’ll likely develop some elementary plugins first like adding custom bbcodes or buttons to the composer. I do think that this feature would be useful for many users though.

1 Like

Cool, well if you’re keen, I’ve just added the first version of the Layouts Widget Development Guide to the documentation

2 Likes