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 draft HTML of this widget structure.

Structure & relationships parts of widget

Container HTML View widget with iFrame showing view of nearby projects Add button & script in lower which opens entry widget in modal popup

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 & 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.