Localisation

[rasvaan]

Localisation

IDs are used within Accurator for injecting code, injecting localised labels and formatting using CSS. Having a consistent naming scheme for IDs will make the code more manageable in the future.

• [x] #128 Review naming scheme
• [x] #152 Update IDs HTML
• [x] #151 Update IDs CSS
• [x] #150 Update IDs JavaScript

IDs should be formulated according to the following scheme:

[UI_NAME] ELEMENT DESCRIPTION

Example:

• loginBtnLogin
• loginBtnUsername

List of possible ELEMENT and their abbreviated versions:

• hdr = header
• txt = text (long description, e.g. paragraph of text)
• lbl = label (short generic label of interface element)
• btn = button
• lnk = link
• frm = form element
• inp = input field of the form element
• rbtn = radio button
• chk = checkbox
• slt = select field, which contains multiple options
• opt = option of the select field
• img = image used
• lst = list (e.g. dropdown)
• div = div (e.g. collapse)
• sld = slider (see expertise.html)

List of current UI_NAME (a page or an element that is occurring on multiple pages):

• intro
• about
• domain
• item (used to be annotate)
• expertise
• profile
• additionalnfo
• results
• end
• register
• login
• userMenu
• navbar

Note: name of the modal or the name of the form + a description of the functionality if multiple controls exist such that we can differentiate between them

[rasvaan]

Pages todo

• [x] intro @rasvaan
• [x] about @LaraHack
• [x] domain @LaraHack
• [x] item (used to be annotate) @rasvaan -> update annotate_page.pl as well
• [x] expertise @LaraHack -> dinamically added controls were modified accordingly as well e.g. $("#expertiseDivExpertiseMaster").append( $.el.div({'class':'row'}, $.el.div({'class':'col-md-10 col-md-offset-1'}, $.el.span({'id':'masterLabelLeft'}, sldNothing), expertiseSlider("master"), $.el.span({'id':'masterLabelRight'}, sldALot))));
• what about #master?
• [x] profile @LaraHack -> check function alertMessage(title, text, type) {$("#eventsDiv").prepend(....
• [x] additionalnfo @rasvaan
• [x] results @rasvaan -> resultsDivEvents instead of eventsDiv
• [x] end @rasvaan
• [x] register @rasvaan
• [x] login @LaraHack
• [x] userMenu @LaraHack
• [x] navbar @rasvaan and @LaraHack
• [x] logos @LaraHack
• [x] naming populateNavbar @rasvaan and @LaraHack
• [x] test all pages EN + NL and Bird + Bible domains

[rasvaan]

This will be moved to a new feature branch.

Before we update all this, I would really like to investigate the possibility of doing some sort of templating, by adding variables to the static HTML which are instantiated on the back-end according to given parameters. The programmatic flow would be something like this:

1. Request for page is received by handler
2. Parameters Locale and Domain are retrieved from request
3. Text labels are retrieved from triple store based on parameters
4. Specified page location is related to static html file
5. Static html file is 'parsed'
6. Variables in static html file are replaced by obtained labels
7. Html is replied populated with text labels

I think the quasi quotations could help, this provides functionality for generating html:

element -->
    {rdf(UI, dcterms:title, literal(lang(en, Title)))},
    html({|html(Title)||
      <h1>Title</h1>
    |}). 

If we could replace <h1>Title</h1> with the static page and populate the list of variables added tot html(Title) dynamically this would bring us a long way in implementing point 4, 5 and 6. We should ask Jan if this is easily achieved.

[LaraHack]

Test pages:

• [x] intro -> logos on the bible page not very visible in the bible domain
• [x] about
• [x] expertise
• [x] profile
• [ ] results -> broken right now
• [x] domain
• [x] form

Further testing:

• [x] Dutch
• [x] English
• [ ] bird
• [ ] bible
• [x] register modal
• [x] login modal

[rasvaan]

logos on the bible page not very visible in the bible domain this might be something to have a look at during the templating.