wiki:TracTweakUiPlugin

Tweak the Trac user interface

Description

This plugin implements a Javascript deployment platform, which enables Trac administrators to easily tweak Trac pages by using Javascript.

Key features:

  • Apply different javascripts to different pages by matching regular expression.
  • Supports Trac web admin.

Alternative: the AddStaticResourcesPlugin accomplishes many of the same goals. Very simple deployment and trac.ini configuration, ie no webadmin screens. Doesn't require an environment upgrade.

See: ZoomQuiet ~ Collection KSPEG Trac hacking

Bugs/Feature Requests

Existing bugs and feature requests for TracTweakUiPlugin are here.

If you have any issues, create a new ticket.

defect

2 / 4

Download

Download the zipped source from here.

Source

You can check out TracTweakUiPlugin from here using Subversion, or browse the source with Trac.

Installation

General instructions on installing Trac plugins can be found on the TracPlugins page.

Configuration

  1. Uninstall Trac Tweak UI if you have installed it before.
  2. Change to the directory containing setup.py.
  3. If you want to install this plugin globally, that will install this plugin to the Python path: python setup.py install.
  4. If you want to install this plugin to Trac instance only: python setup.py bdist_egg and copy the generated egg file to the Trac instance's plugin directory:
    cp dist/*.egg /srv/trac/env/plugins
    
  5. Configure your trac.ini file:
    [components]
    tractweakui.* = enabled
    
  6. Add the following directory structure to the Trac environment's htdocs directory, using editcc as an example:
    htdocs/tractweakui/
    

Or you can simply copy the htdocs/tractweakui/ in source to the Trac environment's htdocs directory.

Example

Admin Trac Tweak UI with addon javascript plugins

  1. Enter Trac's Web Admin, select TracTweakUI Admin.
  2. Add url path(regular expression): /newticket.
  3. Select /newticket, then select filter editcc.
  4. Click Load Default, and edit filter javascript, then Save.
  5. Now click New Ticket to test the editcc Javascript plugin.
    • Screenshot of Admin
    • Screenshot of editcc

Admin Trac Tweak UI with any other javascript plugins

  1. Take autocomplete for instance.
  2. Prepare autocomplete directory in the Trac environment:
    mkdir /path/to/trac/environment/htdocs/tractweakui/autocomplete
    cp main.css /path/to/trac/environment/htdocs/tractweakui/autocomplete/
    cp jquery.autocomplete.css /path/to/trac/environment/htdocs/tractweakui/autocomplete/
    cp jquery.autocomplete.js /path/to/trac/environment/htdocs/tractweakui/autocomplete/
    cp jquery.bgiframe.min.js /path/to/trac/environment/htdocs/tractweakui/autocomplete/
    cp indicator.gif /path/to/trac/environment/htdocs/tractweakui/autocomplete/
    touch /path/to/trac/environment/htdocs/tractweakui/autocomplete/__template__.js
    
  3. Edit template.js (optional):
    $(function() {
    	var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
    	$("#field-cc").autocomplete(months);
    });
    
  4. Now you can admin and test autocomplete Javascript plugins as described above.

Recent Changes

7413 by richard on 2010-01-18 10:27:14
fixed #4912, output the javascript directly into the script tag rather than in a script tag.
6335 by richard on 2009-08-07 05:09:52
remove license.txt
5514 by richard on 2009-04-13 03:00:22

#4912

  • unquote path_pattern, thanks for jason trahan.
(more)

Author/Contributors

Author: richard
Maintainer: Richard Liao
Contributors:

Last modified 6 months ago Last modified on Nov 18, 2015, 12:06:27 PM

Attachments (2)

Download all attachments as: .zip