• Status New
  • Percent Complete
  • Task Type TODO
  • Category Javascript
  • Assigned To No-one
  • Operating System All
  • Severity Low
  • Priority Very Low
  • Reported Version 1.0 devel (github master)
  • Due in Version 1.1 devel
  • Due Date Undecided
  • Votes 1
  • Private
Attached to Project: Flyspray
Opened by scott - 25.05.2012
Last edited by peterdd2 - 17.04.2021

FS#1737 - Javascript Overhaul


@scott wrote:

Convert all the JS to using one library. Seems there is scattered JS scripts all over and we need to pick one solution that could be long term and has plenty of features for improving FS.

I vote for JQuery w/ Bootstrap which has some nice JS effects using JQuery.

@peterdd wrote on 2021-04-02:

Yes, move inline javascript out of templates, but no need for single wholeinone js file, it’s ok to load only the js files required for current page. Probably in 2021 there is no need for js framework anymore and standard javascript is just fine for the functionality Flyspray requires.

The task depends upon
ID Project Summary Priority Severity Assigned To Progress
2098 Flyspray  FS#2098 - Attached image cannot be downloaded  Low Medium
This task has the following sub-task
ID Project Summary Priority Severity Assigned To Progress
2038 Flyspray FS#2038 - Jscalendar must be replaced with something else Medium Low
Project Manager

Incomplete list of current javascript usage in Flyspray

PagetypeJavascript usage
alllogintoggle, savedsearchtoggle, effects for messages
tasklist (default index) and mytaskskeylistener caretnav, descriptionhover, calendar
newtaskAutocompleter, new link, new upload, editor,calendar
newmultitasknew row
edittaskAutocompleter, new link, new upload, editor, calendar, lightbox
editcommentnew link, new upload, editor, lightbox
detailstabs, lightbox1, calendar, close, request close, request reopen
admin and pm: prefseditor, doubleselect
admin and pm: liststablecontrol 2021-04-02 fixed in devel
admin and pm: category liststablecontrol with tree structure, Autocompleter
gantt (@peterdd)connector
kanban (@peterdd)
Editorjavascript usage
CKeditorckeditor standard modules, just too big/slow and some modules aren't needed for flyspray
dokuwikiminimal usage, needs a bit review to be complete

updated 2021-10-19

Project Manager

yet incomplete javascript file usage

js/ by js/
js/ by js/
js/ by js/
js/ loaded by js/
js/, can be replaced by CSS loaded by js/
js/ loaded by js/
js/tablecontrol.jsadmin and pm: listsuses prototype.js (Event)
js/tabs.jsdetails, can be replaced by CSS
js/details.jsnavigationuses prototype.js (Event)
js/index.jsuses prototype.js (Event)
js/functions.jsmany small, show-hide, can be replaced by CSSuses prototype.js (Event), dependency can be removed
js/calendar/calendar*.jsfor date selectors, can be replaced by HTML5 date and CSS
js/lightbox/js/lightbox.jsdetails, editcomment
inline codeneeds to be stripped from HTML and put in extra js files for enabling CSP

In order to address the last point "inline code", the list of tpl that contain some:

  1. ./themes/CleanFS/templates/roadmap.tpl
  2. ./themes/CleanFS/templates/newmultitasks.tpl
  3. ./themes/CleanFS/templates/index.tpl
  4. ./themes/CleanFS/templates/loginbox.tpl
  5. ./themes/CleanFS/templates/common.datepicker.tpl
  6. ./themes/CleanFS/templates/common.userselect.tpl
  7. ./themes/CleanFS/templates/newtask.tpl
  8. ./themes/CleanFS/templates/admin.prefs.tpl
  9. ./themes/CleanFS/templates/common.list.tpl 2021-04-02: fixed in devel
  10. ./themes/CleanFS/templates/common.multiuserselect.tpl
  11. ./themes/CleanFS/templates/depends.tpl
  12. ./themes/CleanFS/templates/common.editallusers.tpl
  13. ./themes/CleanFS/templates/
  14. ./themes/CleanFS/templates/details.edit.tpl

For this first pass, the list does not contain third party, /setup/templates/administration.tpl, /js/jscalendar/calendar.php and /scripts/langedit.php, which contain some inline script tag.

Among me, the first step is to globalize $baseurl as a js global scope var in ./themes/CleanFS/templates/header.tpl

I'll pull a little patch for this and then rewrite all xhr calls based on $baseurl.

On github, I'll tag these patches as FS#1737-IC referring to this (these) comment(s).

edit by @peterdd 2021-04-02: updated

Second step: extract most of PHP/JS melting code and put them into dedicated or common js files.
functions.js is considered as common js file container.
For each dedicated js code, a single file has created in new "js/modules" directory.

An external branch has been dedicated to that step.

It has been done for these files:

In order not to disturb first step validation, I am waiting for first step integration to pull those updates.

Do you want I pull twice together ?

Project Manager

Current dokuwiki ( see also uses jquery as js lib.

So I vote for jquery and doing it together with updating our dokuwiki stuff. ( FS#2028 )

Project Manager

A replacement for the currently used 'lightbox 1' plugin could be
this jquery based plugin:

Maybe too many options we do not need..


Available keyboard shortcuts


Task Details

Task Editing