Website:MobileWidgets

From WormBaseWiki
Jump to: navigation, search


Introduction

In order to make the website widgets work within the mobile webapp, it's been necessary to (in order):

  • Remove some functions
  • Fix links
  • Make some fixes / JS events
  • Make some elements responsive

All these steps are executed by the processWidgets method of the Widget View class.

Removed stuff

  • script elements - as they may cause errors that break the ajax navigation.
  • Cytoscape Web components have been removed because they use flash.
  • Sequence popups have been removed because at the time the processWidget function was written, there wasn't an easy way to implement them.
  • Star icons in some widgets (such as references), as login / favorites functions are not present in the webapp
  • Search count summary in the references widget
  • Sequence download - removed both buttons and content from the DOM
  • Google map removed from the Natural isolates widget
  • Blast details popup

URLs Fixing

The URLs are fixed by the 'fixLinks' method of Widgets View.

Links

This operation is done on all '<a>' tags. First, we check if the link is referring to an internal or an external resource by looking at the first part of the URL.

If it is external, then the tag is modified to indicate the browser that it should be opened on a new tab.

If it is internal, it might either be a link to another object or a link to a search. The URL is manipulated to be compatible with the format of the webapp (as described in the Router page).

If a meaningful correspondence cannot be found, the link is very likely point at some resource that has not been implemented on this webapp (e.g. GBrowse) and so it gets treated as an external link.

Images

To fix the images location, the first part of the URL in all the src attributes of img tags have been changed to the content of WBMobile.defaults.WEBSITE_URL

JS Fixes

  • Hidden text with the toggle/returned, ev-more and text-min structure - changed arrow icons and created event listeners.
  • Load more results link on references widget - it now opens a search page with all results.

Responsive elements

  • Reduced font size of some elements.
  • Created new tooltips - Tooltips are added to all span elements with a non-empty title attribute.
  • Detail/Highlight boxes on overview widgets are turned into popups for smaller screens.
  • In displaying sequences - removed html breaks from cached widgets, use css for word wrapping.
  • For responsive tables a mix of font size reduction and JQM's table reflow on different breakpoints is used. The method which does the manipulation allows to set the most significant element that should be displayed as row title on smaller screens.

For more details about how the table reflow works, refer to the JQM docs: http://view.jquerymobile.com/1.3.2/dist/demos/widgets/table-reflow/

Popups and tables depend on jQueryMobile, although they could be implemented with custom CSS and JS.