How to add a custom.js to CMS?

[Edwin B.]

Hi,

Is there an option available to add a custom.js file to the CMS (like there is a wicket.skin available in "/hippo:configuration/hippo:frontend/cms/cms-static/root").

Some usecases:

I am searching for a hook to add something like a "$('.row-selected').scrollIntoView()"-functionality, so the selected item in the folder-navigation-perspective (the one with the yellow background) will always be visible even when a bunch of folders are opened and the editor clicks around on the opened document-tabs, or in the second (folder/documents-browser) column.

This would also be nice when you have some GotolinkDocumentsShortcutPlugins to specific content-folders (like in our project) and you don't see the folder you have clicked, because it is somewhere below the (partially visible) list op folders in the folder-navigation-perspective.

Is there a best practice to add a custom javascript file to the CMS?

Would be a nice improvement for the CMS, anyway.... :-)

Best regards,

Edwin

[Jeroen Reijn]

Hi Edwin,

not sure if there is a really easy way of doing things. Usually these JS files are tied to a piece of CMS functionality. You could extend one of the existing plugins and add the Javascript there if you want.

Jeroen

--
Hippo Community Group: The place for all discussions and announcements about Hippo CMS (and HST, repository etc. etc.)
 
To post to this group, send email to hippo-c...@googlegroups.com
RSS: https://groups.google.com/group/hippo-community/feed/rss_v2_0_msgs.xml?num=50
---
You received this message because you are subscribed to the Google Groups "Hippo Community" group.
To unsubscribe from this group and stop receiving emails from it, send an email to hippo-communi...@googlegroups.com.
Visit this group at http://groups.google.com/group/hippo-community.
For more options, visit https://groups.google.com/d/optout.

--

Jeroen Reijn
Hippo

Amsterdam - Oosteinde 11, 1017 WT Amsterdam
Boston - 101 Main Street, Cambridge, MA 02142

US +1 877 414 4776 (toll free)
Europe +31(0)20 522 4466
www.onehippo.com

http://about.me/jeroenreijn

[William Borg Barthet]

In my project, we are also trying to add some custom JS to decorate editor fields with auto-complete and validation. It is easy to target the fields as you can add a custom class name to them, but cleanly loading the JS file is the hard part. Has anyone done this before? Can anyone tell me which plugin should be extended and where it is loaded in the configuration?

[Frank van Lankvelt]

if the functionality is part of the project code, it's probably easiest to just add the JS file as a web resource and use the wicket.skin property of any (render) plugin to refer to it.

Otherwise, best solution is what Jeroen suggested: package it up in the jar and use Wicket resource references / header items to load/render them.

cheers, Frank

Boston - 1 Broadway, Cambridge, MA 02142

[William Borg Barthet]

Thanks Frank, this seems to work

[jimmy...@gmail.com]

I have tried this, using the wicket.skin property.  It references the JS file using a HTML link tag as if it were a CSS file.  Is there a way to use this approach where the result is a script tag reference?

-Jimmy

[William Borg Barthet]

Hi Jimmy,

yes, I have noticed the same. I am working on a plugin that will load JS or CSS headcontributions. I'll share my results as soon as I'm done.

William

[jimmy...@gmail.com]

Great!  I would love to he how this is done as well.

-Jimmy

[ebenn...@iprofs.nl]

Hi,

Tried that, too.

Created a dashboardshortcut that extends RenderPlugin implements IHeaderContributor

Added this override:

    @Override

    public void renderHead(final IHeaderResponse response) {

        response.renderJavascriptReference("path/to/my.js");

    }

But unfortunately my.js is added in the head-section (yeh, duh!), but JQuery isn't available at that time... :(

When is JQuery loaded anyway?

Keep trying to find a solution....

Best regards,

Edwin

Op vrijdag 27 juni 2014 16:26:44 UTC+2 schreef w.borgbarthet:

[jimmy...@gmail.com]

I got it working.  There was a typo in the class name in the head-contrbutions.xml, HeadContributionPlugin to HeadContributionsPlugin.  It seems to work fine after that fix.  Thank you very much!

-Jimmy

On Friday, 27 June 2014 11:08:48 UTC-4, w.borgbarthet wrote:

Ok guys,

here's my plugin (HeadContributionsPlugin.java attached).

To use it:

1. Add it to your CMS module cms/src/main/java/com/example/plugins/headcontributions/HeadContributions.java

2. Import the loader config (loader.xml) to /hippo:configuration/hippo:frontend/cms/cms-static/headcontributionsLoader

3. Import the plugin config (head-contributions.xml) to /hippo:configuration/hippo:frontend/cms

4. At /hippo:configuration/hippo:frontend/cms/head-contributions/headcontributions, configure the list of resources. Right now it is trying to load a "script/test.js" file which will be sought under ...../...../myhippoproject/cms/src/main/webapp/script/test.js

Let me know if this works for your use-case!

[William Borg Barthet]

Ok guys,

here's my plugin (HeadContributionsPlugin.java attached).

To use it:

1. Add it to your CMS module cms/src/main/java/com/example/plugins/headcontributions/HeadContributions.java

2. Import the loader config (loader.xml) to /hippo:configuration/hippo:frontend/cms/cms-static/headcontributionsLoader

3. Import the plugin config (head-contributions.xml) to /hippo:configuration/hippo:frontend/cms

4. At /hippo:configuration/hippo:frontend/cms/head-contributions/headcontributions, configure the list of resources. Right now it is trying to load a "script/test.js" file which will be sought under ...../...../myhippoproject/cms/src/main/webapp/script/test.js

Let me know if this works for your use-case!