[rhmessaging-commits] rhmessaging commits: r3215 - mgmt/trunk/notes.

Author: eallen Date: 2009-03-26 10:32:55 -0400 (Thu, 26 Mar 2009) New Revision: 3215 Added: mgmt/trunk/notes/fullpage widgets.txt Log: Notes on how to make a block of HTML full page. Added: mgmt/trunk/notes/fullpage widgets.txt =================================================================== --- mgmt/trunk/notes/fullpage widgets.txt (rev 0) +++ mgmt/trunk/notes/fullpage widgets.txt 2009-03-26 14:32:55 UTC (rev 3215) @@ -0,0 +1,53 @@ +How to implement a full page widget + +Any block of HTML can be made full page in cumin. By full page, I mean it can be displayed using most of the browser windows width and height. + +To do this, you need to add the class "fullpageable" to the block of HTML. If there is no surrounding block, you'll need to add one. +For example, to make the following HTML fullpage-able: + <h2>This is a cool widget</h2> + {cool_widget} + +you'll need to surround the HTML with an element that has a class of "fullpageable" like this: + <div class="fullpageable"> + <h2>This is a coll widget</h2> + {cool_widget} + </div> + +If the HTML already has a surrounding block, you can just add the "fullpageable" class: + <p class="explain"> + {important_stuff} + </p> + + can be made fullpageable like this: + + <p class="explain fullpageable"> + {important_stuff} + </p> + +How it looks: + A block of HTML that is fullpageable will have a special mouseover style. + When the mouse if over any part of the HTML, there will be a light purple bar at the top of the HTML with a + small icon in the upper right corner. + Clicking on the icon will display the HTML in a block that is about 95% of the page's width and height. + If the contents of the HTML automatically sizes to it's container, it should expand to the full page. + + If however, the HTML is a fixed size, it won't expand. Instead, you may want to use the background + update ability of cumin to re-render the widget using it's new container size. + +Under the kimono: + When the page first loads, there is a script that runs and finds all elements containing the class "fullpageable". + It then surrounds each of those elements with some divs and wires in some mouseover and click behaviors. + When the fullpage icon is clicked, the handler will "promote" the fullpageable HTML to be a direct child + of the document.body. This allows the HTML to be positioned and sized to the full window. Clicking the + icon again will restore the HTML to it's original position in the DOM. + + Additionally, when any block of HTML is made fullpage, the current background update url is modified to + indicate that cumin is in fullpage mode. This allows any widgets contained in the fullpaged HTML to modify + how they are rendered to take advantage of the extra screen space. During render, widgets can optionally call the + self.page.get_fullpage(session) method to determine if they should render normally, or full page. + If the return of self.page.get_fullpage(session) is not None, the widget can render full page. + The value returned by self.page.get_fullpage(session) is the new width the widget can occupy. + + + + \ No newline at end of file