Custom Layouts Plugin


(Tobias) #83

Oh, i see. Thanks for the fast reply, anyways.

I’m looking for the right solution to implement some HTML-content as an sidebar, and i guess the best thing would be to use a plugin in combination with Custom Layouts :slight_smile:

@angus - Are you aware of any plugins allowing this, combined with your awesome plugin?


(Angus McLeod) #84

Here you go:

Works as you would expect a ‘custom html’ widget to. e.g.

Although, the better approach would be building the html by making your own widget file and using virtual dom helpers.

This would be the equivalent of the above example:

import { createWidget } from 'discourse/widgets/widget';
import { h } from 'virtual-dom';

export default createWidget('custom-html', {
  tagName: 'div.custom-html',

  html() {
    return h('iframe', { height: 1000, width: 500, src: 'http://www.milliondollarhomepage.com/'})
  }
})

@Ham I suspect the reason it didn’t work for you is a load order issue. If you change the name of the plugin folder to something alphabetically greater than discourse-layouts, it will work. I’ll address the underlying issue later this week.


(Roland) #85

Hey @angus thanks. I have a question. If I use this one and then can assign it to left sidebar would it end up under with profile plugin you have there without issues? I already changed my css to how I like but I do have room under that plugin. I just want to make sure it doesnt affect anything else again.


(Angus McLeod) #86

@Ham I can’t 100% guarantee it won’t affect your css unfortunately. I assume you’re using some custom css and this plugin significantly affects the UI.

If you’re concerned about that, I suggest you spin up a test server to test it out on.

In response to your question, you can order the sidebar widgets however you like.

Example is live my sandbox.

Settings:

End result:


(George Morris) #88

I wish I could use this plugin but I have a base install and this is my only pluggin, yet when I enable it I get nothing on the right side.


(George Morris) #89

My settings


(Angus McLeod) #90

Hey George. Looks like it’s working normally.

Any widgets you want to appear in the sidebars you have to add as separate plugins. For example, the Profile widget.

Also, if you have the right sidebar enabled globally, it overrides the specific routes added in layouts sidebar right enabled.


(George Morris) #91

Awesome, thank you. Is there a list of the widgets that can be used for this?


(George Morris) #92

Sorry if I sound like a newbie (I am) but why won’t my Latest and New etc… show in the side bar? What am I missing?
36 PM


(Angus McLeod) #93

layouts sidebar right enabled lets you select routes on which the sidebar appears. That setting doesn’t affect the content of the sidebars themselves.

Moreover, as mentioned above, as you also have layouts sidebar right enabled global turned on, the setting layouts sidebar right enabled will not matter. When turned on,layouts sidebar right enabled global overrides layouts sidebar right enabled and applies sidebars globally.

Neither setting affects the content of your sidebars.

Separately, there are also two settings that affect the visibility of the navigation buttons: layouts list navigation disabled and layouts list navigation disabled global. They follow the same pattern, i.e. the first lets you select particular routes on which navigation is not visible, and the second turns off the navigation buttons globally.

Those settings also don’t affect the content of your sidebars.

The content of the sidebars is determined by the widgets (in separate plugins) that you add.


(George Morris) #94

Hmm, thanks for all your effort @angus

I’ve tried searching on those pluggins and I can’t seem to find any documentation on the Pavillion pluggins mentioned in your examples


(Tobias) #95

Hi again

I remember that i saw a screenshot with booksmarks in the widget - is that a public widget? Google and Github can’t help me find it :wink:


(Tobias) #96
Old stuff

This text will be hidden

I can’t delete some of the widgets at the settings-page.


In clear-widget > Preview the following value is listed: [“BAD CSRF”]
image

Is there a way to that i can clear all data saved regarding widgets?

All changes also returning errors.

Update: I’m still in the really basic steps, and trying to move around with stuff - and see how it goes. I also used some of your widgets to mess with a few things. I can’t say what i did wrong, but i ended up building the site from scratch :slight_smile:

Update2:
Just a funny screenshot.

I missed the “Save Edit”-button a few days ago.


(Angus McLeod) #97

Thanks for this feedback, I will take a look at this later today.


(Pad Pors) #98

We recently have changed the profile widget slightly and added a telegram share button for the posts to the topic page.

The read time is also shown next to the users Avatar in the widget, as a way to show the credit of each user.

the widget is located here.

After a recent update, the widget stopped showing in the topic page (as a result I don’t have snapshot!). it’s only shown in the main page.

@angus May you help us find out the problem and fix the case?

here is the error log in the console (on every page load it gives around 100’s of errors in the console! :slightly_frowning_face:):

ajax @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:8657
e @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:1456
S @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:57172
M @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:57660
s @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:1456
getReadTime @ _plugin-third-party-6f39005538a926fb46bd5d18f866d202962a5b82b48433c768dc713f2c6e633e.js:1217
html @ _plugin-third-party-6f39005538a926fb46bd5d18f866d202962a5b82b48433c768dc713f2c6e633e.js:1217
p @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:44338
value @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:44473
r @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7941
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7935
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7488
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7512
l @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7588
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7578
o @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7666
r @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7658
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7579
o @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7666
r @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7658
i @ _vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7645
rerenderWidget @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:27084
invokeWithOnError @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12021
flush @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12080
flush @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12204
end @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12274
run @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12388
u @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:33455
i.success @ _application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:1456
l @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:3186
fireWith @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:3316
r @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:8758
(anonymous) @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:9124

some snapshot of the errors:


(Angus McLeod) #99

I’ve just pushed updates to the Layouts plugin, the Profile widget and the Custom html widget.

Layouts:

  • Cleanup and some bugfixes
  • Support for category-specific topic routes

Profile widget:

  • Cleanup and style updates

Custom html:

  • Allow for evaluation of <script>.

You can now add things like Twitter widgets directly in the sidebar.

I’ve set up an example in the layouts category on my sandbox

@exetico @Pad_Pors various bugs were fixed. Please pull the latest and try again.


(Angus McLeod) #100

@Pad_Pors I think your issue may be to do with the code in your widget. I’m taking a look at it now.


(Pad Pors) #101

now the changed version of the profile widget is not shown in the main page either.

I got this error:

_ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:28913 TypeError: Cannot read property 'indexOf' of undefined
    at t.html (_plugin-third-party-f3ac1993127f423283ddd284f4bb638556d69ffb691610448a42c31c0723124d.js:1225)
    at t.p [as draw] (_application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:44338)
    at t.value (_application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:44473)
    at r (_vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7941)
    at i (_vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:7934)
    at l (_vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:8497)
    at r (_vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:8306)
    at i (_vendor-057c8aaf728aa3bc264d5ff93a70e003efe4f4ecdc16ba0a02d452e6e3ef4402.js:8296)
    at s.rerenderWidget (_application-f8e9f345e4c0fb00b5e1204566a8cbe1f4e82e19bc5e8e1374e79f2cc75e1a52.js:27082)
    at invokeWithOnError (_ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:12021)
u @ _ember_jquery-a8dcbd325e04410f036f2a791d66d8316c48c5387acdd914de99a5dd6afb3cd3.js:28913

I also think it can be due to our codes.


(Angus McLeod) #102

Ok, I’ve fixed the bug in layouts that caused that issue for you.

Also, the issue with your widget is the topic-notifications-button.

Replace

this.attach('topic-notifications-button', {
  topic: topic,
  appendReason: true,
  showFullTitle: false
})

with

new ComponentConnector(this,'topic-notifications-button', {
  topic,
  appendReason: true,
  showFullTitle: false
})

and add this to your imports

import ComponentConnector from 'discourse/widgets/component_connector';

If you do that, your widget will load normally in topics

I would make a PR, but yours is a fork of my plugin… Your plugin is now significantly different so you should create a separate repo.


(Pad Pors) #103

Many Thanks Angus :heart:

you made my day :slight_smile: