User:JDrewniak (WMF)/notes/The issues with PageIssues js

= Responsibilities =

The initialization function,  and essentially the whole feature, does the following:
 * 1) Define an initialization module for entire page-issues feature. Currently this means:


 * identifies pages-issues on the page
 * parses their severities
 * adds classes & icons to style them accordingly
 * attaches events that open the overlay
 * when clicking on the top page-issues, overlay should display all issues
 * when clicking on section issues, only display issues from that section
 * adds a 'read more' button.

This is the feature in a nutshell, (minus instrumentation). The functionality should work accordingly for the following contexts:


 * only work on the main namespace, for the following scenarios:
 * single issues at the top of the page
 * groups of issues at the top of the page
 * single issues in sections
 * group of issues in sections

The majority of effort has been made to parse the enwiki page-issue markup (ambox) templates, given that many wikis use that as a base for their templates.

= Walking through the functions = CreateLinkElement

Creates a link element.

createBanner

Given a, create (i.e. invoke) all the page-issues features, in-place, on a single (or not!) DOM element, populate a global   variable, and return the modified page-issues elements (or remove them!).

function walkthrough


 * GIVEN
 * ,(object) ,(string)  ,(number)   (boolean - the new or old treatment?),   (object)
 * DEFINE
 * the overlay URL fragment
 * the element CSS
 * an empty array of
 * IF we're working with issues at the top of the page:
 * select all the issues on the page ( var $metaData),
 * otherwise select the issues in the section
 * remove something called  from that selection
 * LOOP through each element in the selection
 * IF the element contains exactly zero child elements that match the, and has text:
 * create a PageIssue data model of that element using
 * add that PageIssue to the array of.
 * POPULATE  with the   for this.
 * IF there are, and   (new treatment) is true
 * APPEND and icon to the first issue
 * CREATE a "learn more" button
 * IF this is a "multiple issues" template, insert the button in one place
 * ELSE insert the button in a different place
 * ATTACH the click handlers
 * ELSE
 * and insert that "this page has issues" link at the top of the page.
 * remove the selected issues from the DOM (var $metaData)
 * RETURN selected issues (var $metaData)