View source for Public Survey Views

(Public = front-end)

Reworking on Public (survey) views. Actually we have ANSWERS part done by views : https://github.com/LimeSurvey/LimeSurvey/tree/master/application/views/survey/questions (thanks to Louis)

I ( [[User:DenisChenu|DenisChenu]] ([[User talk:DenisChenu|talk]]) ) want to rework all this answers part (and some other) to be
* Easily CSS managed
* More easily jquery managed (data/global class/tag etc ...)
* More easily reusable by Plugins (plugin can update {ANSWERS} part and use same file than core (using renderPartial)
* Allow fix css/js in core without broke other template

Then : need some help for "what is the best for LimeSurvey core to become the best survey tools and the more easily hackable survey tool".

= Actual idea to do =
* Usage of bootstrap part, add more if it's OK and it's useful/helpful. Fix some part
* Remove the empty label : move the label to the answer/subquestion text (like in 2.06)
* Remove the uneeded label (for 508 issue), and use a core plugin to add it to question part (labelled-by to be clean)
* Usage of specific class : answer-item / radio-item / checkbox-item : ''needed or not'' ? What mus be improved ?
* usage of checkbox/radio class : actually on wrapper and on input : one must be removed for sure. The warapper is here for bootstrap-awesome-checkbox : leave it or update bootstrap-awesome-checkbox
* I ( [[User:DenisChenu|DenisChenu]] ([[User talk:DenisChenu|talk]]) ) want to readd ul/li : think it's more quick to do a $("li").each : then answer and subquestion are taken. And more : i think it'"s a list of answers, a lits of question.
* All part must be "near same" : HTML produced must have same class and tag if possible.
* Add string in replacement then asterisk. For screen reader at minima.

= Some decision to do =

* Views, sub views and sub sub views
** Use of some "global part, non dependant of question type : for example : views/radio/radio.php with only the input[radio] 
** Or all part in his specific QuestionType/ directory
** Possible solution : for example : views/survey/questions/arrays/array/dropdown/item.php include views/survey/item/select.php
* Replace variable by object
** Actually : controllers make all vars, and views use only fixed vars. 
** Maybe it's best to send the question object (with lang), the array of sub questions object, the array of answers object, the array of question attributes
* HTML5
** nav/section etc .... must leave in template (I think) : confirm ?
** Usage of HTML5 input : leave it for plugin OR in core ? Difficulty with some input : for example input[date] is totally not adaptable, only browser dependant. Same for input[number] : no radix control. (More work than i want to do actually  [[User:DenisChenu|Denis]] ([[User talk:DenisChenu|talk]]) )
* no-js functionality (modernizer)
** Add no-js/js class in Core (html class="no-js") , and add an helper class js-hidden js-display (bootstrap don't have one) : https://modernizr.com/docs#no-js (because I ( [[User:DenisChenu|DenisChenu]] ([[User talk:DenisChenu|talk]]) ) like it ;) )
** Did we need other modernizer feature ?

= Possible next steps for better templates =
To make maintaining templates easier and offering more flexibility to template designers, we need a cleaner separation of code and possibly implement the concept of child themes (this is what Wordpress calls it).

== Short term: 1 or 2 months ==
''(Could be Limesurvey 2.6)''
* First: Clean up question views HTML and the templates PSTPL files (un-nesting col-*-* statements)
* Have one basic template using Bootstrap's main details only (Tammo has one at hand)
* Create the three shipped templates based on that template
* ... please continue...

:: '''Answer from''' -- ([[User:LouisGac|LouisGac]] ([[User talk:LouisGac|talk]])) 
:: IMHO: in this milestone, the default bootstrap classes should not be touched in the HTML. Removing them could make hard to keep the 2.5 core templates working, and so could take much more time to complete. The goal of this milestone should be to clean the HTML, not to make it  ''CSS framework agnostic''.
:: to say it in a different way: '''cleaning up the HTML doesn't mean removing bootstrap.'''
:: When question object will be ready, it will be easy to provide different HTML flows (like today with view override), and so to have different HTML compatible with different CSS Frameworks: Bootstrap, foundation, or even home made ones.

== Long term: December 2016? ==
''(Could be Limesurvey 3)''
* Switch to a template engine (Twig, maybe Mustache)
* Implement concept of child themes and child-child-themes
* Clearly separate HTML structure and functions
* Maybe start a fundraiser for getting a template engine implemented? (Tammo and Mazi may donate something as well)
* ... to be continued...

:: '''Answer from''' -- ([[User:LouisGac|LouisGac]] ([[User talk:LouisGac|talk]])) 
:: Child theme is easy to implement, and can be done in the first milestone. 
:: I'm not sure to understand the point ''Clearly separate HTML structure and functions''

= Linked mantis =

* Mantis tracker tag : [https://bugs.limesurvey.org/search.php?sticky=on&sort=last_updated&dir=DESC&hide_status=90&tag_string=answers_html&match_type=0 answers_html]

* 11463: Unable to vertical align Radio button without javascript https://bugs.limesurvey.org/view.php?id=11463 . In fact : not unbale , but more difficult (think default can have this option)
* 11449: Re-adding real label https://bugs.limesurvey.org/view.php?id=11449
* 10894: Bad heading and other semantic and accessibility issue + bad HTML5 structure https://bugs.limesurvey.org/view.php?id=10894 look at oit after core HTML.
* 11500: output of function {QUESTION_MANDATORY} is not readable for screenreaders https://bugs.limesurvey.org/view.php?id=11500
* ...

= Next improvement =
== Extendable template ==
Allow a template to extend another template, extend another template, extend core template (child and child-child themes). (See Talk). For whole HTML/js/css part (+js+css). By default (without updating config.php)
* [[User:DenisChenu|DenisChenu]] : think we need a cache system for this ( runtime/templatename ) for example (for php view page, because test file is time consuming)
* [[User:DenisChenu|DenisChenu]] : see https://github.com/LimeSurvey/LimeSurvey/commit/f1e783477051b1e97750dc386a0a5ce9a6324f1b for the 'default-template' package : css + js. And see example of usage in https://github.com/LimeSurvey/LimeSurvey/commit/fbf2ff1a58eefd04c82e4a52297fe440df174eee

[[Category:Development]]
[[Category:Template]]
[[Category:Plugin Development]]

= Testing =

To be able to merge painlessly into master branch, please make sure to test regularly. Write down what you tested and which test survey, which question etc. Use the "Denis' new HTML" project on Mantis to report bugs.

Also make sure to merge the ''other way'', that is, from master into your branch, regularly. That way each merge is small and manageable.

{|
! Date !! Name !! Description !! Result
|-
| 2016-09-07 || Olle || Basic testing || Everything OK! Or: Added some bugs on mantis
|}