0_COMPATIBILITY_TABLES_ADJUST_FORM.md

Compatibility tables: Changing forms to use new system

Current situation

We have Template:CSS_Property included in all CSS properties showing output of compatibility tables.

It assumes that the last part of the current page name MATCHES EXACTLY the same thing as inside the compat data JSON file. Which is not ideal.

For example:

• /wiki/css/properties/border-radius is fine in compat/data-human.json, search for ":root > .data > .css > .border-radius", but
• /wiki/css/selectors/pseudo-classes/:active isn’t fine compat/data-human.json, search for ":root > .data > .css > .pseudo-active"

Ideally, we need to have a form input where we can make adjustments.

Steps

Those are suggestions. You can adjust in any way you want :)

• Create three properties [http://docs.webplatform.org/test/Special:CreateProperty]
  • Compatibility_topic
  • Compatibility_feature
  • Compatibility_format
• Create form [http://docs.webplatform.org/test/Special:CreateForm]
  • Form:Compatibility

Last step

Not to forget to remove hardcoded in [http://docs.webplatform.org/w/index.php?title=Form:CSS_Property&action=edit] (and tell Renoir, to make sure SMW doesn’t break)

Template:Compatibility

<noinclude>
== Compatibility Template ==
Display a compatibility table.

[[File:compatibility-table-sample.png|800px|link=|How a browser feature compatibility table is rendered]]

=== Logistics ===
* '''Project page''':  See  [[WPD:Projects/CompaTables]]
* '''Implementation details''':  See  [[WPD:Infrastructure/Components/CompaTables]]
* '''Add data''': Make a [https://github.com/webplatform/compatibility-data ''pull requests'' in '''compatibility-data''' repo]
* '''Found bug in visualisation''': Create an issue in [https://github.com/webplatform/mediawiki/issues/new?title=Table%20display%20issue%20in%20URL%20&labels=CompaTables&assignee=renoirb&body=URL:%20Insert%20address%20where%20you%20found%20the%20problem the CompaTables Extension project issue tracker]

=== Origin of the data ===
Data was originally polled from [http://developer.mozilla.org Mozilla Developer Network ("MDN")] as a one time import. The data is read using an  [https://github.com/webplatform/mdn-compat-importer importer we made for this purpose] form MDN, converted into a JSON file (see below) that we used as a starting point.

=== How to improve the data ===
At this time you can add corrections by  [https://github.com/webplatform/compatibility-data making a ''pull requests''].

=== Can I use the data? ===
Yes, please. We provide both [http://docs.webplatform.org/compat/data.json '''data.json''' raw data] that we also use to generate this view, and a [http://docs.webplatform.org/compat/data.json "''human-friendly''" ('''data-human.json''') version] counterpart.

== How to use ==
Two ways to use. Either through an ''HTML-ish'' tag in a Wiki page, or a through this template.

* '''[[Property:Compatibility_format]]''' can be:
** <tt>table</tt>
** <tt>list</tt>
* '''[[Property:Compatibility_topic]]''' can be one of the top level:
** <tt>html</tt>
** <tt>css</tt>
** <tt>html</tt>
** <tt>svg</tt>
** <tt>mathml</tt>
** <tt>webapi</tt>
** <tt>webgl</tt>
** <tt>events</tt>
** <tt>javascript</tt>
** <tt>websockets</tt>
* '''[[Property:Compatibility_feature]]''': is a one word 2nd level inside the compatibility table file.


=== Tag ===
In a wiki page, include a <tt>&lt;compatibility /&gt;</tt> tag like this:

<syntaxHighlight><compatibility topic="css" feature="border-radius" format="table"></compatibility></syntaxHighlight>

=== In a template ===

This is most useful if its included in a page that covers a given topic (e.g. CSS, SVG, etc.). For example, in CSS, we have a block in [[Template:CSS_Property]].

<pre>
{{Compatibility
|topic=
|feature=
|format=table
}}
</pre>

In the end, it gets called like this:

    <nowiki>{{#tag:compatibility||feature={{#titleparts:{{PAGENAME}}||-1}}|topic=css|format=table}}</nowiki>

This snippet would be perfect for any of the CSS property pages. In the end, it would take the URL we are in, and put it in the <tt>feature=""</tt> for us.

For example, if we were on a page that has this present template call at the address <tt>/test/css/properties/border-radius</tt>, it would take the '''<tt>border-radius</tt>''' part and put it so the Template as if we would had manually called it like this:

    <nowiki><compatibility feature="border-radius" topic="css" format="table"></compatibility></nowiki>

</noinclude><includeonly>
{{#tag:compatibility||feature={{{Compatibility_feature|}}}|topic={{{Compatibility_topic|}}}|format={{{Compatibility_format|table}}}}}
</includeonly>

Template:Compatibility_Form_Section

<!--

   IMAGINE ITS THE FULL FORM, two attempts
   
   Unclear how to embed a form with another. I seen about {{#forminput:form=Compatibility}} but unclear if its to define or import. 


   1st attempt
      
      NOTE: Not sure its better to use same form, but rather find a way to include forms instead of hardcode new forms and property dependencies.
   
-->
<!-- Begin template for new JSON Compatibility reader -->
<nowiki>{{{for template|Compatibility|embed in field=Compatibility[Compatibility_topic]|embed in field=Compatibility[Compatibility_feature]|embed in field=Compatibility[Compatibility_format]}}}</nowiki>
<nowiki>{{{end template}}}</nowiki>
<!-- End template for new JSON Compatibility reader --> 
<!--










   2nd attempt
      
      NOTE: Not sure either, to hardcode forms directly there. Is that template a Form template, or a template template. In this case, i tried to extend the existing form with our own (e.g. keep not required, remove the rest). Need also to check if we wont lose data too.
      
-->
==Compatibility Section==
{| class='formtable'
! Not required
| <nowiki>{{{field|Not_required|property=Not_Required|input type=checkbox}}}</nowiki> (Suppresses printing of the entire section when checked)
|-
! Topic
| <nowiki>{{{field|Compatibility_topic|property=Compatibility_topic|values=html,css,html,svg,mathml,webapi,webgl,events,javascript,websockets}}}</nowiki>
|-
! Feature name
| <nowiki>{{{field|Compatibility_feature|property=Compatibility_feature|input type=text|class=behavior-autocomplete-from-json}}}</nowiki>
|}
<!-- Begin template for new JSON Compatibility reader -->
<nowiki>{{{for template|Compatibility|embed in field=Compatibility_Section[Compatibility_topic]|embed in field=Compatibility_Section[Compatibility_feature]}}}</nowiki>
<nowiki>{{{end template}}}</nowiki>
<!-- End template for new JSON Compatibility reader -->

\o/ @eliezerb