Labs and feasibility (WET ^v4.0.xplugin)

JJ Down IRCC drop down

Last status: Under development

Refine/Show big list of content into a dropdown presentation. The expected behaviour is the user open up the drop down, choose an item, then either he choose again or the content is ajax-in bellow the control.

Next step / Thing to do:

• Create test case
• Review and validate use case
• Develop the plugin
• Find a plugin name it will be named wb-fieldflow
• Allow to pre-configure the main action, like "ajax, redir, handlebars" then each option will be parameter like "query, op, tpl"

Documents

• [Deprecated] Use cases (v1.0.0) [Completed, 2016-09-13]
• Progressive enhancement scenario #1, Simple (v1.0.0) [Completed 2016-09-14]
• Progressive enhancement scenario #2, Multi-level (v1.0.0) [Completed 2016-09-14]
• Exploratory implementation (v1.0.0) [Completed 2016-09-15]
• Use cases (v1.1.0) [Completed, 2016-10-03]

Coding and example

Completed / Thing tested:

• [2016-06-31] Experimental working example
  • Demo
  • WET 4 Plugin source code

  It's support an infinite number of drop down, the limit is the creazyness of the imbricated list.

• [2016-10-13] First use in production, version 1.0.0
  • Working example
  • Documentation
  • Plugin source code (minified)

Fieldflow plugin

Last status: PR submited

Change a simple list into a interactive component

Coding and example

Templating plugin

Last status: Abandonned on Jan 10 2017

Create a templating plugin similar to data-ajax but it could deal with an external json, local variable and get

To do

• Support pre-compiled template

Documents

• Handlebars
• Mustache
• Starcounter Jack, JSON Patch
• JSON Patch (RFC6902)
• JSON Pointer (RFC6901)

Coding and example

Data JSON

Last status: PR sumited

Similar of the data-ajax But it is for JSON file. The main feature is it will support json filtering by URI fragment as specified in section 6 of RFC6901

Coding and example

Documents

• JSON Pointer (RFC6901)
• alexeykuzmin, JSON Pointer [Github]

Quick experiment

,

	// Changes XML to JSON (based on https://davidwalsh.name/convert-xml-json)
	xmlToJson = function ( xml ) {

		// Create the return object
		var obj = {};

		if (xml.nodeType == 1) { // element
			// do attributes
			if (xml.attributes.length > 0) {
			obj["@attributes"] = {};
				for (var j = 0; j < xml.attributes.length; j++) {
					var attribute = xml.attributes.item(j);
					obj["@attributes"][attribute.nodeName] = attribute.nodeValue;
				}
			}
		} else if (xml.nodeType == 3) { // text
			obj = xml.nodeValue;
		}

		// do children
		if (xml.hasChildNodes()) {
			for(var i = 0; i < xml.childNodes.length; i++) {
				var item = xml.childNodes.item(i);
				var nodeName = item.nodeName;
				if (typeof(obj[nodeName]) == "undefined") {
					obj[nodeName] = xmlToJson(item);
				} else {
					if (typeof(obj[nodeName].push) == "undefined") {
						var old = obj[nodeName];
						obj[nodeName] = [];
						obj[nodeName].push(old);
					}
					obj[nodeName].push(xmlToJson(item));
				}
			}
		}
		return obj;
	}

				if ( !fetchOpts.isxml ) {
					fetchOpts.dataType = "json";
				} else {
					fetchOpts.dataType = "xml";
					console.log("set dataType to XML");
				}


....

ar i, i_len, i_cache, backlog;

						if ( fetchOpts.isxml ) {
							console.log(true);
							response = xmlToJson( response );
							console.log(response)
						}

						if ( !fetchOpts.nocache ) {
							try {
								jsonCache[ url ] = response;
							} catch ( error ) {
								return;
							}
						}

JSON Manager

Last status: PR submited

Provide JSON basic manipulation throw patch operation, and could be customized from query string instruction and manage the data as a dataset name.

Coding and example

Documents

• JSON Patch (RFC6902)
• Starcounter Jack, JSON Patch [Github]

URL Mapping

Last status PR Submited

Performing action based on URL query. Check to re-use the concept of the JSON manager. Inspired by discussion on #6622 where applying filtering to a data-table based on URL query.

Create a dedicated reusable module for the "action" management. So it will be able to be re-used by wb-fieldflow and url-mapping plugin

Isolate and re-use the logic of managing the mapping of and URL. Make it a component by it's own, like the action manager

Coding and example

File Meta

Last status: Prototyped

Add the file size and the file type next to a PDF link or other documents. In other word this is to convert in a WET plugin the file-size.js used in severals page on IRCC website. was known as filesize.

Coding and example

Responsive tables with TableSaw

Last status: Under prototyping with exploration

Provide a responsive table solution in WET.

Next step / Thing to do:

• Create use case
• Create test case
• Use the latest version of tablesaw
• Review completed work and all resources
• Review and open a discussion about the developer notes and concerns

Documents

• Developer notes and concerns 2015-02-10
• Expirimental tablesaw WET plugin source code 2016-09-13

Completed / Thing tested:

• [2016-09-13] Experimental example (in WET 4.0.18 and Tablesaw v1.0.3)
  • Column swipe demo
  • Column stack demo
  • Simple plugin call demo
  • Tablesaw WET plugin source code
• [2015-02-10] Experimental example (in WET 4.0.6 and Tablesaw v1.0.3)
  • Column swipe Demo
  • All Demo
  • Plugin source code: View page source of above example, between line 597 and 879 (for column swipe demo) and between line 599 and 738 (for All demo).

References and ressources

Github issue

• Integrate TableSaw (wet-boew issue #6351)

Techniques for coding complex tables

• Defining a Key Cell
• Defining a Data Row Group
• Summaries a Data Row Group
• Structuring the Header Row
• Describing a Row Header Cell
• Describing a Row Group Header Cell
• Defining Column Group Header
• Structuring the Header Column Cell
• Defining a Data Column Group
• Summaries a Data Column Group
• Describing a Column Header Cell
• Defining a Layout Cell

Other:

• Table usability concept
• Table Validator (WET 4.x)
• HTML Table Validator - Table Usability (WET 3.1)
• Resource for coding complex tables
• Simplifying table

HTML API

Last status: Functional and one know implementation

Operate an app by using a customized form interface, then on submit parsing the html result into JSON, then display the result by specifying a template

This is a plugin divided in part:

Plugin in context

Interface and interaction with the user.

Form scraping

Plugin that contain a pre-configured set of instruction that allow the form scraping

Controler

Core plugin that control the execution order

The plugin run in the following sequence:

1. An anchor with a link to the web form to complete Task A
2. From the config, an inline form, compatible with the destination form, in ajaxed under the link.
3. The inline form is submited
4. The data submission is submited, either to a RESTful API or directly to the destination form
5. If is through the destination form
   1. Send a form post
   2. Wait for an answer
   3. Run a specialized script to extract data
   4. Uniform the presentation of the data, like in a form of an API, also at that stage re-adjust well know information like the language and data status
   5. The data is available through a standardized JSON string
6. Load the appropriate HTML template based on the data status
7. Run a light template system that fill the template with the data retreived from the result data.
8. Output the HTML formated result

Working example: http://www.ic.gc.ca/eic/site/cipointernet-internetopic.nsf/eng/h_wr00004.html

WET Editor interface

Create a baseline template and API to be used when a WET plugin need to be configured. At the very limit it could generate the json for the data-* attribute or ideally it will generated the pre-configured plugin code and it will be able to read and modified from a pre-configured plugin code.

Some material to start with

• visual - tab one
• visual - tab two
• html code (Need to view source)

Bars with value Charts and graph

Last status: Feasibility demonstrated

Show the actual value on the top of the bar chart by using flotcharts drawing engine.

Next step / Thing to do:

• Check https://github.com/winne27/flot-valuelabels if could fit the needs. (2017-01-22)
• Build a working example using WET framework
• Possibility of conflic when using multiple graph type

Completed / Thing tested:

• [2017-01-22] Trying to use https://github.com/joetsoi/flot-barnumbers

  Patch for wet-boew v4.0.24: Apply the patch then run bower update then run grunt then see the charts working example.

  Know issue do not work when charts have mixed negative and positive value, and when the charts scalling value is very large vs short.

• [2013-12-03] Standalone working example
  • Demo
  • Flot plugin
  • Alternate demo (Standalone)

Curved lines Charts and graph

Last status: Working

Add effect to a line charts to have curved line when the direction change.

Next step / Thing to do:

• Review the working example
• Change how the plugin is loaded in WET
• Check if it is valuable to have that plugin included in WET

Completed / Thing tested:

• [2016-09-07] Working example in WET 4.0.18
  • Demo
• [2014-08-15] Working example in WET 4.x
  • Demo
  • Flot plugin

Performance and use case Charts and graph

Last status: Data Captured

Contain a real use case with hundred of charts in one page.

Captured on 2017-01-20

Load some flot plugin that improve the chart and display the value (almost all of them), it have charting grouping (like figure 15.15), and have dual chart in the same drawing board.

Next step / Thing to do:

• Integrate the flot plugin in WET
• See if we can improve the performance of wet-boew chart, that example for a size of 2606.25KB it only take 12.68s to render on my ff dev edition. (including all the charts)
• Create a test case for WET

Documents

See all the content of this folder. You will find flot plugin source code, several screen shot and the original html page source code. It seem to be running on WET 4.0.20 for chart dependency, but the site run on wet-boew 4.0.22