View source for Sharing Engine/Widget structure

== Principles ==
*Separation between 'view widget' and 'input widget', though there is/may be two variants of the 'view widget' for placement in sidebar vs. main body of page.
*iFrame issues to be avoided where possible because iFrames do not allow items to 'project' outside their boundaries.
*There are two parts to a widget, both are contained by a 'container'...
**Only the 'View Widget' should exist inside an iFrame within the container where it will be contained/constrained in size.
**The 'Entry Widget' will pop up its own modal div with its iFrame inside it to maximise space and allow it to 'break out' of a hosting site's sidebar/footer etc.
*Responsive theming everywhere inside iFrames.
*Existing Drupal forms, user processes and behaviours will do 99% of the work, with tweaks from custom code, contributed modules and rules etc.


== Widget structure diagram ==
See the [https://tech.transitionnetwork.org/trac/attachment/ticket/377/widget-structure.html draft HTML of this widget structure].

{| width="150" border="1" cellpadding="10" cellspacing="0"
|+ Structure & relationships parts of widget
|-
| bgcolor="#ffffcc" | '''Container''' HTML<br> 
{| width="200" border="1" cellpadding="3" cellspacing="0"
|-
| bgcolor="#ccffff" | 
'''View widget''' with iFrame showing view of nearby projects 

<br> 

<br> 

<br> 

<br> 

<br> 

|-
| bgcolor="#ffccff" | 
'''Add button''' &amp; script in lower which opens&nbsp;'''entry widget''' in modal popup<br> 

|}

|}

<br> 

=== Key ===
*'''Container''' - this is the HTML a participating user cut/pastes into their website. It is a plain DIV with simple styling that holds two parts:... 
*'''View widget''' - The upper area of the container holds an iFrame which in turn holds the view widget with nearby projects displayed in a responsive theme 
*'''Add button''' - This is a plain HTML image wrapped in a link back to the Add Project page of transitionnetwork.org. There is a enhancing script that when executed makes the button open a modal DIV &amp; iFrame dialog. This iFrame will be as large as possible, allowing for a border, and will contain the Entry Widget which is the combined login/registration and simplified Project form on TN.org.