Opened 12 years ago

Closed 11 years ago

#1730 closed task (fixed)

Move in-page onEvent attributes to external *.js files

Reported by: Nicklas Nordborg Owned by: Nicklas Nordborg
Priority: major Milestone: BASE 3.3
Component: web Version:
Keywords: Cc:

Description

This is an important step towards implementing a 'Content Security Policy' (#1712).

All in-page onclick, onmouse and other event handlers must be moved out to external javascript files. The events should be attached to the controls by addEventListener calls.

Considering that a lot of the in-page scripts are dynamically generated with code that depend on request parameters, user settings, etc. this move is not trivial in all cases. One idea is to use data-* attributes (introduced by HTML5, see for example ​http://html5doctor.com/html5-custom-data-attributes/) to hold data that is needed by the scripts. In most cases simple string values are enough. For more complex data structures we could use JSON.

Change History (108)

comment:1 by Nicklas Nordborg, 12 years ago

Milestone: BASE Future Release → BASE 3.3

comment:2 by Nicklas Nordborg, 12 years ago

Owner: changed from everyone to Nicklas Nordborg
Status: new → assigned

comment:3 by Nicklas Nordborg, 12 years ago

(In [6155]) References #1730: Move in-page onEvent attributes to external *.js files

Tested on the BASE->Preferences page. All event handlers (except from taglibs) that are defined on that page should now be attached programmatically instead.

Added 'main-2.js' to hold all new stuff. Will eventually try to phase out the older javascript files as much as possible.

Added support for <dynamic-attributes> to taglibs. Implemented in the <button> taglib. The main reason is to be able to include 'data-*' attributes that are needed by the scripts.

Added support for setting 'id' attribute on the <html> tag.

comment:4 by Nicklas Nordborg, 12 years ago

(In [6157]) References #1730: Move in-page onEvent attributes to external *.js files

Fixed for all help icons.

comment:5 by Nicklas Nordborg, 12 years ago

(In [6159]) References #1729 and #1730.

Started to work on this for the tabcontrol taglib. Basic tab switching and form validation should work, but not setting a custom 'switchFunction' or activation callback. To use the new features, use the 'tabcontrol-2.js' instead of 'tabcontrol.js'. Remove all explict callback methods in the tags and add them with, for example, TabControl.addTabValidator() calls.

comment:6 by Nicklas Nordborg, 12 years ago

(In [6160]) References #1729 and #1730.

  • Redesigned 'onload' event handler functionality. There are now 3 levels to add page initialization code which gives better control of the calling order: Doc.addElementInitializer(), Doc.onLoad() and Doc.addFinalizer()

  • Implemented support for custom tab switch function in the tab control taglib. Use TabControl.setSwitchFunction().

comment:7 by Nicklas Nordborg, 12 years ago

(In [6161]) References #1729 and #1730.

  • Added support for 'onactivate' event handlers in the tab control taglib.

  • Changed custom event names to use 'base-' as prefix to avoid clashes ('activate' is used by IE), so the new names are 'base-activate' and 'base-validate'

  • Added support for remembering last active tab in a tab control.

comment:8 by Nicklas Nordborg, 12 years ago

(In [6162]) References #1730: Move in-page onEvent attributes to external *.js files

All onsubmit event handlers on <form> elements have been removed and replaced addEventListener() calls.

comment:9 by Nicklas Nordborg, 12 years ago

(In [6164]) References #1730: Move in-page onEvent attributes to external *.js files

Removed all 'onerror' event handlers for images. No replacement. Added @deprecated markers to implementations of @deprecated interface methods.

comment:10 by Nicklas Nordborg, 12 years ago

(In [6166]) References #1730: Move in-page onEvent attributes to external *.js files

  • Fixed for the user settings dialog and the 'Reset list settings' dialog.
  • Added a 'zoom' taglib which should make it easier to include the 'zoom' icon for textarea fields.
  • Added new javascript function in main-2 for opening zoom dialog and calendar dialog

comment:11 by Nicklas Nordborg, 12 years ago

(In [6167]) References #1730: Move in-page onEvent attributes to external *.js files

  • Fixed on the login and logout pages including switch user, impersonate and error handling page for not being logged in.

comment:12 by Nicklas Nordborg, 12 years ago

(In [6169]) References #1729 and #1730.

Fixed the Administrate -> Server settings and Broadcast message pages.

comment:13 by Nicklas Nordborg, 12 years ago

(In [6170]) References #1729 and #1730.

Fixed calendar popup.

comment:14 by Nicklas Nordborg, 12 years ago

(In [6171]) References #1729 and #1730.

Fixed the zoom popup except toolbar buttons and menu items since there is no support for it yet in the taglibs.

comment:15 by Nicklas Nordborg, 12 years ago

(In [6172]) References #1730: Move in-page onEvent attributes to external *.js files

Fixed an issue with opening help for dialogs that still use the old tabcontrol code.

comment:16 by Nicklas Nordborg, 12 years ago

(In [6177]) References #1730: Move in-page onEvent attributes to external *.js files

Fixed on the About, Forgot password, Get account and Broadcast message pages. Not much to do, there is only a single 'Close' button on those pages.

comment:17 by Nicklas Nordborg, 12 years ago

(In [6180]) References #1729 and #1730.

Fixed on the View -> Home page.

comment:18 by Nicklas Nordborg, 12 years ago

(In [6181]) References #1729 and #1730.

Fixed on some more common pages:

  • View help
  • Manage list presets
  • View change history
  • Set owner of items

comment:19 by Nicklas Nordborg, 12 years ago

(In [6182]) References #1729 and #1730.

Started to work with the <table> taglib. So far the following have been fixed:

  • The page navigator
  • The 'view/preset' dialog box
  • Sorting and filtering on most column types (except enumerations)

As a consequence of the above, the presetOnChange() function on most list pages have been removed and the configureColumns() have been simplified.

comment:20 by Nicklas Nordborg, 12 years ago

(In [6183]) References #1729 and #1730.

More fixes for the <table> taglib.

  • Use JSON as a data-* attribute to define columns instead of javascript.
  • Add support for dynamic attributes to several more tags
  • Re-factored the 'view/presets' handling and fixed the warning icons about filters

comment:21 by Nicklas Nordborg, 12 years ago

(In [6184]) References #1729 and #1730.

The multi-select list should now be working and use JSON for configuration instead of dynamically created javascript. The implementation details have changed a bit and moved from main.js to main-2.js. Similar changes are needed for the smart-enum lists.

comment:22 by Nicklas Nordborg, 12 years ago

(In [6185]) References #1729 and #1730.

Got rid of the last multi-select control in experiment explorer. Removed the MultiOptions class in main.js.

comment:23 by Nicklas Nordborg, 12 years ago

(In [6186]) References #1729 and #1730.

The "Configure columns" dialog.

comment:24 by Nicklas Nordborg, 12 years ago

(In [6187]) References #1729 and #1730.

The "Select color" dialog.

comment:25 by Nicklas Nordborg, 12 years ago

(In [6188]) References #1729 and #1730.

Cleaned up code for opening the 'set owner' and 'share items' dialogs.

comment:26 by Nicklas Nordborg, 12 years ago

(In [6190]) References #1729 and #1730.

The smart-enum list should now be working and use JSON for configuration instead of dynamically created javascript. The implementation details have changed a bit and moved from main.js to main-2.js.

comment:27 by Nicklas Nordborg, 12 years ago

(In [6192]) References #1729 and #1730.

Refactored the code for displaying a popup message when loading a page. The message should now be stored as a session setting instead: sc.setSessionSetting("alert-message", message). The added benefit is that the message is only displayed once and is not re-displayed if the page is reloaded.

Removed onunload, onkeypress and attributes from the <base:body> tag. Added support for dynamic attributes instead.

comment:28 by Nicklas Nordborg, 12 years ago

(In [6194]) References #1729 and #1730.

Fixed for frameset resizing code in three places: file manager, item overview and extensions overview.

comment:29 by Nicklas Nordborg, 12 years ago

(In [6195]) References #1729 and #1730.

Fixed for several functions in the 'Item overview' feature. The joust tree outline and a few other minor places remains.

comment:30 by Nicklas Nordborg, 12 years ago

(In [6196]) References #1730: Move in-page onEvent attributes to external *.js files

Fixed for all hideable sections.

comment:31 by Nicklas Nordborg, 12 years ago

(In [6197]) References #1730: Move in-page onEvent attributes to external *.js files

Fixed a bug in table view/preset list when there was no page navigator (such as on the file listing)

comment:32 by Nicklas Nordborg, 12 years ago

(In [6198]) References #1730: Move in-page onEvent attributes to external *.js files

Removed obsolete javadoc in HideableSection.java

comment:33 by Nicklas Nordborg, 12 years ago

(In [6200]) References #1729 and #1730.

Several plug-in configurations wizard dialogs except the generic parameter entry dialog.

comment:34 by Nicklas Nordborg, 12 years ago

(In [6201]) References #1729 and #1730.

Fixed for most of the menu system, except for the extensions menu.

comment:35 by Nicklas Nordborg, 12 years ago

(In [6202]) References #1729 and #1730.

Fixed for the "edit annotations" tab.

comment:36 by Nicklas Nordborg, 12 years ago

(In [6203]) References #1729 and #1730.

Fixed for "progress reporter" and "close popup" pages.

comment:37 by Nicklas Nordborg, 12 years ago

(In [6204]) References #1729 and #1730.

Fixed for the "share items" dialog.

comment:38 by Nicklas Nordborg, 12 years ago

(In [6215]) References #1730: Move in-page onEvent attributes to external *.js files

Got rid of all onclick events for zooming in on description text boxes.

comment:39 by Nicklas Nordborg, 12 years ago

(In [6216]) References #1730: Move in-page onEvent attributes to external *.js files

Replaces all 'Calendar' buttons with a new tag: <base:calendar />. The calendar popup now also uses the default date/time format for the logged in used, so there is no need to send that every time.

comment:40 by Nicklas Nordborg, 12 years ago

(In [6217]) References #1730: Move in-page onEvent attributes to external *.js files

Got rid of 'clazz' and 'requiredClazz' string constatns used in several JSP scripts. Better to specify class="" directly on each element since there are cases were we want to add more variants.

comment:41 by Nicklas Nordborg, 12 years ago

(In [6218]) References #1729 and #1730. Fixed on the 'edit news' page and started on the 'view news' page. Need a lot more support in the main javascript libraries. Have started to introduce event handlers and related for 'edit', 'delete' and 'restore' functionality. Callback methods are currently handled by sending a notification event (base-notify) to a auto-generated temporary <div> tag. There are still some problems with it if, for example, a different action is needed.

comment:42 by Nicklas Nordborg, 12 years ago

(In [6219]) References #1729 and #1730. Implemented support for dynamic attributes in the toolbar button extension. Added DynamicActionAttributes interface to be implemented by actions that support it. Support is also needed in the renderers (can be done by extending from the AbstractHtmlRenderer class) and action factories. By default all action factories inheriting from AbstractJspFactory get support for dynamic attributes, but implementation probably need to forward the attributes to the actual action beans (easy if the action bean extends from DynamicActionAttributeSupport.

The XmlLoader has also been updated to accept parameter tags with hyphens since most dynamic attributes that we use are data-* attributes.

Finally, the help button on 'view news' page has been used as a test bed for this feature and the example extensions are also about to be updated.

comment:43 by Nicklas Nordborg, 12 years ago

(In [6220]) References #1729 and #1730. The view and list pages for news have now been almost completely fixed. The only remaining issue is to implement the return callback in 'selection' mode, but since there are no dialogs that select news items this have to wait for the next batch.

comment:44 by Nicklas Nordborg, 12 years ago

(In [6221]) References #1729 and #1730. Fixed on every list page:

  • Delete item permantly icon
  • Share item icon
  • Check/uncheck all icon

comment:45 by Nicklas Nordborg, 12 years ago

(In [6222]) References #1729 and #1730. Fixed for the software pages. Includes adding support for 'Share' and 'Set owner' buttons. Added support for using custom events instead of callback methods to return selected items. Slightly tested with the 'Edit project' page, but need a page with updated script for full testing.

comment:46 by Nicklas Nordborg, 12 years ago

(In [6223]) References #1729 and #1730. Fixed for the user administration pages. The 'Set owner' dialog now use the new event-based method for returning selected items. When the group and role administration pages have been fixed there will be a lot more places for testing.

comment:47 by Nicklas Nordborg, 12 years ago

(In [6224]) References #1729 and #1730. Fixed for the group and roles administration pages.

comment:48 by Nicklas Nordborg, 12 years ago

(In [6225]) References #1729 and #1730. Added some utility methods to the linkitems module to reduce the code needed when using it.

comment:49 by Nicklas Nordborg, 12 years ago

(In [6242]) References #1729 and #1730. Implement lazy loading of 'Item overview' as a tab activation event instead of a page reload.

comment:50 by Nicklas Nordborg, 12 years ago

(In [6243]) References #1729 and #1730. Forgot this file in last commit [6242].

comment:51 by Nicklas Nordborg, 12 years ago

(In [6244]) References #1729 and #1730. Implement lazy loading of 'Change history' as a tab activation event instead of a page reload. The change history list page now uses separate script file.

comment:52 by Nicklas Nordborg, 12 years ago

(In [6245]) References #1729 and #1730. Fixed for biosource pages.

comment:53 by Nicklas Nordborg, 12 years ago

(In [6246]) References #1729 and #1730. Implement lazy loading of 'Annotations'/'Inherited annotations' as a tab activation event instead of replacing the 'switchTab' function in the tab-control taglib. Done for the biosurce and sample edit dialogs.

Also improved the implementation so that the last parameters used are kept in the common code and the edit dialogs no longer has to keep track of when a protocol is changed or when the parent item selection changes.

comment:54 by Nicklas Nordborg, 12 years ago

(In [6247]) References #1729 and #1730. And two more files that should have been included in [6246].

comment:55 by Nicklas Nordborg, 12 years ago

(In [6254]) References #1729 and #1730. Use lazy loading of 'Annotations'/'Inherited annotations' for all other items.

comment:56 by Nicklas Nordborg, 12 years ago

(In [6255]) References #1729 and #1730. Use lazy loading for the 'Annotations' frame on the view page as well. Started to work on the 'Inherit annotations' dialog, but the Joust tree can't be done at the moment so there is still some work to do.

comment:57 by Nicklas Nordborg, 12 years ago

(In [6256]) References #1729 and #1730. Use lazy loading for the 'Data files' frame in the edit dialogs. Inline scipts has also been removed from the edit file dialog and view and download file links.

comment:58 by Nicklas Nordborg, 12 years ago

(In [6259]) References #1729 and #1730. Fixed for the extension manager except the frame with the tree outline.

comment:59 by Nicklas Nordborg, 12 years ago

(In [6260]) References #1729 and #1730. Fixed for all biomaterial list pages.

comment:60 by Nicklas Nordborg, 12 years ago

(In [6261]) References #1729 and #1730. Fixed for all biomaterial view pages.

comment:61 by Nicklas Nordborg, 12 years ago

(In [6262]) References #1729 and #1730. Fixed for list and view pages 'Administrate -> Quota' down to 'Reporter clone templates'.

comment:62 by Nicklas Nordborg, 12 years ago

(In [6289]) References #1729 and #1730. Fixed on the remaining list and view pages under the Administrate menu.

comment:63 by Nicklas Nordborg, 12 years ago

(In [6290]) References #1729 and #1730. Fixed on the Administrate -> Service page.

comment:64 by Nicklas Nordborg, 12 years ago

(In [6291]) References #1729 and #1730. New implementation of 'linkitems-2.js' which is more streamlined for use with JSON formatted data and automatic attachment of event handlers. The edit dialogs for users, groups and roles have been updated.

comment:65 by Nicklas Nordborg, 12 years ago

(In [6292]) References #1729 and #1730. Fixed on the edit annotation type category popup.

comment:66 by Nicklas Nordborg, 12 years ago

(In [6293]) References #1729 and #1730. Incorrect event handler attached to 'Ok' button in table listings.

comment:67 by Nicklas Nordborg, 12 years ago

(In [6294]) References #1729 and #1730. Fixed on the 'edit annotation type' dialog. Also updated some code for form handling (moved from old main.js to new main-2.js).

comment:68 by Nicklas Nordborg, 12 years ago

(In [6295]) References #1729 and #1730. Fixed for the client and help edit dialogs.

comment:69 by Nicklas Nordborg, 12 years ago

(In [6296]) References #1729 and #1730. Fixed for the file types, extra value types and hardware edit dialogs.

comment:70 by Nicklas Nordborg, 12 years ago

(In [6297]) References #1729 and #1730. Fixed the 'subtypes.js' script and hopefully all places that uses it.

comment:71 by Nicklas Nordborg, 12 years ago

(In [6300]) References #1729 and #1730. Fixed for the item subtypes edit dialog. Also added support for dynamic-attributes to the <base:select> tag and support for values to the link script library.

comment:72 by Nicklas Nordborg, 11 years ago

(In [6305]) References #1729 and #1730. Fixed on all pages in the admin section except the extensions tree frame.

comment:73 by Nicklas Nordborg, 11 years ago

(In [6306]) References #1729 and #1730. Fixed on several pages in the Biomaterial/Array LIMS sections.

comment:74 by Nicklas Nordborg, 11 years ago

(In [6307]) References #1729 and #1730. Fixed on more pages in the Biomaterial/Array LIMS sections.

comment:75 by Nicklas Nordborg, 11 years ago

(In [6308]) References #1729 and #1730. Fixed on most pages in the File manager section except those related to directory tree listing.

comment:76 by Nicklas Nordborg, 11 years ago

(In [6309]) References #1729 and #1730. Fixed on exception handling pages.

comment:77 by Nicklas Nordborg, 11 years ago

(In [6310]) References #1729 and #1730. Found a stray file that should have been included long time ago.

comment:78 by Nicklas Nordborg, 11 years ago

(In [6311]) References #1729 and #1730. Most view and list pages in the 'View' menu and some other minor fixes in other places found during the week.

comment:79 by Nicklas Nordborg, 11 years ago

(In [6312]) References #1729 and #1730. Edit dialogs for the Biomaterial and Array LIMS.

comment:80 by Nicklas Nordborg, 11 years ago

(In [6313]) References #1729 and #1730. Adding scripts that should have been added earlier.

comment:81 by Nicklas Nordborg, 11 years ago

(In [6314]) References #1729 and #1730. Several edit dialogs in the 'View' menu. Expression builder, which required changes to the 'Validate' function which is now done on the server side instead of in the browser (due to the use of eval() on user input).

comment:82 by Nicklas Nordborg, 11 years ago

(In [6315]) References #1729 and #1730. Fixed on experiment-related pages.

comment:83 by Nicklas Nordborg, 11 years ago

(In [6320]) References #1729 and #1730. Fixed for edit project and some analysis plugin dialogs and the generic table exporter.

comment:84 by Nicklas Nordborg, 11 years ago

(In [6321]) References #1729 and #1730. Found some remaining onclick handlers on pages that should have been fixed some time ago.

comment:85 by Nicklas Nordborg, 11 years ago

(In [6322]) References #1729 and #1730. Found some remaining places which still use old tabcontrol and linkitems script. Fixed those and removed some of the no longer used javascript files.

comment:86 by Nicklas Nordborg, 11 years ago

(In [6342]) References #1729 and #1730.

Moved Main.show(), Main.hide() and related functions to Doc namespace.

Moved Main.addClass(), Main.removeClass() and related function to Doc namespace.

New feature is that all functions can be used with id or document element.

Use existing function in App namespace for Main.getWindowHeight() and Main.getWindowWidth().

comment:87 by Nicklas Nordborg, 11 years ago

(In [6380]) References #1729 and #1730. The Joust menu tree on the extensions overview page has been fixed. The joust-2.js script is still missing some functionality and error checking. For example, no support for lazy initialization.

Most icons have been reszied to 18x18 pixels. The old icons was a mess with a mix of 16x16, 18x16 and 18x18.

comment:88 by Nicklas Nordborg, 11 years ago

(In [6381]) References #1729 and #1730. Made 16x16 variants of some icons for the toolbars. Cleaning up the code for toggling and selecting a menu entry. Making sure text to appear in the menu is not passing through HTML markup and destroying the layout.

comment:89 by Nicklas Nordborg, 11 years ago

(In [6382]) References #1729 and #1730. The Joust menu tree on the 'Item overview' page has been fixed. Implemented lazy loading functionality.

More icons have been reszied to 18x18 pixels.

comment:90 by Nicklas Nordborg, 11 years ago

(In [6384]) References #1729 and #1730. The Joust menu tree on the 'Inherit annotations' dialog has been fixed.

comment:91 by Nicklas Nordborg, 11 years ago

(In [6385]) References #1729 and #1730. The Joust menu tree in the file manager has been fixed.

comment:92 by Nicklas Nordborg, 11 years ago

(In [6386]) References #1729 and #1730. Creating a new css file for the new joust implementation.

comment:93 by Nicklas Nordborg, 11 years ago

(In [6387]) References #1729 and #1730. In some places 'data-container' was used instead of 'datacontainer'.

comment:94 by Nicklas Nordborg, 11 years ago

(In [6388]) References #1729 and #1730. The Joust menu tree in the experiment section has been fixed. This was the last of the place, so the old script is removed.

comment:95 by Nicklas Nordborg, 11 years ago

(In [6389]) References #1729 and #1730. Cleaning up a lot of the old javascript code. Move surviving functions into main-2.js

comment:96 by Nicklas Nordborg, 11 years ago

(In [6391]) References #1729 and #1730. Started with the plugin/job configuration dialog. Still some more work to do to support all functionality.

comment:97 by Nicklas Nordborg, 11 years ago

(In [6393]) References #1729 and #1730. The configure plugin/job dialog is now fixed. Also made a change in the 'NullPlugin' so that it is possible to test better in the web interface. A side effect is that the 'Test with file' function is no longer working, so this need to be fixed as well.

comment:98 by Nicklas Nordborg, 11 years ago

(In [6394]) References #1729 and #1730. Fixes the 'Test with file' function.

comment:99 by Nicklas Nordborg, 11 years ago

(In [6395]) References #1729 and #1730. parameters.js is not longer needed.

comment:100 by Nicklas Nordborg, 11 years ago

(In [6396]) References #1729 and #1730. Fixed for 'Place on plate' and 'Move biomaterial' wizards.

comment:101 by Nicklas Nordborg, 11 years ago

(In [6397]) References #1729 and #1730. Fixed for 'Create child bioplate' wizard.

comment:102 by Nicklas Nordborg, 11 years ago

(In [6398]) References #1729 and #1730. Fixed for 'External program executor' wizard.

comment:103 by Nicklas Nordborg, 11 years ago

(In [6399]) References #1729 and #1730. Cleaning up some remaining event handlers and unused code. Moved 'Dates' class to 'main-2.js'.

comment:104 by Nicklas Nordborg, 11 years ago

(In [6400]) References #1729 and #1730. Move the last few methods in main.js to main-2.js. These two tickets should now be more or less finished, but I guess that some testing is needed. Particularly in Internet Explorer which have not been used much at all during this development.

comment:105 by Nicklas Nordborg, 11 years ago

(In [6401]) References #1729 and #1730. The extensions menu now support dynamic event binding. Added 'id' and 'clazz' attributes to MenuItemAction interface. The onClick method is deprecated. Scripts can be included to handle click events or use dynamic attribute 'data-url' for simple links.

comment:106 by Nicklas Nordborg, 11 years ago

(In [6403]) References #1729 and #1730. Updating the documentation so that at least something of this is mentioned. Some of the extension example code now use the 'onclick'-free version.

Added language="javascript" support to syntax highlightning.

comment:107 by Nicklas Nordborg, 11 years ago

(In [6405]) References #1729 and #1730. Display better error messages when page initialization fails.

comment:108 by Nicklas Nordborg, 11 years ago

Resolution: → fixed
Status: assigned → closed
Note: See TracTickets for help on using tickets.